mirror of
https://github.com/hay-kot/mealie.git
synced 2025-08-22 14:33:33 -07:00
code cleanup
This commit is contained in:
hay-kot
parent
51303b75c6
commit
eea356e5c1
3 changed files with 105 additions and 114 deletions
|
|
@ -1,9 +1,22 @@
|
|||
<template>
|
||||
<div>
|
||||
<v-btn text color="info" @click="dialog = true"> {{$t('general.new')}} </v-btn>
|
||||
<v-dialog v-model="dialog" width="400">
|
||||
<v-btn text color="info" @click="dialog = true">
|
||||
{{ $t("settings.add-a-new-theme") }}
|
||||
</v-btn>
|
||||
<v-dialog v-model="dialog" width="500">
|
||||
<v-card>
|
||||
<v-card-title> {{$t('settings.add-a-new-theme')}} </v-card-title>
|
||||
<v-app-bar dense dark color="primary mb-2">
|
||||
<v-icon large left class="mt-1">
|
||||
mdi-format-color-fill
|
||||
</v-icon>
|
||||
|
||||
<v-toolbar-title class="headline">
|
||||
{{ $t("settings.add-a-new-theme") }}
|
||||
</v-toolbar-title>
|
||||
|
||||
<v-spacer></v-spacer>
|
||||
</v-app-bar>
|
||||
<v-card-title> </v-card-title>
|
||||
<v-card-text>
|
||||
<v-text-field
|
||||
:label="$t('settings.theme.theme-name')"
|
||||
|
|
@ -13,9 +26,11 @@
|
|||
</v-card-text>
|
||||
<v-card-actions>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn color="grey" text @click="dialog = false"> {{$t('general.cancel')}} </v-btn>
|
||||
<v-btn color="grey" text @click="dialog = false">
|
||||
{{ $t("general.cancel") }}
|
||||
</v-btn>
|
||||
<v-btn color="success" text @click="Select" :disabled="!themeName">
|
||||
{{$t('general.create')}}
|
||||
{{ $t("general.create") }}
|
||||
</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
|
|
@ -34,7 +49,8 @@ export default {
|
|||
dialog: false,
|
||||
themeName: "",
|
||||
rules: {
|
||||
required: (val) => !!val || this.$t("settings.theme.theme-name-is-required"),
|
||||
required: val =>
|
||||
!!val || this.$t("settings.theme.theme-name-is-required"),
|
||||
},
|
||||
};
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,38 +1,82 @@
|
|||
<template>
|
||||
<v-card flat outlined class="ma-2">
|
||||
<v-card-text class="mb-n5 mt-n2">
|
||||
<h3>{{ theme.name }} {{ current ? "(Current)" : ""}}</h3>
|
||||
</v-card-text>
|
||||
<v-card-text>
|
||||
<v-row dense>
|
||||
<v-card
|
||||
v-for="(color, index) in theme.colors"
|
||||
:key="index"
|
||||
class="mx-1"
|
||||
height="34"
|
||||
width="36"
|
||||
:color="color"
|
||||
>
|
||||
</v-card>
|
||||
</v-row>
|
||||
</v-card-text>
|
||||
<v-divider></v-divider>
|
||||
<v-card-actions>
|
||||
<v-btn text color="error">Delete</v-btn>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn text color="success">Apply</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
<div>
|
||||
<Confirmation
|
||||
:title="$t('settings.theme.delete-theme')"
|
||||
:message="$t('settings.theme.are-you-sure-you-want-to-delete-this-theme')"
|
||||
color="error"
|
||||
icon="mdi-alert-circle"
|
||||
ref="deleteThemeConfirm"
|
||||
v-on:confirm="deleteSelectedTheme()"
|
||||
/>
|
||||
<v-card flat outlined class="ma-2">
|
||||
<v-card-text class="mb-n5 mt-n2">
|
||||
<h3>{{ theme.name }} {{ current ? "(Current)" : "" }}</h3>
|
||||
</v-card-text>
|
||||
<v-card-text>
|
||||
<v-row dense>
|
||||
<v-card
|
||||
v-for="(color, index) in theme.colors"
|
||||
:key="index"
|
||||
class="mx-1"
|
||||
height="34"
|
||||
width="36"
|
||||
:color="color"
|
||||
>
|
||||
</v-card>
|
||||
</v-row>
|
||||
</v-card-text>
|
||||
<v-divider></v-divider>
|
||||
<v-card-actions>
|
||||
<v-btn text color="error" @click="confirmDelete"> Delete </v-btn>
|
||||
<v-spacer></v-spacer>
|
||||
<!-- <v-btn text color="accent" @click="editTheme">Edit</v-btn> -->
|
||||
<v-btn text color="success" @click="saveThemes">Apply</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Confirmation from "@/components/UI/Confirmation";
|
||||
import api from "@/api";
|
||||
|
||||
const DELETE_EVENT = "delete";
|
||||
const APPLY_EVENT = "apply";
|
||||
const EDIT_EVENT = "edit";
|
||||
export default {
|
||||
components: {
|
||||
Confirmation,
|
||||
},
|
||||
props: {
|
||||
theme: Object,
|
||||
current: {
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
confirmDelete() {
|
||||
if (this.theme.name === "default") {
|
||||
// Notify User Can't Delete Default
|
||||
} else if (this.theme !== {}) {
|
||||
this.$refs.deleteThemeConfirm.open();
|
||||
}
|
||||
},
|
||||
async deleteSelectedTheme() {
|
||||
//Delete Theme from DB
|
||||
await api.themes.delete(this.theme.name);
|
||||
|
||||
//Get the new list of available from DB
|
||||
this.availableThemes = await api.themes.requestAll();
|
||||
this.$emit(DELETE_EVENT);
|
||||
},
|
||||
async saveThemes() {
|
||||
this.$store.commit("setTheme", this.theme);
|
||||
this.$emit(APPLY_EVENT, this.theme);
|
||||
},
|
||||
editTheme() {
|
||||
this.$emit(EDIT_EVENT);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -56,42 +56,6 @@
|
|||
}}
|
||||
</p>
|
||||
|
||||
<v-form ref="form" lazy-validation>
|
||||
<v-row dense align="center">
|
||||
<v-col cols="12" md="4" sm="3">
|
||||
<v-select
|
||||
:label="$t('settings.theme.saved-color-theme')"
|
||||
:items="availableThemes"
|
||||
item-text="name"
|
||||
return-object
|
||||
v-model="selectedTheme"
|
||||
@change="themeSelected"
|
||||
:rules="[v => !!v || $t('settings.theme.theme-is-required')]"
|
||||
required
|
||||
>
|
||||
</v-select>
|
||||
</v-col>
|
||||
<v-col>
|
||||
<v-btn-toggle group class="mt-n5">
|
||||
<NewThemeDialog @new-theme="appendTheme" class="mt-1" />
|
||||
<v-btn text color="error" @click="deleteSelectedThemeValidation">
|
||||
{{ $t("general.delete") }}
|
||||
</v-btn>
|
||||
</v-btn-toggle>
|
||||
<Confirmation
|
||||
:title="$t('settings.theme.delete-theme')"
|
||||
:message="
|
||||
$t('settings.theme.are-you-sure-you-want-to-delete-this-theme')
|
||||
"
|
||||
color="error"
|
||||
icon="mdi-alert-circle"
|
||||
ref="deleteThemeConfirm"
|
||||
v-on:confirm="deleteSelectedTheme()"
|
||||
/>
|
||||
</v-col>
|
||||
<v-spacer></v-spacer>
|
||||
</v-row>
|
||||
</v-form>
|
||||
<v-row dense align-content="center" v-if="selectedTheme.colors">
|
||||
<v-col>
|
||||
<ColorPickerDialog
|
||||
|
|
@ -152,12 +116,14 @@
|
|||
<ThemeCard
|
||||
:theme="theme"
|
||||
:current="selectedTheme.name == theme.name ? true : false"
|
||||
@delete="getAllThemes"
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card-text>
|
||||
|
||||
<v-card-actions>
|
||||
<NewThemeDialog @new-theme="appendTheme" class="mt-1" />
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn color="success" @click="saveThemes" class="mr-2">
|
||||
<v-icon left> mdi-content-save </v-icon>
|
||||
|
|
@ -171,61 +137,35 @@
|
|||
import api from "@/api";
|
||||
import ColorPickerDialog from "@/components/Admin/Theme/ColorPickerDialog";
|
||||
import NewThemeDialog from "@/components/Admin/Theme/NewThemeDialog";
|
||||
import Confirmation from "@/components/UI/Confirmation";
|
||||
import ThemeCard from "@/components/Admin/Theme/ThemeCard";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
ColorPickerDialog,
|
||||
Confirmation,
|
||||
NewThemeDialog,
|
||||
ThemeCard,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
selectedTheme: {},
|
||||
selectedDarkMode: "system",
|
||||
availableThemes: [],
|
||||
};
|
||||
},
|
||||
async mounted() {
|
||||
this.availableThemes = await api.themes.requestAll();
|
||||
this.selectedTheme = this.$store.getters.getActiveTheme;
|
||||
await this.getAllThemes();
|
||||
|
||||
this.selectedDarkMode = this.$store.getters.getDarkMode;
|
||||
},
|
||||
|
||||
methods: {
|
||||
/**
|
||||
* Open the delete confirmation.
|
||||
*/
|
||||
deleteSelectedThemeValidation() {
|
||||
if (this.$refs.form.validate()) {
|
||||
if (this.selectedTheme.name === "default") {
|
||||
// Notify User Can't Delete Default
|
||||
} else if (this.selectedTheme !== {}) {
|
||||
this.$refs.deleteThemeConfirm.open();
|
||||
}
|
||||
}
|
||||
computed: {
|
||||
selectedTheme() {
|
||||
return this.$store.getters.getActiveTheme;
|
||||
},
|
||||
/**
|
||||
* Delete the selected Theme
|
||||
*/
|
||||
async deleteSelectedTheme() {
|
||||
//Delete Theme from DB
|
||||
await api.themes.delete(this.selectedTheme.name);
|
||||
},
|
||||
|
||||
//Get the new list of available from DB
|
||||
methods: {
|
||||
async getAllThemes() {
|
||||
this.availableThemes = await api.themes.requestAll();
|
||||
|
||||
//Change to default if deleting current theme.
|
||||
if (
|
||||
!this.availableThemes.some(
|
||||
theme => theme.name === this.selectedTheme.name
|
||||
)
|
||||
) {
|
||||
await this.$store.dispatch("resetTheme");
|
||||
this.selectedTheme = this.$store.getters.getActiveTheme;
|
||||
}
|
||||
},
|
||||
/**
|
||||
* Create the new Theme and select it.
|
||||
|
|
@ -233,14 +173,8 @@ export default {
|
|||
async appendTheme(NewThemeDialog) {
|
||||
await api.themes.create(NewThemeDialog);
|
||||
this.availableThemes.push(NewThemeDialog);
|
||||
this.selectedTheme = NewThemeDialog;
|
||||
this.$store.commit("setTheme", NewThemeDialog);
|
||||
},
|
||||
|
||||
themeSelected() {
|
||||
//TODO Revamp Theme selection.
|
||||
//console.log("this.activeTheme", this.selectedTheme);
|
||||
},
|
||||
|
||||
setStoresDarkMode() {
|
||||
this.$store.commit("setDarkMode", this.selectedDarkMode);
|
||||
},
|
||||
|
|
@ -248,13 +182,10 @@ export default {
|
|||
* This will save the current colors and make the selected theme live.
|
||||
*/
|
||||
async saveThemes() {
|
||||
if (this.$refs.form.validate()) {
|
||||
this.$store.commit("setTheme", this.selectedTheme);
|
||||
await api.themes.update(
|
||||
this.selectedTheme.name,
|
||||
this.selectedTheme.colors
|
||||
);
|
||||
}
|
||||
await api.themes.update(
|
||||
this.selectedTheme.name,
|
||||
this.selectedTheme.colors
|
||||
);
|
||||
},
|
||||
},
|
||||
};
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue