e8073e6146
- Updated BottomControlsIsland for improved layout and styling. - Refactored LayersSheet to enhance usability and visual consistency. - Modified ToolOverlay for better tool selection experience. - Improved BrushControls with new ColorPicker and Slider components. - Enhanced PanControls and TransformControls for better user interaction. - Updated ZoomControls for consistent button sizes and styles. - Introduced new styles for bottom controls in styles.ts and index.css. - Added BottomControlColorPicker, BottomControlSelectMenu, and BottomControlSlider components for better modularity and reusability.
30 lines
1.3 KiB
TypeScript
30 lines
1.3 KiB
TypeScript
import { Minus, CornersOut, Plus } from "@phosphor-icons/react";
|
|
import { commandIds } from "@commands/ids";
|
|
import type { AppStore } from "@editor/store";
|
|
import { BottomControlDivider } from "./Divider";
|
|
import { bottomControlButtonClass, bottomControlMenuClass, bottomControlValueClass } from "./styles";
|
|
|
|
export type ZoomControlsProps = {
|
|
zoom: number;
|
|
zoomPercent: number;
|
|
dispatch: AppStore["dispatch"];
|
|
};
|
|
|
|
export function ZoomControls({ zoom, zoomPercent, dispatch }: ZoomControlsProps) {
|
|
return (
|
|
<div className={bottomControlMenuClass()}>
|
|
<button type="button" className={bottomControlButtonClass()} aria-label="Zoom out" onClick={() => dispatch(commandIds.viewportSetZoom, { zoom: zoom / 1.2 })}>
|
|
<Minus size={24} weight="regular" />
|
|
</button>
|
|
<span className={bottomControlValueClass()}>{zoomPercent}%</span>
|
|
<button type="button" className={bottomControlButtonClass()} aria-label="Zoom in" onClick={() => dispatch(commandIds.viewportSetZoom, { zoom: zoom * 1.2 })}>
|
|
<Plus size={24} weight="regular" />
|
|
</button>
|
|
<BottomControlDivider />
|
|
<button type="button" className={bottomControlButtonClass()} aria-label="Fit artboard" title="Fit artboard" onClick={() => dispatch(commandIds.viewportFitArtboard, undefined)}>
|
|
<CornersOut size={24} weight="regular" />
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|