convert toolbar icons to svg

brave · Oct 27, 2016 · 53be983 · 53be983
1 parent 957b748
commit 53be983
Show file tree

Hide file tree

Showing 7 changed files with 137 additions and 65 deletions.
diff --git a/docs/style.md b/docs/style.md
@@ -0,0 +1 @@
+# Overview
diff --git a/js/components/main.js b/js/components/main.js
@@ -900,20 +900,30 @@ class Main extends ImmutableComponent {
               onDragOver={this.onDragOver}
               onDrop={this.onDrop}>
               <div className='backforward'>
-                <LongPressButton
-                  l10nId='backButton'
-                  className='back fa fa-angle-left'
-                  disabled={!activeFrame || !activeFrame.get('canGoBack')}
-                  onClick={this.onBack}
-                  onLongPress={this.onBackLongPress}
-                />
-                <LongPressButton
-                  l10nId='forwardButton'
-                  className='forward fa fa-angle-right'
-                  disabled={!activeFrame || !activeFrame.get('canGoForward')}
-                  onClick={this.onForward}
-                  onLongPress={this.onForwardLongPress}
-                />
+                <div className={cx({
+                  backForwardButtonContainer: true,
+                  disabled: !activeFrame || !activeFrame.get('canGoBack')
+                })}>
+                  <LongPressButton
+                    l10nId='backButton'
+                    className='navigationButton backButton'
+                    disabled={!activeFrame || !activeFrame.get('canGoBack')}
+                    onClick={this.onBack}
+                    onLongPress={this.onBackLongPress}
+                  />
+                </div>
+                <div className={cx({
+                  backForwardButtonContainer: true,
+                  disabled: !activeFrame || !activeFrame.get('canGoForward')
+                })}>
+                  <LongPressButton
+                    l10nId='forwardButton'
+                    className='navigationButton forwardButton'
+                    disabled={!activeFrame || !activeFrame.get('canGoForward')}
+                    onClick={this.onForward}
+                    onLongPress={this.onForwardLongPress}
+                  />
+                </div>
               </div>
               <NavigationBar
                 ref={(node) => { this.navBar = node }}

diff --git a/js/components/navigationBar.js b/js/components/navigationBar.js
@@ -131,34 +131,32 @@ class NavigationBar extends ImmutableComponent {
           this.titleMode
           ? null
           : this.loading
-            ? <Button iconClass='fa-times'
-              l10nId='stopButton'
-              className='navbutton stop-button'
+            ? <span l10nId='stopButton'
+              className='navigationButton stopButton'
               onClick={this.onStop} />
-            : <Button iconClass='fa-repeat'
-              l10nId='reloadButton'
-              className='navbutton reload-button'
+            : <span l10nId='reloadButton'
+              className='navigationButton reloadButton'
               onClick={this.onReload} />
         }
         {
           !this.titleMode && getSetting(settings.SHOW_HOME_BUTTON)
-          ? <Button iconClass='fa-home'
-            l10nId='homeButton'
-            className='navbutton homeButton'
+          ? <span l10nId='homeButton'
+            className='navigationButton homeButton'
             onClick={this.onHome} />
           : null
         }
         {
           !this.titleMode
-          ? <Button iconClass={this.bookmarked ? 'fa-star' : 'fa-star-o'}
-            className={cx({
-              navbutton: true,
-              bookmarkButton: true,
-              removeBookmarkButton: this.bookmarked,
-              withHomeButton: getSetting(settings.SHOW_HOME_BUTTON)
-            })}
-            l10nId={this.bookmarked ? 'removeBookmarkButton' : 'addBookmarkButton'}
-            onClick={this.onToggleBookmark} />
+          ? <span className='bookmarkButtonContainer'>
+            <span l10nId={this.bookmarked ? 'removeBookmarkButton' : 'addBookmarkButton'}
+              className={cx({
+                navigationButton: true,
+                bookmarkButton: true,
+                removeBookmarkButton: this.bookmarked,
+                withHomeButton: getSetting(settings.SHOW_HOME_BUTTON)
+              })}
+              onClick={this.onToggleBookmark} />
+          </span>
           : null
         }
       </div>

diff --git a/js/components/tabsToolbar.js b/js/components/tabsToolbar.js
@@ -5,16 +5,14 @@
 const React = require('react')
 const ImmutableComponent = require('./immutableComponent')
 const Tabs = require('./tabs')
-const Button = require('./button')
 const PinnedTabs = require('./pinnedTabs')
 const contextMenus = require('../contextMenus')
 const windowStore = require('../stores/windowStore')
 
 class TabsToolbarButtons extends ImmutableComponent {
   render () {
     return <div className='tabsToolbarButtons'>
-      <Button iconClass='fa-bars'
-        l10nId='menuButton'
+      <span l10nId='menuButton'
         className='navbutton menuButton'
         onClick={this.props.onMenu} />
     </div>

diff --git a/less/button.less b/less/button.less
@@ -19,6 +19,14 @@ span.buttonSeparator {
   margin: 4px 3px 4px 3px;
 }
 
+span.menuButton {
+  background: url('../img/toolbar/menu_btn.svg') center no-repeat;
+  display: inline-block;
+  width: 20px;
+  height: 12px;
+  margin: 4px 4px 0 0;
+}
+
 a.browserButton,
 span.browserButton,
 .browserButton {
@@ -56,19 +64,17 @@ span.browserButton,
 
   &.newFrameButton {
     font-size: 0px;
-    width: 24px;
-    height: 100%;
+    width: 10px;
+    height: 10px;
     opacity: 0.5;
-    background: url('../img/icon_new_frame.svg') 50% 20% scroll / 20px no-repeat;
+    margin: 5px 0 0 5px;
+    background: url('../img/toolbar/newtab_btn.svg') center no-repeat;
     &:hover {
       opacity: 0.8;
+      background-color: black;
     }
   }
 
-  &.menuButton {
-    height: auto;
-  }
-
   &.primaryButton,
   &.actionButton,
   &.wideButton,

diff --git a/less/navigationBar.less b/less/navigationBar.less
@@ -440,19 +440,18 @@
   .backforward {
     display: flex;
 
-    .back,
-    .forward {
+    .backButton,
+    .forwardButton {
       width: @navbarButtonWidth;
     }
 
-    .back {
+    .backButton {
       padding-right: @navbarButtonSpacing;
     }
 
-    .forward {
+    .forwardButton {
       padding-left: @navbarButtonSpacing;
     }
-
   }
 
   // Navigation bar at the center
@@ -519,6 +518,78 @@
   }
 }
 
+.navigationButton {
+  background-color: @buttonColor;
+  display: inline-block;
+  width: 12px;
+  height: 15px;
+  margin: 0 6px;
+
+  &:hover {
+    background-color: @gray;
+  }
+}
+
+.backforward {
+  .backForwardButtonContainer {
+    border-radius: @borderRadius;
+    height: 28px;
+
+    &:not(.disabled):hover {
+      background: white;
+    }
+  }
+
+  .backButton,
+  .forwardButton {
+    height: 15px;
+    margin: 7px 0 0 0;
+  }
+
+  .backButton {
+    background: url('../img/toolbar/back_btn.svg') center no-repeat;
+  }
+
+  .forwardButton {
+    background: url('../img/toolbar/forward_btn.svg') center no-repeat;
+  }
+}
+
+#navigator {
+  .stopButton {
+    background: url('../img/toolbar/stoploading_btn.svg') center no-repeat;
+    -webkit-mask-repeat: no-repeat;
+    margin: 0 3px;
+    padding: 0 6px;
+  }
+
+  .reloadButton {
+    background: url('../img/toolbar/reload_btn.svg') center no-repeat;
+    -webkit-mask-repeat: no-repeat;
+    margin: 0 3px;
+    padding: 0 6px;
+  }
+
+  .homeButton {
+    background: url('../img/toolbar/home_btn.svg') center no-repeat;
+    -webkit-mask-repeat: no-repeat;
+    width: 14px;
+    height: 14px;
+    margin: 0 3px;
+    padding: 0 6px;
+  }
+
+  .bookmarkButton {
+    background: url('../img/toolbar/bookmark_btn.svg') center no-repeat;
+    -webkit-mask-repeat: no-repeat;
+    width: 14px;
+    height: 14px;
+
+    &.removeBookmarkButton {
+      background: url('../img/toolbar/bookmark_marked.svg') center no-repeat;
+    }
+  }
+}
 
 .navigatorWrapper {
   justify-content: space-between;
@@ -548,17 +619,9 @@
       }
 
       &:not([disabled]):hover {
-        color: @buttonColor;
-        opacity: 1.0;
-        background-color: white;
+        opacity: 0.2;
       }
     }
-
-    .back,
-    .forward {
-      font-size: 28px;
-      text-align: center;
-    }
   }
 }
 
@@ -622,14 +685,15 @@
   }
 
   &:not(.titleMode) {
-    .urlbarForm, .browserButton {
+    .urlbarForm, .browserButton, .bookmarkButtonContainer {
       animation: fadeIn .6s;
       opacity: 0;
       animation-fill-mode: forwards;
     }
 
-    .bookmarkButton {
+    .bookmarkButtonContainer {
       border: 1px solid #CBCBCB;
+      border-radius: @borderRadius;
       border-right: none;
       border-top-right-radius: 0;
       border-bottom-right-radius: 0;
@@ -768,11 +832,6 @@
     }
   }
 
-  span.navbutton.removeBookmarkButton {
-    color: @braveOrange;
-    opacity: 1;
-  }
-
   .urlbarIcon {
     color: @focusUrlbarOutline;
     left: 14px;

diff --git a/test/lib/selectors.js b/test/lib/selectors.js
@@ -44,8 +44,8 @@ module.exports = {
   fpSwitch: '.fingerprintingProtectionSwitch .switchMiddle',
   noScriptSwitch: '.noScriptSwitch .switchMiddle',
   noScriptNavButton: '#navigator .noScript',
-  backButton: '.backforward .back',
-  forwardButton: '.backforward .forward',
+  backButton: '.backforward .backButton',
+  forwardButton: '.backforward .forwardButton',
   clearBrowsingDataPanel: '.clearBrowsingDataPanel',
   clearBrowsingDataButton: '.clearBrowsingDataButton',
   securityTab: '[data-l10n-id="security"]',