From 2d5022b1438e326f9cca993a7ebd503f107a7206 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Mon, 10 Apr 2017 14:04:39 +0900 Subject: [PATCH 1/4] Refactor popupWindow.less with Aphrodite Also add right:1em to create margin between the pop up and the window right border Closes #7927 Auditors: Test Plan: 1. Open about:preferences#security 2. Enable LastPass 3. Click the extension icon on the navigation bar 4. Make sure you can log in your account --- .../components/styles/commonStyles.js | 2 +- app/renderer/components/styles/global.js | 3 +- js/components/popupWindow.js | 41 +++++++++++++++---- js/entry.js | 1 - less/forms.less | 2 +- less/variables.less | 1 + 6 files changed, 37 insertions(+), 13 deletions(-) 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/popupWindow.js b/js/components/popupWindow.js index accbf2baff..c33bcbef59 100644 --- a/js/components/popupWindow.js +++ b/js/components/popupWindow.js @@ -9,6 +9,9 @@ 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 +72,55 @@ class PopupWindow extends ImmutableComponent { } render () { - let styles = {} + let style = {} if (parseInt(this.width)) { - styles.width = (parseInt(this.width) + 2) + style.width = (parseInt(this.width) + 2) } if (parseInt(this.height)) { - styles.height = (parseInt(this.height) + 2) + style.height = (parseInt(this.height) + 2) } if (parseInt(this.top)) { if (this.top + this.height < window.innerHeight) { - styles.top = this.top + style.top = this.top } else { - styles.bottom = 0 + style.bottom = 0 } } if (parseInt(this.left)) { if (this.left + this.width < window.innerWidth) { - styles.left = this.left + style.left = this.left } else { - styles.right = 0 + style.right = '1em' } } return
+ 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/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; From 304ae641e8907688087066dddca8473e9eb30ca9 Mon Sep 17 00:00:00 2001 From: Cezar Augusto Date: Sat, 15 Apr 2017 21:22:42 -0300 Subject: [PATCH 2/4] update per @jonathansampson feedback Auditors: @jonathansampson @luixxiul --- js/components/popupWindow.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/js/components/popupWindow.js b/js/components/popupWindow.js index c33bcbef59..914b1e1d97 100644 --- a/js/components/popupWindow.js +++ b/js/components/popupWindow.js @@ -74,10 +74,10 @@ class PopupWindow extends ImmutableComponent { render () { let style = {} if (parseInt(this.width)) { - style.width = (parseInt(this.width) + 2) + style.width = this.width + 2 } if (parseInt(this.height)) { - style.height = (parseInt(this.height) + 2) + style.height = this.height + 2 } if (parseInt(this.top)) { if (this.top + this.height < window.innerHeight) { From 03533b3b07a0f19b8e06ee24b3c77f5aefb2aa0d Mon Sep 17 00:00:00 2001 From: Cezar Augusto Date: Sat, 15 Apr 2017 23:14:54 -0300 Subject: [PATCH 3/4] removes unecessary syles for popupWindow Auditors: @luxxiul --- js/components/main.js | 2 +- js/components/popupWindow.js | 10 ++++------ less/popupWindow.less | 22 ---------------------- 3 files changed, 5 insertions(+), 29 deletions(-) delete mode 100644 less/popupWindow.less 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 914b1e1d97..b02145780a 100644 --- a/js/components/popupWindow.js +++ b/js/components/popupWindow.js @@ -5,7 +5,6 @@ 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') @@ -95,11 +94,10 @@ class PopupWindow extends ImmutableComponent { } return
} } 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; -} From e299f85a2b36e86e9b2d6ad467823d3fc23e8d08 Mon Sep 17 00:00:00 2001 From: Cezar Augusto Date: Mon, 17 Apr 2017 14:27:04 -0300 Subject: [PATCH 4/4] Improve code readability Auditors: @jonathansampson --- js/components/popupWindow.js | 25 +++++++++++++++---------- 1 file changed, 15 insertions(+), 10 deletions(-) diff --git a/js/components/popupWindow.js b/js/components/popupWindow.js index b02145780a..4ec8855e52 100644 --- a/js/components/popupWindow.js +++ b/js/components/popupWindow.js @@ -72,22 +72,27 @@ class PopupWindow extends ImmutableComponent { render () { let style = {} - if (parseInt(this.width)) { - style.width = this.width + 2 + 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)) { - style.height = this.height + 2 + if (height) { + style.height = height + 2 } - if (parseInt(this.top)) { - if (this.top + this.height < window.innerHeight) { - style.top = this.top + if (top) { + if (top + height < window.innerHeight) { + style.top = top } else { style.bottom = 0 } } - if (parseInt(this.left)) { - if (this.left + this.width < window.innerWidth) { - style.left = this.left + if (left) { + if (left + width < window.innerWidth) { + style.left = left } else { style.right = '1em' }