Merge pull request #6145 from LibreSign/feat/status-chip-improvements

feat: status chip improvements

Author: vitormattos

src/helpers/fileStatus.js

@@ -21,22 +21,22 @@ export const fileStatus = [
 	},
 	{
 		id: 0,
-		icon: colorize(svgFile, '#E0E0E0'),
+		icon: colorize(svgFile, '#9E9E9E'),
 		label: t('libresign', 'draft'),
 	},
 	{
 		id: 1,
-		icon: colorize(svgSignature, '#B2E0B2'),
+		icon: colorize(svgSignature, '#D4A843'),
 		label: t('libresign', 'available for signature'),
 	},
 	{
 		id: 2,
-		icon: colorize(svgFractionOneHalf, '#F0E68C'),
+		icon: colorize(svgFractionOneHalf, '#D4A843'),
 		label: t('libresign', 'partially signed'),
 	},
 	{
 		id: 3,
-		icon: colorize(svgSignatureFreehand, '#A0C4FF'),
+		icon: colorize(svgSignatureFreehand, '#4CAF50'),
 		label: t('libresign', 'signed'),
 	},
 	{

src/views/FilesList/FileEntry/FileEntry.vue

@@ -28,7 +28,8 @@
 		<td class="files-list__row-status"
 			@click="openDetailsIfAvailable">
 			<FileEntryStatus :status="source.status"
-				:status-text="source.statusText" />
+				:status-text="source.statusText"
+				:signers="source.signers || []" />
 		</td>
 
 		<!-- Mtime -->

src/views/FilesList/FileEntry/FileEntryGrid.vue

@@ -21,7 +21,8 @@
 		<td class="files-list__row-status"
 			@click="openDetailsIfAvailable">
 			<FileEntryStatus :status="source.status"
-				:status-text="source.statusText" />
+				:status-text="source.statusText"
+				:signers="source.signers || []" />
 		</td>
 
 		<!-- Mtime -->

src/views/FilesList/FileEntry/FileEntryStatus.vue

@@ -3,15 +3,24 @@
   - SPDX-License-Identifier: AGPL-3.0-or-later
 -->
 <template>
-	<div class="enDot">
-		<div :class="statusText !== 'none' ? 'dot ' + statusToClass(status) : '' "
-			:title="statusText !== 'none' ? statusText : ''" />
+	<div v-if="statusText !== 'none'"
+		class="status-chip"
+		:class="'status-chip--' + statusToVariant(status)"
+		:title="statusText">
+		<div class="status-chip__text">{{ statusText }}</div>
+		<NcIconSvgWrapper class="status-chip__icon" :svg="statusIcon" :size="20" />
 	</div>
 </template>
 
 <script>
+import NcIconSvgWrapper from '@nextcloud/vue/components/NcIconSvgWrapper'
+import { fileStatus } from '../../../helpers/fileStatus.js'
+
 export default {
 	name: 'FileEntryStatus',
+	components: {
+		NcIconSvgWrapper,
+	},
 	props: {
 		statusText: {
 			type: String,
@@ -23,63 +32,117 @@ export default {
 			required: true,
 			default: 0,
 		},
+		signers: {
+			type: Array,
+			default: () => [],
+		},
+	},
+	computed: {
+		statusIcon() {
+			const statusInfo = fileStatus.find(item => item.id === this.status)
+			return statusInfo?.icon || ''
+		},
 	},
 	methods: {
-		statusToClass(status) {
+		statusToVariant(status) {
+			// Status 0 can be "no signers" (error/red) or "draft" (gray)
+			if (status === 0) {
+				return this.signers.length === 0 ? 'error' : 'draft'
+			}
 			switch (Number(status)) {
-			case 0:
-				return 'no-signers'
 			case 1:
+				return 'available'
 			case 2:
-				return 'pending'
+				return 'partial'
 			case 3:
 				return 'signed'
 			default:
-				return ''
+				return 'secondary'
 			}
 		},
 	},
 }
 </script>
 
 <style lang="scss" scoped>
-.enDot{
-	--dot-size: 10px;
+.status-chip {
+	--chip-size: 24px;
+	--chip-radius: 12px;
 
-	display: flex;
-	flex-direction: row;
-	align-content: center;
-	margin: 5px;
+	display: inline-block;
+	min-height: var(--chip-size);
 	max-width: 100%;
-	align-items: center;
-	justify-content: center;
-	cursor: inherit;
+	padding: 4px 12px;
+	border-radius: var(--chip-radius);
+	line-height: 1.3;
+	text-align: center;
+	white-space: pre-wrap;
+	word-wrap: break-word;
+	overflow-wrap: break-word;
+	hyphens: auto;
+	vertical-align: middle;
+
+	&__text {
+		display: inline-block;
+		max-width: 100%;
+		white-space: pre-wrap;
+		word-wrap: break-word;
+		overflow-wrap: break-word;
+	}
 
-	.dot{
-		flex: 1 0 var(--dot-size);
-		height: var(--dot-size);
-		border-radius: 50%;
-		margin-right: 10px;
-		cursor: inherit;
+	&__icon {
+		display: none;
 	}
 
-	.signed{
-		background: #008000;
+	&--error {
+		background-color: var(--color-error);
+		color: var(--color-error-text);
 	}
 
-	.no-signers{
-		background: #ff0000;
+	&--draft {
+		background-color: #E0E0E0;
+		color: #424242;
 	}
 
-	.pending {
-		background: #d67335
+	&--available {
+		background-color: #FFF3CD;
+		color: #856404;
 	}
 
-	span{
-		font-size: 14px;
-		font-weight: normal;
-		text-align: center;
-		cursor: inherit;
+	&--partial {
+		background-color: #FFF3CD;
+		color: #856404;
+	}
+
+	&--signed {
+		background-color: #D4EDDA;
+		color: #155724;
+	}
+
+	&--secondary {
+		background-color: var(--color-primary-element-light);
+		color: var(--color-primary-element-light-text);
+	}
+
+	// Mobile: show only icon
+	@media (max-width: 768px) {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		min-width: var(--chip-size);
+		max-width: var(--chip-size);
+		width: var(--chip-size);
+		height: var(--chip-size);
+		padding: 0;
+		background-color: transparent !important;
+
+		&__text {
+			display: none;
+		}
+
+		&__icon {
+			display: block;
+		}
 	}
 }
 </style>

src/views/FilesList/FilesListVirtual.vue

@@ -437,25 +437,22 @@ export default {
 				.button-vue__text {
 					// Remove bold from default button styling
 					font-weight: normal;
-				}
-			}
-		}
-
-		.files-list__row-mtime,
-		.files-list__row-status {
-			color: var(--color-text-maxcontrast);
-		}
-		.files-list__row-status {
-			width: calc(var(--row-height) * 1.5);
-			// Right align content/text
-			justify-content: flex-end;
 		}
+	}
+}
 
-		.files-list__row-mtime {
-			width: calc(var(--row-height) * 2);
-		}
+	.files-list__row-mtime,
+	.files-list__row-status {
+		color: var(--color-text-maxcontrast);
+	}
+	.files-list__row-status {
+		width: calc(var(--row-height) * 2.5);
+		justify-content: center;
+	}
 
-		.files-list__row-column-custom {
+	.files-list__row-mtime {
+		width: calc(var(--row-height) * 2);
+	}		.files-list__row-column-custom {
 			width: calc(var(--row-height) * 2);
 		}
 	}
@@ -469,6 +466,16 @@ export default {
 	}
 }
 
+@media screen and (max-width: 768px) {
+	.files-list__row-status {
+		width: calc(var(--row-height) * 0.8) !important;
+	}
+
+	:deep(.files-list__row-status) {
+		width: calc(var(--row-height) * 0.8) !important;
+	}
+}
+
 </style>
 
 <style lang="scss">