Merge pull request #147 from MerginMaps/redesing-settings

Redesing settings
MerginMaps · Jan 8, 2024 · d74c08d · d74c08d
2 parents 7370a3d + e38a980
commit d74c08d
Show file tree

Hide file tree

Showing 47 changed files with 791 additions and 871 deletions.
diff --git a/web-app/.eslintrc.cjs b/web-app/.eslintrc.cjs
@@ -1,7 +1,8 @@
 module.exports = {
   root: true,
   env: {
-    es2021: true
+    es2021: true,
+    browser: true
   },
   extends: [
     'plugin:vue/essential',
@@ -42,8 +43,6 @@ module.exports = {
       {
         allowModifiers: true
       }
-    ],
-    'vue/multi-word-component-names': 'off',
-    'vue/no-v-model-argument': 'off',
+    ]
   }
 }
diff --git a/web-app/package.json b/web-app/package.json
@@ -49,7 +49,7 @@
     "@esbuild-plugins/node-modules-polyfill": "^0.2.2",
     "@typescript-eslint/eslint-plugin": "^5.61.0",
     "@typescript-eslint/parser": "^5.61.0",
-    "@vitejs/plugin-vue": "^4.2.3",
+    "@vitejs/plugin-vue": "^4.6.2",
     "@vitejs/plugin-vue2": "^2.2.0",
     "@vue/eslint-config-standard": "^8.0.1",
     "@vue/eslint-config-typescript": "^11.0.2",

