mirror of
https://github.com/mirego/accent.git
synced 2024-09-11 10:55:28 +03:00
Add version runtime tag in footer when served from the API (#182)
This commit is contained in:
parent
e67286f156
commit
7e7abcb9ee
2
.github/workflows/ci.yml
vendored
2
.github/workflows/ci.yml
vendored
@ -24,7 +24,7 @@ jobs:
|
||||
|
||||
- uses: actions/setup-elixir@v1
|
||||
with:
|
||||
otp-version: 22.x
|
||||
otp-version: 22.3.3
|
||||
elixir-version: 1.9.x
|
||||
|
||||
- uses: actions/setup-node@v1
|
||||
|
@ -17,6 +17,11 @@ defmodule Accent.WebappView do
|
||||
|> String.replace("__API_HOST__", config[:api_host] || "#{http_scheme}#{default_api_host}")
|
||||
|> String.replace("__API_WS_HOST__", config[:api_ws_host] || "#{ws_scheme}#{default_api_host}")
|
||||
|> String.replace("__WEBAPP_SENTRY_DSN__", config[:sentry_dsn])
|
||||
|> String.replace("__VERSION__", version())
|
||||
end
|
||||
|
||||
defp version do
|
||||
Application.get_env(:accent, :version)
|
||||
end
|
||||
|
||||
defp config do
|
||||
|
1
webapp/app/config/environment.d.ts
vendored
1
webapp/app/config/environment.d.ts
vendored
@ -11,6 +11,7 @@ declare const config: {
|
||||
podModulePrefix: string;
|
||||
locationType: string;
|
||||
rootURL: string;
|
||||
version: string;
|
||||
|
||||
EmberENV: {
|
||||
EXTEND_PROTOTYPES: boolean;
|
||||
|
@ -1,6 +1,14 @@
|
||||
import Component from '@glimmer/component';
|
||||
import config from 'accent-webapp/config/environment';
|
||||
|
||||
export default class ApplicationFooter extends Component {
|
||||
// The version is replaced at runtime when served by the API.
|
||||
// If the webapp is not served by the API (like in development),
|
||||
// the version tag will show up as 'dev'.
|
||||
get version() {
|
||||
return config.version === '__VERSION__' ? 'dev' : config.version;
|
||||
}
|
||||
|
||||
toggleDark() {
|
||||
document.documentElement.setAttribute('data-theme', 'dark');
|
||||
localStorage.setItem('theme', 'dark');
|
||||
|
@ -21,25 +21,45 @@
|
||||
max-width: var(--screen-lg);
|
||||
}
|
||||
|
||||
.meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.version {
|
||||
font-family: var(--font-monospace);
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.button-themes {
|
||||
opacity: 0;
|
||||
display: flex;
|
||||
margin-left: 10px;
|
||||
transition: opacity 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.button-theme {
|
||||
padding: 0 3px;
|
||||
margin-left: 5px;
|
||||
background: none;
|
||||
opacity: 0.2;
|
||||
color: var(--text-color-normal);
|
||||
transition: color 0.2s ease-in-out, opacity 0.2s ease-in-out;
|
||||
}
|
||||
transition: color 0.2s ease-in-out, opacity 0.2s ease-in-out,
|
||||
transform 0.2s ease-in;
|
||||
|
||||
.button-theme--moon {
|
||||
&.button-theme--enabled,
|
||||
&:focus,
|
||||
&:hover {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.button-theme--moon {
|
||||
&:hover {
|
||||
transform: rotate(-20deg);
|
||||
color: #5660e4;
|
||||
}
|
||||
|
||||
@ -50,11 +70,8 @@
|
||||
}
|
||||
|
||||
.button-theme--sun {
|
||||
&.button-theme--enabled,
|
||||
&:focus,
|
||||
&:hover {
|
||||
outline: none;
|
||||
opacity: 1;
|
||||
transform: translateY(-3px);
|
||||
color: #dcbc18;
|
||||
}
|
||||
|
||||
|
@ -1,13 +1,20 @@
|
||||
<footer local-class="footer">
|
||||
<div local-class="inner">
|
||||
<div local-class="button-themes">
|
||||
<button local-class="button-theme button-theme--moon" {{on "click" this.toggleDark}}>
|
||||
{{inline-svg "/assets/moon.svg"}}
|
||||
</button>
|
||||
<button local-class="button-theme button-theme--sun" {{on "click" this.toggleLight}}>
|
||||
{{inline-svg "/assets/sun.svg"}}
|
||||
</button>
|
||||
<div local-class="meta">
|
||||
<span local-class="version">
|
||||
{{this.version}}
|
||||
</span>
|
||||
|
||||
<div local-class="button-themes">
|
||||
<button local-class="button-theme button-theme--moon" {{on "click" this.toggleDark}}>
|
||||
{{inline-svg "/assets/moon.svg"}}
|
||||
</button>
|
||||
<button local-class="button-theme button-theme--sun" {{on "click" this.toggleLight}}>
|
||||
{{inline-svg "/assets/sun.svg"}}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
{{t "components.application_footer.text"}}
|
||||
<a local-class="external-link" target="_blank" rel="noopener" href="https://mirego.com">
|
||||
|
@ -12,6 +12,7 @@ module.exports = function (environment) {
|
||||
: process.env.WEBAPP_SENTRY_DSN;
|
||||
|
||||
const ENV = {
|
||||
version: '__VERSION__',
|
||||
modulePrefix: 'accent-webapp',
|
||||
podModulePrefix: 'accent-webapp/pods',
|
||||
environment,
|
||||
|
Loading…
Reference in New Issue
Block a user