Skip to content

/ ghostery-extension

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Android browser ui #96

Closed
wants to merge 5 commits into from
+3,357 −17
Closed

Android browser ui #96

Changes from 1 commit
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
7775d62
Update CHANGELOG, package.json and manifest.json
mai-cliqz Jun 11, 2018
bf44b79
Control Center for Android
mai-cliqz Jun 11, 2018
1f8a465
Tweak UI for site and global trackers
mai-cliqz Jun 6, 2018
8facf28
Display real data for antitracking, adblock and smartblock
mai-cliqz Jun 7, 2018
796a10c
Fix all linter errors
mai-cliqz Jun 11, 2018
File filter
Filter file types
Clear filters
Jump to
Jump to file
Failed to load files.

Always

Just for now

Prev Next
Tweak UI for site and global trackers
  • Loading branch information
@mai-cliqz
mai-cliqz committed Jun 11, 2018
commit 1f8a4651667aa66b3557b57c712678774e8391b4
80 app/images/panel-android/categories/adv.svg
View file
Open in desktop

Large diffs are not rendered by default.

14 app/images/panel-android/down.svg
View file
Open in desktop
@@ -1,10 +1,12 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="40px" height="40px" viewBox="0 0 40 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="12px" height="7px" viewBox="0 0 12 7" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
<title>Down</title>
<title>Shape</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Down" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<polygon id="Shape" fill="#C8C7C2" transform="translate(20.000000, 20.500000) scale(-1, 1) rotate(360.000000) translate(-20.000000, -20.500000) " points="24.6 17 20 21.3513514 15.4 17 14 18.3243243 20 24 26 18.3243243"></polygon>
<g id="Android_Ghostery" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Cliqz:-Home" transform="translate(-344.000000, -961.000000)" fill="#C8C7C2">
<polygon id="Shape" transform="translate(350.000000, 964.500000) scale(-1, 1) rotate(360.000000) translate(-350.000000, -964.500000) " points="354.6 961 350 965.351351 345.4 961 344 962.324324 350 968 356 962.324324"></polygon>
</g>
</g>
</svg>
</svg>
20 app/images/panel-android/icon-information-blue.svg
View file
Open in desktop
@@ -0,0 +1,20 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
<title>information-outline</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Android_Ghostery" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Cliqz:-Home" transform="translate(-30.000000, -450.000000)" fill="#00AEF0" fill-rule="nonzero">
<g id="Group-8" transform="translate(0.000000, 336.000000)">
<g id="Group-7">
<g id="Group-17" transform="translate(30.000000, 106.000000)">
<g id="information-outline" transform="translate(0.000000, 8.000000)">
<path d="M8.73529431,6.79411779 L10.6764708,6.79411779 L10.6764708,4.85294128 L8.73529431,4.85294128 L8.73529431,6.79411779 Z M9.70588256,17.4705886 C5.42558835,17.4705886 1.94117651,13.9861768 1.94117651,9.70588256 C1.94117651,5.42558835 5.42558835,1.94117651 9.70588256,1.94117651 C13.9861768,1.94117651 17.4705886,5.42558835 17.4705886,9.70588256 C17.4705886,13.9861768 13.9861768,17.4705886 9.70588256,17.4705886 Z M9.70588256,-1.3061438e-17 C4.34547164,-2.1682003e-15 -1.3061438e-17,4.34547164 -4.4408921e-16,9.70588256 C-1.73717253e-15,12.2800427 1.02258112,14.7487719 2.84278719,16.5689779 C4.66299325,18.389184 7.13172246,19.4117651 9.70588256,19.4117651 C12.2800427,19.4117651 14.7487719,18.389184 16.5689779,16.5689779 C18.389184,14.7487719 19.4117651,12.2800427 19.4117651,9.70588256 C19.4117651,7.13172246 18.389184,4.66299325 16.5689779,2.84278719 C14.7487719,1.02258112 12.2800427,-2.28575324e-16 9.70588256,-4.4408921e-16 Z M8.73529431,14.5588238 L10.6764708,14.5588238 L10.6764708,8.73529431 L8.73529431,8.73529431 L8.73529431,14.5588238 Z" id="Shape"></path>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
20 app/images/panel-android/icon-information-grey.svg
View file
Open in desktop
@@ -0,0 +1,20 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
<title>information-outline</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Android_Ghostery" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Cliqz:-Home" transform="translate(-30.000000, -450.000000)" fill="#9B9B9B" fill-rule="nonzero">
<g id="Group-8" transform="translate(0.000000, 336.000000)">
<g id="Group-7">
<g id="Group-17" transform="translate(30.000000, 106.000000)">
<g id="information-outline" transform="translate(0.000000, 8.000000)">
<path d="M8.73529431,6.79411779 L10.6764708,6.79411779 L10.6764708,4.85294128 L8.73529431,4.85294128 L8.73529431,6.79411779 Z M9.70588256,17.4705886 C5.42558835,17.4705886 1.94117651,13.9861768 1.94117651,9.70588256 C1.94117651,5.42558835 5.42558835,1.94117651 9.70588256,1.94117651 C13.9861768,1.94117651 17.4705886,5.42558835 17.4705886,9.70588256 C17.4705886,13.9861768 13.9861768,17.4705886 9.70588256,17.4705886 Z M9.70588256,-1.3061438e-17 C4.34547164,-2.1682003e-15 -1.3061438e-17,4.34547164 -4.4408921e-16,9.70588256 C-1.73717253e-15,12.2800427 1.02258112,14.7487719 2.84278719,16.5689779 C4.66299325,18.389184 7.13172246,19.4117651 9.70588256,19.4117651 C12.2800427,19.4117651 14.7487719,18.389184 16.5689779,16.5689779 C18.389184,14.7487719 19.4117651,12.2800427 19.4117651,9.70588256 C19.4117651,7.13172246 18.389184,4.66299325 16.5689779,2.84278719 C14.7487719,1.02258112 12.2800427,-2.28575324e-16 9.70588256,-4.4408921e-16 Z M8.73529431,14.5588238 L10.6764708,14.5588238 L10.6764708,8.73529431 L8.73529431,8.73529431 L8.73529431,14.5588238 Z" id="Shape"></path>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
6 app/images/panel-android/icon-information-tooltip.svg
View file
Open in desktop

