diff --git a/app/extensions/brave/locales/en-US/preferences.properties b/app/extensions/brave/locales/en-US/preferences.properties index c5d8115a7e5..dba56712783 100644 --- a/app/extensions/brave/locales/en-US/preferences.properties +++ b/app/extensions/brave/locales/en-US/preferences.properties @@ -41,6 +41,7 @@ selectedLanguage=Language bookmarkToolbarSettings=Bookmarks Toolbar settings bookmarkToolbar=Show Bookmarks Toolbar bookmarkToolbarShowFavicon=Show favicon for items in Bookmarks Toolbar +bookmarkToolbarShowOnlyFavicon=Show only favicon for items in Bookmarks Toolbar en-US=English (U.S.) nl-NL=Dutch (Netherlands) diff --git a/js/about/preferences.js b/js/about/preferences.js index 501d69b398a..97fbbc7f606 100644 --- a/js/about/preferences.js +++ b/js/about/preferences.js @@ -86,7 +86,7 @@ class SettingItem extends ImmutableComponent { class SettingCheckbox extends ImmutableComponent { render () { - return
+ return
+ diff --git a/js/components/bookmarksToolbar.js b/js/components/bookmarksToolbar.js index 3058a4e70a4..f2730de1a96 100644 --- a/js/components/bookmarksToolbar.js +++ b/js/components/bookmarksToolbar.js @@ -16,8 +16,6 @@ const Button = require('../components/button') const cx = require('../lib/classSet.js') const dnd = require('../dnd') const dndData = require('../dndData') -const settings = require('../constants/settings') -const getSetting = require('../settings').getSetting const calculateTextWidth = require('../lib/textCalculator').calculateTextWidth class BookmarkToolbarButton extends ImmutableComponent { @@ -122,7 +120,9 @@ class BookmarkToolbarButton extends ImmutableComponent { } render () { - let showFavicon = getSetting(settings.SHOW_BOOKMARKS_TOOLBAR_FAVICON) === true + let showFavicon = this.props.showFavicon + const showOnlyFavicon = this.props.showOnlyFavicon + const iconSize = 16 let iconStyle = { minWidth: iconSize, @@ -148,7 +148,8 @@ class BookmarkToolbarButton extends ImmutableComponent { bookmarkToolbarButton: true, draggingOverLeft: this.isDraggingOverLeft && !this.isExpanded, draggingOverRight: this.isDraggingOverRight && !this.isExpanded, - isDragging: this.isDragging + isDragging: this.isDragging, + showOnlyFavicon: showFavicon && showOnlyFavicon })} draggable ref={(node) => { this.bookmarkNode = node }} @@ -170,7 +171,9 @@ class BookmarkToolbarButton extends ImmutableComponent { } { - this.props.bookmark.get('customTitle') || this.props.bookmark.get('title') || this.props.bookmark.get('location') + !this.isFolder && showFavicon && showOnlyFavicon + ? '' + : this.props.bookmark.get('customTitle') || this.props.bookmark.get('title') || this.props.bookmark.get('location') } { @@ -266,12 +269,10 @@ class BookmarksToolbar extends ImmutableComponent { this.fontSize = this.root.getPropertyValue('--bookmark-item-font-size') this.fontFamily = this.root.getPropertyValue('--default-font-family') } - const showFavicon = getSetting(settings.SHOW_BOOKMARKS_TOOLBAR_FAVICON) === true - // Loop through until we fill up the entire bookmark toolbar width let i for (i = 0; i < noParentItems.size; i++) { - const iconWidth = showFavicon && noParentItems.getIn([i, 'favicon']) ? 20 : 0 + const iconWidth = this.props.showFavicon && noParentItems.getIn([i, 'favicon']) ? 20 : 0 const text = noParentItems.getIn([i, 'customTitle']) || noParentItems.getIn([i, 'title']) || noParentItems.getIn([i, 'location']) widthAccountedFor += Math.min(calculateTextWidth(text, `${this.fontSize} ${this.fontFamily}`) + this.padding + iconWidth, this.maxWidth) + this.margin if (widthAccountedFor >= window.innerWidth - overflowButtonWidth) { @@ -321,14 +322,17 @@ class BookmarksToolbar extends ImmutableComponent { contextMenus.onTabsToolbarContextMenu(this.props.activeFrame, closest && closest.props.bookmark || undefined, closest && closest.isDroppedOn, e) } render () { - let showFavicon = getSetting(settings.SHOW_BOOKMARKS_TOOLBAR_FAVICON) === true + let showFavicon = this.props.showFavicon + let showOnlyFavicon = this.props.showOnlyFavicon + this.bookmarkRefs = [] return
) + bookmark={bookmark} + showFavicon={this.props.showFavicon} + showOnlyFavicon={this.props.showOnlyFavicon} />) } { this.overflowBookmarkItems.size !== 0 diff --git a/js/components/main.js b/js/components/main.js index ed3604e92c6..4c6130f3b89 100644 --- a/js/components/main.js +++ b/js/components/main.js @@ -609,6 +609,8 @@ class Main extends ImmutableComponent { const nonPinnedFrames = this.props.windowState.get('frames').filter((frame) => !frame.get('pinnedLocation')) const tabsPerPage = Number(getSetting(settings.TABS_PER_PAGE)) const showBookmarksToolbar = getSetting(settings.SHOW_BOOKMARKS_TOOLBAR) + const showFavicon = getSetting(settings.SHOW_BOOKMARKS_TOOLBAR_FAVICON) + const showOnlyFavicon = getSetting(settings.SHOW_BOOKMARKS_TOOLBAR_ONLY_FAVICON) const siteInfoIsVisible = this.props.windowState.getIn(['ui', 'siteInfo', 'isVisible']) const braveShieldsDisabled = this.braveShieldsDisabled const braveryPanelIsVisible = !braveShieldsDisabled && this.props.windowState.get('braveryPanelDetail') @@ -730,6 +732,8 @@ class Main extends ImmutableComponent { showBookmarksToolbar ? { const isFolder = siteUtil.isFolder(site) const templateItem = { diff --git a/js/stores/appStore.js b/js/stores/appStore.js index aa67c411015..b634a78c3b3 100644 --- a/js/stores/appStore.js +++ b/js/stores/appStore.js @@ -254,6 +254,10 @@ const filterOutNonRecents = debounce(() => { emitChanges() }, 60 * 1000) +/** + * Useful for updating non-react preferences (electron properties, etc). + * Called when any settings are modified (ex: via preferences). + */ function handleChangeSettingAction (settingKey, settingValue) { switch (settingKey) { case settings.AUTO_HIDE_MENU: diff --git a/less/bookmarksToolbar.less b/less/bookmarksToolbar.less index 581f233caf9..133d49a58f0 100644 --- a/less/bookmarksToolbar.less +++ b/less/bookmarksToolbar.less @@ -20,21 +20,30 @@ flex: 1; padding: 3px 10px; height: @bookmarksToolbarHeight; + &.allowDragging { -webkit-app-region: drag; >* { -webkit-app-region: no-drag; } } + &.showFavicon { height: @bookmarksToolbarWithFaviconsHeight; } + + &.showOnlyFavicon { + padding: 0px 0px 0px 10px; + margin: 0px; + } + .overflowIndicator { padding-left: 6px; padding-right: 6px; margin-bottom: auto; margin-top: auto; } + .bookmarkToolbarButton { border-radius: @borderRadius; color: black; @@ -52,35 +61,52 @@ -webkit-user-select: none; align-items: center; display: flex; + &:hover { background: lighten(@tabsBackground, 5%); } + &.draggingOverLeft { &:not(.isDragging) { margin-left: 25px; } } + &.draggingOverRight { &:not(.isDragging) { margin-right: 25px; } } + &.isDragging { opacity: 0.2; } + + &.showOnlyFavicon { + padding: 2px 4px; + margin: auto 0px; + + .bookmarkFavicon { + margin-right: 0px; + } + } + .bookmarkFavicon { background-position: center; background-repeat: no-repeat; display: inline-block; margin-right: 4px; } + .bookmarkText { text-overflow: ellipsis; overflow: hidden; } + .bookmarkFolder { font-size: @bookmarksIconSize; } + .bookmarkFolderChevron { color: #676767; margin-left: 4px;