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

Several changes

Browse source 
- added components system
- made settings template settings
- added `vue-i18n`, made template locales
- made `Checkbox` component
This commit is contained in:
Observer KRypt0n_ 2021-12-25 17:44:27 +02:00
parent 0684774ea8
commit c2b8623718
No known key found for this signature in database
GPG key ID: DC5D4EC1303465DA
8 changed files with 129 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
index.html
View file

@ -7,8 +7,8 @@
<link rel="stylesheet" lang="sass" href="/src/sass/index.sass" />
</head>
<body>
<div id="app" theme="light">
<body theme="light">
<div id="app">
<img class="background" :src="uri.background">
<div class="downloader-panel" theme="dark">

7
public/locales/en.yaml
View file

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

7
public/locales/ru.yaml
View file

@ -1,2 +1,7 @@
settings:
test: Привет, Мир!
general:
title: Основное
items:
test1: Привет 1
test2: Привет 2
test3: Привет 3

28
settings.html
View file

@ -4,20 +4,30 @@
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" lang="sass" href="/src/sass/basic.sass" />
<link rel="stylesheet" lang="sass" href="/src/sass/settings.sass" />
</head>
<body>
<body theme="light">
<div id="app">
<h1>{{ $t('settings.test') }}</h1>
<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 class="menu">
<div class="menu-item menu-item-active" anchor="general">General</div>
</div>
<div class="settings">
<div class="settings-item" id="general">
<h2>{{ $t('settings.general.title') }}</h2>
<l-checkbox property="test"></l-checkbox>
<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>
</div>
</div>
</div>
<script src="neutralino.js"></script>

1
src/assets/svgs/checkmark.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" width="45.701px" height="45.7px" viewBox="0 0 45.701 45.7" xml:space="preserve"><g><g><path d="M20.687,38.332c-2.072,2.072-5.434,2.072-7.505,0L1.554,26.704c-2.072-2.071-2.072-5.433,0-7.504 c2.071-2.072,5.433-2.072,7.505,0l6.928,6.927c0.523,0.522,1.372,0.522,1.896,0L36.642,7.368c2.071-2.072,5.433-2.072,7.505,0 c0.995,0.995,1.554,2.345,1.554,3.752c0,1.407-0.559,2.757-1.554,3.752L20.687,38.332z"/></g></g></svg>
Side by side

After

Width:  |  Height:  |  Size: 524 B

0
src/components/.gitkeep
View file

30
src/components/Checkbox.vue
View file

@ -1,12 +1,38 @@
<template>
<h1>{{ property }}</h1>
<div class="checkbox" :class="{'checkbox-active': active}">
{{ $t(`settings.${locale.split('.')[0]}.items.${locale.split('.')[1]}`) }}
<div class="checkbox-mark" @click="updateSetting">
<img src="../assets/svgs/checkmark.svg" />
</div>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import Configs from '../ts/Configs';
export default defineComponent({
props: ['property'],
props: ['locale', 'prop'],
data: () => ({
active: false
}),
async created()
{
this.active = await Configs.get(this.prop) as boolean;
},
methods: {
updateSetting()
{
this.active = !this.active;
Configs.set(this.prop, this.active);
}
}
});
</script>
<style src="../sass/components/checkbox.sass" lang="sass" scoped></style>

67
src/sass/components/checkbox.sass Normal file
View file

@ -0,0 +1,67 @@
@use "sass:map"
@mixin themable($theme-name, $theme-map)
body[theme=#{$theme-name}]
.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")
img
filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(219deg) brightness(102%) contrast(104%)
img
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")
img
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")
@import "../themes/light"
@import "../themes/dark"
@include themable(light, $light)
@include themable(dark, $dark)