Skip to content

Commit fbbb269

Browse files
fix(sidebar): replace NcChip with non-interactive status indicator
NcChip has button-like appearance (hover effects, pointer cursor, pill shape) which confused users into thinking the status label was clickable. Replace with a dot + label text layout using only CSS logical properties for proper LTR/RTL support. Signed-off-by: Vitor Mattos <1079143+vitormattos@users.noreply.github.com>
1 parent b416a2a commit fbbb269

1 file changed

Lines changed: 34 additions & 3 deletions

File tree

src/components/RightSidebar/SignTab.vue

Lines changed: 34 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,11 @@
66
<template>
77
<div class="sign-pdf-sidebar">
88
<header>
9-
<NcChip :text="signStore.document.statusText" variant="primary" no-close />
9+
<div class="document-status">
10+
<span class="document-status__label">{{ t('libresign', 'Status') }}</span>
11+
<span class="document-status__dot" aria-hidden="true" />
12+
<span class="document-status__text">{{ signStore.document.statusText }}</span>
13+
</div>
1014
</header>
1115

1216
<main>
@@ -28,7 +32,6 @@
2832
<script>
2933
import { t } from '@nextcloud/l10n'
3034
31-
import NcChip from '@nextcloud/vue/components/NcChip'
3235
import Sign from '../../views/SignPDF/_partials/Sign.vue'
3336
3437
import { loadState } from '@nextcloud/initial-state'
@@ -40,7 +43,6 @@ import { useSignStore } from '../../store/sign.js'
4043
export default {
4144
name: 'SignTab',
4245
components: {
43-
NcChip,
4446
Sign,
4547
},
4648
setup() {
@@ -93,6 +95,35 @@ header {
9395
justify-content: center;
9496
align-items: center;
9597
width: 100%;
98+
99+
.document-status {
100+
display: flex;
101+
align-items: center;
102+
gap: 6px;
103+
color: var(--color-text-maxcontrast);
104+
font-size: 0.85em;
105+
106+
&__label {
107+
text-transform: uppercase;
108+
letter-spacing: 0.05em;
109+
margin-inline-end: -0.05em; /* compensate trailing letter-spacing in both LTR and RTL */
110+
font-weight: 600;
111+
}
112+
113+
&__dot {
114+
display: inline-block;
115+
width: 8px;
116+
height: 8px;
117+
border-radius: 50%;
118+
background-color: var(--color-primary-element);
119+
flex-shrink: 0;
120+
}
121+
122+
&__text {
123+
color: var(--color-main-text);
124+
font-weight: 500;
125+
}
126+
}
96127
}
97128
@media (min-width: 513px) {
98129
header {

0 commit comments

Comments
 (0)