This repository has been archived by the owner on Dec 11, 2019. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 973
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
a37b77a
commit 8d7ef58
Showing
8 changed files
with
495 additions
and
263 deletions.
There are no files selected for viewing
131 changes: 131 additions & 0 deletions
131
app/renderer/components/navigation/buttons/bookmarkButton.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,131 @@ | ||
/* This Source Code Form is subject to the terms of the Mozilla Public | ||
* License, v. 2.0. If a copy of the MPL was not distributed with this file, | ||
* You can obtain one at http://mozilla.org/MPL/2.0/. */ | ||
|
||
const React = require('react') | ||
const Immutable = require('immutable') | ||
const ipc = require('electron').ipcRenderer | ||
|
||
// Components | ||
const ReduxComponent = require('../../reduxComponent') | ||
|
||
// Actions | ||
const windowActions = require('../../../../../js/actions/windowActions') | ||
|
||
// Constants | ||
const siteTags = require('../../../../../js/constants/siteTags') | ||
const messages = require('../../../../../js/constants/messages') | ||
const settings = require('../../../../../js/constants/settings') | ||
|
||
// State | ||
const tabState = require('../../../../common/state/tabState') | ||
const frameStateUtil = require('../../../../../js/state/frameStateUtil') | ||
|
||
// Store | ||
const windowStore = require('../../../../../js/stores/windowStore') | ||
|
||
// Utils | ||
const cx = require('../../../../../js/lib/classSet') | ||
const siteUtil = require('../../../../../js/state/siteUtil') | ||
const UrlUtil = require('../../../../../js/lib/urlutil') | ||
const {getSetting} = require('../../../../../js/settings') | ||
|
||
const {StyleSheet, css} = require('aphrodite/no-important') | ||
|
||
const bookmarkButtonIcon = require('../../../../../img/toolbar/bookmark_btn.svg') | ||
const bookmarkedButtonIcon = require('../../../../../img/toolbar/bookmark_marked.svg') | ||
|
||
class BookmarkButton extends React.Component { | ||
constructor (props) { | ||
super(props) | ||
this.onToggleBookmark = this.onToggleBookmark.bind(this) | ||
} | ||
|
||
get bookmarked () { | ||
return this.props.activeFrameKey !== undefined && this.props.bookmarked | ||
} | ||
|
||
get activeFrame () { | ||
return windowStore.getFrame(this.props.activeFrameKey) | ||
} | ||
|
||
onToggleBookmark () { | ||
const editing = this.bookmarked | ||
// show the AddEditBookmarkHanger control; saving/deleting takes place there | ||
let siteDetail = siteUtil.getDetailFromFrame( | ||
this.activeFrame, | ||
siteTags.BOOKMARK | ||
) | ||
const key = siteUtil.getSiteKey(siteDetail) | ||
|
||
if (key !== null) { | ||
siteDetail = siteDetail.set( | ||
'parentFolderId', | ||
this.props.sites.getIn([key, 'parentFolderId']) | ||
) | ||
siteDetail = siteDetail.set( | ||
'customTitle', | ||
this.props.sites.getIn([key, 'customTitle']) | ||
) | ||
} | ||
siteDetail = siteDetail.set( | ||
'location', | ||
UrlUtil.getLocationIfPDF(siteDetail.get('location')) | ||
) | ||
windowActions.setBookmarkDetail(siteDetail, siteDetail, null, editing, true) | ||
} | ||
|
||
mergeProps (state, dispatchProps, ownProps) { | ||
const currentWindow = state.get('currentWindow') | ||
const activeFrame = frameStateUtil.getActiveFrame(currentWindow) || Immutable.Map() | ||
const activeFrameKey = activeFrame.get('key') | ||
const activeTabId = activeFrame.get('tabId', tabState.TAB_ID_NONE) | ||
const activeTab = tabState.getByTabId(state, activeTabId) | ||
|
||
const props = {} | ||
props.activeFrameKey = activeFrameKey | ||
props.bookmarked = activeTab && activeTab.get('bookmarked') | ||
props.sites = state.get('sites') | ||
|
||
return props | ||
} | ||
|
||
componentDidMount () { | ||
ipc.on(messages.SHORTCUT_ACTIVE_FRAME_BOOKMARK, () => this.onToggleBookmark()) | ||
ipc.on(messages.SHORTCUT_ACTIVE_FRAME_REMOVE_BOOKMARK, () => this.onToggleBookmark()) | ||
} | ||
|
||
render () { | ||
return ( | ||
<button | ||
className={cx({ | ||
// TODO: check if iconOnly solves this and if not | ||
// find a way to remove cx cos cx is evooool :P | ||
normalizeButton: true, | ||
withHomeButton: getSetting(settings.SHOW_HOME_BUTTON), | ||
[css(styles.bookmark__button, this.bookmarked && styles.bookmark__button_remove)]: true | ||
})} | ||
data-l10n-id={ | ||
this.bookmarked ? 'removeBookmarkButton' : 'addBookmarkButton' | ||
} | ||
data-test-id={this.bookmarked ? 'bookmarked' : 'notBookmarked'} | ||
onClick={this.onToggleBookmark} | ||
/> | ||
) | ||
} | ||
} | ||
|
||
const styles = StyleSheet.create({ | ||
bookmark__button: { | ||
background: `url(${bookmarkButtonIcon}) center no-repeat`, | ||
backgroundSize: '14px 14px', | ||
width: '100%', | ||
height: '100%' | ||
}, | ||
|
||
bookmark__button_remove: { | ||
background: `url(${bookmarkedButtonIcon}) center no-repeat` | ||
} | ||
}) | ||
|
||
module.exports = ReduxComponent.connect(BookmarkButton) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,95 @@ | ||
/* This Source Code Form is subject to the terms of the Mozilla Public | ||
* License, v. 2.0. If a copy of the MPL was not distributed with this file, | ||
* You can obtain one at http://mozilla.org/MPL/2.0/. */ | ||
|
||
const React = require('react') | ||
const Immutable = require('immutable') | ||
|
||
// Components | ||
const ReduxComponent = require('../../reduxComponent') | ||
|
||
// Actions | ||
const appActions = require('../../../../../js/actions/appActions') | ||
|
||
// Constants | ||
const settings = require('../../../../../js/constants/settings') | ||
|
||
// State | ||
const tabState = require('../../../../common/state/tabState') | ||
const frameStateUtil = require('../../../../../js/state/frameStateUtil') | ||
|
||
// Utils | ||
const cx = require('../../../../../js/lib/classSet') | ||
const eventUtil = require('../../../../../js/lib/eventUtil') | ||
const {getSetting} = require('../../../../../js/settings') | ||
|
||
const {StyleSheet, css} = require('aphrodite/no-important') | ||
const globalStyles = require('../../styles/global') | ||
|
||
const homeButtonIcon = require('../../../../../img/toolbar/home_btn.svg') | ||
|
||
class HomeButton extends React.Component { | ||
constructor (props) { | ||
super(props) | ||
this.onHome = this.onHome.bind(this) | ||
} | ||
|
||
onHome (e) { | ||
getSetting(settings.HOMEPAGE).split('|') | ||
.forEach((homepage, i) => { | ||
if (i === 0 && !eventUtil.isForSecondaryAction(e)) { | ||
appActions.loadURLRequested(this.props.activeTabId, homepage) | ||
} else { | ||
appActions.createTabRequested({ | ||
url: homepage, | ||
active: false | ||
}) | ||
} | ||
}) | ||
} | ||
|
||
mergeProps (state, dispatchProps, ownProps) { | ||
const currentWindow = state.get('currentWindow') | ||
const activeFrame = frameStateUtil.getActiveFrame(currentWindow) || Immutable.Map() | ||
const activeTabId = activeFrame.get('tabId', tabState.TAB_ID_NONE) | ||
|
||
const props = {} | ||
|
||
props.activeTabId = activeTabId | ||
|
||
return props | ||
} | ||
|
||
render () { | ||
return ( | ||
<button className={cx({ | ||
// TODO: check if iconOnly solves this and if not | ||
// find a way to remove cx cos cx is evooool :P | ||
normalizeButton: true, | ||
[css(styles.navigationButton, styles.navigationButton_home)]: true | ||
})} | ||
data-test-id='homeButton' | ||
data-l10n-id='homeButton' | ||
onClick={this.onHome} | ||
/> | ||
) | ||
} | ||
} | ||
|
||
const styles = StyleSheet.create({ | ||
navigationButton: { | ||
backgroundColor: globalStyles.color.buttonColor, | ||
display: 'inline-block', | ||
width: '100%', | ||
height: '100%', | ||
margin: 0, | ||
padding: 0 | ||
}, | ||
|
||
navigationButton_home: { | ||
background: `url(${homeButtonIcon}) center no-repeat`, | ||
backgroundSize: '16px 16px' | ||
} | ||
}) | ||
|
||
module.exports = ReduxComponent.connect(HomeButton) |
70 changes: 70 additions & 0 deletions
70
app/renderer/components/navigation/buttons/navigationBarButtonContainer.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,70 @@ | ||
/* This Source Code Form is subject to the terms of the Mozilla Public | ||
* License, v. 2.0. If a copy of the MPL was not distributed with this file, | ||
* You can obtain one at http://mozilla.org/MPL/2.0/. */ | ||
|
||
const React = require('react') | ||
const {StyleSheet, css} = require('aphrodite/no-important') | ||
const globalStyles = require('../../styles/global') | ||
|
||
// TODO: Check if stateless components can benefit from reduxComponent | ||
// by setting ownProps to stateless props. | ||
class NavigationBarButtonContainer extends React.Component { | ||
render () { | ||
return ( | ||
<div className={css( | ||
this.props.isBoxed && styles.boxed, | ||
this.props.isNested && styles.nestedContainer, | ||
this.props.isStandalone && styles.standaloneContainer, | ||
this.props.onNavigationBarChrome && styles.chromeContainer, | ||
|
||
// BEM style class name unique for each component | ||
this.props.containerFor | ||
)}> | ||
{this.props.children} | ||
</div> | ||
) | ||
} | ||
} | ||
|
||
const styles = StyleSheet.create({ | ||
// #9283 | ||
// Create 25x25 squares and place the buttons at the center of each container | ||
// Used for bookmarkButtonContainer, PublisherToggle, noScriptInfo, and UrlBarIcon. | ||
boxed: { | ||
boxSizing: 'border-box', | ||
display: 'flex', | ||
alignItems: 'center', | ||
justifyContent: 'center', | ||
height: globalStyles.navigationBar.urlbarForm.height, | ||
width: globalStyles.navigationBar.urlbarForm.height, | ||
minHeight: globalStyles.navigationBar.urlbarForm.height, | ||
minWidth: globalStyles.navigationBar.urlbarForm.height, | ||
WebkitAppRegion: 'no-drag' | ||
}, | ||
|
||
// Add border to the bookmark button and publisher button only | ||
nestedContainer: { | ||
border: `1px solid ${globalStyles.color.urlBarOutline}`, | ||
borderRadius: globalStyles.radius.borderRadiusURL | ||
}, | ||
|
||
// Used for stopButton, reloadButton, and homeButton on navigationBar.js | ||
// and backButton and forwardButton on navigator.js | ||
standaloneContainer: { | ||
display: 'inline-block', | ||
borderRadius: globalStyles.radius.borderRadiusNavigationButton, | ||
height: globalStyles.navigationBar.urlbarForm.height, | ||
marginRight: globalStyles.navigationBar.navigationButtonContainer.marginRight, | ||
|
||
':hover': { | ||
background: '#fff', | ||
boxShadow: '0px 1px 5px 0px rgba(0, 0, 0, 0.15)' | ||
} | ||
}, | ||
|
||
chromeContainer: { | ||
width: globalStyles.navigationBar.navigationButtonContainer.width | ||
} | ||
}) | ||
|
||
module.exports = NavigationBarButtonContainer |
98 changes: 98 additions & 0 deletions
98
app/renderer/components/navigation/buttons/reloadButton.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,98 @@ | ||
/* This Source Code Form is subject to the terms of the Mozilla Public | ||
* License, v. 2.0. If a copy of the MPL was not distributed with this file, | ||
* You can obtain one at http://mozilla.org/MPL/2.0/. */ | ||
|
||
const React = require('react') | ||
const Immutable = require('immutable') | ||
const ipc = require('electron').ipcRenderer | ||
|
||
// Components | ||
const ReduxComponent = require('../../reduxComponent') | ||
const LongPressButton = require('../../common/longPressButton') | ||
|
||
// Actions | ||
const appActions = require('../../../../../js/actions/appActions') | ||
|
||
// Constants | ||
const messages = require('../../../../../js/constants/messages') | ||
|
||
// State | ||
const tabState = require('../../../../common/state/tabState') | ||
const frameStateUtil = require('../../../../../js/state/frameStateUtil') | ||
|
||
// Utils | ||
const cx = require('../../../../../js/lib/classSet') | ||
const eventUtil = require('../../../../../js/lib/eventUtil') | ||
const contextMenus = require('../../../../../js/contextMenus') | ||
|
||
const {StyleSheet, css} = require('aphrodite/no-important') | ||
|
||
const reloadButtonIcon = require('../../../../../img/toolbar/reload_btn.svg') | ||
|
||
class ReloadButton extends React.Component { | ||
constructor (props) { | ||
super(props) | ||
this.onReload = this.onReload.bind(this) | ||
this.onReloadLongPress = this.onReloadLongPress.bind(this) | ||
} | ||
|
||
onReload (e) { | ||
if (eventUtil.isForSecondaryAction(e)) { | ||
appActions.tabCloned(this.props.activeTabId, {active: !!e.shiftKey}) | ||
} else { | ||
ipc.emit(messages.SHORTCUT_ACTIVE_FRAME_RELOAD) | ||
} | ||
} | ||
|
||
onReloadLongPress (target) { | ||
contextMenus.onReloadContextMenu(target) | ||
} | ||
|
||
mergeProps (state, dispatchProps, ownProps) { | ||
const currentWindow = state.get('currentWindow') | ||
const activeFrame = frameStateUtil.getActiveFrame(currentWindow) || Immutable.Map() | ||
const activeTabId = activeFrame.get('tabId', tabState.TAB_ID_NONE) | ||
|
||
const props = {} | ||
|
||
props.activeTabId = activeTabId | ||
|
||
return props | ||
} | ||
|
||
render () { | ||
// BEM Level: navigationBar__buttonContainer | ||
return ( | ||
// TODO: check if iconOnly solves this and if not | ||
// find a way to remove cx cos cx is evooool :P | ||
<LongPressButton className={cx({ | ||
normalizeButton: true, | ||
[css(styles.navigationButton, styles.navigationButton_reload)]: true | ||
})} | ||
l10nId='reloadButton' | ||
testId='reloadButton' | ||
onClick={this.onReload} | ||
onLongPress={this.onReloadLongPress} | ||
/> | ||
) | ||
} | ||
} | ||
|
||
const styles = StyleSheet.create({ | ||
navigationButton: { | ||
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_reload: { | ||
background: `url(${reloadButtonIcon}) center no-repeat`, | ||
backgroundSize: '13px 13px' | ||
} | ||
}) | ||
|
||
module.exports = ReduxComponent.connect(ReloadButton) |
Oops, something went wrong.