a54e16488c
The project's slagon has been updated back to "Privacy is sexy" from "Now you have the choice" for enhanced brand clarity and memorability. This change also reflects the community's preference and aligns with the project's established identity. This commit also refactors naming and structure of project information (metadata) struct to enhance clarity and maintainability in relation to changing the slogan. Key changes include: - Update UI components to display the revised slogan. - Remove period from project slogan in code area for consistency with a explanatory comment for future maintainability. - Refactor header container and class names for clarity. - Standardize project metadata usage in `TheCodeArea.vue` to ensure consistency. - Improve code clarity by renaming `IProjectInformation` to `ProjectDetails` and `ProjectInformation` to `GitHubProjectDetails`. - Organize `ProjectDetails` under a dedicated `Project` directory within the domain layer for better structure. These changes are expected to improve the project's appeal and streamline future maintenance and development efforts.
72 lines
1.8 KiB
Vue
72 lines
1.8 KiB
Vue
<template>
|
|
<span class="url">
|
|
<a
|
|
:href="downloadUrl"
|
|
:class="{
|
|
active: hasCurrentOsDesktopVersion && isCurrentOs,
|
|
inactive: hasCurrentOsDesktopVersion && !isCurrentOs,
|
|
}"
|
|
>{{ operatingSystemName }}</a>
|
|
</span>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import {
|
|
defineComponent, PropType, computed,
|
|
} from 'vue';
|
|
import { injectKey } from '@/presentation/injectionSymbols';
|
|
import { OperatingSystem } from '@/domain/OperatingSystem';
|
|
import { getOperatingSystemDisplayName } from '@/presentation/components/Shared/OperatingSystemNames';
|
|
|
|
export default defineComponent({
|
|
props: {
|
|
operatingSystem: {
|
|
type: Number as PropType<OperatingSystem>,
|
|
required: true,
|
|
},
|
|
},
|
|
setup(props) {
|
|
const { projectDetails } = injectKey((keys) => keys.useApplication);
|
|
const { os: currentOs } = injectKey((keys) => keys.useRuntimeEnvironment);
|
|
|
|
const isCurrentOs = computed<boolean>(() => {
|
|
return currentOs === props.operatingSystem;
|
|
});
|
|
|
|
const operatingSystemName = computed<string>(() => {
|
|
return getOperatingSystemDisplayName(props.operatingSystem);
|
|
});
|
|
|
|
const hasCurrentOsDesktopVersion = computed<boolean>(() => {
|
|
return hasDesktopVersion(props.operatingSystem);
|
|
});
|
|
|
|
const downloadUrl = computed<string>(() => {
|
|
return projectDetails.getDownloadUrl(props.operatingSystem);
|
|
});
|
|
|
|
return {
|
|
downloadUrl,
|
|
operatingSystemName,
|
|
isCurrentOs,
|
|
hasCurrentOsDesktopVersion,
|
|
};
|
|
},
|
|
});
|
|
|
|
function hasDesktopVersion(os: OperatingSystem): boolean {
|
|
return os === OperatingSystem.Windows
|
|
|| os === OperatingSystem.Linux
|
|
|| os === OperatingSystem.macOS;
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@use "@/presentation/assets/styles/main" as *;
|
|
.url {
|
|
.inactive {
|
|
font-size: $font-size-absolute-x-small;
|
|
}
|
|
}
|
|
</style>
|