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 1 commit
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
Clear filters
Jump to
Jump to file
Failed to load files.

Always

Just for now

Prev Next
Loading status checks…

Fix for GH-872

  • Loading branch information
Serge Zarembsky
Serge Zarembsky committed Mar 13, 2018
commit eb3baeabe5ad38cc375e4f2b6bd7925ae3df438b
56 app/panel/components/Summary.jsx
View file
Open in desktop
@@ -392,54 +392,55 @@ 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`}
/>
<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`}
/>
<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`} >
</button>
</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'}
/>
<div className="columns medium-4 gx-tooltip">
<Tooltip
header={t('tooltip_ad_block')}
body={showBody && t('tooltip_ad_block_body')}
position={showBody ? 'top' : 'right'}
/>
<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`}>
</button>
</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`}
/>
<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`}
/>
<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`}>
</button>
</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"
@@ -449,7 +450,6 @@ class Summary extends React.Component {
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>
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.