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 Dawn Onboarding toast messages #660

Merged
merged 12 commits into from Jan 21, 2021
+143 −37
Merged

Fixes for Dawn Onboarding toast messages #660

Changes from 1 commit
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
0325779
Fixes for Dawn toast styling and layout
leuryr Jan 13, 2021
a86ca65
Add missing toast error message for Step 1
leuryr Jan 13, 2021
9f847ec
Ensure toast remains above step progress bar
leuryr Jan 14, 2021
883774c
Merge branch 'ghostery-browser-intro-hub' into dawn-toast-fixes
leuryr Jan 14, 2021
5e77e37
Comment update
leuryr Jan 14, 2021
70ded34
Update snapshot for ToastMessage component
leuryr Jan 14, 2021
b3d55d1
Fix toast not clearing after block settings submit
leuryr Jan 14, 2021
a0ed7d8
Move setToast code up in if block
leuryr Jan 15, 2021
d44acef
Center tooltip info icon
leuryr Jan 19, 2021
a76eca7
Merge branch 'ghostery-browser-intro-hub' into dawn-toast-fixes
leuryr Jan 20, 2021
b401849
Make toast message i18n-friendly
leuryr Jan 20, 2021
efb0b7b
Merge branch 'ghostery-browser-intro-hub' into dawn-toast-fixes
leuryr Jan 20, 2021
File filter
Filter file types
Jump to
Jump to file
Failed to load files.

Always

Just for now

Next
Loading status checks…

Fixes for Dawn toast styling and layout

  • Loading branch information
