UI: fix chrome focus in footer (#26466)
This commit is contained in:
Michael Geers
GitHub
parent
3bf1079803
commit
5d4551fc7e
3 changed files with 112 additions and 114 deletions
|
|
@ -7,4 +7,7 @@ export default {
|
|||
name: "@storybook/vue3-vite",
|
||||
options: {},
|
||||
},
|
||||
core: {
|
||||
disableTelemetry: true,
|
||||
},
|
||||
} satisfies StorybookConfig;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<footer class="footer" data-testid="footer">
|
||||
<div class="container py-2">
|
||||
<div class="d-flex justify-content-between">
|
||||
<div class="d-flex justify-content-between gap-2">
|
||||
<Version v-bind="version" />
|
||||
<Savings v-bind="savings" />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,128 +1,123 @@
|
|||
<template>
|
||||
<div class="text-truncate">
|
||||
<a
|
||||
v-if="commit"
|
||||
:href="githubHashUrl"
|
||||
target="_blank"
|
||||
class="btn btn-link ps-0 text-decoration-none evcc-default-text text-nowrap d-flex align-items-end"
|
||||
>
|
||||
<Logo class="logo me-2 flex-shrink-0" />
|
||||
<span class="text-decoration-underline text-truncate">v{{ installed }}</span>
|
||||
<shopicon-regular-moonstars
|
||||
class="ms-2 text-gray-light flex-shrink-0"
|
||||
></shopicon-regular-moonstars>
|
||||
</a>
|
||||
<button
|
||||
v-else-if="newVersionAvailable"
|
||||
href="#"
|
||||
class="btn btn-link ps-0 text-decoration-none evcc-default-text text-nowrap d-flex align-items-end"
|
||||
@click="openModal"
|
||||
>
|
||||
<shopicon-regular-gift class="me-2"></shopicon-regular-gift>
|
||||
<span class="text-decoration-underline text-truncate">v{{ installed }}</span>
|
||||
<span class="ms-2 d-none d-sm-block text-gray-medium text-decoration-underline">
|
||||
{{ $t("footer.version.availableLong") }}
|
||||
</span>
|
||||
</button>
|
||||
<a
|
||||
v-else
|
||||
:href="releaseNotesUrl(installed)"
|
||||
target="_blank"
|
||||
class="btn btn-link evcc-default-text ps-0 text-decoration-none text-nowrap d-flex align-items-end"
|
||||
>
|
||||
<Logo class="logo me-2 flex-shrink-0" />
|
||||
<span class="text-decoration-underline text-truncate">v{{ installed }}</span>
|
||||
</a>
|
||||
<a
|
||||
v-if="commit"
|
||||
:href="githubHashUrl"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="btn btn-link px-0 text-decoration-none evcc-default-text text-nowrap d-flex align-items-end text-truncate"
|
||||
>
|
||||
<Logo class="logo me-2 flex-shrink-0" />
|
||||
<span class="text-decoration-underline text-truncate">v{{ installed }}</span>
|
||||
<shopicon-regular-moonstars
|
||||
class="ms-2 text-gray-light flex-shrink-0"
|
||||
></shopicon-regular-moonstars>
|
||||
</a>
|
||||
<button
|
||||
v-else-if="newVersionAvailable"
|
||||
class="btn btn-link px-0 text-decoration-none evcc-default-text text-nowrap d-flex align-items-end text-truncate"
|
||||
@click="openModal"
|
||||
>
|
||||
<shopicon-regular-gift class="me-2"></shopicon-regular-gift>
|
||||
<span class="text-decoration-underline text-truncate">v{{ installed }}</span>
|
||||
<span class="ms-2 d-none d-sm-block text-gray-medium text-decoration-underline">
|
||||
{{ $t("footer.version.availableLong") }}
|
||||
</span>
|
||||
</button>
|
||||
<a
|
||||
v-else
|
||||
:href="releaseNotesUrl(installed)"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="btn btn-link evcc-default-text px-0 text-decoration-none text-nowrap d-flex align-items-end text-truncate"
|
||||
>
|
||||
<Logo class="logo me-2 flex-shrink-0" />
|
||||
<span class="text-decoration-underline text-truncate">v{{ installed }}</span>
|
||||
</a>
|
||||
|
||||
<Teleport to="body">
|
||||
<div
|
||||
id="updateModal"
|
||||
class="modal fade text-dark"
|
||||
tabindex="-1"
|
||||
role="dialog"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<div class="modal-dialog modal-dialog-centered" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title">{{ $t("footer.version.modalTitle") }}</h5>
|
||||
<button
|
||||
type="button"
|
||||
class="btn-close"
|
||||
data-bs-dismiss="modal"
|
||||
aria-label="Close"
|
||||
></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div v-if="updateStarted">
|
||||
<p>{{ $t("footer.version.modalUpdateStarted") }}</p>
|
||||
<div class="progress my-3">
|
||||
<div
|
||||
class="progress-bar progress-bar-striped progress-bar-animated"
|
||||
role="progressbar"
|
||||
:style="{ width: uploadProgress + '%' }"
|
||||
></div>
|
||||
</div>
|
||||
<p>{{ updateStatus }} {{ uploadMessage }}</p>
|
||||
</div>
|
||||
<div v-else>
|
||||
<p>
|
||||
<small>
|
||||
{{ $t("footer.version.modalInstalledVersion") }}:
|
||||
{{ installed }}
|
||||
</small>
|
||||
</p>
|
||||
<!-- eslint-disable vue/no-v-html -->
|
||||
<div v-if="releaseNotes" v-html="releaseNotes"></div>
|
||||
<!-- eslint-enable vue/no-v-html -->
|
||||
<p v-else>
|
||||
{{ $t("footer.version.modalNoReleaseNotes") }}
|
||||
<a :href="releaseNotesUrl(available)">GitHub</a>.
|
||||
</p>
|
||||
<Teleport to="body">
|
||||
<div
|
||||
id="updateModal"
|
||||
class="modal fade text-dark"
|
||||
tabindex="-1"
|
||||
role="dialog"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<div class="modal-dialog modal-dialog-centered" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title">{{ $t("footer.version.modalTitle") }}</h5>
|
||||
<button
|
||||
type="button"
|
||||
class="btn-close"
|
||||
data-bs-dismiss="modal"
|
||||
aria-label="Close"
|
||||
></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div v-if="updateStarted">
|
||||
<p>{{ $t("footer.version.modalUpdateStarted") }}</p>
|
||||
<div class="progress my-3">
|
||||
<div
|
||||
class="progress-bar progress-bar-striped progress-bar-animated"
|
||||
role="progressbar"
|
||||
:style="{ width: uploadProgress + '%' }"
|
||||
></div>
|
||||
</div>
|
||||
<p>{{ updateStatus }} {{ uploadMessage }}</p>
|
||||
</div>
|
||||
<div class="modal-footer d-flex justify-content-between">
|
||||
<div v-else>
|
||||
<p>
|
||||
<small>
|
||||
{{ $t("footer.version.modalInstalledVersion") }}:
|
||||
{{ installed }}
|
||||
</small>
|
||||
</p>
|
||||
<!-- eslint-disable vue/no-v-html -->
|
||||
<div v-if="releaseNotes" v-html="releaseNotes"></div>
|
||||
<!-- eslint-enable vue/no-v-html -->
|
||||
<p v-else>
|
||||
{{ $t("footer.version.modalNoReleaseNotes") }}
|
||||
<a :href="releaseNotesUrl(available)">GitHub</a>.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer d-flex justify-content-between">
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-outline-secondary"
|
||||
:disabled="updateStarted"
|
||||
data-bs-dismiss="modal"
|
||||
>
|
||||
{{ $t("footer.version.modalCancel") }}
|
||||
</button>
|
||||
<div>
|
||||
<button
|
||||
v-if="hasUpdater"
|
||||
type="button"
|
||||
class="btn btn-outline-secondary"
|
||||
class="btn btn-primary"
|
||||
:disabled="updateStarted"
|
||||
data-bs-dismiss="modal"
|
||||
@click="update"
|
||||
>
|
||||
{{ $t("footer.version.modalCancel") }}
|
||||
</button>
|
||||
<div>
|
||||
<button
|
||||
v-if="hasUpdater"
|
||||
type="button"
|
||||
class="btn btn-primary"
|
||||
:disabled="updateStarted"
|
||||
@click="update"
|
||||
>
|
||||
<span v-if="updateStarted">
|
||||
<span
|
||||
class="spinner-border spinner-border-sm"
|
||||
role="status"
|
||||
aria-hidden="true"
|
||||
>
|
||||
</span>
|
||||
{{ $t("footer.version.modalUpdate") }}
|
||||
<span v-if="updateStarted">
|
||||
<span
|
||||
class="spinner-border spinner-border-sm"
|
||||
role="status"
|
||||
aria-hidden="true"
|
||||
>
|
||||
</span>
|
||||
<span v-else>{{ $t("footer.version.modalUpdateNow") }}</span>
|
||||
</button>
|
||||
<a
|
||||
v-else
|
||||
:href="releaseNotesUrl(available)"
|
||||
class="btn btn-primary"
|
||||
>
|
||||
{{ $t("footer.version.modalDownload") }}
|
||||
</a>
|
||||
</div>
|
||||
{{ $t("footer.version.modalUpdate") }}
|
||||
</span>
|
||||
<span v-else>{{ $t("footer.version.modalUpdateNow") }}</span>
|
||||
</button>
|
||||
<a v-else :href="releaseNotesUrl(available)" class="btn btn-primary">
|
||||
{{ $t("footer.version.modalDownload") }}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Teleport>
|
||||
</div>
|
||||
</div>
|
||||
</Teleport>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
|
|
@ -195,6 +190,6 @@ export default defineComponent({
|
|||
}
|
||||
.logo {
|
||||
height: 1.1rem;
|
||||
margin-bottom: 0.2rem;
|
||||
margin: 0.3rem 0 0.2rem;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue