From 040138c2805dc3c18a13c5974a08f74a9aae23e0 Mon Sep 17 00:00:00 2001 From: Jon Kuperman Date: Wed, 12 Oct 2016 15:57:44 -0700 Subject: [PATCH] Improve UI/UX of bookmark popup --- .../brave/locales/en-US/app.properties | 6 +- .../brave/locales/en-US/menu.properties | 5 +- docs/state.md | 1 + docs/windowActions.md | 4 +- js/actions/windowActions.js | 6 +- js/components/addEditBookmark.js | 81 ++++++++++-------- js/components/main.js | 10 +-- js/components/navigationBar.js | 31 ++++--- js/contextMenus.js | 6 +- js/stores/windowStore.js | 3 +- less/forms.less | 82 +++++++++++++++++++ less/navigationBar.less | 14 ++++ 12 files changed, 187 insertions(+), 62 deletions(-) diff --git a/app/extensions/brave/locales/en-US/app.properties b/app/extensions/brave/locales/en-US/app.properties index ea1ee92fa10..905a6555e2e 100644 --- a/app/extensions/brave/locales/en-US/app.properties +++ b/app/extensions/brave/locales/en-US/app.properties @@ -129,9 +129,9 @@ allowFlashPlayer=Allow {{origin}} to run Flash Player? ledgerBackupText=Your ledger keys are {{paymentId}} and {{passphrase}} error=Error caseSensitivity=Match case -nameField=Title: -locationField=Location: -parentFolderField=Folder: +nameField=Title +locationField=Location +parentFolderField=Folder save=Save rememberDecision=Remember this decision bookmarksToolbar=Bookmarks Toolbar diff --git a/app/extensions/brave/locales/en-US/menu.properties b/app/extensions/brave/locales/en-US/menu.properties index a0c2739f543..fc5bde1a31c 100644 --- a/app/extensions/brave/locales/en-US/menu.properties +++ b/app/extensions/brave/locales/en-US/menu.properties @@ -3,6 +3,7 @@ closeTab=Close closeOtherTabs=Close other Tabs bookmarkPage=Bookmark Page bookmarkLink=Bookmark This Link +bookmarkAdded=Bookmark Added openFile=Open File… openLocation=Open Location… openSearch=Search for "{{selectedVariable}}" @@ -19,7 +20,8 @@ paste=Paste pasteAndGo=Paste and Go pasteAndSearch=Paste and Search pasteWithoutFormatting=Paste without formatting -delete=Delete +done=Done +remove=Remove selectAll=Select All findNext=Find Next findPrevious=Find Previous @@ -50,6 +52,7 @@ clearSiteData=Clear All Cookies and Site Data… recentlyClosed=Recently Closed recentlyVisited=Recently Visited bookmarks=Bookmarks +viewBookmarks=View all bookmarks addToFavoritesBar=Add to Favorites Bar window=Window minimize=Minimize diff --git a/docs/state.md b/docs/state.md index 40d4779921f..9bfb9095478 100644 --- a/docs/state.md +++ b/docs/state.md @@ -371,6 +371,7 @@ WindowStore bookmarkDetail: { currentDetail: Object, // Detail of the current bookmark which is in add/edit mode originalDetails: Object // Detail of the original bookmark to edit + shouldShowLocation: Boolean // Whether or not to show the URL input }, braveryPanelDetail: { advancedControls: boolean, // If specified, indicates if advanced controls should be shown diff --git a/docs/windowActions.md b/docs/windowActions.md index e3a05e9cb4b..674500adf87 100644 --- a/docs/windowActions.md +++ b/docs/windowActions.md @@ -467,7 +467,7 @@ Dispatches a message to set the find-in-page details. -### setBookmarkDetail(currentDetail, originalDetail, destinationDetail) +### setBookmarkDetail(currentDetail, originalDetail, destinationDetail, shouldShowLocation) Dispatches a message to set add/edit bookmark details If set, also indicates that add/edit is shown @@ -480,6 +480,8 @@ If set, also indicates that add/edit is shown **destinationDetail**: `Object`, Will move the added bookmark to the specified position +**shouldShowLocation**: `Object`, Whether or not to show the URL input + ### setContextMenuDetail(detail) diff --git a/js/actions/windowActions.js b/js/actions/windowActions.js index 8f6505c096a..c563db17166 100644 --- a/js/actions/windowActions.js +++ b/js/actions/windowActions.js @@ -643,13 +643,15 @@ const windowActions = { * @param {Object} currentDetail - Properties of the bookmark to change to * @param {Object} originalDetail - Properties of the bookmark to edit * @param {Object} destinationDetail - Will move the added bookmark to the specified position + * @param {Object} shouldShowLocation - Whether or not to show the URL input */ - setBookmarkDetail: function (currentDetail, originalDetail, destinationDetail) { + setBookmarkDetail: function (currentDetail, originalDetail, destinationDetail, shouldShowLocation) { dispatch({ actionType: WindowConstants.WINDOW_SET_BOOKMARK_DETAIL, currentDetail, originalDetail, - destinationDetail + destinationDetail, + shouldShowLocation }) }, diff --git a/js/components/addEditBookmark.js b/js/components/addEditBookmark.js index 66e9ed6110e..b901f1a7300 100644 --- a/js/components/addEditBookmark.js +++ b/js/components/addEditBookmark.js @@ -4,7 +4,6 @@ const React = require('react') const ImmutableComponent = require('./immutableComponent') -const Dialog = require('./dialog') const Button = require('./button') const windowActions = require('../actions/windowActions') const appActions = require('../actions/appActions') @@ -24,6 +23,7 @@ class AddEditBookmark extends ImmutableComponent { this.onClose = this.onClose.bind(this) this.onClick = this.onClick.bind(this) this.onSave = this.onSave.bind(this) + this.onViewBookmarks = this.onViewBookmarks.bind(this) this.onRemoveBookmark = this.onRemoveBookmark.bind(this) } @@ -51,6 +51,10 @@ class AddEditBookmark extends ImmutableComponent { } } componentDidMount () { + // Automatically save if this is triggered by the url star + if (!this.props.shouldShowLocation) { + this.onSave(false) + } this.bookmarkName.select() this.bookmarkName.focus() } @@ -95,7 +99,7 @@ class AddEditBookmark extends ImmutableComponent { ) appActions.changeSetting(settings.SHOW_BOOKMARKS_TOOLBAR, !isFirstBookmark || showBookmarksToolbar) } - onSave () { + onSave (closeDialog = true) { // First check if the title of the currentDetail is set if (!this.bookmarkNameValid) { return false @@ -104,13 +108,19 @@ class AddEditBookmark extends ImmutableComponent { this.showToolbarOnFirstBookmark() const tag = this.isFolder ? siteTags.BOOKMARK_FOLDER : siteTags.BOOKMARK appActions.addSite(this.props.currentDetail, tag, this.props.originalDetail, this.props.destinationDetail) - this.onClose() + if (closeDialog) { + this.onClose() + } } onRemoveBookmark () { const tag = this.isFolder ? siteTags.BOOKMARK_FOLDER : siteTags.BOOKMARK appActions.removeSite(this.props.currentDetail, tag) this.onClose() } + onViewBookmarks () { + this.onClose() + windowActions.newFrame({location: 'about:bookmarks'}, true) + } get displayBookmarkName () { if (this.props.currentDetail.get('customTitle') !== undefined) { return this.props.currentDetail.get('customTitle') @@ -118,42 +128,49 @@ class AddEditBookmark extends ImmutableComponent { return this.props.currentDetail.get('title') || '' } render () { - return -
-
-
-
- { - !this.isFolder - ?
-
+ } } diff --git a/js/components/main.js b/js/components/main.js index c6f3332c04a..b6d168d1213 100644 --- a/js/components/main.js +++ b/js/components/main.js @@ -32,7 +32,6 @@ const ClearBrowsingDataPanel = require('./clearBrowsingDataPanel') const ImportBrowserDataPanel = require('../../app/renderer/components/importBrowserDataPanel') const AutofillAddressPanel = require('./autofillAddressPanel') const AutofillCreditCardPanel = require('./autofillCreditCardPanel') -const AddEditBookmark = require('./addEditBookmark') const LoginRequired = require('./loginRequired') const ReleaseNotes = require('./releaseNotes') const BookmarksToolbar = require('../../app/renderer/components/bookmarksToolbar') @@ -909,6 +908,7 @@ class Main extends ImmutableComponent { startLoadTime={activeFrame && activeFrame.get('startLoadTime') || undefined} endLoadTime={activeFrame && activeFrame.get('endLoadTime') || undefined} loading={activeFrame && activeFrame.get('loading')} + bookmarkDetail={this.props.windowState.get('bookmarkDetail')} mouseInTitlebar={this.props.windowState.getIn(['ui', 'mouseInTitlebar'])} searchDetail={this.props.windowState.get('searchDetail')} enableNoScript={this.enableNoScript(activeSiteSettings)} @@ -993,14 +993,6 @@ class Main extends ImmutableComponent { ? : null } - { - this.props.windowState.get('bookmarkDetail') - ? - : null - } { noScriptIsVisible ? + { + this.props.bookmarkDetail + ? + : null + }
{ isSourceAboutUrl(this.props.location) || this.titleMode - ? + ? null : this.loading ?
} -