Skip to content

Commit 0e6ae42

Browse files
umangutkarshumangutkarsh
authored
Merge branch 'develop' into fix/processing#2703-DropDown-closing-issue
2 parents 4dce86d + e23bbfb commit 0e6ae42

File tree

18 files changed

+1244
-5
lines changed

18 files changed

+1244
-5
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:

‎client/styles/abstracts/_variables.scss

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,10 @@ $themes: (
5050
button-nav-inactive-color: $middle-gray,
5151
button-hover-color: $lightest,
5252
button-active-color: $lightest,
53+
fundraiser-button-nav-color: $p5js-pink,
54+
fundraiser-button-background-color: $p5js-pink,
55+
fundraiser-button-color: $white,
56+
fundraiser-button-hover-active-color: $medium-dark,
5357
modal-background-color: $light,
5458
preferences-button-background-color: $medium-light,
5559
modal-border-color: $middle-light,
@@ -164,6 +168,9 @@ $themes: (
164168
editor-gutter-color: $darker,
165169
file-hover-color: $dark,
166170
file-selected-color: $medium-dark,
171+
fundraiser-button-background-color: $p5js-pink,
172+
fundraiser-button-color: $white,
173+
fundraiser-button-hover-active-color: $medium-dark,
167174
input-text-color: $lightest,
168175
input-background-color: $dark,
169176
input-secondary-background-color: $medium-dark,
@@ -258,6 +265,9 @@ $themes: (
258265
editor-gutter-color: $darker,
259266
file-hover-color: $dark,
260267
file-selected-color: $medium-dark,
268+
fundraiser-button-background-color: $yellow,
269+
fundraiser-button-color: $dark,
270+
fundraiser-button-hover-active-color: $medium-light,
261271
input-text-color: $lightest,
262272
input-background-color: $dark,
263273
input-secondary-background-color: $medium-dark,

‎client/styles/components/_fundraiser.scss

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
.fundraiser {
2+
padding: #{20 / $base-font-size}rem;
3+
margin-right: #{20 / $base-font-size}rem;
4+
padding-bottom: #{40 / $base-font-size}rem;
5+
width: #{500 / $base-font-size}rem;
6+
text-align: center;
7+
overflow-y: auto;
8+
}
9+
10+
.fundraiser__CTA {
11+
font-size: #{23 / $base-font-size}rem;
12+
font-weight: bold;
13+
margin-top: #{10 / $base-font-size}rem;
14+
padding: #{20 / $base-font-size}rem;
15+
border-radius: #{35 / $base-font-size}rem;
16+
17+
@include themify() {
18+
color: getThemifyVariable('fundraiser-button-color');
19+
background-color: getThemifyVariable('fundraiser-button-background-color');
20+
}
21+
22+
&:hover,
23+
&:focus {
24+
@include themify() {
25+
color: getThemifyVariable('fundraiser-button-color');
26+
background-color: getThemifyVariable('fundraiser-button-hover-active-color');
27+
}
28+
}
29+
}
30+
31+
.fundraiser__description {
32+
margin: #{20 / $base-font-size}rem 0;
33+
font-size: #{20 / $base-font-size}rem;
34+
}
35+
36+
.fundraiser__img-container {
37+
display: flex;
38+
justify-content: center;
39+
margin: #{40 / $base-font-size}rem 0 #{55 / $base-font-size}rem 0;
40+
}
41+
42+
.fundraiser__logo-p5 {
43+
margin: 0 #{15 / $base-font-size}rem 0 #{30 / $base-font-size}rem;
44+
width:#{150 / $base-font-size}rem;
45+
height:#{150 / $base-font-size}rem;
46+
}
47+
48+
.fundraiser__logo-PF {
49+
margin-left: #{20 / $base-font-size}rem;
50+
padding-bottom: #{15 / $base-font-size}rem;
51+
width:#{250 / $base-font-size}rem;
52+
height:#{150 / $base-font-size}rem;
53+
}

‎client/styles/components/_nav.scss

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,15 @@
2323
align-items: center;
2424
}
2525

26+
.nav__fundraiser-btn {
27+
font-weight: bold;
28+
font-size: #{14 / $base-font-size}rem;
29+
@include themify() {
30+
color: getThemifyVariable('fundraiser-button-nav-color');
31+
}
32+
}
33+
34+
2635
.preview-nav__editor-svg {
2736
@include icon();
2837
}

‎client/styles/main.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,7 @@
4343
@import 'components/asset-list';
4444
@import 'components/asset-size';
4545
@import 'components/keyboard-shortcuts';
46+
@import 'components/fundraiser';
4647
@import 'components/copyable-input';
4748
@import 'components/feedback';
4849
@import 'components/console-input';

‎client/testData/testReduxStore.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@ const initialTestState = {
3535
shareModalProjectName: 'My Cute Sketch',
3636
shareModalProjectUsername: 'p5_user',
3737
keyboardShortcutVisible: false,
38+
fundraiserContentVisible: false,
3839
unsavedChanges: false,
3940
infiniteLoop: false,
4041
previewIsRefreshing: false,

‎package-lock.json

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)