[TECH] Migration de PixAdmin / Composants communs et layout (PIX-15221)

pix-service-auto-merge · web-flow · commit 3c937f81d27d · 2024-12-03T14:51:26.000+01:00
#10494
diff --git a/admin/app/components/common/tick-or-cross.gjs b/admin/app/components/common/tick-or-cross.gjs
@@ -1,13 +1,13 @@
-import FaIcon from '@fortawesome/ember-fontawesome/components/fa-icon';
+import PixIcon from '@1024pix/pix-ui/components/pix-icon';
 import Component from '@glimmer/component';
 
 export default class TickOrCross extends Component {
   get icon() {
-    return this.args.isTrue ? 'check' : 'times';
+    return this.args.isTrue ? 'check' : 'close';
   }
 
   get class() {
     return this.args.isTrue ? 'tick-or-cross--valid' : 'tick-or-cross--invalid';
   }
-  <template><FaIcon @icon={{this.icon}} class="tick-or-cross {{this.class}}" /></template>
+  <template><PixIcon @name={{this.icon}} class="tick-or-cross {{this.class}}" /></template>
 }
diff --git a/admin/app/components/common/tubes-details/tube.gjs b/admin/app/components/common/tubes-details/tube.gjs
@@ -1,4 +1,4 @@
-import FaIcon from '@fortawesome/ember-fontawesome/components/fa-icon';
+import PixIcon from '@1024pix/pix-ui/components/pix-icon';
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 
@@ -17,6 +17,14 @@ export default class Tube extends Component {
     }
   }
 
+  get mobileIcon() {
+    return this.args.mobile ? 'mobile' : 'mobileOff';
+  }
+
+  get tabletIcon() {
+    return this.args.tablet ? 'tablet' : 'tabletOff';
+  }
+
   <template>
     <td data-testid="title-{{@id}}">
       {{@title}}
@@ -42,20 +50,14 @@ export default class Tube extends Component {
           aria-label="{{if @mobile 'compatible mobile' 'incompatible mobile'}}"
           data-testid="mobile-compliant-{{@id}}"
         >
-          <FaIcon @icon="mobile-screen-button" class="fa-2x {{if @mobile 'is-responsive'}}" />
-          {{#unless @mobile}}
-            <FaIcon @icon="slash" class="fa-2x not-responsive" />
-          {{/unless}}
+          <PixIcon @name={{this.mobileIcon}} @plainIcon={{true}} class="{{if @mobile 'is-responsive'}}" />
         </div>
         <div
           class="icon-container"
           aria-label="{{if @tablet 'compatible tablette' 'incompatible tablette'}}"
           data-testid="tablet-compliant-{{@id}}"
         >
-          <FaIcon @icon="tablet-screen-button" class="fa-2x {{if @tablet 'is-responsive'}}" />
-          {{#unless @tablet}}
-            <FaIcon @icon="slash" class="fa-2x not-responsive" />
-          {{/unless}}
+          <PixIcon @name={{this.tabletIcon}} @plainIcon={{true}} class="{{if @mobile 'is-responsive'}}" />
         </div>
       </td>
     {{/if}}
diff --git a/admin/app/components/common/tubes-selection/tube.gjs b/admin/app/components/common/tubes-selection/tube.gjs
@@ -1,8 +1,8 @@
 import PixCheckbox from '@1024pix/pix-ui/components/pix-checkbox';
+import PixIcon from '@1024pix/pix-ui/components/pix-icon';
 import PixSelect from '@1024pix/pix-ui/components/pix-select';
 import { on } from '@ember/modifier';
 import { action } from '@ember/object';
-import FaIcon from '@fortawesome/ember-fontawesome/components/fa-icon';
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 
@@ -47,6 +47,14 @@ export default class Tube extends Component {
     return this.state === 'checked';
   }
 
+  get mobileIcon() {
+    return this.args.tube.mobile ? 'mobile' : 'mobileOff';
+  }
+
+  get tabletIcon() {
+    return this.args.tube.tablet ? 'tablet' : 'tabletOff';
+  }
+
   @action
   onChange(event) {
     if (event.target.checked) {
@@ -102,16 +110,10 @@ export default class Tube extends Component {
     {{#if @displayDeviceCompatibility}}
       <td class="table__column--center">
         <div class="icon-container" aria-label="{{if @tube.mobile 'compatible mobile' 'incompatible mobile'}}">
-          <FaIcon @icon="mobile-screen-button" class="fa-2x {{if @tube.mobile 'is-responsive'}}" />
-          {{#unless @tube.mobile}}
-            <FaIcon @icon="slash" class="fa-2x not-responsive" />
-          {{/unless}}
+          <PixIcon @name={{this.mobileIcon}} @plainIcon={{true}} class="{{if @tube.mobile 'is-responsive'}}" />
         </div>
         <div class="icon-container" aria-label="{{if @tube.tablet 'compatible tablette' 'incompatible tablette'}}">
-          <FaIcon @icon="tablet-screen-button" class="fa-2x {{if @tube.tablet 'is-responsive'}}" />
-          {{#unless @tube.tablet}}
-            <FaIcon @icon="slash" class="fa-2x not-responsive" />
-          {{/unless}}
+          <PixIcon @name={{this.tabletIcon}} @plainIcon={{true}} class="{{if @tube.tablet 'is-responsive'}}" />
         </div>
       </td>
     {{/if}}
diff --git a/admin/app/components/layout/breadcrumb.gjs b/admin/app/components/layout/breadcrumb.gjs
@@ -1,6 +1,6 @@
+import PixIcon from '@1024pix/pix-ui/components/pix-icon';
 import { LinkTo } from '@ember/routing';
 import { service } from '@ember/service';
-import FaIcon from '@fortawesome/ember-fontawesome/components/fa-icon';
 import Component from '@glimmer/component';
 
 export default class Breadcrumb extends Component {
@@ -46,7 +46,7 @@ export default class Breadcrumb extends Component {
             <li>
               <LinkTo @route={{crumb.path}}>{{crumb.label}}</LinkTo>
             </li>
-            <FaIcon @icon="chevron-right" />
+            <PixIcon @name="chevronRight" />
           {{else}}
             <li>
               <h1>{{crumb.label}}</h1>
diff --git a/admin/app/components/layout/menu-bar/entry.gjs b/admin/app/components/layout/menu-bar/entry.gjs
@@ -1,13 +1,13 @@
+import PixIcon from '@1024pix/pix-ui/components/pix-icon';
 import PixTooltip from '@1024pix/pix-ui/components/pix-tooltip';
 import { LinkTo } from '@ember/routing';
-import FaIcon from '@fortawesome/ember-fontawesome/components/fa-icon';
 
 <template>
   <li class="menu-bar__entry">
     <PixTooltip @position="right" ...attributes>
       <:triggerElement>
         <LinkTo @route={{@path}}>
-          <FaIcon @icon={{@icon}} @title={{@title}} />
+          <PixIcon @name={{@icon}} @title={{@title}} @plainIcon={{true}} />
         </LinkTo>
       </:triggerElement>
       <:tooltip>{{@title}}</:tooltip>
diff --git a/admin/app/components/layout/menu-bar/index.gjs b/admin/app/components/layout/menu-bar/index.gjs
@@ -21,45 +21,45 @@ export default class MenuBar extends Component {
       <ul>
         <MenuBarEntry
           @path="authenticated.organizations"
-          @icon="building"
+          @icon="buildings"
           @title={{t "components.layout.menu-bar.entries.organizations"}}
         />
         <MenuBarEntry
           @path="authenticated.users"
-          @icon="user"
+          @icon="infoUser"
           @title={{t "components.layout.menu-bar.entries.users"}}
         />
         <MenuBarEntry
           @path="authenticated.certification-centers"
-          @icon="map-pin"
+          @icon="mapPin"
           @title={{t "components.layout.menu-bar.entries.certification-centers"}}
           @inline={{true}}
         />
         <MenuBarEntry
           @path="authenticated.sessions"
-          @icon="chalkboard-user"
+          @icon="session"
           @title={{t "components.layout.menu-bar.entries.sessions"}}
           @inline={{true}}
         />
 
         {{#if this.accessControl.hasAccessToCertificationActionsScope}}
           <MenuBarEntry
             @path="authenticated.certifications"
-            @icon="graduation-cap"
+            @icon="newRealease"
             @title={{t "components.layout.menu-bar.entries.certifications"}}
             @inline={{true}}
           />
         {{/if}}
         <MenuBarEntry
           @path="authenticated.complementary-certifications"
-          @icon="stamp"
+          @icon="extension"
           @title={{t "components.layout.menu-bar.entries.complementary-certifications"}}
           @inline={{true}}
         />
         {{#if this.accessControl.hasAccessToTargetProfilesActionsScope}}
           <MenuBarEntry
             @path="authenticated.target-profiles"
-            @icon="clipboard-list"
+            @icon="assignment"
             @title={{t "components.layout.menu-bar.entries.target-profiles"}}
             @inline={{true}}
           />
@@ -74,7 +74,7 @@ export default class MenuBar extends Component {
         }}
           <MenuBarEntry
             @path="authenticated.autonomous-courses"
-            @icon="signs-post"
+            @icon="signpost"
             @title={{t "components.layout.menu-bar.entries.autonomous-courses"}}
           />
         {{/if}}
@@ -89,26 +89,26 @@ export default class MenuBar extends Component {
         {{#if this.accessControl.hasAccessToTrainings}}
           <MenuBarEntry
             @path="authenticated.trainings"
-            @icon="book-open"
+            @icon="book"
             @title={{t "components.layout.menu-bar.entries.trainings"}}
           />
         {{/if}}
         {{#if (or this.currentUser.adminMember.isSuperAdmin this.currentUser.adminMember.isMetier)}}
           <MenuBarEntry
             @path="authenticated.tools"
-            @icon="screwdriver-wrench"
+            @icon="tools"
             @title={{t "components.layout.menu-bar.entries.tools"}}
           />
         {{/if}}
         {{#if this.currentUser.adminMember.isSuperAdmin}}
           <MenuBarEntry
             @path="authenticated.administration"
-            @icon="crown"
+            @icon="shieldPerson"
             @title={{t "components.layout.menu-bar.entries.administration"}}
           />
         {{/if}}
 
-        <MenuBarEntry @path="logout" @icon="power-off" @title={{t "components.layout.menu-bar.entries.logout"}} />
+        <MenuBarEntry @path="logout" @icon="power" @title={{t "components.layout.menu-bar.entries.logout"}} />
       </ul>
     </nav>
   </template>
diff --git a/admin/app/styles/components/common/tubes-selection.scss b/admin/app/styles/components/common/tubes-selection.scss
@@ -44,16 +44,13 @@
 }
 
 .select-tube-table {
-  .is-responsive {
-    color: var(--pix-success-700);
+  .icon-container > svg {
+    width: 1.8rem;
+    height: 1.8rem;
   }
 
-  .not-responsive {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    color: var(--pix-error-700);
-    transform: translate(-50%, -50%);
+  .is-responsive {
+    color: var(--pix-success-700);
   }
 
   table {
diff --git a/admin/app/styles/components/layout/breadcrumb.scss b/admin/app/styles/components/layout/breadcrumb.scss
@@ -11,7 +11,7 @@
   }
 
   > svg {
-    width: 0.45rem;
+    width: 1.2rem;
     margin: 0 0.4rem;
   }
 }
diff --git a/admin/app/styles/components/layout/menu-bar.scss b/admin/app/styles/components/layout/menu-bar.scss
@@ -13,32 +13,32 @@
       padding: 0 15px;
 
       a {
-        position: relative;
-        display: block;
+        display: flex;
+        align-items: center;
         width: 50px;
-        padding: 0;
-        color: var(--pix-neutral-100);
-        font-size: 1.25rem;
-        line-height: 50px;
-        text-align: center;
+        height: 50px;
         border-radius: 5px;
         cursor: pointer;
 
-        i.fa {
-          width: 32px;
-          margin: 0 10px;
-        }
-
         &:hover {
-          color: var(--pix-neutral-0);
           text-decoration: none;
         }
 
         &.active {
-          color: var(--pix-neutral-0);
           font-weight: 600;
           background-color: var(--pix-neutral-500);
         }
+
+        svg {
+          width: 32px;
+          margin: 0 10px;
+          fill: var(--pix-neutral-100);
+        }
+
+        &:hover svg,
+        &.active svg {
+          fill: var(--pix-neutral-0);
+        }
       }
     }
   }

Original file line number	Diff line number	Diff line change
`@@ -1,13 +1,13 @@`
`1`		`-import FaIcon from '@fortawesome/ember-fontawesome/components/fa-icon';`
	`1`	`+import PixIcon from '@1024pix/pix-ui/components/pix-icon';`
`2`	`2`	`import Component from '@glimmer/component';`
`3`	`3`
`4`	`4`	`export default class TickOrCross extends Component {`
`5`	`5`	`get icon() {`
`6`		`- return this.args.isTrue ? 'check' : 'times';`
	`6`	`+ return this.args.isTrue ? 'check' : 'close';`
`7`	`7`	`}`
`8`	`8`
`9`	`9`	`get class() {`
`10`	`10`	`return this.args.isTrue ? 'tick-or-cross--valid' : 'tick-or-cross--invalid';`
`11`	`11`	`}`
`12`		`- <template><FaIcon @icon={{this.icon}} class="tick-or-cross {{this.class}}" /></template>`
	`12`	`+ <template><PixIcon @name={{this.icon}} class="tick-or-cross {{this.class}}" /></template>`
`13`	`13`	`}`
Original file line number	Diff line number	Diff line change
`@@ -44,16 +44,13 @@`
`44`	`44`	`}`
`45`	`45`
`46`	`46`	`.select-tube-table {`
`47`		`- .is-responsive {`
`48`		`- color: var(--pix-success-700);`
	`47`	`+ .icon-container > svg {`
	`48`	`+ width: 1.8rem;`
	`49`	`+ height: 1.8rem;`
`49`	`50`	`}`
`50`	`51`
`51`		`- .not-responsive {`
`52`		`- position: absolute;`
`53`		`- top: 50%;`
`54`		`- left: 50%;`
`55`		`- color: var(--pix-error-700);`
`56`		`- transform: translate(-50%, -50%);`
	`52`	`+ .is-responsive {`
	`53`	`+ color: var(--pix-success-700);`
`57`	`54`	`}`
`58`	`55`
`59`	`56`	`table {`
Original file line number	Diff line number	Diff line change
`@@ -11,7 +11,7 @@`
`11`	`11`	`}`
`12`	`12`
`13`	`13`	`> svg {`
`14`		`- width: 0.45rem;`
	`14`	`+ width: 1.2rem;`
`15`	`15`	`margin: 0 0.4rem;`
`16`	`16`	`}`
`17`	`17`	`}`