enrecipes/app/components/settings/Interface.vue

138 lines
3.7 KiB
Vue
Raw Normal View History

2021-03-21 17:02:04 +00:00
<template>
2021-06-08 11:43:54 +00:00
<Page @loaded="pgLoad" actionBarHidden="true">
2021-06-15 11:04:42 +00:00
<RGridLayout :rtl="RTL" rows="*, auto" columns="auto, *">
2021-05-25 14:32:53 +00:00
<OptionsList title="intf" :items="items" />
2021-06-15 11:04:42 +00:00
<GridLayout row="1" class="appbar rtl" rows="*" columns="auto, *">
2021-04-12 18:09:48 +00:00
<Button class="ico" :text="icon.back" @tap="$navigateBack()" />
2021-04-01 10:55:35 +00:00
</GridLayout>
2021-06-18 12:52:03 +00:00
<Label rowSpan="2" class="edge hal rtl" @swipe="swipeBack" />
<Label
rowSpan="2"
colSpan="2"
class="edge har rtl f"
@swipe="swipeBack"
/>
2021-06-08 11:43:54 +00:00
</RGridLayout>
2021-03-21 17:02:04 +00:00
</Page>
</template>
<script>
2021-06-15 11:04:42 +00:00
import { ApplicationSettings, Observable, Frame } from "@nativescript/core";
2021-05-25 14:32:53 +00:00
import Action from "../modals/Action";
import OptionsList from "../sub/OptionsList";
2021-03-21 17:02:04 +00:00
import { mapState, mapActions } from "vuex";
2021-04-12 18:09:48 +00:00
import * as utils from "~/shared/utils";
2021-06-15 11:04:42 +00:00
import { localize } from "@nativescript/localize";
2021-03-21 17:02:04 +00:00
export default {
2021-05-25 14:32:53 +00:00
components: { OptionsList },
2021-03-21 17:02:04 +00:00
data() {
return {
2021-06-08 11:43:54 +00:00
applang: 0,
2021-03-21 17:02:04 +00:00
};
},
computed: {
2021-06-15 11:04:42 +00:00
...mapState(["icon", "language", "theme", "layout", "RTL"]),
2021-03-21 17:02:04 +00:00
items() {
return [
2021-04-01 10:55:35 +00:00
{},
2021-03-21 17:02:04 +00:00
{
2021-05-25 14:32:53 +00:00
type: "list",
2021-03-21 17:02:04 +00:00
icon: "lang",
2021-06-15 11:04:42 +00:00
rtl: 0,
2021-03-21 17:02:04 +00:00
title: "lang",
2021-06-15 11:04:42 +00:00
subTitle: localize(this.applang),
2021-06-08 11:43:54 +00:00
action: this.setAppLang,
2021-03-21 17:02:04 +00:00
},
{
2021-05-25 14:32:53 +00:00
type: "list",
2021-03-21 17:02:04 +00:00
icon: "theme",
2021-06-15 11:04:42 +00:00
rtl: 0,
2021-03-21 17:02:04 +00:00
title: "Theme",
2021-06-18 12:52:03 +00:00
subTitle: localize(ApplicationSettings.getString("theme", "sysDef")),
2021-03-21 17:02:04 +00:00
action: this.selectThemes,
},
{
2021-05-25 14:32:53 +00:00
type: "list",
2021-04-12 18:09:48 +00:00
icon: "layout",
2021-06-15 11:04:42 +00:00
rtl: 1,
2021-03-21 17:02:04 +00:00
title: "listVM",
2021-06-15 11:04:42 +00:00
subTitle: localize(this.layout),
2021-03-21 17:02:04 +00:00
action: this.setLayoutMode,
},
2021-04-01 10:55:35 +00:00
{},
2021-03-21 17:02:04 +00:00
];
},
},
methods: {
2021-06-08 11:43:54 +00:00
...mapActions(["setTheme", "setLayout", "setRTL"]),
pgLoad({ object }) {
2021-05-25 14:32:53 +00:00
object.bindingContext = new Observable();
2021-03-21 17:02:04 +00:00
},
// LANGUAGE SELECTION
2021-06-08 11:43:54 +00:00
setAppLang() {
2021-03-21 17:02:04 +00:00
let languages = this.language.map((e) => e.title);
2021-05-25 14:32:53 +00:00
this.$showModal(Action, {
2021-03-21 17:02:04 +00:00
props: {
title: "lang",
list: [...languages],
2021-06-18 12:52:03 +00:00
selected: this.applang,
2021-03-21 17:02:04 +00:00
},
}).then((action) => {
2021-06-08 11:43:54 +00:00
if (action && this.applang !== action) {
let currentLocale = ApplicationSettings.getString(
"appLocale",
"none"
).split("-");
2021-03-21 17:02:04 +00:00
let locale = this.language.filter((e) => e.title === action)[0]
.locale;
if (currentLocale !== locale) {
2021-06-08 11:43:54 +00:00
this.applang = action;
ApplicationSettings.setString("applang", action);
ApplicationSettings.setString("appLocale", locale);
utils.updateLocale();
this.setRTL();
2021-06-15 11:04:42 +00:00
Frame.reloadPage();
2021-03-21 17:02:04 +00:00
}
}
});
},
// THEME SELECTION
selectThemes() {
2021-05-25 14:32:53 +00:00
this.$showModal(Action, {
2021-03-21 17:02:04 +00:00
props: {
title: "Theme",
2021-04-23 19:50:32 +00:00
list: ["Light", "Dark", "Black", "sysDef", "sysDefB"],
2021-06-18 12:52:03 +00:00
selected: ApplicationSettings.getString("theme", "sysDef"),
2021-03-21 17:02:04 +00:00
},
}).then((action) => {
2021-04-23 19:50:32 +00:00
if (
action &&
2021-06-15 11:04:42 +00:00
(ApplicationSettings.getString("theme") != this.theme
2021-06-08 11:43:54 +00:00
? 1
2021-06-15 11:04:42 +00:00
: this.theme != action)
2021-04-23 19:50:32 +00:00
) {
2021-04-01 10:55:35 +00:00
this.setTheme(action);
Frame.reloadPage();
2021-03-21 17:02:04 +00:00
}
});
},
// LAYOUT MODE
setLayoutMode() {
2021-05-25 14:32:53 +00:00
this.$showModal(Action, {
2021-03-21 17:02:04 +00:00
props: {
2021-04-15 18:47:06 +00:00
title: "listVM",
2021-04-12 18:09:48 +00:00
list: ["detailed", "grid", "photogrid", "simple", "minimal"],
2021-06-18 12:52:03 +00:00
selected: this.layout,
2021-03-21 17:02:04 +00:00
},
2021-06-18 12:52:03 +00:00
}).then((mode) => {
if (mode && this.layout !== mode) this.setLayout(mode.toLowerCase());
2021-03-21 17:02:04 +00:00
});
},
},
2021-05-25 14:32:53 +00:00
created() {
2021-06-08 11:43:54 +00:00
this.applang = ApplicationSettings.getString("applang", "sysDef");
2021-03-21 17:02:04 +00:00
},
};
</script>