diff --git a/newdle/client/src/components/ParticipantGrid.js b/newdle/client/src/components/ParticipantGrid.js index 2603e579..5033a416 100644 --- a/newdle/client/src/components/ParticipantGrid.js +++ b/newdle/client/src/components/ParticipantGrid.js @@ -10,6 +10,7 @@ import { getNewdleTimeslots, getNewdleTimezone, } from '../selectors'; +import CheckmarkParenIcon from './answer/CheckmarkParenIcon'; import {NameCell, TableHeader, TableFooter} from './GridCommon'; import styles from './GridCommon.module.scss'; @@ -27,17 +28,28 @@ function SummaryCell({ const status = participant.answers[timeslot]; const positive = status === 'available'; const negative = status === 'unavailable'; + const warning = status === 'ifneedbe'; const statusColors = {available: 'green', ifneedbe: 'yellow', unavailable: 'red'}; let content = null; if ((!limitedSlots && status) || (limitedSlots && positive)) { - content = ( - - ); + if (status === 'ifneedbe') { + content = ( + + ); + } else { + content = ( + + ); + } } else if (!status && hasAnswered) { content = ( ( -
- - {name} -

{comment}

-
- ); + const renderName = ({name, comment, status, id}) => { + const badgeStyle = styles[`status-badge--${status}`]; + return ( +
+ + {status === 'ifneedbe' ? ( + + ) : ( + + )} + + {name} +

{comment}

+
+ ); + }; // allow to exceed max by 1 since the "show +1" button takes the same space // as actually showing the participant name diff --git a/newdle/client/src/components/ParticipantTable.module.scss b/newdle/client/src/components/ParticipantTable.module.scss index 74c72f51..876c25df 100644 --- a/newdle/client/src/components/ParticipantTable.module.scss +++ b/newdle/client/src/components/ParticipantTable.module.scss @@ -117,3 +117,39 @@ color: gray; flex-basis: 100%; } + +.status-badge { + display: inline-flex; + align-items: center; + justify-content: center; + width: 18px; + height: 18px; + border-radius: 50%; + margin-right: 0.4rem; + flex-shrink: 0; + color: #fff; + + > :global(.icon) { + margin: 0 !important; + font-size: 0.7rem !important; + line-height: 1 !important; + height: auto !important; + width: auto !important; + } + + :global(.checkmark-paren-icon) { + display: block; + } +} + +.status-badge--available { + background-color: #21ba45; +} + +.status-badge--ifneedbe { + background-color: #fdc500; +} + +.status-badge--unavailable { + background-color: #db2828; +} diff --git a/newdle/client/src/components/answer/AnswerGrid.js b/newdle/client/src/components/answer/AnswerGrid.js index 6fc6b72c..79c36be9 100644 --- a/newdle/client/src/components/answer/AnswerGrid.js +++ b/newdle/client/src/components/answer/AnswerGrid.js @@ -17,6 +17,7 @@ import { import {getNewdleParticipants} from '../../selectors'; import {toMoment} from '../../util/date'; import {NameCell, TableHeader, TableFooter} from '../GridCommon'; +import CheckmarkParenIcon from './CheckmarkParenIcon'; import styles from '../GridCommon.module.scss'; /** @@ -79,6 +80,7 @@ function AnswerCell({ const status = participant.answers[timeslot]; const positive = status === 'available'; const negative = status === 'unavailable'; + const warning = status === 'ifneedbe'; let busyPositions = []; if (!unknown && hasBusyTimes) { @@ -90,13 +92,23 @@ function AnswerCell({ let content = null; if (!limitedSlots && status) { - content = ( - - ); + if (status === 'ifneedbe') { + content = ( + + ); + } else { + content = ( + + ); + } } else if (limitedSlots) { if (positive) { content = ; @@ -132,6 +144,7 @@ function AnswerCell({ setAnswer(slot, limitedSlots ? 'unavailable' : 'ifneedbe'), className: styles.available, }; } else if (answer === 'ifneedbe') { return { - icon: 'check square outline', + icon: '~', + label: t`IF NEEDED`, action: () => setAnswer(slot, 'unavailable'), className: styles.ifneedbe, }; } else { return { - icon: 'window close outline', + icon: 'times', + label: t`NO`, action: () => setAnswer(slot, 'available'), className: styles.unavailable, }; diff --git a/newdle/client/src/components/answer/CheckmarkParenIcon.jsx b/newdle/client/src/components/answer/CheckmarkParenIcon.jsx new file mode 100644 index 00000000..1e9bccbf --- /dev/null +++ b/newdle/client/src/components/answer/CheckmarkParenIcon.jsx @@ -0,0 +1,65 @@ +import React from 'react'; +import PropTypes from 'prop-types'; + +const SIZE_MAP = { + mini: 10, + tiny: 12, + small: 14, + medium: 18, + large: 24, + big: 30, + huge: 40, + massive: 52, +}; + +export default function CheckmarkParenIcon({ + size = 'medium', + color = 'currentColor', + style = {}, + className = '', + ...rest +}) { + const px = typeof size === 'number' ? size : SIZE_MAP[size] ?? SIZE_MAP.medium; + + const sw = 15; // stroke width + + return ( + + ); +} + +CheckmarkParenIcon.propTypes = { + size: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), + color: PropTypes.string, + style: PropTypes.object, + className: PropTypes.string, +}; + +CheckmarkParenIcon.defaultProps = { + size: 'medium', + color: 'currentColor', + style: {}, + className: '', +}; diff --git a/newdle/client/src/components/answer/Option.js b/newdle/client/src/components/answer/Option.js index f11c0304..ad701574 100644 --- a/newdle/client/src/components/answer/Option.js +++ b/newdle/client/src/components/answer/Option.js @@ -2,6 +2,7 @@ import React from 'react'; import {useDispatch} from 'react-redux'; import PropTypes from 'prop-types'; import {Icon} from 'semantic-ui-react'; +import CheckmarkParenIcon from './CheckmarkParenIcon'; import styles from './answer.module.scss'; export default function Option({ @@ -10,21 +11,36 @@ export default function Option({ icon, action, className, + label, taken, styles: moreStyles, }) { const dispatch = useDispatch(); + let iconEl; + if (taken) { + iconEl = ; + } else if (icon === '~') { + iconEl = ; + } else if (icon === 'check') { + iconEl = ; + } else { + iconEl = ; + } + return (
dispatch(action())} style={{...moreStyles, cursor: taken ? 'inherit' : 'pointer'}} > - - {startTime} - {endTime} + + {iconEl} + + {startTime} - {endTime} + - + {label && !taken && {label}}
); } @@ -35,11 +51,13 @@ Option.propTypes = { action: PropTypes.func, className: PropTypes.string, icon: PropTypes.string.isRequired, + label: PropTypes.string, styles: PropTypes.object, taken: PropTypes.bool.isRequired, }; Option.defaultProps = { onClick: null, + label: undefined, styles: {}, }; diff --git a/newdle/client/src/components/answer/answer.module.scss b/newdle/client/src/components/answer/answer.module.scss index 7bf02a98..29ec6ede 100644 --- a/newdle/client/src/components/answer/answer.module.scss +++ b/newdle/client/src/components/answer/answer.module.scss @@ -116,20 +116,20 @@ } &.unavailable { - color: $don-juan; - background-color: #d9d9d9; - border: 1px solid rgba($grey, 0.5); + color: $burgundy; + background-color: #ffd1d1; + border: 1px solid rgba($coral, 0.8); &:global(.overlapping):not(.taken):hover { - background-color: rgba($grey, 0.9); - color: $light-grey; + background-color: rgba($coral, 0.5); + color: $burgundy; } } &.available { color: $dark-green; background-color: #b0f9b6; - border: 1px solid rgba($dark-green, 0.3); + border: 1px solid rgba($dark-green, 0.6); &:global(.overlapping):hover { background-color: rgba($green, 0.9); @@ -139,7 +139,7 @@ &.ifneedbe { color: $dark-yellow; background-color: #fcf4b5; - border: 1px solid rgba($dark-yellow, 0.3); + border: 1px dashed rgba($dark-yellow, 0.7); &:global(.overlapping):hover { background-color: rgba($yellow, 0.9); @@ -165,14 +165,37 @@ user-select: none; align-items: center; - span { + .time-info { + display: flex; + align-items: center; + gap: 4px; + overflow: hidden; + min-width: 0; + white-space: nowrap; + } + + .times { overflow: hidden; - white-space: pre; text-overflow: ellipsis; } - i:global(.icon) { + .label { + font-size: 0.7em; + font-weight: bold; + white-space: nowrap; + flex-shrink: 0; + margin-left: 4px; + } + + .icon-char { + font-weight: bold; + flex-shrink: 0; + } + + i:global(.icon), + :global(.checkmark-paren-icon) { height: initial; + flex-shrink: 0; } } } @@ -198,8 +221,8 @@ user-select: none; &.unavailable { - background-color: #d9d9d9; - color: $don-juan; + background-color: #ffd1d1; + color: $burgundy; } &.available { @@ -351,3 +374,10 @@ :global(.ui.segment.top) + .timezone-box { margin-top: 1rem; } +.icon-ifneedbe { + color: #fbbd08; +} + +.icon-check { + color: rgb(0, 172, 70); +} diff --git a/newdle/client/src/locales/de/messages.po b/newdle/client/src/locales/de/messages.po index d02f1a76..a2cf87b4 100644 --- a/newdle/client/src/locales/de/messages.po +++ b/newdle/client/src/locales/de/messages.po @@ -243,6 +243,10 @@ msgstr "Gehen Sie zur Zusammenfassung dieses newdles!" msgid "How does it work?" msgstr "Wie funktioniert es?" +#: src/components/answer/Calendar.js +msgid "IF NEEDED" +msgstr "" + #: src/components/answer/AnswerPage.js msgid "It is not possible to answer this newdle anymore." msgstr "Auf dieses newdle kann nicht mehr geantwortet werden." @@ -315,6 +319,10 @@ msgstr "Fehlende Suchkriterien" msgid "My newdles" msgstr "Meine newdles" +#: src/components/answer/Calendar.js +msgid "NO" +msgstr "" + #: src/components/creation/userSearch/UserSearchForm.js msgid "Name" msgstr "Name" @@ -408,6 +416,10 @@ msgstr "Bitte geben Sie Ihren Namen ein …" msgid "Please log in again to confirm your identity" msgstr "Bitte melden Sie sich erneut an, um Ihre Identität zu bestätigen" +#: src/components/summary/SummaryPage.js +msgid "Reopen" +msgstr "" + #: src/components/creation/timeslots/Timeline.js msgid "Revert to the local timezone" msgstr "" @@ -557,6 +569,10 @@ msgstr "Willkommen bei newdle!" msgid "Who are you?" msgstr "Wer sind Sie?" +#: src/components/answer/Calendar.js +msgid "YES" +msgstr "" + #: src/components/NewdlesParticipating.js msgid "You are not part of any newdles yet." msgstr "Sie sind noch nicht Teil eines newdles." diff --git a/newdle/client/src/locales/eo/messages.po b/newdle/client/src/locales/eo/messages.po index f70eb02d..327567c8 100644 --- a/newdle/client/src/locales/eo/messages.po +++ b/newdle/client/src/locales/eo/messages.po @@ -245,6 +245,10 @@ msgstr "Iri al resumo de newdle!" msgid "How does it work?" msgstr "Kiel ĝi funkcias?" +#: src/components/answer/Calendar.js +msgid "IF NEEDED" +msgstr "" + #: src/components/answer/AnswerPage.js msgid "It is not possible to answer this newdle anymore." msgstr "Ne plu eblas respondi ĉi tiun newdle." @@ -317,6 +321,10 @@ msgstr "Mankas serĉaj kriterioj" msgid "My newdles" msgstr "Miaj newdle-oj" +#: src/components/answer/Calendar.js +msgid "NO" +msgstr "" + #: src/components/creation/userSearch/UserSearchForm.js msgid "Name" msgstr "Nomo" @@ -410,6 +418,10 @@ msgstr "Bonvolu tajpi vian nomon…" msgid "Please log in again to confirm your identity" msgstr "Bonvolu reensaluti por konfirmi vian identecon" +#: src/components/summary/SummaryPage.js +msgid "Reopen" +msgstr "" + #: src/components/creation/timeslots/Timeline.js msgid "Revert to the local timezone" msgstr "" @@ -559,6 +571,10 @@ msgstr "Bonvenon al newdle!" msgid "Who are you?" msgstr "Kiu vi estas?" +#: src/components/answer/Calendar.js +msgid "YES" +msgstr "" + #: src/components/NewdlesParticipating.js msgid "You are not part of any newdles yet." msgstr "Vi ankoraŭ ne partoprenas en ajna newdle." diff --git a/newdle/client/src/locales/es/messages.po b/newdle/client/src/locales/es/messages.po index f20cc145..f9f04585 100644 --- a/newdle/client/src/locales/es/messages.po +++ b/newdle/client/src/locales/es/messages.po @@ -245,6 +245,10 @@ msgstr "¡Ir al resumen del newdle!" msgid "How does it work?" msgstr "¿Cómo funciona?" +#: src/components/answer/Calendar.js +msgid "IF NEEDED" +msgstr "SI NECESARIO" + #: src/components/answer/AnswerPage.js msgid "It is not possible to answer this newdle anymore." msgstr "Ya no es posible responder a este newdle." @@ -317,6 +321,10 @@ msgstr "Faltan criterios de búsqueda" msgid "My newdles" msgstr "Mis newdles" +#: src/components/answer/Calendar.js +msgid "NO" +msgstr "NO" + #: src/components/creation/userSearch/UserSearchForm.js msgid "Name" msgstr "Nombre" @@ -410,6 +418,10 @@ msgstr "Introduzca su nombre..." msgid "Please log in again to confirm your identity" msgstr "Vuelva a iniciar sesión para confirmar su identidad" +#: src/components/summary/SummaryPage.js +msgid "Reopen" +msgstr "Reabrir" + #: src/components/creation/timeslots/Timeline.js msgid "Revert to the local timezone" msgstr "" @@ -559,6 +571,10 @@ msgstr "¡Le damos la bienvenida a newdle!" msgid "Who are you?" msgstr "¿Quién es usted?" +#: src/components/answer/Calendar.js +msgid "YES" +msgstr "SI" + #: src/components/NewdlesParticipating.js msgid "You are not part of any newdles yet." msgstr "Aún no es parte de ningún newdle." diff --git a/newdle/client/src/locales/fr/messages.po b/newdle/client/src/locales/fr/messages.po index 0e43a31a..ac48f59d 100644 --- a/newdle/client/src/locales/fr/messages.po +++ b/newdle/client/src/locales/fr/messages.po @@ -243,6 +243,10 @@ msgstr "Aller au résumé du newdle !" msgid "How does it work?" msgstr "Comment ça marche ?" +#: src/components/answer/Calendar.js +msgid "IF NEEDED" +msgstr "" + #: src/components/answer/AnswerPage.js msgid "It is not possible to answer this newdle anymore." msgstr "Il n'est plus possible de répondre à ce newdle." @@ -315,6 +319,10 @@ msgstr "Critère de recherche manquant" msgid "My newdles" msgstr "Mes newdles" +#: src/components/answer/Calendar.js +msgid "NO" +msgstr "" + #: src/components/creation/userSearch/UserSearchForm.js msgid "Name" msgstr "Nom" @@ -408,6 +416,10 @@ msgstr "Veuillez entrer votre nom…" msgid "Please log in again to confirm your identity" msgstr "Veuillez vous identifier de nouveau pour confirmer votre identité" +#: src/components/summary/SummaryPage.js +msgid "Reopen" +msgstr "" + #: src/components/creation/timeslots/Timeline.js msgid "Revert to the local timezone" msgstr "Utiliser le fuseau horaire local" @@ -557,6 +569,10 @@ msgstr "Bienvenue dans newdle !" msgid "Who are you?" msgstr "Qui êtes-vous ?" +#: src/components/answer/Calendar.js +msgid "YES" +msgstr "" + #: src/components/NewdlesParticipating.js msgid "You are not part of any newdles yet." msgstr "Vous ne participez à aucun newdle." diff --git a/newdle/client/src/locales/he/messages.po b/newdle/client/src/locales/he/messages.po index d1d0bd9c..c794f628 100644 --- a/newdle/client/src/locales/he/messages.po +++ b/newdle/client/src/locales/he/messages.po @@ -245,6 +245,10 @@ msgstr "מעבר לתקציר ה־newdle!" msgid "How does it work?" msgstr "איך זה עובד?" +#: src/components/answer/Calendar.js +msgid "IF NEEDED" +msgstr "" + #: src/components/answer/AnswerPage.js msgid "It is not possible to answer this newdle anymore." msgstr "אי אפשר לענות יותר על ה־newdle הזה." @@ -317,6 +321,10 @@ msgstr "חסר תנאי חיפוש" msgid "My newdles" msgstr "ה־newdleים שלי" +#: src/components/answer/Calendar.js +msgid "NO" +msgstr "" + #: src/components/creation/userSearch/UserSearchForm.js msgid "Name" msgstr "שם" @@ -410,6 +418,10 @@ msgstr "נא למלא את השם שלך…" msgid "Please log in again to confirm your identity" msgstr "נא להיכנס שוב כדי לאמת את הזהות שלך" +#: src/components/summary/SummaryPage.js +msgid "Reopen" +msgstr "" + #: src/components/creation/timeslots/Timeline.js msgid "Revert to the local timezone" msgstr "" @@ -559,6 +571,10 @@ msgstr "ברוך בואך ל־newdle!" msgid "Who are you?" msgstr "עם מי יש לי הכבוד?" +#: src/components/answer/Calendar.js +msgid "YES" +msgstr "" + #: src/components/NewdlesParticipating.js msgid "You are not part of any newdles yet." msgstr "עוד לא השתתפת באף newdle." diff --git a/newdle/client/src/locales/id/messages.po b/newdle/client/src/locales/id/messages.po index f99b8c05..c53ebdc9 100644 --- a/newdle/client/src/locales/id/messages.po +++ b/newdle/client/src/locales/id/messages.po @@ -245,6 +245,10 @@ msgstr "Buka ringkasan newdle!" msgid "How does it work?" msgstr "Bagaimana ini bekerja?" +#: src/components/answer/Calendar.js +msgid "IF NEEDED" +msgstr "" + #: src/components/answer/AnswerPage.js msgid "It is not possible to answer this newdle anymore." msgstr "Tidak bisa menjawab newdle ini lagi." @@ -317,6 +321,10 @@ msgstr "Kriteria pencarian yang hilang" msgid "My newdles" msgstr "Newdle saya" +#: src/components/answer/Calendar.js +msgid "NO" +msgstr "" + #: src/components/creation/userSearch/UserSearchForm.js msgid "Name" msgstr "Nama" @@ -410,6 +418,10 @@ msgstr "Mohon ketik nama Anda..." msgid "Please log in again to confirm your identity" msgstr "Mohon masuk kembali untuk mengonfirmasi identitas Anda" +#: src/components/summary/SummaryPage.js +msgid "Reopen" +msgstr "" + #: src/components/creation/timeslots/Timeline.js msgid "Revert to the local timezone" msgstr "" @@ -559,6 +571,10 @@ msgstr "Selamat datang di newdle!" msgid "Who are you?" msgstr "Siapa Anda?" +#: src/components/answer/Calendar.js +msgid "YES" +msgstr "" + #: src/components/NewdlesParticipating.js msgid "You are not part of any newdles yet." msgstr "" diff --git a/newdle/client/src/locales/it/messages.po b/newdle/client/src/locales/it/messages.po index 16928dda..6fa4d237 100644 --- a/newdle/client/src/locales/it/messages.po +++ b/newdle/client/src/locales/it/messages.po @@ -243,6 +243,10 @@ msgstr "Vai al riepilogo del newdle!" msgid "How does it work?" msgstr "Come funziona?" +#: src/components/answer/Calendar.js +msgid "IF NEEDED" +msgstr "" + #: src/components/answer/AnswerPage.js msgid "It is not possible to answer this newdle anymore." msgstr "Non è più possibile rispondere a questo newdle." @@ -315,6 +319,10 @@ msgstr "Criteri di ricerca mancanti" msgid "My newdles" msgstr "I miei newdle" +#: src/components/answer/Calendar.js +msgid "NO" +msgstr "" + #: src/components/creation/userSearch/UserSearchForm.js msgid "Name" msgstr "Nome" @@ -408,6 +416,10 @@ msgstr "Inserisci il tuo nome…" msgid "Please log in again to confirm your identity" msgstr "Accedi di nuovo per confermare la tua identità" +#: src/components/summary/SummaryPage.js +msgid "Reopen" +msgstr "" + #: src/components/creation/timeslots/Timeline.js msgid "Revert to the local timezone" msgstr "Torna al fuso orario locale" @@ -557,6 +569,10 @@ msgstr "Benvenuti su newdle!" msgid "Who are you?" msgstr "Chi sei?" +#: src/components/answer/Calendar.js +msgid "YES" +msgstr "" + #: src/components/NewdlesParticipating.js msgid "You are not part of any newdles yet." msgstr "Non fai ancora parte di nessun newdle." diff --git a/newdle/client/src/locales/nb_NO/messages.po b/newdle/client/src/locales/nb_NO/messages.po index 8464264e..bac59af7 100644 --- a/newdle/client/src/locales/nb_NO/messages.po +++ b/newdle/client/src/locales/nb_NO/messages.po @@ -245,6 +245,10 @@ msgstr "Gå til newdle-sammendrag." msgid "How does it work?" msgstr "Hvordan virker det?" +#: src/components/answer/Calendar.js +msgid "IF NEEDED" +msgstr "" + #: src/components/answer/AnswerPage.js msgid "It is not possible to answer this newdle anymore." msgstr "Det er ikke mulig å besvare denne newdle-en lenger." @@ -317,6 +321,10 @@ msgstr "Manglende søkekriterium" msgid "My newdles" msgstr "Mine newdle-er" +#: src/components/answer/Calendar.js +msgid "NO" +msgstr "" + #: src/components/creation/userSearch/UserSearchForm.js msgid "Name" msgstr "Navn" @@ -410,6 +418,10 @@ msgstr "Skriv inn navnet ditt…" msgid "Please log in again to confirm your identity" msgstr "Logg inn igjen for å bekrefte din identitet" +#: src/components/summary/SummaryPage.js +msgid "Reopen" +msgstr "" + #: src/components/creation/timeslots/Timeline.js msgid "Revert to the local timezone" msgstr "" @@ -559,6 +571,10 @@ msgstr "Velkommen ti newdle." msgid "Who are you?" msgstr "Hvem er du?" +#: src/components/answer/Calendar.js +msgid "YES" +msgstr "" + #: src/components/NewdlesParticipating.js msgid "You are not part of any newdles yet." msgstr "Du er ikke del av noen newdle-er enda." diff --git a/newdle/client/src/locales/ta/messages.po b/newdle/client/src/locales/ta/messages.po index 56e1755d..737888bd 100644 --- a/newdle/client/src/locales/ta/messages.po +++ b/newdle/client/src/locales/ta/messages.po @@ -245,6 +245,10 @@ msgstr "புதிய சுருக்கத்திற்குச் ச msgid "How does it work?" msgstr "இது எவ்வாறு செயல்படுகிறது?" +#: src/components/answer/Calendar.js +msgid "IF NEEDED" +msgstr "" + #: src/components/answer/AnswerPage.js msgid "It is not possible to answer this newdle anymore." msgstr "இந்த நியமனத்திற்கு இனி பதிலளிக்க முடியாது." @@ -317,6 +321,10 @@ msgstr "தேடல் அளவுகோல்களைக் காணவி msgid "My newdles" msgstr "எனது புதியவர்கள்" +#: src/components/answer/Calendar.js +msgid "NO" +msgstr "" + #: src/components/creation/userSearch/UserSearchForm.js msgid "Name" msgstr "பெயர்" @@ -410,6 +418,10 @@ msgstr "தயவுசெய்து உங்கள் பெயரை உள msgid "Please log in again to confirm your identity" msgstr "உங்கள் அடையாளத்தை உறுதிப்படுத்த மீண்டும் உள்நுழைக" +#: src/components/summary/SummaryPage.js +msgid "Reopen" +msgstr "" + #: src/components/creation/timeslots/Timeline.js msgid "Revert to the local timezone" msgstr "" @@ -559,6 +571,10 @@ msgstr "நியமனத்திற்கு வருக!" msgid "Who are you?" msgstr "நீங்கள் யார்?" +#: src/components/answer/Calendar.js +msgid "YES" +msgstr "" + #: src/components/NewdlesParticipating.js msgid "You are not part of any newdles yet." msgstr "நீங்கள் இன்னும் எந்த புதியவர்களின் பகுதியாக இல்லை."