Skip to content
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

Supporter panels and partial theme handling #154

Merged
merged 66 commits into from Aug 31, 2018
Merged
Changes from 1 commit
Commits
Show all changes
66 commits
Select commit Hold shift + click to select a range
7e5a5e7
Adding Supporter menu item (GH-1253)
zarembsky Jul 17, 2018
5a9307b
Implementing conditional enabling/disabling of Supporter menu item.
zarembsky Jul 17, 2018
e051b0d
Header badge implemented
zarembsky Jul 18, 2018
fc686bb
Adding Subscription components.
zarembsky Jul 18, 2018
e12966d
Adding react files to support Subscription view in the panel.
zarembsky Jul 18, 2018
4a8bab4
Adding Golden Badge panel.
zarembsky Jul 19, 2018
aa750d0
Moving inline styles for subscriber panel to scss.
zarembsky Jul 19, 2018
f1fb5a4
Merge branch 'develop' into feature/supporter
zarembsky Jul 19, 2018
9e556a8
Merge discrepancies
zarembsky Jul 19, 2018
63878dd
Working on Themes
zarembsky Jul 20, 2018
a5c94f5
Styling
zarembsky Jul 20, 2018
bff0710
Merge branch 'develop' into feature/supporter
zarembsky Jul 20, 2018
c837bdc
Good state #1.
zarembsky Jul 20, 2018
9193671
Adding fields to Subscription info
zarembsky Jul 24, 2018
fba7cb7
Merge branch 'develop' into feature/supporter
zarembsky Jul 24, 2018
3b5b2a4
Continue styling.
zarembsky Jul 25, 2018
8497b93
Adding Subscribe panel.
zarembsky Jul 25, 2018
d793e65
Merge branch 'develop' into feature/supporter
zarembsky Jul 25, 2018
19e867a
Adding support for subscription data in the background.
zarembsky Jul 25, 2018
6f1e508
Merge branch 'develop' into feature/supporter
zarembsky Jul 25, 2018
6cdbead
Connecting background
zarembsky Jul 26, 2018
c3438bc
Implementing supporter connection.
zarembsky Jul 26, 2018
f2632df
Code cleanup
zarembsky Jul 30, 2018
d8c2066
Working on Midnight theme
zarembsky Jul 31, 2018
f4a7be0
Working on Midnight theme.
zarembsky Jul 31, 2018
e280db5
Adding persisting of selected theme.
zarembsky Aug 1, 2018
3b338f8
Persisting selected theme.
zarembsky Aug 1, 2018
bfa6e43
Style adjustments.
zarembsky Aug 6, 2018
77a79d7
Lint and simplification.
zarembsky Aug 7, 2018
5f5bcb1
Merge branch 'develop' into feature/supporter
zarembsky Aug 7, 2018
2c65044
Merge branch 'develop' into feature/supporter
zarembsky Aug 13, 2018
7398858
Adjustments according to changed requirements
zarembsky Aug 13, 2018
c35fe55
Merge branch 'develop' into feature/supporter
zarembsky Aug 13, 2018
38f699e
More or less stable.
zarembsky Aug 14, 2018
eab146a
Multiple fixes.
zarembsky Aug 15, 2018
1e3405c
Adding tracker stats
zarembsky Aug 15, 2018
28b8b02
Fix for a bug.
zarembsky Aug 15, 2018
b8d7602
Commiting lint changes
zarembsky Aug 15, 2018
d4313d6
Removing inlined svg. Replacing supporter to subscriber.
zarembsky Aug 16, 2018
4f3e735
Adding svg files for menu item and badge
zarembsky Aug 16, 2018
93eb1e9
Adding react-svg package.
zarembsky Aug 16, 2018
d4f33a5
Adding manage-subscription.svg
zarembsky Aug 16, 2018
2b37dfd
Adding subscribe-badge.svg
zarembsky Aug 16, 2018
356344c
Merge branch 'develop' into feature/supporter
zarembsky Aug 16, 2018
85c18bf
Merge branch 'develop' into feature/supporter
jsignanini Aug 22, 2018
ec62793
Merge branch 'develop' into feature/supporter
jsignanini Aug 22, 2018
9de5889
Removing context menu from menu item
zarembsky Aug 22, 2018
78aca6f
Improving UI.
zarembsky Aug 22, 2018
e3ab906
Lint fixes.
zarembsky Aug 22, 2018
9807cc8
Merge branch 'develop' into feature/supporter
jsignanini Aug 24, 2018
9c9f99f
Adding $2
zarembsky Aug 24, 2018
b85cf3e
Merge branch 'feature/supporter' of https://github.com/ghostery/ghost…
zarembsky Aug 24, 2018
38f4402
Changing $gold color
zarembsky Aug 24, 2018
eb16f19
Changing highlight color
zarembsky Aug 24, 2018
9cc45be
Requested changes.
zarembsky Aug 27, 2018
ecbd039
Additional requested changes
zarembsky Aug 27, 2018
97d530c
Merge branch 'develop' into feature/supporter
jsignanini Aug 28, 2018
1f1f911
Merge branch 'develop' into feature/supporter
jsignanini Aug 30, 2018
b941ae6
Minor fixes.
jsignanini Aug 30, 2018
98227db
Improve setTheme remove logic.
jsignanini Aug 30, 2018
0405e35
Fixes for theme.
zarembsky Aug 30, 2018
3100863
Implement NavLink to ensure the correct route is marked as active.
jsignanini Aug 31, 2018
8bb7958
Replace Link with NavLink.
jsignanini Aug 31, 2018
a244867
Minor fixes.
jsignanini Aug 31, 2018
c3c8b62
More minor fixes.
jsignanini Aug 31, 2018
e352834
Merge branch 'develop' into feature/supporter
jsignanini Aug 31, 2018
File filter
Filter file types
Jump to
Jump to file
Failed to load files.

