Migrate to Aphrodite

brave · Mar 16, 2017 · d11a1ee · d11a1ee
1 parent cec486f
commit d11a1ee
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 46 deletions.
diff --git a/app/renderer/components/browserAction.js b/app/renderer/components/browserAction.js
@@ -11,6 +11,7 @@ const BrowserActionBadge = require('../../renderer/components/browserActionBadge
 const cx = require('../../../js/lib/classSet')
 const extensionState = require('../../common/state/extensionState')
 const windowActions = require('../../../js/actions/windowActions')
+const {StyleSheet, css} = require('aphrodite')
 
 class BrowserAction extends ImmutableComponent {
   constructor () {
@@ -38,15 +39,11 @@ class BrowserAction extends ImmutableComponent {
     const browserBadgeText = this.props.browserAction.get('text')
     const browserBadgeColor = this.props.browserAction.get('color')
     // TODO(bridiver) should have some visual notification of hover/press
-    return <div className={cx({browserActionButton: true})}>
+    return <div className={css(styles.browserActionButton)}>
       <Button iconClass='extensionBrowserAction'
-        className={cx({
-          extensionButton: true
-        })}
+        className={css(styles.extensionButton)}
         inlineStyles={{
-          backgroundImage: extensionState.browserActionBackgroundImage(this.props.browserAction, this.props.tabId),
-          backgroundRepeat: 'no-repeat',
-          backgroundPosition: 'center'
+          backgroundImage: extensionState.browserActionBackgroundImage(this.props.browserAction, this.props.tabId)
         }}
         dataButtonValue={this.props.extensionId}
         onClick={this.onClick} />
@@ -58,4 +55,19 @@ class BrowserAction extends ImmutableComponent {
   }
 }
 
+const styles = StyleSheet.create({
+  browserActionButton: {
+    position: 'relative'
+  },
+  extensionButton: {
+    '-webkit-app-region': 'no-drag',
+    backgroundSize: 'contain',
+    height: '17px',
+    margin: '4px 0 0 0',
+    opacity: '0.85',
+    backgroundRepeat: 'no-repeat',
+    backgroundPosition: 'center'
+  }
+})
+
 module.exports = BrowserAction
diff --git a/app/renderer/components/browserActionBadge.js b/app/renderer/components/browserActionBadge.js
@@ -4,6 +4,8 @@
 
 const React = require('react')
 const ImmutableComponent = require('../../../js/components/immutableComponent')
+const {StyleSheet, css} = require('aphrodite')
+const commonStyles = require('./styles/global')
 
 class BrowserActionBadge extends ImmutableComponent {
   constructor () {
@@ -12,8 +14,7 @@ class BrowserActionBadge extends ImmutableComponent {
   }
 
   determineLayout () {
-    const verb = this.refs.badge.offsetWidth > 20 ? 'add' : 'remove'
-    this.refs.badge.classList[verb]('center')
+    this.centered = this.refs.badge && this.refs.badge.offsetWidth > 16
   }
 
   componentDidMount () {
@@ -27,10 +28,36 @@ class BrowserActionBadge extends ImmutableComponent {
   render () {
     return <div
       ref='badge'
-      className='browserActionBadge'
-      style={{backgroundColor: this.props.color}}
+      className={css(
+        styles.browserActionBadge,
+        this.centered && styles.centered
+      )}
+      style={{backgroundColor: this.props.color || commonStyles.color.braveMediumOrange}}
       >{this.props.text}</div>
   }
 }
 
+const styles = StyleSheet.create({
+  browserActionBadge: {
+    color: 'white',
+    bordeRadius: '2px',
+    padding: '1px 2px',
+    pointerEvents: 'none',
+    font: '7pt "Arial Narrow"',
+    textAlign: 'center',
+    position: 'absolute',
+    top: '50%',
+    left: '40%',
+    border: '.5px solid #FFF',
+    minWidth: '8px'
+  },
+  centered: {
+    left: '50%',
+    transform: 'translateX(-50%)',
+    maxWidth: 'calc(100% - 5px)',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis'
+  }
+})
+
 module.exports = BrowserActionBadge
diff --git a/js/components/main.js b/js/components/main.js
@@ -735,7 +735,7 @@ class Main extends ImmutableComponent {
       if (node.classList &&
           (node.classList.contains('popupWindow') ||
             node.classList.contains('contextMenu') ||
-            node.classList.contains('extensionButton') ||
+            node.matches('[class*="extensionButton_"]') ||
             node.classList.contains('menubarItem') ||
             node.classList.contains('bookmarkHanger'))) {
         // Middle click (on context menu) needs to fire the click event.

diff --git a/less/navigationBar.less b/less/navigationBar.less
@@ -511,40 +511,6 @@
     flex-direction: row;
     margin-left: 3px;
 
-    .browserActionButton {
-      position: relative;
-    }
-
-    .browserActionBadge {
-      color: white;
-      border-radius: 2px;
-      padding: 1px 2px;
-      pointer-events: none;
-      background: #F5601A;
-      font: 7pt 'Arial Narrow';
-      text-align: center;
-      position: absolute;
-      top: 50%; left: 40%;
-      border: .5px solid #FFF;
-
-        &.center {
-          left: 50%;
-          transform: translateX(-50%);
-          max-width: calc(100% - 5px);
-          overflow: hidden;
-          text-overflow: ellipsis;
-        }
-
-    }
-
-    .extensionButton {
-      -webkit-app-region: no-drag;
-      background-size: contain;
-      height: 17px;
-      margin: 4px 0 0 0;
-      opacity: 0.85;
-    }
-
     .braveMenu {
       width: @navbarBraveButtonWidth;
       margin-right: @navbarButtonSpacing;