fix: iOS draw toolbar

ONLYOFFICE · Jan 13, 2025 · 4f61772 · 4f61772
1 parent 8b53709
commit 4f61772
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 11 deletions.
diff --git a/apps/common/mobile/lib/view/Draw.jsx b/apps/common/mobile/lib/view/Draw.jsx
@@ -17,7 +17,7 @@ export const DrawView = ({ currentTool, setTool, settings, setSettings, colors,
   return (
     <React.Fragment>
       <Sheet className='draw-sheet draw-sheet--color-picker' swipeToClose onSheetClosed={() => f7.sheet.open('.draw-sheet--settings')}>
-        <div className='draw-sheet-label'>{_t.textCustomColor}</div>
+        <div className='draw-sheet-label'><span>{_t.textCustomColor}</span></div>
         <WheelColorPicker
           initialColor={settings.color}
           onSelectColor={(color) => {
@@ -30,7 +30,7 @@ export const DrawView = ({ currentTool, setTool, settings, setSettings, colors,
         <div id='swipe-handler' className='swipe-container'>
           <Icon icon='icon icon-swipe'/>
         </div>
-        <div className='draw-sheet-label'>{_t.textColor}</div>
+        <div className='draw-sheet-label'><span>{_t.textColor}</span></div>
         <div className='draw-sheet--settings-colors'>
           <div className="draw-sheet--settings-colors-list">
             {colors.map((color, index) => (
@@ -50,7 +50,7 @@ export const DrawView = ({ currentTool, setTool, settings, setSettings, colors,
             </div>
           </div>
         </div>
-        <div className='draw-sheet-label'>{_t.textLineSize}</div>
+        <div className='draw-sheet-label'><span>{_t.textLineSize}</span></div>
         <div className='draw-sheet-item'>
           {Device.android ? (
             <Range
@@ -61,7 +61,7 @@ export const DrawView = ({ currentTool, setTool, settings, setSettings, colors,
             <input className='line-size-range--ios' type='range' min={0.5} max={10} step={0.5} value={settings.lineSize} onChange={(e) => setSettings({ lineSize: parseInt(e.target.value) })} />
           )}
         </div>
-        <div className='draw-sheet-label'>{_t.textOpacity}</div>
+        <div className='draw-sheet-label'><span>{_t.textOpacity}</span></div>
         <div className='draw-sheet-item'>
           <input style={{ '--color': settings.color }} className={Device.android ? 'opacity-range-input--android' : 'opacity-range-input--ios'} type='range' min={0} max={100} step={1} value={settings.opacity}
                  onChange={(e) => setSettings({ opacity: parseInt(e.target.value) })}/>

diff --git a/apps/common/mobile/resources/less/draw.less b/apps/common/mobile/resources/less/draw.less
@@ -31,6 +31,10 @@
             text-transform: uppercase;
             font-size: 13px;
             line-height: 18px;
+
+            span {
+                padding-bottom: 4px;
+            }
         }
     }
 
@@ -44,8 +48,7 @@
 
 .draw-sheet--settings {
     &-colors {
-        padding-inline: 16px;
-        min-height: 48px;
+        padding: 8px 16px;
 
         &-list {
             width: 100%;
@@ -65,7 +68,7 @@
                 align-items: center;
                 justify-content: center;
                 aspect-ratio: 1;
-                border: 1px solid @background-primary;
+                border: 2px solid @background-primary;
 
                 i {
                     background-color: @brandColor;
@@ -74,7 +77,7 @@
                 &:after {
                     content: '';
                     position: absolute;
-                    inset: -4px;
+                    inset: -5px;
                     background: linear-gradient(to right, #FF0000, #FF8A00, #FAFF01, #00FF1A, #00F0FF, #0029FF, #DB00FF);
                     z-index: -1;
                     border-radius: 4px;
@@ -85,9 +88,18 @@
 }
 
 #drawbar.navbar {
-    top: unset;
-    bottom: env(keyboard-inset-top);
-    height: calc(44px + var(--f7-safe-area-bottom));
+    --height: calc(44px + var(--f7-safe-area-bottom));
+    .device-android & {
+        top: unset;
+        bottom: env(keyboard-inset-top);
+    }
+
+    .device-ios & {
+        top: 100vh;
+        margin-top: calc(-1 * (var(--height) + env(keyboard-inset-top)));
+    }
+
+    height: var(--height);
     --f7-toolbar-border-color: @draw-toolbar-border;
     --f7-toolbar-bg-color: @draw-toolbar-background;