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 "நீங்கள் இன்னும் எந்த புதியவர்களின் பகுதியாக இல்லை."