Stefan/evcc-io
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Better phase UI edge cases (#5345)

Browse source
This commit is contained in:
Michael Geers 2022-12-06 08:43:01 +01:00 • committed by GitHub
parent 5a630fc5c8
commit 37e0e73151
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 38 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

18
assets/js/components/Phases.story.vue
View file

@ -30,8 +30,24 @@ const state = reactive({
:chargeCurrents="[11, 9, 12]"
/>
</Variant>
<Variant title="more available">
<Variant title="one phase, more available">
<Phases v-bind="state" :chargeCurrent="12" :chargeCurrents="[6, 0, 0]" />
</Variant>
<Variant title="two phases active">
<Phases
v-bind="state"
:phasesActive="2"
:chargeCurrent="16"
:chargeCurrents="[16, 16, 0]"
/>
</Variant>
<Variant title="asymetric phases">
<Phases
v-bind="state"
:phasesActive="2"
:chargeCurrent="16"
:chargeCurrents="[8, 0.9, 14]"
/>
</Variant>
</Story>
</template>

20
assets/js/components/Phases.vue
View file

@ -22,9 +22,17 @@ export default {
minCurrent: { type: Number },
maxCurrent: { type: Number },
},
computed: {
highestActivePhase() {
if (this.chargeCurrents) {
return this.chargeCurrents.findLastIndex((current) => current > 0) + 1;
}
return this.phasesActive;
},
},
methods: {
inactive(num) {
return num > this.phasesActive;
return num > this.highestActivePhase;
},
targetWidth() {
let current = Math.min(Math.max(this.minCurrent, this.chargeCurrent), this.maxCurrent);
@ -52,13 +60,19 @@ export default {
position: relative;
border-radius: 1px;
overflow: hidden;
flex-basis: 100%;
opacity: 1;
transition-property: flex-basis, margin, opacity;
transition-duration: var(--evcc-transition-slow);
transition-timing-function: ease-in;
}
html.dark .phase {
background-color: var(--bs-gray-bright);
}
.phase.inactive {
display: none;
flex-basis: 0;
margin-right: 0 !important;
opacity: 0;
}
.target,
.real {

2
dist/assets/index.a61ffbf5.js → dist/assets/index.b0b5d5cc.js vendored
View file

File diff suppressed because one or more lines are too long

2
dist/assets/index.c173ebc0.css → dist/assets/index.ef0f9994.css vendored
View file

File diff suppressed because one or more lines are too long

4
dist/index.html vendored
View file

@ -20,8 +20,8 @@
<meta name="theme-color" content="#020318" />
<title>evcc</title>
<script type="module" crossorigin src="./assets/index.a61ffbf5.js"></script>
<link rel="stylesheet" href="./assets/index.c173ebc0.css">
<script type="module" crossorigin src="./assets/index.b0b5d5cc.js"></script>
<link rel="stylesheet" href="./assets/index.ef0f9994.css">
</head>
<body>