Merge branch 'ui-rework-improvements-2' into 'main'

Ui rework improvements 2

See merge request reportcreator/reportcreator!368

docs/docs/designer/design-guides.md

@@ -94,7 +94,6 @@ We provide a range of fonts ready to use. Following fonts are available:
 * [STIX Two Text](https://fonts.google.com/specimen/STIX+Two+Text){target=_blank} - similar to Times New Roman
 * [Arimo](https://fonts.google.com/specimen/Arimo){target=_blank} - similar to Verdana
 * [Exo](https://fonts.google.com/specimen/Exo){target=_blank}
-* [Exo 2](https://fonts.google.com/specimen/Exo+2){target=_blank}
 * ~~[Lato](https://fonts.google.com/specimen/Lato){target=_blank}~~*
 * ~~[Roboto](https://fonts.google.com/specimen/Roboto){target=_blank}~~*
 * ~~[Tinos](https://fonts.google.com/specimen/Tinos){target=_blank}~~*

frontend/src/assets/fonts/noto/noto.css

@@ -0,0 +1,15 @@
+@font-face {
+  font-family: 'Noto Sans';
+  font-style: normal;
+  font-weight: 100 900;
+  font-display: swap;
+  src: url('~/assets/fonts/noto/NotoSans-VariableFont_wdth,wght.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'Noto Sans';
+  font-style: italic;
+  font-weight: 100 900;
+  font-display: swap;
+  src: url('~/assets/fonts/noto/NotoSans-Italic-VariableFont_wdth,wght.woff2') format('woff2');
+}

frontend/src/assets/global.scss

@@ -1,6 +1,6 @@
 @use "@/assets/settings.scss" as settings;
 @use "@/assets/vuetify.scss" as vuetify;
-@import '~/assets/fonts/exo2/exo2.css';
+@import '~/assets/fonts/noto/noto.css';
 
 
 // Hide scrollbar when it is not needed

frontend/src/assets/settings.scss

@@ -1,5 +1,5 @@
 // Vuetify settings
-$body-font-family: 'Exo 2', sans-serif;
+$body-font-family: 'Noto Sans', sans-serif;
 
 // Colors
 $risk-color-info: #14AE92;

frontend/src/assets/vuetify.scss

@@ -3,4 +3,5 @@
 // Vuetify customizations
 @forward 'vuetify/settings' with (
   $body-font-family: settings.$body-font-family,
+  $list-item-icon-opacity: 1,
 );

frontend/src/components/EditToolbar.vue

@@ -480,9 +480,4 @@ defineExpose({
   }
 }
 
-.context-menu :deep() {
-  .v-list-item__prepend > .v-icon {
-    opacity: 1;
-  }
-}
 </style>

frontend/src/components/ListView.vue

@@ -1,37 +1,42 @@
 <template>
-  <v-container fluid class="pt-0">
-    <v-list v-if="items" class="pt-0 overflow-visible">
-      <div class="list-header pt-2 mb-4">
-        <h1>
-          <slot name="title" />
+  <full-height-page>
+    <v-container class="pt-0">
+      <v-list v-if="items" class="pt-0 overflow-visible">
+        <div class="list-header pt-2 mb-4">
+          <h1>
+            <slot name="title" />
 
-          <div v-if="$slots.actions" class="list-header-actions">
-            <slot name="actions" />
-          </div>
-        </h1>
+            <div v-if="$slots.actions" class="list-header-actions">
+              <slot name="actions" />
+            </div>
+          </h1>
 
-        <slot name="searchbar" :items="items">
-          <v-text-field
-            :model-value="items.search.value"
-            @update:model-value="updateSearch"
-            label="Search"
-            variant="underlined"
-            spellcheck="false"
-            hide-details="auto"
-            autofocus
-            class="mt-0 mb-2"
-          />
-        </slot>
-      </div>
+          <slot name="searchbar" :items="items">
+            <v-text-field
+              :model-value="items.search.value"
+              @update:model-value="updateSearch"
+              label="Search"
+              variant="underlined"
+              spellcheck="false"
+              hide-details="auto"
+              autofocus
+              class="mt-0 mb-2"
+            />
+          </slot>
+          <v-tabs v-if="$slots.tabs" height="30" selected-class="text-primary" class="list-header-tabs">
+            <slot name="tabs" />
+          </v-tabs>
+        </div>
 
-      <slot v-for="item in items.data.value" name="item" :item="item" />
-      <page-loader :items="items" class="mt-4" />
-      <v-list-item
-        v-if="items.data.value.length === 0 && !items.hasNextPage.value"
-        text="No data found"
-      />
-    </v-list>
-  </v-container>
+        <slot v-for="item in items.data.value" name="item" :item="item" />
+        <page-loader :items="items" class="mt-4" />
+        <v-list-item
+          v-if="items.data.value.length === 0 && !items.hasNextPage.value"
+          text="No data found"
+        />
+      </v-list>
+    </v-container>
+  </full-height-page>
 </template>
 
 <script setup lang="ts" generic="T">
@@ -86,4 +91,8 @@ defineExpose({
     margin-left: 0.4rem;
   }
 }
+
+.list-header-tabs:deep(.v-tab) {
+  text-transform: initial;
+}
 </style>

frontend/src/components/LoginProviderForm.vue

@@ -31,6 +31,10 @@
         </slot>
       </v-list>
     </v-card-text>
+    <v-card-actions v-if="$slots.actions">
+      <v-spacer />
+      <slot name="actions" />
+    </v-card-actions>
   </s-card>
 </template>
 

frontend/src/components/ProInfo.vue

@@ -24,6 +24,6 @@ const apiSettings = useApiSettings();
 }
 .pro-badge {
   color: rgb(var(--v-theme-primary));
-  font-weight: 800;
+  font-weight: 900;
 }
 </style>

frontend/src/composables/auth.ts

@@ -1,3 +1,4 @@
+import type { NavigateToOptions } from "nuxt/dist/app/composables/router";
 import type { LocationQueryValue } from "#vue-router";
 import { AuthProviderType } from "@/utils/types";
 import type { AuthProvider, User } from "@/utils/types";
@@ -36,6 +37,9 @@ export const useAuthStore = defineStore('auth', {
         this.authRedirect = redirect;
       }
     },
+    clearAuthRedirect() {
+      this.authRedirect = null;
+    }
   },
   persist: {
     storage: persistedState.sessionStorage,
@@ -72,10 +76,10 @@ export function useAuth() {
     return await navigateTo(redirect, { external });
   }
 
-  async function redirectToReAuth() {
+  async function redirectToReAuth(options?: NavigateToOptions) {
     const route = useRoute();
     store.setAuthRedirect(route.fullPath);
-    return await navigateTo('/login/reauth/');
+    return await navigateTo('/login/reauth/', options);
   }
 
   async function logout() {

frontend/src/layouts/default.vue

@@ -2,7 +2,7 @@
   <div class="height-fullscreen">
     <nuxt-loading-indicator :height="2" :color="false" />
     <v-app-bar absolute height="48" elevation="0" color="header" class="menu-appbar">
-      <v-app-bar-nav-icon v-if="auth.loggedIn.value" @click="navigationDrawerVisible = !navigationDrawerVisible" :ripple="false" color="logo">
+      <v-app-bar-nav-icon v-if="auth.loggedIn.value" @click="navigationDrawerVisible = !navigationDrawerVisible" :ripple="false">
         <svg-logo />
       </v-app-bar-nav-icon>
       <div v-else class="menu-drawer-header">
@@ -43,10 +43,10 @@
         <span class="license-text">{{ licenseText }}</span>
       </div>
       <v-list class="pt-0 menu-drawer-body">
-        <v-list-item to="/projects/" title="Projects" prepend-icon="mdi-file-document" />
-        <v-list-item to="/templates/" title="Templates" prepend-icon="mdi-view-compact" />
-        <v-list-item to="/designs/" title="Designs" prepend-icon="mdi-pencil-ruler" />
-        <v-list-item to="/notes/personal/" title="Notes" prepend-icon="mdi-notebook" />
+        <v-list-item to="/projects/" title="Projects" prepend-icon="mdi-file-document" :active="route.path.startsWith('/projects')" />
+        <v-list-item to="/templates/" title="Templates" prepend-icon="mdi-view-compact" :active="route.path.startsWith('/templates')" />
+        <v-list-item to="/designs/" title="Designs" prepend-icon="mdi-pencil-ruler" :active="route.path.startsWith('/designs')" />
+        <v-list-item to="/notes/personal/" title="Notes" prepend-icon="mdi-notebook" :active="route.path.startsWith('/notes')" />
 
         <template v-if="auth.permissions.superuser || auth.permissions.user_manager || auth.permissions.view_license">
           <v-list-item class="mt-6 pa-0" min-height="0">
@@ -74,7 +74,13 @@
             </template>
           </v-list-item>
 
-          <v-list-item to="/users/" title="Users" prepend-icon="mdi-account-multiple" :disabled="!auth.permissions.user_manager" />
+          <v-list-item 
+            to="/users/" 
+            title="Users" 
+            prepend-icon="mdi-account-multiple" 
+            :active="route.path.startsWith('/users') && !route.path.startsWith('/users/self')"
+            :disabled="!auth.permissions.user_manager" 
+          />
           <license-info-menu-item />
         </template>
       </v-list>
@@ -167,8 +173,10 @@ head.hooks.hook('dom:beforeRender', syncBreadcrumbs);
   fill: rgb(var(--v-theme-primary));
 }
 
-.v-breadcrumbs-item .v-icon {
-  font-size: 1.5em;
+.v-breadcrumbs-item {
+  .v-icon {
+    font-size: 1.5em;
+  }
 }
 
 .menu-drawer:deep() {
@@ -212,8 +220,8 @@ head.hooks.hook('dom:beforeRender', syncBreadcrumbs);
     align-items: center;
     flex-grow: 0;
     flex-shrink: 0;
-    padding-left: 1em;
-    padding-right: 1em;
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
     cursor: pointer;
     border-bottom-width: vuetify.$navigation-drawer-border-thin-width;
     border-bottom-style: vuetify.$navigation-drawer-border-style;
@@ -240,8 +248,8 @@ head.hooks.hook('dom:beforeRender', syncBreadcrumbs);
   height: 28px;
   display: flex;
   flex-direction: column-reverse;
-  font-weight: 800;
-  font-size: larger;
+  font-weight: 900;
+  font-size: 1.5rem;
   line-height: 1;
   color: rgb(var(--v-theme-logo));
 }

frontend/src/pages/designs/[projectTypeId]/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-container fluid class="pt-0">
+  <v-container class="pt-0">
     <v-form ref="form">
       <edit-toolbar v-bind="toolbarAttrs" :form="$refs.form">
         <template #context-menu>