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

Commit

Permalink
Refactor navigationBar (part 1)
Browse files Browse the repository at this point in the history 
Addresses #9283

Full changelog:
b76f995
c4ced0a
f81ea52
9b6c22d
8997c76
1985612
e0dde5f
feedcdc
  • Loading branch information
@NejcZdovc
Suguru Hirahara authored and NejcZdovc committed Jul 19, 2017
1 parent ef82553 commit 7fa0161
Show file tree
Hide file tree
Showing 18 changed files with 990 additions and 822 deletions.
18 changes: 16 additions & 2 deletions app/renderer/components/bookmarks/addEditBookmarkHanger.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -159,6 +159,20 @@ class AddEditBookmarkHanger extends React.Component {
}
}

const navigationButtonContainerWidth = globalStyles.navigationBar.navigationButtonContainer.width
const navigationButtonContainerMarginRight = globalStyles.navigationBar.navigationButtonContainer.marginRight
const bookmarkButtonContainerWidth = globalStyles.navigationBar.urlbarForm.height

// Add navigationButtonContainerMarginRight (6px)
const navigationButtonWidth = `calc(${navigationButtonContainerWidth} + ${navigationButtonContainerMarginRight})`

// Count the reload and stop button, adding the half width of the bookmark button container
// 12px == arrowUp width
const bookmarkHangerPosition = `calc(12px + ${navigationButtonWidth} + (${bookmarkButtonContainerWidth} / 2))`

// Add another container width
const bookmarkHangerPositionWithHomeButton = `calc(${bookmarkHangerPosition} + ${navigationButtonWidth})`

