public/harvester-ui-extension
1
0
Fork 0
mirror of https://github.com/harvester/harvester-ui-extension.git synced 2025-12-13 21:21:44 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix upgrade model style

Browse Source 
Signed-off-by: andy.lee <andy.lee@suse.com>
(cherry picked from commit ff439e66a9c7335b02ba4a4b16e09b85579c9a7c)
This commit is contained in:
andy.lee 2025-02-25 15:15:26 +08:00 committed by Mergify
parent 1a727f0001
commit 81a572e5b5
2 changed files with 50 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
pkg/harvester/components/HarvesterUpgradeHeader.vue
View File

@ -190,6 +190,7 @@ export default {
v-clean-tooltip="{ v-clean-tooltip="{
placement: 'bottom-left', placement: 'bottom-left',
}" }"
popper-class="upgrade-header-dropdown"
class="hand" class="hand"
> >
<slot name="button-content"> <slot name="button-content">
@ -338,6 +339,12 @@ export default {
</div> </div>
</template> </template>
<style lang="scss">
.upgrade-header-dropdown .v-popper__arrow-container {
display: none;
}
</style>
<style lang="scss" scoped> <style lang="scss" scoped>
a { a {
float: right; float: right;

89
pkg/harvester/components/HarvesterUpgradeProgressBarList.vue
View File

@ -12,7 +12,7 @@ export default {
default: '' default: ''
}, },
precent: { percent: {
type: Number, type: Number,
default: 0 default: 0
}, },
@ -39,16 +39,18 @@ export default {
<template> <template>
<div class="bar-list"> <div class="bar-list">
<h4>{{ title }} <span class="float-r text-info">{{ precent }}%</span></h4> <h4>{{ title }} <span class="float-r text-info">{{ percent }}%</span></h4>
<div> <div>
<div> <div>
<Collapse v-model:open="open"> <Collapse v-model:open="open">
<template #title> <template #title>
<div class="total-bar"> <div class="total-bar">
<span class="bar"><PercentageBar <span class="bar">
:model-value="precent" <PercentageBar
preferred-direction="MORE" :model-value="percent"
/></span> preferred-direction="MORE"
/>
</span>
<span <span
class="on-off" class="on-off"
@click="handleSwitch" @click="handleSwitch"
@ -56,28 +58,26 @@ export default {
</div> </div>
</template> </template>
<template> <div class="custom-content">
<div class="custom-content"> <div
<div v-for="(item, i) in list"
v-for="(item, i) in list" :key="i"
:key="i" >
> <p>
<p> {{ item.name }} <span
{{ item.name }} <span class="status"
class="status" :class="{ [item.state]: true }"
:class="{ [item.state]: true }" >{{ item.state }}</span>
>{{ item.state }}</span> </p>
</p> <PercentageBar
<PercentageBar :model-value="item.percent"
:model-value="item.percent" preferred-direction="MORE"
preferred-direction="MORE" />
/> <p class="warning">
<p class="warning"> {{ item.message }}
{{ item.message }} </p>
</p>
</div>
</div> </div>
</template> </div>
</Collapse> </Collapse>
</div> </div>
</div> </div>
@ -93,7 +93,7 @@ export default {
.total-bar { .total-bar {
display: flex; display: flex;
user-select: none; user-select: none;
.bar { > .bar {
width: 85%; width: 85%;
} }
.on-off { .on-off {
@ -102,25 +102,22 @@ export default {
} }
} }
.custom-content { .custom-content {
.item { margin-bottom: 14px;
margin-bottom: 14px; p {
p { margin-bottom: 4px;
margin-bottom: 4px; }
} .status {
.status { float: right;
float: right; }
} .Succeeded, .Upgrading, .Pending {
.Succeeded, .Upgrading, .Pending { color: var(--success);
color: var(--success); }
} .failed {
.failed { color: var(--error)
color: var(--error) }
} .warning {
.warning { color: var(--error);
color: var(--error);
}
} }
} }
} }
</style> </style>