diff --git a/app/renderer/components/styles/commonStyles.js b/app/renderer/components/styles/commonStyles.js index 1c4c8036d7..030756b867 100644 --- a/app/renderer/components/styles/commonStyles.js +++ b/app/renderer/components/styles/commonStyles.js @@ -25,7 +25,7 @@ const styles = StyleSheet.create({ flyoutDialog: { background: globalStyles.color.toolbarBackground, borderRadius: globalStyles.radius.borderRadius, - boxShadow: '2px 2px 8px #3b3b3b', + boxShadow: globalStyles.shadow.flyoutDialogBoxShadow, color: '#000', fontSize: '13px', // Issue #7949 diff --git a/app/renderer/components/styles/global.js b/app/renderer/components/styles/global.js index a0ed4e0364..264496e3a3 100644 --- a/app/renderer/components/styles/global.js +++ b/app/renderer/components/styles/global.js @@ -141,9 +141,10 @@ const globalStyles = { switchNubShadow: '1px 1px 5px -2px black', buttonShadow: '0px 1px 5px -1px rgba(0, 0, 0, 1.0)', dialogShadow: '0px 8px 22px 0px rgba(0, 0, 0, .5)', + flyoutDialogBoxShadow: '2px 2px 8px rgba(59, 59, 59, 1.0)', softBoxShadow: '0 4px 8px lightGray', lightBoxShadow: '0 2px 2px lightGray', - insetShadow: 'inset -5px 0 15px rgba(0,0,0,0.25)', + insetShadow: 'inset -5px 0 15px rgba(0, 0, 0, 0.25)', orangeButtonShadow: '0 2px 0 braveDarkOrange' }, transition: { diff --git a/js/components/main.js b/js/components/main.js index af2c452d10..7f61b5a0db 100644 --- a/js/components/main.js +++ b/js/components/main.js @@ -592,7 +592,7 @@ class Main extends ImmutableComponent { let node = e.target while (node) { if (node.classList && - (node.classList.contains('popupWindow') || + (node.matches('[class^="popupWindow"]') || node.classList.contains('contextMenu') || node.matches('[class*="extensionButton_"]') || node.classList.contains('menubarItem') || diff --git a/js/components/popupWindow.js b/js/components/popupWindow.js index accbf2baff..4ec8855e52 100644 --- a/js/components/popupWindow.js +++ b/js/components/popupWindow.js @@ -5,10 +5,12 @@ const React = require('react') const ReactDOM = require('react-dom') const ImmutableComponent = require('./immutableComponent') -const cx = require('../lib/classSet') const KeyCodes = require('../../app/common/constants/keyCodes') const windowActions = require('../actions/windowActions') +const {StyleSheet, css} = require('aphrodite/no-important') +const globalStyles = require('../../app/renderer/components/styles/global') + /** * Represents a popup window */ @@ -69,35 +71,59 @@ class PopupWindow extends ImmutableComponent { } render () { - let styles = {} - if (parseInt(this.width)) { - styles.width = (parseInt(this.width) + 2) + let style = {} + let width = parseInt(this.width) + let height = parseInt(this.height) + let top = parseInt(this.top) + let left = parseInt(this.left) + + if (width) { + style.width = width + 2 } - if (parseInt(this.height)) { - styles.height = (parseInt(this.height) + 2) + if (height) { + style.height = height + 2 } - if (parseInt(this.top)) { - if (this.top + this.height < window.innerHeight) { - styles.top = this.top + if (top) { + if (top + height < window.innerHeight) { + style.top = top } else { - styles.bottom = 0 + style.bottom = 0 } } - if (parseInt(this.left)) { - if (this.left + this.width < window.innerWidth) { - styles.left = this.left + if (left) { + if (left + width < window.innerWidth) { + style.left = left } else { - styles.right = 0 + style.right = '1em' } } return
+ className={css( + styles.popupWindow, + style.right !== undefined && styles.reverseExpand + )} + style={style} /> } } +const styles = StyleSheet.create({ + popupWindow: { + border: `solid 1px ${globalStyles.color.gray}`, + boxShadow: globalStyles.shadow.flyoutDialogBoxShadow, + boxSizing: 'border-box', + color: 'black', + cursor: 'default', + display: 'flex', + fontSize: '11px', + padding: 0, + position: 'absolute', + userSelect: 'none', + zIndex: globalStyles.zindex.zindexPopupWindow + }, + reverseExpand: { + flexDirection: 'row-reverse' + } +}) + module.exports = PopupWindow diff --git a/js/entry.js b/js/entry.js index 63a99e46f4..00fb496704 100644 --- a/js/entry.js +++ b/js/entry.js @@ -6,7 +6,6 @@ require('../less/window.less') require('../less/button.less') require('../less/contextMenu.less') -require('../less/popupWindow.less') require('../less/main.less') require('../less/navigationBar.less') require('../less/forms.less') diff --git a/less/forms.less b/less/forms.less index 8432bdb1fc..ba759d09f1 100644 --- a/less/forms.less +++ b/less/forms.less @@ -9,7 +9,7 @@ select { .flyoutDialog { background-color: @toolbarBackground; border-radius: @borderRadius; - box-shadow: 2px 2px 8px #3b3b3b; + box-shadow: @flyoutDialogBoxShadow; color: #000; font-size: 13px; padding: 10px 30px; diff --git a/less/popupWindow.less b/less/popupWindow.less deleted file mode 100644 index 55fe5194f6..0000000000 --- a/less/popupWindow.less +++ /dev/null @@ -1,22 +0,0 @@ -/* 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/. */ - -@import "variables.less"; - -.popupWindow { - box-sizing: border-box; - color: black; - cursor: default; - display: flex; - font-size: 11px; - padding: 0px 0px; - position: absolute; - z-index: @zindexPopupWindow; - user-select: none; - &.reverseExpand { - flex-direction: row-reverse; - } - border: solid 1px #b8b8b8; - box-shadow:0 3px 10px #ccc; -} diff --git a/less/variables.less b/less/variables.less index ce6c026c28..fff60dc517 100644 --- a/less/variables.less +++ b/less/variables.less @@ -122,6 +122,7 @@ @buttonShadow: 0px 1px 5px -1px rgba(0, 0, 0, 0.5); @dialogShadow: 0px 8px 22px 0px rgba(0, 0, 0, .5); +@flyoutDialogBoxShadow: 2px 2px 8px rgba(59, 59, 59, 1.0); @softBoxShadow: 0 4px 8px @lightGray; @lightBoxShadow: 0 2px 2px @lightGray; @insetShadow: inset -5px 0 15px @black25;