mirrors/an-anime-game-launcher
1
0
Fork 0
mirror of https://github.com/an-anime-team/an-anime-game-launcher.git synced 2024-12-20 08:51:47 +03:00
Code Issues Projects Releases Packages Wiki Activity

Several changes

Browse source 
- made selectbox component
- added language selection box
- renamed languages
This commit is contained in:
Observer KRypt0n_ 2021-12-25 22:03:01 +02:00
parent c2b8623718
commit 210157a5a8
No known key found for this signature in database
GPG key ID: DC5D4EC1303465DA
12 changed files with 261 additions and 209 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
README.md
View file

@ -149,12 +149,13 @@ This is our current roadmap goals. You can find older ones [here](ROADMAP.md)
* Patch unavailable
* Test patch available
* Make Vue components
* Checkbox
* Selection
* <s>Checkbox</s>
* <s>Selectbox</s>
* SelectionList
* SelectableCheckbox
* PropertiesEditor
* Rewrite sass code, provide more flexible theming ability
* Add `vue-i18n`
* <s>Add `vue-i18n`</s>
### Features

12
public/locales/en-us.yaml Normal file
View file

@ -0,0 +1,12 @@
settings:
# General
general:
title: General
items:
test1: Hello 1
test2: Hello 2
test3: Hello 3
# Language selection
lang:
launcher: Language

7
public/locales/en.yaml
View file

@ -1,7 +0,0 @@
settings:
general:
title: General
items:
test1: Hello 1
test2: Hello 2
test3: Hello 3

7
public/locales/ru.yaml → public/locales/ru-ru.yaml
View file

@ -1,7 +1,12 @@
settings:
# General
general:
title: Основное
items:
test1: Привет 1
test2: Привет 2
test3: Привет 3
test3: Привет 3
# Language selection
lang:
launcher: Язык

10
settings.html
View file

@ -16,16 +16,14 @@
<div class="settings">
<div class="settings-item" id="general">
<h2>{{ $t('settings.general.title') }}</h2>
<div class="locale-changer">
<select v-model="$i18n.locale">
<option v-for="locale in $i18n.availableLocales" :key="`locale-${locale}`" :value="locale">{{ locale }}</option>
</select>
</div>
<l-checkbox locale="general.test1" prop="test1"></l-checkbox>
<l-checkbox locale="general.test2" prop="test2"></l-checkbox>
<l-checkbox locale="general.test3" prop="test3"></l-checkbox>
<l-selectbox locale="general.lang.launcher" prop="lang.launcher">
<li v-for="(lang, code) in languages" :lang="code">{{ lang }}</li>
</l-selectbox>
</div>
</div>
</div>

1
src/assets/svgs/arrow.svg Normal file
View file

@ -0,0 +1 @@
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 330.002 330.002" xml:space="preserve"><path d="M233.252,155.997L120.752,6.001c-4.972-6.628-14.372-7.97-21-3c-6.628,4.971-7.971,14.373-3,21 l105.75,140.997L96.752,306.001c-4.971,6.627-3.627,16.03,3,21c2.698,2.024,5.856,3.001,8.988,3.001 c4.561,0,9.065-2.072,12.012-6.001l112.5-150.004C237.252,168.664,237.252,161.33,233.252,155.997z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 466 B

4
src/components/Checkbox.vue
View file

@ -1,6 +1,6 @@
<template>
<div class="checkbox" :class="{'checkbox-active': active}">
{{ $t(`settings.${locale.split('.')[0]}.items.${locale.split('.')[1]}`) }}
{{ $t(`settings.${locale.split('.')[0]}.items.${locale.substring(locale.indexOf('.') + 1)}`) }}
<div class="checkbox-mark" @click="updateSetting">
<img src="../assets/svgs/checkmark.svg" />
@ -35,4 +35,4 @@ export default defineComponent({
});
</script>
<style src="../sass/components/checkbox.sass" lang="sass" scoped></style>
<style src="../sass/components/checkbox.sass" lang="sass"></style>

77
src/components/Selectbox.vue Normal file
View file

