From e5ecc26fd744156d38f2a3aa3d8b866965046c0d Mon Sep 17 00:00:00 2001 From: Cezar Augusto Date: Thu, 20 Apr 2017 01:02:35 -0300 Subject: [PATCH] Make notificationBar tab-specific Auditors: @bradleyrichter, @jonathansampson Close #6935 --- .../components/styles/commonStyles.js | 6 ++-- app/renderer/components/styles/global.js | 2 ++ app/renderer/components/tabs/tab.js | 9 +++++ app/renderer/components/tabs/tabs.js | 1 + app/renderer/components/tabs/tabsToolbar.js | 1 + js/components/main.js | 18 ++++++---- js/components/notificationBar.js | 36 ++++++++++++++++++- js/lib/urlutil.js | 9 +++++ 8 files changed, 72 insertions(+), 10 deletions(-) diff --git a/app/renderer/components/styles/commonStyles.js b/app/renderer/components/styles/commonStyles.js index 030756b8673..223098fc3d6 100644 --- a/app/renderer/components/styles/commonStyles.js +++ b/app/renderer/components/styles/commonStyles.js @@ -174,10 +174,12 @@ const styles = StyleSheet.create({ width: '100%', cursor: 'default', userSelect: 'none', - marginTop: globalStyles.spacing.navbarMenubarMargin + ':last-child': { + borderBottom: `5px solid ${globalStyles.color.notificationBottomBorderColor}` + } }, notificationBar__notificationItem: { - backgroundColor: '#ffefc0', + backgroundColor: globalStyles.color.notificationItemColor, boxSizing: 'border-box', borderTop: `1px solid ${globalStyles.color.tabsToolbarBorderColor}`, borderBottom: `1px solid ${globalStyles.color.tabsToolbarBorderColor}`, diff --git a/app/renderer/components/styles/global.js b/app/renderer/components/styles/global.js index c81b59f4833..56a2413500e 100644 --- a/app/renderer/components/styles/global.js +++ b/app/renderer/components/styles/global.js @@ -75,6 +75,8 @@ const globalStyles = { statsBlue: '#0796fa', statsLightGray: '#999999', defaultIconBackground: '#F7F7F7', + notificationItemColor: '#f1e9e5', + notificationBottomBorderColor: '#ff5500', almostInvisible: 'rgba(255,255,255,0.01)', urlBarOutline: '#bbb', alphaWhite: 'rgba(255,255,255,0.8)' diff --git a/app/renderer/components/tabs/tab.js b/app/renderer/components/tabs/tab.js index 9b215c4f868..d4aeaaa39a7 100644 --- a/app/renderer/components/tabs/tab.js +++ b/app/renderer/components/tabs/tab.js @@ -14,6 +14,7 @@ const NewSessionIcon = require('./content/newSessionIcon') const PrivateIcon = require('./content/privateIcon') const TabTitle = require('./content/tabTitle') const CloseTabIcon = require('./content/closeTabIcon') +const {NotificationBarCaret} = require('../../../../js/components/notificationBar') // Actions const windowActions = require('../../../../js/actions/windowActions') @@ -41,6 +42,7 @@ const throttle = require('../../../../js/lib/throttle') const {getTabBreakpoint, tabUpdateFrameRate} = require('../../lib/tabUtil') const {isWindows} = require('../../../common/lib/platformUtil') const {getCurrentWindowId} = require('../../currentWindow') +const UrlUtil = require('../../../../js/lib/urlutil') class Tab extends ImmutableComponent { constructor () { @@ -303,6 +305,13 @@ class Tab extends ImmutableComponent { style={this.props.tabWidth ? { flex: `0 0 ${this.props.tabWidth}px` } : {}} onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}> + { + this.props.isActive && + this.props.notificationBarActive + .includes(UrlUtil.getUrlOrigin(this.props.tab.get('location'))) + ? + : null + }
) } diff --git a/app/renderer/components/tabs/tabsToolbar.js b/app/renderer/components/tabs/tabsToolbar.js index 6517873f4d8..26d266c6347 100644 --- a/app/renderer/components/tabs/tabsToolbar.js +++ b/app/renderer/components/tabs/tabsToolbar.js @@ -68,6 +68,7 @@ class TabsToolbar extends ImmutableComponent { startingFrameIndex={startingFrameIndex} partOfFullPageSet={currentTabs.size === this.props.tabsPerTabPage} fixTabWidth={this.props.fixTabWidth} + notificationBarActive={this.props.notificationBarActive} />
bar.get('frameOrigin')) + return
- { - this.props.appState.get('notifications') && this.props.appState.get('notifications').size && activeFrame - ? - : null - } { showBookmarksToolbar ? frame.get('isFullScreen')) .some(fullScreenMode => fullScreenMode === true) } /> + { + hasNotifications && activeFrame + ? + : null + } { activeFrame && activeFrame.get('findbarShown') && !activeFrame.get('isFullScreen') diff --git a/js/components/notificationBar.js b/js/components/notificationBar.js index b3983b15ee9..f6afb12a670 100644 --- a/js/components/notificationBar.js +++ b/js/components/notificationBar.js @@ -15,6 +15,7 @@ const Button = require('./button') const {StyleSheet, css} = require('aphrodite/no-important') const commonStyles = require('../../app/renderer/components/styles/commonStyles') +const globalStyles = require('../../app/renderer/components/styles/global') class NotificationItem extends ImmutableComponent { clickHandler (buttonIndex, e) { @@ -115,6 +116,14 @@ class NotificationBar extends ImmutableComponent { } } +class NotificationBarCaret extends ImmutableComponent { + render () { + return
+
+
+ } +} + const styles = StyleSheet.create({ flexJustifyBetween: { display: 'flex', @@ -142,7 +151,32 @@ const styles = StyleSheet.create({ textDecoration: 'underline', fontSize: '13px', margin: '5px' + }, + caretWrapper: { + position: 'absolute', + bottom: 0, + left: 0, + right: 0, + zIndex: globalStyles.zindex.zindexTabs, + filter: 'drop-shadow(rgba(0,0,0,0.25) 0px 0px 1px)' + }, + caret: { + position: 'relative', + margin: 'auto', + width: '16px', + ':before': { + content: '""', + position: 'absolute', + bottom: 0, + left: 0, + borderBottom: `6px solid ${globalStyles.color.notificationItemColor}`, + borderLeft: '8px solid transparent', + borderRight: '8px solid transparent' + } } }) -module.exports = NotificationBar +module.exports = { + NotificationBar, + NotificationBarCaret +} diff --git a/js/lib/urlutil.js b/js/lib/urlutil.js index f0e230779e4..1f6a6ff7c76 100644 --- a/js/lib/urlutil.js +++ b/js/lib/urlutil.js @@ -386,6 +386,15 @@ const UrlUtil = { */ isHttpOrHttps: function (url) { return url.startsWith('https://') || url.startsWith('http://') + }, + + /** + * Gets the origin of a given URL + * @param {string} url The URL to get the origin from + * @return {string} url The origin of the given URL + */ + getUrlOrigin: function (url) { + return new window.URL(url).origin } }