Moves bar, adds caret per tab

Author: jonathansampson

app/renderer/components/styles/global.js

@@ -67,7 +67,8 @@ const globalStyles = {
     statsBlue: '#0796fa',
     statsLightGray: '#999999',
     defaultIconBackground: '#F7F7F7',
-    almostInvisible: 'rgba(255,255,255,0.01)'
+    almostInvisible: 'rgba(255,255,255,0.01)',
+    notificationItemColor: '#ffefc0'
   },
   radius: {
     borderRadius: '4px',
@@ -117,7 +118,8 @@ const globalStyles = {
     dialogTopOffset: '30px',
     paymentsMargin: '20px',
     modalPanelHeaderMarginBottom: '.5em',
-    paddingHorizontal: '30px'
+    paddingHorizontal: '30px',
+    caretSize: '20px'
   },
   shadow: {
     switchShadow: 'inset 0 1px 4px rgba(0, 0, 0, 0.35)',

js/components/main.js

@@ -23,7 +23,7 @@ const TabPages = require('./tabPages')
 const TabsToolbar = require('./tabsToolbar')
 const FindBar = require('./findbar')
 const UpdateBar = require('./updateBar')
-const NotificationBar = require('./notificationBar')
+const {NotificationBar} = require('./notificationBar')
 const DownloadsBar = require('../../app/renderer/components/downloadsBar')
 const Button = require('./button')
 const BrowserActionButton = require('../../app/renderer/components/browserActionButton')
@@ -936,6 +936,7 @@ class Main extends ImmutableComponent {
 
     const appStateSites = this.props.appState.get('sites')
     const activeTabShowingMessageBox = !!(activeTab && activeTab.get('messageBoxDetail'))
+    const notificationBarOrigin = this.props.appState.get('notifications').map(bar => bar.get('frameOrigin'))
 
     return <div id='window'
       className={cx({
@@ -1172,12 +1173,6 @@ class Main extends ImmutableComponent {
         }
 
         <UpdateBar updates={this.props.appState.get('updates')} />
-        {
-          this.props.appState.get('notifications') && this.props.appState.get('notifications').size && activeFrame
-          ? <NotificationBar notifications={this.props.appState.get('notifications')}
-            activeFrame={activeFrame} />
-          : null
-        }
         {
           showBookmarksToolbar
           ? <BookmarksToolbar
@@ -1221,12 +1216,19 @@ class Main extends ImmutableComponent {
           key='tab-bar'
           activeFrameKey={activeFrame && activeFrame.get('key') || undefined}
           onMenu={this.onHamburgerMenu}
+          notificationBarActive={notificationBarOrigin}
           hasTabInFullScreen={
             sortedFrames
               .map((frame) => frame.get('isFullScreen'))
               .some(fullScreenMode => fullScreenMode === true)
           }
         />
+        {
+          this.props.appState.get('notifications') && this.props.appState.get('notifications').size && activeFrame
+          ? <NotificationBar notifications={this.props.appState.get('notifications')}
+            activeFrame={activeFrame} />
+          : null
+        }
 
         {
           activeFrame && activeFrame.get('findbarShown') && !activeFrame.get('isFullScreen')

js/components/notificationBar.js

@@ -9,6 +9,9 @@ const ipc = require('electron').ipcRenderer
 const messages = require('../constants/messages')
 const getOrigin = require('../state/siteUtil').getOrigin
 
+const {StyleSheet, css} = require('aphrodite/no-important')
+const globalStyles = require('../../app/renderer/components/styles/global')
+
 class NotificationItem extends ImmutableComponent {
   clickHandler (buttonIndex, e) {
     const nonce = this.props.detail.get('options').get('nonce')
@@ -93,4 +96,53 @@ class NotificationBar extends ImmutableComponent {
   }
 }
 
-module.exports = NotificationBar
+class NotificationBarCaret extends ImmutableComponent {
+  render () {
+    return <div className={css(styles.caretWrapper)}>
+      <div className={css(styles.caret)} />
+    </div>
+  }
+}
+
+const caret = (size, color) => `${Number.parseInt(size, 10) / 2}px solid ${color}`
+
+const styles = StyleSheet.create({
+  caretWrapper: {
+    position: 'absolute',
+    bottom: 0,
+    left: 0,
+    right: 0,
+    zIndex: globalStyles.zindex.zindexTabs
+  },
+
+  caret: {
+    position: 'relative',
+    margin: 'auto',
+    width: globalStyles.spacing.caretSize,
+
+    ':before': {
+      content: '""',
+      position: 'absolute',
+      bottom: 0,
+      left: 0,
+      borderBottom: caret(globalStyles.spacing.caretSize, globalStyles.color.notificationItemColor),
+      borderLeft: caret(globalStyles.spacing.caretSize, 'transparent'),
+      borderRight: caret(globalStyles.spacing.caretSize, 'transparent')
+    },
+
+    ':after': {
+      content: '""',
+      position: 'absolute',
+      bottom: globalStyles.spacing.caretSize,
+      left: globalStyles.spacing.caretSize,
+      borderBottom: caret(0, '#eeeeee'),
+      borderLeft: caret(0, 'transparent'),
+      borderRight: caret(0, 'transparent')
+    }
+  }
+})
+
+module.exports = {
+  NotificationBar,
+  NotificationBarCaret
+}

js/components/tab.js

@@ -26,6 +26,7 @@ const {Favicon, AudioTabIcon, NewSessionIcon,
       PrivateIcon, TabTitle, CloseTabIcon} = require('../../app/renderer/components/tabContent')
 const {getTabBreakpoint, tabUpdateFrameRate} = require('../../app/renderer/lib/tabUtil')
 const {isWindows} = require('../../app/common/lib/platformUtil')
+const {NotificationBarCaret} = require('./notificationBar.js')
 
 class Tab extends ImmutableComponent {
   constructor () {
@@ -230,6 +231,8 @@ class Tab extends ImmutableComponent {
 
   render () {
     const playIndicatorBreakpoint = this.mediumView || this.narrowView
+    const urlOrigin = new window.URL(this.props.tab.get('location')).origin
+    const notificationBar = this.props.isActive && this.props.notificationBarActive.includes(urlOrigin)
     const perPageStyles = StyleSheet.create({
       themeColor: {
         color: this.themeColor ? getTextColorForBackground(this.themeColor) : 'inherit',
@@ -252,6 +255,11 @@ class Tab extends ImmutableComponent {
       style={this.props.tabWidth ? { flex: `0 0 ${this.props.tabWidth}px` } : {}}
       onMouseEnter={this.onMouseEnter}
       onMouseLeave={this.onMouseLeave}>
+      {
+        notificationBar
+          ? <NotificationBarCaret />
+          : null
+      }
       <div className={css(
         styles.tab,
         // Windows specific style

js/components/tabs.js

@@ -143,6 +143,7 @@ class Tabs extends ImmutableComponent {
                 onTabClosedWithMouse={this.onTabClosedWithMouse}
                 tabWidth={this.props.fixTabWidth}
                 hasTabInFullScreen={this.props.hasTabInFullScreen}
+                notificationBarActive={this.props.notificationBarActive}
                 totalTabs={this.props.tabs.size}
                 partOfFullPageSet={this.props.partOfFullPageSet} />)
         }

js/components/tabsToolbar.js

@@ -72,6 +72,7 @@ class TabsToolbar extends ImmutableComponent {
         startingFrameIndex={startingFrameIndex}
         partOfFullPageSet={currentTabs.size === this.props.tabsPerTabPage}
         fixTabWidth={this.props.fixTabWidth}
+        notificationBarActive={this.props.notificationBarActive}
       />
       <TabsToolbarButtons
         noFrames={currentTabs.size === 0}

less/notificationBar.less

@@ -10,6 +10,7 @@
   width: 100%;
   cursor: default;
   -webkit-user-select: none;
+  -webkit-filter: drop-shadow(0 4px 3px #000);
 
   .notificationItem {
     background-color: #ffefc0;