ALHP/alhp-web
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Refactor "Currently Building" component for improved clarity

Browse Source 
Simplified template structure and improved readability by consolidating conditional rendering logic. Added an expandable queue view and a message for empty queues, enhancing the UI/UX. Introduced reusable styles for circular indicators.
This commit is contained in:
vikingowl
2025-04-07 18:53:42 +02:00
parent a64f296ebe
commit 3c8f8546cc
1 changed files with 82 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

114
frontend/src/components/CurrentlyBuilding.vue
View File

@@ -7,21 +7,20 @@
variant="elevated">
<v-card-title>
<v-row align="center" class="w-100" style="margin-top: 1px">
<v-col class="v-col-12 v-col-md-1">
<v-row
v-if="packageCount.building > 0"
:class="mobile ? 'mt-1' : ''"
class="flex-nowrap ms-1">
<div class="pulsating-circle-amber me-2" style="transform: translateY(10px)" />
<span>Building</span>
</v-row>
<v-row v-else class="flex-nowrap" no-gutters>
<div class="pulsating-circle-green me-3" style="transform: translateY(10px)" />
<span>Idle</span>
<v-col class="v-col-12 v-col-lg-1">
<v-row :class="mobile ? 'mt-1' : ''" class="flex-nowrap ms-1 d-flex align-items-center">
<div
:class="
packageCount.building > 0 ? 'pulsating-circle-amber' : 'pulsating-circle-green'
"
class="circle-offset flex-circle" />
<span class="ms-2">
{{ packageCount.building > 0 ? 'Building' : 'Idle' }}
</span>
</v-row>
</v-col>
<v-col v-if="packageCount.building > 0" class="v-col-12 v-col-md-8">
<v-col v-if="packageCount.building > 0" class="v-col-12 v-col-lg-8">
<v-progress-linear
:max="packageCount.built + packageCount.building + packageCount.queued"
:model-value="packageCount.built"
@@ -33,7 +32,7 @@
<v-col
:class="mobile ? 'mt-n3' : 'text-end ms-auto'"
class="text-grey v-col-12 v-col-md-2"
class="text-grey v-col-12 v-col-lg-2"
cols="auto"
style="font-size: 13px">
Last updated
@@ -48,7 +47,7 @@
<v-card-text
v-if="packageCount.building > 0 || packageCount.queued > 0"
class="d-flex flex-column flex-sm-row">
class="d-flex flex-column">
<v-list width="100%">
<v-list-subheader>Building</v-list-subheader>
<v-list-item v-for="(pkg, index) in packages.building" :key="index">
@@ -64,24 +63,63 @@
<v-list width="100%">
<v-list-subheader>Queued</v-list-subheader>
<v-list-item
v-for="(pkg, index) in packages.queued.slice(0, packageCount.building)"
:key="index"
prepend-icon="mdi-chevron-right">
<v-list-item-title>
{{ pkg.pkgbase }} <span class="text-grey">({{ pkg.repo }})</span>
</v-list-item-title>
<v-list-item-subtitle>{{ pkg.arch_version }}</v-list-item-subtitle>
</v-list-item>
<v-list-item
v-if="packageCount.queued > packageCount.building"
prepend-icon="mdi-dots-horizontal">
<v-list-item-title>
<span v-if="packageCount.building > 0">+</span>
{{ packageCount.queued - packageCount.building }}
<span v-if="packageCount.building > 0">more</span><span v-else>in queue</span>
</v-list-item-title>
</v-list-item>
<!-- SHOW MESSAGE IF NO QUEUED PACKAGES -->
<template v-if="packages.queued.length === 0">
<v-list-item>
<v-list-item-title class="text-grey"> No packages queued.</v-list-item-title>
</v-list-item>
</template>
<!-- ELSE SHOW SUMMARY VIEW AND EXPANSION PANEL -->
<template v-else>
<!-- SUMMARY VIEW: First few queued items -->
<v-list-item
v-for="(pkg, index) in packages.queued.slice(0, packageCount.building)"
:key="index"
prepend-icon="mdi-chevron-right">
<v-list-item-title>
{{ pkg.pkgbase }} <span class="text-grey">({{ pkg.repo }})</span>
</v-list-item-title>
<v-list-item-subtitle>{{ pkg.arch_version }}</v-list-item-subtitle>
</v-list-item>
<!-- SUMMARY VIEW: Remaining count -->
<v-list-item
v-if="packageCount.queued > packageCount.building"
prepend-icon="mdi-dots-horizontal">
<v-list-item-title>
<span v-if="packageCount.building > 0">+</span>
{{ packageCount.queued - packageCount.building }}
<span v-if="packageCount.building > 0">more</span><span v-else>in queue</span>
</v-list-item-title>
</v-list-item>
<!-- FULL LIST EXPANSION PANEL -->
<v-expansion-panels>
<v-expansion-panel>
<v-expansion-panel-title>
Show all queued packages
<span class="text-grey">({{ packages.queued.length }})</span>
</v-expansion-panel-title>
<v-expansion-panel-text>
<v-list outlined rounded>
<v-list-item
v-for="(pkg, index) in packages.queued"
:key="index"
class="d-flex justify-space-between">
<v-list-item-title>
{{ pkg.pkgbase }} <span class="text-grey">({{ pkg.repo }})</span>
</v-list-item-title>
<v-list-item-subtitle>
{{ pkg.arch_version }}
</v-list-item-subtitle>
</v-list-item>
</v-list>
</v-expansion-panel-text>
</v-expansion-panel>
</v-expansion-panels>
</template>
</v-list>
</v-card-text>
</v-card>
@@ -259,6 +297,18 @@ onMounted(() => {
animation: pulse-ring 1.25s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
}
.circle-offset {
transform: translateY(10px); /* Preserves vertical shift as needed */
}
.flex-circle {
flex-shrink: 0; /* Prevents shrinking */
flex-grow: 0; /* Prevents growing */
width: 12px; /* Ensures consistent dimensions */
height: 12px;
border-radius: 50%; /* Maintains circular appearance */
}
@-webkit-keyframes pulse-ring {
0% {
transform: scale(0.33);