diff --git a/web-app/packages/app/.eslintrc.cjs b/web-app/packages/app/.eslintrc.cjs
@@ -1,11 +1,9 @@
 module.exports = {
-  env: {
-    node: true
-  },
   extends: [
     'plugin:vue/essential',
     'eslint:recommended',
     '@vue/typescript/recommended',
+    '../../.eslintrc.cjs'
   ],
   parser: 'vue-eslint-parser',
   parserOptions: {
@@ -16,7 +14,7 @@ module.exports = {
   plugins: ['@typescript-eslint'],
   rules: {
     'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
-    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
     // Vue 3 opt https://v3-migration.vuejs.org/breaking-changes/key-attribute.html#with-template-v-for
     'vue/no-v-for-template-key-on-child': 'error',
     'vue/no-v-for-template-key': 'off',

diff --git a/web-app/packages/app/src/App.vue b/web-app/packages/app/src/App.vue
@@ -12,11 +12,9 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
       v-slot="{ Component, route }"
       :key="$route.fullPath"
     >
-      <transition name="fade">
-        <div :key="route.name">
-          <component :is="Component" />
-        </div>
-      </transition>
+      <div :key="route.name">
+        <component :is="Component" />
+      </div>
     </router-view>
 
     <main
@@ -31,13 +29,11 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
       ]"
     >
       <router-view name="header" v-slot="{ Component, route }">
-        <transition name="fade">
-          <div :key="route.name">
-            <component :is="Component" />
-          </div>
-        </transition>
+        <div :key="route.name">
+          <component :is="Component" />
+        </div>
       </router-view>
-      <PDivider :pt="{ root: { class: 'm-0'}}"></PDivider>
+      <PDivider :pt="{ root: { class: 'm-0' } }"></PDivider>
       <v-card
         v-if="pingData && pingData.maintenance"
         variant="outlined"
@@ -51,7 +47,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
           >
         </v-card-text>
       </v-card>
-      <router-view v-slot="{ Component, route }">
+      <router-view v-slot="{ Component }">
         <transition name="fade">
           <component :is="Component" />
         </transition>
@@ -169,17 +165,8 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
-.fade-leave-active {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-}
-
-.fade-enter-active,
-.fade-leave-active {
-  transition: opacity 0.25s;
+.fade-enter-active {
+  transition: opacity ease-in 0.25s;
 }
 
 .fade-enter-from,

diff --git a/web-app/packages/app/src/app.ts b/web-app/packages/app/src/app.ts
@@ -6,14 +6,6 @@
 import 'material-icons/iconfont/material-icons.scss'
 import '@fortawesome/fontawesome-free/css/all.css'
 import '@mdi/font/css/materialdesignicons.css'
-import PrimeVue from 'primevue/config';
-import "primevue/resources/primevue.min.css";
-import "primeflex/primeflex.min.css"
-import "@mergin/lib/dist/sass/themes/mm-theme-light/theme.scss"
-import "@tabler/icons-webfont/tabler-icons.min.css"
-
-import '@mergin/lib/dist/style.css'
-
 import {
   dateUtils,
   textUtils,
@@ -22,6 +14,13 @@ import {
   MerginComponentUuidMixin
 } from '@mergin/lib'
 import PortalVue from 'portal-vue'
+import 'primevue/resources/primevue.min.css'
+import 'primeflex/primeflex.min.css'
+import '@mergin/lib/dist/sass/themes/mm-theme-light/theme.scss'
+import '@tabler/icons-webfont/tabler-icons.min.css'
+import '@mergin/lib/dist/style.css'
+import PrimeVue from 'primevue/config'
+import Tooltip from 'primevue/tooltip'
 import { createApp } from 'vue'
 import { createMetaManager } from 'vue-meta'
 
@@ -31,7 +30,6 @@ import { addRouterToPinia, getPiniaInstance } from './store'
 
 import i18n from '@/plugins/i18n/i18n'
 import vuetify from '@/plugins/vuetify/vuetify'
-import Tooltip from 'primevue/tooltip';
 
 const createMerginApp = () => {
   const pinia = getPiniaInstance()

diff --git a/web-app/packages/app/src/main.ts b/web-app/packages/app/src/main.ts
@@ -13,7 +13,7 @@ import {
   LayoutModule,
   InstanceModule,
   useInstanceStore,
-  initCsrfToken,
+  initCsrfToken
 } from '@mergin/lib'
 
 import { createMerginApp } from './app'

diff --git a/web-app/packages/app/src/modules/dashboard/views/DashboardView.vue b/web-app/packages/app/src/modules/dashboard/views/DashboardView.vue
@@ -15,7 +15,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
     <template #content>
       <dashboard-access-requests-row v-if="userStore.isGlobalWorkspaceAdmin">
         <template v-slot:table="{ namespace }">
-          <project-access-request-table :namespace="namespace" />
+          <access-request-table :namespace="namespace" />
         </template>
       </dashboard-access-requests-row>
       <dashboard-projects-row :canCreateProject="canCreateProject" />
@@ -29,7 +29,7 @@ import {
   DashboardUsageInfoRow,
   DashboardFullStorageWarningRow,
   DashboardAccessRequestsRow,
-  ProjectAccessRequestTable,
+  AccessRequestTable,
   FullStorageWarning,
   useUserStore,
   DashboardProjectsRow
@@ -43,7 +43,7 @@ export default defineComponent({
     DashboardAccessRequestsRow,
     DashboardFullStorageWarningRow,
     DashboardUsageInfoRow,
-    ProjectAccessRequestTable,
+    AccessRequestTable,
     FullStorageWarning,
     DashboardProjectsRow
   },

diff --git a/web-app/packages/app/src/modules/project/views/ProjectSettingsView.vue b/web-app/packages/app/src/modules/project/views/ProjectSettingsView.vue
@@ -5,8 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
 -->
 
 <template>
-  Hopaa
-  <!-- <project-settings-view-template
+  <project-settings-view-template
     :namespace="namespace"
     :projectName="projectName"
     :asAdmin="asAdmin"
@@ -17,10 +16,10 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
       <project-permissions-template
         v-model="settings.access"
         :key="keyProp"
-        @save-project="saveProject(...arguments)"
+        @save-project="saveProject"
       />
     </template>
-  </project-settings-view-template> -->
+  </project-settings-view-template>
 </template>
 
 <script lang="ts">

diff --git a/web-app/packages/app/src/modules/project/views/ProjectView.vue b/web-app/packages/app/src/modules/project/views/ProjectView.vue
@@ -59,7 +59,11 @@ export default defineComponent({
         namespace: props.namespace,
         project: props.projectName
       }
-      const dialog = { maxWidth: 580, persistent: true, header: 'Clone project' }
+      const dialog = {
+        maxWidth: 580,
+        persistent: true,
+        header: 'Clone project'
+      }
       const listeners = {
         error: (error, data) => {
           formStore.handleError({

diff --git a/web-app/packages/app/src/modules/user/views/LoginView.vue b/web-app/packages/app/src/modules/user/views/LoginView.vue
@@ -36,7 +36,7 @@ export default defineComponent({
             currentRoute: payload.currentRoute
           })
         }
-      } catch(err) {
+      } catch (err) {
         console.error(err)
       }
     }

diff --git a/web-app/packages/app/src/router.ts b/web-app/packages/app/src/router.ts
@@ -14,6 +14,10 @@ import {
   SideBarTemplate as SideBar
 } from '@mergin/lib'
 import { Pinia } from 'pinia'
+import {
+  createWebHistory,
+  createRouter as createRouterInstance
+} from 'vue-router'
 
 import DashboardView from '@/modules/dashboard/views/DashboardView.vue'
 import AppHeader from '@/modules/layout/components/AppHeader.vue'
@@ -22,10 +26,6 @@ import ProjectsListView from '@/modules/project/views/ProjectsListView.vue'
 import ProjectView from '@/modules/project/views/ProjectView.vue'
 import LoginView from '@/modules/user/views/LoginView.vue'
 import ProfileView from '@/modules/user/views/ProfileView.vue'
-import {
-  createWebHistory,
-  createRouter as createRouterInstance
-} from 'vue-router'
 
 export const createRouter = (pinia: Pinia) => {
   const router = createRouterInstance({
@@ -146,7 +146,6 @@ export const createRouter = (pinia: Pinia) => {
             }/tree${from.params.location ? `/${from.params.location}` : ''}`,
             query: { file_path: to.params.location }
           })
-          return
         }
       },
       /** Redirect of unused /history/:version_id path to /history?version_id */
@@ -161,7 +160,6 @@ export const createRouter = (pinia: Pinia) => {
             path: `/projects/${to.params.namespace}/${to.params.projectName}/history`,
             query: { version_id: to.params.version_id }
           })
-          return
         }
       },
       {

diff --git a/web-app/packages/lib/.eslintrc.cjs b/web-app/packages/lib/.eslintrc.cjs
@@ -1,11 +1,9 @@
 module.exports = {
-  env: {
-    node: true
-  },
   extends: [
     'plugin:vue/essential',
     'eslint:recommended',
-    '@vue/typescript/recommended'
+    '@vue/typescript/recommended',
+    '../../.eslintrc.cjs'
   ],
   parser: 'vue-eslint-parser',
   parserOptions: {

diff --git a/web-app/packages/lib/components.d.ts b/web-app/packages/lib/components.d.ts
@@ -44,7 +44,6 @@ declare module 'vue' {
     VChipGroup: typeof import('vuetify/components')['VChipGroup']
     VCol: typeof import('vuetify/components')['VCol']
     VContainer: typeof import('vuetify/components')['VContainer']
-    VDataTable: typeof import('vuetify/components')['VDataTable']
     VDivider: typeof import('vuetify/components')['VDivider']
     VForm: typeof import('vuetify/components')['VForm']
     VIcon: typeof import('vuetify/components')['VIcon']
@@ -56,7 +55,6 @@ declare module 'vue' {
     VProgressCircular: typeof import('vuetify/components')['VProgressCircular']
     VResponsive: typeof import('vuetify/components')['VResponsive']
     VRow: typeof import('vuetify/components')['VRow']
-    VSelect: typeof import('vuetify/components')['VSelect']
     VSnackbar: typeof import('vuetify/components')['VSnackbar']
     VSpacer: typeof import('vuetify/components')['VSpacer']
     VTextField: typeof import('vuetify/components')['VTextField']

diff --git a/web-app/packages/lib/src/assets/sass/themes/mm-theme-light/_variables.scss b/web-app/packages/lib/src/assets/sass/themes/mm-theme-light/_variables.scss
@@ -52,7 +52,7 @@ $colors: (
     --surface-f:#ffffff;
     --text-color: #{map-get($colors , "night")};
     --text-color-secondary:#aaacad;
-    --primary-color:$primaryColor;
+    --primary-color:#{$primaryColor};
     --primary-color-text:#ffffff;
     --font-family:inherit;
     --surface-0: #ffffff;

diff --git a/web-app/packages/lib/src/assets/sass/themes/mm-theme-light/variables/_general.scss b/web-app/packages/lib/src/assets/sass/themes/mm-theme-light/variables/_general.scss
@@ -64,7 +64,7 @@ $inlineSpacing: .5rem;
 
 /// Opacity of the disabled elements
 /// @group general
-$disabledOpacity: .8;
+$disabledOpacity: .4;
 
 /// Background of the modal layer
 /// @group general

diff --git a/web-app/packages/lib/src/assets/trash.svg b/web-app/packages/lib/src/assets/trash.svg