fixup! Port settings to vue

nextcloud · Aug 1, 2022 · 74e6bb9 · 74e6bb9
1 parent cfbc69e
commit 74e6bb9
Show file tree

Hide file tree

Showing 2 changed files with 61 additions and 22 deletions.
diff --git a/src/components/ActivityGrid.vue b/src/components/ActivityGrid.vue
@@ -20,37 +20,38 @@
 
 <template>
 	<table class="grid activitysettings">
+		<caption>{{ t('activity', 'Activity notification configuration') }}</caption>
 		<tbody v-for="(group, groupId) in activityGroups" :key="groupId">
-			<tr>
-				<th colspan="3" :id="`group-${groupId}`" class="group-header">{{ group.name }}</th>
-			</tr>
-			<tr>
+			<tr class="group-header">
+				<th :id="`group-${groupId}`">
+					<b>{{ group.name }}</b>
+				</th>
 				<th v-for="(methodName, method) in methods"
 					:key="method"
 					class="small activity_select_group"
+					aria-hidden="true"
 					:data-select-group="method"
 					id="`method-${method}`">
 					{{ methodName }}
 				</th>
-				<th><span id="activity_notifications_msg" class="msg"></span></th>
 			</tr>
 			<tr v-for="(data, activity) in group.activities" :key="activity">
+				<!-- eslint-disable vue/no-v-html -->
+				<th class="activity_select_group" scope="row">
+					<label v-html="data.desc" @click="toggleRow(groupId, activity)"></label>
+				</th>
+				<!-- eslint-enable vue/no-v-html -->
 				<td v-for="(methodName, method) in methods"
 					:key="activity + '_' + method"
-					class="small"
-					:headers="`group-${groupId} method-${method}`">
+					class="small">
 					<Checkbox
 						value="1"
 						:id="activity + '_' + method"
 						:name="activity + '_' + method"
-						:class="[activity, method, 'checkbox']"
 						:disabled="!data.methods.includes(method)"
-						:checked="data[method]" />
-					<label :for="activity + '_' + method">
-					</label>
-				</td>
-				<td class="activity_select_group">
-					<label v-html="data.desc" @click="toggleRow(groupId, activity)"></label>
+						:checked="data[method]">
+						{{ actionName(method) }}
+					</Checkbox>
 				</td>
 			</tr>
 		</tbody>
@@ -73,6 +74,13 @@ export default {
 		Checkbox,
 	},
 	methods: {
+		actionName(method) {
+			if (method === 'email') {
+				return t('activity', 'Send email')
+			} else {
+				return t('activity', 'Send push notification')
+			}
+		},
 		toggleRow(group, activity) {
 			const isRowSelected = this.isRowSelected(group, activity)
 
@@ -96,7 +104,22 @@ export default {
 
 <style lang="scss" scoped>
 table.grid th {
-	color: var(--color-text-maxcontrast);
+	color: var(--color-text-light);
 	height: 44px;
 }
+
+table.grid .group-header {
+	th {
+		padding-top: 16px;
+		height: 60px;
+	}
+}
+
+table.grid td {
+	padding-left: 0;
+}
+
+table.grid th.activity_select_group {
+	color: var(--color-main-text);
+}
 </style>
diff --git a/src/components/Checkbox.vue b/src/components/Checkbox.vue
@@ -28,7 +28,7 @@
 			'checkbox-radio-switch--indeterminate': indeterminate,
 		}"
 		:style="cssVars"
-		class="checkbox-radio-switch-checkbox">
+		class="checkbox-radio-switch checkbox-radio-switch-checkbox">
 		<input :id="id"
 			:checked="checked"
 			:disabled="disabled"
@@ -45,6 +45,9 @@
 				class="checkbox-radio-switch__icon"
 				title=""
 				decorative />
+			<span class="sr-only">
+				<slot />
+			</span>
 		</label>
 	</element>
 </template>
@@ -211,20 +214,19 @@ $spacing: 4px;
 		display: flex;
 		align-items: center;
 		user-select: none;
-		height: 44px;
+		height: 40px;
 		border-radius: 44px;
-		padding: 0 4px;
-		margin: 0 4px;
+		padding: 4px;
+		margin: 4px;
 
 		&, * {
 			cursor: pointer;
 		}
 	}
 
 	&__icon {
-		margin-right: 4px;
-		// Remove the left margin of material design icons to align text
-		margin-left: -2px;
+		margin-right: $spacing;
+		margin-left: $spacing;
 		color: var(--color-primary-element);
 		width: var(--icon-size);
 		height: var(--icon-size);
@@ -242,6 +244,11 @@ $spacing: 4px;
 		background-color: var(--color-primary-light);
 	}
 
+	// Increase focus effect
+	&:not(&--disabled) &__input:focus + &__label {
+		box-shadow: 0 0 0 2px var(--color-primary);
+	}
+
 	// Switch specific rules
 	&-switch:not(&--checked) &__icon {
 		color: var(--color-text-lighter);
@@ -251,6 +258,15 @@ $spacing: 4px;
 	&-switch.checkbox-radio-switch--disabled.checkbox-radio-switch--checked &__icon {
 		color: var(--color-primary-element-light);
 	}
+
+	.sr-only {
+		position:absolute;
+		left:-10000px;
+		top:auto;
+		width:1px;
+		height:1px;
+		overflow:hidden;
+	}
 }
 
 </style>