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

Show app icons in the grid in grayscale if app is stopped

Browse Source
This commit is contained in:
Johannes Zellner
2025-11-03 11:28:52 +01:00
parent 6f90bd3db0
commit 8e92b53d9f
1 changed files with 6 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dashboard/src/views/AppsView.vue
+6 -2
View File
@@ -301,7 +301,7 @@ onDeactivated(() => {
</div>
<TransitionGroup name="grid-animation" tag="div" class="grid" v-if="viewType === VIEW_TYPE.GRID">
<a v-for="app in filteredApps" :key="app.id" class="grid-item" @click="onOpenApp(app, $event)" :href="'https://' + app.fqdn" target="_blank" :style="{ width: itemWidth }">
<a v-for="app in filteredApps" :key="app.id" class="grid-item" :class="{ 'item-inactive': app.runState === RSTATES.STOPPED }" @click="onOpenApp(app, $event)" :href="'https://' + app.fqdn" target="_blank" :style="{ width: itemWidth }">
<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" v-if="app.type === APP_TYPES.LINK">{{ $t('app.appLink.title') }}</div>
@@ -322,7 +322,7 @@ onDeactivated(() => {
<TableView :columns="listColumns" :model="filteredApps">
<template #icon="app">
<a :href="'https://' + app.fqdn" target="_blank">
<img :alt="app.label || app.subdomain || app.fqdn" class="list-icon" :src="app.iconUrl" v-fallback-image="API_ORIGIN + '/img/appicon_fallback.png'"/>
<img :alt="app.label || app.subdomain || app.fqdn" class="list-icon" :class="{ 'item-inactive': app.runState === RSTATES.STOPPED }" :src="app.iconUrl" v-fallback-image="API_ORIGIN + '/img/appicon_fallback.png'"/>
</a>
</template>
<template #label="app">
@@ -407,6 +407,10 @@ tr:hover .action-button {
transform: translateY(-30px);
}
.item-inactive {
filter: grayscale(1);
}
.list-icon {
width: 32px;
height: 32px;