diff options
author | Christoph Wurst <ChristophWurst@users.noreply.github.com> | 2024-03-11 12:50:00 +0100 |
---|---|---|
committer | GitHub <noreply@github.com> | 2024-03-11 12:50:00 +0100 |
commit | af939093396b0aa2f7511861f34ff6941f11e330 (patch) | |
tree | adaf8d765a6c534086469d7845aede0862edc457 | |
parent | ff328f227a5ffa61861a74d9148ba740ceb55e1b (diff) | |
parent | b168504dc80b5e51f493685cd8cfebc9468d5707 (diff) |
Merge pull request #3846 from nextcloud/chore/vue3/migrate-v-deep
chore(vue3): migrate ::v-deep to :deep
-rw-r--r-- | src/components/AppNavigation/RootNavigation.vue | 6 | ||||
-rw-r--r-- | src/components/AppNavigation/Settings/SettingsAddressbookSharee.vue | 2 | ||||
-rw-r--r-- | src/components/AppNavigation/Settings/SettingsImportContacts.vue | 2 | ||||
-rw-r--r-- | src/components/ContactDetails.vue | 17 | ||||
-rw-r--r-- | src/components/ContactDetails/ContactDetailsAvatar.vue | 8 | ||||
-rw-r--r-- | src/components/DetailsHeader.vue | 4 | ||||
-rw-r--r-- | src/components/EntityPicker/EntityBubble.vue | 2 | ||||
-rw-r--r-- | src/components/EntityPicker/EntityPicker.vue | 4 | ||||
-rw-r--r-- | src/components/EntityPicker/EntitySearchResult.vue | 4 | ||||
-rw-r--r-- | src/components/EntityPicker/NewCircleIntro.vue | 4 | ||||
-rw-r--r-- | src/components/MemberList.vue | 2 | ||||
-rw-r--r-- | src/components/ProcessingScreen.vue | 9 |
12 files changed, 27 insertions, 37 deletions
diff --git a/src/components/AppNavigation/RootNavigation.vue b/src/components/AppNavigation/RootNavigation.vue index 232b9473..9f98dfb4 100644 --- a/src/components/AppNavigation/RootNavigation.vue +++ b/src/components/AppNavigation/RootNavigation.vue @@ -490,7 +490,7 @@ $caption-padding: 22px; #newcircle { margin-top: $caption-padding; - ::v-deep a { + :deep(a) { color: var(--color-text-maxcontrast) } } @@ -499,10 +499,10 @@ $caption-padding: 22px; margin: 0 $caption-padding; } -.app-navigation__collapse ::v-deep a { +.app-navigation__collapse :deep(a) { color: var(--color-text-maxcontrast) } -::v-deep .settings-button__label { +:deep(.settings-button__label) { opacity: .7; font-weight: bold; } diff --git a/src/components/AppNavigation/Settings/SettingsAddressbookSharee.vue b/src/components/AppNavigation/Settings/SettingsAddressbookSharee.vue index c77eca3e..3ab1bcdf 100644 --- a/src/components/AppNavigation/Settings/SettingsAddressbookSharee.vue +++ b/src/components/AppNavigation/Settings/SettingsAddressbookSharee.vue @@ -151,7 +151,7 @@ export default { text-overflow: ellipsis; width: 107px; } -::v-deep .button-vue--vue-secondary { +:deep(.button-vue--vue-secondary) { background-color: transparent; border: none; box-shadow: none; diff --git a/src/components/AppNavigation/Settings/SettingsImportContacts.vue b/src/components/AppNavigation/Settings/SettingsImportContacts.vue index b57f0f92..07fde312 100644 --- a/src/components/AppNavigation/Settings/SettingsImportContacts.vue +++ b/src/components/AppNavigation/Settings/SettingsImportContacts.vue @@ -337,7 +337,7 @@ export default { } &-disabled { // Wrap warning about disabled button instead of ellipsing it - ::v-deep .button-vue__text { + :deep(.button-vue__text) { white-space: pre-wrap; } } diff --git a/src/components/ContactDetails.vue b/src/components/ContactDetails.vue index 715a5ed5..414f039c 100644 --- a/src/components/ContactDetails.vue +++ b/src/components/ContactDetails.vue @@ -1092,7 +1092,7 @@ section.contact-details { } } #qrcode-modal { - ::v-deep .modal-container { + :deep(.modal-container) { display: flex; padding: 10px; background-color: #fff; @@ -1101,7 +1101,7 @@ section.contact-details { } } } -::v-deep .v-select.select { +:deep(.v-select.select) { min-width: 0; flex: 1 auto; .vs__actions { @@ -1109,7 +1109,7 @@ section.contact-details { } } #pick-addressbook-modal { - ::v-deep .modal-container { + :deep(.modal-container) { display: flex; overflow: visible; flex-wrap: wrap; @@ -1128,11 +1128,10 @@ section.contact-details { background-color: var(--color-primary-element-light); border-radius: var(--border-radius-rounded); } -::v-deep .button-vue--vue-tertiary:hover, -.button-vue--vue-tertiary:active { - background-color: var(--color-primary-element-light-hover) !important; - - } +:deep(.button-vue--vue-tertiary:hover), +:deep(.button-vue--vue-tertiary:active) { + background-color: var(--color-primary-element-light-hover) !important; +} .related-resources { display:inline-grid; margin-top: 88px; @@ -1153,7 +1152,7 @@ section.contact-details { display: inline-flex; } // forcing the size only for contacts app to fit the text size of the contacts app -::v-deep .related-resources__header h5 { +:deep(.related-resources__header h5) { font-size: medium; opacity: .7; color: var(--color-primary-element); diff --git a/src/components/ContactDetails/ContactDetailsAvatar.vue b/src/components/ContactDetails/ContactDetailsAvatar.vue index e7e30337..a519cf38 100644 --- a/src/components/ContactDetails/ContactDetailsAvatar.vue +++ b/src/components/ContactDetails/ContactDetailsAvatar.vue @@ -596,7 +596,7 @@ export default { justify-content: space-between; } - &::v-deep .cropper-view-box { + &:deep(.cropper-view-box) { border-radius: 50%; } } @@ -640,7 +640,7 @@ export default { justify-content: center; background-color: rgba(0, 0, 0, .2); // Always show max opacity, let the background-color be the visual cue - &::v-deep .action-item__menutoggle { + &:deep(.action-item__menutoggle) { opacity: 1; } } @@ -654,7 +654,7 @@ export default { width: 44px; height: 44px; margin: -50%; - &::v-deep { + &:deep { .action-item__menutoggle { opacity: .7; background-color: rgba(0, 0, 0, .2); @@ -675,7 +675,7 @@ export default { // Because of that, we now fill the modal-container, // so we need to watch for click on the photo-wrapper to // close on image click outside. - &::v-deep .modal-container { + &:deep(.modal-container) { background-color: transparent; box-shadow: none; diff --git a/src/components/DetailsHeader.vue b/src/components/DetailsHeader.vue index 31788e19..502e2a28 100644 --- a/src/components/DetailsHeader.vue +++ b/src/components/DetailsHeader.vue @@ -145,11 +145,11 @@ $top-padding: 50px; margin: 0; } - ::v-deep input { + :deep(input) { flex: 1 auto; } - &-title ::v-deep input { + &-title :deep(input) { font-weight: bold; } diff --git a/src/components/EntityPicker/EntityBubble.vue b/src/components/EntityPicker/EntityBubble.vue index 4864a86f..660a0be6 100644 --- a/src/components/EntityPicker/EntityBubble.vue +++ b/src/components/EntityPicker/EntityBubble.vue @@ -87,7 +87,7 @@ export default { <style lang="scss" scoped> // better visual with light default tint -::v-deep .user-bubble__content { +:deep(.user-bubble__content) { background-color: var(--color-pirimary-light); } diff --git a/src/components/EntityPicker/EntityPicker.vue b/src/components/EntityPicker/EntityPicker.vue index 391e45e4..3be09c5f 100644 --- a/src/components/EntityPicker/EntityPicker.vue +++ b/src/components/EntityPicker/EntityPicker.vue @@ -466,13 +466,13 @@ $icon-margin: math.div($clickable-area - $icon-size, 2); } // Properly center Entity Picker empty content -::v-deep .empty-content { +:deep(.empty-content) { margin: auto 0 !important; } /** Size full in the modal component doesn't have border radius, this adds it back */ -::v-deep .modal-container { +:deep(.modal-container) { border-radius: var(--border-radius-large) !important; } diff --git a/src/components/EntityPicker/EntitySearchResult.vue b/src/components/EntityPicker/EntitySearchResult.vue index 498471e9..cdc4e35c 100644 --- a/src/components/EntityPicker/EntitySearchResult.vue +++ b/src/components/EntityPicker/EntitySearchResult.vue @@ -128,7 +128,7 @@ $icon-margin: math.div($clickable-area - $icon-size, 2); &--selected, &:hover, &:focus { - ::v-deep .user-bubble__content { + :deep(.user-bubble__content) { // better visual with light default tint background-color: var(--color-primary-element-light); } @@ -136,7 +136,7 @@ $icon-margin: math.div($clickable-area - $icon-size, 2); } } -::v-deep .user-bubble__content { +:deep(.user-bubble__content){ // Take full width width: 100%; // Override default styling diff --git a/src/components/EntityPicker/NewCircleIntro.vue b/src/components/EntityPicker/NewCircleIntro.vue index 3c5345f7..a0c1126c 100644 --- a/src/components/EntityPicker/NewCircleIntro.vue +++ b/src/components/EntityPicker/NewCircleIntro.vue @@ -212,7 +212,7 @@ $icon-margin: math.div($clickable-area - $icon-size, 2); } // Make the checkboxes span full width -::v-deep .checkbox-radio-switch__label { +:deep(.checkbox-radio-switch__label) { width: 100%; } @@ -223,7 +223,7 @@ $icon-margin: math.div($clickable-area - $icon-size, 2); /** Size full in the modal component doesn't have border radius, this adds it back */ -::v-deep .modal-container { +:deep(.modal-container) { border-radius: var(--border-radius-large) !important; } diff --git a/src/components/MemberList.vue b/src/components/MemberList.vue index 784f8e2d..171d6964 100644 --- a/src/components/MemberList.vue +++ b/src/components/MemberList.vue @@ -335,7 +335,7 @@ export default { } } - &::v-deep .empty-content { + :deep(.empty-content) { margin: auto; } } diff --git a/src/components/ProcessingScreen.vue b/src/components/ProcessingScreen.vue index 42ca511b..eed658a5 100644 --- a/src/components/ProcessingScreen.vue +++ b/src/components/ProcessingScreen.vue @@ -52,15 +52,6 @@ export default { flex-direction: column; width: auto; margin: 50px; - - // Progress &desc wrapper - &::v-deep > p { - display: flex; - align-items: center; - flex-direction: column; - width: 80%; - margin: auto; - } } &__progress { |