mirror of
https://github.com/an-anime-team/an-anime-game-launcher.git
synced 2025-03-15 20:51:39 +03:00
Several changes
- added components system - made settings template settings - added `vue-i18n`, made template locales - made `Checkbox` component
This commit is contained in:
parent
0684774ea8
commit
c2b8623718
8 changed files with 129 additions and 15 deletions
|
@ -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">
|
||||
|
|
|
@ -1,2 +1,7 @@
|
|||
settings:
|
||||
test: Hello, World!
|
||||
general:
|
||||
title: General
|
||||
items:
|
||||
test1: Hello 1
|
||||
test2: Hello 2
|
||||
test3: Hello 3
|
|
@ -1,2 +1,7 @@
|
|||
settings:
|
||||
test: Привет, Мир!
|
||||
general:
|
||||
title: Основное
|
||||
items:
|
||||
test1: Привет 1
|
||||
test2: Привет 2
|
||||
test3: Привет 3
|
|
@ -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
1
src/assets/svgs/checkmark.svg
Normal 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>
|
After Width: | Height: | Size: 524 B |
|
@ -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
67
src/sass/components/checkbox.sass
Normal 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)
|
Loading…
Add table
Reference in a new issue