diff --git a/orga/app/components/layout/school-session-management.gjs b/orga/app/components/layout/school-session-management.gjs index aaf4f6b73a9..2c670dd38bd 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,47 @@ 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..76d56cedbf3 100644 --- a/orga/app/styles/components/layout/sidebar.scss +++ b/orga/app/styles/components/layout/sidebar.scss @@ -58,6 +58,64 @@ } } +.school-code-container { + display: flex; + flex-direction: column; + gap: var(--pix-spacing-3x); + align-items: center; + + h2 { + font-weight: var(--pix-font-bold); + font-size: 1.1rem; + } + + p { + display: flex; + align-items: flex-start; + margin: 0 0 var(--pix-spacing-3x) var(--pix-spacing-3x); + line-height: 0.5; + } + + .pix-icon-button { + width: 1.5rem; + min-width: 1.5rem; + height: 1.5rem; + color: var(--pix-primary-10); + + svg { + width: 1rem; + height: 1rem; + } + } + + .pix-icon-button:hover { + color: var(--pix-info-700); + } +} + +.school-session { + &__status { + @extend %pix-body-s; + + display: flex; + gap: var(--pix-spacing-1x); + align-items: center; + justify-content: center; + + .pix-tooltip { + width: 1.5rem; + min-width: 1.5rem; + height: 1.5rem; + line-height: 0.8; + + svg { + width: 1rem; + height: 1rem; + } + } + } +} + @include device-is('mobile') { .sidebar { position: relative; diff --git a/orga/tests/acceptance/campaign-list-test.js b/orga/tests/acceptance/campaign-list-test.js index 774c3d949d0..e854f785f3b 100644 --- a/orga/tests/acceptance/campaign-list-test.js +++ b/orga/tests/acceptance/campaign-list-test.js @@ -49,8 +49,9 @@ module('Acceptance | Campaign List', function (hooks) { // when const screen = await visitScreen('/campagnes'); - // then - assert.ok(screen.getByRole('heading', 'Créez votre première campagne')); + //then + assert.dom(screen.getByRole('heading', { level: 1 })).hasText(t('pages.campaigns-list.title')); + assert.ok(screen.getByRole('button', t('pages.campaigns-list.action.create'))); }); test('it should show the two tabs: my campaigns and all campaigns', async function (assert) { @@ -65,7 +66,7 @@ module('Acceptance | Campaign List', function (hooks) { const screen = await visitScreen('/campagnes'); // then - assert.ok(screen.getByRole('heading', t('pages.campaigns-list.title'))); + assert.dom(screen.getByRole('heading', { level: 1 })).hasText(t('pages.campaigns-list.title')); assert.ok(screen.getByText(t('pages.campaigns-list.tabs.my-campaigns'))); assert.ok(screen.getByText(t('pages.campaigns-list.tabs.all-campaigns'))); }); diff --git a/orga/tests/integration/components/layout/school-session-management_test.gjs b/orga/tests/integration/components/layout/school-session-management_test.gjs index 54aacae9370..21f6266f26a 100644 --- a/orga/tests/integration/components/layout/school-session-management_test.gjs +++ b/orga/tests/integration/components/layout/school-session-management_test.gjs @@ -27,12 +27,14 @@ module('Integration | Components | Layout | SchoolSessionManagement', function ( // when const screen = await render(); - const tooltipText = t('navigation.school-sessions.status.info-text', { htmlSafe: true }); - const tooltip = await screen.findByRole('tooltip', { hidden: true }); - // then - assert.ok(screen.getByLabelText(t('navigation.school-sessions.status.aria-label'))); - assert.strictEqual(tooltip.innerHTML.trim(), tooltipText.toString()); + const copyTooltipText = t('pages.missions.list.banner.copypaste-container.button.tooltip'); + const infoTooltipText = t('navigation.school-sessions.status.info-text', { htmlSafe: true }).toString(); + + const tooltipElementList = await screen.findAllByRole('tooltip', { hidden: true }); + const tooltipElementTextList = tooltipElementList.map((element) => element.innerHTML.trim()); + + assert.deepEqual(tooltipElementTextList, [copyTooltipText, infoTooltipText]); }); module('session expiration date management', function (hooks) { diff --git a/orga/translations/en.json b/orga/translations/en.json index 0764ce9a681..523f809a7bf 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..e9adbbe2812 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",