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

rewards prompt styles #59

Merged
merged 8 commits into from May 14, 2018
+42 −6
Merged

rewards prompt styles #59

Changes from 1 commit
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
f133eb1
translations
trickpattyFH20 May 10, 2018
80e7a08
rewards overlay
trickpattyFH20 May 10, 2018
e6bedba
Merge branch 'develop' of github.com:ghostery/ghostery-extension into…
trickpattyFH20 May 11, 2018
4367a10
Merge branch 'develop' of github.com:ghostery/ghostery-extension into…
trickpattyFH20 May 11, 2018
249e6f8
prompt button styles
trickpattyFH20 May 11, 2018
2ad3b1d
lint clean
trickpattyFH20 May 11, 2018
6004af5
change signal id
trickpattyFH20 May 14, 2018
4cbe4d3
Merge remote-tracking branch 'upstream/develop' into develop
trickpattyFH20 May 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…
rewards overlay
  • Loading branch information
@trickpattyFH20
trickpattyFH20 committed May 10, 2018
commit 80e7a083aac2c6bb3762a94803fda7e086bf4e29
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.