const styles = StyleSheet.create({
// Copied from commonForm.js
commonFormSection: {
Expand All @@ -185,7 +199,7 @@ const styles = StyleSheet.create({
},
bookmarkHanger__arrowUp: {
position: 'relative',
left: '54px',
left: bookmarkHangerPosition,

'::after': {
content: '""',
Expand All @@ -199,7 +213,7 @@ const styles = StyleSheet.create({
}
},
bookmarkHanger__withHomeButton: {
left: '83px'
left: bookmarkHangerPositionWithHomeButton
},
bookmark__bottomWrapper: {
display: 'flex',
Expand Down
2 changes: 1 addition & 1 deletion app/renderer/components/common/commonForm.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -164,7 +164,7 @@ const styles = StyleSheet.create({
maxWidth: globalStyles.spacing.bookmarkHangerMaxWidth,
height: 'initial', // #8634

// Cancel the inherited value from .navbarMenubarFlexContainer, which is 'nowrap'.
// Cancel the inherited value from navigator__menuBarAndNavigationBar on navigator.js, which is 'nowrap'.
whiteSpace: 'normal'
},

Expand Down
44 changes: 35 additions & 9 deletions app/renderer/components/navigation/homeButton.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,9 +14,15 @@ const appActions = require('../../../../js/actions/appActions')
const settings = require('../../../../js/constants/settings')

// Utils
const cx = require('../../../../js/lib/classSet')
const {getSetting} = require('../../../../js/settings')
const eventUtil = require('../../../../js/lib/eventUtil')

const {StyleSheet, css} = require('aphrodite/no-important')
const globalStyles = require('../styles/global')

const homeButton = require('../../../../img/toolbar/home_btn.svg')

class HomeButton extends ImmutableComponent {
constructor (props) {
super(props)
Expand Down Expand Up @@ -49,17 +55,37 @@ class HomeButton extends ImmutableComponent {
})
}

// BEM Level: navigationBar__buttonContainer
render () {
return <span className='navigationButtonContainer'>
<button
data-test-id='homeButton'
data-l10n-id='homeButton'
className='normalizeButton navigationButton homeButton'
ref={(node) => { this.homeButton = node }}
onClick={this.onHome}
/>
</span>
return <button className={cx({
normalizeButton: true,
[css(styles.navigationButton, styles.navigationButton_home)]: true
})}
data-test-id='homeButton'
data-l10n-id='homeButton'
ref={(node) => { this.homeButton = node }}
onClick={this.onHome}
/>
}
}

const styles = StyleSheet.create({
navigationButton: {
// cf: https://github.com/brave/browser-laptop/blob/b161b37cf5e9f59be64855ebbc5d04816bfc537b/less/navigationBar.less#L550-L553
backgroundColor: globalStyles.color.buttonColor,
display: 'inline-block',
width: '100%',
height: '100%',

// cf: https://github.com/brave/browser-laptop/blob/b161b37cf5e9f59be64855ebbc5d04816bfc537b/less/navigationBar.less#L584-L585
margin: 0,
padding: 0
},

navigationButton_home: {
background: `url(${homeButton}) center no-repeat`,
backgroundSize: `16px 16px`
}
})

module.exports = HomeButton
197 changes: 155 additions & 42 deletions app/renderer/components/navigation/navigationBar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,8 +34,17 @@ const siteUtil = require('../../../../js/state/siteUtil')
const eventUtil = require('../../../../js/lib/eventUtil')
const {getSetting} = require('../../../../js/settings')
const contextMenus = require('../../../../js/contextMenus')
const {isDarwin} = require('../../../common/lib/platformUtil')
const {isFullScreen} = require('../../currentWindow')

const {StyleSheet, css} = require('aphrodite/no-important')
const globalStyles = require('../styles/global')
const commonStyles = require('../styles/commonStyles')

const stopLoadingButton = require('../../../../img/toolbar/stoploading_btn.svg')
const reloadButton = require('../../../../img/toolbar/reload_btn.svg')
const bookmarkButton = require('../../../../img/toolbar/bookmark_btn.svg')
const bookmarkedButton = require('../../../../img/toolbar/bookmark_marked.svg')

class NavigationBar extends React.Component {
constructor (props) {
Expand Down Expand Up @@ -74,6 +83,54 @@ class NavigationBar extends React.Component {
windowActions.onStop(this.props.isFocused, this.props.shouldRenderSuggestions)
}

get bookmarked () {
return this.props.activeFrameKey !== undefined &&
this.props.bookmarked
}

// BEM Level: navigationBar__buttonContainer
get stopButton () {
return <button className={cx({
normalizeButton: true,
[css(styles.navigationButton, styles.navigationButton_stop)]: true
})}
data-l10n-id='stopButton'
onClick={this.onStop}
/>
}

// BEM Level: navigationBar__buttonContainer
get reloadButton () {
return <LongPressButton className={cx({
normalizeButton: true,
[css(styles.navigationButton, styles.navigationButton_reload)]: true
})}
l10nId='reloadButton'
testId='reloadButton'
onClick={this.onReload}
onLongPress={this.onReloadLongPress}
/>
}

// BEM Level: navigationBar
get bookmarkButtonContainer () {
return <span className={css(
commonStyles.rectangleContainer,
commonStyles.rectangleContainer_outsideOfurlbarForm,
styles.navigationBar__buttonContainer_bookmark
)}>
<button className={cx({
normalizeButton: true,
withHomeButton: getSetting(settings.SHOW_HOME_BUTTON),
[css(styles.navigationBar__buttonContainer_bookmark__button, this.bookmarked && styles.navigationBar__buttonContainer_bookmark__button_remove)]: true
})}
data-l10n-id={this.bookmarked ? 'removeBookmarkButton' : 'addBookmarkButton'}
data-test-id={this.bookmarked ? 'bookmarked' : 'notBookmarked'}
onClick={this.onToggleBookmark}
/>
</span>
}

componentDidMount () {
ipc.on(messages.SHORTCUT_ACTIVE_FRAME_BOOKMARK, () => this.onToggleBookmark())
ipc.on(messages.SHORTCUT_ACTIVE_FRAME_REMOVE_BOOKMARK, () => this.onToggleBookmark())
Expand Down Expand Up @@ -136,12 +193,12 @@ class NavigationBar extends React.Component {
return null
}

return <div
id='navigator'
return <div id='navigationBar'
data-test-id='navigationBar'
data-frame-key={this.props.activeFrameKey}
className={cx({
titleMode: this.props.titleMode,
[css(styles.navigator_wide)]: this.props.isWideUrlBarEnabled
[css(styles.navigationBar, (this.props.isDarwin && this.props.isFullScreen) && styles.navigationBar_isDarwin_isFullScreen, this.props.titleMode && styles.navigationBar_titleMode, this.props.isWideUrlBarEnabled && styles.navigationBar_wide)]: true
})}>
{
this.props.showBookmarkHanger
Expand All @@ -151,61 +208,117 @@ class NavigationBar extends React.Component {
{
this.props.titleMode
? null
: this.props.isLoading
? <span className='navigationButtonContainer'>
<button data-l10n-id='stopButton'
className='normalizeButton navigationButton stopButton'
onClick={this.onStop} />
</span>
: <span className='navigationButtonContainer'>
<LongPressButton
l10nId='reloadButton'
className='normalizeButton navigationButton reloadButton'
onClick={this.onReload}
onLongPress={this.onReloadLongPress} />
</span>
: <span className={css(
commonStyles.navbarButtonContainer,
styles.navigationBar__buttonContainer,
)}>
{
this.props.isLoading
? this.stopButton
: this.reloadButton
}
</span>
}
{
this.props.showHomeButton
? <HomeButton activeTabId={this.props.activeTabId} />
? <span className={css(
commonStyles.navbarButtonContainer,
styles.navigationBar__buttonContainer,
)}>
<HomeButton activeTabId={this.props.activeTabId} />
</span>
: null
}
{
!this.props.titleMode
? this.bookmarkButtonContainer
: null
}
<div className='startButtons'>
{
!this.props.titleMode
? <span className='bookmarkButtonContainer'>
<button data-l10n-id={this.props.isBookmarked ? 'removeBookmarkButton' : 'addBookmarkButton'}
className={cx({
navigationButton: true,
bookmarkButton: true,
removeBookmarkButton: this.props.isBookmarked,
withHomeButton: getSetting(settings.SHOW_HOME_BUTTON),
normalizeButton: true
})}
onClick={this.onToggleBookmark} />
</span>
: null
}
</div>
<UrlBar titleMode={this.props.titleMode} />
{
this.props.showPublisherToggle
? <div className='endButtons'>
<PublisherToggle />
</div>
? <PublisherToggle />
: null
}
</div>
}
}

const rightMargin = `calc(${globalStyles.spacing.navbarLeftMarginDarwin} / 2)`

const styles = StyleSheet.create({
navigator_wide: {

// TODO: Refactor navigationBar.js to remove !important
maxWidth: '100% !important',
marginRight: '0 !important',
justifyContent: 'initial !important'
navigationBar: {
boxSizing: 'border-box',
display: 'flex',
flexGrow: 1,
alignItems: 'center',
justifyContent: 'center',
fontSize: '20px',
minWidth: '0%', // allow the navigationBar to shrink
maxWidth: '900px',
marginRight: rightMargin,
padding: 0,
position: 'relative',
userSelect: 'none',
zIndex: globalStyles.zindex.zindexNavigationBar
},

navigationBar_isDarwin_isFullScreen: {
marginRight: 0
},

navigationBar_titleMode: {
animation: 'fadeIn 1.2s'
},

navigationBar_wide: {
maxWidth: '100%',
marginRight: '0',
justifyContent: 'initial'
},

navigationBar__buttonContainer: {
width: globalStyles.navigationBar.navigationButtonContainer.width
},

navigationButton: {
// cf: https://github.com/brave/browser-laptop/blob/b161b37cf5e9f59be64855ebbc5d04816bfc537b/less/navigationBar.less#L550-L553
backgroundColor: globalStyles.color.buttonColor,
display: 'inline-block',
width: '100%',
height: '100%',

// cf: https://github.com/brave/browser-laptop/blob/b161b37cf5e9f59be64855ebbc5d04816bfc537b/less/navigationBar.less#L584-L585
margin: 0,
padding: 0
},

navigationButton_stop: {
background: `url(${stopLoadingButton}) center no-repeat`,
backgroundSize: '11px 11px'
},

navigationButton_reload: {
background: `url(${reloadButton}) center no-repeat`,
backgroundSize: '13px 13px'
},

navigationBar__buttonContainer_bookmark: {
borderRight: 'none',
borderTopRightRadius: 0,
borderBottomRightRadius: 0
},

navigationBar__buttonContainer_bookmark__button: {
background: `url(${bookmarkButton}) center no-repeat`,
backgroundSize: '14px 14px',
width: '100%',
height: '100%'
},

navigationBar__buttonContainer_bookmark__button_remove: {
background: `url(${bookmarkedButton}) center no-repeat`
}
})

Expand Down
Loading

0 comments on commit 7fa0161

Please sign in to comment.