jjkiers/cloudron-box
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Improve task progress for apps view

Browse Source
This commit is contained in:
Johannes Zellner
2025-01-05 13:33:05 +01:00
parent 5b86c96adf
commit 98ba214dfb
1 changed files with 38 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dashboard/src/components/AppsView.vue
+38 -15
View File
@@ -21,9 +21,9 @@
<div class="config" v-show="isOperator(app)" @click.prevent="openAppEdit(app)"><Icon icon="fa-solid fa-cog" /></div>
<img :src="API_ORIGIN + app.iconUrl"/>
<div class="grid-item-label">{{ app.label || app.subdomain || app.fqdn }}</div>
<div class="grid-item-task-label">{{ installationStateLabel(app) }}</div>
<div class="apps-progress" v-show="isOperator(app)">
<div class="apps-progress-filled" :style="{ width: app.progress+'%' }"></div>
<div class="apps-progress-label">{{ installationStateLabel(app) }}</div>
</div>
</a>
</TransitionGroup>
@@ -49,9 +49,11 @@
</a>
</template>
<template #status="slotProps">
<div class="apps-progress" v-show="isOperator(slotProps)">
<div class="apps-progress-filled" :style="{ width: slotProps.progress+'%' }"></div>
<div class="apps-progress-label">{{ installationStateLabel(slotProps) }}</div>
<div class="list-status">
{{ installationStateLabel(slotProps) }}
<div class="apps-progress" v-show="isOperator(slotProps)">
<div class="apps-progress-filled" :style="{ width: slotProps.progress+'%' }"></div>
</div>
</div>
</template>
<template #sso="slotProps">
@@ -76,7 +78,7 @@
</TableView>
</div>
<div class="empty-placeholder" v-if="apps.length !== 0">
<div class="empty-placeholder" v-if="apps.length === 0">
<!-- for admins -->
<div v-if="profile.isAtLeastAdmin">
<h4>{{ $t('apps.noApps.title') }}</h4>
@@ -315,9 +317,28 @@ export default {
height: 32px;
}
.apps-progress {
.list-status {
position: relative;
width: 90%;
height: 100%;
display: flex;
align-items: center;
}
.grid-item-task-label {
opacity: 0.7;
font-size: 12px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
color: var(--pankow-text-color);
}
.apps-progress {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 5px;
text-align: center;
border-radius: 10px;
color: var(--pankow-text-color);
@@ -331,16 +352,18 @@ export default {
height: 100%;
border-radius: 10px;
z-index: 1;
background-image: linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
background-size: 40px 40px;
animation: apps-progress-bar-stripes 1s linear infinite;
}
.apps-progress-label {
position: relative;
z-index: 2;
opacity: 0.7;
font-size: 12px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
@keyframes apps-progress-bar-stripes {
from {
background-position: 40px 0;
}
to {
background-position: 0 0;
}
}
.actions {