-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
start history skin and add table components
- Loading branch information
1 parent
c8abdbe
commit d0cade2
Showing
6 changed files
with
434 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -15,5 +15,6 @@ | |
| height: rem-calc(22px); | ||
| padding: 0 rem-calc(6px); | ||
| border-radius: rem-calc(4px); | ||
| width: fit-content; | ||
| } | ||
| </style> | ||
142 changes: 142 additions & 0 deletions
142
modules/ui/src/lib/components/molecules/table/M_table.svelte
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,142 @@ | ||
| <script> | ||
| import A_icon from "$lib/components/atoms/A_icon.svelte"; | ||
| import A_indicator from "$lib/components/atoms/A_indicator.svelte"; | ||
| import {Tooltip} from "svelte-tooltip-simple"; | ||
| </script> | ||
|
|
||
| <table> | ||
| <thead> | ||
| <tr> | ||
| <slot name="headerContent"></slot> | ||
| </tr> | ||
|
|
||
| <!-- <th></th>--> | ||
| <!-- <th>Statut</th>--> | ||
| <!-- <th>Nom</th>--> | ||
| <!-- <th>Projet</th>--> | ||
| <!-- <th>Env</th>--> | ||
| <!-- <th>Module</th>--> | ||
| <!-- <th>Début d'éxecution</th>--> | ||
| <!-- <th>Temps d'éxecution</th>--> | ||
| <!-- <th>Détails</th>--> | ||
| </thead> | ||
| <tbody> | ||
| <slot name="bodyContent"></slot> | ||
| </tbody> | ||
|
|
||
| <!-- <tr class="_completed">--> | ||
| <!-- <td>--> | ||
| <!-- <Tooltip text="Ajouter aux favoris">--> | ||
| <!-- <A_icon type="star_border" size="semiLight"></A_icon>--> | ||
| <!-- </Tooltip>--> | ||
| <!-- </td>--> | ||
| <!-- <td>--> | ||
| <!-- <A_icon type="task_alt"></A_icon>--> | ||
| <!-- </td>--> | ||
| <!-- <td>BeC13092022-1</td>--> | ||
| <!-- <td>--> | ||
| <!-- <A_indicator label="CIN"></A_indicator>--> | ||
| <!-- </td>--> | ||
| <!-- <td>--> | ||
| <!-- <A_indicator label="R"></A_indicator>--> | ||
| <!-- </td>--> | ||
| <!-- <td>Module 3</td>--> | ||
| <!-- <td>02/08/2022 à 18h57</td>--> | ||
| <!-- <td>1h 2 min 34 sec</td>--> | ||
| <!-- <td>--> | ||
| <!-- <Tooltip text="Voir le détail">--> | ||
| <!-- <A_icon type="visibility" size="semiLight"></A_icon>--> | ||
| <!-- </Tooltip>--> | ||
| <!-- </td>--> | ||
| <!-- </tr>--> | ||
| <!-- <tr class="_inProgress">--> | ||
| <!-- <td>--> | ||
| <!-- <Tooltip text="Retirer des favoris">--> | ||
| <!-- <A_icon type="star" size="semiLight"></A_icon>--> | ||
| <!-- </Tooltip>--> | ||
| <!-- </td>--> | ||
| <!-- <td>--> | ||
| <!-- <A_icon type="autorenew"></A_icon>--> | ||
| <!-- </td>--> | ||
| <!-- <td>CHE12092022-1</td>--> | ||
| <!-- <td>--> | ||
| <!-- <A_indicator label="CHE"></A_indicator>--> | ||
| <!-- </td>--> | ||
| <!-- <td>--> | ||
| <!-- <A_indicator label="PP"></A_indicator>--> | ||
| <!-- </td>--> | ||
| <!-- <td>Module 6</td>--> | ||
| <!-- <td>13/09/2022 à 18h57</td>--> | ||
| <!-- <td>2j 23h 21min 43 sec</td>--> | ||
| <!-- <td>--> | ||
| <!-- <Tooltip text="Voir le détail">--> | ||
| <!-- <A_icon type="visibility" size="semiLight"></A_icon>--> | ||
| <!-- </Tooltip>--> | ||
| <!-- </td>--> | ||
| <!-- </tr>--> | ||
| <!-- <tr class="_completed">--> | ||
| <!-- <td>--> | ||
| <!-- <Tooltip text="Retirer des favoris">--> | ||
| <!-- <A_icon type="star" size="semiLight"></A_icon>--> | ||
| <!-- </Tooltip>--> | ||
| <!-- </td>--> | ||
| <!-- <td>--> | ||
| <!-- <A_icon type="task_alt"></A_icon>--> | ||
| <!-- </td>--> | ||
| <!-- <td>CHE12092022-1</td>--> | ||
| <!-- <td>--> | ||
| <!-- <A_indicator label="CHE"></A_indicator>--> | ||
| <!-- </td>--> | ||
| <!-- <td>--> | ||
| <!-- <A_indicator label="A"></A_indicator>--> | ||
| <!-- </td>--> | ||
| <!-- <td>Module 6</td>--> | ||
| <!-- <td>13/09/2022 à 18h57</td>--> | ||
| <!-- <td>2j 23h 21min 43 sec</td>--> | ||
| <!-- <td>--> | ||
| <!-- <Tooltip text="Voir le détail">--> | ||
| <!-- <A_icon type="visibility" size="semiLight"></A_icon>--> | ||
| <!-- </Tooltip>--> | ||
| <!-- </td>--> | ||
| <!-- </tr>--> | ||
| <!-- <tr class="_error">--> | ||
| <!-- <td>--> | ||
| <!-- <Tooltip text="Ajouter aux favoris">--> | ||
| <!-- <A_icon type="star_border" size="semiLight"></A_icon>--> | ||
| <!-- </Tooltip>--> | ||
| <!-- </td>--> | ||
| <!-- <td>--> | ||
| <!-- <A_icon type="error_outline"></A_icon>--> | ||
| <!-- </td>--> | ||
| <!-- <td>BeC13092022-2</td>--> | ||
| <!-- <td>--> | ||
| <!-- <A_indicator label="PoF"></A_indicator>--> | ||
| <!-- </td>--> | ||
| <!-- <td>--> | ||
| <!-- <A_indicator label="QA"></A_indicator>--> | ||
| <!-- </td>--> | ||
| <!-- <td>Module 6</td>--> | ||
| <!-- <td>13/09/2022 à 18h57</td>--> | ||
| <!-- <td>2j 23h 21min 43 sec</td>--> | ||
| <!-- <td>--> | ||
| <!-- <Tooltip text="Voir le détail">--> | ||
| <!-- <A_icon type="visibility" size="semiLight"></A_icon>--> | ||
| <!-- </Tooltip>--> | ||
| <!-- </td>--> | ||
| <!-- </tr>--> | ||
| </table> | ||
|
|
||
| <style lang="scss"> | ||
| @import "src/app"; | ||
| table { | ||
| background-color: rgb(var(--secondary-color-rgb) / .05); | ||
| border-radius: rem-calc(6px); | ||
| border-spacing: inherit; | ||
| overflow: hidden; | ||
| thead { | ||
| background-color: $app-primary_900; | ||
| } | ||
| } | ||
| </style> |
18 changes: 18 additions & 0 deletions
18
modules/ui/src/lib/components/molecules/table/M_tableBodyItem.svelte
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,18 @@ | ||
| <script> | ||
| export let width; | ||
| export let textAlign; | ||
| </script> | ||
|
|
||
| <td width="{width}" style="text-align: {textAlign}"> | ||
| <slot></slot> | ||
| </td> | ||
|
|
||
| <style lang="scss"> | ||
| @import "src/app"; | ||
| td { | ||
| padding: rem-calc(5px 10px); | ||
| font-size: rem-calc(14px); | ||
| font-weight: 400; | ||
| } | ||
| </style> |
19 changes: 19 additions & 0 deletions
19
modules/ui/src/lib/components/molecules/table/M_tableHeaderItem.svelte
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,19 @@ | ||
| <script> | ||
| export let width; | ||
| export let textAlign; | ||
| </script> | ||
|
|
||
| <th width="{width}" style="text-align: {textAlign}"> | ||
| <slot></slot> | ||
| </th> | ||
|
|
||
| <style lang="scss"> | ||
| @import "src/app"; | ||
| th { | ||
| text-align: left; | ||
| padding: rem-calc(10px); | ||
| font-size: rem-calc(13px); | ||
| font-weight: 600; | ||
| } | ||
| </style> |
197 changes: 197 additions & 0 deletions
197
modules/ui/src/lib/components/organisms/O_historyTable.svelte
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,197 @@ | ||
| <script> | ||
| import A_icon from "$lib/components/atoms/A_icon.svelte"; | ||
| import M_tableBodyItem from "$lib/components/molecules/table/M_tableBodyItem.svelte"; | ||
| import M_table from "$lib/components/molecules/table/M_table.svelte"; | ||
| import A_indicator from "$lib/components/atoms/A_indicator.svelte"; | ||
| import {Tooltip} from "svelte-tooltip-simple"; | ||
| import M_tableHeaderItem from "$lib/components/molecules/table/M_tableHeaderItem.svelte"; | ||
| </script> | ||
|
|
||
| <M_table> | ||
| <svelte:fragment slot="headerContent"> | ||
| <M_tableHeaderItem></M_tableHeaderItem> | ||
| <M_tableHeaderItem width="44">Statut</M_tableHeaderItem> | ||
| <M_tableHeaderItem>Nom</M_tableHeaderItem> | ||
| <M_tableHeaderItem>Projet</M_tableHeaderItem> | ||
| <M_tableHeaderItem>Env</M_tableHeaderItem> | ||
| <M_tableHeaderItem>Module</M_tableHeaderItem> | ||
| <M_tableHeaderItem>Début d'éxecution</M_tableHeaderItem> | ||
| <M_tableHeaderItem>Temps d'éxecution</M_tableHeaderItem> | ||
| <M_tableHeaderItem textAlign="center" width="47">Détails</M_tableHeaderItem> | ||
| </svelte:fragment> | ||
| <svelte:fragment slot="bodyContent"> | ||
| <tr class="_inProgress"> | ||
| <M_tableBodyItem width="30" textAlign="right"> | ||
| <Tooltip text="Retirer des favoris"> | ||
| <A_icon type="star" size="semiLight"></A_icon> | ||
| </Tooltip> | ||
| </M_tableBodyItem> | ||
| <M_tableBodyItem width="44"> | ||
| <div class="tableIcon"> | ||
| <A_icon type="autorenew"></A_icon> | ||
| </div> | ||
| </M_tableBodyItem> | ||
| <M_tableBodyItem> | ||
| BeC13092022-1 | ||
| </M_tableBodyItem> | ||
| <M_tableBodyItem> | ||
| <A_indicator label="CIN"></A_indicator> | ||
| </M_tableBodyItem> | ||
| <M_tableBodyItem> | ||
| <A_indicator label="R"></A_indicator> | ||
| </M_tableBodyItem> | ||
| <M_tableBodyItem> | ||
| Module 3 | ||
| </M_tableBodyItem> | ||
| <M_tableBodyItem> | ||
| 02/08/2022 à 18h57 | ||
| </M_tableBodyItem> | ||
| <M_tableBodyItem> | ||
| 1h 2 min 34 sec | ||
| </M_tableBodyItem> | ||
| <M_tableBodyItem textAlign="center" width="47"> | ||
| <Tooltip text="Voir le détail"> | ||
| <A_icon type="visibility" size="semiLight"></A_icon> | ||
| </Tooltip> | ||
| </M_tableBodyItem> | ||
| </tr> | ||
| <tr class="_error"> | ||
| <M_tableBodyItem width="30" textAlign="right"> | ||
| <Tooltip text="Ajouter aux favoris"> | ||
| <A_icon type="star_border" size="semiLight"></A_icon> | ||
| </Tooltip> | ||
| </M_tableBodyItem> | ||
| <M_tableBodyItem width="44"> | ||
| <div class="tableIcon"> | ||
| <A_icon type="error_outline"></A_icon> | ||
| </div> | ||
| </M_tableBodyItem> | ||
| <M_tableBodyItem> | ||
| BeC13092022-1 | ||
| </M_tableBodyItem> | ||
| <M_tableBodyItem> | ||
| <A_indicator label="CIN"></A_indicator> | ||
| </M_tableBodyItem> | ||
| <M_tableBodyItem> | ||
| <A_indicator label="R"></A_indicator> | ||
| </M_tableBodyItem> | ||
| <M_tableBodyItem> | ||
| Module 3 | ||
| </M_tableBodyItem> | ||
| <M_tableBodyItem> | ||
| 02/08/2022 à 18h57 | ||
| </M_tableBodyItem> | ||
| <M_tableBodyItem> | ||
| 1h 2 min 34 sec | ||
| </M_tableBodyItem> | ||
| <M_tableBodyItem textAlign="center" width="47"> | ||
| <Tooltip text="Voir le détail"> | ||
| <A_icon type="visibility" size="semiLight"></A_icon> | ||
| </Tooltip> | ||
| </M_tableBodyItem> | ||
| </tr> | ||
| <tr class="_inProgress"> | ||
| <M_tableBodyItem width="30" textAlign="right"> | ||
| <Tooltip text="Ajouter aux favoris"> | ||
| <A_icon type="star_border" size="semiLight"></A_icon> | ||
| </Tooltip> | ||
| </M_tableBodyItem> | ||
| <M_tableBodyItem width="44"> | ||
| <div class="tableIcon"> | ||
| <A_icon type="autorenew"></A_icon> | ||
| </div> | ||
| </M_tableBodyItem> | ||
| <M_tableBodyItem> | ||
| BeC13092022-1 | ||
| </M_tableBodyItem> | ||
| <M_tableBodyItem> | ||
| <A_indicator label="CIN"></A_indicator> | ||
| </M_tableBodyItem> | ||
| <M_tableBodyItem> | ||
| <A_indicator label="R"></A_indicator> | ||
| </M_tableBodyItem> | ||
| <M_tableBodyItem> | ||
| Module 3 | ||
| </M_tableBodyItem> | ||
| <M_tableBodyItem> | ||
| 02/08/2022 à 18h57 | ||
| </M_tableBodyItem> | ||
| <M_tableBodyItem> | ||
| 1h 2 min 34 sec | ||
| </M_tableBodyItem> | ||
| <M_tableBodyItem textAlign="center" width="47"> | ||
| <Tooltip text="Voir le détail"> | ||
| <A_icon type="visibility" size="semiLight"></A_icon> | ||
| </Tooltip> | ||
| </M_tableBodyItem> | ||
| </tr> | ||
| <tr class="_completed"> | ||
| <M_tableBodyItem width="30" textAlign="right"> | ||
| <Tooltip text="Ajouter aux favoris"> | ||
| <A_icon type="star_border" size="semiLight"></A_icon> | ||
| </Tooltip> | ||
| </M_tableBodyItem> | ||
| <M_tableBodyItem width="44"> | ||
| <div class="tableIcon"> | ||
| <A_icon type="task_alt"></A_icon> | ||
| </div> | ||
| </M_tableBodyItem> | ||
| <M_tableBodyItem> | ||
| BeC13092022-1 | ||
| </M_tableBodyItem> | ||
| <M_tableBodyItem> | ||
| <A_indicator label="CIN"></A_indicator> | ||
| </M_tableBodyItem> | ||
| <M_tableBodyItem> | ||
| <A_indicator label="R"></A_indicator> | ||
| </M_tableBodyItem> | ||
| <M_tableBodyItem> | ||
| Module 3 | ||
| </M_tableBodyItem> | ||
| <M_tableBodyItem> | ||
| 02/08/2022 à 18h57 | ||
| </M_tableBodyItem> | ||
| <M_tableBodyItem> | ||
| 1h 2 min 34 sec | ||
| </M_tableBodyItem> | ||
| <M_tableBodyItem textAlign="center" width="47"> | ||
| <Tooltip text="Voir le détail"> | ||
| <A_icon type="visibility" size="semiLight"></A_icon> | ||
| </Tooltip> | ||
| </M_tableBodyItem> | ||
| </tr> | ||
| </svelte:fragment> | ||
| </M_table> | ||
|
|
||
| <style lang="scss"> | ||
| @import "src/app"; | ||
| tr { | ||
| &:nth-child(even) { | ||
| background-color: rgb(var(--secondary-color-rgb) / .05); | ||
| } | ||
| &:hover { | ||
| background-color: rgb(var(--secondary-color-rgb) / .1); | ||
| } | ||
| &._completed { | ||
| .tableIcon { | ||
| color: $app-success_900; | ||
| } | ||
| } | ||
| &._inProgress { | ||
| .tableIcon { | ||
| color: $app-primary_700; | ||
| } | ||
| } | ||
| &._error { | ||
| .tableIcon { | ||
| color: $app-error_900; | ||
| } | ||
| } | ||
| } | ||
| </style> |
Oops, something went wrong.