fix: Improve design and accessibility

* Use secondary button style for filtered columns * Minor typo in dialog name * Make table border and log level colors less annoying * Add header to app * Make `<hr>` look less bright Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
nextcloud · Jul 20, 2023 · e2f37a4 · e2f37a4
1 parent b317bf6
commit e2f37a4
Show file tree

Hide file tree

Showing 6 changed files with 56 additions and 34 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -4,16 +4,19 @@
 -->
 <template>
 	<div class="logreader-container">
-		<!-- Setting toggle -->
-		<NcButton :aria-label="t('logreader', 'Open log reader settings')"
-			class="settings-toggle"
-			type="tertiary"
-			@click="areSettingsShown = true">
-			<template #icon>
-				<IconCog :size="20" />
-			</template>
-			{{ t('logreader', 'Log reader settings') }}
-		</NcButton>
+		<div class="logreader-container__header">
+			<h2>{{ t('logreader', 'Log reader') }}</h2>
+			<!-- Setting toggle -->
+			<NcButton :aria-label="t('logreader', 'Open log reader settings')"
+				class="settings-toggle"
+				type="tertiary"
+				@click="areSettingsShown = true">
+				<template #icon>
+					<IconCog :size="20" />
+				</template>
+				{{ t('logreader', 'Log reader settings') }}
+			</NcButton>
+		</div>
 		<!-- Show information / warning message -->
 		<NcNoteCard v-if="settingsStore.localFile" type="info" class="info-note">
 			<div class="info-note__content">
@@ -136,16 +139,33 @@ legend {
 		}
 	}
 
-	.settings-toggle {
-		// position on inline-end (aka right for LTR languages)
-		margin-inline: auto 2px; // 2px to show outline when focus-visible
-		margin-block-start: 2px;
-		// Make sure the focus-visible outline is shown
-		z-index: 999;
+	&__header {
+		padding-inline-start: 1rem; // Align with info note
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		justify-content: space-between;
+
+		h2 {
+			// Handled by container
+			margin: 0;
+			padding: 0;
+		}
+
+		.settings-toggle {
+			// 2px to show outline when focus-visible
+			margin: 2px;
+		}
 	}
 }
 
 :deep(.empty-content) {
 	text-align: center;
 }
+
+@media only screen and (max-width: 1023px) {
+	.logreader-container__header {
+		padding-inline-start: 48px; // app sidebar toggle
+	}
+}
 </style>
diff --git a/src/components/LogDetailsModal.vue b/src/components/LogDetailsModal.vue
@@ -173,15 +173,15 @@ const copyFormatted = async () => {
 		}
 
 		&--debug {
-			border-block-end-color: var(--color-text-maxcontrast);
+			border-block-end-color: var(--color-border-maxcontrast);
 		}
 		&--info {
 			border-block-end-color: var(--color-info);
 		}
 		&--warning {
 			border-block-end-color: var(--color-warning);
 		}
-		&--error {
+		&--error, &--fatal {
 			border-block-end-color: var(--color-error);
 		}
 	}
@@ -194,6 +194,10 @@ const copyFormatted = async () => {
 		gap: 9px;
 		margin-block: 9px;
 	}
+
+	hr {
+		color: var(--color-border-dark);
+	}
 }
 .hljs {
 	background-color: var(--color-background-dark);

diff --git a/src/components/settings/AppSettingsDialog.vue b/src/components/settings/AppSettingsDialog.vue
@@ -5,7 +5,7 @@
 <template>
 	<NcAppSettingsDialog :open="props.open"
 		:show-navigation="true"
-		name="Logreader settings"
+		name="Log reader settings"
 		@update:open="onUpdateOpen">
 		<NcAppSettingsSection id="logreader-settings-levels" :name="t('logreader', 'Filter log levels')">
 			<SettingsLogLevels />

diff --git a/src/components/table/LogTable.vue b/src/components/table/LogTable.vue
@@ -195,7 +195,7 @@ const sortedRows = computed(() => {
 			top: 0;
 			z-index: 99;
 			background-color: var(--color-main-background);
-			border-bottom: 2px solid var(--color-text-maxcontrast);
+			border-bottom: 2px solid var(--color-border-dark);
 		}
 	}
 

diff --git a/src/components/table/LogTableHeader.vue b/src/components/table/LogTableHeader.vue
@@ -3,20 +3,20 @@
 	SPDX-License-Identifier: AGPL-3.0-or-later
 -->
 <template>
-	<th>
-		<div class="log-table__header-wrapper">
+	<th :aria-sort="ariaSort">
+		<div class="log-table-header__wrapper">
 			<NcButton v-if="sortable"
-				type="tertiary-no-background"
+				:type="props.sorted ? 'secondary' : 'tertiary-no-background'"
 				:aria-label="name"
-				:aria-sort="ariaSort"
+				:aria-pressed="!!props.sorted"
 				:wide="true"
-				@click="changeSortMode">
+				@click.stop="changeSortMode">
 				<template #icon>
 					<component :is="sortIcon" :size="20" />
 				</template>
 				{{ name }}
 			</NcButton>
-			<span v-else :title="name" class="log-table__header--text">
+			<span v-else :title="name" class="log-table-header__text">
 				{{ name }}
 			</span>
 			<!-- Allow to add content -->
@@ -95,13 +95,14 @@ const changeSortMode = () => {
 </script>
 
 <style lang="scss" scoped>
-.log-table {
-	&__header-wrapper {
+.log-table-header {
+	&__wrapper {
 		display: flex;
 		align-items: center;
 		justify-content: space-between;
 	}
-	&__header--text {
+
+	&__text {
 		// Fake a button icon style
 		padding-inline-start: 12px;
 	}
@@ -112,9 +113,6 @@ th {
 		.button-vue__wrapper {
 			justify-content: left;
 		}
-		[aria-sort] {
-			color: var(--color-primary-element);
-		}
 	}
 
 	&> * {

diff --git a/src/components/table/LogTableRow.vue b/src/components/table/LogTableRow.vue
@@ -216,15 +216,15 @@ tr {
 	border-inline-start: 4px solid;
 
 	&--debug {
-		border-inline-start-color: var(--color-text-maxcontrast);
+		border-inline-start-color: var(--color-border-maxcontrast);
 	}
 	&--info {
 		border-inline-start-color: var(--color-info);
 	}
 	&--warning {
 		border-inline-start-color: var(--color-warning);
 	}
-	&--error {
+	&--error, &--fatal {
 		border-inline-start-color: var(--color-error);
 	}
 }