better timer animation alignment (#2148)
This commit is contained in:
Michael Geers
GitHub
parent
130ed10102
commit
b0bcbc7e91
14 changed files with 53 additions and 72 deletions
|
|
@ -7,15 +7,13 @@
|
|||
<div
|
||||
v-if="chargePower && activePhases"
|
||||
v-tooltip="{ content: phaseTooltip }"
|
||||
class="badge rounded-pill bg-secondary text-light cursor-pointer"
|
||||
class="badge rounded-pill bg-secondary text-light cursor-pointer d-inline-flex align-items-center"
|
||||
tabindex="0"
|
||||
>
|
||||
{{ activePhases }}P
|
||||
<div>{{ activePhases }}P</div>
|
||||
<WaitingDots
|
||||
v-if="phaseTimerVisible"
|
||||
class="small"
|
||||
:direction="phaseAction === 'scale1p' ? 'down' : 'up'"
|
||||
orientation="vertical"
|
||||
/>
|
||||
</div>
|
||||
<fa-icon
|
||||
|
|
@ -36,22 +34,19 @@
|
|||
</div>
|
||||
<h3 class="value">
|
||||
{{ fmt(chargePower) }}
|
||||
<small class="text-muted">
|
||||
{{ fmtUnit(chargePower) }}W<small
|
||||
v-if="pvTimerVisible"
|
||||
v-tooltip="{
|
||||
content: $t(`main.loadpointDetails.tooltip.pv.${pvAction}`, {
|
||||
remaining: fmtShortDuration(pvRemainingInterpolated, true),
|
||||
}),
|
||||
}"
|
||||
class="cursor-pointer d-inline-block px-2"
|
||||
tabindex="0"
|
||||
>
|
||||
<WaitingDots
|
||||
:direction="pvAction === 'disable' ? 'down' : 'up'"
|
||||
orientation="vertical"
|
||||
/>
|
||||
</small>
|
||||
<small class="text-muted">{{ fmtUnit(chargePower) }}W</small
|
||||
><small
|
||||
v-if="pvTimerVisible"
|
||||
v-tooltip="{
|
||||
content: $t(`main.loadpointDetails.tooltip.pv.${pvAction}`, {
|
||||
remaining: fmtShortDuration(pvRemainingInterpolated, true),
|
||||
}),
|
||||
}"
|
||||
class="text-muted cursor-pointer d-inline-block align-bottom"
|
||||
style="margin-bottom: 0.1em"
|
||||
tabindex="0"
|
||||
>
|
||||
<WaitingDots :direction="pvAction === 'disable' ? 'down' : 'up'" />
|
||||
</small>
|
||||
</h3>
|
||||
</div>
|
||||
|
|
@ -96,7 +91,6 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import "../icons";
|
||||
import WaitingDots from "./WaitingDots";
|
||||
import formatter from "../mixins/formatter";
|
||||
|
||||
|
|
|
|||
|
|
@ -1,65 +1,46 @@
|
|||
<template>
|
||||
<span
|
||||
class="dots-animation position-relative d-inline-block lh-1"
|
||||
:class="`orientation-${orientation} direction-${direction}`"
|
||||
>
|
||||
<fa-icon class="dots-back lh-1" :icon="icon"></fa-icon
|
||||
><fa-icon class="dots-front lh-1 position-absolute start-0 top-0" :icon="icon"></fa-icon>
|
||||
</span>
|
||||
<div class="root position-relative" :class="`direction-${direction}`">
|
||||
<shopicon-options-filled class="dots dots-back"></shopicon-options-filled
|
||||
><shopicon-options-filled
|
||||
class="dots dots-front position-absolute start-0 top-0"
|
||||
></shopicon-options-filled>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import "@h2d2/shopicons/es/filled/options";
|
||||
|
||||
export default {
|
||||
name: "WaitingDots",
|
||||
props: {
|
||||
orientation: { type: String, default: "horizontal" },
|
||||
direction: { type: String, default: "up" },
|
||||
},
|
||||
computed: {
|
||||
icon() {
|
||||
return this.orientation === "horizontal" ? "ellipsis-h" : "ellipsis-v";
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.dots-animation {
|
||||
vertical-align: baseline;
|
||||
.dots {
|
||||
height: 1em;
|
||||
width: 1em;
|
||||
}
|
||||
.dots-animation .dots-front,
|
||||
.dots-animation .dots-back {
|
||||
.dots-front,
|
||||
.dots-back {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.dots-animation .dots-back {
|
||||
.dots-back {
|
||||
opacity: 0.25;
|
||||
}
|
||||
.dots-animation .dots-front {
|
||||
.dots-front {
|
||||
opacity: 1;
|
||||
}
|
||||
.orientation-horizontal.direction-up .dots-front {
|
||||
animation: dots-horizontal 2s infinite normal steps(4, jump-none);
|
||||
}
|
||||
.orientation-horizontal.direction-down .dots-front {
|
||||
animation: dots-horizontal 2s infinite reverse steps(4, jump-none);
|
||||
}
|
||||
.orientation-vertical.direction-up .dots-front {
|
||||
.direction-up .dots-front {
|
||||
animation: dots-vertical 2s infinite normal steps(4, jump-none);
|
||||
}
|
||||
.orientation-vertical.direction-down .dots-front {
|
||||
.direction-down .dots-front {
|
||||
animation: dots-vertical 2s infinite reverse steps(4, jump-none);
|
||||
}
|
||||
|
||||
@keyframes dots-horizontal {
|
||||
25% {
|
||||
clip-path: inset(0 100% 0 0);
|
||||
}
|
||||
75% {
|
||||
clip-path: inset(0 0 0 0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes dots-vertical {
|
||||
25% {
|
||||
clip-path: inset(100% 0 0 0);
|
||||
|
|
@ -68,4 +49,8 @@ export default {
|
|||
clip-path: inset(0 0 0 0);
|
||||
}
|
||||
}
|
||||
|
||||
.root >>> svg {
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -22,8 +22,6 @@ import { faGift } from "@fortawesome/free-solid-svg-icons/faGift";
|
|||
import { faBox } from "@fortawesome/free-solid-svg-icons/faBox";
|
||||
import { faHome } from "@fortawesome/free-solid-svg-icons/faHome";
|
||||
import { faCar } from "@fortawesome/free-solid-svg-icons/faCar";
|
||||
import { faEllipsisH } from "@fortawesome/free-solid-svg-icons/faEllipsisH";
|
||||
import { faEllipsisV } from "@fortawesome/free-solid-svg-icons/faEllipsisV";
|
||||
import { faSquare } from "@fortawesome/free-solid-svg-icons/faSquare";
|
||||
import { faExclamationCircle } from "@fortawesome/free-solid-svg-icons/faExclamationCircle";
|
||||
import { faAngleDoubleLeft } from "@fortawesome/free-solid-svg-icons/faAngleDoubleLeft";
|
||||
|
|
@ -53,9 +51,7 @@ library.add(
|
|||
faFlask,
|
||||
faTemperatureHigh,
|
||||
faTemperatureLow,
|
||||
faThermometerHalf,
|
||||
faEllipsisH,
|
||||
faEllipsisV
|
||||
faThermometerHalf
|
||||
);
|
||||
|
||||
// eslint-disable-next-line vue/component-definition-name-casing
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
4
dist/index.html
vendored
4
dist/index.html
vendored
|
|
@ -1,4 +1,4 @@
|
|||
<!DOCTYPE html><html lang="de"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="description" content="EV Charge Controller"><meta name="author" content="andig"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="black"><link rel="apple-touch-icon" sizes="180x180" href="ico/apple-touch-icon.png?[[.Version]]"><link rel="icon" type="image/png" sizes="32x32" href="ico/favicon-32x32.png?[[.Version]]"><link rel="icon" type="image/png" sizes="16x16" href="ico/favicon-16x16.png?[[.Version]]"><link rel="manifest" href="ico/site.webmanifest"><link rel="mask-icon" href="ico/safari-pinned-tab.svg?[[.Version]]" color="#18191a"><link rel="shortcut icon" href="ico/favicon.ico?[[.Version]]"><meta name="apple-mobile-web-app-title" content="evcc"><meta name="application-name" content="evcc"><meta name="msapplication-TileColor" content="#18191a"><meta name="msapplication-config" content="ico/browserconfig.xml"><meta name="theme-color" content="#18191a"><title>evcc</title><link href="css/chunk-vendors.a7b690cd.css" rel="preload" as="style"><link href="css/index.22b76587.css" rel="preload" as="style"><link href="js/chunk-vendors.e8d8381a.js" rel="preload" as="script"><link href="js/index.2c7ee3ad.js" rel="preload" as="script"><link href="css/chunk-vendors.a7b690cd.css" rel="stylesheet"><link href="css/index.22b76587.css" rel="stylesheet"></head><body><script>window.evcc = {
|
||||
<!DOCTYPE html><html lang="de"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="description" content="EV Charge Controller"><meta name="author" content="andig"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="black"><link rel="apple-touch-icon" sizes="180x180" href="ico/apple-touch-icon.png?[[.Version]]"><link rel="icon" type="image/png" sizes="32x32" href="ico/favicon-32x32.png?[[.Version]]"><link rel="icon" type="image/png" sizes="16x16" href="ico/favicon-16x16.png?[[.Version]]"><link rel="manifest" href="ico/site.webmanifest"><link rel="mask-icon" href="ico/safari-pinned-tab.svg?[[.Version]]" color="#18191a"><link rel="shortcut icon" href="ico/favicon.ico?[[.Version]]"><meta name="apple-mobile-web-app-title" content="evcc"><meta name="application-name" content="evcc"><meta name="msapplication-TileColor" content="#18191a"><meta name="msapplication-config" content="ico/browserconfig.xml"><meta name="theme-color" content="#18191a"><title>evcc</title><link href="css/chunk-vendors.a7b690cd.css" rel="preload" as="style"><link href="css/index.8cd7e991.css" rel="preload" as="style"><link href="js/chunk-vendors.675bab5a.js" rel="preload" as="script"><link href="js/index.9d2f9769.js" rel="preload" as="script"><link href="css/chunk-vendors.a7b690cd.css" rel="stylesheet"><link href="css/index.8cd7e991.css" rel="stylesheet"></head><body><script>window.evcc = {
|
||||
version: "[[.Version]]",
|
||||
configured: "[[.Configured]]",
|
||||
};</script><div id="app"></div><script src="js/chunk-vendors.e8d8381a.js"></script><script src="js/index.2c7ee3ad.js"></script></body></html>
|
||||
};</script><div id="app"></div><script src="js/chunk-vendors.675bab5a.js"></script><script src="js/index.9d2f9769.js"></script></body></html>
|
||||
File diff suppressed because one or more lines are too long
1
dist/js/chunk-vendors.675bab5a.js.map
vendored
Normal file
1
dist/js/chunk-vendors.675bab5a.js.map
vendored
Normal file
File diff suppressed because one or more lines are too long
1
dist/js/chunk-vendors.e8d8381a.js.map
vendored
1
dist/js/chunk-vendors.e8d8381a.js.map
vendored
File diff suppressed because one or more lines are too long
2
dist/js/index.2c7ee3ad.js
vendored
2
dist/js/index.2c7ee3ad.js
vendored
File diff suppressed because one or more lines are too long
1
dist/js/index.2c7ee3ad.js.map
vendored
1
dist/js/index.2c7ee3ad.js.map
vendored
File diff suppressed because one or more lines are too long
2
dist/js/index.9d2f9769.js
vendored
Normal file
2
dist/js/index.9d2f9769.js
vendored
Normal file
File diff suppressed because one or more lines are too long
1
dist/js/index.9d2f9769.js.map
vendored
Normal file
1
dist/js/index.9d2f9769.js.map
vendored
Normal file
File diff suppressed because one or more lines are too long
5
package-lock.json
generated
5
package-lock.json
generated
|
|
@ -1632,6 +1632,11 @@
|
|||
"integrity": "sha512-82cpyJyKRoQoRi+14ibCeGPu0CwypgtBAdBhq1WfvagpCZNKqwXbKwXllYSMG91DhmG4jt9gN8eP6lGOtozuaw==",
|
||||
"dev": true
|
||||
},
|
||||
"@h2d2/shopicons": {
|
||||
"version": "1.0.4",
|
||||
"resolved": "https://registry.npmjs.org/@h2d2/shopicons/-/shopicons-1.0.4.tgz",
|
||||
"integrity": "sha512-BXuSI0A5HF1rwYI37dEKGGL/374s5dasqLxP8z+aUveA9MxkzqTycdizMA7a0cEHAUbToqL9pHq4fNRIi9aIdA=="
|
||||
},
|
||||
"@hapi/address": {
|
||||
"version": "2.1.4",
|
||||
"resolved": "https://registry.npmjs.org/@hapi/address/-/address-2.1.4.tgz",
|
||||
|
|
|
|||
|
|
@ -16,6 +16,7 @@
|
|||
"@fortawesome/free-regular-svg-icons": "^5.15.4",
|
||||
"@fortawesome/free-solid-svg-icons": "^5.15.4",
|
||||
"@fortawesome/vue-fontawesome": "^2.0.6",
|
||||
"@h2d2/shopicons": "^1.0.4",
|
||||
"axios": "^0.24.0",
|
||||
"bootstrap": "^5.1.3",
|
||||
"canvas-confetti": "^1.4.0",
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue