[FEATURE] Orga - Amélioration du design du menu de navigation (PIX-15769)

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() {
@@ -53,34 +61,46 @@ export default class SchoolSessionManagement extends Component {
 
   <template>
     {{#if this.canManageSession}}
-      <p class="school-session__status">
-        {{#if this.sessionIsActive}}
-          {{t "navigation.school-sessions.status.active-label" this.expirationDateParameter}}
-        {{else}}
-          {{t "navigation.school-sessions.status.inactive-label"}}
-        {{/if}}
-      </p>
-      <PixTooltip @id="school-session-info-tooltip" @position="bottom" @isWide="true">
-        <:triggerElement>
-          <PixIcon
-            @name="help"
-            @plainIcon={{true}}
-            tabindex="0"
-            aria-label={{t "navigation.school-sessions.status.aria-label"}}
-            aria-describedby="school-session-info-tooltip"
+      <div class="school-code-container">
+        <h2>{{t "navigation.school-sessions.status.code-label"}}</h2>
+        <p>{{this.organizationCode}}
+          <CopyPasteButton
+            @clipBoardtext={{this.organizationCode}}
+            @successMessage="{{t 'pages.missions.list.banner.copypaste-container.button.success'}}"
+            @defaultMessage="{{t 'pages.missions.list.banner.copypaste-container.button.tooltip'}}"
           />
-        </:triggerElement>
+        </p>
 
-        <:tooltip>
-          {{t "navigation.school-sessions.status.info-text" htmlSafe=true}}
-        </:tooltip>
-      </PixTooltip>
+      </div>
 
       <PixButton
         class="school-session__button"
-        @variant="secondary"
+        @variant={{this.activateSessionButtonClass}}
         @triggerAction={{this.activateSession}}
       >{{this.buttonLabel}}</PixButton>
+      <div class="school-session__status">
+
+        {{#if this.sessionIsActive}}
+          {{t "navigation.school-sessions.status.active-label" this.expirationDateParameter}}
+        {{else}}
+          {{t "navigation.school-sessions.status.inactive-label"}}
+        {{/if}}
+        <PixTooltip @id="school-session-info-tooltip" @position="bottom" @isWide="true">
+          <:triggerElement>
+            <PixIcon
+              @name="error"
+              @plainIcon={{true}}
+              tabindex="0"
+              aria-label={{t "navigation.school-sessions.status.aria-label"}}
+              aria-describedby="school-session-info-tooltip"
+            />
+          </:triggerElement>
+
+          <:tooltip>
+            {{t "navigation.school-sessions.status.info-text" htmlSafe=true}}
+          </:tooltip>
+        </PixTooltip>
+      </div>
     {{/if}}
   </template>
 }

orga/app/styles/components/banner/top-banners.scss

@@ -2,8 +2,4 @@
   & > * {
     margin-bottom: var(--pix-spacing-2x);
   }
-
-  & > *:last-child {
-    margin-bottom: 0;
-  }
 }

orga/app/styles/components/campaign/copy-paste-button.scss

@@ -1,6 +1,6 @@
 .copy-paste-button {
   &__clipboard {
-    margin: -10px 6px 0 6px;
+    margin: -8px 6px 0 2px;
   }
 
   &__tooltip {

orga/app/styles/components/layout/sidebar.scss

@@ -58,6 +58,72 @@
   }
 }
 
+.school-code-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  h2 {
+    @extend %pix-body-s;
+
+    font-weight: var(--pix-font-bold);
+  }
+
+  p {
+    @extend %pix-body-xs;
+
+    display: flex;
+    align-items: flex-start;
+    margin: 0 0 var(--pix-spacing-3x) var(--pix-spacing-3x);
+  }
+
+  // Size attribute needed in component CopyPasteButton to adjust margin regarding icon size
+  .copy-paste-button {
+    &__clipboard {
+      margin: -4px 6px 0 2px;
+    }
+  }
+
+  .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-xs;
+
+    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;

orga/app/styles/pages/authenticated/mission.scss

@@ -5,6 +5,8 @@
 }
 
 .mission-list-banner {
+  margin-bottom: var(--pix-spacing-2x);
+
   a {
     font-weight: bolder;
     text-decoration: underline;
@@ -24,18 +26,45 @@
 
   &__school-code {
     display: inline-flex;
-    margin-top: 8px;
 
     .pix-icon-button {
-       fill: var(--pix-info-700);
-     }
+      fill: var(--pix-info-700);
+    }
   }
 
   &__copypaste-container {
     display: flex;
     flex-direction: column;
     text-align: start;
 
+    .copy-paste-button {
+      &__clipboard {
+        margin: -6px 6px 0 2px;
+      }
+    }
+
+    .copy-paste-button-container {
+      margin-top: 4px;
+    }
+
+    .pix-icon {
+      width: 1rem;
+      height: 1rem;
+    }
+
+
+    .pix-icon-button {
+      width: 1.5rem;
+      min-width: 1.5rem;
+      height: 1.5rem;
+    }
+
+
+    span, a {
+      display: flex;
+      align-items: center;
+    }
+
     #external-link-icon {
       margin-left: 4px;
       text-decoration: none;
@@ -57,7 +86,7 @@
     align-items: center;
     justify-content: space-between;
     margin-top: var(--pix-spacing-6x);
-    margin-bottom: var(--pix-spacing-2x); ;
+    margin-bottom: var(--pix-spacing-2x);
 
     &__title {
       @extend %pix-title-m;

orga/app/templates/authenticated/missions/list.hbs

@@ -25,11 +25,13 @@
             </span>
             <div class="mission-list-banner__school-code">
               Code :&nbsp;<b>{{this.schoolCode}}</b>
-              <CopyPasteButton
-                @clipBoardtext={{this.schoolCode}}
-                @successMessage="{{t 'pages.missions.list.banner.copypaste-container.button.success'}}"
-                @defaultMessage="{{t 'pages.missions.list.banner.copypaste-container.button.tooltip'}}"
-              />
+              <div class="copy-paste-button-container">
+                <CopyPasteButton
+                  @clipBoardtext={{this.schoolCode}}
+                  @successMessage="{{t 'pages.missions.list.banner.copypaste-container.button.success'}}"
+                  @defaultMessage="{{t 'pages.missions.list.banner.copypaste-container.button.tooltip'}}"
+                />
+              </div>
             </div>
           </div>
         </li>

orga/tests/acceptance/campaign-list-test.js

@@ -49,8 +49,8 @@ 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.ok(screen.getByRole('link', { name: t('pages.campaigns-list.action.create') }));
     });
 
     test('it should show the two tabs: my campaigns and all campaigns', async function (assert) {
@@ -65,7 +65,7 @@ module('Acceptance | Campaign List', function (hooks) {
       const screen = await visitScreen('/campagnes');
 
       // then
-      assert.ok(screen.getByRole('heading', t('pages.campaigns-list.title')));
+      assert.ok(screen.getByRole('heading', { level: 1, name: 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')));
     });

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(<template><SchoolSessionManagement /></template>);
 
-      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) {
@@ -123,6 +125,7 @@ module('Integration | Components | Layout | SchoolSessionManagement', function (
       class CurrentUserStub extends Service {
         isAdminInOrganization = true;
         canAccessMissionsPage = false;
+        organization = {};
       }
 
       this.owner.register('service:current-user', CurrentUserStub);

orga/translations/en.json

@@ -375,6 +375,7 @@
       "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.'<br>'At the end of the session, students who are in the middle of a mission will not be disconnected.",
         "title": "Session status"
@@ -939,7 +940,7 @@
             },
             "title": "Step 2 : To enable pupils to access your school's Pix Junior space, you can :"
           },
-          "step3": "Step 3 : <b> Activate the Pix Junior session </b> using the button above. <b>You should do this before each session with your pupils</b>.",
+          "step3": "Step 3 : <b> Activate the Pix Junior session </b> using the button in the sidebar. <b>You should do this before each session with your pupils</b>.",
           "welcome": "Starting to use Pix Junior :"
         },
         "caption": "List of missions",

orga/translations/fr.json

@@ -381,6 +381,7 @@
       "status": {
         "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.'<br>' À la fin de la session, les élèves en cours de mission ne seront pas déconnectés.",
         "title": "Statut de la session"
@@ -945,7 +946,7 @@
             },
             "title": "Étape 2 : Pour que les élèves accèdent à l’espace Pix Junior de votre école, vous pouvez :"
           },
-          "step3": "Étape 3 : <b>Activez la session Pix Junior</b> via le bouton dans la barre de navigation. <b>Cette action est à réaliser avant chaque séance avec vos élèves</b>.",
+          "step3": "Étape 3 : <b>Activez la session Pix Junior</b> via le bouton dans la barre latérale. <b>Cette action est à réaliser avant chaque séance avec vos élèves</b>.",
           "welcome": "Pour commencer à utiliser Pix Junior :"
         },
         "caption": "Liste des missions",

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",
@@ -937,7 +938,7 @@
             },
             "title": "Stap 2: Om leerlingen toegang te geven tot de Pix Junior-ruimte van je school, kun je :"
           },
-          "step3": "Stap 3: <b>Activeer de Pix Junior sessie</b> via de knop hierboven. <b>Deze actie moet voor elke sessie met je leerlingen worden uitgevoerd</b>.",
+          "step3": "Stap 3: <b>Activeer de Pix Junior sessie</b> met de knop in de sidebar. <b>Deze actie moet voor elke sessie met je leerlingen worden uitgevoerd</b>.",
           "welcome": "Hallo en welkom bij Pix Orga!"
         },
         "caption": "Lijst van opdrachten",