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

Commit 4e939f2

Browse files
jkupjkup
committed
convert toolbar icons to svg
1 parent 56ca390 commit 4e939f2

12 files changed

+193
-98
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/longPressButton.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -21,12 +21,12 @@ class LongPressButton extends ImmutableComponent {
2121
}
2222

2323
const self = this
24-
const rect = e.target.getBoundingClientRect()
24+
const target = e.target
2525
const LONG_PRESS_MILLISECONDS = 300
2626

2727
this.longPressTimer = setTimeout(function () {
2828
self.isLocked = true
29-
self.props.onLongPress(rect)
29+
self.props.onLongPress(target)
3030
}, LONG_PRESS_MILLISECONDS)
3131
}
3232

‎js/components/main.js

+28-18
Original file line numberDiff line numberDiff line change
@@ -579,12 +579,12 @@ class Main extends ImmutableComponent {
579579
this.onNav(e, 'canGoForward', 'forward', this.activeFrame.goForward)
580580
}
581581

582-
onBackLongPress (rect) {
583-
contextMenus.onBackButtonHistoryMenu(this.activeFrame, this.activeFrame.getHistory(this.props.appState), rect)
582+
onBackLongPress (target) {
583+
contextMenus.onBackButtonHistoryMenu(this.activeFrame, this.activeFrame.getHistory(this.props.appState), target)
584584
}
585585

586-
onForwardLongPress (rect) {
587-
contextMenus.onForwardButtonHistoryMenu(this.activeFrame, this.activeFrame.getHistory(this.props.appState), rect)
586+
onForwardLongPress (target) {
587+
contextMenus.onForwardButtonHistoryMenu(this.activeFrame, this.activeFrame.getHistory(this.props.appState), target)
588588
}
589589

590590
onBraveMenu () {
@@ -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

+6-4
Original file line numberDiff line numberDiff line change
@@ -1196,10 +1196,10 @@ 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,
1202-
top: rect.bottom + 2,
1202+
top: rect.bottom,
12031203
template: menuTemplate
12041204
}))
12051205
}
@@ -1346,7 +1346,8 @@ function onMoreBookmarksMenu (activeFrame, allBookmarkItems, overflowItems, e) {
13461346
}))
13471347
}
13481348

1349-
function onBackButtonHistoryMenu (activeFrame, history, rect) {
1349+
function onBackButtonHistoryMenu (activeFrame, history, target) {
1350+
const rect = target.parentNode.getBoundingClientRect()
13501351
const menuTemplate = []
13511352

13521353
if (activeFrame && history && history.entries.length > 0) {
@@ -1389,7 +1390,8 @@ function onBackButtonHistoryMenu (activeFrame, history, rect) {
13891390
}))
13901391
}
13911392

1392-
function onForwardButtonHistoryMenu (activeFrame, history, rect) {
1393+
function onForwardButtonHistoryMenu (activeFrame, history, target) {
1394+
const rect = target.parentNode.getBoundingClientRect()
13931395
const menuTemplate = []
13941396

13951397
if (activeFrame && history && history.entries.length > 0) {

‎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

+19-8
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,15 @@ 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+
cursor: default;
29+
}
30+
2231
a.browserButton,
2332
span.browserButton,
2433
.browserButton {
@@ -56,19 +65,21 @@ span.browserButton,
5665

5766
&.newFrameButton {
5867
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;
68+
width: 10px;
69+
max-height: 14px;
70+
opacity: 0.5;
71+
position: relative;
72+
top: 8px;
73+
left: 2px;
74+
-webkit-mask-image: url('../img/toolbar/newtab_btn.svg');
75+
-webkit-mask-repeat: no-repeat;
76+
background-color: @buttonColor;
6377
&:hover {
6478
opacity: 0.8;
79+
background-color: black;
6580
}
6681
}
6782

68-
&.menuButton {
69-
height: auto;
70-
}
71-
7283
&.primaryButton,
7384
&.actionButton,
7485
&.wideButton,

0 commit comments

Comments
 (0)