Always

Just for now

Improving UI.
  • Loading branch information
zarembsky committed Aug 22, 2018
commit 78aca6f8b772952d00f52b8f1c16e23335913226
@@ -29,18 +29,12 @@ class Header extends React.Component {
this.state = {
dropdownOpen: false,
};

// Event Bindings
this.clickSimpleTab = this.clickSimpleTab.bind(this);
this.clickDetailedTab = this.clickDetailedTab.bind(this);
this.toggleExpert = this.toggleExpert.bind(this);
this.toggleDropdown = this.toggleDropdown.bind(this);
}

/**
* Handles clicking on the Simple View tab
*/
clickSimpleTab() {
clickSimpleTab = () => {
if (this.props.is_expert) {
this.toggleExpert();
}
@@ -49,7 +43,7 @@ class Header extends React.Component {
/**
* Handles clicking on the Detailed View tab
*/
clickDetailedTab() {
clickDetailedTab = () => {
if (!this.props.is_expert) {
this.toggleExpert();
}
@@ -58,7 +52,7 @@ class Header extends React.Component {
/**
* Toggle between Simple and Detailed Views.
*/
toggleExpert() {
toggleExpert = () => {
this.props.actions.toggleExpert();
if (this.props.is_expert) {
this.props.history.push('/');
@@ -70,7 +64,7 @@ class Header extends React.Component {
/**
* Handles toggling the drop-down pane open/closed
*/
toggleDropdown() {
toggleDropdown = () => {
this.setState({ dropdownOpen: !this.state.dropdownOpen });
}

@@ -130,6 +124,16 @@ class Header extends React.Component {
return false;
}

clickLogo = evt => {
this.props.history.push(this.props.is_expert ? '/detail/blocking' : '/');
}

clickBadge = evt => {
if(!this.disableClickIf(evt, 'subscription')) {
this.props.history.push((this.props.loggedIn && isSubscriber(this.props.user)) ? '/subscription/info' : '/subscribe');
}
}

/**
* React's required render function. Returns JSX
* @return {JSX} JSX for rendering the Header Component of the panel
@@ -149,6 +153,7 @@ class Header extends React.Component {
const { loggedIn, user } = this.props;
const subscriber = isSubscriber(user);
const rightLink = this.generateLink();
const badgeClasses = `columns shrink ${(!loggedIn || !subscriber) ? 'non-subscriber-badge' : 'subscriber-badge'}`;

This comment has been minimized.

@jsignanini

jsignanini Aug 27, 2018
Member

@zarembsky let's use the classnames library for these dynamic classes

This comment has been minimized.

@zarembsky

zarembsky Aug 27, 2018
Author Contributor

OK


return (
<header id="ghostery-header">
@@ -167,36 +172,32 @@ class Header extends React.Component {
</div>
)}
<div className="top-bar">
<div>
<Link to={(this.props.is_expert ? '/detail/blocking' : '/')} className={headerLogoClasses} >
<svg width="8px" height="13px" viewBox="0 0 8 13" className="back-arrow">
<g stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
<g id="Priority-Support" transform="translate(-9.000000, -13.000000)" fill="#FFFFFF">
<g id="Group" transform="translate(2.000000, -19.000000)">
<path d="M9.97923761,38.216699 L14.8755284,33.3205611 C14.9585604,33.2375291 15,33.1419581 15,33.0340012 C15,32.9260443 14.9585604,32.8304733 14.8755284,32.7475942 L14.2525587,32.1246245 C14.1695267,32.0415925 14.0739557,32 13.9661517,32 C13.8581948,32 13.7626238,32.0415925 13.6795918,32.1246245 L7.87392431,37.9301391 C7.79089227,38.0131711 7.74945271,38.1087421 7.74945271,38.216699 C7.74945271,38.3246559 7.79089227,38.4202269 7.87392431,38.5032589 L13.6794389,44.3087735 C13.7624709,44.3919584 13.8580419,44.433398 13.9659988,44.433398 C14.0738028,44.433398 14.1693738,44.3919584 14.2524058,44.3087735 L14.8753755,43.6861097 C14.9584075,43.6030776 14.9998471,43.5075067 14.9998471,43.3993968 C14.9998471,43.2915928 14.9584075,43.1960218 14.8753755,43.1129898 L9.97923761,38.216699 L9.97923761,38.216699 Z" />
</g>
<div onClick={this.clickLogo} className={headerLogoClasses}>
<svg width="8px" height="13px" viewBox="0 0 8 13" className="back-arrow">
<g stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
<g id="Priority-Support" transform="translate(-9.000000, -13.000000)" fill="#FFFFFF">
<g id="Group" transform="translate(2.000000, -19.000000)">
<path d="M9.97923761,38.216699 L14.8755284,33.3205611 C14.9585604,33.2375291 15,33.1419581 15,33.0340012 C15,32.9260443 14.9585604,32.8304733 14.8755284,32.7475942 L14.2525587,32.1246245 C14.1695267,32.0415925 14.0739557,32 13.9661517,32 C13.8581948,32 13.7626238,32.0415925 13.6795918,32.1246245 L7.87392431,37.9301391 C7.79089227,38.0131711 7.74945271,38.1087421 7.74945271,38.216699 C7.74945271,38.3246559 7.79089227,38.4202269 7.87392431,38.5032589 L13.6794389,44.3087735 C13.7624709,44.3919584 13.8580419,44.433398 13.9659988,44.433398 C14.0738028,44.433398 14.1693738,44.3919584 14.2524058,44.3087735 L14.8753755,43.6861097 C14.9584075,43.6030776 14.9998471,43.5075067 14.9998471,43.3993968 C14.9998471,43.2915928 14.9584075,43.1960218 14.8753755,43.1129898 L9.97923761,38.216699 L9.97923761,38.216699 Z" />
</g>
</g>
</svg>
<svg width="75" height="22" viewBox="0 0 75 22">
<g fill="none" fillRule="evenodd">
<path d="M16.415 9.158c0 3.493-2.94 6.325-6.566 6.325-3.627 0-6.567-2.832-6.567-6.325 0-3.494 2.94-6.326 6.566-6.326 3.625 0 6.565 2.832 6.565 6.326" fill="#FFF" />
<path d="M18.65 17.774c-.91-1.995-1.067-3.686-1.09-4.35V7.96C17.56 3.783 13.992.4 9.594.4 5.195.4 1.63 3.783 1.63 7.96v5.543c-.034.715-.213 2.354-1.087 4.27-1.176 2.578-.203 2.27.668 2.06.873-.212 2.818-1.04 3.426-.02.608 1.018 1.115 1.903 2.533 1.326s2.086-.77 2.29-.77h.274c.202 0 .87.193 2.29.77 1.418.576 1.925-.31 2.533-1.328.607-1.02 2.553-.19 3.424.02.873.212 1.845.52.67-2.058" fill="#FFF" />
<path d="M7.136 4.52c.858 0 1.554 1.046 1.554 2.335 0 1.288-.696 2.333-1.554 2.333-.857 0-1.553-1.045-1.553-2.333 0-1.29.696-2.334 1.553-2.334M9.595 13.847c-1.89 0-3.482-1.765-3.96-3.73.925 1.208 2.354 1.985 3.96 1.985 1.605 0 3.035-.777 3.96-1.985-.48 1.965-2.07 3.73-3.96 3.73M12.053 9.188c-.858 0-1.553-1.045-1.553-2.333 0-1.29.695-2.334 1.553-2.334.86 0 1.553 1.046 1.553 2.335 0 1.288-.694 2.333-1.553 2.333" fill="#00AEF0" />
<path d="M27.967 9.838h2.446v3.54c0 1.787-.89 2.808-2.605 2.808-1.716 0-2.605-1.02-2.605-2.807V7.572c0-1.787.89-2.807 2.605-2.807 1.715 0 2.605 1.02 2.605 2.807v1.085H28.76V7.46c0-.796-.348-1.1-.904-1.1-.557 0-.906.304-.906 1.1v6.03c0 .798.35 1.085.906 1.085s.905-.287.905-1.085v-2.057h-.793V9.838M33.462 15.938h-1.81V4.766h1.81v4.788h2.056V4.766h1.842v11.172h-1.842V11.15h-2.056v4.788M38.6 7.573c0-1.786.965-2.807 2.73-2.807 1.765 0 2.73 1.02 2.73 2.807v5.806c0 1.785-.965 2.806-2.73 2.806-1.765 0-2.73-1.02-2.73-2.807V7.572zm1.798 5.917c0 .798.36 1.1.932 1.1.572 0 .93-.302.93-1.1V7.46c0-.796-.358-1.1-.93-1.1-.572 0-.932.304-.932 1.1v6.03zM47.424 4.766c1.7 0 2.574 1.02 2.574 2.808v.35h-1.652v-.462c0-.798-.318-1.1-.875-1.1-.554 0-.872.302-.872 1.1 0 2.296 3.415 2.727 3.415 5.917 0 1.785-.89 2.806-2.605 2.806-1.715 0-2.605-1.02-2.605-2.807v-.687h1.652v.797c0 .798.35 1.085.906 1.085s.906-.287.906-1.085c0-2.297-3.415-2.727-3.415-5.916 0-1.787.874-2.808 2.574-2.808M50.51 4.766h5.458v1.597h-1.846v9.575h-1.766V6.363H50.51V4.766M58.78 9.474h2.497v1.596H58.78v3.27h3.142v1.598H56.96V4.766h4.962v1.596H58.78v3.112M66.585 15.938c-.095-.288-.16-.464-.16-1.373V12.81c0-1.038-.35-1.42-1.15-1.42h-.605v4.548h-1.755V4.766h2.65c1.82 0 2.6.846 2.6 2.57v.878c0 1.148-.366 1.9-1.148 2.265.877.366 1.165 1.212 1.165 2.377v1.724c0 .544.016.943.19 1.358h-1.787zM64.67 6.362v3.43h.687c.654 0 1.052-.286 1.052-1.18v-1.1c0-.8-.27-1.15-.893-1.15h-.847zM70.843 12.235l-2.222-7.47h1.84l1.343 5.092 1.342-5.09h1.68L72.6 12.234v3.703h-1.76v-3.703" fill="#FFF" />
</g>
</svg>
</Link>
</g>
</svg>
<svg width="75" height="22" viewBox="0 0 75 22">
<g fill="none" fillRule="evenodd">
<path d="M16.415 9.158c0 3.493-2.94 6.325-6.566 6.325-3.627 0-6.567-2.832-6.567-6.325 0-3.494 2.94-6.326 6.566-6.326 3.625 0 6.565 2.832 6.565 6.326" fill="#FFF" />
<path d="M18.65 17.774c-.91-1.995-1.067-3.686-1.09-4.35V7.96C17.56 3.783 13.992.4 9.594.4 5.195.4 1.63 3.783 1.63 7.96v5.543c-.034.715-.213 2.354-1.087 4.27-1.176 2.578-.203 2.27.668 2.06.873-.212 2.818-1.04 3.426-.02.608 1.018 1.115 1.903 2.533 1.326s2.086-.77 2.29-.77h.274c.202 0 .87.193 2.29.77 1.418.576 1.925-.31 2.533-1.328.607-1.02 2.553-.19 3.424.02.873.212 1.845.52.67-2.058" fill="#FFF" />
<path d="M7.136 4.52c.858 0 1.554 1.046 1.554 2.335 0 1.288-.696 2.333-1.554 2.333-.857 0-1.553-1.045-1.553-2.333 0-1.29.696-2.334 1.553-2.334M9.595 13.847c-1.89 0-3.482-1.765-3.96-3.73.925 1.208 2.354 1.985 3.96 1.985 1.605 0 3.035-.777 3.96-1.985-.48 1.965-2.07 3.73-3.96 3.73M12.053 9.188c-.858 0-1.553-1.045-1.553-2.333 0-1.29.695-2.334 1.553-2.334.86 0 1.553 1.046 1.553 2.335 0 1.288-.694 2.333-1.553 2.333" fill="#00AEF0" />
<path d="M27.967 9.838h2.446v3.54c0 1.787-.89 2.808-2.605 2.808-1.716 0-2.605-1.02-2.605-2.807V7.572c0-1.787.89-2.807 2.605-2.807 1.715 0 2.605 1.02 2.605 2.807v1.085H28.76V7.46c0-.796-.348-1.1-.904-1.1-.557 0-.906.304-.906 1.1v6.03c0 .798.35 1.085.906 1.085s.905-.287.905-1.085v-2.057h-.793V9.838M33.462 15.938h-1.81V4.766h1.81v4.788h2.056V4.766h1.842v11.172h-1.842V11.15h-2.056v4.788M38.6 7.573c0-1.786.965-2.807 2.73-2.807 1.765 0 2.73 1.02 2.73 2.807v5.806c0 1.785-.965 2.806-2.73 2.806-1.765 0-2.73-1.02-2.73-2.807V7.572zm1.798 5.917c0 .798.36 1.1.932 1.1.572 0 .93-.302.93-1.1V7.46c0-.796-.358-1.1-.93-1.1-.572 0-.932.304-.932 1.1v6.03zM47.424 4.766c1.7 0 2.574 1.02 2.574 2.808v.35h-1.652v-.462c0-.798-.318-1.1-.875-1.1-.554 0-.872.302-.872 1.1 0 2.296 3.415 2.727 3.415 5.917 0 1.785-.89 2.806-2.605 2.806-1.715 0-2.605-1.02-2.605-2.807v-.687h1.652v.797c0 .798.35 1.085.906 1.085s.906-.287.906-1.085c0-2.297-3.415-2.727-3.415-5.916 0-1.787.874-2.808 2.574-2.808M50.51 4.766h5.458v1.597h-1.846v9.575h-1.766V6.363H50.51V4.766M58.78 9.474h2.497v1.596H58.78v3.27h3.142v1.598H56.96V4.766h4.962v1.596H58.78v3.112M66.585 15.938c-.095-.288-.16-.464-.16-1.373V12.81c0-1.038-.35-1.42-1.15-1.42h-.605v4.548h-1.755V4.766h2.65c1.82 0 2.6.846 2.6 2.57v.878c0 1.148-.366 1.9-1.148 2.265.877.366 1.165 1.212 1.165 2.377v1.724c0 .544.016.943.19 1.358h-1.787zM64.67 6.362v3.43h.687c.654 0 1.052-.286 1.052-1.18v-1.1c0-.8-.27-1.15-.893-1.15h-.847zM70.843 12.235l-2.222-7.47h1.84l1.343 5.092 1.342-5.09h1.68L72.6 12.234v3.703h-1.76v-3.703" fill="#FFF" />
</g>
</svg>

This comment has been minimized.

@jsignanini

jsignanini Aug 27, 2018
Member

@zarembsky can we use ReactSVG here?

This comment has been minimized.

@zarembsky

zarembsky Aug 27, 2018
Author Contributor

We have legacy inlined SVG in many places. They are not affected by skin, so it is sufficient to switch to files and use background-image. I can do it throughout the code if we have time for it.

This comment has been minimized.

@jsignanini

jsignanini Aug 27, 2018
Member

@zarembsky it's fine, just do it here for this ticket. We can take care of the other inlined SVG at a later time.

</div>
<div>
<div className="row align-middle collapse">
<div className="columns shrink">
{rightLink}
</div>
<div className="columns shrink">
<Link to={(loggedIn && subscriber) ? '/subscription/info' : '/subscribe'} className={(!loggedIn || !subscriber) ? 'non-subscriber-badge' : 'subscriber-badge'} onClick={evt => this.disableClickIf(evt, 'subscription')}>
<ReactSVG path="/app/images/panel/subscriber-badge.svg" />
</Link>
<div className={badgeClasses} onClick={this.clickBadge}>
<ReactSVG path="/app/images/panel/subscriber-badge.svg" />
</div>
<div className="header-kebab shrink columns" onClick={this.toggleDropdown} ref={(node) => { this.kebab = node; }}>
<svg width="4" height="16" viewBox="0 0 4 16">
@@ -30,22 +30,12 @@ import { log } from '../../../src/utils/common';
class HeaderMenu extends React.Component {
constructor(props) {
super(props);

// event bindings
this.handleClickOutside = this.handleClickOutside.bind(this);
this.clickSettings = this.clickSettings.bind(this);
this.clickBrokenPage = this.clickBrokenPage.bind(this);
this.clickSubmitTracker = this.clickSubmitTracker.bind(this);
this.clickSignedInAs = this.clickSignedInAs.bind(this);
this.clickSignIn = this.clickSignIn.bind(this);
this.clickSignOut = this.clickSignOut.bind(this);
this.clickSubscriber = this.clickSubscriber.bind(this);
}
/**
* Handle clicks outside of the drop-down menu and trigger action.
* @param {Object} evt mouseclick event
*/
handleClickOutside(evt) {
handleClickOutside = evt => {
// eslint-disable-next-line react/no-find-dom-node
if (!ReactDOM.findDOMNode(this).contains(evt.target)) {
this.props.toggleDropdown();
@@ -54,16 +44,18 @@ class HeaderMenu extends React.Component {
/**
* Trigger action which open Settings panel from drop-down menu Settings item.
*/
clickSettings(evt) {
clickSettings = evt => {
this.props.toggleDropdown();
this.props.disableClickIf(evt, 'settings');
if(!this.props.disableClickIf(evt, 'settings')) {
this.props.history.push('/settings/globalblocking');
}
}
/**
* Handle click on 'Report a broken page' menu item.
* Currently invokes default 'mailto' handler, and often does not work.
* @todo Should send broken page data to a 'Report a broken page' site.
*/
clickBrokenPage() {
clickBrokenPage = () => {
sendMessageInPromise('getSiteData').then((data) => {
let body = `${'PLEASE INCLUDE A DESCRIPTION AND A PICTURE OF THE ISSUE YOU ARE EXPERIENCING:' + '\r\n\r\n\r\n\r\n\r\n\r\n' +
'URL: '}${data.url}\r\n` +
@@ -103,21 +95,39 @@ class HeaderMenu extends React.Component {
}
/**
* Handle click on 'Submit a new tracker' menu item.
* It should naviaget to a site where tracker data can be entered.
* It should naviagate to a site where tracker data can be entered.
*/
clickSubmitTracker() {
clickSubmitTracker = () => {
sendMessage('openNewTab', {
url: 'https:\/\/www.ghostery.com/support/submit-tracker/',
become_active: true,
});
window.close();
}

/**
* Handle click on 'Help' menu item.
* It should open Help view.
*/
clickHelp = () => {
this.props.toggleDropdown();
this.props.history.push('/help');
}

/**
* Handle click on 'About' menu item.
* It should open About view.
*/
clickAbout = () => {
this.props.toggleDropdown();
this.props.history.push('/about');
}

/**
* Handle click on the user name, displayed on the menu when a
* user is in logged in state, and navigate to the user's profile page.
*/
clickSignedInAs() {
clickSignedInAs = () => {
sendMessage('openNewTab', {
url: `https:\/\/account.${globals.GHOSTERY_DOMAIN}.com/`,
become_active: true,
@@ -128,19 +138,22 @@ class HeaderMenu extends React.Component {
/**
* Handle click on 'Sign in' menu item and navigate to Login panel.
*/
clickSignIn() {
clickSignIn = () => {
sendMessage('ping', 'sign_in');
this.props.toggleDropdown();
this.props.history.push('/login');
}
/**
* Handle click on 'Sign out' menu item (if user is in logged in state) and log out the user.
*/
clickSignOut() {
clickSignOut = () => {
this.props.toggleDropdown();
this.props.actions.logout();
}
clickSubscriber(evt) {
/**
* Handle click on 'Sibscriber menu item.
*/
clickSubscriber = evt => {
this.props.toggleDropdown();
if(!this.props.disableClickIf(evt, 'subscription')) {
this.props.history.push((!this.props.loggedIn || !this.props.subscriber) ? '/subscribe' : '/subscription/info');
@@ -157,8 +170,8 @@ class HeaderMenu extends React.Component {
<ClickOutside onClickOutside={this.handleClickOutside} excludeEl={this.props.kebab}>
<div className="dropdown-pane" id="header-dropdown">
<ul className="vertical menu no-bullet icons icon-left">
<li className="menu-option menu-settings">
<Link to="/settings/globalblocking" onClick={this.clickSettings}>
<li className="menu-option menu-settings" onClick={this.clickSettings}>
<div>
<div className="menu-icon-container">
<svg width="18px" height="18px" viewBox="0 0 18 18">
<g>
@@ -167,7 +180,7 @@ class HeaderMenu extends React.Component {
</svg>
</div>
<span>{ t('panel_menu_settings') }</span>
</Link>
</div>
</li>
<li onClick={this.clickBrokenPage} className="menu-option menu-broken-page">
<div className="menu-icon-container">
@@ -191,8 +204,8 @@ class HeaderMenu extends React.Component {
</div>
<span>{ t('panel_menu_submit_tracker') }</span>
</li>
<li className="menu-option menu-help">
<Link to="/help" onClick={this.props.toggleDropdown}>
<li className="menu-option menu-help" onClick={this.clickHelp}>
<div>
<div className="menu-icon-container">
<svg width="18px" height="18px" viewBox="0 0 18 18">
<g>
@@ -201,10 +214,10 @@ class HeaderMenu extends React.Component {
</svg>
</div>
<span>{ t('panel_menu_help') }</span>
</Link>
</div>
</li>
<li className="menu-option menu-about">
<Link to="/about" onClick={this.props.toggleDropdown}>
<li className="menu-option menu-about" onClick={this.clickAbout}>
<div>
<div className="menu-icon-container">
<svg width="17" height="21" viewBox="0 0 17 21">
<g className="about-icon" fill="none" fillRule="evenodd">
@@ -216,7 +229,7 @@ class HeaderMenu extends React.Component {
</svg>
</div>
<span>{ t('panel_menu_about') }</span>
</Link>
</div>
</li>
<li className={subscriberParams.optionClass} onClick={this.clickSubscriber}>
<div>
@@ -41,6 +41,7 @@
padding: 7px 0 7px 15px;
height: 36px;
.base-badge {
@extend %pointer;
width: 29px;
height: 20px;
display: block;
@@ -67,6 +68,7 @@
width: 75px;
background-position: right;
.back-arrow {
@extend %pointer;
display: none;
height: 13px;
padding: 0 15px 17px 0
@@ -102,8 +104,8 @@
visibility: visible;
ul.menu {background: none;}
.menu-option-base {
@extend %pointer;
position: relative;
cursor: default;
padding: 10px 0;
.menu-icon-container {
position: absolute;
@@ -144,7 +146,6 @@

.menu-option {
@extend .menu-option-base;
@extend %pointer;
.subscriber {
width: 23px;
height: 16px;
@@ -171,7 +172,6 @@

.menu-option-non-subscriber {
@extend .menu-option-base;
@extend %pointer;
.non-subscriber {
width: 23px;
height: 16px;
ProTip! Use n and p to navigate between commits in a pull request.