gilles/excalidraw
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: new mobile layout (#9996)

Browse Source 
* compact bottom toolbar

* put menu trigger to top left

* add popup to switch between grouped tool types

* add a dedicated mobile toolbar

* update position for mobile

* fix active tool type

* add mobile mode as well

* mobile actions

* remove refactored popups

* excali logo mobile

* include mobile

* update mobile menu layout

* move selection and deletion back to right

* do not fill eraser

* fix styling

* fix active styling

* bigger buttons, smaller gaps

* fix other tools not opened

* fix: Style panel persistence and restore

Signed-off-by: Mark Tolmacs <mark@lazycat.hu>

* move hidden action btns to extra popover

* fix dropdown overlapping with welcome screen

* replace custom popup with popover

* improve button styles

* swapping redo and delete

* always show undo & redo and improve styling

* change background

* toolbar styles

* no any

* persist perferred selection tool and align tablet as well

* add a renderTopLeftUI to props

* tweak border and bg

* show combined properties only when using suitable tools

* fix preferred tool

* new stroke icon

* hide color picker hot keys

* init preferred tool based on device

* fix main menu sizing

* fix welcome screen offset

* put text before image

* disable call highlight on buttons

* fix renderTopLeftUI

---------

Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
Co-authored-by: Mark Tolmacs <mark@lazycat.hu>
Co-authored-by: dwelle <5153846+dwelle@users.noreply.github.com>
This commit is contained in:
Ryan Di
2025-10-10 08:48:31 +11:00
committed by GitHub
parent 98e0cd9078
commit 416e8b3e42
47 changed files with 2407 additions and 678 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/excalidraw/css/styles.scss
+28 -18
View File
@@ -44,6 +44,11 @@ body.excalidraw-cursor-resize * {
height: 100%;
width: 100%;
button,
label {
@include buttonNoHighlight;
}
button {
cursor: pointer;
user-select: none;
@@ -235,27 +240,32 @@ body.excalidraw-cursor-resize * {
z-index: var(--zIndex-layerUI);
display: flex;
flex-direction: column;
align-items: center;
}
.App-welcome-screen {
z-index: var(--zIndex-layerUI);
}
.App-bottom-bar {
position: absolute;
top: 0;
// account for margins
width: calc(100% - 28px);
max-width: 450px;
bottom: 0;
left: 0;
right: 0;
left: 50%;
transform: translateX(-50%);
--bar-padding: calc(4 * var(--space-factor));
z-index: 4;
z-index: var(--zIndex-layerUI);
display: flex;
align-items: flex-end;
flex-direction: column;
pointer-events: none;
justify-content: center;
> .Island {
width: 100%;
max-width: 100%;
min-width: 100%;
box-sizing: border-box;
max-height: 100%;
padding: 4px;
display: flex;
flex-direction: column;
pointer-events: var(--ui-pointerEvents);
@@ -263,7 +273,8 @@ body.excalidraw-cursor-resize * {
}
.App-toolbar {
width: 100%;
display: flex;
justify-content: center;
.eraser {
&.ToolIcon:hover {
@@ -276,16 +287,15 @@ body.excalidraw-cursor-resize * {
}
}
.App-toolbar-content {
.excalidraw-ui-top-left {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px;
gap: 0.5rem;
}
.dropdown-menu--mobile {
bottom: 55px;
top: auto;
}
.App-toolbar-content {
display: flex;
flex-direction: column;
}
.App-mobile-menu {
@@ -506,7 +516,7 @@ body.excalidraw-cursor-resize * {
display: none;
}
.scroll-back-to-content {
bottom: calc(80px + var(--sab, 0));
bottom: calc(100px + var(--sab, 0));
z-index: -1;
}
}
packages/excalidraw/css/theme.scss
+9
View File
@@ -8,6 +8,8 @@
--button-gray-1: #{$oc-gray-2};
--button-gray-2: #{$oc-gray-4};
--button-gray-3: #{$oc-gray-5};
--mobile-action-button-bg: rgba(255, 255, 255, 0.35);
--mobile-color-border: var(--default-border-color);
--button-special-active-bg-color: #{$oc-green-0};
--dialog-border-color: var(--color-gray-20);
--dropdown-icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="292.4" height="292.4" viewBox="0 0 292 292"><path d="M287 197L159 69c-4-3-8-5-13-5s-9 2-13 5L5 197c-3 4-5 8-5 13s2 9 5 13c4 4 8 5 13 5h256c5 0 9-1 13-5s5-8 5-13-1-9-5-13z"/></svg>');
@@ -42,6 +44,11 @@
--lg-button-size: 2.25rem;
--lg-icon-size: 1rem;
--editor-container-padding: 1rem;
--mobile-action-button-size: 2rem;
@include isMobile {
--editor-container-padding: 0.75rem;
}
@media screen and (min-device-width: 1921px) {
--lg-button-size: 2.5rem;
@@ -177,6 +184,8 @@
--button-gray-1: #363636;
--button-gray-2: #272727;
--button-gray-3: #222;
--mobile-action-button-bg: var(--island-bg-color);
--mobile-color-border: rgba(255, 255, 255, 0.85);
--button-special-active-bg-color: #204624;
--dialog-border-color: var(--color-gray-80);
--dropdown-icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="292.4" height="292.4" viewBox="0 0 292 292"><path fill="%23ced4da" d="M287 197L159 69c-4-3-8-5-13-5s-9 2-13 5L5 197c-3 4-5 8-5 13s2 9 5 13c4 4 8 5 13 5h256c5 0 9-1 13-5s5-8 5-13-1-9-5-13z"/></svg>');
packages/excalidraw/css/variables.module.scss
+16
View File
@@ -122,6 +122,17 @@
color: var(--button-color, var(--color-on-primary-container));
}
}
@include isMobile() {
width: var(--mobile-action-button-size, var(--default-button-size));
height: var(--mobile-action-button-size, var(--default-button-size));
}
}
@mixin buttonNoHighlight {
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
user-select: none;
}
@mixin outlineButtonIconStyles {
@@ -187,4 +198,9 @@
&:active {
box-shadow: 0 0 0 1px var(--color-brand-active);
}
@include isMobile() {
width: var(--mobile-action-button-size, 2rem);
height: var(--mobile-action-button-size, 2rem);
}
}