Skip to content

Commit 251f6ed

Browse files
raclimraclim
authored
Merge pull request #2714 from processing/feature/fundraiser-content
Add Promotion for 2023 Fundraiser
2 parents d2267f4 + 96dd429 commit 251f6ed

File tree

16 files changed

+1241
-2
lines changed

16 files changed

+1241
-2
lines changed

‎client/constants.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -90,6 +90,8 @@ export const SHOW_EDITOR_OPTIONS = 'SHOW_EDITOR_OPTIONS';
9090
export const CLOSE_EDITOR_OPTIONS = 'CLOSE_EDITOR_OPTIONS';
9191
export const SHOW_KEYBOARD_SHORTCUT_MODAL = 'SHOW_KEYBOARD_SHORTCUT_MODAL';
9292
export const CLOSE_KEYBOARD_SHORTCUT_MODAL = 'CLOSE_KEYBOARD_SHORTCUT_MODAL';
93+
export const SHOW_FUNDRAISER_MODAL = 'SHOW_FUNDRAISER_MODAL';
94+
export const CLOSE_FUNDRAISER_MODAL = 'CLOSE_FUNDRAISER_MODAL';
9395
export const SHOW_TOAST = 'SHOW_TOAST';
9496
export const HIDE_TOAST = 'HIDE_TOAST';
9597
export const SET_TOAST_TEXT = 'SET_TOAST_TEXT';

‎client/images/processing-foundation-logo.svg‎

Lines changed: 1025 additions & 0 deletions
Loading

‎client/modules/IDE/actions/ide.js‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -184,6 +184,18 @@ export function closeKeyboardShortcutModal() {
184184
};
185185
}
186186

