From 9f14849fb5d0c102410bf0b0246320836cb198ef Mon Sep 17 00:00:00 2001 From: rouxxi Date: Thu, 19 Dec 2024 16:57:26 +0100 Subject: [PATCH] feat(orga): upgrade ux on schoolSessionManagment component --- .../layout/school-session-management.gjs | 67 ++++++++++++------- .../app/styles/components/layout/sidebar.scss | 40 +++++++++++ orga/translations/en.json | 3 +- orga/translations/fr.json | 3 +- orga/translations/nl.json | 3 +- 5 files changed, 90 insertions(+), 26 deletions(-) diff --git a/orga/app/components/layout/school-session-management.gjs b/orga/app/components/layout/school-session-management.gjs index aaf4f6b73a9..2be2084aff1 100644 --- a/orga/app/components/layout/school-session-management.gjs +++ b/orga/app/components/layout/school-session-management.gjs @@ -7,6 +7,8 @@ import Component from '@glimmer/component'; import dayjs from 'dayjs'; import LocalizedFormat from 'dayjs/plugin/localizedFormat'; import { t } from 'ember-intl'; + +import CopyPasteButton from '../copy-paste-button'; dayjs.extend(LocalizedFormat); export default class SchoolSessionManagement extends Component { @@ -18,6 +20,9 @@ export default class SchoolSessionManagement extends Component { get canManageSession() { return this.currentUser.canAccessMissionsPage; } + get activateSessionButtonClass() { + return this.sessionIsActive ? 'secondary' : 'primary'; + } get sessionIsActive() { return this.currentUser.organization.sessionExpirationDate > new Date(); @@ -40,6 +45,9 @@ export default class SchoolSessionManagement extends Component { ? this.intl.t('navigation.school-sessions.extend-button') : this.intl.t('navigation.school-sessions.activate-button'); } + get organizationCode() { + return this.currentUser.organization.schoolCode ?? ''; + } @action async activateSession() { @@ -52,35 +60,48 @@ export default class SchoolSessionManagement extends Component { } } diff --git a/orga/app/styles/components/layout/sidebar.scss b/orga/app/styles/components/layout/sidebar.scss index 370d8fa8ee0..f402655cf2e 100644 --- a/orga/app/styles/components/layout/sidebar.scss +++ b/orga/app/styles/components/layout/sidebar.scss @@ -58,6 +58,46 @@ } } +.school-code-container { + display: flex; + flex-direction: column; + align-items: center; + + h2 { + margin-bottom: var(--pix-spacing-2x); + font-size: 1.1rem; + } + + .school-code { + display: flex; + margin-left: var(--pix-spacing-3x); + } + + .pix-icon-button { + color: var(--pix-primary-10); + } + + .pix-icon-button:hover { + color: var(--pix-info-700); + } +} + +.school-session { + &__status { + @extend %pix-body-s; + + display: flex; + align-items: center; + justify-content: center; + font-weight: var(--pix-font-bold); + + .message-status { + margin-right: var(--pix-spacing-2x); + text-wrap: nowrap + } + } +} + @include device-is('mobile') { .sidebar { position: relative; diff --git a/orga/translations/en.json b/orga/translations/en.json index 0764ce9a681..de2df50dc62 100644 --- a/orga/translations/en.json +++ b/orga/translations/en.json @@ -376,6 +376,7 @@ "title": "Session status", "active-label": "Active session until {sessionExpirationDate}", "aria-label": "How does the session work ?", + "code-label": "School code", "inactive-label": "Inactive session", "info-text": "Students can only access missions when the session is active.'
'At the end of the session, students who are in the middle of a mission will not be disconnected." } @@ -940,7 +941,7 @@ "hint": "You can save this bookmark on your computers." } }, - "step3": "Step 3 : Activate the Pix Junior session using the button above. You should do this before each session with your pupils.", + "step3": "Step 3 : Activate the Pix Junior session using the button in the sideBar. You should do this before each session with your pupils.", "welcome": "Starting to use Pix Junior :" }, "caption": "List of missions", diff --git a/orga/translations/fr.json b/orga/translations/fr.json index d3730c75250..7505f0a6626 100644 --- a/orga/translations/fr.json +++ b/orga/translations/fr.json @@ -382,6 +382,7 @@ "title": "Statut de la session", "active-label": "Session active jusqu'à {sessionExpirationDate}", "aria-label": "Explication sur la session", + "code-label": "Code école", "inactive-label": "Session inactive", "info-text": "Les missions sont accessibles par les élèves uniquement lorsque la session est active.'
' À la fin de la session, les élèves en cours de mission ne seront pas déconnectés." } @@ -946,7 +947,7 @@ "hint": "Vous pouvez enregistrer ce favori sur les ordinateurs." } }, - "step3": "Étape 3 : Activez la session Pix Junior via le bouton dans la barre de navigation. Cette action est à réaliser avant chaque séance avec vos élèves.", + "step3": "Étape 3 : Activez la session Pix Junior via le bouton dans la barre latérale. Cette action est à réaliser avant chaque séance avec vos élèves.", "welcome": "Pour commencer à utiliser Pix Junior :" }, "caption": "Liste des missions", diff --git a/orga/translations/nl.json b/orga/translations/nl.json index 6a3a6987a8e..851eeadf4cf 100644 --- a/orga/translations/nl.json +++ b/orga/translations/nl.json @@ -373,6 +373,7 @@ "activate-button": "De sessie activeren", "extend-button": "De sessie verlengen", "status": { + "code-label": "Schoolcode", "active-label": "Sessie actief tot {sessionExpirationDate}", "aria-label": "Uitleg over de sessie", "inactive-label": "Sessie inactief", @@ -936,7 +937,7 @@ }, "title": "Stap 2: Om leerlingen toegang te geven tot de Pix Junior-ruimte van je school, kun je :" }, - "step3": "Stap 3: Activeer de Pix Junior sessie via de knop hierboven. Deze actie moet voor elke sessie met je leerlingen worden uitgevoerd.", + "step3": "Stap 3: Activeer de Pix Junior sessie met de knop in de sideBar. Deze actie moet voor elke sessie met je leerlingen worden uitgevoerd.", "welcome": "Hallo en welkom bij Pix Orga!" }, "caption": "Lijst van opdrachten",