Updated simple view and detailed expert and condensed views.

_locales/en/messages.json

@@ -479,12 +479,21 @@
 	"pause_30_min": {
 		"message": "for 30 min"
 	},
+	"pause_30_min_condensed": {
+		"message": "30 mins"
+	},
 	"pause_1_hour": {
 		"message": "for 1 hour"
 	},
+	"pause_1_hour_condensed": {
+		"message": "1 hr"
+	},
 	"pause_24_hours": {
 		"message": "for 24 hours"
 	},
+	"pause_24_hours_condensed": {
+		"message": "24 hrs"
+	},
 	"summary_resume_ghostery": {
 		"message": "Resume"
 	},
@@ -771,6 +780,12 @@
 	"panel_header_verify_account": {
 		"message": "Verify Account"
 	},
+	"panel_header_simple_view": {
+		"message": "Simple View"
+	},
+	"panel_header_detailed_view": {
+		"message": "Detailed View"
+	},
 	"password_characters_requirements": {
 		"message": "Only these special characters are allowed: !@#$%^&*=+()<>{}[];:,./?"
 	},

app/images/panel/line-empty-moon.svg

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="4px" height="23px" viewBox="0 0 4 23" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 49.2 (51160) - http://www.bohemiancoding.com/sketch -->
+    <title>Line</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round">
+        <path d="M2,1.5 L2,21.5" id="Line" stroke="#D1D9DC" stroke-width="3"></path>
+    </g>
+</svg>

app/images/panel/right-left-moon.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="52px" viewBox="0 0 24 52" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 49.2 (51160) - http://www.bohemiancoding.com/sketch -->
+    <title>right-left-moon</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="right-left-moon" transform="translate(12.000000, 26.000000) scale(-1, 1) translate(-12.000000, -26.000000) " fill-rule="nonzero">
+            <path d="M24,51.8484415 C10.5751046,50.8271917 0,39.6106802 0,25.9242207 C0,12.2377612 10.5751046,1.02124974 24,2.14481211e-13 L24,51.8484415 Z" id="Combined-Shape" fill="#EBEBEB"></path>
+            <polygon id="Shape" fill="#4A4A4A" transform="translate(13.500000, 25.500000) scale(-1, 1) rotate(-180.000000) translate(-13.500000, -25.500000) " points="10 21.2833333 11.3243243 20 17 25.5 11.3243243 31 10 29.7166667 14.3513514 25.5"></polygon>
+        </g>
+    </g>
+</svg>

app/images/panel/right-right-moon.svg

@@ -1,17 +1,13 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg width="24px" height="52px" viewBox="0 0 24 52" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: Sketch 47.1 (45422) - http://www.bohemiancoding.com/sketch -->
-    <title>symbol - half circle caret right</title>
+    <!-- Generator: Sketch 49.2 (51160) - http://www.bohemiancoding.com/sketch -->
+    <title>right-right-moon</title>
     <desc>Created with Sketch.</desc>
     <defs></defs>
     <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="Card-view---settings-global-expanded--carrot-hover" transform="translate(-666.000000, -338.000000)">
-            <g id="Group-7" transform="translate(678.000000, 364.000000) scale(-1, 1) translate(-678.000000, -364.000000) translate(666.000000, 338.000000)">
-                <g id="symbol---half-circle-caret-right">
-                    <path d="M24,51.8484415 C10.5751046,50.8271917 0,39.6106802 0,25.9242207 C0,12.2377612 10.5751046,1.02124974 24,2.14481211e-13 L24,51.8484415 Z" id="Combined-Shape" fill="#EBEBEB"></path>
-                    <polygon id="Shape" fill="#4A4A4A" transform="translate(13.500000, 25.500000) rotate(180.000000) translate(-13.500000, -25.500000) " points="10 21.2833333 11.3243243 20 17 25.5 11.3243243 31 10 29.7166667 14.3513514 25.5"></polygon>
-                </g>
-            </g>
+        <g id="right-right-moon" transform="translate(12.000000, 26.000000) scale(-1, 1) translate(-12.000000, -26.000000) " fill-rule="nonzero">
+            <path d="M24,51.8484415 C10.5751046,50.8271917 0,39.6106802 0,25.9242207 C0,12.2377612 10.5751046,1.02124974 24,2.14481211e-13 L24,51.8484415 Z" id="Combined-Shape" fill="#EBEBEB"></path>
+            <polygon id="Shape" fill="#4A4A4A" transform="translate(13.500000, 25.500000) rotate(180.000000) translate(-13.500000, -25.500000) " points="10 21.2833333 11.3243243 20 17 25.5 11.3243243 31 10 29.7166667 14.3513514 25.5"></polygon>
         </g>
     </g>
-</svg>
+</svg>

app/panel/actions/PanelActions.js

