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

Use pankow progress indicator for apps view

Browse Source
This commit is contained in:
Johannes Zellner
2025-08-05 18:52:59 +02:00
parent be933b8b78
commit 2458b6b388
4 changed files with 15 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dashboard/src/views/AppsView.vue
+5 -33
View File
@@ -241,9 +241,9 @@ onUnmounted(() => {
<img :alt="app.label || app.subdomain || app.fqdn" :src="app.iconUrl" v-fallback-image="API_ORIGIN + '/img/appicon_fallback.png'"/>
<div class="grid-item-label" v-fit-text>{{ app.label || app.subdomain || app.fqdn }}</div>
<div class="grid-item-task-label">{{ AppsModel.installationStateLabel(app) }}</div>
<div class="apps-progress" v-show="app.progress && isOperator(app)">
<div class="apps-progress-filled" :style="{ width: app.progress+'%' }"></div>
</div>
<ProgressBar v-if="app.progress && isOperator(app)" :busy="true" :value="Math.max(10, app.progress)" :show-label="false" class="apps-progress"/>
<a class="config" v-show="isOperator(app)" @click="openAppEdit(app, $event)" :href="`#/app/${app.id}/info`" :title="$t('app.configureTooltip')"><Icon icon="fa-solid fa-cog" /></a>
<div class="grid-item-indictors">
<a class="grid-item-update-indicator" v-if="app.updateInfo" @click.stop :href="isOperator(app) ? `#/app/${app.id}/updates` : null" v-tooltip="$t('app.updateAvailableTooltip')"><i class="fa-fw fa-solid fa-arrow-up"/></a>
@@ -275,9 +275,7 @@ onUnmounted(() => {
<template #status="app">
<div class="list-status">
{{ AppsModel.installationStateLabel(app) }}
<div class="apps-progress" v-show="app.progress && isOperator(app)">
<div class="apps-progress-filled" :style="{ width: app.progress+'%' }"></div>
</div>
<ProgressBar v-if="app.progress && isOperator(app)" :busy="true" :value="Math.max(10, app.progress)" :show-label="false" class="apps-progress"/>
</div>
</template>
<template #checklist="app">
@@ -366,33 +364,7 @@ onUnmounted(() => {
bottom: 0;
left: 0;
width: 100%;
height: 5px;
text-align: center;
border-radius: 10px;
color: var(--pankow-text-color);
}
.apps-progress-filled {
background-color: var(--pankow-color-primary);
position: absolute;
top: 0;
left: 0;
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;
transition: width 300ms;
}
@keyframes apps-progress-bar-stripes {
from {
background-position: 40px 0;
}
to {
background-position: 0 0;
}
height: 4px;
}
.grid {