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

translations #54

Merged
merged 2 commits into from May 11, 2018
+6,122 −6,265
Merged

translations #54

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f133eb1
translations
trickpattyFH20 May 10, 2018
80e7a08
rewards overlay
trickpattyFH20 May 10, 2018
File filter
Filter file types
Jump to
Jump to file
Failed to load files.

Always

Just for now

6 _locales/en/messages.json
View file
Open in desktop
@@ -1672,6 +1672,12 @@
"rewards_second_prompt": {
"message": "Are you sure you would like to opt-out of Ghostery Rewards?"
},
"rewards_yes": {
"message": "yes"
},
"rewards_no": {
"message": "no"
},
"rewards_on": {
"message": "on"
},
54 app/content-scripts/rewards/Notification.jsx
View file
Open in desktop
@@ -41,25 +41,43 @@ class Notification extends Component {
return (
<div>
{!this.state.closed &&
<div className="rewards-notification-container rewards-popup-container">
<div className={`rewards-notification ${this.props.data.type}`}>
<div className="close" onClick={() => { this.closeNotification(); }} style={{ backgroundImage: this.closeIcon }} />
<div className="notification-text">
{this.props.data.message}
</div>
{this.props.data.buttons &&
<div className="notification-buttons">
<div onClick={(e) => { this.closeNotification(true); }}>
Yes
</div>
<div onClick={(e) => { this.closeNotification(false); }}>
No
</div>
<div className="rewards-notification-container">
<div className="rewards-notification-overlay" />
<div className="rewards-popup-container">
<div className={`rewards-notification ${this.props.data.type}`}>
<div className="close" onClick={() => { this.closeNotification(); }} style={{ backgroundImage: this.closeIcon }} />
<div className="notification-text">
{this.props.data.message}
</div>
}
{this.props.data.textLink
&& <a className="notification-text" href={this.props.data.textLink.href} target="_blank" onClick={this.props.data.textLink.callback || this.props.data.closeCallback}>{this.props.data.textLink.text}</a>
}
{this.props.data.buttons &&
<div className="notification-buttons">
<button onClick={(e) => { this.closeNotification(true); }}>
{t('rewards_yes')}
</button>
<button onClick={(e) => { this.closeNotification(false); }}>
{t('rewards_no')}
</button>
</div>
}
{this.props.data.textLink
&& (
<a
className="notification-text"
href={this.props.data.textLink.href}
target="_blank"
onClick={() => {
if (this.props.data.textLink.callback) {
// this.props.data.textLink.callback();
} else {
// this.props.data.closeCallback();
}
}}
>
{this.props.data.textLink.text}
</a>
)
}
</div>
</div>
</div>
}
170 app/content-scripts/rewards/OfferCard.jsx
View file
Open in desktop
@@ -68,7 +68,7 @@ class OfferCard extends Component {
textLink: {
href: 'https://www.ghostery.com/faqs',
text: t('rewards_learn_more'),
callback: this.sendSignal('offer_first_learn')
callback: () => this.sendSignal('offer_first_learn')
},
closeCallback: (option) => { this.handlePrompt(1, option); },
},
@@ -111,6 +111,7 @@ class OfferCard extends Component {
}

sendSignal(actionId, props = this.props) {
console.log('send signal ', actionId);
// Cliqz metrics
const offerId = props.reward.offer_id;
const message = {
@@ -221,93 +222,96 @@ class OfferCard extends Component {
// @TODO condition for hide class
<div ref={(ref) => { this.offerCardRef = ref; }} className="ghostery-rewards-component">
{ this.state.closed !== true &&
<div className="ghostery-reward-card">
{ this.state.showPrompt === 1 &&
this.renderNotification(0)
}
{ this.state.showPrompt === 2 &&
this.renderNotification(1)
}
{ this.state.showPrompt === 3 &&
this.renderNotification(2)
}
<div className="reward-card-header">
<div className="rewards-logo-beta" style={{ backgroundImage: this.betaLogo }} />
<div
className="reward-card-close"
onClick={(e) => { this.sendSignal('offer_closed_card'); this.closeOfferCard(); }}
style={{ backgroundImage: this.closeIcon }}
/>
</div>
<div className="reward-content">
<div className="reward-content-header">
<div className="flex-grow" />
<div className="reward-company-logo">
<img src={this.state.rewardUI.logo_url} className="hide" onLoad={this.handleImageLoaded} />
</div>
<div
onClick={this.toggleSettings}
className="reward-settings-kebab"
style={{ backgroundImage: this.kebabIcon }}
ref={(node) => { this.kebabRef = node; }}
/>
{ this.state.showSettings &&
<div className="rewards-settings-container">
<ClickOutside excludeEl={this.kebabRef} onClickOutside={this.toggleSettings}>
<Settings signal={this.sendSignal('about_ghostery_rewards')} disable={this.disableRewardsNotification} />
</ClickOutside>
</div>
}
</div>
<div className="reward-content-img">
<div className="flex-grow" />
<img src={this.state.rewardUI.picture_url} className="hide" onLoad={this.handleImageLoaded} />
<div className="flex-grow" />
</div>
<div className="reward-content-detail">
{/* <div className="flex-grow" /> */}
<div className="reward-benefit">
{ this.state.rewardUI.benefit }
<div>
<div className="ghostery-reward-card">
<div className="reward-card-header">
<div className="rewards-logo-beta" style={{ backgroundImage: this.betaLogo }} />
<div
className="reward-card-close"
onClick={(e) => { this.sendSignal('offer_closed_card'); this.closeOfferCard(); }}
style={{ backgroundImage: this.closeIcon }}
/>
</div>
<span className="reward-headline">
{ this.state.rewardUI.headline }
</span>
<span className="reward-description">
{ this.state.rewardUI.desc }
</span>
</div>
<div className="flex-grow" />
<div className="reward-code">
<div>
{this.state.rewardUI.code}
<input readOnly className="reward-code-input" value={this.state.rewardUI.code} type="text" />
<div className="reward-content">
<div className="reward-content-header">
<div className="flex-grow" />
<div className="reward-company-logo">
<img src={this.state.rewardUI.logo_url} className="hide" onLoad={this.handleImageLoaded} />
</div>
<div
onClick={this.toggleSettings}
className="reward-settings-kebab"
style={{ backgroundImage: this.kebabIcon }}
ref={(node) => { this.kebabRef = node; }}
/>
{ this.state.showSettings &&
<div className="rewards-settings-container">
<ClickOutside excludeEl={this.kebabRef} onClickOutside={this.toggleSettings}>
<Settings signal={this.sendSignal('about_ghostery_rewards')} disable={this.disableRewardsNotification} />
</ClickOutside>
</div>
}
</div>
<div className="reward-content-img">
<div className="flex-grow" />
<img src={this.state.rewardUI.picture_url} className="hide" onLoad={this.handleImageLoaded} />
<div className="flex-grow" />
</div>
<div className="reward-content-detail">
{/* <div className="flex-grow" /> */}
<div className="reward-benefit">
{ this.state.rewardUI.benefit }
</div>
<span className="reward-headline">
{ this.state.rewardUI.headline }
</span>
<span className="reward-description">
{ this.state.rewardUI.desc }
</span>
</div>
<div className="flex-grow" />
<div className="reward-code">
<div>
{this.state.rewardUI.code}
<input readOnly className="reward-code-input" value={this.state.rewardUI.code} type="text" />
</div>
<a onClick={this.copyCode}>{this.state.copyText}</a>
</div>
<div className="reward-content-footer">
<span>
{ this.renderExpiresText() }
</span>
{this.state.rewardUI.conditions &&
<div className="reward-terms g-tooltip">
{ t('rewards_terms_conditions') }
<Tooltip header={this.state.rewardUI.conditions} position="top" delay="0" theme="dark" />
</div>
}
</div>
<a target="_blank" onClick={this.redeem} href={this.state.rewardUI.call_to_action && this.state.rewardUI.call_to_action.url} className="reward-redeem">
{this.state.rewardUI.call_to_action.text}
</a>
</div>
<a onClick={this.copyCode}>{this.state.copyText}</a>
</div>
<div className="reward-content-footer">
<span>
{ this.renderExpiresText() }
</span>
{this.state.rewardUI.conditions &&
<div className="reward-terms g-tooltip">
{ t('rewards_terms_conditions') }
<Tooltip header={this.state.rewardUI.conditions} position="top" delay="0" theme="dark" />
<div className="reward-footer">
<div className="reward-feedback">
<div className="reward-smile" />
<a onClick={this.disableRewardsNotification}>{t('rewards_disable')}</a>
<div className="reward-arrow" />
</div>
}
</div>
<a target="_blank" onClick={this.redeem} href={this.state.rewardUI.call_to_action && this.state.rewardUI.call_to_action.url} className="reward-redeem">
{this.state.rewardUI.call_to_action.text}
</a>
</div>
<div className="reward-footer">
<div className="reward-feedback">
<div className="reward-smile" />
<a onClick={this.disableRewardsNotification}>{t('rewards_disable')}</a>
<div className="reward-arrow" />
<div className="reward-ghosty" style={{ backgroundImage: this.ghostyGrey }} />
</div>
</div>
<div className="reward-ghosty" style={{ backgroundImage: this.ghostyGrey }} />
{ this.state.showPrompt === 1 &&
this.renderNotification(0)
}
{ this.state.showPrompt === 2 &&
this.renderNotification(1)
}
{ this.state.showPrompt === 3 &&
this.renderNotification(2)
}
</div>
</div>}
}
</div>
);
}
17 app/scss/rewards.scss
View file
Open in desktop
@@ -388,6 +388,11 @@
}

.rewards-notification-container {
position: absolute;
top: 0;
width: 100%;
height: 100%;

.rewards-notification {
margin-top: 17px;
margin-left: auto;
@@ -442,6 +447,18 @@
}
}

.rewards-notification-overlay {
height: 100%;
width: 100%;
background-color: #eee;
position: absolute;
opacity: .6;
}

.btn {

}

}

#ghostery-rewards-app.iframe-child {
ProTip! Use n and p to navigate between commits in a pull request.