Skip to content
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

chore(improve-modal): modal-dialog #117

Open
wants to merge 7 commits into
base: main
Choose a base branch
from
Open

chore(improve-modal): modal-dialog #117

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
0c304ce
stub: modal-dialog improvements
pongstr Dec 24, 2024
d456a06
feat: introduce zmk logo for use on modals
pongstr Dec 25, 2024
03f8eb9
feat(improve-modal): migrate connect-modal to new modal component
pongstr Dec 25, 2024
7dc101f
feat(improve-modal): migrate about+license modals
pongstr Dec 25, 2024
5bfe6ce
feat(improve-modal): migrate restore-to-stock modal
pongstr Dec 25, 2024
ba2f551
feat(improve-modal): migrate edit-layer-name modal
pongstr Dec 25, 2024
b669399
chore: small tweak to fix LicenseModal content
pongstr Dec 29, 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
165 changes: 83 additions & 82 deletions src/AboutModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import React from "react";
import { useModalRef } from "./misc/useModalRef";
import React, { FC, PropsWithChildren, useState } from "react";

import cannonKeys from "./assets/cannonkeys.png";
import cannonKeysDarkMode from "./assets/cannonkeys-dark-mode.png";
Expand Down Expand Up @@ -40,13 +39,8 @@ import mekiboDarkMode from "./assets/mekibo-dark-mode.png";

import splitkb from "./assets/splitkb.png";
import splitkbDarkMode from "./assets/splitkb-dark-mode.png";
import { GenericModal } from "./GenericModal";
import { ExternalLink } from "./misc/ExternalLink";

export interface AboutModalProps {
open: boolean;
onClose: () => void;
}
import { Modal, ModalContent } from "./components/modal/Modal";

enum SponsorSize {
Large,
Expand Down Expand Up @@ -175,80 +169,87 @@ const sponsors = [
},
];

