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

Bring checklist indicator back

Browse Source
This commit is contained in:
Johannes Zellner
2025-05-20 10:39:37 +02:00
parent d0c9e17090
commit 60b1dcf5ee
2 changed files with 47 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
dashboard/src/views/AppsView.vue
View File

@@ -97,6 +97,7 @@ const listColumns = {
return checkA - checkB;
},
},
checklist: {},
actions: {}
};
@@ -120,8 +121,6 @@ const filteredApps = computed(() => {
});
});
const installationStateLabel = AppsModel.installationStateLabel;
const updateInfo = ref({});
const applinkDialog = useTemplateRef('applinkDialog');
@@ -264,7 +263,10 @@ onUnmounted(() => {
<div class="apps-progress-filled" :style="{ width: app.progress+'%' }"></div>
</div>
<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>
<a class="update-indicator" v-if="app.updateAvailable" :href="isOperator(app) ? `#/app/${app.id}/updates` : null" :title="$t('app.updateAvailableTooltip')" v-tooltip="$t('app.updateAvailableTooltip')"><i class="fa-fw fa-solid fa-arrow-up"/></a>
<div class="grid-item-indictors">
<a class="grid-item-update-indicator" v-if="app.updateAvailable" @click.stop :href="isOperator(app) ? `#/app/${app.id}/updates` : null" :title="$t('app.updateAvailableTooltip')" v-tooltip="$t('app.updateAvailableTooltip')"><i class="fa-fw fa-solid fa-arrow-up"/></a>
<a class="grid-item-checklist-indicator" v-if="AppsModel.pendingChecklistItems(app)" @click.stop :href="isOperator(app) ? `#/app/${app.id}/info` : null"><Icon icon="fa-solid fa-triangle-exclamation"/></a>
</div>
</a>
</TransitionGroup>
@@ -296,6 +298,9 @@ onUnmounted(() => {
</div>
</div>
</template>
<template #checklist="app">
<a class="list-item-checklist-indicator" v-if="AppsModel.pendingChecklistItems(app)" :href="`#/app/${app.id}/info`"><Icon icon="fa-solid fa-triangle-exclamation"/></a>
</template>
<template #sso="app">
<div v-show="app.type !== APP_TYPES.LINK">
<Icon icon="fa-brands fa-openid" v-show="app.ssoAuth && app.manifest.addons.oidc" v-tooltip="$t('apps.auth.openid')" />
@@ -485,27 +490,51 @@ onUnmounted(() => {
opacity: 1;
}
.update-indicator {
.grid-item-indictors {
position: absolute;
color: var(--pankow-color-success);
font-size: 18px;
cursor: pointer;
width: 50px;
height: 50px;
border-top-right-radius: 10px;
left: 0;
top: 0;
}
.grid-item-update-indicator {
color: var(--pankow-color-success);
font-size: 18px;
width: 40px;
height: 40px;
border-top-right-radius: 10px;
display: flex;
justify-content: center;
align-items: center;
}
.update-indicator:focus,
.update-indicator:hover {
.grid-item-update-indicator:focus,
.grid-item-update-indicator:hover {
opacity: 1;
color: var(--pankow-color-success-hover);
}
.grid-item-checklist-indicator {
color: var(--pankow-color-danger);
border-radius: 50px;
font-size: 18px;
width: 40px;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
}
.list-item-checklist-indicator {
color: var(--pankow-color-danger);
}
.list-item-checklist-indicator:focus,
.list-item-checklist-indicator:hover,
.grid-item-checklist-indicator:focus,
.grid-item-checklist-indicator:hover {
color: var(--pankow-color-danger-hover);
}
.empty-placeholder {
font-size: 18px;
margin: 10px;