这是indexloc提供的服务，不要输入任何密码
Skip to content

bugfix: dark mode isnt applied until you visiting setting #431

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 17 commits into from
Aug 21, 2024
Merged

bugfix: dark mode isnt applied until you visiting setting #431

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
7725b9f
add darkmodeswitcher
muzanella11 Aug 16, 2024
6811a36
fix structure
muzanella11 Aug 16, 2024
7dff570
add missing dropdownuser
muzanella11 Aug 16, 2024
174e9d9
fix error lint
muzanella11 Aug 16, 2024
f7f59ef
adjust settings screen
muzanella11 Aug 19, 2024
f1aae1a
remove darkmode switcher and user profile in the top right bar
muzanella11 Aug 19, 2024
60c032a
hide top bar in large screen
muzanella11 Aug 19, 2024
adc83f2
fix error in switcher component
muzanella11 Aug 19, 2024
3168b75
add onclick handler in menu item
muzanella11 Aug 19, 2024
92a7fd1
add signout button in side menu
muzanella11 Aug 19, 2024
9fabc85
add separator for signout button
muzanella11 Aug 19, 2024
cd3be6c
adjust settings screen
muzanella11 Aug 19, 2024
9a3e547
adjust setting screen
muzanella11 Aug 19, 2024
a26433c
fix dark/light mode not applied when page is changing
muzanella11 Aug 19, 2024
45c914c
fix error lint
muzanella11 Aug 19, 2024
98e57b2
fix error
muzanella11 Aug 19, 2024
76d72f9
remove unused component
muzanella11 Aug 20, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion hosting/src/app/(protected)/content/[documentTypeId]/[documentId]/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,7 +87,7 @@ const DocumentDetailsPage = () => {
case "file-upload":
return <FileUpload key={inputKey} disabled={readonlyMode} label={field.title.translated} />;
case "switcher":
return <Switcher key={inputKey} disabled={readonlyMode} defaultChecked={value} />;
return <Switcher key={inputKey} disabled={readonlyMode} initialValue={value} />;
case "radio":
return <RadioButton key={inputKey} disabled={readonlyMode} label={field.title.translated} />;
case "checkbox":
Expand Down
2 changes: 1 addition & 1 deletion hosting/src/app/(protected)/dashboard/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@ export default function DashboardPage() {
case "file-upload":
return <FileUpload disabled={viewMode} label={field.title.translated} />;
case "switcher":
return <Switcher disabled={viewMode} defaultChecked={value} />;
return <Switcher disabled={viewMode} initialValue={value} />;
case "radio":
return <RadioButton disabled={viewMode} label={field.title.translated} />;
case "checkbox":
Expand Down
147 changes: 64 additions & 83 deletions hosting/src/app/(protected)/settings/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,13 +24,70 @@ export default function Settings() {
<PageHeader pageName="Settings" />

<div className="grid grid-cols-5 gap-8">
<div className="col-span-5 xl:col-span-3">
<div className="rounded-sm border border-stroke bg-white shadow-default dark:border-strokedark dark:bg-boxdark">
<div className="border-b border-stroke px-7 py-4 dark:border-strokedark">
<h3 className="font-medium text-black dark:text-white">Personal Information</h3>
<div className="col-span-5 xl:col-span-7">
<div className="w-full mb-4">
<div className="rounded-sm border border-stroke bg-white shadow-default dark:border-strokedark dark:bg-boxdark">
<div className="border-b border-stroke px-7 py-4 dark:border-strokedark">
<h3 className="font-medium text-black dark:text-white">System</h3>
</div>
<div className="p-7">
<div className="mb-4">
<label
className="mb-3 block w-full text-sm font-medium text-black dark:text-white"
htmlFor="emailAddress"
>
Dark mode
</label>
<div className="relative">
<DarkModeSwitcher />
</div>
</div>
</div>
</div>
<div className="p-7">
<form onSubmit={onPersonalInfoSubmit}>
</div>

<form onSubmit={onPersonalInfoSubmit}>
<div className="rounded-sm border border-stroke bg-white shadow-default dark:border-strokedark dark:bg-boxdark">
<div className="border-b border-stroke px-7 py-4 dark:border-strokedark">
<h3 className="font-medium text-black dark:text-white">Personal Information</h3>
</div>
<div className="p-7">
<div className="mb-5.5 flex flex-col gap-5.5 sm:flex-row">
<div className="w-full">
<div className="mb-4 flex items-center gap-3">
<div className="h-14 w-14 rounded-full">
<Image src={"/images/user/user-03.png"} width={55} height={55} alt="User" />
</div>
<div>
<span className="mb-1.5 text-black dark:text-white">Edit your photo</span>
<span className="flex gap-2.5">
<button className="text-sm hover:text-primary">Delete</button>
<button className="text-sm hover:text-primary">Update</button>
</span>
</div>
</div>

<div
id="FileUpload"
className="relative mb-5.5 block w-full cursor-pointer appearance-none rounded border border-dashed border-primary bg-gray px-4 py-4 dark:bg-meta-4 sm:py-7.5"
>
<input
type="file"
accept="image/*"
className="absolute inset-0 z-50 m-0 h-full w-full cursor-pointer p-0 opacity-0 outline-none"
/>
<div className="flex flex-col items-center justify-center space-y-3">
<span className="i-ic-outline-file-upload text-primary h-[28px] w-[28px]" />
<p>
<span className="text-primary">Click to upload</span> or drag and drop
</p>
<p className="mt-1.5">SVG, PNG, JPG or GIF</p>
<p>(max, 800 X 800px)</p>
</div>
</div>
</div>
</div>

<div className="mb-5.5 flex flex-col gap-5.5 sm:flex-row">
<div className="w-full">
<label className="mb-3 block text-sm font-medium text-black dark:text-white" htmlFor="fullName">
Expand Down Expand Up @@ -64,85 +121,9 @@ export default function Settings() {
Save
</button>
</div>
</form>
</div>
</div>
</div>

<div className="col-span-5 xl:col-span-2">
<div className="rounded-sm border border-stroke bg-white shadow-default dark:border-strokedark dark:bg-boxdark">
<div className="border-b border-stroke px-7 py-4 dark:border-strokedark">
<h3 className="font-medium text-black dark:text-white">Your Photo</h3>
</div>
<div className="p-7">
<form action="#">
<div className="mb-4 flex items-center gap-3">
<div className="h-14 w-14 rounded-full">
<Image src={"/images/user/user-03.png"} width={55} height={55} alt="User" />
</div>
<div>
<span className="mb-1.5 text-black dark:text-white">Edit your photo</span>
<span className="flex gap-2.5">
<button className="text-sm hover:text-primary">Delete</button>
<button className="text-sm hover:text-primary">Update</button>
</span>
</div>
</div>

<div
id="FileUpload"
className="relative mb-5.5 block w-full cursor-pointer appearance-none rounded border border-dashed border-primary bg-gray px-4 py-4 dark:bg-meta-4 sm:py-7.5"
>
<input
type="file"
accept="image/*"
className="absolute inset-0 z-50 m-0 h-full w-full cursor-pointer p-0 opacity-0 outline-none"
/>
<div className="flex flex-col items-center justify-center space-y-3">
<span className="i-ic-outline-file-upload text-primary h-[28px] w-[28px]" />
<p>
<span className="text-primary">Click to upload</span> or drag and drop
</p>
<p className="mt-1.5">SVG, PNG, JPG or GIF</p>
<p>(max, 800 X 800px)</p>
</div>
</div>

<div className="flex justify-end gap-4.5">
<button
className="flex justify-center rounded border border-stroke px-6 py-2 font-medium text-black hover:shadow-1 dark:border-strokedark dark:text-white"
type="submit"
>
Cancel
</button>
<button
className="flex justify-center rounded bg-primary px-6 py-2 font-medium text-gray hover:bg-opacity-90"
type="submit"
>
Save
</button>
</div>
</form>
</div>
</div>
</div>

<div className="col-span-5 xl:col-span-2">
<div className="rounded-sm border border-stroke bg-white shadow-default dark:border-strokedark dark:bg-boxdark">
<div className="border-b border-stroke px-7 py-4 dark:border-strokedark">
<h3 className="font-medium text-black dark:text-white">System</h3>
</div>
<div className="p-7">
<div className="mb-4 flex items-center gap-3">
<label className="mb-3 block text-sm font-medium text-black dark:text-white" htmlFor="emailAddress">
Dark mode
</label>
<div className="relative">
<DarkModeSwitcher />
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion hosting/src/components/DarkModeSwitcher.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ const DarkModeSwitcher = () => {
return (
<Switcher
style="default"
defaultChecked={colorMode === "dark"}
initialValue={colorMode === "dark"}
onChange={async (checked) => await saveColorMode(checked ? "dark" : "light")}
onIcon="i-ri-moon-clear-fill text-white"
offIcon="i-ri-sun-line"
Expand Down
42 changes: 25 additions & 17 deletions hosting/src/components/Form/Switcher.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
"use client";
import {useState} from "react";
import {clsx} from "clsx";
import {useEffect, useState} from "react";

interface SwitcherProps {
style?: "default" | "rounded";
defaultChecked?: boolean;
initialValue?: boolean;
disabled?: boolean;
onIcon?: string;
offIcon?: string;
Expand All @@ -13,13 +13,17 @@ interface SwitcherProps {

export function Switcher({
style = "default",
defaultChecked = false,
initialValue = false,
disabled = false,
onIcon,
offIcon,
onChange,
}: SwitcherProps) {
const [enabled, setEnabled] = useState<boolean>(defaultChecked);
const [enabled, setEnabled] = useState<boolean>(false);

useEffect(() => {
setEnabled(initialValue);
}, []);

const handleToggle = () => {
if (!disabled) {
Expand All @@ -34,14 +38,16 @@ export function Switcher({
return (
<>
<div
className={`h-5 w-14 rounded-full transition ${
enabled ? "bg-primary dark:bg-primary" : "bg-meta-9 dark:bg-[#5A616B]"
}`}
className={clsx(
"h-5 w-14 rounded-full transition",
enabled ? "bg-primary dark:bg-primary" : "bg-meta-9 dark:bg-[#5A616B]",
)}
></div>
<div
className={`dot shadow-md absolute -top-1 left-0 flex h-7 w-7 items-center justify-center rounded-full bg-white dark:bg-[#b0b0b0] transition-transform ${
enabled ? "translate-x-full" : ""
}`}
className={clsx(
"dot shadow-md absolute -top-1 left-0 flex h-7 w-7 items-center justify-center rounded-full bg-white dark:bg-[#b0b0b0] transition-transform",
enabled ? "translate-x-full" : "",
)}
>
{onIcon && offIcon && (
<span
Expand All @@ -56,14 +62,16 @@ export function Switcher({
return (
<>
<div
className={`block h-8 w-14 rounded-full transition ${
enabled ? "bg-primary dark:bg-primary" : "bg-meta-9 dark:bg-[#5A616B]"
}`}
className={clsx(
"block h-8 w-14 rounded-full transition",
enabled ? "bg-primary dark:bg-primary" : "bg-meta-9 dark:bg-[#5A616B]",
)}
></div>
<div
className={`absolute left-1 top-1 flex h-6 w-6 items-center justify-center rounded-full bg-white dark:bg-[#b0b0b0] transition-transform ${
enabled ? "translate-x-full" : ""
}`}
className={clsx(
"absolute left-1 top-1 flex h-6 w-6 items-center justify-center rounded-full bg-white dark:bg-[#b0b0b0] transition-transform",
enabled ? "translate-x-full" : "",
)}
>
{onIcon && offIcon && (
<span
Expand All @@ -77,7 +85,7 @@ export function Switcher({
};

return (
<div className={`flex items-center ${disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer"}`}>
<div className={clsx("flex items-center", disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer")}>
<label className="flex items-center select-none">
<div className="relative">
<input type="checkbox" className="sr-only" onChange={handleToggle} checked={enabled} disabled={disabled} />
Expand Down
39 changes: 23 additions & 16 deletions hosting/src/components/Header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,26 +21,33 @@ interface HeaderProps {
*/
export default function Header({sidebarOpen, setSidebarOpen}: HeaderProps) {
return (
<header className="sticky top-0 z-999 flex w-full bg-white drop-shadow-1 dark:bg-boxdark dark:drop-shadow-none">
<header className="sticky top-0 z-999 flex w-full bg-white drop-shadow-1 dark:bg-boxdark dark:drop-shadow-none lg:hidden">
<div className="flex flex-grow items-center justify-between px-4 py-4 shadow-2 md:px-6 2xl:px-11">
{/* Start Toggle Publish Document */}
<TogglePublishDocument />
<div className="flex items-center gap-2 sm:gap-4 lg:hidden">
<button
aria-controls="sidebar"
onClick={(e) => {
e.stopPropagation();
setSidebarOpen(!sidebarOpen);
}}
className="z-99999 flex items-center justify-center rounded-sm border border-stroke bg-white p-1.5 shadow-sm dark:border-strokedark dark:bg-boxdark lg:hidden"
style={{width: "40px", height: "40px"}}
>
<span className="i-ic-round-menu w-[24px] h-[24px]" />
</button>
{/* End Toggle Publish Document */}

<Link className="block flex-shrink-0 lg:hidden" href="/">
<Image width={32} height={32} src={"/images/logo.svg"} alt="Logo" />
</Link>
{/* Start Hamburger Menu */}
<div className="flex items-center gap-2 sm:gap-4">
<div className="flex items-center lg:hidden">
<button
aria-controls="sidebar"
onClick={(e) => {
e.stopPropagation();
setSidebarOpen(!sidebarOpen);
}}
className="z-99999 flex items-center justify-center rounded-sm border border-stroke bg-white p-1.5 shadow-sm dark:border-strokedark dark:bg-boxdark lg:hidden"
style={{width: "40px", height: "40px"}}
>
<span className="i-ic-round-menu w-[24px] h-[24px]" />
</button>

<Link className="block flex-shrink-0 pl-4 lg:hidden" href="/">
<Image width={32} height={32} src={"/images/logo.svg"} alt="Logo" />
</Link>
</div>
</div>
{/* End Hamburger Menu */}
</div>
</header>
);
Expand Down
2 changes: 2 additions & 0 deletions hosting/src/components/Layouts/CmsLayout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,13 @@ import "@/assets/css/style.css";
import Header from "@/components/Header";
import Sidebar from "@/components/Sidebar";
import {useAuthentication} from "@/hooks/useAuthentication";
import useColorMode from "@/hooks/useColorMode";
import "flatpickr/dist/flatpickr.min.css";
import React, {useState} from "react";

export default function CmsLayout({children}: {children: React.ReactNode}) {
useAuthentication();
useColorMode();

const [sidebarOpen, setSidebarOpen] = useState(false);

Expand Down
15 changes: 14 additions & 1 deletion hosting/src/components/Sidebar/Sidebar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
"use client";

import {useAuthentication} from "@/hooks/useAuthentication";
import {useTanamDocumentTypes} from "@/hooks/useTanamDocumentTypes";
import Image from "next/image";
import Link from "next/link";
import {usePathname} from "next/navigation";
import {useEffect, useRef, useState} from "react";
import {useTanamDocumentTypes} from "../../hooks/useTanamDocumentTypes";
import {SidebarExpandableMenu, SidebarExpandableMenuSubItem} from "./SidebarExpandableMenu";
import {SidebarMenuGroup} from "./SidebarMenuGroup";
import {SidebarMenuItem} from "./SidebarMenuItem";
Expand All @@ -19,6 +20,7 @@ const Sidebar = ({sidebarOpen, setSidebarOpen}: SidebarProps) => {
const trigger = useRef<any>(null);
const sidebar = useRef<any>(null);
const {data: documentTypes} = useTanamDocumentTypes();
const {authUser, signout} = useAuthentication();

const storedSidebarExpanded = "true";

Expand Down Expand Up @@ -100,6 +102,17 @@ const Sidebar = ({sidebarOpen, setSidebarOpen}: SidebarProps) => {
icon={<span className="i-ic-outline-settings w-[24px] h-[24px]" />}
title="Settings"
/>
{authUser && (
<>
<hr />
<SidebarMenuItem
href="#"
icon={<span className="i-ic-outline-logout w-[24px] h-[24px]" />}
title="Signout"
onClick={signout}
/>
</>
)}
</SidebarMenuGroup>
</nav>
{/* <!-- Sidebar Menu --> */}
Expand Down
Loading