@ -0,0 +1,77 @@
<template>
<div class="select" :class="{'select-active': selectionOpen}">
<span>{{ $t(this.trueLocale) }}</span>
<div class="select-options">
<ul @click="selectLang">
<slot></slot>
</ul>
</div>
<div class="selected-item" @click="this.selectionOpen = !this.selectionOpen">
<span>{{ lang.available[lang.selected] }}</span>
<img src="../assets/svgs/arrow.svg" />
</div>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import Configs from '../ts/Configs';
export default defineComponent({
props: ['locale', 'prop'],
inject: ['languages'],
data()
{
return {
trueLocale: '',
selectionOpen: false,
lang: {
selected: 'en-us',
available: this.languages
}
};
},
created()
{
const group = this.locale.split('.')[0];
const locale = this.locale.substring(this.locale.indexOf('.') + 1);
this.trueLocale = `settings.${group}.items.${locale}`;
Configs.get('lang.launcher').then((lang) => {
this.lang.selected = (lang as string|null) ?? 'en-us';
});
},
methods: {
selectLang(event: MouseEvent)
{
const li = event.target as HTMLElement;
if (!li.classList.contains('selected'))
{
const children = li.parentElement!.children;
for (let i = 0; i < children.length; ++i)
children[i].classList.remove('selected');
li.classList.add('selected');
this.lang.selected = li.getAttribute('lang')!;
this.selectionOpen = false;
this.$i18n.locale = this.lang.selected;
Configs.set(this.prop, this.lang.selected);
}
}
}
});
</script>
<style src="../sass/components/selectbox.sass" lang="sass"></style>

26
src/pages/settings.ts
View file

