b08a6b5cec
1. Renames color names in palette. Using names such as "primary" and
"secondary" that are in consistent with designs such as material,
bootstrap and metro UI palettes. It adds `color-` prefix on color
variables in line with Vue Design System.
2. Introduces necessary changes to follow the system color system
everywhere without using any other color:
- It changes tooltip background from black to darker primary
colors.
- It overrides unset styles from tree component
- It ensures footer has same color as top menu.
3. Removes opacity CSS changes to have better control on choices. To
achieve that:
- It introduces new "light" variants of main colors
- It switches to colors with different variants (e.g. in Dialogs it
uses primary color as button as it has variants that can be
activated on hover meanwhile on-surface color is single).
4. Styles a tags (anchor elements) globally for consistency
76 lines
2.2 KiB
Vue
76 lines
2.2 KiB
Vue
<template>
|
|
<span class="url">
|
|
<a :href="downloadUrl"
|
|
v-bind:class="{
|
|
'url__active': hasCurrentOsDesktopVersion && isCurrentOs,
|
|
'url__inactive': hasCurrentOsDesktopVersion && !isCurrentOs,
|
|
}">{{ operatingSystemName }}</a>
|
|
</span>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { Component, Prop, Watch, Vue } from 'vue-property-decorator';
|
|
import { Environment } from '@/application/Environment/Environment';
|
|
import { OperatingSystem } from '@/domain/OperatingSystem';
|
|
import { ApplicationFactory } from '@/application/ApplicationFactory';
|
|
|
|
@Component
|
|
export default class DownloadUrlListItem extends Vue {
|
|
@Prop() public operatingSystem!: OperatingSystem;
|
|
|
|
public downloadUrl: string = '';
|
|
public operatingSystemName: string = '';
|
|
public isCurrentOs: boolean = false;
|
|
public hasCurrentOsDesktopVersion: boolean = false;
|
|
|
|
public async mounted() {
|
|
await this.onOperatingSystemChangedAsync(this.operatingSystem);
|
|
}
|
|
|
|
@Watch('operatingSystem')
|
|
public async onOperatingSystemChangedAsync(os: OperatingSystem) {
|
|
const currentOs = Environment.CurrentEnvironment.os;
|
|
this.isCurrentOs = os === currentOs;
|
|
this.downloadUrl = await this.getDownloadUrlAsync(os);
|
|
this.operatingSystemName = getOperatingSystemName(os);
|
|
this.hasCurrentOsDesktopVersion = hasDesktopVersion(currentOs);
|
|
}
|
|
|
|
private async getDownloadUrlAsync(os: OperatingSystem): Promise<string> {
|
|
const context = await ApplicationFactory.Current.getAppAsync();
|
|
return context.info.getDownloadUrl(os);
|
|
}
|
|
}
|
|
|
|
function hasDesktopVersion(os: OperatingSystem): boolean {
|
|
return os === OperatingSystem.Windows
|
|
|| os === OperatingSystem.Linux
|
|
|| os === OperatingSystem.macOS;
|
|
}
|
|
|
|
function getOperatingSystemName(os: OperatingSystem): string {
|
|
switch (os) {
|
|
case OperatingSystem.Linux:
|
|
return 'Linux';
|
|
case OperatingSystem.macOS:
|
|
return 'macOS';
|
|
case OperatingSystem.Windows:
|
|
return 'Windows';
|
|
default:
|
|
throw new Error(`Unsupported os: ${OperatingSystem[os]}`);
|
|
}
|
|
}
|
|
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.url {
|
|
&__active {
|
|
font-size: 1em;
|
|
}
|
|
&__inactive {
|
|
font-size: 0.70em;
|
|
}
|
|
}
|
|
</style>
|