marcel/excalidraw
1
0
Fork 0
mirror of https://github.com/excalidraw/excalidraw.git synced 2025-09-26 02:40:07 +02:00
Code Issues Packages Projects Releases Wiki Activity

improve button styles

Browse Source
This commit is contained in:
Ryan Di
2025-09-23 16:22:08 +10:00
parent cececd5dbc
commit 7286ae9f45
4 changed files with 16 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
packages/excalidraw/components/Actions.scss
View File

@@ -133,8 +133,10 @@
} }
&.active { &.active {
background: var(--button-active-bg, var(--island-bg-color)); background: var(
border-color: var(--button-active-border, var(--color-primary-darkest)); --color-surface-primary-container,
var(--island-bg-color)
);
} }
} }
@@ -181,31 +183,6 @@
overflow-x: hidden; overflow-x: hidden;
} }
.compact-popover-content {
.popover-section {
margin-bottom: 1rem;
&:last-child {
margin-bottom: 0;
}
.popover-section-title {
font-size: 0.75rem;
font-weight: 600;
color: var(--color-text-secondary);
margin-bottom: 0.5rem;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.buttonList {
display: flex;
flex-wrap: wrap;
gap: 0.25rem;
}
}
}
.mobile-shape-actions { .mobile-shape-actions {
z-index: 999; z-index: 999;
display: flex; display: flex;

5
packages/excalidraw/components/MobileToolBar.scss
View File

@@ -38,7 +38,10 @@
} }
&.active { &.active {
background: var(--button-active-bg, var(--island-bg-color)); background: var(
--color-surface-primary-container,
var(--island-bg-color)
);
border-color: var(--button-active-border, var(--color-primary-darkest)); border-color: var(--button-active-border, var(--color-primary-darkest));
} }

14
packages/excalidraw/components/MobileToolBar.tsx
View File

@@ -14,7 +14,7 @@ import { useTunnels } from "../context/tunnels";
import { HandButton } from "./HandButton"; import { HandButton } from "./HandButton";
import { ToolButton } from "./ToolButton"; import { ToolButton } from "./ToolButton";
import DropdownMenu from "./dropdownMenu/DropdownMenu"; import DropdownMenu from "./dropdownMenu/DropdownMenu";
import { ToolWithPopup } from "./ToolWithPopup"; import { ToolPopover } from "./ToolPopover";
import { import {
SelectionIcon, SelectionIcon,
@@ -198,7 +198,7 @@ export const MobileToolBar = ({
/> />
{/* Selection Tool */} {/* Selection Tool */}
<ToolWithPopup <ToolPopover
app={app} app={app}
options={SELECTION_TOOLS} options={SELECTION_TOOLS}
activeTool={activeTool} activeTool={activeTool}
@@ -210,7 +210,7 @@ export const MobileToolBar = ({
app.setActiveTool({ type: type as any }); app.setActiveTool({ type: type as any });
app.defaultSelectionTool = type as any; app.defaultSelectionTool = type as any;
}} }}
getDisplayedOption={() => displayedOption={
SELECTION_TOOLS.find( SELECTION_TOOLS.find(
(tool) => tool.type === app.defaultSelectionTool, (tool) => tool.type === app.defaultSelectionTool,
) || SELECTION_TOOLS[0] ) || SELECTION_TOOLS[0]
@@ -251,7 +251,7 @@ export const MobileToolBar = ({
/> />
{/* Rectangle */} {/* Rectangle */}
<ToolWithPopup <ToolPopover
app={app} app={app}
options={SHAPE_TOOLS} options={SHAPE_TOOLS}
activeTool={activeTool} activeTool={activeTool}
@@ -273,7 +273,7 @@ export const MobileToolBar = ({
setLastActiveGenericShape(type as any); setLastActiveGenericShape(type as any);
app.setActiveTool({ type: type as any }); app.setActiveTool({ type: type as any });
}} }}
getDisplayedOption={() => displayedOption={
SHAPE_TOOLS.find((tool) => tool.type === lastActiveGenericShape) || SHAPE_TOOLS.find((tool) => tool.type === lastActiveGenericShape) ||
SHAPE_TOOLS[0] SHAPE_TOOLS[0]
} }
@@ -281,7 +281,7 @@ export const MobileToolBar = ({
/> />
{/* Arrow/Line */} {/* Arrow/Line */}
<ToolWithPopup <ToolPopover
app={app} app={app}
options={LINEAR_ELEMENT_TOOLS} options={LINEAR_ELEMENT_TOOLS}
activeTool={activeTool} activeTool={activeTool}
@@ -300,7 +300,7 @@ export const MobileToolBar = ({
setLastActiveLinearElement(type as any); setLastActiveLinearElement(type as any);
app.setActiveTool({ type: type as any }); app.setActiveTool({ type: type as any });
}} }}
getDisplayedOption={() => displayedOption={
LINEAR_ELEMENT_TOOLS.find( LINEAR_ELEMENT_TOOLS.find(
(tool) => tool.type === lastActiveLinearElement, (tool) => tool.type === lastActiveLinearElement,
) || LINEAR_ELEMENT_TOOLS[0] ) || LINEAR_ELEMENT_TOOLS[0]

1
packages/excalidraw/types.ts
View File

@@ -738,6 +738,7 @@ export type AppClassProperties = {
onPointerUpEmitter: App["onPointerUpEmitter"]; onPointerUpEmitter: App["onPointerUpEmitter"];
updateEditorAtom: App["updateEditorAtom"]; updateEditorAtom: App["updateEditorAtom"];
onPointerDownEmitter: App["onPointerDownEmitter"];
defaultSelectionTool: "selection" | "lasso"; defaultSelectionTool: "selection" | "lasso";
}; };