starred/yaak-mountain-loop
1
0
Fork 0
mirror of https://github.com/mountain-loop/yaak.git synced 2026-03-21 08:59:07 +01:00
Code Issues 8 Packages Projects Releases 10 Wiki Activity

Workspace header tweak Windows

Browse Source
This commit is contained in:
Gregory Schier
2024-01-17 18:48:43 -08:00
parent 5be04ceea6
commit aa59d96e55
5 changed files with 64 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
src-web/components/WorkspaceHeader.tsx
View File

@@ -38,36 +38,39 @@ export const WorkspaceHeader = memo(function WorkspaceHeader({ className }: Prop
</div>
<div className="flex-1 flex items-center h-full justify-end pointer-events-none">
<SettingsDropdown />
{osInfo?.osType !== 'Darwin' && (
<HStack className="ml-4" space={1} alignItems="center">
<Button className="!text-gray-600 rounded-none" onClick={() => appWindow.minimize()}>
{(osInfo?.osType === 'Linux' || osInfo?.osType === 'Windows_NT') && (
<HStack className="ml-4" alignItems="center">
<Button
className="px-4 !text-gray-600 rounded-none"
onClick={() => appWindow.minimize()}
>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<path fill="currentColor" d="M14 8v1H3V8z" />
</svg>
</Button>
<Button
className="!text-gray-600 rounded-none"
className="px-4 !text-gray-600 rounded-none"
onClick={async () => {
await appWindow.toggleMaximize();
setMaximized(await appWindow.isMaximized());
}}
>
{maximized ? (
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<path fill="currentColor" d="M3 3v10h10V3zm9 9H4V4h8z" />
</svg>
) : (
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<g fill="currentColor">
<path d="M3 5v9h9V5zm8 8H4V6h7z" />
<path fillRule="evenodd" d="M5 5h1V4h7v7h-1v1h2V3H5z" clipRule="evenodd" />
</g>
</svg>
) : (
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<path fill="currentColor" d="M3 3v10h10V3zm9 9H4V4h8z" />
</svg>
)}
</Button>
<Button
color="custom"
className="text-gray-600 rounded-none hocus:bg-red-200 hocus:text-gray-800"
className="px-4 text-gray-600 rounded-none hocus:bg-red-200 hocus:text-gray-800"
onClick={() => appWindow.close()}
>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">

107
src-web/components/core/Icon.tsx
View File

@@ -1,66 +1,63 @@
import * as lucide from 'lucide-react';
import classNames from 'classnames';
import type { HTMLAttributes } from 'react';
import { memo } from 'react';
import { ReactComponent as LeftPanelHiddenIcon } from '../../assets/icons/LeftPanelHiddenIcon.svg';
import { ReactComponent as LeftPanelVisibleIcon } from '../../assets/icons/LeftPanelVisibleIcon.svg';
import type {HTMLAttributes} from 'react';
import {memo} from 'react';
const icons = {
archive: lucide.ArchiveIcon,
box: lucide.BoxIcon,
chat: lucide.MessageSquare,
check: lucide.CheckIcon,
chevronDown: lucide.ChevronDownIcon,
chevronRight: lucide.ChevronRightIcon,
code: lucide.CodeIcon,
copy: lucide.CopyIcon,
moreVertical: lucide.MoreVerticalIcon,
download: lucide.DownloadIcon,
gripVertical: lucide.GripVerticalIcon,
eye: lucide.EyeIcon,
eyeClosed: lucide.EyeOffIcon,
filter: lucide.FilterIcon,
flask: lucide.FlaskConicalIcon,
keyboard: lucide.KeyboardIcon,
magicWand: lucide.Wand2Icon,
externalLink: lucide.ExternalLinkIcon,
sendHorizontal: lucide.SendHorizonalIcon,
pencil: lucide.PencilIcon,
question: lucide.ShieldQuestionIcon,
plus: lucide.PlusIcon,
plusCircle: lucide.PlusCircleIcon,
settings: lucide.SettingsIcon,
settings2: lucide.Settings2Icon,
trash: lucide.TrashIcon,
update: lucide.RefreshCcwIcon,
upload: lucide.UploadIcon,
x: lucide.XIcon,
archive: lucide.ArchiveIcon,
box: lucide.BoxIcon,
chat: lucide.MessageSquare,
check: lucide.CheckIcon,
chevronDown: lucide.ChevronDownIcon,
chevronRight: lucide.ChevronRightIcon,
code: lucide.CodeIcon,
copy: lucide.CopyIcon,
download: lucide.DownloadIcon,
externalLink: lucide.ExternalLinkIcon,
eye: lucide.EyeIcon,
eyeClosed: lucide.EyeOffIcon,
filter: lucide.FilterIcon,
flask: lucide.FlaskConicalIcon,
gripVertical: lucide.GripVerticalIcon,
keyboard: lucide.KeyboardIcon,
leftPanelHidden: lucide.PanelLeftOpenIcon,
leftPanelVisible: lucide.PanelLeftCloseIcon,
magicWand: lucide.Wand2Icon,
moreVertical: lucide.MoreVerticalIcon,
pencil: lucide.PencilIcon,
plus: lucide.PlusIcon,
plusCircle: lucide.PlusCircleIcon,
question: lucide.ShieldQuestionIcon,
sendHorizontal: lucide.SendHorizonalIcon,
settings2: lucide.Settings2Icon,
settings: lucide.SettingsIcon,
trash: lucide.TrashIcon,
update: lucide.RefreshCcwIcon,
upload: lucide.UploadIcon,
x: lucide.XIcon,
// Custom
leftPanelHidden: LeftPanelHiddenIcon,
leftPanelVisible: LeftPanelVisibleIcon,
empty: (props: HTMLAttributes<HTMLSpanElement>) => <span {...props} />,
empty: (props: HTMLAttributes<HTMLSpanElement>) => <span {...props} />,
};
export interface IconProps {
icon: keyof typeof icons;
className?: string;
size?: 'xs' | 'sm' | 'md';
spin?: boolean;
icon: keyof typeof icons;
className?: string;
size?: 'xs' | 'sm' | 'md';
spin?: boolean;
}
export const Icon = memo(function Icon({ icon, spin, size = 'md', className }: IconProps) {
const Component = icons[icon] ?? icons.question;
return (
<Component
className={classNames(
className,
'text-inherit',
size === 'md' && 'h-4 w-4',
size === 'sm' && 'h-3.5 w-3.5',
size === 'xs' && 'h-3 w-3',
spin && 'animate-spin',
)}
/>
);
export const Icon = memo(function Icon({icon, spin, size = 'md', className}: IconProps) {
const Component = icons[icon] ?? icons.question;
return (
<Component
className={classNames(
className,
'text-inherit',
size === 'md' && 'h-4 w-4',
size === 'sm' && 'h-3.5 w-3.5',
size === 'xs' && 'h-3 w-3',
spin && 'animate-spin',
)}
/>
);
});