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

GH-2247: Add dropdown list of search options #667

Merged
merged 2 commits into from Jan 27, 2021
+241 −15
Merged

GH-2247: Add dropdown list of search options #667

Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
6856756
Add dropdown for search options
leuryr Jan 26, 2021
c23d67c
Merge branch 'ghostery-browser-intro-hub' into GH-2247/search-options…
leuryr Jan 26, 2021
File filter
Filter file types
Jump to
Jump to file
Failed to load files.

Always

Just for now

Next
Loading status checks…

Add dropdown for search options

  • Loading branch information
@leuryr
leuryr committed Jan 26, 2021
commit 68567569aa6051bb3f593641c4cf2dd6c869351a
98 app/ghostery-browser-hub/Views/OnboardingViews/Step2_BlockSettingsView/BlockSettingsView.jsx
View file
Open in desktop
@@ -160,65 +160,65 @@ class BlockSettingsView extends Component {
<Tooltip header={t('ghostery_dawn_onboarding_info_blocking_all')} position="top" delay="300" isOnboardingHub />
</div>
</div>
<div className="BlockSettingsView_answerBlock">
<div className="BlockSettingsView__radioButtonContainer">
<RadioButton checked={kindsOfTrackers === 0} handleClick={() => this.handleAnswerChange('kindsOfTrackers', 0)} altDesign />
</div>
<div className="BlockSettingsView_answerText">{t('ghostery_dawn_onboarding_kinds_of_trackers_all')}</div>
</li>
<div className="BlockSettingsView_answerBlock">
<div className="BlockSettingsView__radioButtonContainer">
<RadioButton checked={kindsOfTrackers === 0} handleClick={() => this.handleAnswerChange('kindsOfTrackers', 0)} altDesign />
</div>
<div className="BlockSettingsView_answerBlock">
<div className="BlockSettingsView__radioButtonContainer">
<RadioButton checked={kindsOfTrackers === 1} handleClick={() => this.handleAnswerChange('kindsOfTrackers', 1)} altDesign />
</div>
<div className="BlockSettingsView_answerText">{t('ghostery_dawn_onboarding_kinds_of_trackers_ad_and_analytics')}</div>
<div className="BlockSettingsView_answerText">{t('ghostery_dawn_onboarding_kinds_of_trackers_all')}</div>
</div>
<div className="BlockSettingsView_answerBlock">
<div className="BlockSettingsView__radioButtonContainer">
<RadioButton checked={kindsOfTrackers === 1} handleClick={() => this.handleAnswerChange('kindsOfTrackers', 1)} altDesign />
</div>
<div className="BlockSettingsView_answerBlock">
<div className="BlockSettingsView__radioButtonContainer">
<RadioButton checked={kindsOfTrackers === 2} handleClick={() => this.handleAnswerChange('kindsOfTrackers', 2)} altDesign />
</div>
<div className="BlockSettingsView_answerText">{t('ghostery_dawn_onboarding_kinds_of_trackers_none')}</div>
<div className="BlockSettingsView_answerText">{t('ghostery_dawn_onboarding_kinds_of_trackers_ad_and_analytics')}</div>
</div>
<div className="BlockSettingsView_answerBlock">
<div className="BlockSettingsView__radioButtonContainer">
<RadioButton checked={kindsOfTrackers === 2} handleClick={() => this.handleAnswerChange('kindsOfTrackers', 2)} altDesign />
</div>
<li className="BlockSettingsView_question">
<div className="BlockSettingsView_questionBlock">
{t('ghostery_dawn_onboarding_question_anti_tracking')}
<div className="BlockSettingsView__infoIcon g-tooltip">
<Tooltip header={t('ghostery_dawn_onboarding_info_anti_tracking')} position="top" delay="300" isOnboardingHub />
</div>
</div>
</li>
<div className="BlockSettingsView_answerBlock">
<div className="BlockSettingsView__radioButtonContainer">
<RadioButton checked={antiTracking === true} handleClick={() => this.handleAnswerChange('antiTracking', true)} altDesign />
<div className="BlockSettingsView_answerText">{t('ghostery_dawn_onboarding_kinds_of_trackers_none')}</div>
</div>
<li className="BlockSettingsView_question">
<div className="BlockSettingsView_questionBlock">
{t('ghostery_dawn_onboarding_question_anti_tracking')}
<div className="BlockSettingsView__infoIcon g-tooltip">
<Tooltip header={t('ghostery_dawn_onboarding_info_anti_tracking')} position="top" delay="300" isOnboardingHub />
</div>
<div className="BlockSettingsView_answerText">{t('hub_setup_modal_button_yes')}</div>
</div>
<div className="BlockSettingsView_answerBlock">
<div className="BlockSettingsView__radioButtonContainer">
<RadioButton checked={antiTracking === false} handleClick={() => this.handleAnswerChange('antiTracking', false)} altDesign />
</div>
<div className="BlockSettingsView_answerText">{t('hub_setup_modal_button_no')}</div>
</li>
<div className="BlockSettingsView_answerBlock">
<div className="BlockSettingsView__radioButtonContainer">
<RadioButton checked={antiTracking === true} handleClick={() => this.handleAnswerChange('antiTracking', true)} altDesign />
</div>
<li className="BlockSettingsView_question">
<div className="BlockSettingsView_questionBlock">
{t('ghostery_dawn_onboarding_question_smart_browsing')}
<div className="BlockSettingsView__infoIcon g-tooltip">
<Tooltip header={t('ghostery_dawn_onboarding_info_smart_browsing')} position="top" delay="300" isOnboardingHub />
</div>
</div>
</li>
<div className="BlockSettingsView_answerBlock">
<div className="BlockSettingsView__radioButtonContainer">
<RadioButton checked={smartBrowsing === true} handleClick={() => this.handleAnswerChange('smartBrowsing', true)} altDesign />
</div>
<div className="BlockSettingsView_answerText">{t('hub_setup_modal_button_yes')}</div>
<div className="BlockSettingsView_answerText">{t('hub_setup_modal_button_yes')}</div>
</div>
<div className="BlockSettingsView_answerBlock">
<div className="BlockSettingsView__radioButtonContainer">
<RadioButton checked={antiTracking === false} handleClick={() => this.handleAnswerChange('antiTracking', false)} altDesign />
</div>
<div className="BlockSettingsView_answerBlock">
<div className="BlockSettingsView__radioButtonContainer">
<RadioButton checked={smartBrowsing === false} handleClick={() => this.handleAnswerChange('smartBrowsing', false)} altDesign />
<div className="BlockSettingsView_answerText">{t('hub_setup_modal_button_no')}</div>
</div>
<li className="BlockSettingsView_question">
<div className="BlockSettingsView_questionBlock">
{t('ghostery_dawn_onboarding_question_smart_browsing')}
<div className="BlockSettingsView__infoIcon g-tooltip">
<Tooltip header={t('ghostery_dawn_onboarding_info_smart_browsing')} position="top" delay="300" isOnboardingHub />
</div>
<div className="BlockSettingsView_answerText">{t('hub_setup_modal_button_no')}</div>
</div>
</li>
<div className="BlockSettingsView_answerBlock">
<div className="BlockSettingsView__radioButtonContainer">
<RadioButton checked={smartBrowsing === true} handleClick={() => this.handleAnswerChange('smartBrowsing', true)} altDesign />
</div>
<div className="BlockSettingsView_answerText">{t('hub_setup_modal_button_yes')}</div>
</div>
<div className="BlockSettingsView_answerBlock">
<div className="BlockSettingsView__radioButtonContainer">
<RadioButton checked={smartBrowsing === false} handleClick={() => this.handleAnswerChange('smartBrowsing', false)} altDesign />
</div>
<div className="BlockSettingsView_answerText">{t('hub_setup_modal_button_no')}</div>
</div>
</ol>
</div>
<button
1 ...r-hub/Views/OnboardingViews/Step3_ChooseDefaultSearchView/ChooseDefaultSearchConstants.js
View file
Open in desktop
@@ -16,3 +16,4 @@ export const SEARCH_GHOSTERY = 'Ghostery';
export const SEARCH_BING = 'Bing';
export const SEARCH_YAHOO = 'Yahoo';
export const SEARCH_STARTPAGE = 'Startpage';
export const SEARCH_OTHER = t('ghostery_dawn_onboarding_other');
144 ...owser-hub/Views/OnboardingViews/Step3_ChooseDefaultSearchView/ChooseDefaultSearchView.jsx
View file
Open in desktop
@@ -20,7 +20,8 @@ import {
SEARCH_GHOSTERY,
SEARCH_YAHOO,
SEARCH_STARTPAGE,
SEARCH_BING
SEARCH_BING,
SEARCH_OTHER
} from './ChooseDefaultSearchConstants';
import { Modal } from '../../../../shared-components';

@@ -31,10 +32,20 @@ class ChooseDefaultSearchView extends Component {
this.state = {
chosenSearch: SEARCH_GHOSTERY,
searchBeingConsidered: null,
otherSearchSelected: null,
otherListOpen: false,
modalActive: false,
};
}

componentDidMount() {
document.addEventListener('click', this.handleClickAway);
}

componentWillUnmount() {
document.removeEventListener('click', this.handleClickAway);
}

updateSelection = () => this.setState(prevState => (
{
chosenSearch: prevState.searchBeingConsidered,
@@ -45,13 +56,33 @@ class ChooseDefaultSearchView extends Component {

cancelSelection = () => this.setState({ modalActive: false, searchBeingConsidered: null });

updateOtherSearchSelection = otherSelected => this.setState({ otherSearchSelected: otherSelected });

updateOtherListOpen = open => this.setState({ otherListOpen: open });

triggerConfirmationModal = selection => this.setState({ modalActive: true, searchBeingConsidered: selection });

handleClickAway = (e) => {
const { otherListOpen } = this.state;

const closeDropdownOnClickAway = (open, key, ref) => {
if (open && !ref.contains(e.target)) {
this.setState({ [`${key}`]: false });
}
};
closeDropdownOnClickAway(otherListOpen, 'otherListOpen', this.otherListRef);
}

handleSubmit = () => {
const { chosenSearch } = this.state;
let { chosenSearch } = this.state;
const { otherSearchSelected } = this.state;
const { actions, history } = this.props;
const { setSetupStep, setDefaultSearch } = actions;

if (chosenSearch === SEARCH_OTHER && otherSearchSelected) {
chosenSearch = otherSearchSelected;
}

// TODO comment this IN for builds for Dawn
// commented out for testing purposes, as trying to message search@ghostery.com
// outside of Dawn causes an error
@@ -82,46 +113,134 @@ class ChooseDefaultSearchView extends Component {

renderStartpageOptionDescription = () => (
<div className="ChooseSearchView__optionDescriptionTitle">{t('ghostery_dawn_onboarding_ad_supported_private_search')}</div>
)
);

renderOtherOptionDescription = () => {
const { otherSearchSelected, otherListOpen } = this.state;
const dropdownOpen = otherListOpen ? 'expanded' : '';
return (
<Fragment>
<div className="ChooseSearchView__optionDescriptionHeader">
<div className="ChooseSearchView__optionTitle">{SEARCH_OTHER}</div>
<div className="ChooseSearchView__optionDescriptionSubtitle">{t('ghostery_dawn_onboarding_choose_alternate_search')}</div>
</div>
<div
ref={(node) => { this.otherListRef = node; }}
className={`ChooseSearchView__optionDropdownContainer ${dropdownOpen}`}
onClick={() => this.updateOtherListOpen(!otherListOpen)}
>
<div className="ChooseSearchView__optionDropdown">
<div className="ChooseSearchView__optionDropdownItem">
{otherSearchSelected || t('ghostery_dawn_onboarding_select_option')}
<img
className={`ChooseSearchView__optionDropdownCaret ${dropdownOpen}`}
src="/app/images/hub/ChooseDefaultSearchView/dropdown-caret.svg"
/>
</div>
{otherListOpen && this.renderOtherOptionsList()}
</div>
</div>
</Fragment>
);
}

renderOtherOptionsList = () => {
const otherSearchOptions = [
'DuckDuck Go',
'Ecosia',
'Ekoru',
'Gibiru',
'Google',
'OneSearch',
'Privado',
'Qwant',
'Search Encrypt',
'Tailcat',
];

return (
<Fragment>
{otherSearchOptions.map(otherSearchOption => (
<div
key={`option-${otherSearchOption}`}
className="ChooseSearchView__optionDropdownItem"
onClick={() => {
this.updateOtherSearchSelection(otherSearchOption);
this.triggerConfirmationModal(SEARCH_OTHER);
}}
>
{otherSearchOption}
</div>
))}
</Fragment>
);
}

renderOptionContainer = (chosenSearch, optionName) => {
const selected = (chosenSearch === optionName);
const containerClasses = ClassNames('ChooseSearchView__optionContainer', { selected });
const logoFilename = `/app/images/hub/ChooseDefaultSearchView/search-engine-logo-${optionName.toLocaleLowerCase()}.svg`;

return (
<div onClick={() => this.triggerConfirmationModal(optionName)} className={containerClasses}>
<div
onClick={() => {
if (optionName !== SEARCH_OTHER) {
this.triggerConfirmationModal(optionName);
}
}}
className={containerClasses}
>
<div className="ChooseSearchView__optionRadioButtonContainer">
<RadioButton
checked={selected}
handleClick={() => {}}
altDesign
/>
{(optionName !== SEARCH_OTHER || (optionName === SEARCH_OTHER && selected)) && (
<RadioButton
checked={selected}
handleClick={() => {}}
altDesign
/>
)
}
</div>
<div className="ChooseSearchView__optionDescriptionContainer">
<img src={logoFilename} />
{(optionName !== SEARCH_OTHER) && (
<img src={logoFilename} />
)}
{(optionName === SEARCH_GHOSTERY) && this.renderGhosteryOptionDescription()}
{(optionName === SEARCH_STARTPAGE) && this.renderStartpageOptionDescription()}
{(optionName === SEARCH_OTHER) && this.renderOtherOptionDescription()}
</div>
</div>
);
}

renderConfirmationModal = () => {
const { searchBeingConsidered } = this.state;
const { searchBeingConsidered, otherSearchSelected } = this.state;
const logoFilename = `/app/images/hub/ChooseDefaultSearchView/search-engine-logo-${searchBeingConsidered.toLocaleLowerCase()}.svg`;

return (
<Modal show>
<div className="ChooseSearchView__modalContent">
<img src="/app/images/hub/ChooseDefaultSearchView/ghostery-browser-logo.svg" />
<div className="ChooseSearchView__modalMain">
<img className="ChooseSearchView__modalOptionLogo" src={logoFilename} />
{searchBeingConsidered === SEARCH_OTHER ? (
<div className="ChooseSearchView__modalHeader">
{SEARCH_OTHER}
</div>
) :
<img className="ChooseSearchView__modalOptionLogo" src={logoFilename} />
}
<div className="ChooseSearchView__modalDescription">
{searchBeingConsidered === SEARCH_STARTPAGE && t('ghostery_dawn_onboarding_startpage_warning')}
{searchBeingConsidered === SEARCH_BING && t('ghostery_dawn_onboarding_bing_warning')}
{searchBeingConsidered === SEARCH_YAHOO && t('ghostery_dawn_onboarding_yahoo_warning')}
{searchBeingConsidered === SEARCH_GHOSTERY && t('ghostery_dawn_onboarding_glow_benefit')}
{(searchBeingConsidered === SEARCH_OTHER) && (
<Fragment>
{
`${t('ghostery_dawn_onboarding_you_have_selected_an_alternate_serach_engine')} \n
${otherSearchSelected}`
}
</Fragment>
)}
</div>
<div className="ChooseSearchView__modalButtonsContainer">
<button
@@ -167,6 +286,7 @@ class ChooseDefaultSearchView extends Component {
{this.renderOptionContainer(chosenSearch, SEARCH_GHOSTERY)}
{this.renderOptionContainer(chosenSearch, SEARCH_STARTPAGE)}
{this.renderOptionContainer(chosenSearch, SEARCH_BING)}
{this.renderOptionContainer(chosenSearch, SEARCH_OTHER)}
{this.renderOptionContainer(chosenSearch, SEARCH_YAHOO)}
</div>
<button
ProTip! Use n and p to navigate between commits in a pull request.