diff --git a/packages/excalidraw/actions/actionDeleteSelected.tsx b/packages/excalidraw/actions/actionDeleteSelected.tsx index 374236578f..ae141a73a2 100644 --- a/packages/excalidraw/actions/actionDeleteSelected.tsx +++ b/packages/excalidraw/actions/actionDeleteSelected.tsx @@ -331,7 +331,8 @@ export const actionDeleteSelected = register({ !isSomeElementSelected(getNonDeletedElements(elements), appState) } style={{ - ...(appState.stylesPanelMode === "mobile" + ...(appState.stylesPanelMode === "mobile" && + appState.openPopup !== "compactOtherProperties" ? MOBILE_ACTION_BUTTON_BG : {}), }} diff --git a/packages/excalidraw/actions/actionDuplicateSelection.tsx b/packages/excalidraw/actions/actionDuplicateSelection.tsx index 4a84ccd76a..daf1dbb3c6 100644 --- a/packages/excalidraw/actions/actionDuplicateSelection.tsx +++ b/packages/excalidraw/actions/actionDuplicateSelection.tsx @@ -120,7 +120,8 @@ export const actionDuplicateSelection = register({ !isSomeElementSelected(getNonDeletedElements(elements), appState) } style={{ - ...(appState.stylesPanelMode === "mobile" + ...(appState.stylesPanelMode === "mobile" && + appState.openPopup !== "compactOtherProperties" ? MOBILE_ACTION_BUTTON_BG : {}), }} diff --git a/packages/excalidraw/components/Actions.scss b/packages/excalidraw/components/Actions.scss index 05c536bade..484afb6b65 100644 --- a/packages/excalidraw/components/Actions.scss +++ b/packages/excalidraw/components/Actions.scss @@ -192,6 +192,9 @@ background: transparent; border-radius: var(--border-radius-lg); box-shadow: none; + overflow: none; + scrollbar-width: none; + -ms-overflow-style: none; } .shape-actions-theme-scope { diff --git a/packages/excalidraw/components/Actions.tsx b/packages/excalidraw/components/Actions.tsx index 35bcb34b32..7a8cd608bd 100644 --- a/packages/excalidraw/components/Actions.tsx +++ b/packages/excalidraw/components/Actions.tsx @@ -328,14 +328,7 @@ const CombinedShapeProperties = ({ hasBackground(element.type) && !isTransparent(element.backgroundColor), ); - const shouldShowCombinedProperties = - showFillIcons || - hasStrokeWidth(appState.activeTool.type) || - targetElements.some((element) => hasStrokeWidth(element.type)) || - hasStrokeStyle(appState.activeTool.type) || - targetElements.some((element) => hasStrokeStyle(element.type)) || - canChangeRoundness(appState.activeTool.type) || - targetElements.some((element) => canChangeRoundness(element.type)); + const shouldShowCombinedProperties = targetElements.length > 0; const isOpen = appState.openPopup === "compactStrokeStyles"; @@ -606,7 +599,6 @@ const CombinedExtraActions = ({ setAppState, container, app, - showRedo, showDuplicate, showDelete, }: { @@ -616,7 +608,6 @@ const CombinedExtraActions = ({ setAppState: React.Component["setState"]; container: HTMLDivElement | null; app: AppClassProperties; - showRedo?: boolean; showDuplicate?: boolean; showDelete?: boolean; }) => { @@ -740,11 +731,10 @@ const CombinedExtraActions = ({
{renderAction("group")} {renderAction("ungroup")} - {showRedo && renderAction("redo")} - {showDuplicate && renderAction("duplicateSelection")} - {showDelete && renderAction("deleteSelectedElements")} {showLinkIcon && renderAction("hyperlink")} {showCropEditorAction && renderAction("cropEditor")} + {showDuplicate && renderAction("duplicateSelection")} + {showDelete && renderAction("deleteSelectedElements")}
@@ -907,19 +897,22 @@ export const MobileShapeActions = ({ const { container } = useExcalidrawContainer(); const mobileActionsRef = useRef(null); - const width = mobileActionsRef.current?.getBoundingClientRect()?.width ?? 0; + const ACTIONS_WIDTH = + mobileActionsRef.current?.getBoundingClientRect()?.width ?? 0; + + // 7 actions + 2 for undo/redo + const MIN_ACTIONS = 9; - const WIDTH = 36; const GAP = 6; + const WIDTH = 32; - // max 7 actions + undo - const MIN_WIDTH = 8 * WIDTH + 7 * GAP; + const MIN_WIDTH = MIN_ACTIONS * WIDTH + (MIN_ACTIONS - 1) * GAP; const ADDITIONAL_WIDTH = WIDTH + GAP; - const showRedoOutside = width >= MIN_WIDTH + 1 * ADDITIONAL_WIDTH; - const showDeleteOutside = width >= 2 * MIN_WIDTH; - const showDuplicateOutside = width >= MIN_WIDTH + 3 * ADDITIONAL_WIDTH; + const showDeleteOutside = ACTIONS_WIDTH >= MIN_WIDTH + ADDITIONAL_WIDTH; + const showDuplicateOutside = + ACTIONS_WIDTH >= MIN_WIDTH + 2 * ADDITIONAL_WIDTH; return ( @@ -1017,9 +1009,7 @@ export const MobileShapeActions = ({ }} >
{renderAction("undo")}
- {showRedoOutside && ( -
{renderAction("redo")}
- )} +
{renderAction("redo")}
{showDuplicateOutside && (
{renderAction("duplicateSelection")} diff --git a/packages/excalidraw/components/FontPicker/FontPickerTrigger.tsx b/packages/excalidraw/components/FontPicker/FontPickerTrigger.tsx index 43dcc37628..ede3a50e06 100644 --- a/packages/excalidraw/components/FontPicker/FontPickerTrigger.tsx +++ b/packages/excalidraw/components/FontPicker/FontPickerTrigger.tsx @@ -1,5 +1,7 @@ import * as Popover from "@radix-ui/react-popover"; +import { MOBILE_ACTION_BUTTON_BG } from "@excalidraw/common"; + import type { FontFamilyValues } from "@excalidraw/element/types"; import { t } from "../../i18n"; @@ -23,11 +25,9 @@ export const FontPickerTrigger = ({ const compactStyle = compactMode ? { - background: "rgba(255, 255, 255, 0.1)", - backdropFilter: "blur(20px)", - WebkitBackdropFilter: "blur(20px)", - width: "2.25rem", - height: "2.25rem", + ...MOBILE_ACTION_BUTTON_BG, + width: "2rem", + height: "2rem", } : {}; diff --git a/packages/excalidraw/components/MobileToolBar.scss b/packages/excalidraw/components/MobileToolBar.scss index efb32ff451..e0ae0a2683 100644 --- a/packages/excalidraw/components/MobileToolBar.scss +++ b/packages/excalidraw/components/MobileToolBar.scss @@ -6,7 +6,7 @@ display: flex; flex: 1; align-items: center; - padding: 4px; + padding: 0px; gap: 4px; border-radius: var(--space-factor); overflow-x: auto; diff --git a/packages/excalidraw/components/ToolPopover.tsx b/packages/excalidraw/components/ToolPopover.tsx index 25614ba7ce..c8c58b7330 100644 --- a/packages/excalidraw/components/ToolPopover.tsx +++ b/packages/excalidraw/components/ToolPopover.tsx @@ -50,6 +50,7 @@ export const ToolPopover = ({ }: ToolPopoverProps) => { const [isPopupOpen, setIsPopupOpen] = useState(false); const currentType = activeTool.type; + const SIDE_OFFSET = 32 / 2 + 10; // if currentType is not in options, close popup if (!options.some((o) => o.type === currentType) && isPopupOpen) { @@ -87,7 +88,10 @@ export const ToolPopover = ({ /> - + {options.map(({ type, icon, title }) => (