mirror of
https://github.com/LibreSign/libresign.git
synced 2025-12-17 21:12:16 +01:00
Merge pull request #6145 from LibreSign/feat/status-chip-improvements
feat: status chip improvements
This commit is contained in:
Vitor Mattos
GitHub
commit
c0b87930b4
5 changed files with 128 additions and 56 deletions
|
|
@ -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'),
|
||||
},
|
||||
{
|
||||
|
|
|
|||
|
|
@ -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 -->
|
||||
|
|
|
|||
|
|
@ -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 -->
|
||||
|
|
|
|||
|
|
@ -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,19 +32,32 @@ 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'
|
||||
}
|
||||
},
|
||||
},
|
||||
|
|
@ -43,43 +65,84 @@ export default {
|
|||
</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;
|
||||
|
||||
.dot{
|
||||
flex: 1 0 var(--dot-size);
|
||||
height: var(--dot-size);
|
||||
border-radius: 50%;
|
||||
margin-right: 10px;
|
||||
cursor: inherit;
|
||||
&__text {
|
||||
display: inline-block;
|
||||
max-width: 100%;
|
||||
white-space: pre-wrap;
|
||||
word-wrap: break-word;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
|
||||
.signed{
|
||||
background: #008000;
|
||||
&__icon {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.no-signers{
|
||||
background: #ff0000;
|
||||
&--error {
|
||||
background-color: var(--color-error);
|
||||
color: var(--color-error-text);
|
||||
}
|
||||
|
||||
.pending {
|
||||
background: #d67335
|
||||
&--draft {
|
||||
background-color: #E0E0E0;
|
||||
color: #424242;
|
||||
}
|
||||
|
||||
span{
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
text-align: center;
|
||||
cursor: inherit;
|
||||
&--available {
|
||||
background-color: #FFF3CD;
|
||||
color: #856404;
|
||||
}
|
||||
|
||||
&--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>
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
.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-mtime {
|
||||
width: calc(var(--row-height) * 2);
|
||||
}
|
||||
|
||||
.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">
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue