bfg-common 1.5.753 → 1.5.755

package/components/common/pages/backups/backupsNew/Skeleton.vue

@@ -0,0 +1,112 @@
+<template>
+  <div class="skeleton-page grid gap-3 p-4 h-inherit overflow-hidden">
+    <div class="left-content grid p-4">
+      <div class="flex justify-between gap-4 flex-wrap">
+        <ui-skeleton-item width="80" height="20" />
+        <ui-skeleton-item width="160" height="36" />
+      </div>
+      <div class="border-block flex flex-col py-3 px-4 my-4">
+        <ui-skeleton-item width="100%" height="20" />
+        <ui-skeleton-item width="50%" height="20" />
+        <ui-skeleton-item width="30%" height="20" />
+        <ui-skeleton-item width="70%" height="20" />
+        <ui-skeleton-item width="20%" height="20" />
+        <ui-skeleton-item width="50%" height="20" />
+        <ui-skeleton-item width="80%" height="20" />
+        <ui-skeleton-item width="70%" height="20" />
+        <ui-skeleton-item width="20%" height="20" />
+      </div>
+      <ui-skeleton-item width="96" height="20" class="ml-auto" />
+    </div>
+    <div class="right-content grid p-4">
+      <div class="flex justify-between gap-4 flex-wrap top-container">
+        <ui-skeleton-item width="80" height="20" />
+        <div class="actions-block flex">
+          <ui-skeleton-item width="20" height="20" />
+          <div class="line-border"></div>
+          <ui-skeleton-item width="20" height="20" />
+          <div class="line-border"></div>
+          <ui-skeleton-item width="20" height="20" />
+        </div>
+      </div>
+      <div class="details-block flex flex-col my-6">
+        <div
+          v-for="index in detailsItemsCount"
+          :key="index"
+          class="details-block-item flex p-3"
+        >
+          <ui-skeleton-item width="20" height="20" class="mr-[10px]" />
+          <ui-skeleton-item width="144" height="20" />
+          <ui-skeleton-item width="144" height="20" class="ml-auto" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const detailsItemsCount = ref<number>(3)
+</script>
+
+<style>
+:root {
+  --backups-left-skeleton-border-color: #e9ebed;
+  --backups-right-skeleton-action-line-border-color: #e9ebeda3;
+  --backups-right-skeleton-item-bg-color: #e9ebed66;
+}
+:root.dark-theme {
+  --backups-left-skeleton-border-color: #e9ebed1f;
+  --backups-right-skeleton-action-line-border-color: #e9ebed1f;
+  --backups-right-skeleton-item-bg-color: #e9ebed0f;
+}
+</style>
+
+<style scoped lang="scss">
+.skeleton-page {
+  grid-template-columns: repeat(2, calc(50% - 6px));
+
+  .left-content,
+  .right-content {
+    background-color: var(--backups-page-inner-block-bg);
+    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.0784313725);
+    border-radius: 8px;
+    grid-template-rows: max-content 1fr max-content;
+    overflow: hidden;
+  }
+  .border-block {
+    border: 1px solid var(--backups-left-skeleton-border-color);
+    border-radius: 8px;
+    grid-row-gap: 10px;
+    overflow: auto;
+
+    :deep(.skeleton-item) {
+      min-height: 20px;
+    }
+  }
+  .right-content {
+    .top-container {
+      .actions-block {
+        grid-column-gap: 10px;
+
+        .line-border {
+          border: 1px solid
+            var(--backups-right-skeleton-action-line-border-color);
+        }
+      }
+    }
+    .details-block {
+      grid-row-gap: 10px;
+      overflow: auto;
+
+      .details-block-item {
+        background-color: var(--backups-right-skeleton-item-bg-color);
+        border-radius: 6px;
+      }
+
+      :deep(.skeleton-item) {
+        min-height: 20px;
+      }
+    }
+  }
+}
+</style>

package/components/common/pages/backups/backupsNew/contextMenuView/ContextMenuView.vue

