From 8318f2ceea156bfd8d796cf4492d037f5164508e Mon Sep 17 00:00:00 2001 From: Serge Zarembsky Date: Mon, 12 Mar 2018 17:05:20 -0400 Subject: [PATCH 1/4] Fixes for GH-869, GH-870. --- _locales/de/messages.json | 6 +- app/scss/partials/_select_button.scss | 106 ++++++++++++++----------- app/scss/partials/_summary.scss | 10 ++- app/scss/partials/_summary_expert.scss | 7 +- 4 files changed, 77 insertions(+), 52 deletions(-) diff --git a/_locales/de/messages.json b/_locales/de/messages.json index efa1d5919..02b674c09 100644 --- a/_locales/de/messages.json +++ b/_locales/de/messages.json @@ -456,10 +456,10 @@ "message": "Navigieren Sie zu einer anderen Seite und ich verspreche, dass ich liefern werde." }, "summary_trust_site": { - "message": "Website vertrauen" + "message": "Tracker entsperren" }, "summary_restrict_site": { - "message": "Website nicht vertrauen" + "message": "Tracker blockieren" }, "summary_undo": { "message": "Rückgängig machen" @@ -856,7 +856,7 @@ "message": "Nie" }, "settings_seconds": { - "message": "Sekunden" + "message": "Sek." }, "settings_hide_alert_trusted": { "message": "Lila Box auf vertrauenswürdigen Websites verbergen" diff --git a/app/scss/partials/_select_button.scss b/app/scss/partials/_select_button.scss index 655aa3235..f6bab77f7 100644 --- a/app/scss/partials/_select_button.scss +++ b/app/scss/partials/_select_button.scss @@ -13,6 +13,57 @@ $grey: #ccc; $dark-grey: #4a4a4a; +$menu-height: 102px; + +$menuItemDot: url('data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20width%3D%224px%22%20height%3D%224px%22%20viewBox%3D%220%200%204%204%22%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%3E%0A%20%20%20%20%3C%21--%20Generator%3A%20Sketch%2047.1%20%2845422%29%20-%20http%3A//www.bohemiancoding.com/sketch%20--%3E%0A%20%20%20%20%3Ctitle%3EOval%209%3C/title%3E%0A%20%20%20%20%3Cdesc%3ECreated%20with%20Sketch.%3C/desc%3E%0A%20%20%20%20%3Cdefs%3E%3C/defs%3E%0A%20%20%20%20%3Cg%20id%3D%22Page-1%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%0A%20%20%20%20%20%20%20%20%3Cg%20id%3D%22Simple-View-Panel---Trust/Restric/Pause%22%20transform%3D%22translate%28-813.000000%2C%20-2171.000000%29%22%20fill%3D%22%234A4A4A%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Ccircle%20id%3D%22Oval-9%22%20cx%3D%22815%22%20cy%3D%222173%22%20r%3D%222%22%3E%3C/circle%3E%0A%20%20%20%20%20%20%20%20%3C/g%3E%0A%20%20%20%20%3C/g%3E%0A%3C/svg%3E'); + +%select-menu-base { + overflow-y: auto; + height: $menu-height; + position: absolute; + top: -$menu-height; + left: 0; + right: 0; + border: 1px solid $grey; + width: 100%; + border-bottom: 0px; + box-shadow: inset 2px 2px 2px -2px $grey, inset 2px 2px 2px -2px $grey, inset -2px 2px 2px -1px $grey; + background-color: #fff; + ul { + list-style-type: none; + margin: 0px; + text-align: center; + li { + cursor: pointer; + &.selected { + background-color: #A6A6A6; + .bullet { + background-image: $menuItemDot; + } + } + .item-wrapper { + line-height: 33px; + position: relative; + height: 33px; + display: inline-block; + } + .bullet { + position: absolute; + top: 14px; + left: -12px; + height: 4px; + width: 4px; + background-repeat: no-repeat; + } + &:not(.selected):hover { + background-color: #ebebeb; + .bullet { + background-image: $menuItemDot; + } + } + } + } +} #panel { #content-summary { @@ -45,54 +96,8 @@ $dark-grey: #4a4a4a; } } - $menuItemDot: url('data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20width%3D%224px%22%20height%3D%224px%22%20viewBox%3D%220%200%204%204%22%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%3E%0A%20%20%20%20%3C%21--%20Generator%3A%20Sketch%2047.1%20%2845422%29%20-%20http%3A//www.bohemiancoding.com/sketch%20--%3E%0A%20%20%20%20%3Ctitle%3EOval%209%3C/title%3E%0A%20%20%20%20%3Cdesc%3ECreated%20with%20Sketch.%3C/desc%3E%0A%20%20%20%20%3Cdefs%3E%3C/defs%3E%0A%20%20%20%20%3Cg%20id%3D%22Page-1%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%0A%20%20%20%20%20%20%20%20%3Cg%20id%3D%22Simple-View-Panel---Trust/Restric/Pause%22%20transform%3D%22translate%28-813.000000%2C%20-2171.000000%29%22%20fill%3D%22%234A4A4A%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Ccircle%20id%3D%22Oval-9%22%20cx%3D%22815%22%20cy%3D%222173%22%20r%3D%222%22%3E%3C/circle%3E%0A%20%20%20%20%20%20%20%20%3C/g%3E%0A%20%20%20%20%3C/g%3E%0A%3C/svg%3E'); - .select-menu { - overflow-y: auto; - height: 100px; - position: absolute; - top: -100px; - left: 0; - right: 0; - border: 1px solid $grey; - width: 100%; - border-bottom: 0px; - box-shadow: inset 2px 2px 2px -2px $grey, inset 2px 2px 2px -2px $grey, inset -2px 2px 2px -1px $grey; - background-color: #fff; - ul { - list-style-type: none; - margin: 0px; - text-align: center; - li { - cursor: pointer; - &.selected { - background-color: #A6A6A6; - .bullet { - background-image: $menuItemDot; - } - } - .item-wrapper { - line-height: 33px; - position: relative; - height: 33px; - display: inline-block; - } - .bullet { - position: absolute; - top: 14px; - left: -12px; - height: 4px; - width: 4px; - background-repeat: no-repeat; - } - &:not(.selected):hover { - background-color: #ebebeb; - .bullet { - background-image: $menuItemDot; - } - } - } - } + @extend %select-menu-base; } } } @@ -114,6 +119,13 @@ $dark-grey: #4a4a4a; width: 20px; } } + .select-menu { + @extend %select-menu-base; + top: -$menu-height + 1px; + width: 170%; + border-bottom: 1px solid $grey; + z-index: 2; + } } } } diff --git a/app/scss/partials/_summary.scss b/app/scss/partials/_summary.scss index 5c38faba0..637fdeb93 100644 --- a/app/scss/partials/_summary.scss +++ b/app/scss/partials/_summary.scss @@ -146,12 +146,20 @@ color: $red; } } - .load-info, .alert-info { .value { color: #f5a623; } } + .load-info { + .value { + color: #f5a623; + } + padding-right: 0; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } .load-info.fast .value { color: $atlantis; } diff --git a/app/scss/partials/_summary_expert.scss b/app/scss/partials/_summary_expert.scss index 83bdf4637..09d256683 100644 --- a/app/scss/partials/_summary_expert.scss +++ b/app/scss/partials/_summary_expert.scss @@ -51,10 +51,15 @@ @extend %pointer; } .block-info, - .load-info, .alert-info { padding-top: 10px; } + .load-info { + padding-top: 10px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } .tracker-count-alerts { width: 100%; text-align: center; From eb3baeabe5ad38cc375e4f2b6bd7925ae3df438b Mon Sep 17 00:00:00 2001 From: Serge Zarembsky Date: Tue, 13 Mar 2018 15:07:35 -0400 Subject: [PATCH 2/4] Fix for GH-872 --- app/panel/components/Summary.jsx | 56 ++++++++++++++++---------------- app/scss/partials/_tooltip.scss | 11 +++++++ 2 files changed, 39 insertions(+), 28 deletions(-) diff --git a/app/panel/components/Summary.jsx b/app/panel/components/Summary.jsx index 338759617..128565105 100644 --- a/app/panel/components/Summary.jsx +++ b/app/panel/components/Summary.jsx @@ -392,54 +392,55 @@ class Summary extends React.Component {
-
-
-
-
-
-
-
-
-
-
+ -
diff --git a/app/scss/partials/_tooltip.scss b/app/scss/partials/_tooltip.scss index 7e59daac4..7b23b36b5 100644 --- a/app/scss/partials/_tooltip.scss +++ b/app/scss/partials/_tooltip.scss @@ -117,3 +117,14 @@ } } } + +.gx-tooltip { + @extend .g-tooltip; + .tooltip-content.top { + bottom: 100%; + } + .tooltip-content.right { + margin-left: 0 !important; + } +} + From 968039497a58e68719dd71efcd5bba777e47855e Mon Sep 17 00:00:00 2001 From: Serge Zarembsky Date: Tue, 13 Mar 2018 15:09:51 -0400 Subject: [PATCH 3/4] Fixing lint errors. --- app/panel/components/Summary.jsx | 14 +++++--------- 1 file changed, 5 insertions(+), 9 deletions(-) diff --git a/app/panel/components/Summary.jsx b/app/panel/components/Summary.jsx index 128565105..b6c60469b 100644 --- a/app/panel/components/Summary.jsx +++ b/app/panel/components/Summary.jsx @@ -393,13 +393,12 @@ class Summary extends React.Component {
- - +
- +
- +
@@ -449,8 +446,7 @@ class Summary extends React.Component { callback={this.clickGhosteryPause} menuItems={this.pauseOptions} selectedItemValue={this.props.paused_blocking_timeout / 60000} - > - + />
From 2de44bba128c29bec8700924fce733513fcb06c2 Mon Sep 17 00:00:00 2001 From: Serge Zarembsky Date: Wed, 14 Mar 2018 15:27:34 -0400 Subject: [PATCH 4/4] Adding callouts for tooltips. --- _locales/en/messages.json | 12 ++++++++++++ app/panel/components/Summary.jsx | 12 +++++++++++- app/panel/components/Tooltip.jsx | 3 +++ app/panel/reducers/panel.js | 4 +++- 4 files changed, 29 insertions(+), 2 deletions(-) diff --git a/_locales/en/messages.json b/_locales/en/messages.json index 7082cd785..71cf2fc64 100644 --- a/_locales/en/messages.json +++ b/_locales/en/messages.json @@ -1485,5 +1485,17 @@ }, "setup_upgrade_button_go": { "message": "Set Me Up" + }, + "enable_when_paused": { + "message": "To execute this function, please resume Ghostery." + }, + "enable_when_whitelisted": { + "message": "To execute this function, please undo Trust site." + }, + "enable_when_blacklisted": { + "message": "To execute this function, please undo Restrict site." + }, + "enable_when_not_scanned": { + "message": "To execute this function, please navigate to a site which can be scanned." } } diff --git a/app/panel/components/Summary.jsx b/app/panel/components/Summary.jsx index b6c60469b..1420e4677 100644 --- a/app/panel/components/Summary.jsx +++ b/app/panel/components/Summary.jsx @@ -302,7 +302,8 @@ class Summary extends React.Component { */ render() { const showBody = (!this.props.is_expanded || !this.props.is_expert); - + const buttonDisabled = (this.state.disableBlocking || this.props.paused_blocking || this.props.sitePolicy !== false); + const alertText = this.props.paused_blocking ? t('enable_when_paused') : (this.props.sitePolicy === 1) ? t('enable_when_blacklisted') : (this.props.sitePolicy === 2) ? t('enable_when_whitelisted') : this.props.siteNotScanned ? t('enable_when_not_scanned') : ''; const getTooltipClass = () => ((!this.props.is_expert && 'top') || ((this.props.is_expert && this.props.is_expanded) && 'right')); @@ -397,6 +398,9 @@ class Summary extends React.Component { header={t('tooltip_anti_track')} body={showBody && t('tooltip_anti_track_body')} position={`${showBody ? 'top' : 'right'} top-right`} + showNotification={this.props.actions.showNotification} + disabled={IS_CLIQZ || buttonDisabled} + alertText={alertText} />