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

Remove count from Cliqz Features, replace with ON/OFF indicator #393

Merged
merged 2 commits into from Jun 10, 2019
+13 −62
Merged

Remove count from Cliqz Features, replace with ON/OFF indicator #393

Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a01917d
Remove count from Cliqz Features, replace with ON/OFF indicator
IAmThePan Jun 10, 2019
c727784
Stop passing now unneeded data prop to CliqzFeature
wlycdgr Jun 10, 2019
File filter
Filter file types
Jump to
Jump to file
Failed to load files.

Always

Just for now

Next
Loading status checks…

Remove count from Cliqz Features, replace with ON/OFF indicator

  • Loading branch information
@IAmThePan
IAmThePan committed Jun 10, 2019
commit a01917d18443485587b33817e221406c323922bc
25 app/panel/components/BuildingBlocks/CliqzFeature.jsx
View file
Open in desktop
@@ -50,28 +50,9 @@ class CliqzFeature extends React.Component {
});
}

_getCount(active, data, type) {
This conversation was marked as resolved by wlycdgr

This comment has been minimized.

Sign in to view
@wlycdgr

wlycdgr Jun 10, 2019 •
edited
Member

The data prop wasn't being used anywhere else in CliqzFeature besides _getCount, so now that _getCount is gone we should not pass it down from Summary anymore

This comment has been minimized.

Sign in to view
@wlycdgr

wlycdgr Jun 10, 2019
Member

....removed
if (!active) {
return '-';
}

if (type === 'anti_track') {
return data && data.totalUnsafeCount || 0;
} else if (type === 'ad_block') {
return data && data.totalCount || 0;
} else if (type === 'smart_block') {
return this._count(data, data.blocked) + this._count(data, data.unblocked);
}

return 0;
_getStatus(active) {
return active ? t('drawer_on') : t('drawer_off');
}
_count(object, property) {
return object && this._length(property) || 0;
}
_length(object) {
return Object.keys(object).length;
}


_getTooltipBodyText(active, isTooltipBody, type) {
if (!isTooltipBody) return false;
@@ -125,7 +106,7 @@ class CliqzFeature extends React.Component {

return (
<div className={cliqzFeatureClassNames} onClick={this.clickCliqzFeature}>
<div className="CliqzFeature__count">{this._getCount(active, data, type)}</div>
<div className="CliqzFeature__status">{this._getStatus(active)}</div>
<div className={iconClassNames}>
<Tooltip
header={this._getTooltipHeaderText(isTooltipHeader, type)}
38 app/scss/partials/_cliqz_feature.scss
View file
Open in desktop
@@ -19,10 +19,11 @@ $cliqz-feature--light-gray: #dedede;
$cliqz-feature--darker-gray: #a4a4a4;

// Default styling for the elements of the CliqzFeature BEM block
.CliqzFeature__count {
.CliqzFeature__status {
text-align: center;
font-size: 14px;
font-weight: 600;
text-transform: uppercase;
transition: color 0.25s ease-out;
transition: background-image 0.25s ease-out;
}
@@ -50,7 +51,7 @@ $cliqz-feature--darker-gray: #a4a4a4;
// The CliqzFeature block is always one of normal, smaller, or condensed
.CliqzFeature--normal,
.CliqzFeature--smaller {
.CliqzFeature__count { line-height: 28px; }
.CliqzFeature__status { line-height: 28px; }
.CliqzFeature__icon {
height: 50px;
width: 50px;
@@ -63,7 +64,7 @@ $cliqz-feature--darker-gray: #a4a4a4;
}

.CliqzFeature--condensed {
.CliqzFeature__count { line-height: 14px; }
.CliqzFeature__status { line-height: 14px; }
.CliqzFeature__icon {
height: 40px;
width: 40px;
@@ -76,7 +77,7 @@ $cliqz-feature--darker-gray: #a4a4a4;
// The CliqzFeature block is always either active or inactive
// and always either clickable or not-clickable
.CliqzFeature--active.clickable {
.CliqzFeature__count {
.CliqzFeature__status {
color: $cliqz-feature--blue;
background: none;
}
@@ -86,7 +87,7 @@ $cliqz-feature--darker-gray: #a4a4a4;
.CliqzFeature__feature-name { color: $cliqz-feature--blue; }

&:hover {
.CliqzFeature__count { color: $cliqz-feature--darker-blue; }
.CliqzFeature__status { color: $cliqz-feature--darker-blue; }
.CliqzFeature__icon--anti-track { background-image: buildIconAntiTracking($cliqz-feature--darker-blue); }
.CliqzFeature__icon--ad-block { background-image: buildIconAdBlocking($cliqz-feature--darker-blue); }
.CliqzFeature__icon--smart-block { background-image: buildIconSmartBlocking($cliqz-feature--darker-blue); }
@@ -95,37 +96,23 @@ $cliqz-feature--darker-gray: #a4a4a4;
}

.CliqzFeature--active.not-clickable {
.CliqzFeature__count {
color: $cliqz-feature--pale-blue;
background: none;
}
.CliqzFeature__status { color: $cliqz-feature--pale-blue; }
.CliqzFeature__icon--anti-track { background-image: buildIconAntiTracking($cliqz-feature--pale-blue); }
.CliqzFeature__icon--ad-block { background-image: buildIconAdBlocking($cliqz-feature--pale-blue); }
.CliqzFeature__icon--smart-block { background-image: buildIconSmartBlocking($cliqz-feature--pale-blue); }
.CliqzFeature__feature-name { color: $cliqz-feature--pale-blue; }

}

.CliqzFeature--inactive {
.CliqzFeature__count {
background-repeat: no-repeat;
background-position: center center;
background-size: 10px 10px;
}
}

.CliqzFeature--inactive.clickable {
.CliqzFeature__count {
color: rgba($cliqz-feature--gray, 0);
background-image: buildIconDash($cliqz-feature--gray);
}
.CliqzFeature__status { color: $cliqz-feature--gray; }
.CliqzFeature__icon--anti-track { background-image: buildIconAntiTracking($cliqz-feature--gray); }
.CliqzFeature__icon--ad-block { background-image: buildIconAdBlocking($cliqz-feature--gray); }
.CliqzFeature__icon--smart-block { background-image: buildIconSmartBlocking($cliqz-feature--gray); }
.CliqzFeature__feature-name { color: $cliqz-feature--gray; }

&:hover {
.CliqzFeature__count { background-image: buildIconDash($cliqz-feature--darker-gray); }
.CliqzFeature__status { color: $cliqz-feature--darker-gray; }
.CliqzFeature__icon--anti-track { background-image: buildIconAntiTracking($cliqz-feature--darker-gray); }
.CliqzFeature__icon--ad-block { background-image: buildIconAdBlocking($cliqz-feature--darker-gray); }
.CliqzFeature__icon--smart-block { background-image: buildIconSmartBlocking($cliqz-feature--darker-gray); }
@@ -134,14 +121,9 @@ $cliqz-feature--darker-gray: #a4a4a4;
}

.CliqzFeature--inactive.not-clickable {
.CliqzFeature__count {
color: rgba($cliqz-feature--light-gray, 0);
background-image: buildIconDash($cliqz-feature--light-gray);
}

.CliqzFeature__status { color: $cliqz-feature--light-gray; }
.CliqzFeature__icon--anti-track { background-image: buildIconAntiTracking($cliqz-feature--light-gray); }
.CliqzFeature__icon--ad-block { background-image: buildIconAdBlocking($cliqz-feature--light-gray); }
.CliqzFeature__icon--smart-block { background-image: buildIconSmartBlocking($cliqz-feature--light-gray); }
.CliqzFeature__feature-name { color: $cliqz-feature--light-gray; }
}

5 app/scss/partials/_svgs.scss
View file
Open in desktop
@@ -32,11 +32,6 @@
@return url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2250%22%20height%3D%2250%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Ccircle%20stroke%3D%22#{url-friendly-colour($stroke-color)}%22%20stroke-width%3D%222%22%20fill%3D%22none%22%20cx%3D%2225%22%20cy%3D%2225%22%20r%3D%2223%22/%3E%3Cpath%20fill%3D%22#{url-friendly-colour($stroke-color)}%22%20d%3D%22M31.977%2020.24c-.097%201.677-.697%203.156-1.654%204.514-.43.61-.867%201.217-1.285%201.84-.597.887-1.074%201.832-1.258%202.898-.03.175-.141.162-.263.162l-2.525-.001c-.832%200-1.663-.005-2.497.003-.181.002-.246-.05-.283-.238-.197-1.031-.657-1.954-1.241-2.818-.497-.733-1.015-1.454-1.514-2.187A8.257%208.257%200%200%201%2018.011%2020c-.112-2.82%201.486-5.279%204.185-6.42%203.458-1.462%207.547.004%209.166%203.293.521%201.062.682%202.19.615%203.365zM22.352%2032.3v-.63h5.305v.63h-5.305zm4.76%202.681h-4.216c-.508%200-.602-.108-.536-.653h5.28c.075.537-.022.653-.529.653zm6.238-18.576c-1.449-3.169-3.966-4.928-7.385-5.335-2.913-.348-5.446.61-7.511%202.673-2.305%202.306-2.858%205.124-2.19%208.241.351%201.63%201.149%203.046%202.104%204.39.438.617.869%201.243%201.271%201.883.372.593.635%201.241.661%201.946.03.814.008%201.627.008%202.441h.032c0%20.676-.001%201.351.002%202.027.006%201.204.952%202.22%202.15%202.3.158.01.21.056.25.214a2.322%202.322%200%200%200%204.524-.007c.034-.14.072-.194.225-.206a2.329%202.329%200%200%200%202.174-2.337c0-1.257.01-2.515-.003-3.774-.011-.941.208-1.816.706-2.61.402-.64.832-1.268%201.274-1.88%201.263-1.757%202.155-3.653%202.323-5.844.109-1.423-.018-2.816-.615-4.122z%22/%3E%3Cpath%20stroke%3D%22#{url-friendly-colour($stroke-color)}%22%20stroke-width%3D%221.5%22%20fill%3D%22none%22%20d%3D%22M25.096%2018.214a.324.324%200%200%200-.192%200l-4.117%201.092a.37.37%200%200%200-.287.364c.02%202.932%201.59%205.652%204.29%207.472a.387.387%200%200%200%20.21.058c.077%200%20.153-.02.21-.058%202.7-1.82%204.27-4.54%204.29-7.472a.37.37%200%200%200-.287-.364l-4.117-1.092z%22/%3E%3C/svg%3E');
}

// Used in Cliqz Features
@function buildIconDash($stroke-color) {
@return url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2210%22%20height%3D%2210%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20stroke%3D%22#{url-friendly-colour($stroke-color)}%22%20stroke-width%3D%223%22%20d%3D%22M1%205h8%22/%3E%3C/svg%3E');
}

// Used in Ghostery Features
@function buildIconTrust($stroke-color) {
@return url('data:image/svg+xml;charset%3DUS-ASCII,%3Csvg%20width%3D%2214%22%20height%3D%2214%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22>%3Ccircle%20cx%3D%227%22%20cy%3D%227%22%20r%3D%226%22%20stroke-width%3D%222%22%20stroke%3D%22#{url-friendly-colour($stroke-color)}%22%20fill%3D%22none%22/%3E%3C/svg%3E');
ProTip! Use n and p to navigate between commits in a pull request.