Skip to content
This repository was archived by the owner on Dec 11, 2019. It is now read-only.

Commit 710eced

Browse files
jkupjkup
committed
convert toolbar icons to svg
1 parent 42146a3 commit 710eced

11 files changed

+163
-89
lines changed

‎img/toolbar/home_btn.svg

+1-1
Loading

‎img/toolbar/verified_green_icon.svg

+1
Loading

‎js/about/preferences.js

+1-4
Original file line numberDiff line numberDiff line change
@@ -217,10 +217,7 @@ class LedgerTable extends ImmutableComponent {
217217
}
218218

219219
getVerifiedIcon (synopsis) {
220-
return <span className='verified fa-stack'>
221-
<i className='fa fa-circle fa-stack-2x' />
222-
<i className='fa fa-check fa-stack-1x' />
223-
</span>
220+
return <span className='verified' />
224221
}
225222

226223
enabledForSite (synopsis) {

‎js/components/main.js

+24-14
Original file line numberDiff line numberDiff line change
@@ -910,20 +910,30 @@ class Main extends ImmutableComponent {
910910
onDragOver={this.onDragOver}
911911
onDrop={this.onDrop}>
912912
<div className='backforward'>
913-
<LongPressButton
914-
l10nId='backButton'
915-
className='back fa fa-angle-left'
916-
disabled={!activeFrame || !activeFrame.get('canGoBack')}
917-
onClick={this.onBack}
918-
onLongPress={this.onBackLongPress}
919-
/>
920-
<LongPressButton
921-
l10nId='forwardButton'
922-
className='forward fa fa-angle-right'
923-
disabled={!activeFrame || !activeFrame.get('canGoForward')}
924-
onClick={this.onForward}
925-
onLongPress={this.onForwardLongPress}
926-
/>
913+
<div className={cx({
914+
navigationButtonContainer: true,
915+
disabled: !activeFrame || !activeFrame.get('canGoBack')
916+
})}>
917+
<LongPressButton
918+
l10nId='backButton'
919+
className='navigationButton backButton'
920+
disabled={!activeFrame || !activeFrame.get('canGoBack')}
921+
onClick={this.onBack}
922+
onLongPress={this.onBackLongPress}
923+
/>
924+
</div>
925+
<div className={cx({
926+
navigationButtonContainer: true,
927+
disabled: !activeFrame || !activeFrame.get('canGoForward')
928+
})}>
929+
<LongPressButton
930+
l10nId='forwardButton'
931+
className='navigationButton forwardButton'
932+
disabled={!activeFrame || !activeFrame.get('canGoForward')}
933+
onClick={this.onForward}
934+
onLongPress={this.onForwardLongPress}
935+
/>
936+
</div>
927937
</div>
928938
<NavigationBar
929939
ref={(node) => { this.navBar = node }}

‎js/components/navigationBar.js

+25-21
Original file line numberDiff line numberDiff line change
@@ -131,34 +131,38 @@ class NavigationBar extends ImmutableComponent {
131131
this.titleMode
132132
? null
133133
: this.loading
134-
? <Button iconClass='fa-times'
135-
l10nId='stopButton'
136-
className='navbutton stop-button'
137-
onClick={this.onStop} />
138-
: <Button iconClass='fa-repeat'
139-
l10nId='reloadButton'
140-
className='navbutton reload-button'
141-
onClick={this.onReload} />
134+
? <span className='navigationButtonContainer'>
135+
<span data-l10n-id='stopButton'
136+
className='navigationButton stopButton'
137+
onClick={this.onStop} />
138+
</span>
139+
: <span className='navigationButtonContainer'>
140+
<span data-l10n-id='reloadButton'
141+
className='navigationButton reloadButton'
142+
onClick={this.onReload} />
143+
</span>
142144
}
143145
{
144146
!this.titleMode && getSetting(settings.SHOW_HOME_BUTTON)
145-
? <Button iconClass='fa-home'
146-
l10nId='homeButton'
147-
className='navbutton homeButton'
148-
onClick={this.onHome} />
147+
? <span className='navigationButtonContainer'>
148+
<span data-l10n-id='homeButton'
149+
className='navigationButton homeButton'
150+
onClick={this.onHome} />
151+
</span>
149152
: null
150153
}
151154
{
152155
!this.titleMode
153-
? <Button iconClass={this.bookmarked ? 'fa-star' : 'fa-star-o'}
154-
className={cx({
155-
navbutton: true,
156-
bookmarkButton: true,
157-
removeBookmarkButton: this.bookmarked,
158-
withHomeButton: getSetting(settings.SHOW_HOME_BUTTON)
159-
})}
160-
l10nId={this.bookmarked ? 'removeBookmarkButton' : 'addBookmarkButton'}
161-
onClick={this.onToggleBookmark} />
156+
? <span className='bookmarkButtonContainer'>
157+
<span data-l10n-id={this.bookmarked ? 'removeBookmarkButton' : 'addBookmarkButton'}
158+
className={cx({
159+
navigationButton: true,
160+
bookmarkButton: true,
161+
removeBookmarkButton: this.bookmarked,
162+
withHomeButton: getSetting(settings.SHOW_HOME_BUTTON)
163+
})}
164+
onClick={this.onToggleBookmark} />
165+
</span>
162166
: null
163167
}
164168
</div>

‎js/components/tabsToolbar.js

+1-3
Original file line numberDiff line numberDiff line change
@@ -5,16 +5,14 @@
55
const React = require('react')
66
const ImmutableComponent = require('./immutableComponent')
77
const Tabs = require('./tabs')
8-
const Button = require('./button')
98
const PinnedTabs = require('./pinnedTabs')
109
const contextMenus = require('../contextMenus')
1110
const windowStore = require('../stores/windowStore')
1211

1312
class TabsToolbarButtons extends ImmutableComponent {
1413
render () {
1514
return <div className='tabsToolbarButtons'>
16-
<Button iconClass='fa-bars'
17-
l10nId='menuButton'
15+
<span data-l10n-id='menuButton'
1816
className='navbutton menuButton'
1917
onClick={this.props.onMenu} />
2018
</div>

‎js/contextMenus.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1196,7 +1196,7 @@ function mainTemplateInit (nodeProps, frame) {
11961196

11971197
function onHamburgerMenu (location, e) {
11981198
const menuTemplate = hamburgerTemplateInit(location, e)
1199-
const rect = e.target.getBoundingClientRect()
1199+
const rect = e.target.parentNode.getBoundingClientRect()
12001200
windowActions.setContextMenuDetail(Immutable.fromJS({
12011201
right: 0,
12021202
top: rect.bottom + 2,

‎less/about/preferences.less

+5-10
Original file line numberDiff line numberDiff line change
@@ -788,17 +788,12 @@ div.nextPaymentSubmission {
788788
}
789789

790790
.verified{
791-
left: -10px;
791+
height: 20px;
792+
width: 20px;
793+
background: url('../../img/toolbar/verified_green_icon.svg') center no-repeat;
794+
display: inline-block;
792795
position: absolute;
793-
font-size: 10px;
794-
795-
.fa-circle {
796-
color: #67B640;
797-
}
798-
799-
.fa-check {
800-
color: white;
801-
}
796+
left: -10px;
802797
}
803798

804799
&.alignRight {

‎less/button.less

+14-8
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,14 @@ span.buttonSeparator {
1919
margin: 4px 3px 4px 3px;
2020
}
2121

22+
span.menuButton {
23+
background: url('../img/toolbar/menu_btn.svg') center no-repeat;
24+
display: inline-block;
25+
width: 20px;
26+
height: 12px;
27+
margin: 6px 4px 0 0;
28+
}
29+
2230
a.browserButton,
2331
span.browserButton,
2432
.browserButton {
@@ -56,19 +64,17 @@ span.browserButton,
5664

5765
&.newFrameButton {
5866
font-size: 0px;
59-
width: 24px;
60-
height: 100%;
61-
opacity: 0.65;
62-
background: url('../img/icon_new_frame.svg') 50% 20% scroll / 20px no-repeat;
67+
width: 10px;
68+
height: 10px;
69+
opacity: 0.5;
70+
margin: 5px 0 0 5px;
71+
background: url('../img/toolbar/newtab_btn.svg') center no-repeat;
6372
&:hover {
6473
opacity: 0.8;
74+
background-color: black;
6575
}
6676
}
6777

68-
&.menuButton {
69-
height: auto;
70-
}
71-
7278
&.primaryButton,
7379
&.actionButton,
7480
&.wideButton,

‎less/navigationBar.less

+88-25
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,15 @@
4343

4444
#urlInput { width: 100%; }
4545

46+
#navigator {
47+
&:not(.titleMode) {
48+
.bookmarkButtonContainer {
49+
margin-top: 4px;
50+
line-height: 24px;
51+
}
52+
}
53+
}
54+
4655
// changes to ensure window can be as small as 480px wide
4756
// and still be useable and have the caption buttons intact
4857
@media (max-width: @breakpointExtensionButtonPadding) {
@@ -431,19 +440,18 @@
431440
.backforward {
432441
display: flex;
433442

434-
.back,
435-
.forward {
443+
.backButton,
444+
.forwardButton {
436445
width: @navbarButtonWidth;
437446
}
438447

439-
.back {
448+
.backButton {
440449
padding-right: @navbarButtonSpacing;
441450
}
442451

443-
.forward {
452+
.forwardButton {
444453
padding-left: @navbarButtonSpacing;
445454
}
446-
447455
}
448456

449457
// Navigation bar at the center
@@ -510,6 +518,77 @@
510518
}
511519
}
512520

521+
.navigationButton {
522+
background-color: @buttonColor;
523+
display: inline-block;
524+
width: 12px;
525+
height: 14px;
526+
margin: 0 6px;
527+
}
528+
529+
.navigationButtonContainer {
530+
border-radius: @borderRadius;
531+
height: 28px;
532+
margin: 0 3px;
533+
534+
&:last-child {
535+
margin-right: 8px;
536+
}
537+
538+
&:not(.disabled):hover {
539+
background: white;
540+
box-shadow: 1px 1px 1px #EEE;
541+
}
542+
}
543+
544+
.backButton,
545+
.forwardButton {
546+
height: 16px;
547+
margin: 7px 0 0 0;
548+
}
549+
550+
.backButton {
551+
background: url('../img/toolbar/back_btn.svg') center no-repeat;
552+
}
553+
554+
.forwardButton {
555+
background: url('../img/toolbar/forward_btn.svg') center no-repeat;
556+
}
557+
558+
#navigator {
559+
.stopButton {
560+
background: url('../img/toolbar/stoploading_btn.svg') center no-repeat;
561+
margin: 0 3px 2px 3px;
562+
padding: 0 6px;
563+
height: 10px;
564+
}
565+
566+
.reloadButton {
567+
background: url('../img/toolbar/reload_btn.svg') center no-repeat;
568+
margin: 0 3px;
569+
padding: 0 6px;
570+
}
571+
572+
.homeButton {
573+
background: url('../img/toolbar/home_btn.svg') center no-repeat;
574+
width: 14px;
575+
height: 13px;
576+
margin: 0 3px 1px 3px;
577+
padding: 0 6px;
578+
}
579+
580+
.bookmarkButton {
581+
background: url('../img/toolbar/bookmark_btn.svg') center no-repeat;
582+
-webkit-mask-repeat: no-repeat;
583+
width: 14px;
584+
height: 14px;
585+
margin-bottom: 1px;
586+
587+
&.removeBookmarkButton {
588+
background: url('../img/toolbar/bookmark_marked.svg') center no-repeat;
589+
}
590+
}
591+
}
513592

514593
.navigatorWrapper {
515594
justify-content: space-between;
@@ -537,18 +616,6 @@
537616
opacity: 0.85;
538617
-webkit-app-region: no-drag;
539618
}
540-
541-
&:not([disabled]):hover {
542-
color: @buttonColor;
543-
opacity: 1.0;
544-
background-color: white;
545-
}
546-
}
547-
548-
.back,
549-
.forward {
550-
font-size: 28px;
551-
text-align: center;
552619
}
553620
}
554621
}
@@ -617,22 +684,23 @@
617684
}
618685

619686
&:not(.titleMode) {
620-
.urlbarForm, .browserButton {
687+
.urlbarForm, .browserButton, .bookmarkButtonContainer {
621688
animation: fadeIn .6s;
622689
opacity: 0;
623690
animation-fill-mode: forwards;
624691
}
625692

626-
.bookmarkButton {
693+
.bookmarkButtonContainer {
627694
border: 1px solid #CBCBCB;
695+
border-radius: @borderRadius;
628696
border-right: none;
629697
border-top-right-radius: 0;
630698
border-bottom-right-radius: 0;
631699
box-sizing: border-box;
632700
height: 25px;
633701
line-height: 25px;
634-
margin-top: 2px;
635702
margin-right: -2px;
703+
display: inline-block;
636704
}
637705
}
638706

@@ -763,11 +831,6 @@
763831
}
764832
}
765833

766-
span.navbutton.removeBookmarkButton {
767-
color: @braveOrange;
768-
opacity: 1;
769-
}
770-
771834
.urlbarIcon {
772835
color: @focusUrlbarOutline;
773836
left: 14px;

0 commit comments

Comments
 (0)