From b64fdaec5a48eeff72705a62d79b54bd8d7b2a62 Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Wed, 20 Mar 2019 17:47:20 -0400 Subject: [PATCH 01/43] Remove old Plus banner/logo --- app/panel/components/Header.jsx | 20 +------------------- 1 file changed, 1 insertion(+), 19 deletions(-) diff --git a/app/panel/components/Header.jsx b/app/panel/components/Header.jsx index 52af7f89a..954239922 100644 --- a/app/panel/components/Header.jsx +++ b/app/panel/components/Header.jsx @@ -17,7 +17,7 @@ import ReactSVG from 'react-svg'; import ClassNames from 'classnames'; import Tooltip from './Tooltip'; import HeaderMenu from './HeaderMenu'; -import { sendMessage, sendMessageInPromise } from '../utils/msg'; +import { sendMessageInPromise } from '../utils/msg'; import { log } from '../../../src/utils/common'; /** * @class Implements header component which is common to all panel views @@ -145,12 +145,6 @@ class Header extends React.Component { return this.props.is_expert ? '/detail/blocking' : '/'; } - clickBadge = () => { - sendMessage('ping', 'plus_panel_from_badge'); - const subscriber = this.props.user && this.props.user.subscriptionsPlus; - this.props.history.push(subscriber ? '/subscription/info' : `/subscribe/${!!this.props.user}`); - } - /** * React's required render function. Returns JSX * @return {JSX} JSX for rendering the Header Component of the panel @@ -170,10 +164,6 @@ class Header extends React.Component { const { loggedIn, user } = this.props; const subscriber = this.props.user && this.props.user.subscriptionsPlus; const rightLink = this.generateLink(); - const badgeClasses = ClassNames('columns', 'shrink', { - 'non-subscriber-badge': !subscriber, - 'subscriber-badge': subscriber - }); return (
@@ -203,14 +193,6 @@ class Header extends React.Component {
{rightLink}
-
- - - - - - -
{ this.kebab = node; }}> From a131dfb6e966549e1dbfc52a940428fa4aa39436 Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Mon, 8 Apr 2019 13:20:02 -0400 Subject: [PATCH 02/43] Add green upgrade banner to Summary component --- .../panel/upgrade-to-plus-cta-green-banner.svg | 12 ++++++++++++ app/panel/components/Summary.jsx | 3 +++ 2 files changed, 15 insertions(+) create mode 100644 app/images/panel/upgrade-to-plus-cta-green-banner.svg diff --git a/app/images/panel/upgrade-to-plus-cta-green-banner.svg b/app/images/panel/upgrade-to-plus-cta-green-banner.svg new file mode 100644 index 000000000..9f7b14bb3 --- /dev/null +++ b/app/images/panel/upgrade-to-plus-cta-green-banner.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/app/panel/components/Summary.jsx b/app/panel/components/Summary.jsx index 443a03cc5..d4bf93b46 100644 --- a/app/panel/components/Summary.jsx +++ b/app/panel/components/Summary.jsx @@ -12,6 +12,7 @@ */ import React from 'react'; +import ReactSVG from 'react-svg'; import ClassNames from 'classnames'; import Tooltip from './Tooltip'; import NavButton from './BuildingBlocks/NavButton'; @@ -463,6 +464,8 @@ class Summary extends React.Component {
+ + ); } From 8e409d6e7f12067e6ef01c6ae702b651809c0736 Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Fri, 12 Apr 2019 08:39:08 -0400 Subject: [PATCH 03/43] Add upgrade banner class --- ...o-plus-cta-green-banner.svg => green-upgrade-banner.svg} | 0 app/panel/components/Summary.jsx | 6 +++++- 2 files changed, 5 insertions(+), 1 deletion(-) rename app/images/panel/{upgrade-to-plus-cta-green-banner.svg => green-upgrade-banner.svg} (100%) diff --git a/app/images/panel/upgrade-to-plus-cta-green-banner.svg b/app/images/panel/green-upgrade-banner.svg similarity index 100% rename from app/images/panel/upgrade-to-plus-cta-green-banner.svg rename to app/images/panel/green-upgrade-banner.svg diff --git a/app/panel/components/Summary.jsx b/app/panel/components/Summary.jsx index d4bf93b46..be382fe19 100644 --- a/app/panel/components/Summary.jsx +++ b/app/panel/components/Summary.jsx @@ -334,6 +334,10 @@ class Summary extends React.Component { hide: is_expert }); + const greenUpgradeBanner = ClassNames('upgrade-banner', { + hide: is_expert, + }); + let trackersBlockedCount; if (paused_blocking || sitePolicy === 2) { trackersBlockedCount = 0; @@ -465,7 +469,7 @@ class Summary extends React.Component { - + ); } From a8f46029e53950ec548f4fe44589e9080139c953 Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Fri, 12 Apr 2019 09:15:09 -0400 Subject: [PATCH 04/43] Fix classNames -> className typo --- app/panel/components/Summary.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/panel/components/Summary.jsx b/app/panel/components/Summary.jsx index be382fe19..bbd79e44d 100644 --- a/app/panel/components/Summary.jsx +++ b/app/panel/components/Summary.jsx @@ -469,7 +469,7 @@ class Summary extends React.Component { - + ); } From cd6148ab0fc749b0c9d761d2940b1e37503dcecf Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Fri, 12 Apr 2019 16:23:16 -0400 Subject: [PATCH 05/43] Implement CSS for green upgrade banner --- app/panel/components/Summary.jsx | 2 +- app/scss/partials/_summary.scss | 9 +++++++-- 2 files changed, 8 insertions(+), 3 deletions(-) diff --git a/app/panel/components/Summary.jsx b/app/panel/components/Summary.jsx index bbd79e44d..b09145767 100644 --- a/app/panel/components/Summary.jsx +++ b/app/panel/components/Summary.jsx @@ -334,7 +334,7 @@ class Summary extends React.Component { hide: is_expert }); - const greenUpgradeBanner = ClassNames('upgrade-banner', { + const greenUpgradeBanner = ClassNames('green-upgrade-banner', { hide: is_expert, }); diff --git a/app/scss/partials/_summary.scss b/app/scss/partials/_summary.scss index d1c71daa1..9eea68fff 100644 --- a/app/scss/partials/_summary.scss +++ b/app/scss/partials/_summary.scss @@ -70,7 +70,7 @@ width: 120px; } &.ab-pause .donut-graph-container { - margin-top: 0px; + margin-top: 0; margin-bottom: 30px; } &.expert .donut-graph-container { @@ -80,7 +80,7 @@ margin-bottom: 20px; } &.expert.ab-pause .donut-graph-container { - margin-top: 0px; + margin-top: 0; margin-bottom: 16px; } @@ -202,4 +202,9 @@ border: 1px lightgray solid; border-radius: 5px 0 0 5px; } + .green-upgrade-banner { + position: absolute; + left: 0; + top: 10px; + } } From 208fcd4f0b4a818dc37e39aa471cb2f59ba6337d Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Fri, 12 Apr 2019 16:44:25 -0400 Subject: [PATCH 06/43] Display smaller upgrade banner in summary view when on detailed tab --- app/images/panel/green-upgrade-banner-small.svg | 12 ++++++++++++ app/panel/components/Summary.jsx | 11 +++++------ 2 files changed, 17 insertions(+), 6 deletions(-) create mode 100644 app/images/panel/green-upgrade-banner-small.svg diff --git a/app/images/panel/green-upgrade-banner-small.svg b/app/images/panel/green-upgrade-banner-small.svg new file mode 100644 index 000000000..d28dec6cd --- /dev/null +++ b/app/images/panel/green-upgrade-banner-small.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/app/panel/components/Summary.jsx b/app/panel/components/Summary.jsx index b09145767..b38447585 100644 --- a/app/panel/components/Summary.jsx +++ b/app/panel/components/Summary.jsx @@ -334,10 +334,6 @@ class Summary extends React.Component { hide: is_expert }); - const greenUpgradeBanner = ClassNames('green-upgrade-banner', { - hide: is_expert, - }); - let trackersBlockedCount; if (paused_blocking || sitePolicy === 2) { trackersBlockedCount = 0; @@ -468,8 +464,11 @@ class Summary extends React.Component { - - + { + is_expert && + || + + } ); } From dd1de6f1c2fba8a91133203ab02319764a94a981 Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Fri, 12 Apr 2019 16:50:41 -0400 Subject: [PATCH 07/43] Adjust position of smaller upgrade banner upwards a little to avoid overlapping the donut --- app/scss/partials/_summary.scss | 3 +++ 1 file changed, 3 insertions(+) diff --git a/app/scss/partials/_summary.scss b/app/scss/partials/_summary.scss index 9eea68fff..eb257afb2 100644 --- a/app/scss/partials/_summary.scss +++ b/app/scss/partials/_summary.scss @@ -207,4 +207,7 @@ left: 0; top: 10px; } + &.expert .green-upgrade-banner { + top: 7px; + } } From ec592268b43123fcf5788750f8baa0c74677b936 Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Fri, 12 Apr 2019 17:19:06 -0400 Subject: [PATCH 08/43] Add gold subscriber icon to display when a subscribed user is signed in --- app/images/panel/gold-plus-icon.svg | 15 +++++++++++++++ app/panel/components/Summary.jsx | 14 +++++++++++--- 2 files changed, 26 insertions(+), 3 deletions(-) create mode 100644 app/images/panel/gold-plus-icon.svg diff --git a/app/images/panel/gold-plus-icon.svg b/app/images/panel/gold-plus-icon.svg new file mode 100644 index 000000000..ca28de312 --- /dev/null +++ b/app/images/panel/gold-plus-icon.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/app/panel/components/Summary.jsx b/app/panel/components/Summary.jsx index b38447585..756c295c6 100644 --- a/app/panel/components/Summary.jsx +++ b/app/panel/components/Summary.jsx @@ -287,8 +287,12 @@ class Summary extends React.Component { * @return {JSX} JSX for rendering the Summary View of the panel */ render() { + console.error(this.state); + console.error(this.props); + const { abPause } = this.state; const { + account, is_expert, is_expanded, enable_anti_tracking, @@ -301,6 +305,7 @@ class Summary extends React.Component { sitePolicy, trackerCounts, } = this.props; + const plusSubscriber = account && account.user && account.user.subscriptionsPlus; const showCondensed = is_expert && is_expanded; const antiTrackUnsafe = enable_anti_tracking && antiTracking && antiTracking.totalUnsafeCount || 0; const adBlockBlocked = enable_ad_block && adBlock && adBlock.totalCount || 0; @@ -464,10 +469,13 @@ class Summary extends React.Component { + { - is_expert && - || - + (plusSubscriber && ) || + ( + (is_expert && ) || + + ) } ); From b3a380b763a3ba2e263c7ea202c4a4b2aafd4702 Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Sun, 14 Apr 2019 00:48:40 -0400 Subject: [PATCH 09/43] Finish implementation of plus upgrade banner and gold icon display logic for the case when the panel is not both in detailed view and expanded --- app/panel/components/Summary.jsx | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/app/panel/components/Summary.jsx b/app/panel/components/Summary.jsx index 756c295c6..87da5a48c 100644 --- a/app/panel/components/Summary.jsx +++ b/app/panel/components/Summary.jsx @@ -306,6 +306,7 @@ class Summary extends React.Component { trackerCounts, } = this.props; const plusSubscriber = account && account.user && account.user.subscriptionsPlus; + const is_expanded_and_expert = is_expert && is_expanded; const showCondensed = is_expert && is_expanded; const antiTrackUnsafe = enable_anti_tracking && antiTracking && antiTracking.totalUnsafeCount || 0; const adBlockBlocked = enable_ad_block && adBlock && adBlock.totalCount || 0; @@ -471,10 +472,12 @@ class Summary extends React.Component { { - (plusSubscriber && ) || - ( - (is_expert && ) || - + !is_expanded_and_expert && ( + (plusSubscriber && ) || + ( + (is_expert && ) || + + ) ) } From 4e0af1ef9a60e734f66a964fd17a3caa542711e7 Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Sun, 14 Apr 2019 00:57:22 -0400 Subject: [PATCH 10/43] Remove debug code and redundant variable from Summary#render --- app/panel/components/Summary.jsx | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/app/panel/components/Summary.jsx b/app/panel/components/Summary.jsx index 87da5a48c..bc2acc687 100644 --- a/app/panel/components/Summary.jsx +++ b/app/panel/components/Summary.jsx @@ -287,9 +287,6 @@ class Summary extends React.Component { * @return {JSX} JSX for rendering the Summary View of the panel */ render() { - console.error(this.state); - console.error(this.props); - const { abPause } = this.state; const { account, @@ -306,7 +303,6 @@ class Summary extends React.Component { trackerCounts, } = this.props; const plusSubscriber = account && account.user && account.user.subscriptionsPlus; - const is_expanded_and_expert = is_expert && is_expanded; const showCondensed = is_expert && is_expanded; const antiTrackUnsafe = enable_anti_tracking && antiTracking && antiTracking.totalUnsafeCount || 0; const adBlockBlocked = enable_ad_block && adBlock && adBlock.totalCount || 0; @@ -472,7 +468,7 @@ class Summary extends React.Component { { - !is_expanded_and_expert && ( + !showCondensed && ( (plusSubscriber && ) || ( (is_expert && ) || From 901e06e797bab12747c1547a928dcd527a3ab666 Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Mon, 15 Apr 2019 11:52:53 -0400 Subject: [PATCH 11/43] Refactor Summary#render for clarity --- app/panel/components/Summary.jsx | 207 +++++++++++++++++-------------- 1 file changed, 114 insertions(+), 93 deletions(-) diff --git a/app/panel/components/Summary.jsx b/app/panel/components/Summary.jsx index bc2acc687..80eb79832 100644 --- a/app/panel/components/Summary.jsx +++ b/app/panel/components/Summary.jsx @@ -349,33 +349,120 @@ class Summary extends React.Component { invisible: hidePageHost }); + const pauseButtonComponent = ( + ); + + const pauseButtonContainerDiv = ( +
+ pauseButtonComponent +
+ ); + + const pageStatsDiv = ( +
+
+ {t('trackers_blocked')} + + {trackersBlockedCount} + +
+
+ {t('page_load')} + + {this.state.trackerLatencyTotal ? `${this.state.trackerLatencyTotal} ${t('settings_seconds')}` : '-'} + +
+
+ ); + + const ghosteryFeaturesContainerDiv = ( +
+ + + {!abPause && pauseButtonComponent} +
+ ); + + const cliqzFeaturesContainerDiv = ( +
+ +
+ ); + + const statsNavButtonComponent = (); + + if (showCondensed) { + return ( +
+ {abPause && pauseButtonContainerDiv} + + {!this.state.disableBlocking && ( +
+ + {this.props.trackerCounts.allowed + this.props.trackerCounts.blocked + antiTrackUnsafe + adBlockBlocked || 0} + + +
+ )} + + {!this.state.disableBlocking && pageStatsDiv} + + {this.state.disableBlocking && is_expert && ( +
+ )} + + {ghosteryFeaturesContainerDiv} + + {cliqzFeaturesContainerDiv} + + {statsNavButtonComponent} +
+ ); + } + + // !showCondensed return (
- {abPause && ( -
- -
- )} + {abPause && pauseButtonContainerDiv} - {this.state.disableBlocking && !showCondensed && ( - - )} + {this.state.disableBlocking && ()} - {abPause && !this.state.disableBlocking && is_expert && !showCondensed && ( + {abPause && !this.state.disableBlocking && is_expert && (
{pageHost}
)} - {!this.state.disableBlocking && !showCondensed && ( + {!this.state.disableBlocking && (
)} - {!this.state.disableBlocking && showCondensed && ( -
- - {this.props.trackerCounts.allowed + this.props.trackerCounts.blocked + antiTrackUnsafe + adBlockBlocked || 0} - - -
- )} - {!this.state.disableBlocking && (!abPause || !is_expert) && !showCondensed && ( + {!this.state.disableBlocking && (!abPause || !is_expert) && (
{pageHost}
)} - {!this.state.disableBlocking && ( -
-
- {t('trackers_blocked')} - - {trackersBlockedCount} - -
-
- {t('page_load')} - - {this.state.trackerLatencyTotal ? `${this.state.trackerLatencyTotal} ${t('settings_seconds')}` : '-'} - -
-
- )} + {!this.state.disableBlocking && pageStatsDiv} - {this.state.disableBlocking && is_expert && showCondensed && ( -
- )} + {ghosteryFeaturesContainerDiv} -
- - - {!abPause && ( - - )} -
- -
- -
+ {cliqzFeaturesContainerDiv} - + {statsNavButtonComponent} { - !showCondensed && ( - (plusSubscriber && ) || - ( - (is_expert && ) || - - ) + (plusSubscriber && ) || + ( + (is_expert && ) || + ) }
From 5c861d99136f2f31f3472b4dda62881ec82b4aad Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Mon, 15 Apr 2019 12:08:09 -0400 Subject: [PATCH 12/43] Add green upgrade banner and gold plus icon SVGs for expanded view --- app/images/panel/gold-plus-icon-expanded-view.svg | 15 +++++++++++++++ .../panel/green-upgrade-banner-expanded-view.svg | 12 ++++++++++++ 2 files changed, 27 insertions(+) create mode 100644 app/images/panel/gold-plus-icon-expanded-view.svg create mode 100644 app/images/panel/green-upgrade-banner-expanded-view.svg diff --git a/app/images/panel/gold-plus-icon-expanded-view.svg b/app/images/panel/gold-plus-icon-expanded-view.svg new file mode 100644 index 000000000..2f4ea1ad0 --- /dev/null +++ b/app/images/panel/gold-plus-icon-expanded-view.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/app/images/panel/green-upgrade-banner-expanded-view.svg b/app/images/panel/green-upgrade-banner-expanded-view.svg new file mode 100644 index 000000000..511276171 --- /dev/null +++ b/app/images/panel/green-upgrade-banner-expanded-view.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + From d4dedb321e1c4d531c23e1871944914c1ecbe3ee Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Mon, 15 Apr 2019 17:42:54 -0400 Subject: [PATCH 13/43] Add expanded view upgrade banner div stub to Header#render. Refactor and clean up Header#render a bit. --- app/panel/components/Header.jsx | 20 ++++++++++++++------ 1 file changed, 14 insertions(+), 6 deletions(-) diff --git a/app/panel/components/Header.jsx b/app/panel/components/Header.jsx index 9f0c3452a..fa6da8016 100644 --- a/app/panel/components/Header.jsx +++ b/app/panel/components/Header.jsx @@ -150,19 +150,24 @@ class Header extends React.Component { * @return {JSX} JSX for rendering the Header Component of the panel */ render() { - const { pathname } = this.props.location; + const { + is_expert, + location, + loggedIn, + user, + } = this.props; + const { pathname } = location; const showTabs = pathname === '/' || pathname.startsWith('/detail'); const headerArrowClasses = ClassNames('back-arrow', { 'show-back-arrow': (pathname !== '/' && !pathname.startsWith('/detail')), }); const tabSimpleClassNames = ClassNames('header-tab', { - active: !this.props.is_expert, + active: !is_expert, }); const tabDetailedClassNames = ClassNames('header-tab', { - active: this.props.is_expert, + active: is_expert, }); - const { loggedIn, user } = this.props; - const subscriber = this.props.user && this.props.user.subscriptionsPlus; + const subscriber = user && user.subscriptionsPlus; const rightLink = this.generateLink(); return ( @@ -193,6 +198,9 @@ class Header extends React.Component {
{rightLink}
+
+ +
{ this.kebab = node; }}> @@ -208,7 +216,7 @@ class Header extends React.Component { email={user && user.email} language={this.props.language} tab_id={this.props.tab_id} - location={this.props.location} + location={location} history={this.props.history} actions={this.props.actions} toggleDropdown={this.toggleDropdown} From 499051f3ffa6d1b7ba55f0522321bb43b71b69b5 Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Mon, 15 Apr 2019 22:08:52 -0400 Subject: [PATCH 14/43] Display gold icon in expanded view if user is a logged-in subscriber --- app/panel/components/Header.jsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/app/panel/components/Header.jsx b/app/panel/components/Header.jsx index fa6da8016..b6a9144fc 100644 --- a/app/panel/components/Header.jsx +++ b/app/panel/components/Header.jsx @@ -199,7 +199,10 @@ class Header extends React.Component { {rightLink}
- + { + (subscriber && ) || + + }
{ this.kebab = node; }}> From 6273e6e09453cfac9e7cd2cd2cd6c20f5404b0ec Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Mon, 15 Apr 2019 22:15:23 -0400 Subject: [PATCH 15/43] Stub click on badge in expanded view --- app/panel/components/Header.jsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/app/panel/components/Header.jsx b/app/panel/components/Header.jsx index b6a9144fc..e808f8627 100644 --- a/app/panel/components/Header.jsx +++ b/app/panel/components/Header.jsx @@ -145,6 +145,10 @@ class Header extends React.Component { return this.props.is_expert ? '/detail/blocking' : '/'; } + clickBadge = () => { + console.error('IVZ you clicked the badge!!'); + } + /** * React's required render function. Returns JSX * @return {JSX} JSX for rendering the Header Component of the panel @@ -198,7 +202,7 @@ class Header extends React.Component {
{rightLink}
-
+
{ (subscriber && ) || From 8c8b7fd0235b5400259883bf2e55b11c6abf9c03 Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Mon, 15 Apr 2019 22:57:12 -0400 Subject: [PATCH 16/43] Replicate dev behavior of badge clicking in Header in expanded view --- app/panel/components/Header.jsx | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/app/panel/components/Header.jsx b/app/panel/components/Header.jsx index e808f8627..a561c4dab 100644 --- a/app/panel/components/Header.jsx +++ b/app/panel/components/Header.jsx @@ -17,7 +17,7 @@ import ReactSVG from 'react-svg'; import ClassNames from 'classnames'; import Tooltip from './Tooltip'; import HeaderMenu from './HeaderMenu'; -import { sendMessageInPromise } from '../utils/msg'; +import { sendMessage, sendMessageInPromise } from '../utils/msg'; import { log } from '../../../src/utils/common'; /** * @class Implements header component which is common to all panel views @@ -146,7 +146,11 @@ class Header extends React.Component { } clickBadge = () => { - console.error('IVZ you clicked the badge!!'); + // TODO check whether this is the message we want to be sending now + sendMessage('ping', 'plus_panel_from_badge'); + const { user } = this.props; + const subscriber = user && user.subscriptionsPlus; + this.props.history.push(subscriber ? 'subscriptions/info' : `/subscribe/${!!user}`); } /** From 8e7abf16b2473b7564771a950162efbbdeb283d3 Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Tue, 16 Apr 2019 10:17:11 -0400 Subject: [PATCH 17/43] Rename upgrade banner / gold plus badge click handler for clarity --- app/panel/components/Header.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/app/panel/components/Header.jsx b/app/panel/components/Header.jsx index a561c4dab..274019ec2 100644 --- a/app/panel/components/Header.jsx +++ b/app/panel/components/Header.jsx @@ -145,7 +145,7 @@ class Header extends React.Component { return this.props.is_expert ? '/detail/blocking' : '/'; } - clickBadge = () => { + clickUpgradeBannerOrGoldPlusIcon = () => { // TODO check whether this is the message we want to be sending now sendMessage('ping', 'plus_panel_from_badge'); const { user } = this.props; @@ -206,7 +206,7 @@ class Header extends React.Component {
{rightLink}
-
+
{ (subscriber && ) || From dbdea1e8eb1047b2284d10126d10e7f837dae0c7 Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Tue, 16 Apr 2019 10:23:14 -0400 Subject: [PATCH 18/43] Add badge CSS classes to extended view badges. These need updating --- app/panel/components/Header.jsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/app/panel/components/Header.jsx b/app/panel/components/Header.jsx index 274019ec2..9ba42a419 100644 --- a/app/panel/components/Header.jsx +++ b/app/panel/components/Header.jsx @@ -177,6 +177,10 @@ class Header extends React.Component { }); const subscriber = user && user.subscriptionsPlus; const rightLink = this.generateLink(); + const badgeClasses = ClassNames('columns', 'shrink', { + 'non-subscriber-badge': !subscriber, + 'subscriber-badge': subscriber + }); return (
@@ -206,7 +210,7 @@ class Header extends React.Component {
{rightLink}
-
+
{ (subscriber && ) || From 9aedc219062c0d310c9c18d5f715042cf7e31b08 Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Tue, 16 Apr 2019 10:29:31 -0400 Subject: [PATCH 19/43] Correct subscriber redirect path for gold plus icon click handler in Header --- app/panel/components/Header.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/panel/components/Header.jsx b/app/panel/components/Header.jsx index 9ba42a419..cbe36ccdd 100644 --- a/app/panel/components/Header.jsx +++ b/app/panel/components/Header.jsx @@ -150,7 +150,7 @@ class Header extends React.Component { sendMessage('ping', 'plus_panel_from_badge'); const { user } = this.props; const subscriber = user && user.subscriptionsPlus; - this.props.history.push(subscriber ? 'subscriptions/info' : `/subscribe/${!!user}`); + this.props.history.push(subscriber ? '/subscription/info' : `/subscribe/${!!user}`); } /** From 43b5e81847a272518216b3973fbc0fe721bfc906 Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Tue, 16 Apr 2019 11:29:59 -0400 Subject: [PATCH 20/43] Update badge CSS --- app/scss/partials/_header.scss | 8 -------- 1 file changed, 8 deletions(-) diff --git a/app/scss/partials/_header.scss b/app/scss/partials/_header.scss index 08600cb03..d452c5a74 100644 --- a/app/scss/partials/_header.scss +++ b/app/scss/partials/_header.scss @@ -72,20 +72,12 @@ } .base-badge { @extend %pointer; - width: 38px; - height: 36px; - display: block; - margin-left: 10px; } .subscriber-badge { @extend .base-badge; - path {fill: $white;} - path.text {fill: $ghosty-blue;} } .non-subscriber-badge { @extend .base-badge; - path {fill: #d3af36;} - path.text {fill: #ffffff;} } .header-kebab { @extend %pointer; From 4cc227b2101d8f2d2c907caf64629b9657264efe Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Tue, 16 Apr 2019 11:40:44 -0400 Subject: [PATCH 21/43] Tweak CSS for expanded view upgrade banner and gold plus icon to spec --- app/scss/partials/_header.scss | 3 +++ 1 file changed, 3 insertions(+) diff --git a/app/scss/partials/_header.scss b/app/scss/partials/_header.scss index d452c5a74..266a566db 100644 --- a/app/scss/partials/_header.scss +++ b/app/scss/partials/_header.scss @@ -72,12 +72,15 @@ } .base-badge { @extend %pointer; + display: block; } .subscriber-badge { @extend .base-badge; + margin-top: 4px; } .non-subscriber-badge { @extend .base-badge; + margin-left: 6px; } .header-kebab { @extend %pointer; From 8c4a316b5af0b7a7b91a84ae06fc230b63aab06c Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Tue, 16 Apr 2019 12:08:17 -0400 Subject: [PATCH 22/43] Remove reference to non-extant state.header from header container mapStateToProps. pass state.panel.is_expanded to Header --- app/panel/containers/HeaderContainer.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/app/panel/containers/HeaderContainer.js b/app/panel/containers/HeaderContainer.js index a957e6ccb..5d375a4ea 100644 --- a/app/panel/containers/HeaderContainer.js +++ b/app/panel/containers/HeaderContainer.js @@ -26,8 +26,9 @@ import { logout } from '../../Account/AccountActions'; * @todo We are not using ownProps, so we better not specify it explicitly, * in this case it won't be passed by React (see https://github.com/reactjs/react-redux/blob/master/docs/api.md). */ -const mapStateToProps = state => Object.assign({}, state.header, state.account, { +const mapStateToProps = state => Object.assign({}, state.account, { // get properties from panel redux store + is_expanded: state.panel.is_expanded, is_expert: state.panel.is_expert, language: state.panel.language, tab_id: state.panel.tab_id, From 740f61b54f9736b173a5b04618d731eaf5292c1f Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Tue, 16 Apr 2019 14:22:29 -0400 Subject: [PATCH 23/43] Implement show/hide logic for header upgrade banner and gold plus icon --- app/panel/components/Header.jsx | 17 +++++++++++------ 1 file changed, 11 insertions(+), 6 deletions(-) diff --git a/app/panel/components/Header.jsx b/app/panel/components/Header.jsx index cbe36ccdd..a458c47c0 100644 --- a/app/panel/components/Header.jsx +++ b/app/panel/components/Header.jsx @@ -159,6 +159,7 @@ class Header extends React.Component { */ render() { const { + is_expanded, is_expert, location, loggedIn, @@ -182,6 +183,15 @@ class Header extends React.Component { 'subscriber-badge': subscriber }); + const upgradeBannerOrGoldPlusIconDiv = ( +
+ { + (subscriber && ) || + + } +
+ ); + return (
{ showTabs && ( @@ -210,12 +220,7 @@ class Header extends React.Component {
{rightLink}
-
- { - (subscriber && ) || - - } -
+ { (is_expert && is_expanded) && upgradeBannerOrGoldPlusIconDiv }
{ this.kebab = node; }}> From 5ebbd1e375c58e5cba9bb31f22409b031e6d7ba1 Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Tue, 16 Apr 2019 14:26:36 -0400 Subject: [PATCH 24/43] Factor kebab div out to const for clarity in Header#render --- app/panel/components/Header.jsx | 22 +++++++++++++--------- 1 file changed, 13 insertions(+), 9 deletions(-) diff --git a/app/panel/components/Header.jsx b/app/panel/components/Header.jsx index a458c47c0..668e1a608 100644 --- a/app/panel/components/Header.jsx +++ b/app/panel/components/Header.jsx @@ -183,7 +183,7 @@ class Header extends React.Component { 'subscriber-badge': subscriber }); - const upgradeBannerOrGoldPlusIconDiv = ( + const upgradeBannerOrGoldPlusIcon = (
{ (subscriber && ) || @@ -192,6 +192,16 @@ class Header extends React.Component {
); + const kebab = ( +
{ this.kebab = node; }}> + + + + + +
+ ); + return (
{ showTabs && ( @@ -220,14 +230,8 @@ class Header extends React.Component {
{rightLink}
- { (is_expert && is_expanded) && upgradeBannerOrGoldPlusIconDiv } -
{ this.kebab = node; }}> - - - - - -
+ {(is_expert && is_expanded) && upgradeBannerOrGoldPlusIcon } + {kebab}
{ this.state.dropdownOpen && Date: Tue, 16 Apr 2019 16:00:32 -0400 Subject: [PATCH 25/43] Tweak gold plus icon expanded view SVG to make sure Plus is more centered, with Vinnie's approval. Refactor Header#render for clarity --- .../panel/gold-plus-icon-expanded-view.svg | 29 +++--- app/panel/components/Header.jsx | 98 +++++++++++-------- 2 files changed, 72 insertions(+), 55 deletions(-) diff --git a/app/images/panel/gold-plus-icon-expanded-view.svg b/app/images/panel/gold-plus-icon-expanded-view.svg index 2f4ea1ad0..06d4f74ea 100644 --- a/app/images/panel/gold-plus-icon-expanded-view.svg +++ b/app/images/panel/gold-plus-icon-expanded-view.svg @@ -1,15 +1,16 @@ - - - - - - - - - - - - - + + + + + + + + + + + + - + + + \ No newline at end of file diff --git a/app/panel/components/Header.jsx b/app/panel/components/Header.jsx index 668e1a608..2f85d935a 100644 --- a/app/panel/components/Header.jsx +++ b/app/panel/components/Header.jsx @@ -95,7 +95,7 @@ class Header extends React.Component { }); } - generateLink = () => { + generateAccountLogo = () => { const { loggedIn, user } = this.props; let text = ''; @@ -177,13 +177,45 @@ class Header extends React.Component { active: is_expert, }); const subscriber = user && user.subscriptionsPlus; - const rightLink = this.generateLink(); + const accountLogolink = this.generateAccountLogo(); const badgeClasses = ClassNames('columns', 'shrink', { 'non-subscriber-badge': !subscriber, 'subscriber-badge': subscriber }); - const upgradeBannerOrGoldPlusIcon = ( + const simpleTab = ( +
+ + {t('panel_header_simple_view')} + +
+ ); + + const detailedTab = ( +
+ + {t('panel_header_detailed_view')} + +
+ ); + + const tabs = ( +
+ {simpleTab} + {detailedTab} +
+ ); + + const backArrowAndGhostieLogo = ( + + + + + + + ); + + const plusUpgradeBannerOrSubscriberBadgeLogolink = (
{ (subscriber && ) || @@ -192,7 +224,7 @@ class Header extends React.Component {
); - const kebab = ( + const headerMenuKebab = (
{ this.kebab = node; }}> @@ -202,51 +234,35 @@ class Header extends React.Component {
); + const headerMenu = ( + + ); + return (
- { showTabs && ( -
-
- - {t('panel_header_simple_view')} - -
-
- - {t('panel_header_detailed_view')} - -
-
- )} + { showTabs && tabs }
- - - - - - + { backArrowAndGhostieLogo }
- {rightLink} + {accountLogolink}
- {(is_expert && is_expanded) && upgradeBannerOrGoldPlusIcon } - {kebab} + {(is_expert && is_expanded) && plusUpgradeBannerOrSubscriberBadgeLogolink } + {headerMenuKebab}
- { this.state.dropdownOpen && - - } + { this.state.dropdownOpen && headerMenu }
From 6035749df28ad478294fa8e3f8a91f1b41a9ab96 Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Tue, 16 Apr 2019 17:38:26 -0400 Subject: [PATCH 26/43] Finish clarity refactor of Summary#render --- app/panel/components/Summary.jsx | 115 +++++++++++++++---------------- 1 file changed, 54 insertions(+), 61 deletions(-) diff --git a/app/panel/components/Summary.jsx b/app/panel/components/Summary.jsx index 80eb79832..ec177536b 100644 --- a/app/panel/components/Summary.jsx +++ b/app/panel/components/Summary.jsx @@ -360,13 +360,39 @@ class Summary extends React.Component { isCondensed={showCondensed} />); - const pauseButtonContainerDiv = ( + const pauseButton = (
pauseButtonComponent
); - const pageStatsDiv = ( + const totalTrackersFound = ( +
+ + {this.props.trackerCounts.allowed + this.props.trackerCounts.blocked + antiTrackUnsafe + adBlockBlocked || 0} + + +
+ ); + + const donut = ( +
+ +
+ ); + + const totalTrackersBlockedAndPageLoadTime = (
{t('trackers_blocked')} @@ -383,7 +409,8 @@ class Summary extends React.Component {
); - const ghosteryFeaturesContainerDiv = ( + // Trust, Restrict, Pause + const ghosteryFeatures = (
); - const cliqzFeaturesContainerDiv = ( + // Enhanced Anti-Tracking, Enhanced Ad Blocking, Smart Blocking + const cliqzFeatures = (
); - const statsNavButtonComponent = (); + const statsNavButton = (); + + const plusUpgradeBannerOrSubscriberIcon = ( + (plusSubscriber && ) || + ( + (is_expert && ) || + + ) + ); if (showCondensed) { return (
- {abPause && pauseButtonContainerDiv} - - {!this.state.disableBlocking && ( -
- - {this.props.trackerCounts.allowed + this.props.trackerCounts.blocked + antiTrackUnsafe + adBlockBlocked || 0} - - -
- )} - - {!this.state.disableBlocking && pageStatsDiv} - + {abPause && pauseButton} + {!this.state.disableBlocking && totalTrackersFound} + {!this.state.disableBlocking && totalTrackersBlockedAndPageLoadTime} {this.state.disableBlocking && is_expert && (
)} - - {ghosteryFeaturesContainerDiv} - - {cliqzFeaturesContainerDiv} - - {statsNavButtonComponent} + {ghosteryFeatures} + {cliqzFeatures} + {statsNavButton}
); } @@ -452,51 +472,24 @@ class Summary extends React.Component { // !showCondensed return (
- {abPause && pauseButtonContainerDiv} - + {abPause && pauseButton} {this.state.disableBlocking && ()} - {abPause && !this.state.disableBlocking && is_expert && (
{pageHost}
)} - - {!this.state.disableBlocking && ( -
- -
- )} - + {!this.state.disableBlocking && donut} {!this.state.disableBlocking && (!abPause || !is_expert) && (
{pageHost}
)} - - {!this.state.disableBlocking && pageStatsDiv} - - {ghosteryFeaturesContainerDiv} - - {cliqzFeaturesContainerDiv} - - {statsNavButtonComponent} - - { - (plusSubscriber && ) || - ( - (is_expert && ) || - - ) - } + {!this.state.disableBlocking && totalTrackersBlockedAndPageLoadTime} + {ghosteryFeatures} + {cliqzFeatures} + {statsNavButton} + {plusUpgradeBannerOrSubscriberIcon}
); } From a0170deb6fed23cfba18cea74e0757de6e27a486 Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Tue, 16 Apr 2019 18:16:28 -0400 Subject: [PATCH 27/43] Nudge summary content down in expert view so green upgrade banner can fit. Delete two unused scss partials --- app/scss/partials/_summary.scss | 7 +- app/scss/partials/_summary_expert.scss | 103 -------------- .../partials/_summary_expert_collapsed.scss | 127 ------------------ 3 files changed, 6 insertions(+), 231 deletions(-) delete mode 100644 app/scss/partials/_summary_expert.scss delete mode 100644 app/scss/partials/_summary_expert_collapsed.scss diff --git a/app/scss/partials/_summary.scss b/app/scss/partials/_summary.scss index eb257afb2..d568050c9 100644 --- a/app/scss/partials/_summary.scss +++ b/app/scss/partials/_summary.scss @@ -15,7 +15,12 @@ position: absolute; height: 479px; width: 100%; - &.expert { width: 235px; } + + &.expert { + width: 235px; + margin-top: 15px; + } + &.expert.condensed { width: 66px; background-color: #f9f6f6; diff --git a/app/scss/partials/_summary_expert.scss b/app/scss/partials/_summary_expert.scss deleted file mode 100644 index 7c7a20f81..000000000 --- a/app/scss/partials/_summary_expert.scss +++ /dev/null @@ -1,103 +0,0 @@ -/** - * Summary Expert Panel Sass - * - * Ghostery Browser Extension - * https://www.ghostery.com/ - * - * Copyright 2019 Ghostery, Inc. All rights reserved. - * - * 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 - */ - -#content-summary.expert { - width: 232px; - .tracker-category-wheel { - path { - cursor: pointer; - } - margin-top: 20px; - #categories-donut { - height: 94px; - width: 94px; - .donut-text { - font-size: 11px; - .categories-donut-count { - font-size: 24px; - } - } - } - } - #tracker-host { - margin-top: 9px; - } - .info { - display: table; - width: 100%; - font-size: 12px; - margin: 9px auto 9px; - > .columns { - flex: none; - max-width: none; - width: 100%; - text-align: center; - } - .alert-info { - display: table-header-group; - } - .alert-info, - .block-info { - @extend %pointer; - } - .block-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; - } - } - #controls { - padding-bottom: 8px; - .blocking-controls { - margin: 7px; - } - #cliqz-controls { - width: 173px; - margin-top: 0; - } - #ghostery-controls { - padding-top: 22px; - margin-top: 0; - .button { - .title, .select-title, .undo { - text-align: left; - margin-left: 40px; - } - } - .columns { - width: 100%; - max-width: none; - flex: none; - } - button { - margin: 0 0 14px 0; - } - } - } - .toggleExpert { - background-image: url('../images/panel/icon-simple-mode.svg'); - height: 14px; - left: 11px; - top: 11px; - width: 22px; - } -} diff --git a/app/scss/partials/_summary_expert_collapsed.scss b/app/scss/partials/_summary_expert_collapsed.scss deleted file mode 100644 index 9858e97c5..000000000 --- a/app/scss/partials/_summary_expert_collapsed.scss +++ /dev/null @@ -1,127 +0,0 @@ -/** - * Summary Expert Expanded Panel Sass - * - * Ghostery Browser Extension - * https://www.ghostery.com/ - * - * Copyright 2019 Ghostery, Inc. All rights reserved. - * - * 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 - */ - -#content-summary.expanded.expert { - width: 70px; - background-color: #F9F6F6; - .columns { - padding-left: 0; - padding-right: 0; - } - .toggleExpert { - position: static; - padding: 30px 0; - margin: 0; - width: 100%; - background-position: center; - } - .tracker-count-total-expanded-expert { - text-align: center; - color: #4a4a4a; - width: 100%; - font-size: 24px; - font-weight: 700; - display: inline-block; - } - #tracker-host { - display: none; - } - .info { - font-size: 14px; - .text { - display: none; - } - } - #controls { - padding-bottom: 0; - .blocking-controls { - border: 0; - border-top: 1px solid #ccc; - border-collapse: collapse; - } - .blocking-controls, .cliqz-controls { - width: 100%; - height: 40px; - margin: 0; - padding: 0; - border-radius: 0px; - text-align: center; - svg { - float: none !important; - margin: 0px; - } - > div { - position: static; - margin: 0 auto; - } - } - #cliqz-controls { - height: auto; - width: 100%; - border: none; - > .row { - max-width: 100%; - margin: 0; - } - .columns { - width: 100%; - max-width: none; - flex: none; - } - button { - height: 30px; - width: 30px; - background-size: auto 20px; - margin: 0 0 15px 0; - } - } - #ghostery-controls { - padding-top: 0; - > .row { - max-width: 100%; - margin: 0; - > .columns { - padding: 0; - } - } - button { - border: 0; - border-radius: 0; - border-top: 1px solid #ccc; - margin: 0; - position: relative; - height: 40px; - &.blocking-controls {width: 100%;} - &.active:hover .undo, .title, .select-title { - display: none; - } - .icon { - margin: 0 auto; - left: 0; - right: 0; - } - &.controls-pause .icon { - margin: 0px 20px; - left: 0; - &.resume { - margin: 6px 14px; - } - } - &.select-button.right-button { - border-left: 1px solid #ccc; - } - } - .select-button {width: 100%;} - } - } -} From 8534297fbabc5e9b1b5f9901ccd10fad7b5439b0 Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Wed, 17 Apr 2019 09:41:40 -0400 Subject: [PATCH 28/43] Adjust positioning of simple/detailed view upgrade banners and gold icons to spec --- app/panel/components/Summary.jsx | 2 +- app/scss/partials/_summary.scss | 10 +++++++++- 2 files changed, 10 insertions(+), 2 deletions(-) diff --git a/app/panel/components/Summary.jsx b/app/panel/components/Summary.jsx index ec177536b..5863f3f2a 100644 --- a/app/panel/components/Summary.jsx +++ b/app/panel/components/Summary.jsx @@ -446,7 +446,7 @@ class Summary extends React.Component { const statsNavButton = (); const plusUpgradeBannerOrSubscriberIcon = ( - (plusSubscriber && ) || + (plusSubscriber && ) || ( (is_expert && ) || diff --git a/app/scss/partials/_summary.scss b/app/scss/partials/_summary.scss index d568050c9..5d4b20dde 100644 --- a/app/scss/partials/_summary.scss +++ b/app/scss/partials/_summary.scss @@ -213,6 +213,14 @@ top: 10px; } &.expert .green-upgrade-banner { - top: 7px; + top: -4px; + } + .gold-plus-icon { + position: absolute; + left: 10px; + top: 11px; + } + &.expert .gold-plus-icon { + top: -4px; } } From 2a43fa9ecc9c24e923707c198c5cc8725abfc6ff Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Wed, 17 Apr 2019 10:01:12 -0400 Subject: [PATCH 29/43] Add click handling for simple and detailed view upgrade banner and gold badge. Adjust CSS for them. --- app/panel/components/Summary.jsx | 25 +++++++++++++++++++----- app/panel/containers/SummaryContainer.js | 1 + app/scss/partials/_summary.scss | 2 ++ 3 files changed, 23 insertions(+), 5 deletions(-) diff --git a/app/panel/components/Summary.jsx b/app/panel/components/Summary.jsx index 5863f3f2a..43e4f4555 100644 --- a/app/panel/components/Summary.jsx +++ b/app/panel/components/Summary.jsx @@ -282,6 +282,17 @@ class Summary extends React.Component { this.props.actions.toggleCliqzFeature(feature, status); } + /** + * Handles clicking on the green upgrade banner or gold subscriber badge + */ + clickUpgradeBannerOrGoldPlusIcon = () => { + // TODO check whether this is the message we want to be sending now + sendMessage('ping', 'plus_panel_from_badge'); + const { user } = this.props; + const plusSubscriber = user && user.subscriptionsPlus; + this.props.history.push(plusSubscriber ? '/subscription/info' : `/subscribe/${!!user}`); + } + /** * React's required render function. Returns JSX * @return {JSX} JSX for rendering the Summary View of the panel @@ -446,11 +457,15 @@ class Summary extends React.Component { const statsNavButton = (); const plusUpgradeBannerOrSubscriberIcon = ( - (plusSubscriber && ) || - ( - (is_expert && ) || - - ) +
+ { + (plusSubscriber && ) || + ( + (is_expert && ) || + + ) + } +
); if (showCondensed) { diff --git a/app/panel/containers/SummaryContainer.js b/app/panel/containers/SummaryContainer.js index 09aadbe26..826400617 100644 --- a/app/panel/containers/SummaryContainer.js +++ b/app/panel/containers/SummaryContainer.js @@ -29,6 +29,7 @@ const mapStateToProps = state => Object.assign({}, state.summary, state.panel, { is_expanded: state.panel.is_expanded, is_expert: state.panel.is_expert, tab_id: state.panel.tab_id, + user: state.account.user }); /** * Bind Summary view component action creators using Redux's bindActionCreators diff --git a/app/scss/partials/_summary.scss b/app/scss/partials/_summary.scss index 5d4b20dde..132fd1179 100644 --- a/app/scss/partials/_summary.scss +++ b/app/scss/partials/_summary.scss @@ -208,6 +208,7 @@ border-radius: 5px 0 0 5px; } .green-upgrade-banner { + @extend %pointer; position: absolute; left: 0; top: 10px; @@ -216,6 +217,7 @@ top: -4px; } .gold-plus-icon { + @extend %pointer; position: absolute; left: 10px; top: 11px; From dfb95962b2f4a521a455f153333bf6cf717de5de Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Wed, 17 Apr 2019 11:56:30 -0400 Subject: [PATCH 30/43] Switch between upgrade banner and gold icon in Summary view on sign in / out instead of on panel reopen --- app/panel/components/Summary.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/app/panel/components/Summary.jsx b/app/panel/components/Summary.jsx index 43e4f4555..90d1beb13 100644 --- a/app/panel/components/Summary.jsx +++ b/app/panel/components/Summary.jsx @@ -300,7 +300,6 @@ class Summary extends React.Component { render() { const { abPause } = this.state; const { - account, is_expert, is_expanded, enable_anti_tracking, @@ -312,8 +311,9 @@ class Summary extends React.Component { paused_blocking, sitePolicy, trackerCounts, + user } = this.props; - const plusSubscriber = account && account.user && account.user.subscriptionsPlus; + const plusSubscriber = user && user.subscriptionsPlus; const showCondensed = is_expert && is_expanded; const antiTrackUnsafe = enable_anti_tracking && antiTracking && antiTracking.totalUnsafeCount || 0; const adBlockBlocked = enable_ad_block && adBlock && adBlock.totalCount || 0; From 10631abde4964810b36a43cb5af834ac55003d59 Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Thu, 18 Apr 2019 12:02:10 -0400 Subject: [PATCH 31/43] Decompose totalTrackersBlockedAndPageLoadTime in Summary#render --- app/panel/components/Summary.jsx | 43 ++++++++++++++++++++------------ 1 file changed, 27 insertions(+), 16 deletions(-) diff --git a/app/panel/components/Summary.jsx b/app/panel/components/Summary.jsx index 90d1beb13..82b28b2e0 100644 --- a/app/panel/components/Summary.jsx +++ b/app/panel/components/Summary.jsx @@ -403,20 +403,21 @@ class Summary extends React.Component {
); - const totalTrackersBlockedAndPageLoadTime = ( -
-
- {t('trackers_blocked')} - - {trackersBlockedCount} - -
-
- {t('page_load')} - - {this.state.trackerLatencyTotal ? `${this.state.trackerLatencyTotal} ${t('settings_seconds')}` : '-'} - -
+ const totalTrackersBlocked = ( +
+ {t('trackers_blocked')} + + {trackersBlockedCount} + +
+ ); + + const pageLoadTime = ( +
+ {t('page_load')} + + {this.state.trackerLatencyTotal ? `${this.state.trackerLatencyTotal} ${t('settings_seconds')}` : '-'} +
); @@ -473,7 +474,12 @@ class Summary extends React.Component {
{abPause && pauseButton} {!this.state.disableBlocking && totalTrackersFound} - {!this.state.disableBlocking && totalTrackersBlockedAndPageLoadTime} + {!this.state.disableBlocking && +
+ {totalTrackersBlocked} + {pageLoadTime} +
+ } {this.state.disableBlocking && is_expert && (
)} @@ -500,7 +506,12 @@ class Summary extends React.Component { {pageHost}
)} - {!this.state.disableBlocking && totalTrackersBlockedAndPageLoadTime} + {!this.state.disableBlocking && +
+ {totalTrackersBlocked} + {pageLoadTime} +
+ } {ghosteryFeatures} {cliqzFeatures} {statsNavButton} From be447e73eb8d17e1dd010378585a4cd4dc68f207 Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Thu, 18 Apr 2019 12:17:19 -0400 Subject: [PATCH 32/43] Remove duplication from return of Summary#render --- app/panel/components/Summary.jsx | 42 ++++++++++++-------------------- 1 file changed, 15 insertions(+), 27 deletions(-) diff --git a/app/panel/components/Summary.jsx b/app/panel/components/Summary.jsx index 82b28b2e0..07b2fe81f 100644 --- a/app/panel/components/Summary.jsx +++ b/app/panel/components/Summary.jsx @@ -469,53 +469,41 @@ class Summary extends React.Component {
); - if (showCondensed) { - return ( -
- {abPause && pauseButton} - {!this.state.disableBlocking && totalTrackersFound} - {!this.state.disableBlocking && -
- {totalTrackersBlocked} - {pageLoadTime} -
- } - {this.state.disableBlocking && is_expert && ( -
- )} - {ghosteryFeatures} - {cliqzFeatures} - {statsNavButton} -
- ); - } - - // !showCondensed return (
{abPause && pauseButton} - {this.state.disableBlocking && ()} - {abPause && !this.state.disableBlocking && is_expert && ( + + {!showCondensed && this.state.disableBlocking && ()} + {!showCondensed && abPause && !this.state.disableBlocking && is_expert && (
{pageHost}
)} - {!this.state.disableBlocking && donut} - {!this.state.disableBlocking && (!abPause || !is_expert) && ( + {!showCondensed && !this.state.disableBlocking && donut} + {!showCondensed && !this.state.disableBlocking && (!abPause || !is_expert) && (
{pageHost}
)} + + {showCondensed && !this.state.disableBlocking && totalTrackersFound} + {!this.state.disableBlocking &&
{totalTrackersBlocked} {pageLoadTime}
} + + {showCondensed && this.state.disableBlocking && is_expert && ( +
+ )} + {ghosteryFeatures} {cliqzFeatures} {statsNavButton} - {plusUpgradeBannerOrSubscriberIcon} + + {!showCondensed && plusUpgradeBannerOrSubscriberIcon}
); } From c38b4b531ad63805703227c98e011aecf623debf Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Thu, 18 Apr 2019 15:55:57 -0400 Subject: [PATCH 33/43] Fix Summary view display in Midnight theme on Detailed tab. Realign green upgrade banner and gold icon accordingly. Add debug and log truebools back into manifest --- app/scss/partials/_summary.scss | 8 +------- manifest.json | 4 +++- 2 files changed, 4 insertions(+), 8 deletions(-) diff --git a/app/scss/partials/_summary.scss b/app/scss/partials/_summary.scss index 132fd1179..54dacac63 100644 --- a/app/scss/partials/_summary.scss +++ b/app/scss/partials/_summary.scss @@ -18,7 +18,7 @@ &.expert { width: 235px; - margin-top: 15px; + padding-top: 15px; } &.expert.condensed { @@ -213,16 +213,10 @@ left: 0; top: 10px; } - &.expert .green-upgrade-banner { - top: -4px; - } .gold-plus-icon { @extend %pointer; position: absolute; left: 10px; top: 11px; } - &.expert .gold-plus-icon { - top: -4px; - } } diff --git a/manifest.json b/manifest.json index 4ec457b83..c629b7a6c 100644 --- a/manifest.json +++ b/manifest.json @@ -12,6 +12,8 @@ "version": "8.3.2", "version_name": "8.3.2", "default_locale": "en", + "debug": true, + "log": true, "description": "__MSG_short_description__", "icons": { "16": "app/images/icon16.png", @@ -100,4 +102,4 @@ "app/images/*", "dist/css/rewards_styles.css" ] -} \ No newline at end of file +} From ce7158b4d9e9adee0a10ffac07c7b82596fe98d4 Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Fri, 19 Apr 2019 11:52:17 -0400 Subject: [PATCH 34/43] Display subscriber badge in header in gold in Midnight theme --- app/panel/components/Header.jsx | 2 +- app/scss/partials/_header.scss | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/app/panel/components/Header.jsx b/app/panel/components/Header.jsx index 2f85d935a..45a31ef2d 100644 --- a/app/panel/components/Header.jsx +++ b/app/panel/components/Header.jsx @@ -180,7 +180,7 @@ class Header extends React.Component { const accountLogolink = this.generateAccountLogo(); const badgeClasses = ClassNames('columns', 'shrink', { 'non-subscriber-badge': !subscriber, - 'subscriber-badge': subscriber + 'gold-subscriber-badge': subscriber }); const simpleTab = ( diff --git a/app/scss/partials/_header.scss b/app/scss/partials/_header.scss index 266a566db..2c29a8281 100644 --- a/app/scss/partials/_header.scss +++ b/app/scss/partials/_header.scss @@ -74,7 +74,7 @@ @extend %pointer; display: block; } - .subscriber-badge { + .gold-subscriber-badge { @extend .base-badge; margin-top: 4px; } From 80a1736740290bc0cf03e36cb0af90d624ca5e93 Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Fri, 19 Apr 2019 15:25:50 -0400 Subject: [PATCH 35/43] Add upgrade banner text to locale strings file. Remove SVG upgarde text. Replace it with a text span. --- _locales/en/messages.json | 3 +++ app/images/panel/green-upgrade-banner-no-text.svg | 13 +++++++++++++ app/panel/components/Summary.jsx | 5 ++++- app/scss/partials/_summary.scss | 12 +++++++++--- 4 files changed, 29 insertions(+), 4 deletions(-) create mode 100644 app/images/panel/green-upgrade-banner-no-text.svg diff --git a/_locales/en/messages.json b/_locales/en/messages.json index 8170e57da..c23068f07 100644 --- a/_locales/en/messages.json +++ b/_locales/en/messages.json @@ -2130,6 +2130,9 @@ "subscription_submit_issue": { "message": "Submit Issue" }, + "subscription_upgrade_to": { + "message": "Upgrade to" + }, "panel_stats_menu_cumulative": { "message": "Cumulative" }, diff --git a/app/images/panel/green-upgrade-banner-no-text.svg b/app/images/panel/green-upgrade-banner-no-text.svg new file mode 100644 index 000000000..090b60ffd --- /dev/null +++ b/app/images/panel/green-upgrade-banner-no-text.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/app/panel/components/Summary.jsx b/app/panel/components/Summary.jsx index 07b2fe81f..def4f48a5 100644 --- a/app/panel/components/Summary.jsx +++ b/app/panel/components/Summary.jsx @@ -463,9 +463,12 @@ class Summary extends React.Component { (plusSubscriber && ) || ( (is_expert && ) || - + ) } + {!plusSubscriber && !is_expert && + {t('subscription_upgrade_to')} + }
); diff --git a/app/scss/partials/_summary.scss b/app/scss/partials/_summary.scss index 54dacac63..ae6624b99 100644 --- a/app/scss/partials/_summary.scss +++ b/app/scss/partials/_summary.scss @@ -207,15 +207,21 @@ border: 1px lightgray solid; border-radius: 5px 0 0 5px; } - .green-upgrade-banner { + .base-badge { @extend %pointer; position: absolute; + } + .green-upgrade-banner { + @extend .base-badge; left: 0; top: 10px; } + .green-upgrade-banner text { + font-family: "Open Sans", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif; + font-size: 13px; + } .gold-plus-icon { - @extend %pointer; - position: absolute; + @extend .base-badge; left: 10px; top: 11px; } From 26c6ab030e7afb096de7bc3c975ac9c4e33a098f Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Fri, 19 Apr 2019 16:56:18 -0400 Subject: [PATCH 36/43] Finalize CSS for upgrade banner text. Delete duplicate upgrade banner SVG --- .../panel/green-upgrade-banner-no-text.svg | 13 ----------- app/images/panel/green-upgrade-banner.svg | 23 ++++++++++--------- app/panel/components/Summary.jsx | 18 +++++++++------ app/scss/partials/_summary.scss | 10 +++++--- 4 files changed, 30 insertions(+), 34 deletions(-) delete mode 100644 app/images/panel/green-upgrade-banner-no-text.svg diff --git a/app/images/panel/green-upgrade-banner-no-text.svg b/app/images/panel/green-upgrade-banner-no-text.svg deleted file mode 100644 index 090b60ffd..000000000 --- a/app/images/panel/green-upgrade-banner-no-text.svg +++ /dev/null @@ -1,13 +0,0 @@ - - - - - - - - - - - - - diff --git a/app/images/panel/green-upgrade-banner.svg b/app/images/panel/green-upgrade-banner.svg index 9f7b14bb3..090b60ffd 100644 --- a/app/images/panel/green-upgrade-banner.svg +++ b/app/images/panel/green-upgrade-banner.svg @@ -1,12 +1,13 @@ - - - - - - - - - - - + + + + + + + + + + + + diff --git a/app/panel/components/Summary.jsx b/app/panel/components/Summary.jsx index def4f48a5..73fe836c5 100644 --- a/app/panel/components/Summary.jsx +++ b/app/panel/components/Summary.jsx @@ -459,15 +459,19 @@ class Summary extends React.Component { const plusUpgradeBannerOrSubscriberIcon = (
- { - (plusSubscriber && ) || - ( - (is_expert && ) || - - ) + {plusSubscriber && + + } + + {!plusSubscriber && is_expert && + + } + + {!plusSubscriber && !is_expert && + } {!plusSubscriber && !is_expert && - {t('subscription_upgrade_to')} + {t('subscription_upgrade_to')} }
); diff --git a/app/scss/partials/_summary.scss b/app/scss/partials/_summary.scss index ae6624b99..71e6895d5 100644 --- a/app/scss/partials/_summary.scss +++ b/app/scss/partials/_summary.scss @@ -213,12 +213,16 @@ } .green-upgrade-banner { @extend .base-badge; - left: 0; top: 10px; } - .green-upgrade-banner text { + .green-upgrade-banner-text { + @extend .base-badge; font-family: "Open Sans", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif; - font-size: 13px; + font-size: 12px; + font-weight: bold; + top: 13px; + left: 14px; + color: white; } .gold-plus-icon { @extend .base-badge; From de6aa6b5d3508bde51c63b700cd89145ae5a3d77 Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Fri, 19 Apr 2019 17:21:33 -0400 Subject: [PATCH 37/43] Convert 'upgrade to' text in the green banner from SVG to text for smaller detail view banner --- .../panel/green-upgrade-banner-small.svg | 25 ++++++++++--------- app/panel/components/Summary.jsx | 13 ++++++---- app/scss/partials/_summary.scss | 16 +++++++++--- 3 files changed, 34 insertions(+), 20 deletions(-) diff --git a/app/images/panel/green-upgrade-banner-small.svg b/app/images/panel/green-upgrade-banner-small.svg index d28dec6cd..210cc4245 100644 --- a/app/images/panel/green-upgrade-banner-small.svg +++ b/app/images/panel/green-upgrade-banner-small.svg @@ -1,12 +1,13 @@ - - - - - - - - - - - - + + + + + + + + + + + + + \ No newline at end of file diff --git a/app/panel/components/Summary.jsx b/app/panel/components/Summary.jsx index 73fe836c5..3045092ba 100644 --- a/app/panel/components/Summary.jsx +++ b/app/panel/components/Summary.jsx @@ -464,14 +464,17 @@ class Summary extends React.Component { } {!plusSubscriber && is_expert && - +
+ + {t('subscription_upgrade_to')} +
} {!plusSubscriber && !is_expert && - - } - {!plusSubscriber && !is_expert && - {t('subscription_upgrade_to')} +
+ + {t('subscription_upgrade_to')} +
}
); diff --git a/app/scss/partials/_summary.scss b/app/scss/partials/_summary.scss index 71e6895d5..0d2aa3f9c 100644 --- a/app/scss/partials/_summary.scss +++ b/app/scss/partials/_summary.scss @@ -215,14 +215,24 @@ @extend .base-badge; top: 10px; } - .green-upgrade-banner-text { + .base-green-upgrade-banner-text { @extend .base-badge; font-family: "Open Sans", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif; - font-size: 12px; font-weight: bold; + color: white; + + } + .green-upgrade-banner-text { + @extend .base-green-upgrade-banner-text; + font-size: 12px; top: 13px; left: 14px; - color: white; + } + .green-upgrade-banner-text-small { + @extend .base-green-upgrade-banner-text; + font-size: 10px; + top: 13px; + left: 6px; } .gold-plus-icon { @extend .base-badge; From c7a43eef8975ddc0a542360a1bf95e87fd0a1085 Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Fri, 19 Apr 2019 17:31:20 -0400 Subject: [PATCH 38/43] Make sure upgrade banner or subscriber badge display in the hamburger dropdown views --- app/panel/components/Header.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/panel/components/Header.jsx b/app/panel/components/Header.jsx index 45a31ef2d..61dc8aba8 100644 --- a/app/panel/components/Header.jsx +++ b/app/panel/components/Header.jsx @@ -259,7 +259,7 @@ class Header extends React.Component {
{accountLogolink}
- {(is_expert && is_expanded) && plusUpgradeBannerOrSubscriberBadgeLogolink } + {((is_expert && is_expanded) || !showTabs) && plusUpgradeBannerOrSubscriberBadgeLogolink } {headerMenuKebab}
{ this.state.dropdownOpen && headerMenu } From 9aef19d11ea4da0aae365892e51de826b83f9e9b Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Tue, 23 Apr 2019 15:57:46 -0400 Subject: [PATCH 39/43] Modify upgrade banner to scale along with text that may vary in length by locale --- app/images/panel/green-upgrade-banner.svg | 3 +-- app/images/panel/upgrade-banner-plus.svg | 4 ++++ app/panel/components/Summary.jsx | 6 +++--- app/scss/partials/_summary.scss | 22 ++++++++++++++++++++++ 4 files changed, 30 insertions(+), 5 deletions(-) create mode 100644 app/images/panel/upgrade-banner-plus.svg diff --git a/app/images/panel/green-upgrade-banner.svg b/app/images/panel/green-upgrade-banner.svg index 090b60ffd..cc2d1951b 100644 --- a/app/images/panel/green-upgrade-banner.svg +++ b/app/images/panel/green-upgrade-banner.svg @@ -1,5 +1,5 @@ - + @@ -8,6 +8,5 @@ - diff --git a/app/images/panel/upgrade-banner-plus.svg b/app/images/panel/upgrade-banner-plus.svg new file mode 100644 index 000000000..4fad53948 --- /dev/null +++ b/app/images/panel/upgrade-banner-plus.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/app/panel/components/Summary.jsx b/app/panel/components/Summary.jsx index 3045092ba..5016ddd6c 100644 --- a/app/panel/components/Summary.jsx +++ b/app/panel/components/Summary.jsx @@ -471,9 +471,9 @@ class Summary extends React.Component { } {!plusSubscriber && !is_expert && -
- - {t('subscription_upgrade_to')} +
+ {t('subscription_upgrade_to')} +
}
diff --git a/app/scss/partials/_summary.scss b/app/scss/partials/_summary.scss index 0d2aa3f9c..9d71745d9 100644 --- a/app/scss/partials/_summary.scss +++ b/app/scss/partials/_summary.scss @@ -207,6 +207,28 @@ border: 1px lightgray solid; border-radius: 5px 0 0 5px; } + + .upgrade-banner-container { + @extend %pointer; + position: absolute; + top: 10px; + // background-image: linear-gradient(to bottom left, #9ECC42, #429321); + background: url("../../app/images/panel/green-upgrade-banner.svg"); + background-repeat: no-repeat; + background-size: 100% 23px; + } + + .upgrade-banner-text { + display: inline-block; + font-family: "Open Sans", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif; + font-weight: bold; + color: white; + } + + .upgrade-banner-plus { + display: inline-block; + } + .base-badge { @extend %pointer; position: absolute; From 400617408c1e3d6fcdb12704e4e0dbaa698a381d Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Tue, 23 Apr 2019 18:14:09 -0400 Subject: [PATCH 40/43] Tweak scalable CSS for simple view upgrade banner --- app/scss/partials/_summary.scss | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/app/scss/partials/_summary.scss b/app/scss/partials/_summary.scss index 9d71745d9..c1c31cff6 100644 --- a/app/scss/partials/_summary.scss +++ b/app/scss/partials/_summary.scss @@ -212,21 +212,25 @@ @extend %pointer; position: absolute; top: 10px; - // background-image: linear-gradient(to bottom left, #9ECC42, #429321); background: url("../../app/images/panel/green-upgrade-banner.svg"); - background-repeat: no-repeat; background-size: 100% 23px; + height: 23px; } .upgrade-banner-text { display: inline-block; + padding: 0 4px 0 10px; + vertical-align: sub; font-family: "Open Sans", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif; font-weight: bold; + font-size: 12px; color: white; } .upgrade-banner-plus { display: inline-block; + padding-right: 18px; + vertical-align: sub; } .base-badge { From 43b5988405cab501640b147dac81eebb15743a42 Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Wed, 24 Apr 2019 12:17:54 -0400 Subject: [PATCH 41/43] Dedupe upgrade banner render code. Clean up CSS. Make sure banners stretch in both detailed and summary views. --- .../panel/green-upgrade-banner-small.svg | 13 -- app/panel/components/Summary.jsx | 9 +- app/scss/partials/_summary.scss | 128 ++++++++++++------ 3 files changed, 85 insertions(+), 65 deletions(-) delete mode 100644 app/images/panel/green-upgrade-banner-small.svg diff --git a/app/images/panel/green-upgrade-banner-small.svg b/app/images/panel/green-upgrade-banner-small.svg deleted file mode 100644 index 210cc4245..000000000 --- a/app/images/panel/green-upgrade-banner-small.svg +++ /dev/null @@ -1,13 +0,0 @@ - - - - - - - - - - - - - \ No newline at end of file diff --git a/app/panel/components/Summary.jsx b/app/panel/components/Summary.jsx index 5016ddd6c..6a4885d04 100644 --- a/app/panel/components/Summary.jsx +++ b/app/panel/components/Summary.jsx @@ -463,14 +463,7 @@ class Summary extends React.Component { } - {!plusSubscriber && is_expert && -
- - {t('subscription_upgrade_to')} -
- } - - {!plusSubscriber && !is_expert && + {!plusSubscriber &&
{t('subscription_upgrade_to')} diff --git a/app/scss/partials/_summary.scss b/app/scss/partials/_summary.scss index c1c31cff6..3ca8ab751 100644 --- a/app/scss/partials/_summary.scss +++ b/app/scss/partials/_summary.scss @@ -26,22 +26,30 @@ background-color: #f9f6f6; } - .clickable { cursor: pointer; } - .not-clickable { cursor: not-allowed; } + .clickable { + cursor: pointer; + } + + .not-clickable { + cursor: not-allowed; + } &.ab-pause .pause-button-container { padding: 10px 0 0 10px; text-align: left; } + &.ab-pause .sub-component.pause-button { .button-pause { font-size: 11px; } } + &.expert.ab-pause .pause-button-container { padding: 10px 0 0 0; text-align: center; } + &.expert.condensed.ab-pause .pause-button-container { padding: 0; text-align: left; @@ -53,17 +61,21 @@ font-size: 11px; font-weight: 600; margin-bottom: 36px; + &.invisible { visibility: hidden; } } + &.ab-pause .page-host { margin-bottom: 30px; } + &.expert .page-host { margin-top: 20px; margin-bottom: 20px; } + &.expert.ab-pause .page-host { margin-top: 8px; margin-bottom: 8px; @@ -74,16 +86,19 @@ height: 120px; width: 120px; } + &.ab-pause .donut-graph-container { margin-top: 0; margin-bottom: 30px; } + &.expert .donut-graph-container { height: 94px; width: 94px; margin-top: 21px; margin-bottom: 20px; } + &.expert.ab-pause .donut-graph-container { margin-top: 0; margin-bottom: 16px; @@ -97,6 +112,7 @@ font-weight: 600; margin: 18px 0; } + &.expert.condensed.ab-pause .total-tracker-count { margin: 13px 0; } @@ -108,10 +124,22 @@ line-height: 21px; font-weight: 600; margin-bottom: 40px; - .blocked-trackers .value { color: #e74055; } - .page-load .value { color: #ffc063; } - .page-load.fast .value { color: #9ecc42; } - .page-load.slow .value { color: #e74055; } + + .blocked-trackers .value { + color: #e74055; + } + + .page-load .value { + color: #ffc063; + } + + .page-load.fast .value { + color: #9ecc42; + } + + .page-load.slow .value { + color: #e74055; + } .blocked-trackers, .page-load { @@ -119,8 +147,10 @@ padding: 0 20px; } } + &.expert .page-stats { margin-bottom: 21px; + .blocked-trackers, .page-load { display: block; @@ -129,52 +159,72 @@ overflow-x: hidden; } } + &.expert.ab-pause .page-stats { margin-bottom: 16px; } + &.expert.condensed .page-stats { div { text-align: center; padding: 0; margin: 21px 0; } - .text { display: none; } + + .text { + display: none; + } } + &.expert.condensed.ab-pause .page-stats { margin-bottom: 0; - div { margin: 13px 0; } + + div { + margin: 13px 0; + } } .not-scanned-expert-condensed-space-taker { height: 162px; } + &.ab-pause .not-scanned-expert-condensed-space-taker { height: 130px; } .ghostery-features-container { text-align: center; + .ghostery-features, .pause-button { display: inline-block; } } + &.ab-pause .ghostery-features-container { margin-bottom: 22px; - .ghostery-features { display: block; } + + .ghostery-features { + display: block; + } } + &.expert.ab-pause .ghostery-features-container { - margin-bottom: 16px; + margin-bottom: 16px; } + &.expert.condensed.ab-pause .ghostery-features-container { margin-bottom: -8px; } + .ghostery-features-container .button-restrict { margin: 12px 28px; } + &.expert.condensed .ghostery-features-container .button-restrict { margin: 0; } + &.ab-pause .ghostery-features-container .button-restrict { margin: 0; } @@ -182,23 +232,29 @@ .cliqz-features-container { text-align: center; } + &.expert .cliqz-features-container { margin-top: 10px; margin-bottom: 6px; } + &.expert.ab-pause .cliqz-features-container { margin-top: 0; margin-bottom: 16px; } + &.expert.condensed.ab-pause .cliqz-features-container { margin-top: 14px; } + &.expert.condensed .cliqz-features-container { margin-bottom: 0; + .cliqz-feature:last-of-type { margin-bottom: 0; } } + .stats-button { position: absolute; right: 0; @@ -217,52 +273,36 @@ height: 23px; } + &.expert .upgrade-banner-container { + background-size: 100% 20px; + height: 20px; + } + .upgrade-banner-text { display: inline-block; - padding: 0 4px 0 10px; - vertical-align: sub; font-family: "Open Sans", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif; font-weight: bold; - font-size: 12px; color: white; + + font-size: 12px; + vertical-align: sub; + padding: 0 4px 0 10px; + } + + &.expert .upgrade-banner-text { + font-size: 10px; + vertical-align: baseline; + padding-left: 8px; } .upgrade-banner-plus { display: inline-block; padding-right: 18px; - vertical-align: sub; - } - .base-badge { - @extend %pointer; - position: absolute; - } - .green-upgrade-banner { - @extend .base-badge; - top: 10px; + vertical-align: sub; } - .base-green-upgrade-banner-text { - @extend .base-badge; - font-family: "Open Sans", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif; - font-weight: bold; - color: white; - } - .green-upgrade-banner-text { - @extend .base-green-upgrade-banner-text; - font-size: 12px; - top: 13px; - left: 14px; - } - .green-upgrade-banner-text-small { - @extend .base-green-upgrade-banner-text; - font-size: 10px; - top: 13px; - left: 6px; - } - .gold-plus-icon { - @extend .base-badge; - left: 10px; - top: 11px; + &.expert .upgrade-banner-plus { + vertical-align: middle; } } From 56e607acf4be410c4d52cc05e7c7597b35e35d1d Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Wed, 24 Apr 2019 13:26:06 -0400 Subject: [PATCH 42/43] Restore mistakenly deleted gold Plus icon CSS --- app/scss/partials/_summary.scss | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/app/scss/partials/_summary.scss b/app/scss/partials/_summary.scss index 3ca8ab751..c48cb1b21 100644 --- a/app/scss/partials/_summary.scss +++ b/app/scss/partials/_summary.scss @@ -305,4 +305,11 @@ &.expert .upgrade-banner-plus { vertical-align: middle; } + + .gold-plus-icon { + @extend %pointer; + position: absolute; + left: 10px; + top: 11px; + } } From bbae8e771747d683c18f8adfa8cfd802d97566e7 Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Wed, 24 Apr 2019 13:29:14 -0400 Subject: [PATCH 43/43] Fix Summary view alignment in Condensed mode --- app/scss/partials/_summary.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/app/scss/partials/_summary.scss b/app/scss/partials/_summary.scss index c48cb1b21..0b37a9f76 100644 --- a/app/scss/partials/_summary.scss +++ b/app/scss/partials/_summary.scss @@ -23,6 +23,7 @@ &.expert.condensed { width: 66px; + padding-top: 0; background-color: #f9f6f6; }