refactor(user-management): slowly add styling to panel and UI/UX adjustments

src/i18n/en-ca/index.ts

@@ -21,13 +21,15 @@ export default {
             timesheets: "timesheets",
             timesheets_approval: "timesheet approval",
             user_access: "module access",
-            presets: "access presets",
+            by_role: "by role",
+            by_module: "by module",
             preset_admin: "administrator",
             preset_employee: "employee",
             uncheck_all: "remove all",
             admin_description: "Check all modules",
             employee_description: "Only check modules that are relevant to standard employees with no management access",
             none_description: "Uncheck all modules",
+            usage_description: "You can use roles to enable preset modules, add or remove modules individually, or both",
         },
         add_employee: "Add employee",
         modify_employee: "Modify employee",

src/i18n/fr-ca/index.ts

@@ -14,20 +14,22 @@ export default {
 
     employee_management: {
         module_access: {
-            dashboard: "Dashboard",
+            dashboard: "Accueil",
-            employee_list: "employee list",
+            employee_list: "Répertoire du personnel",
-            employee_management: "employee management",
+            employee_management: "Gestion employés",
-            personal_profile: "profile",
+            personal_profile: "profil personnel",
-            timesheets: "timesheets",
+            timesheets: "carte de temps",
-            timesheets_approval: "timesheet approval",
+            timesheets_approval: "validation cartes de temps",
             user_access: "module access",
-            presets: "access presets",
+            by_role: "par rôle",
+            by_module: "par module",
             preset_admin: "administrateur",
             preset_employee: "employé",
             uncheck_all: "Tout enlever",
             admin_description: "Selectionner tous les modules",
             employee_description: "Selectionner seulement les modules qui sont pertinents aux employés sans accès spéciaux",
             none_description: "Enlever tous les accès",
+            usage_description: "Vous pouvez utiliser les rôles pour sélectionner des modules prédéfinis, enlever ou ajouter des modules individuellement, ou les deux",
         },
         add_employee: "Ajouter employé",
         modify_employee: "Modifier employé",

src/modules/employee-list/components/employee/add-modify-dialog-access.vue

@@ -21,12 +21,12 @@
     }
 
     const getPreviewBackgroundColor = (name: ModuleAccessName) => {
-        if (employee_access_presets[preset_preview.value!].includes(name)) { 
+        if (employee_access_presets[preset_preview.value!].includes(name)) {
-            if (!employee_store.employee.user_module_access.includes(name)) return 'bg-info text-white'; 
+            if (!employee_store.employee.user_module_access.includes(name)) return 'bg-info text-white';
-            
+
             return 'bg-accent text-white';
         }
-              
+
         if (employee_store.employee.user_module_access.includes(name)) return 'bg-negative text-white';
 
         return 'bg-dark';
@@ -40,8 +40,19 @@
 </script>
 
 <template>
-    <div class="row full-width">
+    <div class="row full-width items-start content-start">
-        <div class="column col-3 q-px-md">
+        <div class="column col-3">
+            <span class="text-uppercase text-weight-medium q-mx-sm">
+                {{ $t('employee_management.module_access.by_role') }}
+            </span>
+
+            <q-separator
+                size="2px"
+                color="accent"
+                class="q-mx-sm"
+                style="transform: translateY(-4px);"
+            />
+
             <q-item
                 clickable
                 class="shadow-2 rounded-5 q-ma-sm bg-dark"
@@ -78,26 +89,35 @@
                 </q-item-section>
             </q-item>
 
-            <q-item
+            <q-btn
-                clickable
+                flat
-                class="shadow-2 rounded-5 q-ma-sm bg-dark"
+                color="negative"
+                icon="clear"
+                size="md"
+                align="left"
+                :label="$t('employee_management.module_access.uncheck_all')"
+                class="q-ma-sm q-px-xs rounded-5"
                 @click="applyAccessPreset('none')"
                 @mouseover="preset_preview = 'none'"
                 @mouseleave="preset_preview = undefined"
-            >
+            />
-                <q-item-section>
-                    <q-item-label class="text-uppercase text-weight-bold">
-                        {{ $t('employee_management.module_access.uncheck_all') }}
-                    </q-item-label>
-
-                    <q-item-label caption>
-                        {{ $t('employee_management.module_access.none_description') }}
-                    </q-item-label>
-                </q-item-section>
-            </q-item>
         </div>
 
+        <div class="col-xs-0 col-sm-1"></div>
+
         <div class="row col items-start content-start">
+            <div class="col-12 q-mb-xs">
+                <span class="text-uppercase text-weight-medium q-mx-sm">
+                    {{ $t('employee_management.module_access.by_module') }}
+                </span>
+
+                <q-separator
+                    size="2px"
+                    color="accent"
+                    class="q-mx-sm"
+                    style="transform: translateY(-4px);"
+                />
+            </div>
             <div
                 v-for="option in employee_access_options"
                 :key="option.label"

src/modules/employee-list/components/employee/add-modify-dialog.vue

@@ -19,16 +19,33 @@
         @beforeShow="current_step = 'form'"
     >
         <q-card
-            class="bg-secondary shadow-10 rounded-10"
+            class="bg-secondary rounded-10"
-            :style="$q.screen.lt.md ? '' : 'max-width: 70vw !important;'"
+            :class="$q.dark.isActive ? 'shadow-24' : 'shadow-10'"
+            :style="($q.screen.lt.md ? ' ' : 'max-width: 70vw !important; ') +
+                ($q.dark.isActive ? 'border: 2px solid var(--q-accent)' : '')"
         >
             <q-card-section
-                class="text-weight-bolder text-white text-h6 text-uppercase bg-primary text-center shadow-10 q-py-xs"
+                class="text-weight-bolder text-white text-h5 bg-primary text-center shadow-5 q-pa-none"
             >
-                <span>{{ $t('employee_management.' + employee_store.management_mode) }}</span>
+                <div class="q-py-sm text-uppercase">{{ $t('employee_management.' + employee_store.management_mode) }}</div>
+                <q-slide-transition>
+                    <div v-if="current_step === 'access'" class="col-12 row flex-center q-px-sm q-py-xs bg-accent">
+                        <q-icon
+                            name="info_outline"
+                            color="white"
+                            size="sm"
+                            class="self-end q-mr-sm"
+                        />
+    
+                        <q-item-label
+                            caption
+                            class="text-white text-weight-medium"
+                        >{{ $t('employee_management.module_access.usage_description') }}</q-item-label>
+                    </div>
+                </q-slide-transition>
             </q-card-section>
 
-            <q-card-section>
+            <q-card-section class="q-pt-sm">
                 <q-carousel
                     v-model="current_step"
                     transition-prev="slide-right"
@@ -37,18 +54,27 @@
                     control-color="accent"
                     class="rounded-10 transparent"
                 >
-                    <q-carousel-slide name="form">
+                    <q-carousel-slide
-                        <div class="rounded-5 q-pb-sm bg-dark">
+                        name="form"
+                        class="q-pt-none"
+                    >
+                        <div class="rounded-5 q-pb-sm bg-dark shadow-10">
                             <AddModifyDialogForm />
                         </div>
                     </q-carousel-slide>
 
-                    <q-carousel-slide name="access">
+                    <q-carousel-slide
+                        name="access"
+                        class="q-pt-none"
+                    >
                         <AddModifyDialogAccess />
                     </q-carousel-slide>
 
                     <template #control>
-                        <q-carousel-control position="bottom">
+                        <q-carousel-control
+                            position="bottom"
+                            style="margin: none !important;"
+                        >
                             <div class="row">
                                 <q-btn
                                     v-if="current_step === 'access'"