pengjunjie/web-apps
1
0
Fork 1
mirror of https://github.com/ONLYOFFICE/web-apps.git synced 2026-07-24 03:19:32 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: custom range inputs

Browse Source
This commit is contained in:
Konstantin Kireyev
2025-01-13 04:02:16 +05:00
parent aa4da0234e
commit 54d57d5edf
6 changed files with 80 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/common/mobile/lib/controller/Draw.jsx
View File

@ -53,7 +53,7 @@ export const DrawController = inject('storeAppOptions')(observer(({ storeAppOpti
pen: (api, settings) => api.asc_StartDrawInk(createStroke(settings.color, settings.lineSize, settings.opacity), 0),
highlighter: (api, settings) => api.asc_StartDrawInk(createStroke(settings.color, settings.lineSize, 50), 1),
eraser: (api) => api.asc_StartInkEraser(),
eraseEntireScreen: (api) => {/* method */
eraseEntireScreen: (api) => {/* fixme: method */
},
scroll: (api) => api.asc_StopInkDrawer(),
};

20
apps/common/mobile/lib/view/Draw.jsx
View File

@ -8,6 +8,7 @@ import IconClearAll from '../../../../common/mobile/resources/icons/clear-all.sv
import IconClearObject from '../../../../common/mobile/resources/icons/clear-object.svg'
import IconScroll from '../../../../common/mobile/resources/icons/scroll.svg'
import { WheelColorPicker } from "../component/WheelColorPicker";
import { Device } from "../../utils/device";
export const DrawView = ({ currentTool, setTool, settings, setSettings, colors, addCustomColor }) => {
const { t } = useTranslation();
@ -51,18 +52,19 @@ export const DrawView = ({ currentTool, setTool, settings, setSettings, colors,
</div>
<div className='draw-sheet-label'>{_t.textLineSize}</div>
<div className='draw-sheet-item'>
<Range
min={0.5} max={10} step={0.5} value={settings.lineSize}
onRangeChange={(value) => setSettings({ lineSize: value })}
/>
{Device.android ? (
<Range
min={0.5} max={10} step={0.5} value={settings.lineSize}
onRangeChange={(value) => setSettings({ lineSize: value })}
/>
) : (
<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-item'>
<Range
min={0} max={100} step={1} value={settings.opacity}
onRangeChange={(value) => setSettings({ opacity: value })}
disabled={currentTool === 'highlighter'}
/>
<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) })}/>
</div>
</Sheet>
<div className="draw-toolbar">

74
apps/common/mobile/resources/less/common.less
View File

@ -70,7 +70,7 @@
.subnavbar {
.subnavbar-inner {
padding: 0;
.title {
white-space: nowrap;
overflow: hidden;
@ -202,13 +202,13 @@
html.pixel-ratio-3 & {
border: 0.33px solid @gray;
}
.thumb {
width: 100%;
height: 100%;
background-color: @fill-white;
background-size: cover;
label {
width: 100%;
text-align: center;
@ -225,7 +225,7 @@
}
}
}
.row.list .item-content {
padding-left: 0;
padding-right: 0;
@ -424,7 +424,7 @@
.style-effect, .style-type {
.list .item-title {
font-weight: normal;
font-weight: normal;
}
}
@ -451,7 +451,7 @@
cursor: pointer;
box-shadow: 0 2px 4px rgba(0, 0, 0, .3);
}
&::-ms-thumb {
&::-ms-thumb {
appearance: none;
height: 28px;
width: 28px;
@ -533,7 +533,7 @@
background-size: 100% 100%;
.encoded-svg-background("<svg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' viewBox='0 0 22 22' xml:space='preserve'><line stroke='#ff0000' stroke-linecap='undefined' stroke-linejoin='undefined' id='svg_1' y2='0' x2='22' y1='22' x1='0' stroke-width='2' fill='none'/></svg>");
}
}
}
}
}
}
@ -558,6 +558,56 @@
}
}
.line-size-range--ios {
appearance: none;
width: 100%;
height: 24px;
background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzQzIiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMzQzIDI0IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNMCAxMkMwIDEwLjg4NjEgMC44ODU3NSA5Ljk3NDE4IDEuOTk5MTUgOS45NDE3MkwzMzEuMDA1IDAuMzQ5NzA2QzMzNy41NzIgMC4xNTgyNCAzNDMgNS40Mjk5MiAzNDMgMTJDMzQzIDE4LjU3MDEgMzM3LjU3MiAyMy44NDE4IDMzMS4wMDUgMjMuNjUwM0wxLjk5OTE1IDE0LjA1ODNDMC44ODU3NTQgMTQuMDI1OCAwIDEzLjExMzkgMCAxMloiIGZpbGw9IiNBRUFFQjIiLz4KPC9zdmc+Cg==);
background-size: 100% 24px;
background-repeat: no-repeat;
}
.opacity-range-input--ios {
appearance: none;
width: 100%;
height: 24px;
border-radius: 30px;
background: linear-gradient(90deg, transparent, var(--color)),
linear-gradient(#9797971A, #9797971A),
url(data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAA40lEQVR4Xu3bQQ6EQAhEUbj/oXsO8Sdh4XOvJAi/qkF3Zt6E6710++xuiD6T40uACtACqYlzD2IACFKBkoHcgmSQDJJBMngKIT6ADygF6DSYfcCLTzg/z0eGrASogDbT0gKxB2MB5pkiBoBgrEEMwIBjLx9fAAiCIAhygmkkRgYjhWMHditsL2AvYC+QIHjdwzk+BmAABmBAWc1kCF0bKRAEQRAEQRAMGaACbaCUz/P5BRiKxhQaiV07uRjfYgQDMKDpGAhGCMUCzD4CBEEw1iAGYIBPZMJh+g8/P8cKpAJfV4EfMee/sLtaEFIAAAAASUVORK5CYII=);
background-size: 100%, 100%, 32px;
}
.opacity-range-input--ios::-webkit-slider-thumb, .line-size-range--ios::-webkit-slider-thumb {
appearance: none;
width: 28px;
height: 28px;
border: 0.5px solid rgba(116, 116, 128, 0.08);
border-radius: 50%;
background: #fff;
box-shadow: 0 3px 1px 0 rgba(0, 0, 0, 0.03),
0 1px 1px 0 rgba(0, 0, 0, 0.01),
0 3px 8px 0 rgba(0, 0, 0, 0.1);
}
.opacity-range-input--android {
appearance: none;
width: 100%;
height: 16px;
border-radius: 8px;
box-shadow: 0 0 0 0.5px #0000001F;
background: linear-gradient(90deg, #C4C4C4, var(--color));
}
.opacity-range-input--android::-webkit-slider-thumb {
appearance: none;
width: 20px;
height: 20px;
border-radius: 50%;
background: #fff;
box-shadow: 0 1px 3px 0 #00000033, 0 2px 2px 0 #0000001F, 0 0 2px 0 #00000024;
}
#color-picker {
display: flex;
justify-content: space-around;
@ -878,7 +928,7 @@ input[type="number"]::-webkit-inner-spin-button {
.content-block {
padding: 0;
}
.picker-3d {
.picker-3d {
.picker-item {
padding: 0;
text-align: left;
@ -1064,11 +1114,11 @@ input[type="number"]::-webkit-inner-spin-button {
}
.target-function-list {
position: absolute;
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 0;
width: 0;
height: 100%;
}
@ -1168,7 +1218,7 @@ input[type="number"]::-webkit-inner-spin-button {
}
}
.list input[type='password'],
.list input[type='password'],
.list input[type='text'] {
background: transparent;
}
@ -1193,7 +1243,7 @@ input[type="number"]::-webkit-inner-spin-button {
}
// Version History
.version-history {
.version-history {
&__user {
width: 40px;
height: 40px;

12
apps/common/mobile/resources/less/draw.less
View File

@ -65,6 +65,7 @@
align-items: center;
justify-content: center;
aspect-ratio: 1;
border: 1px solid @background-primary;
i {
background-color: @brandColor;
@ -73,7 +74,7 @@
&:after {
content: '';
position: absolute;
inset: -3px;
inset: -4px;
background: linear-gradient(to right, #FF0000, #FF8A00, #FAFF01, #00FF1A, #00F0FF, #0029FF, #DB00FF);
z-index: -1;
border-radius: 4px;
@ -87,11 +88,8 @@
top: unset;
bottom: env(keyboard-inset-top);
height: calc(44px + var(--f7-safe-area-bottom));
.navbar-inner {
border-top: 1px solid @draw-toolbar-border;
background-color: @draw-toolbar-background;
}
--f7-toolbar-border-color: @draw-toolbar-border;
--f7-toolbar-bg-color: @draw-toolbar-background;
.draw-toolbar {
padding-inline: 10px;
@ -104,8 +102,10 @@
display: flex;
padding: 0;
width: 36px;
height: 36px;
min-width: 36px;
border-radius: 7px;
border: none;
&.button-fill {
color: @brandColor;

2
apps/documenteditor/mobile/src/store/mainStore.js
View File

@ -12,7 +12,6 @@ import {storeDocumentInfo} from "./documentInfo";
import {storeLinkSettings} from './linkSettings';
import {storeApplicationSettings} from './applicationSettings';
import {storeAppOptions} from "./appOptions";
import {storePalette} from "./palette";
import {storeReview} from '../../../../common/mobile/lib/store/review';
import {storeComments} from "../../../../common/mobile/lib/store/comments";
import {storeToolbarSettings} from "./toolbar";
@ -34,7 +33,6 @@ export const stores = {
storeTableSettings: new storeTableSettings(),
storeDocumentInfo: new storeDocumentInfo(),
storeApplicationSettings: new storeApplicationSettings(),
storePalette: new storePalette(),
storeReview: new storeReview(),
storeComments: new storeComments(),
storeToolbarSettings: new storeToolbarSettings(),

15
apps/documenteditor/mobile/src/store/palette.js
View File

@ -1,15 +0,0 @@
import {action, observable, makeObservable} from 'mobx';
export class storePalette {
constructor() {
makeObservable(this, {
customColors: observable,
changeCustomColors: action,
});
}
customColors = [];
changeCustomColors (colors) {
this.customColors = colors;
}
}