Update UI/1.5.0 (epicmaxco#893)

* fix colors in globalConfig * fix round buttons * remove VaSidebar conf * add brealpoints, rename classes * fix grid page * restore colors config * fix pages layouts * fix yarn build * restore changes * fix color picker dropdown * refactor: rename prop name * remove buttons config * update version * fix: dashboard * added layout classes * fix tree view * fix color names * remove useless colors form components * refactor: change class names * apply useColors util * fix removed colors ar 404 page * remove useless gradiet at 404 page * replace css var with colors * remove background * chore: bump version * fix: add vModel to display dropdown * refactor: add presets, use presets * fix: align text, update text color * fix: update markup * fix: fix top navigation * fix colors in map * fix remove debug color * replace margin by class helper * remove v-model bcs dropdown is statefull in new version * replace p tag ny h2 tag, replace margin by helper class * replace margin by helper class * fix colors * change vuestci version * add themes from the box * fix toggle in color dropdown * fix asva review * add text computed to grid Co-authored-by: azgiliat <[email protected]> Co-authored-by: Rustem Nasyrov <[email protected]> Co-authored-by: Rustem Nasyrov <[email protected]> Co-authored-by: azgiliat <[email protected]> Co-authored-by: azgiliat <[email protected]>
siberfx · Nov 1, 2022 · 8ad0d79 · 8ad0d79
1 parent 891077a
commit 8ad0d79
Show file tree

Hide file tree

Showing 59 changed files with 846 additions and 685 deletions.
diff --git a/package.json b/package.json
@@ -39,7 +39,7 @@
     "vue-i18n": "^9.1.10",
     "vue-router": "^4.0.14",
     "vue-yandex-maps": "^0.12.3",
-    "vuestic-ui": "^1.4.13"
+    "vuestic-ui": "^1.5.0"
   },
   "devDependencies": {
     "@intlify/vite-plugin-vue-i18n": "^5.0.1",

diff --git a/src/App.vue b/src/App.vue
@@ -2,11 +2,6 @@
   <router-view />
 </template>
 
-<script setup lang="ts">
-  import { useTheme } from './services/vuestic-ui/themes'
-  useTheme()
-</script>
-
 <style lang="scss">
   @import 'scss/main.scss';
 
@@ -19,6 +14,5 @@
 
   body {
     margin: 0;
-    background: var(--va-background);
   }
 </style>
diff --git a/src/components/maps/LineMap.vue b/src/components/maps/LineMap.vue
@@ -8,7 +8,7 @@
   import * as am5map from '@amcharts/amcharts5/map'
   import am5geodata_worldLow from '@amcharts/amcharts5-geodata/worldLow'
   import am5themes_Animated from '@amcharts/amcharts5/themes/Animated'
-  import { useGlobalConfig, useColors } from 'vuestic-ui'
+  import { useColors } from 'vuestic-ui'
 
   import {
     planeSVG,
@@ -39,9 +39,7 @@
     (e: 'update:modelValue', value: string): void
   }>()
 
-  const { getGlobalConfig } = useGlobalConfig()
-  const { getColor } = useColors()
-
+  const { colors } = useColors()
   const mapRef = ref()
   const mapRoot = shallowRef()
   const mapChart = shallowRef()
@@ -53,8 +51,6 @@
   const mapLabelSvg = shallowRef()
   const mapHomeCityButton = shallowRef()
 
-  const themeColors = computed(() => getGlobalConfig().colors)
-
   const mainCity = computed({
     get() {
       return props.modelValue
@@ -106,7 +102,7 @@
     )
 
     polygonSeries.mapPolygons.template.setAll({
-      fill: am5.color(getColor(themeColors.value?.secondary)),
+      fill: am5.color(colors.secondary),
       fillOpacity: 0.4,
       strokeWidth: 0.5,
     })
@@ -140,7 +136,7 @@
             y: am5.percent(50),
             centerX: am5.percent(50),
             centerY: am5.percent(50),
-            fill: am5.color(isMainCity ? getColor(themeColors.value?.primary) : itemData.color),
+            fill: am5.color(isMainCity ? colors.primary : itemData.color),
             scale: isMainCity ? 1.5 : 1,
             tooltipText: '{title}',
           },
@@ -153,7 +149,7 @@
     const lineSeries = chart.series.push(am5map.MapLineSeries.new(root, {}))
 
     lineSeries.mapLines.template.setAll({
-      stroke: am5.color(getColor(themeColors.value?.primary)),
+      stroke: am5.color(colors.primary),
       strokeWidth: 2,
       strokeOpacity: 0.5,
     })
@@ -174,14 +170,14 @@
     const labelSvg = labelContainer.children.push(
       am5.Graphics.new(root, {
         svgPath: planeSVG,
-        fill: am5.color(getColor(themeColors.value?.info)),
+        fill: am5.color(colors.info),
       }),
     )
 
     const labelText = labelContainer.children.push(
       am5.Label.new(root, {
         text: generateLabelText(getItemByMainCityTitle()?.title),
-        fill: am5.color(getColor(themeColors.value?.info)),
+        fill: am5.color(colors.info),
         fontSize: 22,
         lineHeight: am5.p100,
       }),
@@ -236,15 +232,15 @@
   const updateChartDataOnChangeTheme = () => {
     if (mapRoot.value) {
       mapPolygonSeries.value.mapPolygons.template.setAll({
-        fill: am5.color(getColor(themeColors.value?.secondary)),
+        fill: am5.color(colors.secondary),
       })
 
       mapLineSeries.value.mapLines.template.setAll({
-        stroke: am5.color(getColor(themeColors.value?.primary)),
+        stroke: am5.color(colors.primary),
       })
 
-      mapLabelText.value.set('fill', am5.color(getColor(themeColors.value?.info)))
-      mapLabelSvg.value.set('fill', am5.color(getColor(themeColors.value?.info)))
+      mapLabelText.value.set('fill', am5.color(colors.info))
+      mapLabelSvg.value.set('fill', am5.color(colors.info))
 
       setPointSeriesData()
     }
@@ -267,7 +263,7 @@
 
   onMounted(createMap)
   onUpdated(updateChartDataOnUpdateProps)
-  watch(themeColors, updateChartDataOnChangeTheme)
+  watch(colors, updateChartDataOnChangeTheme)
   onBeforeUnmount(disposeMap)
 </script>
 

diff --git a/src/components/navbar/Navbar.vue b/src/components/navbar/Navbar.vue
@@ -1,39 +1,44 @@
 <template>
-  <div class="app-layout__navbar">
-    <va-navbar>
-      <template #left>
-        <div class="left">
-          <va-icon-menu-collapsed
-            :class="{ 'x-flip': isSidebarMinimized }"
-            class="va-navbar__item"
-            :color="colors.primary"
-            @click="isSidebarMinimized = !isSidebarMinimized"
-          />
-          <router-link to="/">
-            <vuestic-logo class="logo" />
-          </router-link>
-        </div>
-      </template>
-      <template #center>
-        <span class="app-navbar__text">
-          {{ t('navbar.messageUs') }}&nbsp;
-          <a href="mailto:[email protected]" target="_blank" :style="{ color: colors.primary }"> [email protected] </a>
-          <va-button
-            href="https://github.com/epicmaxco/vuestic-admin"
-            color="#000000"
-            class="app-navbar__github-button"
-            icon="github"
-            target="_blank"
-          >
-            {{ t('navbar.repository') }}
-          </va-button>
-        </span>
-      </template>
-      <template #right>
-        <app-navbar-actions class="app-navbar__actions md5 lg4" :user-name="userName" />
-      </template>
-    </va-navbar>
-  </div>
+  <va-navbar class="app-layout-navbar">
+    <template #left>
+      <div class="left">
+        <va-icon-menu-collapsed
+          :class="{ 'x-flip': isSidebarMinimized }"
+          class="va-navbar__item"
+          :color="colors.primary"
+          @click="isSidebarMinimized = !isSidebarMinimized"
+        />
+        <router-link to="/">
+          <vuestic-logo class="logo" />
+        </router-link>
+      </div>
+    </template>
+    <template #center>
+      <div class="app-navbar-center">
+        <span class="app-navbar-center__text mr-2">{{ t('navbar.messageUs') }}</span>
+        <a
+          class="app-navbar-center__mail mr-2"
+          href="mailto:[email protected]"
+          target="_blank"
+          :style="{ color: colors.primary }"
+        >
+          [email protected]
+        </a>
+        <va-button
+          href="https://github.com/epicmaxco/vuestic-admin"
+          color="#000000"
+          class="app-navbar-center__github-button"
+          icon="github"
+          target="_blank"
+        >
+          {{ t('navbar.repository') }}
+        </va-button>
+      </div>
+    </template>
+    <template #right>
+      <app-navbar-actions class="app-navbar__actions md5 lg4" :user-name="userName" />
+    </template>
+  </va-navbar>
 </template>
 
 <script setup>
@@ -60,23 +65,11 @@
     box-shadow: var(--va-box-shadow);
     z-index: 2;
 
-    &__center {
-      @media screen and (max-width: 1200px) {
-        .app-navbar__github-button {
-          display: none;
-        }
-      }
-      @media screen and (max-width: 950px) {
-        .app-navbar__text {
-          display: none;
-        }
-      }
-    }
-
     @media screen and (max-width: 950px) {
       .left {
         width: 100%;
       }
+
       .app-navbar__actions {
         width: 100%;
         display: flex;
@@ -88,9 +81,11 @@
   .left {
     display: flex;
     align-items: center;
+
     & > * {
       margin-right: 1.5rem;
     }
+
     & > *:last-child {
       margin-right: 0;
     }
@@ -100,10 +95,20 @@
     transform: scaleX(-100%);
   }
 
-  .app-navbar__text > * {
-    margin-right: 0.5rem;
-    &:last-child {
-      margin-right: 0;
+  .app-navbar-center {
+    display: flex;
+    align-items: center;
+
+    @media screen and (max-width: 1200px) {
+      &__github-button {
+        display: none;
+      }
+    }
+
+    @media screen and (max-width: 950px) {
+      &__text {
+        display: none;
+      }
     }
   }
 </style>
diff --git a/src/components/navbar/components/AppNavbarActions.vue b/src/components/navbar/components/AppNavbarActions.vue
@@ -77,7 +77,7 @@
         background-color: var(--va-white);
       }
 
-      @media screen and (max-width: 768px) {
+      @media screen and (max-width: 640px) {
         margin-right: 0;
 
         &:first-of-type {

diff --git a/src/components/navbar/components/dropdowns/ColorDropdown.vue b/src/components/navbar/components/dropdowns/ColorDropdown.vue
@@ -6,11 +6,13 @@
 
     <va-dropdown-content class="color-dropdown__content pl-4 pr-4 pt-2 pb-2">
       <va-button-toggle
-        v-model="selectedThemeName"
-        :options="buttonToggleOptions"
+        v-model="currentTheme"
+        class="color-dropdown__toggle"
+        :options="themeOptions"
         outline
+        round
+        grow
         size="small"
-        style="max-width: 100%"
       />
 
       <table style="width: 100%">
@@ -26,49 +28,24 @@
 </template>
 
 <script setup lang="ts">
-  import { computed } from 'vue'
-  import { useRouter } from 'vue-router'
-  import { useColors } from 'vuestic-ui'
   import VaIconColor from '../../../icons/VaIconColor.vue'
   import ColorDropdownItem from './ColorDropdownItem.vue'
-  import { THEME_NAMES, useTheme } from '../../../../services/vuestic-ui/themes'
-
-  const { getColors } = useColors()
-  const router = useRouter()
-  const { setTheme, themeName } = useTheme()
+  import { useColors } from 'vuestic-ui'
+  import { ref, watchEffect } from 'vue'
 
-  // onMounted(() => {
-  setTheme(getThemeNameFromUrl() as keyof typeof THEME_NAMES)
-  // });
+  const { presets, applyPreset, colors } = useColors()
 
-  const buttonToggleOptions = [
-    { label: 'Light', value: THEME_NAMES.LIGHT },
-    { label: 'Semi-Dark', value: THEME_NAMES.SEMI_DARK },
-    // { label: 'Dark', value: THEME_NAMES.DARK },
-    { label: 'Original', value: THEME_NAMES.ORIGINAL },
-  ]
+  const currentTheme = ref('light')
 
-  const selectedThemeName = computed({
-    get: () => themeName.value,
-    set: (newThemeName) => setTheme(newThemeName as keyof typeof THEME_NAMES),
+  watchEffect(() => {
+    applyPreset(currentTheme.value)
   })
 
-  const colors = getColors()
-  const colorNames = computed(() => Object.keys(colors))
-
-  function getThemeNameFromUrl() {
-    const themeName = router.currentRoute.value.query.theme
-
-    if (themeName === 'semi-dark') {
-      return THEME_NAMES.SEMI_DARK
-    } else if (themeName === 'dark') {
-      return THEME_NAMES.DARK
-    } else if (themeName === 'original') {
-      return THEME_NAMES.ORIGINAL
-    } else {
-      return THEME_NAMES.LIGHT
-    }
-  }
+  const themeOptions = Object.keys(presets.value).map((themeName) => ({
+    value: themeName,
+    label: themeName,
+  }))
+  const colorNames = Object.keys(colors)
 </script>
 
 <style lang="scss" scoped>
@@ -84,6 +61,12 @@
     .va-dropdown__anchor {
       display: inline-block;
     }
+
+    &__toggle {
+      width: 100%;
+      display: flex;
+      justify-content: stretch;
+    }
   }
 
   .button-restore {

diff --git a/src/components/navbar/components/dropdowns/LanguageDropdown.vue b/src/components/navbar/components/dropdowns/LanguageDropdown.vue
@@ -23,6 +23,7 @@
 
 <script setup lang="ts">
   import { useI18n } from 'vue-i18n'
+
   const { t, locale } = useI18n()
 
   withDefaults(

diff --git a/src/components/navbar/components/dropdowns/MessageDropdown.vue b/src/components/navbar/components/dropdowns/MessageDropdown.vue
@@ -19,9 +19,15 @@
       </div>
       <div class="row justify--space-between mt-1">
         <va-button class="md6 mr-2" size="small">{{ t('messages.all') }}</va-button>
-        <va-button class="md6" size="small" outline :disabled="allRead" @click="markAllAsRead">{{
-          t('messages.mark_as_read')
-        }}</va-button>
+        <va-button
+          class="md6"
+          size="small"
+          preset="outline"
+          border-color="primary"
+          :disabled="allRead"
+          @click="markAllAsRead"
+          >{{ t('messages.mark_as_read') }}</va-button
+        >
       </div>
     </va-dropdown-content>
   </va-dropdown>