From cefc1032eca5d8ce198dc1de6580c3f18d3588f6 Mon Sep 17 00:00:00 2001 From: NFriedo <69233063+NFriedo@users.noreply.github.com> Date: Mon, 6 Nov 2023 11:52:48 +0100 Subject: [PATCH 1/2] BC-5508: update v-text-field --- src/components/atoms/vCustomBreadcrumbs.vue | 4 ++-- .../configuration/ExternalToolConfigParameter.vue | 6 ++++++ .../ExternalToolElementConfigurationDialog.vue | 2 ++ .../LinkContentElementEdit.vue | 2 ++ src/components/feature-date-time-picker/DatePicker.vue | 2 ++ src/components/feature-date-time-picker/TimePicker.vue | 2 ++ src/components/molecules/ImportModal.vue | 2 ++ src/components/molecules/RoomModal.vue | 2 ++ src/components/organisms/FormCreateUser.vue | 6 ++++++ .../organisms/administration/GeneralSettings.vue | 1 + .../organisms/administration/ImportUsers.vue | 10 ++++++++++ src/components/share/ImportModal.vue | 2 ++ src/components/share/ShareModalResult.vue | 1 + src/pages/administration/StudentCreate.page.vue | 2 ++ .../ContextExternalToolConfigurator.page.vue | 4 +++- src/pages/rooms/RoomDetails.page.vue | 7 ++++--- src/pages/rooms/RoomList.page.vue | 1 + src/pages/rooms/RoomOverview.page.vue | 1 + 18 files changed, 51 insertions(+), 6 deletions(-) diff --git a/src/components/atoms/vCustomBreadcrumbs.vue b/src/components/atoms/vCustomBreadcrumbs.vue index 9cf12fb20f..e80b8220e0 100644 --- a/src/components/atoms/vCustomBreadcrumbs.vue +++ b/src/components/atoms/vCustomBreadcrumbs.vue @@ -36,11 +36,11 @@ defineProps({ display: inline-flex; } -:deep(.v-breadcrumbs .v-breadcrumbs-item) { +:deep(.v-breadcrumbs-item) { color: rgba(var(--v-theme-primary)); } -:deep(.v-breadcrumbs .v-breadcrumbs-item--disabled) { +:deep(.v-breadcrumbs-item--disabled) { color: rgba(var(--v-theme-secondary)); } diff --git a/src/components/external-tools/configuration/ExternalToolConfigParameter.vue b/src/components/external-tools/configuration/ExternalToolConfigParameter.vue index 2368c958bc..c7d668722e 100644 --- a/src/components/external-tools/configuration/ExternalToolConfigParameter.vue +++ b/src/components/external-tools/configuration/ExternalToolConfigParameter.vue @@ -14,6 +14,8 @@ :rules="validateParameter(parameter, inputValue)" validate-on="blur" :data-testId="parameter.name" + variant="underlined" + color="primary" /> diff --git a/src/components/feature-board-external-tool-element/ExternalToolElementConfigurationDialog.vue b/src/components/feature-board-external-tool-element/ExternalToolElementConfigurationDialog.vue index 2845d6f73c..8e3116c136 100644 --- a/src/components/feature-board-external-tool-element/ExternalToolElementConfigurationDialog.vue +++ b/src/components/feature-board-external-tool-element/ExternalToolElementConfigurationDialog.vue @@ -30,6 +30,8 @@ persistent-hint validate-on="blur" data-testId="parameter-display-name" + variant="underlined" + color="primary" /> diff --git a/src/components/feature-board-link-element/LinkContentElementEdit.vue b/src/components/feature-board-link-element/LinkContentElementEdit.vue index df8438f71e..1d188111be 100644 --- a/src/components/feature-board-link-element/LinkContentElementEdit.vue +++ b/src/components/feature-board-link-element/LinkContentElementEdit.vue @@ -9,6 +9,8 @@ :autofocus="true" required validate-on="lazy" + variant="underlined" + color="primary" > diff --git a/src/components/share/ShareModalResult.vue b/src/components/share/ShareModalResult.vue index 5b7cab10ed..0e4650b356 100644 --- a/src/components/share/ShareModalResult.vue +++ b/src/components/share/ShareModalResult.vue @@ -5,6 +5,7 @@ :model-value="shareUrl" readonly :label="`${$t(`components.molecules.share.${type}.result.linkLabel`)}`" + color="primary" />
diff --git a/src/pages/rooms/RoomDetails.page.vue b/src/pages/rooms/RoomDetails.page.vue index 745b5b349b..0df0a8e84b 100644 --- a/src/pages/rooms/RoomDetails.page.vue +++ b/src/pages/rooms/RoomDetails.page.vue @@ -95,9 +95,10 @@
diff --git a/src/pages/rooms/RoomList.page.vue b/src/pages/rooms/RoomList.page.vue index c6d4e27a5e..4244812073 100644 --- a/src/pages/rooms/RoomList.page.vue +++ b/src/pages/rooms/RoomList.page.vue @@ -24,6 +24,7 @@ class="px-1" v-model="searchText" variant="solo" + color="primary" rounded single-line :label="$t('pages.rooms.index.search.label')" diff --git a/src/pages/rooms/RoomOverview.page.vue b/src/pages/rooms/RoomOverview.page.vue index 0b69460eb7..6680ad8dec 100644 --- a/src/pages/rooms/RoomOverview.page.vue +++ b/src/pages/rooms/RoomOverview.page.vue @@ -43,6 +43,7 @@ v-model="searchText" class="room-search px-1" variant="solo" + color="primary" rounded single-line :label="$t('pages.rooms.index.search.label')" From 816031b09a684a4527d3091a731b63f01c48d5fb Mon Sep 17 00:00:00 2001 From: NFriedo <69233063+NFriedo@users.noreply.github.com> Date: Mon, 6 Nov 2023 11:53:17 +0100 Subject: [PATCH 2/2] BC-5508: update vuetify upgrade docs --- VUE3-UPGRADE-RESULTS/VUETIFY-UPGRADE.md | 73 +++++++++++++++++++++++-- 1 file changed, 68 insertions(+), 5 deletions(-) diff --git a/VUE3-UPGRADE-RESULTS/VUETIFY-UPGRADE.md b/VUE3-UPGRADE-RESULTS/VUETIFY-UPGRADE.md index 6e3025faef..8e9761c5ba 100644 --- a/VUE3-UPGRADE-RESULTS/VUETIFY-UPGRADE.md +++ b/VUE3-UPGRADE-RESULTS/VUETIFY-UPGRADE.md @@ -59,6 +59,13 @@ https://vuetifyjs.com/en/components/menus/ | colored-border | renamed to **border-color** | 1 | | dismissable | combined into **variant** prop
-> values 'elevated', 'flat', 'tonal', 'outlined', 'plain' and 'text' | outlined: ~2
text: ~10 | +> **⚠️ Upgrade Notes:** +>- v-alert types(`warning`, `error`) icons are different in vuetify 3 -> talk to UX +>- to achieve the same alert look we had before: add `variant="tonal"` (when `text` was used) +>- `transition` prop has been removed, have to wrap the component into transition component +>- transitions need condition: v-if or v-show, see: https://vuejs.org/guide/built-ins/transition.html + + ## v-btn | | Changes | Files probably affected in our code | @@ -68,6 +75,11 @@ https://vuetifyjs.com/en/components/menus/ | depressed | renamed to **variant="flat"** | ~30 | | disabled | uses **faded** variant of specified color instead of grey, $button-colored-disabled sass variable can be set to false to use grey instead. | | +> **⚠️ Upgrade Notes:** +>- Disabled buttons use a faded variant of the specified color instead of grey (#15147) +The `$button-colored-disabled` sass variable can be set to false to use grey instead. +-> Talk to UX what we want to use + ## inputs | | Changes | Files probably affected in our code | @@ -77,7 +89,13 @@ https://vuetifyjs.com/en/components/menus/ | append-outer (slots) | append | 0 | | Variant props filled/outlined/solo | combined into variant prop
-> values 'underlined', 'outlined', 'filled', 'solo', 'plain' | filled: 3
outlined: 0
solo: 5 | | success, success-messages | **removed** | | -| validate-on-blur | renamed to validate-on="blur" | 4 | +| validate-on-blur | renamed to validate-on="blur" | 4 | + +### v-text-field/ v-select/ v-autocomplete +> **⚠️ Upgrade Notes:** +> - vuetify 2: `underlined` was default and primary color was added +> - vuetify 3: `filled` is default and no color, so we need to add `variant="underlined"` (if we want to use the old default/ no other variant is used) + `color="primary"` + ## v-checkbox/v-radio/v-switch @@ -87,6 +105,13 @@ https://vuetifyjs.com/en/components/menus/ | v-checkbox label slot | v-checkbox label slot should not longer contain a