187+
export function showFundraiserModal() {
188+
return {
189+
type: ActionTypes.SHOW_FUNDRAISER_MODAL
190+
};
191+
}
192+
193+
export function closeFundraiserModal() {
194+
return {
195+
type: ActionTypes.CLOSE_FUNDRAISER_MODAL
196+
};
197+
}
198+
187199
export function setUnsavedChanges(value) {
188200
return {
189201
type: ActionTypes.SET_UNSAVED_CHANGES,

‎client/modules/IDE/components/About.jsx‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -162,6 +162,20 @@ function About(props) {
162162
Discord
163163
</a>
164164
</p>
165+
<p className="about__content-column-list">
166+
<a
167+
href="https://p5js.org/download/support.html"
168+
target="_blank"
169+
rel="noopener noreferrer"
170+
>
171+
<AsteriskIcon
172+
className="about__content-column-asterisk"
173+
aria-hidden="true"
174+
focusable="false"
175+
/>
176+
Donate
177+
</a>
178+
</p>
165179
<p className="about__content-column-list">
166180
<Link to="/privacy-policy">
167181
<AsteriskIcon

‎client/modules/IDE/components/FundraiserModal.jsx‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import React from 'react';
2+
import { useTranslation } from 'react-i18next';
3+
import LogoIcon from '../../../images/p5js-logo.svg';
4+
import PFLogoIcon from '../../../images/processing-foundation-logo.svg';
5+
6+
export default function FundraiserModal() {
7+
const { t } = useTranslation();
8+
9+
return (
10+
<div className="fundraiser">
11+
<p className="fundraiser__description">{t('Fundraiser.Description')}</p>
12+
<div className="fundraiser__img-container">
13+
<LogoIcon
14+
className="fundraiser__logo-p5"
15+
role="img"
16+
aria-label={t('Common.p5logoARIA')}
17+
focusable="false"
18+
/>
19+
<PFLogoIcon
20+
className="fundraiser__logo-PF"
21+
role="img"
22+
aria-label={t('Common.PFlogoARIA')}
23+
focusable="false"
24+
/>
25+
</div>
26+
<a
27+
className="fundraiser__CTA"
28+
href="https://donorbox.org/to-the-power-of-10"
29+
target="_blank"
30+
rel="noopener noreferrer"
31+
>
32+
{t('Fundraiser.CallToAction')}
33+
</a>
34+
</div>
35+
);
36+
}

‎client/modules/IDE/components/Header/MobileNav.jsx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,8 @@ import {
2323
newFile,
2424
newFolder,
2525
openPreferences,
26-
showKeyboardShortcutModal
26+
showKeyboardShortcutModal,
27+
showFundraiserModal
2728
} from '../../actions/ide';
2829
import { logoutUser } from '../../../User/actions';
2930
import { useSketchActions, useWhatPage } from '../../hooks';
@@ -434,6 +435,9 @@ const MoreMenu = () => {
434435
{t('Nav.Help.Reference')}
435436
</NavMenuItem>
436437
<NavMenuItem href="/about">{t('Nav.Help.About')}</NavMenuItem>
438+
<NavMenuItem onClick={() => dispatch(showFundraiserModal())}>
439+
{t('Nav.Fundraiser')}
440+
</NavMenuItem>
437441
</ParentMenuContext.Provider>
438442
</ul>
439443
</div>

‎client/modules/IDE/components/Header/Nav.jsx‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ import {
2424
newFile,
2525
newFolder,
2626
showKeyboardShortcutModal,
27+
showFundraiserModal,
2728
startSketch,
2829
stopSketch
2930
} from '../../actions/ide';
@@ -37,6 +38,7 @@ const Nav = ({ layout }) => (
3738
matches ? (
3839
<NavBar>
3940
<LeftLayout layout={layout} />
41+
<FundraiserSection />
4042
<UserMenu />
4143
</NavBar>
4244
) : (
@@ -85,6 +87,24 @@ const UserMenu = () => {
8587
return null;
8688
};
8789

90+
const FundraiserSection = () => {
91+
const { t } = useTranslation();
92+
const dispatch = useDispatch();
93+
94+
return (
95+
<>
96+
<button
97+
className="nav__fundraiser-btn"
98+
onClick={() => dispatch(showFundraiserModal())}
99+
aria-label="2023-fundraiser-button"
100+
title="2023 Fundraiser Button"
101+
>
102+
{t('Nav.Fundraiser')}
103+
</button>
104+
</>
105+
);
106+
};
107+
88108
const DashboardMenu = () => {
89109
const { t } = useTranslation();
90110
const editorLink = useSelector(selectSketchPath);

‎client/modules/IDE/components/Header/__snapshots__/Nav.unit.test.jsx.snap‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,13 @@ exports[`Nav renders dashboard version for desktop 1`] = `
3939
</a>
4040
</li>
4141
</ul>
42+
<button
43+
aria-label="2023-fundraiser-button"
44+
class="nav__fundraiser-btn"
45+
title="2023 Fundraiser Button"
46+
>
47+
Support p5.js and the Processing Foundation!
48+
</button>
4249
</nav>
4350
</header>
4451
</DocumentFragment>
@@ -450,6 +457,13 @@ exports[`Nav renders dashboard version for mobile 1`] = `
450457
About
451458
</a>
452459
</li>
460+
<li
461+
class="nav__dropdown-item"
462+
>
463+
<button>
464+
Support p5.js and the Processing Foundation!
465+
</button>
466+
</li>
453467
</ul>
454468
</div>
455469
</div>
@@ -666,6 +680,13 @@ exports[`Nav renders editor version for desktop 1`] = `
666680
</ul>
667681
</li>
668682
</ul>
683+
<button
684+
aria-label="2023-fundraiser-button"
685+
class="nav__fundraiser-btn"
686+
title="2023 Fundraiser Button"
687+
>
688+
Support p5.js and the Processing Foundation!
689+
</button>
669690
</nav>
670691
</header>
671692
</DocumentFragment>
@@ -1077,6 +1098,13 @@ exports[`Nav renders editor version for mobile 1`] = `
10771098
About
10781099
</a>
10791100
</li>
1101+
<li
1102+
class="nav__dropdown-item"
1103+
>
1104+
<button>
1105+
Support p5.js and the Processing Foundation!
1106+
</button>
1107+
</li>
10801108
</ul>
10811109
</div>
10821110
</div>

‎client/modules/IDE/components/IDEOverlays.jsx‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { useLocation, useParams } from 'react-router-dom';
55
import Overlay from '../../App/components/Overlay';
66
import {
77
closeKeyboardShortcutModal,
8+
closeFundraiserModal,
89
closePreferences,
910
closeShareModal,
1011
hideErrorModal
@@ -14,6 +15,7 @@ import AddToCollectionList from './AddToCollectionList';
1415
import ErrorModal from './ErrorModal';
1516
import Feedback from './Feedback';
1617
import KeyboardShortcutModal from './KeyboardShortcutModal';
18+
import FundraiserModal from './FundraiserModal';
1719
import NewFileModal from './NewFileModal';
1820
import NewFolderModal from './NewFolderModal';
1921
import Preferences from './Preferences';
@@ -33,6 +35,7 @@ export default function IDEOverlays() {
3335
uploadFileModalVisible,
3436
preferencesIsVisible,
3537
keyboardShortcutVisible,
38+
fundraiserContentVisible,
3639
shareModalVisible,
3740
shareModalProjectId,
3841
shareModalProjectName,
@@ -106,6 +109,15 @@ export default function IDEOverlays() {
106109
<KeyboardShortcutModal />
107110
</Overlay>
108111
)}
112+
{fundraiserContentVisible && (
113+
<Overlay
114+
title={t('Fundraiser.Title')}
115+
ariaLabel={t('Fundraiser.Title')}
116+
closeOverlay={() => dispatch(closeFundraiserModal())}
117+
>
118+
<FundraiserModal />
119+
</Overlay>
120+
)}
109121
{errorType && (
110122
<Overlay
111123
title={t('Common.Error')}

‎client/modules/IDE/reducers/ide.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ const initialState = {
1515
shareModalProjectName: 'My Cute Sketch',
1616
shareModalProjectUsername: 'p5_user',
1717
keyboardShortcutVisible: false,
18+
fundraiserContentVisible: false,
1819
unsavedChanges: false,
1920
infiniteLoop: false,
2021
previewIsRefreshing: false,
@@ -85,6 +86,10 @@ const ide = (state = initialState, action) => {
8586
return Object.assign({}, state, { keyboardShortcutVisible: true });
8687
case ActionTypes.CLOSE_KEYBOARD_SHORTCUT_MODAL:
8788
return Object.assign({}, state, { keyboardShortcutVisible: false });
89+
case ActionTypes.SHOW_FUNDRAISER_MODAL:
90+
return Object.assign({}, state, { fundraiserContentVisible: true });
91+
case ActionTypes.CLOSE_FUNDRAISER_MODAL:
92+
return Object.assign({}, state, { fundraiserContentVisible: false });
8893
case ActionTypes.SET_UNSAVED_CHANGES:
8994
return Object.assign({}, state, { unsavedChanges: action.value });
9095
case ActionTypes.DETECT_INFINITE_LOOPS:

0 commit comments

Comments
 (0)