export const AboutModal = ({ open, onClose }: AboutModalProps) => {
const ref = useModalRef(open, true);

export const AboutModal: FC<PropsWithChildren> = ({ children }) => {
const [open, setOpen] = useState(false);
return (
<GenericModal ref={ref} className="min-w-min w-[70vw]" onClose={onClose}>
<div className="flex justify-between items-start">
<p>
The ZMK Project:{" "}
<ExternalLink href="https://zmk.dev/">website</ExternalLink>,{" "}
<ExternalLink href="https://github.com/zmkfirmware/zmk/issues/">
GitHub Issues
</ExternalLink>
,{" "}
<ExternalLink href="https://zmk.dev/community/discord/invite">
Discord Server
</ExternalLink>
</p>
<button
className="p-1.5 rounded-md bg-gray-100 text-black hover:bg-gray-300"
onClick={onClose}
>
Close
</button>
</div>
<div>
<p className="py-1 mr-2">
ZMK Studio is made possible thanks to the generous donation of time
from our contributors, as well as the financial sponsorship from the
following vendors:
</p>
</div>
<div className="grid gap-2 auto-rows-auto grid-cols-[auto_minmax(min-content,1fr)] justify-items-center items-center">
{sponsors.map((s) => {
const heightVariants = {
[SponsorSize.Large]: "h-16",
[SponsorSize.Medium]: "h-12",
[SponsorSize.Small]: "h-8",
};

return (
<React.Fragment key={s.level}>
<label>{s.level}</label>
<div
className={`grid grid-rows-1 gap-x-1 auto-cols-fr grid-flow-col justify-items-center items-center ${
heightVariants[s.size]
}`}
>
{s.vendors.map((v) => {
const maxSizeVariants = {
[SponsorSize.Large]: "max-h-16",
[SponsorSize.Medium]: "max-h-12",
[SponsorSize.Small]: "max-h-8",
};

return (
<a key={v.name} href={v.url} target="_blank">
<picture aria-label={v.name}>
{v.darkModeImg && (
<source
className={maxSizeVariants[s.size]}
srcSet={v.darkModeImg}
media="(prefers-color-scheme: dark)"
/>
)}
<img className={maxSizeVariants[s.size]} src={v.img} />
</picture>
</a>
);
})}
</div>
</React.Fragment>
);
})}
</div>
</GenericModal>
<>
<a
role="button"
className="hover:text-primary hover:cursor-pointer"
onClick={() => setOpen(true)}
>
{children}
</a>
<Modal open={open} onOpenChange={setOpen}>
<ModalContent className="w-[70vw]">
<div className="flex justify-between items-start">
<p>
The ZMK Project:{" "}
<ExternalLink href="https://zmk.dev/">website</ExternalLink>,{" "}
<ExternalLink href="https://github.com/zmkfirmware/zmk/issues/">
GitHub Issues
</ExternalLink>
,{" "}
<ExternalLink href="https://zmk.dev/community/discord/invite">
Discord Server
</ExternalLink>
</p>
</div>
<div>
<p className="py-1 mr-2">
ZMK Studio is made possible thanks to the generous donation of
time from our contributors, as well as the financial sponsorship
from the following vendors:
</p>
</div>
<div className="grid gap-2 auto-rows-auto grid-cols-[auto_minmax(min-content,1fr)] justify-items-center items-center">
{sponsors.map((s) => {
const heightVariants = {
[SponsorSize.Large]: "h-16",
[SponsorSize.Medium]: "h-12",
[SponsorSize.Small]: "h-8",
};

return (
<React.Fragment key={s.level}>
<label>{s.level}</label>
<div
className={`grid grid-rows-1 gap-x-1 auto-cols-fr grid-flow-col justify-items-center items-center ${
heightVariants[s.size]
}`}
>
{s.vendors.map((v) => {
const maxSizeVariants = {
[SponsorSize.Large]: "max-h-16",
[SponsorSize.Medium]: "max-h-12",
[SponsorSize.Small]: "max-h-8",
};

return (
<a key={v.name} href={v.url} target="_blank">
<picture aria-label={v.name}>
{v.darkModeImg && (
<source
className={maxSizeVariants[s.size]}
srcSet={v.darkModeImg}
media="(prefers-color-scheme: dark)"
/>
)}
<img
className={maxSizeVariants[s.size]}
src={v.img}
/>
</picture>
</a>
);
})}
</div>
</React.Fragment>
);
})}
</div>
</ModalContent>
</Modal>
</>
);
};
14 changes: 1 addition & 13 deletions src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,8 +27,6 @@ import { LockStateContext } from "./rpc/LockStateContext";
import { UnlockModal } from "./UnlockModal";
import { valueAfter } from "./misc/async";
import { AppFooter } from "./AppFooter";
import { AboutModal } from "./AboutModal";
import { LicenseNoticeModal } from "./misc/LicenseNoticeModal";

declare global {
interface Window {
Expand Down Expand Up @@ -166,8 +164,6 @@ function App() {
string | undefined
>(undefined);
const [doIt, undo, redo, canUndo, canRedo, reset] = useUndoRedo();
const [showAbout, setShowAbout] = useState(false);
const [showLicenseNotice, setShowLicenseNotice] = useState(false);
const [connectionAbort, setConnectionAbort] = useState(new AbortController());

const [lockState, setLockState] = useState<LockState>(
Expand Down Expand Up @@ -290,11 +286,6 @@ function App() {
transports={TRANSPORTS}
onTransportCreated={onConnect}
/>
<AboutModal open={showAbout} onClose={() => setShowAbout(false)} />
<LicenseNoticeModal
open={showLicenseNotice}
onClose={() => setShowLicenseNotice(false)}
/>
<div className="bg-base-100 text-base-content h-full max-h-[100vh] w-full max-w-[100vw] inline-grid grid-cols-[auto] grid-rows-[auto_1fr_auto] overflow-hidden">
<AppHeader
connectedDeviceLabel={connectedDeviceName}
Expand All @@ -308,10 +299,7 @@ function App() {
onResetSettings={resetSettings}
/>
<Keyboard />
<AppFooter
onShowAbout={() => setShowAbout(true)}
onShowLicenseNotice={() => setShowLicenseNotice(true)}
/>
<AppFooter />
</div>
</UndoRedoContext.Provider>
</LockStateContext.Provider>
Expand Down
34 changes: 15 additions & 19 deletions src/AppFooter.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,24 +1,20 @@
export interface AppFooterProps {
onShowAbout: () => void;
onShowLicenseNotice: () => void;
}
import { AboutModal } from "./AboutModal";
import { LicenseNoticeModal } from "./misc/LicenseNoticeModal";

export const AppFooter = ({
onShowAbout,
onShowLicenseNotice,
}: AppFooterProps) => {
export const AppFooter = () => {
return (
<div className="grid justify-center p-1 bg-base-200">
<div>
<span>&copy; 2024 - The ZMK Contributors</span> -{" "}
<a className="hover:text-primary hover:cursor-pointer" onClick={onShowAbout}>
About ZMK Studio
</a>{" "}
-{" "}
<a className="hover:text-primary hover:cursor-pointer" onClick={onShowLicenseNotice}>
License NOTICE
</a>
<>
<div className="w-full flex justify-center gap-2 p-1 bg-base-200 relative z-50">
<span>&copy; 2024 - The ZMK Contributors</span>
<span>&ndash;</span>
<AboutModal>
<span>About ZMK Studio</span>
</AboutModal>
<span>&ndash;</span>
<LicenseNoticeModal>
<span>License NOTICE</span>
</LicenseNoticeModal>
</div>
</div>
</>
);
};
Loading