From 317557b335c5096e9df05521a68ab3b7ee7fe89a Mon Sep 17 00:00:00 2001 From: Observer KRypt0n_ Date: Sun, 26 Dec 2021 00:47:08 +0200 Subject: [PATCH] Several changes - made selection list component - generalized selection box component; added `LanguageSelection` component - `DXVK.get()` method was renamed to `DXVK.get()` - added `DXVK.get()` method to get a DXVK with a specified version --- settings.html | 12 ++- src/components/Checkbox.vue | 4 +- src/components/DXVKItem.vue | 9 +++ src/components/DXVKs.vue | 10 +++ src/components/LanguageSelection.vue | 52 +++++++++++++ src/components/Selectbox.vue | 77 -------------------- src/components/bases/Selectbox.vue | 85 ++++++++++++++++++++++ src/components/bases/SelectionList.vue | 13 ++++ src/components/bases/SelectionListItem.vue | 19 +++++ src/pages/settings.ts | 27 +++++-- src/sass/components.sass | 75 ------------------- src/sass/components/selectionList.sass | 82 +++++++++++++++++++++ src/ts/core/DXVK.ts | 38 ++++++++-- src/ts/launcher/states/Launch.ts | 2 +- 14 files changed, 332 insertions(+), 173 deletions(-) create mode 100644 src/components/DXVKItem.vue create mode 100644 src/components/DXVKs.vue create mode 100644 src/components/LanguageSelection.vue delete mode 100644 src/components/Selectbox.vue create mode 100644 src/components/bases/Selectbox.vue create mode 100644 src/components/bases/SelectionList.vue create mode 100644 src/components/bases/SelectionListItem.vue create mode 100644 src/sass/components/selectionList.sass diff --git a/settings.html b/settings.html index f1c3360..b7cb7c7 100644 --- a/settings.html +++ b/settings.html @@ -10,7 +10,7 @@
-
General
+
{{ $t('settings.general.title') }}
@@ -21,9 +21,13 @@ - -
  • {{ lang }}
    • -     + +
  • {{ lang }}
    • +     + + + +
    diff --git a/src/components/Checkbox.vue b/src/components/Checkbox.vue index b5b0e2a..fe0e77f 100644 --- a/src/components/Checkbox.vue +++ b/src/components/Checkbox.vue @@ -19,9 +19,9 @@ export default defineComponent({ active: false }), - async created() + created() { - this.active = await Configs.get(this.prop) as boolean; + Configs.get(this.prop).then((active) => this.active = active as boolean); }, methods: { diff --git a/src/components/DXVKItem.vue b/src/components/DXVKItem.vue new file mode 100644 index 0000000..1d2afe6 --- /dev/null +++ b/src/components/DXVKItem.vue @@ -0,0 +1,9 @@ + diff --git a/src/components/DXVKs.vue b/src/components/DXVKs.vue new file mode 100644 index 0000000..ca72628 --- /dev/null +++ b/src/components/DXVKs.vue @@ -0,0 +1,10 @@ + diff --git a/src/components/LanguageSelection.vue b/src/components/LanguageSelection.vue new file mode 100644 index 0000000..ca6e012 --- /dev/null +++ b/src/components/LanguageSelection.vue @@ -0,0 +1,52 @@ + diff --git a/src/components/Selectbox.vue b/src/components/Selectbox.vue deleted file mode 100644 index a297898..0000000 --- a/src/components/Selectbox.vue +++ /dev/null @@ -1,77 +0,0 @@ - - - - - diff --git a/src/components/bases/Selectbox.vue b/src/components/bases/Selectbox.vue new file mode 100644 index 0000000..d497e45 --- /dev/null +++ b/src/components/bases/Selectbox.vue @@ -0,0 +1,85 @@ + + + + + diff --git a/src/components/bases/SelectionList.vue b/src/components/bases/SelectionList.vue new file mode 100644 index 0000000..513b00a --- /dev/null +++ b/src/components/bases/SelectionList.vue @@ -0,0 +1,13 @@ + + + + + diff --git a/src/components/bases/SelectionListItem.vue b/src/components/bases/SelectionListItem.vue new file mode 100644 index 0000000..fc6d7ba --- /dev/null +++ b/src/components/bases/SelectionListItem.vue @@ -0,0 +1,19 @@ + + + diff --git a/src/pages/settings.ts b/src/pages/settings.ts index 448ef57..14eac48 100644 --- a/src/pages/settings.ts +++ b/src/pages/settings.ts @@ -4,9 +4,13 @@ import { createI18n } from 'vue-i18n'; import Window from '../ts/neutralino/Window'; import Locales from '../ts/core/Locales'; +import DXVK from '../ts/core/DXVK'; +import Configs from '../ts/Configs'; import Checkbox from '../components/Checkbox.vue'; -import Selectbox from '../components/Selectbox.vue'; +import LanguageSelection from '../components/LanguageSelection.vue'; +import DXVKS from '../components/DXVKs.vue'; +import DXVKItem from '../components/DXVKItem.vue'; const app = createApp({ data: () => ({ @@ -15,8 +19,10 @@ const app = createApp({ // Languages selection languages: { 'en-us': 'English (US)', - 'ru-ru': 'Russian' - } + 'ru-ru': 'Русский' + }, + + dxvks: [] }), provide() @@ -26,17 +32,26 @@ const app = createApp({ }; }, + created() + { + DXVK.list().then((list) => this.dxvks = list); + }, + components: { 'l-checkbox': Checkbox, - 'l-selectbox': Selectbox + 'l-language': LanguageSelection, + 'l-dxvks': DXVKS, + 'l-dxvk-item': DXVKItem }, mounted: () => Window.current.show() }); -Locales.get().then((locales) => { +Locales.get().then(async (locales) => { + const locale = await Configs.get('lang.launcher'); + app.use(createI18n({ - locale: 'en-us', + locale: locale as string, fallbackLocale: 'en-us', // @ts-expect-error diff --git a/src/sass/components.sass b/src/sass/components.sass index 5d0e20a..7a261a1 100644 --- a/src/sass/components.sass +++ b/src/sass/components.sass @@ -145,81 +145,6 @@ .button:not(:last-child) margin-right: 8px - /* List of buttons */ - - .list-item - display: flex - align-items: center - - height: 52px - margin-bottom: 8px - padding: 0 12px - - border-radius: 12px - background-color: map.get($theme-map, "background1") - - font-size: 18px - cursor: pointer - - @if $theme-name == dark - img - filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(219deg) brightness(102%) contrast(104%) - - &:hover - background-color: map.get($theme-map, "background2") - - > div - width: auto - height: 52px - min-width: 52px - - margin-left: auto - - display: flex - align-items: center - - img - width: 16px - height: 16px - - margin: auto - - img.item-delete - // filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(93deg) brightness(103%) contrast(103%) - - width: 20px - height: 20px - - display: none - - .list-item-active - background-color: map.get($theme-map, "primary") !important - color: white !important - - img.item-delete - display: none !important - - .list-item-disabled - background-color: map.get($theme-map, "background1") !important - color: #abadbd !important - - cursor: default !important - - img - filter: invert(70%) sepia(13%) saturate(241%) hue-rotate(196deg) brightness(97%) contrast(91%) - - .list-item-downloading - img - display: none !important - - .list-item-downloaded - > div - img.item-download - display: none - - img.item-delete - display: block - /* Buttons */ .button diff --git a/src/sass/components/selectionList.sass b/src/sass/components/selectionList.sass new file mode 100644 index 0000000..afcdc0a --- /dev/null +++ b/src/sass/components/selectionList.sass @@ -0,0 +1,82 @@ +@use "sass:map" + +@mixin themable($theme-name, $theme-map) + body[theme=#{$theme-name}] + .list-item + display: flex + align-items: center + + height: 52px + margin-bottom: 8px + padding: 0 12px + + border-radius: 12px + background-color: map.get($theme-map, "background1") + + font-size: 18px + cursor: pointer + + @if $theme-name == dark + img + filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(219deg) brightness(102%) contrast(104%) + + &:hover + background-color: map.get($theme-map, "background2") + + > div + width: auto + height: 52px + min-width: 52px + + margin-left: auto + + display: flex + align-items: center + + img + width: 16px + height: 16px + + margin: auto + + img.item-delete + // filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(93deg) brightness(103%) contrast(103%) + + width: 20px + height: 20px + + display: none + + .list-item-active + background-color: map.get($theme-map, "primary") !important + color: white !important + + img.item-delete + display: none !important + + .list-item-disabled + background-color: map.get($theme-map, "background1") !important + color: #abadbd !important + + cursor: default !important + + img + filter: invert(70%) sepia(13%) saturate(241%) hue-rotate(196deg) brightness(97%) contrast(91%) + + .list-item-downloading + img + display: none !important + + .list-item-downloaded + > div + img.item-download + display: none + + img.item-delete + display: block + +@import "../themes/light" +@import "../themes/dark" + +@include themable(light, $light) +@include themable(dark, $dark) diff --git a/src/ts/core/DXVK.ts b/src/ts/core/DXVK.ts index 6053e3c..b4c4e10 100644 --- a/src/ts/core/DXVK.ts +++ b/src/ts/core/DXVK.ts @@ -18,7 +18,7 @@ export default class DXVK /** * Get DXVKs list */ - public static get(): Promise + public static list(): Promise { return new Promise((resolve) => { constants.paths.dxvksDir.then(async (dxvksDir: string) => { @@ -46,6 +46,26 @@ export default class DXVK }); } + /** + * Get DXVK with specified version + */ + public static get(version: string): Promise + { + return new Promise((resolve) => { + this.list().then((list) => { + for (const dxvk of list) + if (dxvk.version === version) + { + resolve(dxvk); + + return; + } + + resolve(null); + }); + }); + } + /** * Download DXVK to the [constants.paths.dxvks] directory * @@ -59,14 +79,16 @@ export default class DXVK // then we should find this DXVK version and call this method for it if (typeof dxvk == 'string') { - let foundDXVK; - - (await this.get()).forEach((currDxvk) => { - if (currDxvk.version == dxvk) - foundDXVK = currDxvk; + this.list().then((list) => { + let foundDXVK; + + list.forEach((currDxvk) => { + if (currDxvk.version == dxvk) + foundDXVK = currDxvk; + }); + + resolve(foundDXVK === null ? null : new Stream(foundDXVK)); }); - - resolve(foundDXVK === null ? null : new Stream(foundDXVK)); } // Otherwise we can use dxvk.uri and so on to download DXVK diff --git a/src/ts/launcher/states/Launch.ts b/src/ts/launcher/states/Launch.ts index 39be884..4ae5036 100644 --- a/src/ts/launcher/states/Launch.ts +++ b/src/ts/launcher/states/Launch.ts @@ -14,7 +14,7 @@ export default (launcher: Launcher): Promise => { let wineExeutable = 'wine'; const runner = await Runners.current; - + if (runner !== null) { wineExeutable = `${await constants.paths.runnersDir}/${runner.name}/${runner.files.wine}`;