diff --git a/package.json b/package.json index 1bb089fde6..fd57ccd895 100644 --- a/package.json +++ b/package.json @@ -33,6 +33,7 @@ "nanoid": "^3.1.7", "pinia": "0.0.5", "portal-vue": "^2.1.7", + "pretty-bytes": "^5.3.0", "resize-observer": "^1.0.0", "semver": "^7.3.2", "stylelint-config-prettier": "^8.0.1", diff --git a/src/app.vue b/src/app.vue index 3065961814..d498527228 100644 --- a/src/app.vue +++ b/src/app.vue @@ -16,6 +16,7 @@ import { defineComponent, toRefs, watch, computed } from '@vue/composition-api'; import { useAppStore } from '@/stores/app'; import { useUserStore } from '@/stores/user'; import { useProjectsStore } from '@/stores/projects'; +import useWindowSize from '@/composables/use-window-size'; export default defineComponent({ setup() { @@ -23,7 +24,7 @@ export default defineComponent({ const userStore = useUserStore(); const projectsStore = useProjectsStore(); - const { hydrating } = toRefs(appStore.state); + const { hydrating, drawerOpen } = toRefs(appStore.state); const brandStyle = computed(() => { return { @@ -31,6 +32,19 @@ export default defineComponent({ }; }); + const { width } = useWindowSize(); + + watch(width, (newWidth, oldWidth) => { + if (newWidth === null || newWidth === 0) return; + if (newWidth === oldWidth) return; + + if (newWidth >= 1424) { + if (drawerOpen.value === false) drawerOpen.value = true; + } else { + if (drawerOpen.value === true) drawerOpen.value = false; + } + }); + watch( () => userStore.state.currentUser, (newUser) => { diff --git a/src/components/v-button/v-button.vue b/src/components/v-button/v-button.vue index c0c52646dc..aea0f54757 100644 --- a/src/components/v-button/v-button.vue +++ b/src/components/v-button/v-button.vue @@ -153,7 +153,7 @@ body { --v-button-background-color-activated: var(--primary); --v-button-background-color-disabled: var(--background-normal); --v-button-font-size: 16px; - --v-button-font-weight: 500; + --v-button-font-weight: 600; --v-button-line-height: 22px; --v-button-min-width: 140px; } @@ -168,7 +168,7 @@ body { --v-button-color: var(--foreground-normal); --v-button-color-hover: var(--foreground-normal); --v-button-color-activated: var(--foreground-normal); - --v-button-background-color: var(--background-normal-alt); + --v-button-background-color: var(--border-subdued); // I'm so sorry! 🥺 --v-button-background-color-hover: var(--background-normal-alt); --v-button-background-color-activated: var(--background-normal-alt); } diff --git a/src/components/v-checkbox/v-checkbox.vue b/src/components/v-checkbox/v-checkbox.vue index df55f8e4ef..3f53ce86c4 100644 --- a/src/components/v-checkbox/v-checkbox.vue +++ b/src/components/v-checkbox/v-checkbox.vue @@ -179,13 +179,17 @@ body { position: absolute; top: 0; left: 0; - z-index: -1; + z-index: 0; width: 100%; height: 100%; background-color: var(--background-subdued); border-radius: var(--border-radius); content: ''; } + + > * { + z-index: 1; + } } &:not(:disabled):not(.indeterminate).checked { diff --git a/src/components/v-divider/v-divider.vue b/src/components/v-divider/v-divider.vue index b0a8b84769..02820a8207 100644 --- a/src/components/v-divider/v-divider.vue +++ b/src/components/v-divider/v-divider.vue @@ -56,7 +56,13 @@ body { } span.wrapper { + display: flex; margin-right: 16px; + color: var(--v-divider-label-color); + + .v-icon { + margin-right: 4px; + } } .type-text { diff --git a/src/components/v-form/form-field-interface.vue b/src/components/v-form/form-field-interface.vue index c355ee0eab..551a0e1d73 100644 --- a/src/components/v-form/form-field-interface.vue +++ b/src/components/v-form/form-field-interface.vue @@ -6,7 +6,9 @@ }" > + + + + {{ $t('interface_not_found', { interface: field.interface }) }} + diff --git a/src/components/v-form/form-field-label.vue b/src/components/v-form/form-field-label.vue index 2248ceb69d..4f7ba9cf87 100644 --- a/src/components/v-form/form-field-label.vue +++ b/src/components/v-form/form-field-label.vue @@ -61,7 +61,9 @@ export default defineComponent({ } .v-checkbox { + height: 18px; // Don't push down label with normal icon height (24px) margin-right: 4px; + transform: translateY(-2px); } .required { diff --git a/src/components/v-form/form-field.vue b/src/components/v-form/form-field.vue index 694d949204..2b7c5fa5f3 100644 --- a/src/components/v-form/form-field.vue +++ b/src/components/v-form/form-field.vue @@ -35,6 +35,7 @@ :batch-mode="batchMode" :batch-active="batchActive" :disabled="isDisabled" + :primary-key="primaryKey" @input="$emit('input', $event)" /> diff --git a/src/components/v-form/v-form.vue b/src/components/v-form/v-form.vue index a1da796e6a..c6e7208ea5 100644 --- a/src/components/v-form/v-form.vue +++ b/src/components/v-form/v-form.vue @@ -189,7 +189,7 @@ export default defineComponent({ const gridClass = computed(() => { if (el.value === null) return null; - if (width.value > 612 && width.value <= 700) { + if (width.value > 612 && width.value <= 792) { return 'grid'; } else { return 'grid with-fill'; diff --git a/src/components/v-info/v-info.vue b/src/components/v-info/v-info.vue index f7e9c748f0..dfe193a2ae 100644 --- a/src/components/v-info/v-info.vue +++ b/src/components/v-info/v-info.vue @@ -1,5 +1,5 @@ -
+

{{ title }}

@@ -27,7 +27,7 @@ > -
+
@@ -39,7 +39,7 @@ + + diff --git a/src/components/v-notice/readme.md b/src/components/v-notice/readme.md index c2c729f520..e5c9f4a507 100644 --- a/src/components/v-notice/readme.md +++ b/src/components/v-notice/readme.md @@ -11,6 +11,7 @@ | `warning` | Shows the warning notice | `false` | | `danger` | Shows the danger notice | `false` | | `icon` | Custom icon name, or false if you want to hide the icon completely | `null` | +| `center` | Render notice content centered | `false` | ## Slots | Slot | Description | Data | @@ -21,8 +22,8 @@ n/a ## CSS Variables -| Variable | Default | -|-------------------------------|----------------------------| -| `--v-notice-color` | `var(--foreground-normal);` | -| `--v-notice-background-color` | `var(--primary-alt);` | -| `--v-notice-icon-color` | `var(--primary);` | +| Variable | Default | +|-------------------------------|-----------------------------| +| `--v-notice-color` | `var(--foreground-subdued)` | +| `--v-notice-background-color` | `var(--background-subdued)` | +| `--v-notice-icon-color` | `var(--foreground-subdued)` | diff --git a/src/components/v-notice/v-notice.vue b/src/components/v-notice/v-notice.vue index 06dba31887..64123e4e7e 100644 --- a/src/components/v-notice/v-notice.vue +++ b/src/components/v-notice/v-notice.vue @@ -1,5 +1,5 @@