@@ -15,6 +15,7 @@ import { GET_PANEL_DATA, GET_SUMMARY_DATA, GET_BLOCKING_DATA,
 	SHOW_NOTIFICATION,
 	TOGGLE_CLIQZ_FEATURE,
 	CLOSE_NOTIFICATION,
+	TOGGLE_EXPERT,
 	LOGIN_SUCCESS, LOGIN_FAILED,
 	LOGOUT,
 	CREATE_ACCOUNT_SUCCESS, CREATE_ACCOUNT_FAILED,
@@ -101,6 +102,16 @@ export function closeNotification(data) {
 	};
 }
 
+/**
+ * Called from Header.toggleExpert() and picked up by panel reducer
+ * @return {Object}
+ */
+export function toggleExpert() {
+	return {
+		type: TOGGLE_EXPERT,
+	};
+}
+
 /**
  * Call consumerAPI and set updated login info to state. Called from Login
  * Component. Picked up by Panel reducer.

app/panel/components/Blocking.jsx

@@ -14,7 +14,7 @@
 import React, { Component } from 'react';
 import Categories from './Blocking/Categories';
 import BlockingHeader from './Blocking/BlockingHeader';
-import NotScanned from './NotScanned';
+import NotScanned from './BuildingBlocks/NotScanned';
 import { updateSummaryBlockingCount } from '../utils/blocking';
 /**
  * @class Implement Blocking View in the right
@@ -254,7 +254,7 @@ class Blocking extends React.Component {
 					paused_blocking={this.props.paused_blocking}
 					selected_app_ids={this.props.selected_app_ids}
 				/>
-				{this.state.disableBlocking ?
+				{(this.state.disableBlocking && this.props.is_expanded) ?
 					<NotScanned />
 					:
 					<div className={`${this.state.blockingClasses} blocking-trackers show-warnings`}>

app/panel/components/BuildingBlocks/CliqzFeatures.jsx

@@ -114,9 +114,10 @@ class CliqzFeatures extends React.Component {
 	 */
 	render() {
 		const showBody = true; // ToDo: use this later
-		const { isCondensed, isInactive } = this.props;
+		const { isSmaller, isCondensed, isInactive } = this.props;
 
 		const cliqzFeaturesClassNames = ClassNames('sub-component', 'cliqz-features', {
+			smaller: isSmaller,
 			condensed: isCondensed,
 			inactive: isInactive,
 		});
@@ -144,7 +145,7 @@ class CliqzFeatures extends React.Component {
 						<Tooltip
 							header={t('tooltip_anti_track')}
 							body={showBody && t('tooltip_anti_track_body')}
-							position={isCondensed ? 'top top-right' : 'top'}
+							position={isCondensed ? 'right' : isSmaller ? 'top top-right' : 'top'}
 						/>
 					</div>
 					<div className="feature-name">
@@ -157,7 +158,7 @@ class CliqzFeatures extends React.Component {
 						<Tooltip
 							header={t('tooltip_ad_block')}
 							body={showBody && t('tooltip_ad_block_body')}
-							position="top"
+							position={isCondensed ? 'right' : 'top'}
 						/>
 					</div>
 					<div className="feature-name">
@@ -170,7 +171,7 @@ class CliqzFeatures extends React.Component {
 						<Tooltip
 							header={t('tooltip_smart_block')}
 							body={showBody && t('tooltip_smart_block_body')}
-							position={isCondensed ? 'top top-left' : 'top'}
+							position={isCondensed ? 'right right-bottom' : isSmaller ? 'top top-left' : 'top'}
 						/>
 					</div>
 					<div className="feature-name">

app/panel/components/BuildingBlocks/DonutGraph.jsx

@@ -85,13 +85,15 @@ class DonutGraph extends React.Component {
 			renderRedscale,
 			renderGreyscale,
 			totalCount,
+			ghosteryFeatureSelect,
 			isSmall,
 		} = this.props;
 
 		if (categories.length !== nextProps.categories.length ||
 			renderRedscale !== nextProps.renderRedscale ||
 			renderGreyscale !== nextProps.renderGreyscale ||
 			totalCount !== nextProps.totalCount ||
+			ghosteryFeatureSelect !== nextProps.ghosteryFeatureSelect ||
 			isSmall !== nextProps.isSmall) {
 			this.generateGraph(nextProps.categories, {
 				renderRedscale: nextProps.renderRedscale,

app/panel/components/BuildingBlocks/GhosteryFeatures.jsx

@@ -27,6 +27,8 @@ class GhosteryFeatures extends React.Component {
 		this.clickTrustButton = this.clickTrustButton.bind(this);
 		this.clickCustomButton = this.clickCustomButton.bind(this);
 		this.clickRestrictButton = this.clickRestrictButton.bind(this);
+		this.getTrustText = this.getTrustText.bind(this);
+		this.getRestrictText = this.getRestrictText.bind(this);
 	}
 
 	/**
@@ -59,12 +61,40 @@ class GhosteryFeatures extends React.Component {
 		this.props.clickButton('restrict');
 	}
 
+	/**
+	 * Gets the text for the Trust Button under different conditions
+	 * @return {String} The text for the Trust Button as a string
+	 */
+	getTrustText() {
+		if (this.props.isCondensed) {
+			return '';
+		} else if (this.props.sitePolicy === 2) {
+			return t('summary_trust_site_active');
+		} else {
+			return t('summary_trust_site');
+		}
+	}
+
+	/**
+	 * Gets the text for the Restrict Button under different conditions
+	 * @return {String} The text for the Restrict Button as a string
+	 */
+	getRestrictText() {
+		if (this.props.isCondensed) {
+			return '';
+		} else if (this.props.sitePolicy === 1) {
+			return t('summary_restrict_site_active');
+		} else {
+			return t('summary_restrict_site');
+		}
+	}
+
 	/**
 	 * React's required render function. Returns JSX
 	 * @return {JSX} JSX for rendering the Ghostery Features portion of the Summary View
 	 */
 	render() {
-		const { isInactive, isStacked, sitePolicy } = this.props;
+		const { isInactive, isStacked, isCondensed, sitePolicy } = this.props;
 
 		const buttonGroupClassNames = ClassNames('button-group', {
 			inactive: isInactive,
@@ -73,19 +103,22 @@ class GhosteryFeatures extends React.Component {
 		const trustClassNames = ClassNames('button', 'button-trust', 'g-tooltip', {
 			'button-left': !isStacked,
 			'button-top': isStacked,
+			condensed: isCondensed,
 			active: sitePolicy === 2,
 			clickable: !isInactive,
 			'not-clickable': isInactive,
 		});
 		const customClassNames = ClassNames('button', 'button-custom', 'g-tooltip', {
 			'button-center': true,
+			condensed: isCondensed,
 			active: !sitePolicy,
 			clickable: !isInactive,
 			'not-clickable': isInactive,
 		});
 		const restrictClassNames = ClassNames('button', 'button-restrict', 'g-tooltip', {
 			'button-right': !isStacked,
 			'button-bottom': isStacked,
+			condensed: isCondensed,
 			active: sitePolicy === 1,
 			clickable: !isInactive,
 			'not-clickable': isInactive,
@@ -97,7 +130,7 @@ class GhosteryFeatures extends React.Component {
 					<div className={trustClassNames} onClick={this.clickTrustButton}>
 						<span className="flex-container align-center-middle full-height">
 							<span className="button-text">
-								{(sitePolicy === 2) ? t('summary_trust_site_active') : t('summary_trust_site')}
+								{this.getTrustText()}
 							</span>
 						</span>
 						<Tooltip header={(sitePolicy === 2) ? t('summary_undo') : t('tooltip_trust')} position={(isStacked) ? 'right' : 'top'} />
@@ -113,7 +146,7 @@ class GhosteryFeatures extends React.Component {
 					<div className={restrictClassNames} onClick={this.clickRestrictButton}>
 						<span className="flex-container align-center-middle full-height">
 							<span className="button-text">
-								{(sitePolicy === 1) ? t('summary_restrict_site_active') : t('summary_restrict_site')}
+								{this.getRestrictText()}
 							</span>
 						</span>
 						<Tooltip header={(sitePolicy === 1) ? t('summary_undo') : t('tooltip_restrict')} position={(isStacked) ? 'right' : 'top'} />

app/panel/components/BuildingBlocks/NotScanned.jsx

@@ -0,0 +1,48 @@
+/**
+ * Not Scanned Component
+ *
+ * Ghostery Browser Extension
+ * https://www.ghostery.com/
+ *
+ * Copyright 2018 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
+ */
+
+import React, { Component } from 'react';
+import ClassNames from 'classnames';
+
+/**
+ * @class Implements the Not Scanned component displayed in the Summary view
+ * when a site is not scannable or has not yet been scanned.
+ * @memberof PanelClasses
+ */
+class NotScanned extends React.Component {
+	/**
+	 * React's required render function. Returns JSX
+	 * @return {JSX} JSX for rendering the Not Scanned text on the Summary View
+	 */
+	render() {
+		const notScannedClassNames = ClassNames('sub-component', 'not-scanned', {
+			small: this.props.isSmall,
+		});
+
+		return (
+			<div className={notScannedClassNames}>
+				<div className="not-scanned-header">
+					{t('summary_page_not_scanned') }
+				</div>
+				<div className="not-scanned-text">
+					{ t('summary_description_not_scanned_1') }
+				</div>
+				<div className="not-scanned-text">
+					{ t('summary_description_not_scanned_2') }
+				</div>
+			</div>
+		);
+	}
+}
+
+export default NotScanned;