binarybeach/bb-plane-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: project layout added and theming fixes (#2455)

Browse source 
* fix: project layout added and theme fixes

* feat: input color picker component added to ui package

* fix: layout fixes

* fix: conflicts and build issues resolved

* fix: layout headers fixes
This commit is contained in:
sriram veeraghanta 2023-10-17 12:46:38 +05:30 • committed by GitHub
parent e496cec49f
commit 98b1a078de
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
30 changed files with 891 additions and 699 deletions
Download patch file Download diff file Expand all files Collapse all files

36
web/lib/mobx/store-init.tsx
View file

@ -1,11 +1,13 @@
import { useEffect } from "react";
import { useEffect, useState } from "react";
// next themes
import { useTheme } from "next-themes";
// mobx store
import { useMobxStore } from "lib/mobx/store-provider";
import { useRouter } from "next/router";
import { applyTheme, unsetCustomCssVariables } from "helpers/theme.helper";
import { observer } from "mobx-react-lite";
const MobxStoreInit = () => {
const MobxStoreInit = observer(() => {
const {
theme: themeStore,
user: userStore,
@ -16,12 +18,16 @@ const MobxStoreInit = () => {
projectViews: projectViewsStore,
inbox: inboxStore,
} = useMobxStore();
// state
const [dom, setDom] = useState<any>();
// theme
const { setTheme } = useTheme();
// router
const router = useRouter();
const { workspaceSlug, projectId, moduleId, globalViewId, viewId, inboxId } = router.query;
// const dom = useMemo(() => window && window.document?.querySelector<HTMLElement>("[data-theme='custom']"), [document]);
useEffect(() => {
// sidebar collapsed toggle
if (localStorage && localStorage.getItem("app_sidebar_collapsed") && themeStore?.sidebarCollapsed === null)
@ -32,20 +38,20 @@ const MobxStoreInit = () => {
: false
: false
);
// theme
if (themeStore.theme === null && userStore?.currentUserSettings) {
let currentTheme = localStorage.getItem("theme");
currentTheme = currentTheme && currentTheme != "undefined" ? currentTheme : "system";
// validating the theme and applying for initial state
if (currentTheme) {
setTheme(currentTheme);
themeStore.setTheme({ theme: { theme: currentTheme } });
}
}
}, [themeStore, userStore, setTheme]);
useEffect(() => {
if (!userStore.currentUser) return;
if (window) {
setDom(window.document?.querySelector<HTMLElement>("[data-theme='custom']"));
}
setTheme(userStore.currentUser?.theme?.theme || "system");
if (userStore.currentUser?.theme?.theme === "custom" && dom) {
console.log("userStore.currentUser?.theme?.theme", userStore.currentUser?.theme);
applyTheme(userStore.currentUser?.theme?.palette, false);
} else unsetCustomCssVariables();
}, [userStore.currentUser, setTheme, dom]);
useEffect(() => {
if (workspaceSlug) workspaceStore.setWorkspaceSlug(workspaceSlug.toString());
if (projectId) projectStore.setProjectId(projectId.toString());
@ -69,6 +75,6 @@ const MobxStoreInit = () => {
]);
return <></>;
};
});
export default MobxStoreInit;