marcel/excalidraw
1
0
Fork 0
mirror of https://github.com/excalidraw/excalidraw.git synced 2025-10-11 01:59:58 +02:00
Code Issues Packages Projects Releases Wiki Activity

hide color picker hot keys

Browse Source
This commit is contained in:
Ryan Di
2025-09-29 11:31:06 +10:00
parent cb40cd5804
commit 8a80805355
4 changed files with 23 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
packages/excalidraw/components/ColorPicker/ColorPicker.tsx
View File

@@ -217,6 +217,7 @@ const ColorPickerPopupContent = ({
appState.stylesPanelMode === "compact" || appState.stylesPanelMode === "compact" ||
appState.stylesPanelMode === "mobile" appState.stylesPanelMode === "mobile"
} }
showHotKey={appState.stylesPanelMode !== "mobile"}
> >
{colorInputJSX} {colorInputJSX}
</Picker> </Picker>

10
packages/excalidraw/components/ColorPicker/Picker.tsx
View File

@@ -40,6 +40,7 @@ interface PickerProps {
showTitle?: boolean; showTitle?: boolean;
onEyeDropperToggle: (force?: boolean) => void; onEyeDropperToggle: (force?: boolean) => void;
onEscape: (event: React.KeyboardEvent | KeyboardEvent) => void; onEscape: (event: React.KeyboardEvent | KeyboardEvent) => void;
showHotKey?: boolean;
} }
export const Picker = React.forwardRef( export const Picker = React.forwardRef(
@@ -55,6 +56,7 @@ export const Picker = React.forwardRef(
showTitle, showTitle,
onEyeDropperToggle, onEyeDropperToggle,
onEscape, onEscape,
showHotKey = true,
}: PickerProps, }: PickerProps,
ref, ref,
) => { ) => {
@@ -187,12 +189,18 @@ export const Picker = React.forwardRef(
palette={palette} palette={palette}
onChange={onChange} onChange={onChange}
activeShade={activeShade} activeShade={activeShade}
showHotKey={showHotKey}
/> />
</div> </div>
<div> <div>
<PickerHeading>{t("colorPicker.shades")}</PickerHeading> <PickerHeading>{t("colorPicker.shades")}</PickerHeading>
<ShadeList color={color} onChange={onChange} palette={palette} /> <ShadeList
color={color}
onChange={onChange}
palette={palette}
showHotKey={showHotKey}
/>
</div> </div>
{children} {children}
</div> </div>

4
packages/excalidraw/components/ColorPicker/PickerColorList.tsx
View File

@@ -20,6 +20,7 @@ interface PickerColorListProps {
color: string | null; color: string | null;
onChange: (color: string) => void; onChange: (color: string) => void;
activeShade: number; activeShade: number;
showHotKey?: boolean;
} }
const PickerColorList = ({ const PickerColorList = ({
@@ -27,6 +28,7 @@ const PickerColorList = ({
color, color,
onChange, onChange,
activeShade, activeShade,
showHotKey = true,
}: PickerColorListProps) => { }: PickerColorListProps) => {
const colorObj = getColorNameAndShadeFromColor({ const colorObj = getColorNameAndShadeFromColor({
color, color,
@@ -82,7 +84,7 @@ const PickerColorList = ({
key={key} key={key}
> >
<div className="color-picker__button-outline" /> <div className="color-picker__button-outline" />
<HotkeyLabel color={color} keyLabel={keybinding} /> {showHotKey && <HotkeyLabel color={color} keyLabel={keybinding} />}
</button> </button>
); );
})} })}

12
packages/excalidraw/components/ColorPicker/ShadeList.tsx
View File

@@ -16,9 +16,15 @@ interface ShadeListProps {
color: string | null; color: string | null;
onChange: (color: string) => void; onChange: (color: string) => void;
palette: ColorPaletteCustom; palette: ColorPaletteCustom;
showHotKey?: boolean;
} }
export const ShadeList = ({ color, onChange, palette }: ShadeListProps) => { export const ShadeList = ({
color,
onChange,
palette,
showHotKey,
}: ShadeListProps) => {
const colorObj = getColorNameAndShadeFromColor({ const colorObj = getColorNameAndShadeFromColor({
color: color || "transparent", color: color || "transparent",
palette, palette,
@@ -67,7 +73,9 @@ export const ShadeList = ({ color, onChange, palette }: ShadeListProps) => {
}} }}
> >
<div className="color-picker__button-outline" /> <div className="color-picker__button-outline" />
<HotkeyLabel color={color} keyLabel={i + 1} isShade /> {showHotKey && (
<HotkeyLabel color={color} keyLabel={i + 1} isShade />
)}
</button> </button>
))} ))}
</div> </div>