@@ -80,20 +80,26 @@ const onSelectContextMenuItem = (item: UI_I_ContextMenuItem): void => {
 
 <style scoped lang="scss">
 .backups-context-menu-view {
-  :deep(.menu-item) {
-    .context-icon {
-      display: none;
-    }
+  :deep(.context-wrap) {
+    min-width: 112px;
 
-    .item-ui-icon {
-      margin-right: 8px;
-    }
+    .menu-item {
+      .context-icon {
+        display: none;
+      }
 
-    &:last-child {
-      color: #ea3223;
+      .item-ui-icon {
+        margin-right: 8px;
+        width: 16px;
+        height: 16px;
+      }
 
-      .context-link:hover {
+      &:last-child {
         color: #ea3223;
+
+        .context-link:hover {
+          color: #ea3223;
+        }
       }
     }
   }

package/components/common/vm/snapshots/new/New.vue

@@ -433,6 +433,9 @@ watch(height, () => {
       line-height: 18px;
       text-align: right;
     }
+    :deep(.ui-main-info-block-item) {
+      grid-column-gap: 10px;
+    }
     :deep(.ui-main-info-block-item-right) {
       white-space: unset !important;
       max-width: 50%;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "bfg-common",
   "private": false,
-  "version": "1.5.753",
+  "version": "1.5.755",
   "scripts": {
     "build": "nuxt build",
     "dev": "nuxt dev --port=3002",

package/plugins/time.ts

@@ -1,58 +1,58 @@
-import { defineNuxtPlugin } from '#app'
-import type { UI_T_LangValue } from '~/lib/models/types'
-export default defineNuxtPlugin(() => {
-  const time = function (): any {
-    const self: any = {}
-    self.millisecondsToHour = function (ms: number): number {
-      return ~~(ms / 1000 / 60 / 60 / 24)
-    }
-    self.formatTime = (
-      seconds: number,
-      lang: UI_T_LangValue = 'ru_RU'
-    ): string => {
-      const units = {
-        en_US: { s: 's', m: 'm', h: 'h' },
-        ru_RU: { s: 'с', m: 'м', h: 'ч' },
-        hy_AM: { s: 'վ', m: 'ր', h: 'ժ' },
-        be_BY: { s: 'с', m: 'хв', h: 'г' },
-        kk_KZ: { s: 'сек', m: 'мин', h: 'сағ' },
-        zh_CHS: { s: '秒', m: '分', h: '时' },
-        BROWSER: { s: 's', m: 'm', h: 'h' },
-      }
-
-      const unit = units[lang] || units.en_US
-
-      if (seconds < 60) {
-        return `${seconds}${unit.s}`
-      }
-
-      const hours = Math.floor(seconds / 3600)
-      const minutes = Math.floor((seconds % 3600) / 60)
-      const secs = seconds % 60
-
-      let result = ''
-
-      if (hours > 0) {
-        result += `${hours}${unit.h} `
-      }
-
-      if (minutes > 0) {
-        result += `${minutes}${unit.m} `
-      }
-
-      if (secs > 0) {
-        result += `${secs}${unit.s}`
-      }
-
-      return result.trim()
-    }
-
-    return self
-  }.call({})
-
-  return {
-    provide: {
-      time,
-    },
-  }
-})
+import { defineNuxtPlugin } from '#app'
+import type { UI_T_LangValue } from '~/lib/models/types'
+export default defineNuxtPlugin(() => {
+  const time = function (): any {
+    const self: any = {}
+    self.millisecondsToHour = function (ms: number): number {
+      return ~~(ms / 1000 / 60 / 60 / 24)
+    }
+    self.formatTime = (
+      seconds: number,
+      lang: UI_T_LangValue = 'ru_RU'
+    ): string => {
+      const units = {
+        en_US: { s: 's', m: 'm', h: 'h' },
+        ru_RU: { s: 'с', m: 'м', h: 'ч' },
+        hy_AM: { s: 'վ', m: 'ր', h: 'ժ' },
+        be_BY: { s: 'с', m: 'хв', h: 'г' },
+        kk_KZ: { s: 'сек', m: 'мин', h: 'сағ' },
+        zh_CHS: { s: '秒', m: '分', h: '时' },
+        BROWSER: { s: 's', m: 'm', h: 'h' },
+      }
+
+      const unit = units[lang] || units.en_US
+
+      if (seconds < 60) {
+        return `${seconds}${unit.s}`
+      }
+
+      const hours = Math.floor(seconds / 3600)
+      const minutes = Math.floor((seconds % 3600) / 60)
+      const secs = seconds % 60
+
+      let result = ''
+
+      if (hours > 0) {
+        result += `${hours}${unit.h} `
+      }
+
+      if (minutes > 0) {
+        result += `${minutes}${unit.m} `
+      }
+
+      if (secs > 0) {
+        result += `${secs}${unit.s}`
+      }
+
+      return result.trim()
+    }
+
+    return self
+  }.call({})
+
+  return {
+    provide: {
+      time,
+    },
+  }
+})