Skip to content

Commit c0b8793

Browse files
vitormattosvitormattos
authored
Merge pull request #6145 from LibreSign/feat/status-chip-improvements
feat: status chip improvements
2 parents 09cf331 + 1d8f1d5 commit c0b8793

5 files changed

Lines changed: 128 additions & 56 deletions

File tree

‎src/helpers/fileStatus.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -21,22 +21,22 @@ export const fileStatus = [
2121
},
2222
{
2323
id: 0,
24-
icon: colorize(svgFile, '#E0E0E0'),
24+
icon: colorize(svgFile, '#9E9E9E'),
2525
label: t('libresign', 'draft'),
2626
},
2727
{
2828
id: 1,
29-
icon: colorize(svgSignature, '#B2E0B2'),
29+
icon: colorize(svgSignature, '#D4A843'),
3030
label: t('libresign', 'available for signature'),
3131
},
3232
{
3333
id: 2,
34-
icon: colorize(svgFractionOneHalf, '#F0E68C'),
34+
icon: colorize(svgFractionOneHalf, '#D4A843'),
3535
label: t('libresign', 'partially signed'),
3636
},
3737
{
3838
id: 3,
39-
icon: colorize(svgSignatureFreehand, '#A0C4FF'),
39+
icon: colorize(svgSignatureFreehand, '#4CAF50'),
4040
label: t('libresign', 'signed'),
4141
},
4242
{

‎src/views/FilesList/FileEntry/FileEntry.vue‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,8 @@
2828
<td class="files-list__row-status"
2929
@click="openDetailsIfAvailable">
3030
<FileEntryStatus :status="source.status"
31-
:status-text="source.statusText" />
31+
:status-text="source.statusText"
32+
:signers="source.signers || []" />
3233
</td>
3334

3435
<!-- Mtime -->

‎src/views/FilesList/FileEntry/FileEntryGrid.vue‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,8 @@
2121
<td class="files-list__row-status"
2222
@click="openDetailsIfAvailable">
2323
<FileEntryStatus :status="source.status"
24-
:status-text="source.statusText" />
24+
:status-text="source.statusText"
25+
:signers="source.signers || []" />
2526
</td>
2627

2728
<!-- Mtime -->

‎src/views/FilesList/FileEntry/FileEntryStatus.vue‎

Lines changed: 97 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,24 @@
33
- SPDX-License-Identifier: AGPL-3.0-or-later
44
-->
55
<template>
6-
<div class="enDot">
7-
<div :class="statusText !== 'none' ? 'dot ' + statusToClass(status) : '' "
8-
:title="statusText !== 'none' ? statusText : ''" />
6+
<div v-if="statusText !== 'none'"
7+
class="status-chip"
8+
:class="'status-chip--' + statusToVariant(status)"
9+
:title="statusText">
10+
<div class="status-chip__text">{{ statusText }}</div>
11+
<NcIconSvgWrapper class="status-chip__icon" :svg="statusIcon" :size="20" />
912
</div>
1013
</template>
1114

1215
<script>
16+
import NcIconSvgWrapper from '@nextcloud/vue/components/NcIconSvgWrapper'
17+
import { fileStatus } from '../../../helpers/fileStatus.js'
18+
1319
export default {
1420
name: 'FileEntryStatus',
21+
components: {
22+
NcIconSvgWrapper,
23+
},
1524
props: {
1625
statusText: {
1726
type: String,
@@ -23,63 +32,117 @@ export default {
2332
required: true,
2433
default: 0,
2534
},
35+
signers: {
36+
type: Array,
37+
default: () => [],
38+
},
39+
},
40+
computed: {
41+
statusIcon() {
42+
const statusInfo = fileStatus.find(item => item.id === this.status)
43+
return statusInfo?.icon || ''
44+
},
2645
},
2746
methods: {
28-
statusToClass(status) {
47+
statusToVariant(status) {
48+
// Status 0 can be "no signers" (error/red) or "draft" (gray)
49+
if (status === 0) {
50+
return this.signers.length === 0 ? 'error' : 'draft'
51+
}
2952
switch (Number(status)) {
30-
case 0:
31-
return 'no-signers'
3253
case 1:
54+
return 'available'
3355
case 2:
34-
return 'pending'
56+
return 'partial'
3557
case 3:
3658
return 'signed'
3759
default:
38-
return ''
60+
return 'secondary'
3961
}
4062
},
4163
},
4264
}
4365
</script>
4466
4567
<style lang="scss" scoped>
46-
.enDot{
47-
--dot-size: 10px;
68+
.status-chip {
69+
--chip-size: 24px;
70+
--chip-radius: 12px;
4871
49-
display: flex;
50-
flex-direction: row;
51-
align-content: center;
52-
margin: 5px;
72+
display: inline-block;
73+
min-height: var(--chip-size);
5374
max-width: 100%;
54-
align-items: center;
55-
justify-content: center;
56-
cursor: inherit;
75+
padding: 4px 12px;
76+
border-radius: var(--chip-radius);
77+
line-height: 1.3;
78+
text-align: center;
79+
white-space: pre-wrap;
80+
word-wrap: break-word;
81+
overflow-wrap: break-word;
82+
hyphens: auto;
83+
vertical-align: middle;
84+
85+
&__text {
86+
display: inline-block;
87+
max-width: 100%;
88+
white-space: pre-wrap;
89+
word-wrap: break-word;
90+
overflow-wrap: break-word;
91+
}
5792
58-
.dot{
59-
flex: 1 0 var(--dot-size);
60-
height: var(--dot-size);
61-
border-radius: 50%;
62-
margin-right: 10px;
63-
cursor: inherit;
93+
&__icon {
94+
display: none;
6495
}
6596
66-
.signed{
67-
background: #008000;
97+
&--error {
98+
background-color: var(--color-error);
99+
color: var(--color-error-text);
68100
}
69101
70-
.no-signers{
71-
background: #ff0000;
102+
&--draft {
103+
background-color: #E0E0E0;
104+
color: #424242;
72105
}
73106
74-
.pending {
75-
background: #d67335
107+
&--available {
108+
background-color: #FFF3CD;
109+
color: #856404;
76110
}
77111
78-
span{
79-
font-size: 14px;
80-
font-weight: normal;
81-
text-align: center;
82-
cursor: inherit;
112+
&--partial {
113+
background-color: #FFF3CD;
114+
color: #856404;
115+
}
116+
117+
&--signed {
118+
background-color: #D4EDDA;
119+
color: #155724;
120+
}
121+
122+
&--secondary {
123+
background-color: var(--color-primary-element-light);
124+
color: var(--color-primary-element-light-text);
125+
}
126+
127+
// Mobile: show only icon
128+
@media (max-width: 768px) {
129+
display: inline-flex;
130+
align-items: center;
131+
justify-content: center;
132+
min-width: var(--chip-size);
133+
max-width: var(--chip-size);
134+
width: var(--chip-size);
135+
height: var(--chip-size);
136+
padding: 0;
137+
background-color: transparent !important;
138+
139+
&__text {
140+
display: none;
141+
}
142+
143+
&__icon {
144+
display: block;
145+
}
83146
}
84147
}
85148
</style>

‎src/views/FilesList/FilesListVirtual.vue‎

Lines changed: 23 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -437,25 +437,22 @@ export default {
437437
.button-vue__text {
438438
// Remove bold from default button styling
439439
font-weight: normal;
440-
}
441-
}
442-
}
443-
444-
.files-list__row-mtime,
445-
.files-list__row-status {
446-
color: var(--color-text-maxcontrast);
447-
}
448-
.files-list__row-status {
449-
width: calc(var(--row-height) * 1.5);
450-
// Right align content/text
451-
justify-content: flex-end;
452440
}
441+
}
442+
}
453443
454-
.files-list__row-mtime {
455-
width: calc(var(--row-height) * 2);
456-
}
444+
.files-list__row-mtime,
445+
.files-list__row-status {
446+
color: var(--color-text-maxcontrast);
447+
}
448+
.files-list__row-status {
449+
width: calc(var(--row-height) * 2.5);
450+
justify-content: center;
451+
}
457452
458-
.files-list__row-column-custom {
453+
.files-list__row-mtime {
454+
width: calc(var(--row-height) * 2);
455+
} .files-list__row-column-custom {
459456
width: calc(var(--row-height) * 2);
460457
}
461458
}
@@ -469,6 +466,16 @@ export default {
469466
}
470467
}
471468
469+
@media screen and (max-width: 768px) {
470+
.files-list__row-status {
471+
width: calc(var(--row-height) * 0.8) !important;
472+
}
473+
474+
:deep(.files-list__row-status) {
475+
width: calc(var(--row-height) * 0.8) !important;
476+
}
477+
}
478+
472479
</style>
473480

474481
<style lang="scss">

0 commit comments

Comments
 (0)