@leuryr
leuryr committed Jan 13, 2021
commit 0325779049d313715f5b858b3794929fda5a6df0
2 _locales/en/messages.json
View file
Open in desktop
@@ -2419,6 +2419,6 @@
"message": "Pick a default engine for all your searches."
},
"ghostery_browser_hub_blocking_settings_view_toast_error_message": {
"message": "Error: Please answer all questions"
"message": "Please answer all questions"
}
}
2 app/ghostery-browser-hub/Views/AppView/AppView.jsx
View file
Open in desktop
@@ -38,7 +38,7 @@ const AppView = (props) => {
return (
<div className="App full-height full-width flex-container">
<div className="App__mainContent full-height full-width">
{<ToastMessage toastText={toastMessage} toastClass={toastClass} toastExit={exitToast} />}
{<ToastMessage toastText={toastMessage} toastClass={toastClass} dawnHub toastExit={exitToast} />}
{children}
</div>
</div>
2 app/ghostery-browser-hub/Views/OnboardingViews/Step2_BlockSettingsView/BlockSettingsView.jsx
View file
Open in desktop
@@ -100,7 +100,7 @@ class BlockSettingsView extends Component {

setToast({
toastMessage: t('ghostery_browser_hub_blocking_settings_view_toast_error_message'),
toastClass: 'error'
toastClass: 'alert'
});
}
}
18 app/images/hub/toast/toast-alert.svg
View file
Open in desktop
@@ -0,0 +1,18 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24">
<defs>
<path id="wy9qqssfxa" d="M3.5 22c-.5 0-1-.1-1.5-.4C.6 20.8.1 18.9.9 17.5L9.4 3.3c.2-.4.6-.8 1-1 .7-.4 1.5-.5 2.3-.3.8.2 1.4.7 1.9 1.4L23 17.5c.3.5.4 1 .4 1.5 0 .8-.3 1.6-.9 2.1-.5.6-1.2.9-2 .9h-17zm7.6-17.6L2.7 18.5c-.3.5-.1 1.1.4 1.4.1.1.3.1.4.1h16.9c.3 0 .5-.1.7-.3.2-.2.3-.4.3-.7 0-.2 0-.3-.1-.5L12.9 4.4c-.3-.5-.9-.6-1.4-.4-.2.1-.3.2-.4.4zM13 13V9c0-.6-.4-1-1-1s-1 .4-1 1v4c0 .6.4 1 1 1s1-.4 1-1zm-.3 4.7c.2-.2.3-.4.3-.7 0-.1 0-.3-.1-.4 0-.1-.1-.2-.2-.3 0 0-.1-.1-.2-.1s-.1-.1-.2-.1-.1 0-.2-.1c-.2 0-.4 0-.6.1-.1 0-.2.1-.3.2-.1.1-.2.2-.2.3 0 .1-.1.2-.1.4 0 .3.1.5.3.7.2.2.4.3.7.3.4 0 .6-.1.8-.3z"/>
</defs>
<g fill="none" fill-rule="evenodd">
<g>
<g transform="translate(-165 -71) translate(165 71)">
<mask id="8dw5swpdwb" fill="#fff">
<use xlink:href="#wy9qqssfxa"/>
</mask>
<use fill="#000" fill-rule="nonzero" xlink:href="#wy9qqssfxa"/>
<g fill="#9F4948" mask="url(#8dw5swpdwb)">
<path d="M0 0H24V24H0z"/>
</g>
</g>
</g>
</g>
</svg>
18 app/images/hub/toast/toast-success.svg
View file
Open in desktop
@@ -0,0 +1,18 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24">
<defs>
<path id="o0o06k6tda" d="M23 11.1v.9c0 6.1-4.9 11-11 11S1 18.1 1 12 5.9 1 12 1c1.5 0 3.1.3 4.5 1 .5.2.7.8.5 1.3-.2.5-.8.7-1.3.5-1.2-.5-2.4-.8-3.7-.8-5 0-9 4-9 9s4 9 9 9 9-4 9-9v-.9c0-.6.4-1 1-1s1 .4 1 1zm.7-8.8c-.4-.4-1-.4-1.4 0L12 12.6l-2.3-2.3c-.4-.4-1-.4-1.4 0-.4.4-.4 1 0 1.4l3 3c.2.2.5.3.7.3.2 0 .5-.1.7-.3l11-11c.4-.4.4-1 0-1.4z"/>
</defs>
<g fill="none" fill-rule="evenodd">
<g>
<g transform="translate(-165 -71) translate(165 71)">
<mask id="subc7yvwab" fill="#fff">
<use xlink:href="#o0o06k6tda"/>
</mask>
<use fill="#000" fill-rule="nonzero" xlink:href="#o0o06k6tda"/>
<g fill="#417505" mask="url(#subc7yvwab)">
<path d="M0 0H24V24H0z"/>
</g>
</g>
</g>
</g>
</svg>
53 app/shared-components/ToastMessage/ToastMessage.jsx
View file
Open in desktop
@@ -19,24 +19,45 @@ import PropTypes from 'prop-types';
* @return {JSX} JSX for rendering a Toast Message
* @memberof SharedComponents
*/
const ToastMessage = ({ toastText, toastClass, toastExit }) => (
<div className="ToastMessage full-width">
{toastText && (
<div className="callout-container">
<div className={`callout toast ${toastClass}`}>
<div className="flex-container align-center-middle">
<div className="callout-text">
{toastText}
const ToastMessage = ({
toastText, toastClass, toastExit, dawnHub
}) => {
// These variables will determine whether the toast should display with Dawn onboarding styling
// or the default styling used in GBE
const dawnHubClass = dawnHub ? 'dawn-hub' : '';
const dawnLayout = dawnHub ? 'align-justify align-middle' : 'align-center-middle';

let dawnToastText = '';
if (dawnHub && toastClass === 'alert') {
dawnToastText = 'Error: ';
} else if (dawnHub && toastClass === 'success') {
dawnToastText = 'Success: ';
}
Comment on lines +30 to +35

This comment has been minimized.

Sign in to view
@wlycdgr

wlycdgr Jan 20, 2021
Member

We should make sure this is i18n-friendly

This comment has been minimized.

Sign in to view
@leuryr

leuryr Jan 20, 2021
Author Contributor

Ah, absolutely. Fixed! Means less lines of code in ToastMessage.jsx as well, so win-win, haha.

return (
<div className={`ToastMessage full-width ${dawnHubClass}`}>
{toastText && (
<div className="callout-container">
<div className={`callout toast ${toastClass}`}>
<div className={`flex-container ${dawnLayout}`}>
<div className="flex-container align-middle">
{dawnHub && (
<img className="ToastMessage_classIcon" src={`/app/images/hub/toast/toast-${toastClass}.svg`} />
)}
<div className="callout-text">
{`${dawnToastText}${toastText}`}
</div>
</div>
{toastExit && (
<div className="ToastMessage__close clickable" onClick={toastExit} />
)}
</div>
{toastExit && (
<div className="ToastMessage__close clickable" onClick={toastExit} />
)}
</div>
</div>
</div>
)}
</div>
);
)}
</div>
);
};

// PropTypes ensure we pass required props of the correct type
ToastMessage.propTypes = {
@@ -46,11 +67,13 @@ ToastMessage.propTypes = {
PropTypes.func,
PropTypes.bool,
]),
dawnHub: PropTypes.bool,
};

// Default props used in the Toast Message
ToastMessage.defaultProps = {
toastExit: false,
dawnHub: false,
};

export default ToastMessage;
23 app/shared-components/ToastMessage/ToastMessage.scss
View file
Open in desktop
@@ -16,7 +16,30 @@
position: relative;
top: 30px;
height: 0;
&.dawn-hub {
max-width: 700px;
margin: auto;
font-family: Roboto;
font-size: 14px;
font-weight: 500;
.alert {
background-color: #f8e6e6;
.callout-text {color: #9f4948;}
}
.success {
background-color: #dff0d8;
.callout-text {color: #417505;}
}
.ToastMessage__close {
background-image: buildIconX(#000000);
}
}
}

.ToastMessage_classIcon {
margin-right: 20px;
}

.ToastMessage__close {
height: 13px;
width: 13px;
ProTip! Use n and p to navigate between commits in a pull request.