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

Fixes for UI bugs in Ghostery panel related to longer strings in German language (GH-869, GH-870, GH-872) #5

Merged
merged 5 commits into from Mar 15, 2018
+146 −87
Merged

Fixes for UI bugs in Ghostery panel related to longer strings in German language (GH-869, GH-870, GH-872) #5

Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
8318f2c
Fixes for GH-869, GH-870.
Mar 12, 2018
c3fb116
Merge remote-tracking branch 'upstream/develop' into develop
Mar 12, 2018
eb3baea
Fix for GH-872
Mar 13, 2018
9680394
Fixing lint errors.
Mar 13, 2018
2de44bb
Adding callouts for tooltips.
Mar 14, 2018
File filter
Filter file types
Jump to
Jump to file
Failed to load files.

Always

Just for now

6 _locales/de/messages.json
View file
Open in desktop
@@ -456,10 +456,10 @@
"message": "Navigieren Sie zu einer anderen Seite und ich verspreche, dass ich liefern werde."
},
"summary_trust_site": {
"message": "Website vertrauen"
"message": "Tracker entsperren"
},
"summary_restrict_site": {
"message": "Website nicht vertrauen"
"message": "Tracker blockieren"
},
"summary_undo": {
"message": "Rückgängig machen"
@@ -856,7 +856,7 @@
"message": "Nie"
},
"settings_seconds": {
"message": "Sekunden"
"message": "Sek."
},
"settings_hide_alert_trusted": {
"message": "Lila Box auf vertrauenswürdigen Websites verbergen"
12 _locales/en/messages.json
View file
Open in desktop
@@ -1485,5 +1485,17 @@
},
"setup_upgrade_button_go": {
"message": "Set Me Up"
},
"enable_when_paused": {
"message": "To execute this function, please resume Ghostery."
},
"enable_when_whitelisted": {
"message": "To execute this function, please undo Trust site."
},
"enable_when_blacklisted": {
"message": "To execute this function, please undo Restrict site."
},
"enable_when_not_scanned": {
"message": "To execute this function, please navigate to a site which can be scanned."
}
}
74 app/panel/components/Summary.jsx
View file
Open in desktop
@@ -302,7 +302,8 @@ class Summary extends React.Component {
*/
render() {
const showBody = (!this.props.is_expanded || !this.props.is_expert);

const buttonDisabled = (this.state.disableBlocking || this.props.paused_blocking || this.props.sitePolicy !== false);
const alertText = this.props.paused_blocking ? t('enable_when_paused') : (this.props.sitePolicy === 1) ? t('enable_when_blacklisted') : (this.props.sitePolicy === 2) ? t('enable_when_whitelisted') : this.props.siteNotScanned ? t('enable_when_not_scanned') : '';
const getTooltipClass = () => ((!this.props.is_expert && 'top')
|| ((this.props.is_expert && this.props.is_expanded) && 'right'));

@@ -392,54 +393,61 @@ class Summary extends React.Component {
<div className="columns">
<div id="cliqz-controls">
<div className="row text-center">
<div className="columns medium-4">
<button value="antiTrackBtn" onClick={this.openDrawer} className={`${(this.state.disableBlocking || this.props.paused_blocking || this.props.sitePolicy !== false || IS_CLIQZ ? 'disabled' : '')} ${(this.props.enable_anti_tracking ? 'active' : '')} button controls-trust cliqz-control-btn anti-track-btn g-tooltip`} >
<Tooltip
header={t('tooltip_anti_track')}
body={showBody && t('tooltip_anti_track_body')}
position={`${showBody ? 'top' : 'right'} top-right`}
/>
</button>
<div className="columns medium-4 gx-tooltip">
<Tooltip
header={t('tooltip_anti_track')}
body={showBody && t('tooltip_anti_track_body')}
position={`${showBody ? 'top' : 'right'} top-right`}
showNotification={this.props.actions.showNotification}
disabled={IS_CLIQZ || buttonDisabled}
alertText={alertText}
/>
<button value="antiTrackBtn" onClick={this.openDrawer} className={`${(this.state.disableBlocking || this.props.paused_blocking || this.props.sitePolicy !== false || IS_CLIQZ ? 'disabled' : '')} ${(this.props.enable_anti_tracking ? 'active' : '')} button controls-trust cliqz-control-btn anti-track-btn`} />
</div>
<div className="columns medium-4">
<button value="adBlockBtn" onClick={this.openDrawer} className={`${(this.state.disableBlocking || this.props.paused_blocking || this.props.sitePolicy !== false || IS_CLIQZ ? 'disabled' : '')} ${(this.props.enable_ad_block ? 'active' : '')} button controls-restrict cliqz-control-btn ad-block-btn g-tooltip`}>
<Tooltip
header={t('tooltip_ad_block')}
body={showBody && t('tooltip_ad_block_body')}
position={showBody ? 'top' : 'right'}
/>
</button>
<div className="columns medium-4 gx-tooltip">
<Tooltip
header={t('tooltip_ad_block')}
body={showBody && t('tooltip_ad_block_body')}
position={showBody ? 'top' : 'right'}
showNotification={this.props.actions.showNotification}
disabled={IS_CLIQZ || buttonDisabled}
alertText={alertText}
/>
<button value="adBlockBtn" onClick={this.openDrawer} className={`${(this.state.disableBlocking || this.props.paused_blocking || this.props.sitePolicy !== false || IS_CLIQZ ? 'disabled' : '')} ${(this.props.enable_ad_block ? 'active' : '')} button controls-restrict cliqz-control-btn ad-block-btn`} />
</div>
<div className="columns medium-4">
<button value="smartBlockBtn" onClick={this.openDrawer} className={`${(this.state.disableBlocking || this.props.paused_blocking || this.props.sitePolicy !== false ? 'disabled' : '')} ${(this.props.enable_smart_block ? 'active' : '')} button controls-pause cliqz-control-btn smart-block-btn g-tooltip`}>
<Tooltip
header={t('tooltip_smart_block')}
body={showBody && t('tooltip_smart_block_body')}
position={`${showBody ? 'top' : 'right'} top-left`}
/>
</button>
<div className="columns medium-4 gx-tooltip">
<Tooltip
header={t('tooltip_smart_block')}
body={showBody && t('tooltip_smart_block_body')}
position={`${showBody ? 'top' : 'right'} top-left`}
showNotification={this.props.actions.showNotification}
disabled={buttonDisabled}
alertText={alertText}
/>
<button value="smartBlockBtn" onClick={this.openDrawer} className={`${(this.state.disableBlocking || this.props.paused_blocking || this.props.sitePolicy !== false ? 'disabled' : '')} ${(this.props.enable_smart_block ? 'active' : '')} button controls-pause cliqz-control-btn smart-block-btn`} />
</div>
</div>
</div>
<div id="ghostery-controls">
<div className="row align-center text-center">
<div className="columns shrink">
<button onClick={this.clickSitePolicy} className={`${(this.state.disableBlocking || this.props.paused_blocking ? 'disabled' : '')} ${(this.props.sitePolicy === 2 ? 'active' : '')} button hollow blocking-controls controls-trust g-tooltip`}>
<div className="columns shrink g-tooltip">
<Tooltip header={t('tooltip_trust')} position={showBody ? 'top' : 'right'} />
<button onClick={this.clickSitePolicy} className={`${(this.state.disableBlocking || this.props.paused_blocking ? 'disabled' : '')} ${(this.props.sitePolicy === 2 ? 'active' : '')} button hollow blocking-controls controls-trust`}>
<div className="icon" />
<span className="title">{ t('summary_trust_site') }</span>
<span className="undo">{ t('summary_undo') }</span>
<Tooltip header={t('tooltip_trust')} position={showBody ? 'top' : 'right'} />
</button>
</div>
<div className="columns shrink">
<button onClick={this.clickSitePolicy} className={`${(this.state.disableBlocking || this.props.paused_blocking ? 'disabled' : '')} ${(this.props.sitePolicy === 1 ? 'active' : '')} button hollow blocking-controls controls-restrict g-tooltip`}>
<div className="columns shrink g-tooltip">
<Tooltip header={t('tooltip_restrict')} position={showBody ? 'top' : 'right'} />
<button onClick={this.clickSitePolicy} className={`${(this.state.disableBlocking || this.props.paused_blocking ? 'disabled' : '')} ${(this.props.sitePolicy === 1 ? 'active' : '')} button hollow blocking-controls controls-restrict`}>
<div className="icon" />
<span className="title">{ t('summary_restrict_site') }</span>
<span className="undo">{ t('summary_undo') }</span>
<Tooltip header={t('tooltip_restrict')} position={showBody ? 'top' : 'right'} />
</button>
</div>
<div className="columns shrink g-tooltip">
<Tooltip header={this.props.paused_blocking ? t('tooltip_resume') : t('tooltip_pause')} position={showBody ? 'top' : 'right'} />
<SelectButton
active={this.props.paused_blocking}
iconClass="icon"
@@ -448,9 +456,7 @@ class Summary extends React.Component {
callback={this.clickGhosteryPause}
menuItems={this.pauseOptions}
selectedItemValue={this.props.paused_blocking_timeout / 60000}
>
<Tooltip header={this.props.paused_blocking ? t('tooltip_resume') : t('tooltip_pause')} position={showBody ? 'top' : 'right'} />
</SelectButton>
/>
</div>
</div>
</div>
3 app/panel/components/Tooltip.jsx
View file
Open in desktop
@@ -55,6 +55,9 @@ class Tooltip extends React.Component {
*/
enter = () => {
this.setState({ show: true });
if (this.props.disabled && this.props.showNotification) {
this.props.showNotification({ text: this.props.alertText, classes: 'warning', filter: 'tooltip' });
}
}
/**
* Implement handler for mouseleave event and hide the tooltip.
4 app/panel/reducers/panel.js
View file
Open in desktop
@@ -201,8 +201,10 @@ const _showNotification = (state, action) => {
}

updated_notificationClasses = msg.classes;
if (msg.filter === 'tooltip') {
updated_needsReload.changes = {};
}
}

return {
needsReload: updated_needsReload,
notificationClasses: updated_notificationClasses,
106 app/scss/partials/_select_button.scss
View file
Open in desktop
@@ -13,6 +13,57 @@

$grey: #ccc;
$dark-grey: #4a4a4a;
$menu-height: 102px;

$menuItemDot: url('data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20width%3D%224px%22%20height%3D%224px%22%20viewBox%3D%220%200%204%204%22%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%3E%0A%20%20%20%20%3C%21--%20Generator%3A%20Sketch%2047.1%20%2845422%29%20-%20http%3A//www.bohemiancoding.com/sketch%20--%3E%0A%20%20%20%20%3Ctitle%3EOval%209%3C/title%3E%0A%20%20%20%20%3Cdesc%3ECreated%20with%20Sketch.%3C/desc%3E%0A%20%20%20%20%3Cdefs%3E%3C/defs%3E%0A%20%20%20%20%3Cg%20id%3D%22Page-1%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%0A%20%20%20%20%20%20%20%20%3Cg%20id%3D%22Simple-View-Panel---Trust/Restric/Pause%22%20transform%3D%22translate%28-813.000000%2C%20-2171.000000%29%22%20fill%3D%22%234A4A4A%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Ccircle%20id%3D%22Oval-9%22%20cx%3D%22815%22%20cy%3D%222173%22%20r%3D%222%22%3E%3C/circle%3E%0A%20%20%20%20%20%20%20%20%3C/g%3E%0A%20%20%20%20%3C/g%3E%0A%3C/svg%3E');

%select-menu-base {
overflow-y: auto;
height: $menu-height;
position: absolute;
top: -$menu-height;
left: 0;
right: 0;
border: 1px solid $grey;
width: 100%;
border-bottom: 0px;
box-shadow: inset 2px 2px 2px -2px $grey, inset 2px 2px 2px -2px $grey, inset -2px 2px 2px -1px $grey;
background-color: #fff;
ul {
list-style-type: none;
margin: 0px;
text-align: center;
li {
cursor: pointer;
&.selected {
background-color: #A6A6A6;
.bullet {
background-image: $menuItemDot;
}
}
.item-wrapper {
line-height: 33px;
position: relative;
height: 33px;
display: inline-block;
}
.bullet {
position: absolute;
top: 14px;
left: -12px;
height: 4px;
width: 4px;
background-repeat: no-repeat;
}
&:not(.selected):hover {
background-color: #ebebeb;
.bullet {
background-image: $menuItemDot;
}
}
}
}
}

#panel {
#content-summary {
@@ -45,54 +96,8 @@ $dark-grey: #4a4a4a;
}
}

$menuItemDot: url('data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20width%3D%224px%22%20height%3D%224px%22%20viewBox%3D%220%200%204%204%22%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%3E%0A%20%20%20%20%3C%21--%20Generator%3A%20Sketch%2047.1%20%2845422%29%20-%20http%3A//www.bohemiancoding.com/sketch%20--%3E%0A%20%20%20%20%3Ctitle%3EOval%209%3C/title%3E%0A%20%20%20%20%3Cdesc%3ECreated%20with%20Sketch.%3C/desc%3E%0A%20%20%20%20%3Cdefs%3E%3C/defs%3E%0A%20%20%20%20%3Cg%20id%3D%22Page-1%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%0A%20%20%20%20%20%20%20%20%3Cg%20id%3D%22Simple-View-Panel---Trust/Restric/Pause%22%20transform%3D%22translate%28-813.000000%2C%20-2171.000000%29%22%20fill%3D%22%234A4A4A%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Ccircle%20id%3D%22Oval-9%22%20cx%3D%22815%22%20cy%3D%222173%22%20r%3D%222%22%3E%3C/circle%3E%0A%20%20%20%20%20%20%20%20%3C/g%3E%0A%20%20%20%20%3C/g%3E%0A%3C/svg%3E');

.select-menu {
overflow-y: auto;
height: 100px;
position: absolute;
top: -100px;
left: 0;
right: 0;
border: 1px solid $grey;
width: 100%;
border-bottom: 0px;
box-shadow: inset 2px 2px 2px -2px $grey, inset 2px 2px 2px -2px $grey, inset -2px 2px 2px -1px $grey;
background-color: #fff;
ul {
list-style-type: none;
margin: 0px;
text-align: center;
li {
cursor: pointer;
&.selected {
background-color: #A6A6A6;
.bullet {
background-image: $menuItemDot;
}
}
.item-wrapper {
line-height: 33px;
position: relative;
height: 33px;
display: inline-block;
}
.bullet {
position: absolute;
top: 14px;
left: -12px;
height: 4px;
width: 4px;
background-repeat: no-repeat;
}
&:not(.selected):hover {
background-color: #ebebeb;
.bullet {
background-image: $menuItemDot;
}
}
}
}
@extend %select-menu-base;
}
}
}
@@ -114,6 +119,13 @@ $dark-grey: #4a4a4a;
width: 20px;
}
}
.select-menu {
@extend %select-menu-base;
top: -$menu-height + 1px;
width: 170%;
border-bottom: 1px solid $grey;
z-index: 2;
}
}
}
}
10 app/scss/partials/_summary.scss
View file
Open in desktop
@@ -146,12 +146,20 @@
color: $red;
}
}
.load-info,
.alert-info {
.value {
color: #f5a623;
}
}
.load-info {
.value {
color: #f5a623;
}
padding-right: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.load-info.fast .value {
color: $atlantis;
}
7 app/scss/partials/_summary_expert.scss
View file
Open in desktop
@@ -51,10 +51,15 @@
@extend %pointer;
}
.block-info,
.load-info,
.alert-info {
padding-top: 10px;
}
.load-info {
padding-top: 10px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.tracker-count-alerts {
width: 100%;
text-align: center;
11 app/scss/partials/_tooltip.scss
View file
Open in desktop
@@ -117,3 +117,14 @@
}
}
}

.gx-tooltip {
@extend .g-tooltip;
.tooltip-content.top {
bottom: 100%;
}
.tooltip-content.right {
margin-left: 0 !important;
}
}

ProTip! Use n and p to navigate between commits in a pull request.