convert toolbar icons to svg

brave · Nov 3, 2016 · 710eced · 710eced
1 parent 42146a3
commit 710eced
Show file tree

Hide file tree

Showing 11 changed files with 163 additions and 89 deletions.
diff --git a/img/toolbar/home_btn.svg b/img/toolbar/home_btn.svg
diff --git a/img/toolbar/verified_green_icon.svg b/img/toolbar/verified_green_icon.svg
diff --git a/js/about/preferences.js b/js/about/preferences.js
@@ -217,10 +217,7 @@ class LedgerTable extends ImmutableComponent {
   }
 
   getVerifiedIcon (synopsis) {
-    return <span className='verified fa-stack'>
-      <i className='fa fa-circle fa-stack-2x' />
-      <i className='fa fa-check fa-stack-1x' />
-    </span>
+    return <span className='verified' />
   }
 
   enabledForSite (synopsis) {

diff --git a/js/components/main.js b/js/components/main.js
@@ -910,20 +910,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({
+                  navigationButtonContainer: 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({
+                  navigationButtonContainer: 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,38 @@ class NavigationBar extends ImmutableComponent {
           this.titleMode
           ? null
           : this.loading
-            ? <Button iconClass='fa-times'
-              l10nId='stopButton'
-              className='navbutton stop-button'
-              onClick={this.onStop} />
-            : <Button iconClass='fa-repeat'
-              l10nId='reloadButton'
-              className='navbutton reload-button'
-              onClick={this.onReload} />
+            ? <span className='navigationButtonContainer'>
+              <span data-l10n-id='stopButton'
+                className='navigationButton stopButton'
+                onClick={this.onStop} />
+            </span>
+            : <span className='navigationButtonContainer'>
+              <span data-l10n-id='reloadButton'
+                className='navigationButton reloadButton'
+                onClick={this.onReload} />
+            </span>
         }
         {
           !this.titleMode && getSetting(settings.SHOW_HOME_BUTTON)
-          ? <Button iconClass='fa-home'
-            l10nId='homeButton'
-            className='navbutton homeButton'
-            onClick={this.onHome} />
+          ? <span className='navigationButtonContainer'>
+            <span data-l10n-id='homeButton'
+              className='navigationButton homeButton'
+              onClick={this.onHome} />
+          </span>
           : 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 data-l10n-id={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 data-l10n-id='menuButton'
         className='navbutton menuButton'
         onClick={this.props.onMenu} />
     </div>

diff --git a/js/contextMenus.js b/js/contextMenus.js
@@ -1196,7 +1196,7 @@ function mainTemplateInit (nodeProps, frame) {
 
 function onHamburgerMenu (location, e) {
   const menuTemplate = hamburgerTemplateInit(location, e)
-  const rect = e.target.getBoundingClientRect()
+  const rect = e.target.parentNode.getBoundingClientRect()
   windowActions.setContextMenuDetail(Immutable.fromJS({
     right: 0,
     top: rect.bottom + 2,

diff --git a/less/about/preferences.less b/less/about/preferences.less
@@ -788,17 +788,12 @@ div.nextPaymentSubmission {
       }
 
       .verified{
-        left: -10px;
+        height: 20px;
+        width: 20px;
+        background: url('../../img/toolbar/verified_green_icon.svg') center no-repeat;
+        display: inline-block;
         position: absolute;
-        font-size: 10px;
-
-        .fa-circle {
-          color: #67B640;
-        }
-
-        .fa-check {
-          color: white;
-        }
+        left: -10px;
       }
 
       &.alignRight {

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: 6px 4px 0 0;
+}
+
 a.browserButton,
 span.browserButton,
 .browserButton {
@@ -56,19 +64,17 @@ span.browserButton,
 
   &.newFrameButton {
     font-size: 0px;
-    width: 24px;
-    height: 100%;
-    opacity: 0.65;
-    background: url('../img/icon_new_frame.svg') 50% 20% scroll / 20px no-repeat;
+    width: 10px;
+    height: 10px;
+    opacity: 0.5;
+    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
@@ -43,6 +43,15 @@
 
   #urlInput { width: 100%; }
 
+  #navigator {
+    &:not(.titleMode) {
+      .bookmarkButtonContainer {
+        margin-top: 4px;
+        line-height: 24px;
+      }
+    }
+  }
+
   // changes to ensure window can be as small as 480px wide
   // and still be useable and have the caption buttons intact
   @media (max-width: @breakpointExtensionButtonPadding) {
@@ -431,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
@@ -510,6 +518,77 @@
   }
 }
 
+.navigationButton {
+  background-color: @buttonColor;
+  display: inline-block;
+  width: 12px;
+  height: 14px;
+  margin: 0 6px;
+}
+
+.navigationButtonContainer {
+  border-radius: @borderRadius;
+  height: 28px;
+  margin: 0 3px;
+
+  &:last-child {
+    margin-right: 8px;
+  }
+
+  &:not(.disabled):hover {
+    background: white;
+    box-shadow: 1px 1px 1px #EEE;
+  }
+}
+
+.backButton,
+.forwardButton {
+  height: 16px;
+  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;
+    margin: 0 3px 2px 3px;
+    padding: 0 6px;
+    height: 10px;
+  }
+
+  .reloadButton {
+    background: url('../img/toolbar/reload_btn.svg') center no-repeat;
+    margin: 0 3px;
+    padding: 0 6px;
+  }
+
+  .homeButton {
+    background: url('../img/toolbar/home_btn.svg') center no-repeat;
+    width: 14px;
+    height: 13px;
+    margin: 0 3px 1px 3px;
+    padding: 0 6px;
+  }
+
+  .bookmarkButton {
+    background: url('../img/toolbar/bookmark_btn.svg') center no-repeat;
+    -webkit-mask-repeat: no-repeat;
+    width: 14px;
+    height: 14px;
+    margin-bottom: 1px;
+
+    &.removeBookmarkButton {
+      background: url('../img/toolbar/bookmark_marked.svg') center no-repeat;
+    }
+  }
+}
 
 .navigatorWrapper {
   justify-content: space-between;
@@ -537,18 +616,6 @@
         opacity: 0.85;
         -webkit-app-region: no-drag;
       }
-
-      &:not([disabled]):hover {
-        color: @buttonColor;
-        opacity: 1.0;
-        background-color: white;
-      }
-    }
-
-    .back,
-    .forward {
-      font-size: 28px;
-      text-align: center;
     }
   }
 }
@@ -617,22 +684,23 @@
   }
 
   &: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;
       box-sizing: border-box;
       height: 25px;
       line-height: 25px;
-      margin-top: 2px;
       margin-right: -2px;
+      display: inline-block;
     }
   }
 
@@ -763,11 +831,6 @@
     }
   }
 
-  span.navbutton.removeBookmarkButton {
-    color: @braveOrange;
-    opacity: 1;
-  }
-
   .urlbarIcon {
     color: @focusUrlbarOutline;
     left: 14px;