@ -3,16 +3,32 @@ import { createI18n } from 'vue-i18n';
import Window from '../ts/neutralino/Window';
import Checkbox from '../components/Checkbox.vue';
import Locales from '../ts/core/Locales';
import Checkbox from '../components/Checkbox.vue';
import Selectbox from '../components/Selectbox.vue';
const app = createApp({
data: () => ({
title: 'about'
title: 'about',
// Languages selection
languages: {
'en-us': 'English (US)',
'ru-ru': 'Russian'
}
}),
provide()
{
return {
languages: this.languages
};
},
components: {
'l-checkbox': Checkbox
'l-checkbox': Checkbox,
'l-selectbox': Selectbox
},
mounted: () => Window.current.show()
@ -20,8 +36,8 @@ const app = createApp({
Locales.get().then((locales) => {
app.use(createI18n({
locale: 'en',
fallbackLocale: 'en',
locale: 'en-us',
fallbackLocale: 'en-us',
// @ts-expect-error
messages: locales

183
src/sass/components.sass
View file

@ -220,189 +220,6 @@
img.item-delete
display: block
/* Checkbox */
.checkbox
display: inline-flex !important
align-items: center
font-size: larger
width: calc(100% - 24px)
height: 48px
padding: 0 12px
border-radius: 12px
.checkbox-mark
display: flex
background-color: map.get($theme-map, "background2")
border-radius: 16px
margin-left: auto
padding: 8px 16px
cursor: pointer
&:hover
background-color: map.get($theme-map, "primary")
svg
filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(219deg) brightness(102%) contrast(104%)
svg
height: 12px
width: 12px
@if $theme-name == dark
filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(219deg) brightness(102%) contrast(104%)
.checkbox-disabled
background-color: map.get($theme-map, "background1")
.checkbox-mark
display: none
.checkbox-active
.checkbox-mark
background-color: map.get($theme-map, "primary")
svg
filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(219deg) brightness(102%) contrast(104%)
.selectable-checkbox
cursor: pointer
&:hover
background-color: map.get($theme-map, "background2")
.checkbox-active:is(.selectable-checkbox)
background-color: map.get($theme-map, "background2")
/* Select box */
.select
display: inline-flex
align-items: center
font-size: larger
width: calc(100% - 24px)
height: 48px
padding: 0 12px
border-radius: 12px
.select-options
position: absolute
display: none
max-height: 230px
overflow: auto
background-color: map.get($theme-map, "select-boxes")
border-radius: 12px
box-shadow: 0 1px 8px 0 rgba(0, 0, 0, .2)
padding: 8px 12px
transform: translateY(calc(50% + 32px))
right: 32px
cursor: pointer
z-index: 1
@if $theme-name == dark
&::-webkit-scrollbar-track
background-color: map.get($theme-map, "background2")
&::-webkit-scrollbar-thumb
background: #d8dee9
&:hover
background: #e5e9f0
ul
list-style: none
padding: 0
margin: 0
li
color: #8592a3
font-size: smaller
border-radius: 8px
padding: 8px 12px
margin: 0 -4px
&:hover:not([disabled])
background-color: map.get($theme-map, "background2")
color: map.get($theme-map, "primary")
&[disabled]
display: block
color: #b2c0d3
cursor: default
li:not(last-child)
margin-bottom: 4px
li.selected
background-color: map.get($theme-map, "background2")
color: map.get($theme-map, "primary")
.selected-item
display: flex
align-items: baseline
font-size: initial
background-color: map.get($theme-map, "background2")
border-radius: 16px
margin-left: auto
padding: 8px 16px
cursor: pointer
&:hover
background-color: map.get($theme-map, "primary")
span
color: white
svg
filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(219deg) brightness(102%) contrast(104%)
svg
height: 12px
width: 12px
margin-left: 8px
transform: rotate(90deg)
@if $theme-name == dark
filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(219deg) brightness(102%) contrast(104%)
.select-active
.selected-item
background-color: map.get($theme-map, "primary")
span
color: white
svg
filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(219deg) brightness(102%) contrast(104%)
.select-options
display: block
/* Buttons */
.button

132
src/sass/components/selectbox.sass Normal file
View file

@ -0,0 +1,132 @@
@use "sass:map"
@mixin themable($theme-name, $theme-map)
body[theme=#{$theme-name}]
.select
display: inline-flex
align-items: center
font-size: larger
width: calc(100% - 24px)
height: 48px
padding: 0 12px
border-radius: 12px
.select-options
position: absolute
display: none
max-height: 230px
overflow: auto
background-color: map.get($theme-map, "select-boxes")
border-radius: 12px
box-shadow: 0 1px 8px 0 rgba(0, 0, 0, .2)
padding: 8px 12px
transform: translateY(calc(50% + 32px))
right: 32px
cursor: pointer
z-index: 1
@if $theme-name == dark
&::-webkit-scrollbar-track
background-color: map.get($theme-map, "background2")
&::-webkit-scrollbar-thumb
background: #d8dee9
&:hover
background: #e5e9f0
ul
list-style: none
padding: 0
margin: 0
li
color: #8592a3
font-size: smaller
border-radius: 8px
min-width: 120px
padding: 8px 12px
// margin-right: 8px
&:hover:not([disabled])
background-color: map.get($theme-map, "background2")
color: map.get($theme-map, "primary")
&[disabled]
display: block
color: #b2c0d3
cursor: default
li:not(:last-child)
margin-bottom: 4px
li.selected
background-color: map.get($theme-map, "background2")
color: map.get($theme-map, "primary")
.selected-item
display: flex
align-items: baseline
font-size: initial
background-color: map.get($theme-map, "background2")
border-radius: 16px
margin-left: auto
padding: 8px 16px
cursor: pointer
&:hover
background-color: map.get($theme-map, "primary")
span
color: white
img
filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(219deg) brightness(102%) contrast(104%)
img
height: 12px
width: 12px
margin-left: 8px
transform: rotate(90deg)
@if $theme-name == dark
filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(219deg) brightness(102%) contrast(104%)
.select-active
.selected-item
background-color: map.get($theme-map, "primary")
span
color: white
img
filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(219deg) brightness(102%) contrast(104%)
.select-options
display: block
@import "../themes/light"
@import "../themes/dark"
@include themable(light, $light)
@include themable(dark, $dark)

4
src/ts/core/Locales.ts
View file

@ -4,8 +4,8 @@ import constants from '../Constants';
import promisify from './promisify';
type AvailableLocales =
| 'en'
| 'ru';
| 'en-us'
| 'ru-ru';
declare const Neutralino;