From 52addc77031230f2a2853758d06abcdb3b4813dd Mon Sep 17 00:00:00 2001 From: Kent Brockman Date: Sun, 10 Jul 2022 09:02:22 -0600 Subject: [PATCH 1/8] convert invite buttons on class page to dropdown --- webclient/src/Classes.js | 36 ++++++++++++++++++++++++++++++++++-- 1 file changed, 34 insertions(+), 2 deletions(-) diff --git a/webclient/src/Classes.js b/webclient/src/Classes.js index d38b0ba..7ecafc7 100644 --- a/webclient/src/Classes.js +++ b/webclient/src/Classes.js @@ -450,8 +450,40 @@ export function ICalButtons(props) { }); }; + const addToGoogleCalendar = (e) => { + e.preventDefault(); + // TODO: fill in URL from clazz properties + window.location = 'https://www.google.com/calendar/render?action=TEMPLATE&text=Title&dates=20190227/20190228' + }; + + const options = [ + { key: 'email', icon: 'mail outline', text: 'Email ICS Event', value: 'email' }, + { key: 'download', icon: 'download', text: 'Download ICS Event', value: 'download' }, + { key: 'google', icon: 'google', text: 'Add to Google Calendar', value: 'google' }, + ]; + + let selectedOption = options[0]; + + const onClick = (e, data) => { + selectedOption = options.filter(x => x.value === data.value)[0]; + console.log(selectedOption); + // TODO set state here + // setState({selectedOption: selectedOption}); + // TODO: change the Button onClick handler...based on selected option? + }; + return ( - <> + + + } + /> + + /*<> @@ -463,7 +495,7 @@ export function ICalButtons(props) { } {error && Error.} - + */ ); }; From 26f35a5aa968b062959b5098b5ae3cad1838e5cb Mon Sep 17 00:00:00 2001 From: Kent Brockman Date: Sun, 10 Jul 2022 11:07:30 -0600 Subject: [PATCH 2/8] hook together bits --- webclient/src/Classes.js | 26 ++++++++++++++------------ 1 file changed, 14 insertions(+), 12 deletions(-) diff --git a/webclient/src/Classes.js b/webclient/src/Classes.js index 7ecafc7..e3e876f 100644 --- a/webclient/src/Classes.js +++ b/webclient/src/Classes.js @@ -453,28 +453,29 @@ export function ICalButtons(props) { const addToGoogleCalendar = (e) => { e.preventDefault(); // TODO: fill in URL from clazz properties - window.location = 'https://www.google.com/calendar/render?action=TEMPLATE&text=Title&dates=20190227/20190228' + window.open('https://www.google.com/calendar/render?action=TEMPLATE&text=Title&dates=20190227/20190228', '_blank'); }; const options = [ - { key: 'email', icon: 'mail outline', text: 'Email ICS Event', value: 'email' }, - { key: 'download', icon: 'download', text: 'Download ICS Event', value: 'download' }, - { key: 'google', icon: 'google', text: 'Add to Google Calendar', value: 'google' }, + { key: 'email', icon: 'mail outline', text: 'Email ICS Event', value: 'email', action: handleEmail }, + { key: 'download', icon: 'download', text: 'Download ICS Event', value: 'download', action: handleDownload }, + { key: 'google', icon: 'google', text: 'Add to Google Calendar', value: 'google', action: addToGoogleCalendar }, ]; - - let selectedOption = options[0]; + // TODO: get default option from local storage or default to 0 + const [selectedOption, setOption] = useState(options[0]); const onClick = (e, data) => { - selectedOption = options.filter(x => x.value === data.value)[0]; - console.log(selectedOption); - // TODO set state here - // setState({selectedOption: selectedOption}); - // TODO: change the Button onClick handler...based on selected option? + let newOption = options.filter(x => x.value === data.value)[0]; + setOption(newOption); }; return ( - + } /> + // TODO: reimplement success prompt /*<> - } - /> - - // TODO: reimplement success prompt - /*<> - - {success ? -   Sent! - : - - } - {error && Error.} - */ + } + /> + + } + ); }; From c6d065b607ea9dcf2ea8d1535e4bd29d47e69834 Mon Sep 17 00:00:00 2001 From: Tanner Collin Date: Mon, 11 Jul 2022 07:31:33 +0000 Subject: [PATCH 4/8] Formatting --- webclient/src/Classes.js | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/webclient/src/Classes.js b/webclient/src/Classes.js index 480a3eb..d3f30a3 100644 --- a/webclient/src/Classes.js +++ b/webclient/src/Classes.js @@ -473,7 +473,9 @@ export function ICalButtons(props) { const pref = 'calendarPreference'; let defaultSelection = options[0]; let savedPreference = localStorage.getItem(pref); - if (savedPreference != null) defaultSelection = options.filter(x => x.value === savedPreference)[0]; + if (savedPreference != null) { + defaultSelection = options.filter(x => x.value === savedPreference)[0]; + } const [selectedOption, setOption] = useState(defaultSelection); @@ -493,8 +495,9 @@ export function ICalButtons(props) { Date: Mon, 11 Jul 2022 07:33:52 +0000 Subject: [PATCH 5/8] Make class invite button text shorter This fixes horizontal scrolling on mobile --- webclient/src/Classes.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/webclient/src/Classes.js b/webclient/src/Classes.js index d3f30a3..655ffa5 100644 --- a/webclient/src/Classes.js +++ b/webclient/src/Classes.js @@ -464,9 +464,9 @@ export function ICalButtons(props) { }; const options = [ - { key: 'email', icon: 'mail outline', text: 'Email ICS Event', value: 'email', action: handleEmail }, - { key: 'download', icon: 'download', text: 'Download ICS Event', value: 'download', action: handleDownload }, - { key: 'google', icon: 'google', text: 'Add to Google Calendar', value: 'google', action: addToGoogleCalendar }, + { key: 'email', icon: 'mail outline', text: 'Email ICS Event', value: 'Email', action: handleEmail }, + { key: 'download', icon: 'download', text: 'Download ICS Event', value: 'Download', action: handleDownload }, + { key: 'google', icon: 'google', text: 'Add to Google Calendar', value: 'Google', action: addToGoogleCalendar }, ]; // get default option from local storage or default to first item in options list @@ -497,7 +497,7 @@ export function ICalButtons(props) { loading={loading} onClick={selectedOption.action} > - {selectedOption.text} + {selectedOption.value} Date: Mon, 11 Jul 2022 07:53:16 +0000 Subject: [PATCH 6/8] Simplify class invite dropdown code --- webclient/src/Classes.js | 18 +++++++----------- 1 file changed, 7 insertions(+), 11 deletions(-) diff --git a/webclient/src/Classes.js b/webclient/src/Classes.js index 655ffa5..a4ef8cf 100644 --- a/webclient/src/Classes.js +++ b/webclient/src/Classes.js @@ -470,21 +470,17 @@ export function ICalButtons(props) { ]; // get default option from local storage or default to first item in options list - const pref = 'calendarPreference'; - let defaultSelection = options[0]; - let savedPreference = localStorage.getItem(pref); - if (savedPreference != null) { - defaultSelection = options.filter(x => x.value === savedPreference)[0]; - } + const calendarValue = localStorage.getItem('calendarPreference') || 'Email'; + const defaultOption = options.find(x => x.value === calendarValue); - const [selectedOption, setOption] = useState(defaultSelection); + const [selectedOption, setOption] = useState(defaultOption); - const onClick = (e, data) => { - let newOption = options.filter(x => x.value === data.value)[0]; + const onChange = (e, data) => { + const newOption = options.find(x => x.value === data.value); setOption(newOption); // set the option as users preference - localStorage.setItem(pref, newOption.value); + localStorage.setItem('calendarPreference', newOption.value); }; return ( @@ -502,7 +498,7 @@ export function ICalButtons(props) { } /> From 4ee8fd4f1601f0a834612e5fbf224d4e0834335c Mon Sep 17 00:00:00 2001 From: Tanner Collin Date: Mon, 11 Jul 2022 08:09:37 +0000 Subject: [PATCH 7/8] Don't change class invite dropdown on blur --- webclient/src/Classes.js | 1 + 1 file changed, 1 insertion(+) diff --git a/webclient/src/Classes.js b/webclient/src/Classes.js index a4ef8cf..0c1e79a 100644 --- a/webclient/src/Classes.js +++ b/webclient/src/Classes.js @@ -501,6 +501,7 @@ export function ICalButtons(props) { onChange={onChange} options={options} trigger={<>} + selectOnBlur={false} /> } From d380b343364e716cb0fb03b0f5ea12858a501797 Mon Sep 17 00:00:00 2001 From: Tanner Collin Date: Mon, 11 Jul 2022 08:12:05 +0000 Subject: [PATCH 8/8] Make class invite dropdown button more obvious --- webclient/src/light.css | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/webclient/src/light.css b/webclient/src/light.css index 2c96d2b..63e1c86 100644 --- a/webclient/src/light.css +++ b/webclient/src/light.css @@ -99,6 +99,12 @@ body { padding-top: 1rem; } +.ui.floating.dropdown.button.icon { + border-left: 1px; + border-left-color: #c0c1c2; + border-left-style: solid; +} + .attendance-row { margin-top: 1rem; }