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

Milestone 11: improvement aug24 #436

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 33 commits into from
Aug 23, 2024
Merged

Milestone 11: improvement aug24 #436

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
33 commits
Select commit Hold shift + click to select a range
3731231
add toggle menu with overlay
muzanella11 Aug 16, 2024
8cecfa7
close sidebar when page is changed
muzanella11 Aug 16, 2024
b7f113e
remove unused
muzanella11 Aug 16, 2024
95c50e9
close sidebar when window resize
muzanella11 Aug 16, 2024
6b804c2
remove unused
muzanella11 Aug 16, 2024
f5437fd
fix error lint
muzanella11 Aug 16, 2024
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
bf3af48
Merge pull request #431 from oddbit/issue/425-dark-mode-isnt-applied-…
DennisAlund Aug 21, 2024
35ec241
Merge branch 'milestone/11-improvement-aug24' into issue/423-cant-clo…
muzanella11 Aug 21, 2024
6510c63
fix lint error
muzanella11 Aug 21, 2024
ea0af7a
remove unused code
muzanella11 Aug 22, 2024
8d1d464
fix lint error
muzanella11 Aug 22, 2024
2851376
make it more consistent
muzanella11 Aug 22, 2024
13f20dc
Merge branch 'main' into milestone/11-improvement-aug24
muzanella11 Aug 23, 2024
55b6537
Merge branch 'milestone/11-improvement-aug24' into issue/423-cant-clo…
muzanella11 Aug 23, 2024
b4ae315
Merge pull request #429 from oddbit/issue/423-cant-close-side-menu-in…
DennisAlund Aug 23, 2024
0b9996a
Merge branch 'main' into milestone/11-improvement-aug24
DennisAlund Aug 23, 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
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
9 changes: 8 additions & 1 deletion hosting/src/assets/scss/layout-default.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,10 @@
.l-default {
//
& .overlay {
position: absolute;
width: 100%;
height: 100vh;
content: "";
background: rgba(0, 0, 0, 0.5);
z-index: 10;
}
}
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-9 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
8 changes: 8 additions & 0 deletions hosting/src/components/Layouts/CmsLayout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,17 @@
"use client";
import "@/assets/css/satoshi.css";
import "@/assets/css/style.css";
import "@/assets/scss/layout-default.scss";
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 All @@ -33,6 +36,11 @@ export default function CmsLayout({children}: {children: React.ReactNode}) {
</main>
{/* <!-- ===== Main Content End ===== --> */}
</div>

<div
className={`overlay ${sidebarOpen ? "block" : "hidden"}`}
onClick={() => setSidebarOpen(!sidebarOpen)}
></div>
{/* <!-- ===== Content Area End ===== --> */}
</div>
{/* <!-- ===== Page Wrapper End ===== --> */}
Expand Down
Loading
Loading