Comfy-Org/ComfyUI_frontend
1
0
Fork 0
mirror of https://github.com/Comfy-Org/ComfyUI_frontend.git synced 2026-02-10 01:50:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

[Major Refactor] Use pinia store to manage setting & nodeDef (#202)

Browse Source 
* Node def store and settings tore

* Fix initial values

* Remove legacy setting listen

* Fix searchbox test
This commit is contained in:
Chenlei Hu
2024-07-24 11:49:09 -04:00
committed by GitHub
parent 84d8c5fc16
commit b73fe80761
10 changed files with 186 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
src/components/sidebar/SideBarThemeToggleIcon.vue
View File

@@ -8,31 +8,23 @@
</template>
<script setup lang="ts">
import { computed, onMounted, onUnmounted, ref, watch } from "vue";
import { computed, ref } from "vue";
import SideBarIcon from "./SideBarIcon.vue";
import { app } from "@/scripts/app";
import { useSettingStore } from "@/stores/settingStore";
const isDarkMode = ref(false);
const previousDarkTheme = ref("dark");
const currentTheme = computed(() =>
useSettingStore().get("Comfy.ColorPalette", "dark")
);
const isDarkMode = computed(() => currentTheme.value !== "light");
const icon = computed(() => (isDarkMode.value ? "pi pi-moon" : "pi pi-sun"));
const themeId = computed(() => (isDarkMode.value ? "dark" : "light"));
const toggleTheme = () => {
isDarkMode.value = !isDarkMode.value;
if (isDarkMode.value) {
previousDarkTheme.value = currentTheme.value;
useSettingStore().set("Comfy.ColorPalette", "light");
} else {
useSettingStore().set("Comfy.ColorPalette", previousDarkTheme.value);
}
};
watch(themeId, (newThemeId) => {
app.ui.settings.setSettingValue("Comfy.ColorPalette", newThemeId);
});
const updateTheme = (e) => {
isDarkMode.value = e.detail.value !== "light";
};
onMounted(() => {
app.ui.settings.addEventListener("Comfy.ColorPalette.change", updateTheme);
app.ui.settings.refreshSetting("Comfy.ColorPalette");
});
onUnmounted(() => {
app.ui.settings.removeEventListener("Comfy.ColorPalette.change", updateTheme);
});
</script>

26
src/components/sidebar/SideToolBar.vue
View File

@@ -23,8 +23,9 @@ import SideBarThemeToggleIcon from "./SideBarThemeToggleIcon.vue";
import SideBarSettingsToggleIcon from "./SideBarSettingsToggleIcon.vue";
import NodeDetailSideBarItem from "./items/NodeDetailSideBarItem.vue";
import QueueSideBarItem from "./items/QueueSideBarItem.vue";
import { markRaw, onMounted, onUnmounted, ref, watch } from "vue";
import { computed, markRaw, ref, watch } from "vue";
import { useI18n } from "vue-i18n";
import { useSettingStore } from "@/stores/settingStore";
const { t } = useI18n();
const items = ref([
@@ -49,22 +50,13 @@ watch(selectedItem, (newVal) => {
emit("change", newVal !== null);
});
const onBetaMenuDisabled = () => {
selectedItem.value = null;
};
onMounted(() => {
document.addEventListener(
"comfy:setting:beta-menu-disabled",
onBetaMenuDisabled
);
});
onUnmounted(() => {
document.removeEventListener(
"comfy:setting:beta-menu-disabled",
onBetaMenuDisabled
);
const betaMenuEnabled = computed(
() => useSettingStore().get("Comfy.UseNewMenu") !== "Disabled"
);
watch(betaMenuEnabled, (newValue) => {
if (!newValue) {
selectedItem.value = null;
}
});
</script>