Merge pull request #2219 from nextcloud/fix/noid/calendar-share

Update calendar share css
nextcloud · Mar 7, 2023 · 6a839a1 · 6a839a1
2 parents 0b9ebf8 + a5d7a29
commit 6a839a1
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 30 deletions.
diff --git a/src/components/AppNavigation/CalendarShare.vue b/src/components/AppNavigation/CalendarShare.vue
@@ -247,26 +247,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.calendar-shares .app-navigation-entry {
-
-	&-wrapper::v-deep {
-		.app-navigation-entry {
-			padding-left: 0 !important;
-
-			&__utils {
-				.action-checkbox__label {
-					padding-right: 0 !important;
-				}
-
-				.action-checkbox__label::before {
-					margin: 4px 4px 0 !important;
-				}
-			}
-		}
-	}
-
-	&__select::v-deep .v-select {
-		width: 100%;
-	}
+.calendar-shares .app-navigation-entry__select :deep(.v-select) {
+	width: 100%;
 }
 </style>
diff --git a/src/components/AppNavigation/CalendarSharee.vue b/src/components/AppNavigation/CalendarSharee.vue
@@ -38,11 +38,11 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
 		</template>
 
 		<template #counter>
-			<NcActionCheckbox :disabled="loading"
+			<NcCheckboxRadioSwitch :disabled="loading"
 				:checked="writeable"
 				@update:checked="editSharee">
 				{{ t('tasks', 'Can edit') }}
-			</NcActionCheckbox>
+			</NcCheckboxRadioSwitch>
 		</template>
 
 		<template #actions>
@@ -61,9 +61,9 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
 import { showError } from '@nextcloud/dialogs'
 import { translate as t } from '@nextcloud/l10n'
 import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
-import NcActionCheckbox from '@nextcloud/vue/dist/Components/NcActionCheckbox.js'
 import NcAppNavigationItem from '@nextcloud/vue/dist/Components/NcAppNavigationItem.js'
 import NcAvatar from '@nextcloud/vue/dist/Components/NcAvatar.js'
+import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js'
 
 import AccountMultiple from 'vue-material-design-icons/AccountMultiple.vue'
 import Delete from 'vue-material-design-icons/Delete.vue'
@@ -72,9 +72,9 @@ export default {
 	name: 'CalendarSharee',
 	components: {
 		NcActionButton,
-		NcActionCheckbox,
 		NcAppNavigationItem,
 		NcAvatar,
+		NcCheckboxRadioSwitch,
 		AccountMultiple,
 		Delete,
 	},
@@ -145,10 +145,17 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.app-navigation-entry .avatar {
-	width: 32px;
-	height: 32px;
-	background-color: var(--color-border-dark);
-	background-size: 16px;
+
+.app-navigation-entry {
+	.avatar {
+		width: 32px;
+		height: 32px;
+		background-color: var(--color-border-dark);
+		background-size: 16px;
+	}
+
+	&-wrapper :deep() .app-navigation-entry {
+		padding-left: 0;
+	}
 }
 </style>