This file was deleted.

19 app/images/panel-android/kebab-menu-black.svg
View file
Open in desktop
@@ -1,5 +1,16 @@
<svg width="4" height="16" viewBox="0 0 4 16" xmlns="http://www.w3.org/2000/svg">
<g fill="#000" fill-rule="evenodd">
<path d="M0 0h4v4H0zM0 6h4v4H0zM0 12h4v4H0z"/>
</g>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="4px" height="17px" viewBox="0 0 4 17" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
<title>Group 2</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Android_Ghostery" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Cliqz:-Home" transform="translate(-369.000000, -157.000000)" fill="#000000">
<g id="Group-2" transform="translate(369.000000, 157.000000)">
<ellipse id="Oval-3" cx="2" cy="2.125" rx="2" ry="2.125"></ellipse>
<ellipse id="Oval-3-Copy" cx="2" cy="8.5" rx="2" ry="2.125"></ellipse>
<ellipse id="Oval-3-Copy-2" cx="2" cy="14.875" rx="2" ry="2.125"></ellipse>
</g>
</g>
</g>
</svg>
29 app/images/panel-android/pause.svg
View file
Open in desktop
@@ -0,0 +1,29 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="9px" height="12px" viewBox="0 0 9 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
<title>Group 11</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Android_Ghostery" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Cliqz:-Home" transform="translate(-134.000000, -560.000000)" fill="#4A4A4A">
<g id="Group-9" transform="translate(88.000000, 435.000000)">
<g id="Group-7" transform="translate(0.000000, 113.000000)">
<g id="Group-23">
<g id="Group-4">
<g id="Group-12" transform="translate(46.000000, 8.000000)">
<g id="Group-30">
<g id="Group-13">
<g id="Group-11" transform="translate(0.000000, 4.000000)">
<rect id="Rectangle-10" x="6" y="0" width="3" height="12" rx="1"></rect>
<rect id="Rectangle-10" x="0" y="0" width="3" height="12" rx="1"></rect>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
26 app/images/panel-android/play.svg
View file
Open in desktop
@@ -0,0 +1,26 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="11px" height="14px" viewBox="0 0 11 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
<title>Triangle 2</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Android_Ghostery" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Cliqz:-Home" transform="translate(-134.000000, -559.000000)" fill="#fff">
<g id="Group-9" transform="translate(88.000000, 435.000000)">
<g id="Group-7" transform="translate(0.000000, 113.000000)">
<g id="Group-23">
<g id="Group-4">
<g id="Group-12" transform="translate(46.000000, 8.000000)">
<g id="Group-30">
<g id="Group-13">
<path d="M6.8637789,5.48076383 L12.1227419,14.496129 C12.4010222,14.9731809 12.2398859,15.5854986 11.762834,15.8637789 C11.609898,15.9529916 11.4360176,16 11.258963,16 L0.741036999,16 C0.188752249,16 -0.258963001,15.5522847 -0.258963001,15 C-0.258963001,14.8229454 -0.211954603,14.649065 -0.122741902,14.496129 L5.1362211,5.48076383 C5.41450138,5.00371192 6.02681911,4.84257567 6.50387103,5.12085595 C6.65287466,5.20777474 6.77686011,5.3317602 6.8637789,5.48076383 Z" id="Triangle-2" transform="translate(6.000000, 10.000000) rotate(90.000000) translate(-6.000000, -10.000000) "></path>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
14 app/images/panel-android/up.svg
View file
Open in desktop
@@ -1,10 +1,12 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="40px" height="40px" viewBox="0 0 40 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="12px" height="7px" viewBox="0 0 12 7" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
<title>Up</title>
<title>Shape</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Up" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<polygon id="Shape" fill="#C8C7C2" transform="translate(20.000000, 20.500000) scale(-1, -1) rotate(360.000000) translate(-20.000000, -20.500000) " points="24.6 17 20 21.3513514 15.4 17 14 18.3243243 20 24 26 18.3243243"></polygon>
<g id="Android_Ghostery" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Cliqz:-Home" transform="translate(-349.000000, -288.000000)" fill="#C8C7C2">
<polygon id="Shape" transform="translate(355.000000, 291.500000) scale(1, -1) rotate(360.000000) translate(-355.000000, -291.500000) " points="359.6 288 355 292.351351 350.4 288 349 289.324324 355 295 361 289.324324"></polygon>
</g>
</g>
</svg>
</svg>
3 app/panel-android/actions/trackerActions.js
View file
Open in desktop
@@ -199,6 +199,7 @@ export function blockUnBlockAllTrackers({ actionData, state }) {
updated_blocking_categories.forEach((category) => {
const updated_settings_category = updated_settings_categories.find(item => item.id === category.id);
category.num_blocked = 0;
// TODO: change the logic here
category.trackers.forEach((tracker) => {
if (tracker.shouldShow) {
tracker.blocked = block;
@@ -220,7 +221,7 @@ export function blockUnBlockAllTrackers({ actionData, state }) {
delete updated_app_ids[key];
}

// NOTE: This may affect performance
// NOTE: This may affect performance
const updated_settings_tracker = updated_settings_category.trackers.find(item => +item.id === key);
const oldState = updated_settings_tracker.blocked;
updated_settings_tracker.blocked = block;
6 app/panel-android/components/Overview.jsx
View file
Open in desktop
@@ -70,18 +70,18 @@ export default class Overview extends React.Component {
<p className="trackers-blocked-num"><span className="number">{this.nTrackersBlocked}</span> Trackers blocked</p>
</div>

<div className="buttons-wrapper row">
<div className={`buttons-wrapper row`}>
<div className="small-12">
<button
className={`button trust-site-btn ${this.isTrusted ? 'changed' : ''}`}
className={`button trust-site-btn ${this.isTrusted ? 'changed' : ''} ${this.isPaused ? 'paused' : ''}`}
onClick={this.handleTrustButtonClick}
>
<span>Trust Site</span>
</button>
</div>
<div className="small-12">
<button
className={`button restrict-site-btn ${this.isRestricted ? 'changed' : ''}`}
className={`button restrict-site-btn ${this.isRestricted ? 'changed' : ''} ${this.isPaused ? 'paused' : ''}`}
onClick={this.handleRestrictButtonClick}
>
<span>Restrict Site</span>
2 app/panel-android/components/content/Accordions.jsx
View file
Open in desktop
@@ -6,7 +6,7 @@ import TrackerItem from './TrackerItem';
class Accordion extends React.Component {
itemHeight = 50;
nExtraItems = 40;
headerheight = 39;
headerheight = 32;

constructor(props) {
super(props);
23 app/scss/android/_overview.scss
View file
Open in desktop
@@ -18,21 +18,22 @@
color: $tundora;
}

&.changed {
& > span {
color: $white;
}
}
// &.changed {
// & > span {
// color: $white;
// }
// }

&.trust-site-btn {

& > span {
background-image: buildIconTrust($button-dark-grey);
}

&.changed {
&.changed:not(.paused) {
background-color: #9ecc42;
border-color: #9ecc42;
color: $white;

& > span {
background-image: buildIconTrust($button-white);
@@ -46,9 +47,10 @@
background-image: buildIconRestrict($button-dark-grey);
}

&.changed {
&.changed:not(.paused) {
background-color: #e74055;
border-color: #e74055;
color: $white;

& > span {
background-image: buildIconRestrict($button-white);
@@ -59,7 +61,8 @@
&.pause-resume-btn {

& > span {
background-image: buildIconPause($button-dark-grey);
// background-image: buildIconPause($button-dark-grey);
background-image: url(../../app/images/panel-android/pause.svg);

&:last-child {
display: none;
@@ -71,14 +74,16 @@
border-color: $ghosty-blue;

& > span {
background-image: buildIconResume($button-dark-grey);
// background-image: buildIconResume($button-dark-grey);
background-image: url(../../app/images/panel-android/play.svg);

&:first-child {
display: none;
}

&:last-child {
display: inline-block;
color: $white;
}
}
}
ProTip! Use n and p to navigate between commits in a pull request.