mirror/spacedrive
1
0
Fork 0
mirror of https://github.com/spacedriveapp/spacedrive.git synced 2026-04-21 23:18:06 -04:00
Code Issues Packages Projects Releases Wiki Activity

fix button size

Browse Source
This commit is contained in:
maxichrome
2022-05-23 06:06:59 -05:00
parent e9048bd414
commit 91cfe6121f
1 changed files with 47 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

82
packages/interface/src/components/os/TrafficLights.tsx
View File

@@ -1,11 +1,11 @@
import clsx from 'clsx';
import React from 'react';
import React, { useEffect } from 'react';
import { useFocusState } from '../../hooks/useFocusState';
import { DefaultProps } from '../primitive/types';
import { ReactComponent as Close } from '../../assets/svg/macos_close.svg';
import { ReactComponent as Minimize } from '../../assets/svg/macos_minimize.svg';
import { ReactComponent as Fullscreen } from '../../assets/svg/macos_fullscreen.svg';
import closeIconPath from '../../assets/svg/macos_close.svg';
import minimizeIconPath from '../../assets/svg/macos_minimize.svg';
import fullscreenIconPath from '../../assets/svg/macos_fullscreen.svg';
export interface TrafficLightsProps extends DefaultProps {
onClose?: () => void;
@@ -20,46 +20,58 @@ export const TrafficLights: React.FC<TrafficLightsProps> = (props) => {
data-tauri-drag-region
className={clsx('flex flex-row space-x-2 px-2 group', props.className)}
>
<Light mode="close" action={props.onClose} focused={focused} />
<Light mode="minimize" action={props.onMinimize} focused={focused} />
<Light mode="fullscreen" action={props.onFullscreen} focused={focused} />
<TrafficLight type="close" onClick={props.onClose} colorful={focused} />
<TrafficLight type="minimize" onClick={props.onMinimize} colorful={focused} />
<TrafficLight type="fullscreen" onClick={props.onFullscreen} colorful={focused} />
</div>
);
};
interface LightProps {
mode: 'close' | 'minimize' | 'fullscreen';
focused: boolean;
action?: () => void;
interface TrafficLightProps {
type: 'close' | 'minimize' | 'fullscreen';
colorful: boolean;
onClick?: () => void;
}
const Light: React.FC<LightProps> = (props) => {
const TrafficLight: React.FC<TrafficLightProps> = (props) => {
const { onClick = () => undefined, colorful = false, type } = props;
const iconPath = React.useRef<string>(closeIconPath);
useEffect(() => {
switch (type) {
case 'close':
iconPath.current = closeIconPath;
break;
case 'minimize':
iconPath.current = minimizeIconPath;
break;
case 'fullscreen':
iconPath.current = fullscreenIconPath;
break;
}
}, [type]);
return (
<div
onClick={props.action}
className={clsx('w-[13px] h-[13px] rounded-full bg-gray-500', {
'!bg-red-400 active:!bg-red-300': props.mode == 'close' && props.focused,
'!bg-green-400 active:!bg-green-300': props.mode == 'fullscreen' && props.focused,
'!bg-yellow-400 active:!bg-yellow-300': props.mode == 'minimize' && props.focused
})}
>
{(() => {
if (!props.focused) return <></>;
switch (props.mode) {
case 'close':
return (
<Close className=" w-[13px] -mt-[1px] h-[15px] opacity-0 group-hover:opacity-100" />
);
case 'minimize':
return (
<Minimize className="ml-[2px] w-[9px] -mt-[1px] h-[15px] opacity-0 group-hover:opacity-100" />
);
case 'fullscreen':
return (
<Fullscreen className="ml-[1px] w-[11px] -mt-[1px] h-[15px] opacity-0 group-hover:opacity-100" />
);
onClick={onClick}
className={clsx(
'rounded-full box-content w-[12px] h-[12px] border-[0.5px] border-transparent bg-[#CDCED0] dark:bg-[#2B2C2F] flex justify-center items-center',
{
'border-red-900 !bg-[#EC6A5E] active:hover:!bg-red-700 dark:active:hover:!bg-red-400':
type === 'close' && colorful,
'border-yellow-900 !bg-[#F4BE4F] active:hover:!bg-yellow-600 dark:active:hover:!bg-yellow-200':
type === 'minimize' && colorful,
'border-green-900 !bg-[#61C253] active:hover:!bg-green-700 dark:active:hover:!bg-green-300':
type === 'fullscreen' && colorful
}
})()}
)}
>
{colorful && (
<img
src={iconPath.current}
className="opacity-0 group-hover:opacity-100 group-active:opacity-100 pointer-events-none"
/>
)}
</div>
);
};