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

fix: style and apply font size on modal close

Browse Source
This commit is contained in:
Dmitry-Ilyushechkin
2026-02-18 17:16:16 +03:00
parent 90066170a0
commit a86b5ad89b
12 changed files with 112 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
apps/common/mobile/resources/less/common-ios.less
View File

@ -712,6 +712,11 @@
}
}
.sheet-modal.edit-custom-font-size {
height: 70vh;
}
.list .item-link.size-label {
padding: 5px 10px;
border-radius: 8px !important;
@ -723,33 +728,6 @@
align-items: center;
}
.segmented.font-size-stepper {
.button {
border: none !important;
font-size: 24px;
color: @text-normal;
background-color: @background-tertiary;
}
.decrement.button {
border-radius: 8px 0 0 8px;
}
.increment.button {
border-radius: 0 8px 8px 0;
}
.button + .button::before {
content: "";
position: absolute;
left: 0;
top: 6px;
bottom: 6px;
width: 2px;
background-color: @background-menu-divider;
}
}
.page-custom-font-size .item-content.item-input {
.item-inner {
flex-direction: row;

4
apps/common/mobile/resources/less/common-material.less
View File

@ -781,6 +781,10 @@
}
}
.sheet-modal.edit-custom-font-size {
height: 70vh;
}
.list .item-link.size-label {
padding: 5px;
border-radius: 4px !important;

1
apps/documenteditor/mobile/src/less/icons-ios.less
View File

@ -11,7 +11,6 @@
}
.theme-type-dark {
.segmented.font-size-stepper .button,
.list .item-link.size-label {
color: @brand-word;
background-color: @background-menu-divider;

7
apps/documenteditor/mobile/src/view/edit/Edit.jsx
View File

@ -10,6 +10,7 @@ import { PageChartDesign, PageChartDesignType, PageChartDesignStyle, PageChartD
import { PageEditLeaderTableContents, PageEditStylesTableContents, PageEditStructureTableContents } from './EditTableContents';
import EditingPage from './EditingPage';
import { MainContext } from '../../page/main';
import { customFont } from './EditText';
const routes = [
{
@ -257,12 +258,14 @@ const EditView = () => {
return (
!Device.phone ?
<Popover id="edit-popover" className="popover__titled" closeByOutsideClick={false} onPopoverClosed={() => mainContext.closeOptions('edit')}>
<Popover id="edit-popover" className="popover__titled" closeByOutsideClick={false} onPopoverClosed={() => mainContext.closeOptions('edit')} onPopoverClose={() => {
if (customFont.current) customFont.current(); }}>
<View style={{ height: '410px' }} routes={routes} url='/editing-page/'>
<EditingPage />
</View>
</Popover> :
<Sheet id="edit-sheet" closeByOutsideClick={false} onSheetClosed={() => mainContext.closeOptions('edit')}>
<Sheet id="edit-sheet" closeByOutsideClick={false} onSheetClosed={() => mainContext.closeOptions('edit')} onSheetClose={() => {
if (customFont.current) customFont.current(); }}>
<View routes={routes} url='/editing-page/'>
<EditingPage />
</View>

38
apps/documenteditor/mobile/src/view/edit/EditText.jsx
View File

@ -1,4 +1,4 @@
import React, {Fragment, useEffect, useState, useRef, useMemo} from 'react';
import React, {Fragment, useEffect, useState, useRef, useMemo, useCallback} from 'react';
import {observer, inject} from "mobx-react";
import { f7, View, List, ListItem, Icon, Button, Page, Navbar, NavRight, Segmented, BlockTitle, Link, ListInput, Range } from 'framework7-react';
import { useTranslation } from 'react-i18next';
@ -125,7 +125,7 @@ const PageFonts = props => {
</Link>
</div>}
<div slot='after'>
<Segmented className="font-size-stepper">
<Segmented>
<Button outline className='decrement item-link' onClick={() => {props.changeFontSize(size, true)}}>
{isAndroid ?
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
@ -209,31 +209,36 @@ const PageCustomFontSize = (props) => {
const valueRef = useRef(value);
useEffect(() => { valueRef.current = value; }, [value]);
const apply = (size) => {
const apply = useCallback(() => {
const size = valueRef.current;
if (size === '') return;
if (String(size) === String(displaySize)) return;
props.applyFontSize(size);
};
}, [displaySize, props.applyFontSize]);
const toggleCustomClass = (on) => {
const modalId = Device.phone ? '#edit-sheet' : '#edit-popover';
const modalEl = document.querySelector(modalId);
if (!modalEl) return;
modalEl.classList.toggle('edit-custom-font-size', on);
const el = document.querySelector(Device.phone ? '#edit-sheet' : '#edit-popover');
if (el) el.classList.toggle('edit-custom-font-size', on);
};
const focusInput = () => {
const el = document.querySelector('.page-custom-font-size input');
if (!el) return;
el.focus();
if (el) el.focus();
};
useEffect(() => {
customFont.current = apply;
return () => {
if (customFont.current === apply) customFont.current = null;
};
}, [apply]);
return (
<Page className="page-custom-font-size" onPageBeforeIn={() => toggleCustomClass(true)} onPageAfterIn={focusInput} onPageBeforeOut={() => { toggleCustomClass(false); apply(valueRef.current);}}>
<Page className="page-custom-font-size" onPageBeforeIn={() => toggleCustomClass(true)} onPageAfterIn={focusInput} onPageBeforeOut={() => { toggleCustomClass(false); apply();}}>
<Navbar title={t('Edit.txtCustom')} backLink="Back">
{Device.phone &&
<NavRight>
<Link sheetClose="#edit-sheet">
<Link sheetClose="#edit-sheet" onClick={apply}>
{Device.ios ?
<SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg white'} />
@ -243,10 +248,7 @@ const PageCustomFontSize = (props) => {
}
</Navbar>
<List className="input-list">
<ListInput label={t('Edit.textSize')} type="number" inputmode="numeric" min={1} max={300}value={value}
onChange={(e) => setValue(e.target.value)}
onBlur={(e) => apply(e.target.value)}
/>
<ListInput label={t('Edit.textSize')} type="number" inputmode="numeric" min={1} max={300} value={value} onChange={(e) => setValue(e.target.value)} />
</List>
</Page>
);
@ -974,6 +976,7 @@ const EditText = props => {
)
};
const customFont = { current: null };
const EditTextContainer = inject("storeTextSettings", "storeFocusObjects")(observer(EditText));
const PageTextFonts = inject("storeTextSettings", "storeFocusObjects")(observer(PageFonts));
const PageTextAddFormatting = inject("storeTextSettings", "storeFocusObjects")(observer(PageAdditionalFormatting));
@ -1000,5 +1003,6 @@ export {
PageOrientationTextShape,
PageOrientationTextTable,
// PageTextCustomBackColor,
PageTextDirection
PageTextDirection,
customFont
};

1
apps/presentationeditor/mobile/src/less/icons-ios.less
View File

@ -8,7 +8,6 @@
}
.theme-type-dark {
.segmented.font-size-stepper .button,
.list .item-link.size-label {
color: @brand-slide;
background-color: @background-menu-divider;

7
apps/presentationeditor/mobile/src/view/edit/Edit.jsx
View File

@ -10,6 +10,7 @@ import { PageTableStyle, PageTableStyleOptions, PageTableCustomFillColor, PageTa
import { PageChartDesign, PageChartDesignType, PageChartDesignStyle, PageChartDesignFill, PageChartDesignBorder, PageChartCustomFillColor, PageChartBorderColor, PageChartCustomBorderColor, PageChartReorder, PageChartAlign } from './EditChart'
import EditingPage from './EditingPage';
import { MainContext } from '../../page/main';
import { customFont } from './EditText';
const routes = [
{
@ -259,12 +260,14 @@ const EditView = () => {
return (
!Device.phone ?
<Popover id="edit-popover" className="popover__titled" closeByOutsideClick={false} onPopoverClosed={() => mainContext.closeOptions('edit')}>
<Popover id="edit-popover" className="popover__titled" closeByOutsideClick={false} onPopoverClosed={() => mainContext.closeOptions('edit')} onPopoverClose={() => {
if (customFont.current) customFont.current(); }}>
<View style={{ height: '410px' }} routes={routes} url='/editing-page/'>
<EditingPage />
</View>
</Popover> :
<Sheet id="edit-sheet" onSheetClosed={() => mainContext.closeOptions('edit')}>
<Sheet id="edit-sheet" onSheetClosed={() => mainContext.closeOptions('edit')} onSheetClose={() => {
if (customFont.current) customFont.current(); }}>
<View routes={routes} url='/editing-page/'>
<EditingPage />
</View>

36
apps/presentationeditor/mobile/src/view/edit/EditText.jsx
View File

@ -1,4 +1,4 @@
import React, {Fragment, useState, useEffect, useRef, useMemo} from 'react';
import React, {Fragment, useState, useEffect, useRef, useMemo, useCallback} from 'react';
import {observer, inject} from "mobx-react";
import {f7, View, List, ListItem, ListButton, ListInput, Icon, Button, Page, Navbar, Segmented, BlockTitle, NavRight, Link, Range} from 'framework7-react';
import { useTranslation } from 'react-i18next';
@ -499,7 +499,7 @@ const PageFonts = props => {
</Link>
</div>}
<div slot='after'>
<Segmented className="font-size-stepper">
<Segmented>
<Button outline className='decrement item-link' onClick={() => {props.changeFontSize(size, true)}}>
{isAndroid ?
<SvgIcon symbolId={IconExpandDownAndroid.id} className='icon icon-svg' />
@ -584,31 +584,36 @@ const PageCustomFontSize = (props) => {
const valueRef = useRef(value);
useEffect(() => { valueRef.current = value; }, [value]);
const apply = (size) => {
const apply = useCallback(() => {
const size = valueRef.current;
if (size === '') return;
if (String(size) === String(displaySize)) return;
props.applyFontSize(size);
};
}, [displaySize, props.applyFontSize]);
const toggleCustomClass = (on) => {
const modalId = Device.phone ? '#edit-sheet' : '#edit-popover';
const modalEl = document.querySelector(modalId);
if (!modalEl) return;
modalEl.classList.toggle('edit-custom-font-size', on);
const el = document.querySelector(Device.phone ? '#edit-sheet' : '#edit-popover');
if (el) el.classList.toggle('edit-custom-font-size', on);
};
const focusInput = () => {
const el = document.querySelector('.page-custom-font-size input');
if (!el) return;
el.focus();
if (el) el.focus();
};
useEffect(() => {
customFont.current = apply;
return () => {
if (customFont.current === apply) customFont.current = null;
};
}, [apply]);
return (
<Page className="page-custom-font-size" onPageBeforeIn={() => toggleCustomClass(true)} onPageAfterIn={focusInput} onPageBeforeOut={() => { toggleCustomClass(false); apply(valueRef.current);}}>
<Page className="page-custom-font-size" onPageBeforeIn={() => toggleCustomClass(true)} onPageAfterIn={focusInput} onPageBeforeOut={() => { toggleCustomClass(false); apply();}}>
<Navbar title={_t.txtCustom} backLink="Back">
{Device.phone &&
<NavRight>
<Link sheetClose="#edit-sheet">
<Link sheetClose="#edit-sheet" onClick={apply}>
{Device.ios ?
<SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg white'} />
@ -618,9 +623,8 @@ const PageCustomFontSize = (props) => {
}
</Navbar>
<List className="input-list">
<ListInput label={_t.textSize} type="number" inputmode="numeric" min={1} max={300}value={value}
<ListInput label={_t.textSize} type="number" inputmode="numeric" min={1} max={300} value={value}
onChange={(e) => setValue(e.target.value)}
onBlur={(e) => apply(e.target.value)}
/>
</List>
</Page>
@ -1130,6 +1134,7 @@ const PageTextDirection = inject("storeTextSettings", "storeFocusObjects")(obser
const PageTextLineSpacing = inject("storeTextSettings", "storeFocusObjects")(observer(PageLineSpacing));
const PageTextBulletsLinkSettings = inject("storeTextSettings", "storeFocusObjects")(observer(PageBulletLinkSettings));
const PageTextCustomFontSize = inject('storeTextSettings')(observer(PageCustomFontSize));
const customFont = { current: null };
export {
EditTextContainer as EditText,
@ -1144,5 +1149,6 @@ export {
PageTextLineSpacing,
PageTextBulletsLinkSettings,
PageOrientationTextShape,
PageOrientationTextTable
PageOrientationTextTable,
customFont
};

1
apps/spreadsheeteditor/mobile/src/less/icons-ios.less
View File

@ -14,7 +14,6 @@
}
.theme-type-dark {
.segmented.font-size-stepper .button,
.list .item-link.size-label {
color: @brand-cell;
background-color: @background-menu-divider;

7
apps/spreadsheeteditor/mobile/src/view/edit/Edit.jsx
View File

@ -11,6 +11,7 @@ import { PageChartDesign, PageChartDesignType, PageChartDesignStyle, PageChartD
import { PageEditTypeLink, PageEditSheet } from './EditLink';
import EditingPage from './EditingPage';
import { MainContext } from '../../page/main';
import { customFont } from './EditText';
const routes = [
{
@ -339,12 +340,14 @@ const EditView = () => {
return (
!Device.phone ?
<Popover id="edit-popover" className="popover__titled" closeByOutsideClick={false} onPopoverClosed={() => mainContext.closeOptions('edit')}>
<Popover id="edit-popover" className="popover__titled" closeByOutsideClick={false} onPopoverClosed={() => mainContext.closeOptions('edit')} onPopoverClose={() => {
if (customFont.current) customFont.current(); }}>
<View style={{ height: '410px' }} routes={routes} url='/editing-page/'>
<EditingPage />
</View>
</Popover> :
<Sheet id="edit-sheet" onSheetClosed={() => mainContext.closeOptions('edit')}>
<Sheet id="edit-sheet" onSheetClosed={() => mainContext.closeOptions('edit')} onSheetClose={() => {
if (customFont.current) customFont.current(); }}>
<View routes={routes} url='/editing-page/'>
<EditingPage />
</View>

41
apps/spreadsheeteditor/mobile/src/view/edit/EditCell.jsx
View File

@ -1,4 +1,4 @@
import React, {Fragment, useState, useEffect, useMemo, useRef} from 'react';
import React, {Fragment, useState, useEffect, useMemo, useRef, useCallback} from 'react';
import {observer, inject} from "mobx-react";
import {f7, List, ListItem, Icon, Button, Page, Navbar, Segmented, BlockTitle, NavRight, Link, Toggle, ListInput, Block, Range} from 'framework7-react';
import { useTranslation } from 'react-i18next';
@ -340,7 +340,7 @@ const PageFontsCell = props => {
</Link>
</div>}
<div slot='after'>
<Segmented className="font-size-stepper">
<Segmented>
<Button outline className='decrement item-link' onClick={() => {props.onFontSize(size, true)}}>
{isAndroid ?
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
@ -425,31 +425,36 @@ const PageCustomFontSize = (props) => {
const valueRef = useRef(value);
useEffect(() => { valueRef.current = value; }, [value]);
const apply = (size) => {
const apply = useCallback(() => {
const size = valueRef.current;
if (size === '') return;
if (String(size) === String(displaySize)) return;
props.applyFontSize(size);
};
}, [displaySize, props.applyFontSize]);
const toggleCustomClass = (on) => {
const modalId = Device.phone ? '#edit-sheet' : '#edit-popover';
const modalEl = document.querySelector(modalId);
if (!modalEl) return;
modalEl.classList.toggle('edit-custom-font-size', on);
const el = document.querySelector(Device.phone ? '#edit-sheet' : '#edit-popover');
if (el) el.classList.toggle('edit-custom-font-size', on);
};
const focusInput = () => {
const el = document.querySelector('.page-custom-font-size input');
if (!el) return;
el.focus();
if (el) el.focus();
};
return (
<Page className="page-custom-font-size" onPageBeforeIn={() => toggleCustomClass(true)} onPageAfterIn={focusInput} onPageBeforeOut={() => { toggleCustomClass(false); apply(valueRef.current);}}>
useEffect(() => {
customFont.current = apply;
return () => {
if (customFont.current === apply) customFont.current = null;
};
}, [apply]);
return (
<Page className="page-custom-font-size" onPageBeforeIn={() => toggleCustomClass(true)} onPageAfterIn={focusInput} onPageBeforeOut={() => { toggleCustomClass(false); apply();}}>
<Navbar title={_t.txtCustom} backLink="Back">
{Device.phone &&
<NavRight>
<Link sheetClose="#edit-sheet">
<Link sheetClose="#edit-sheet" onClick={apply}>
{Device.ios ?
<SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg white'} />
@ -459,9 +464,8 @@ const PageCustomFontSize = (props) => {
}
</Navbar>
<List className="input-list">
<ListInput label={_t.textSize} type="number" inputmode="numeric" min={1} max={300}value={value}
<ListInput label={_t.textSize} type="number" inputmode="numeric" min={1} max={300} value={value}
onChange={(e) => setValue(e.target.value)}
onBlur={(e) => apply(e.target.value)}
/>
</List>
</Page>
@ -1456,7 +1460,7 @@ const PageCellDirection = props => {
)
}
const customFont = { current: null };
const PageEditCell = inject("storeCellSettings", "storeWorksheets")(observer(EditCell));
const TextColorCell = inject("storeCellSettings", "storePalette", "storeFocusObjects")(observer(PageTextColorCell));
const FillColorCell = inject("storeCellSettings", "storePalette", "storeFocusObjects")(observer(PageFillColorCell));
@ -1496,5 +1500,6 @@ export {
CellStyle,
CustomFormats,
PageCreationCustomFormat,
PageCellTextDirection
PageCellTextDirection,
customFont
};

40
apps/spreadsheeteditor/mobile/src/view/edit/EditText.jsx
View File

@ -1,4 +1,4 @@
import React, {Fragment, useState, useRef, useMemo, useEffect} from 'react';
import React, {Fragment, useState, useRef, useMemo, useEffect, useCallback} from 'react';
import {observer, inject} from "mobx-react";
import {List, ListItem, Icon, Button, Page, Navbar, NavRight, Segmented, BlockTitle, Link, ListInput, Range} from 'framework7-react';
import { useTranslation } from 'react-i18next';
@ -296,7 +296,7 @@ const PageFonts = props => {
</Link>
</div>}
<div slot='after'>
<Segmented className="font-size-stepper">
<Segmented>
<Button outline className='decrement item-link' onClick={() => {props.changeFontSize(size, true)}}>
{isAndroid ?
<SvgIcon symbolId={IconExpandDownAndroid.id} className='icon icon-svg' />
@ -381,31 +381,36 @@ const PageCustomFontSize = (props) => {
const valueRef = useRef(value);
useEffect(() => { valueRef.current = value; }, [value]);
const apply = (size) => {
const apply = useCallback(() => {
const size = valueRef.current;
if (size === '') return;
if (String(size) === String(displaySize)) return;
props.applyFontSize(size);
};
}, [displaySize, props.applyFontSize]);
const toggleCustomClass = (on) => {
const modalId = Device.phone ? '#edit-sheet' : '#edit-popover';
const modalEl = document.querySelector(modalId);
if (!modalEl) return;
modalEl.classList.toggle('edit-custom-font-size', on);
const el = document.querySelector(Device.phone ? '#edit-sheet' : '#edit-popover');
if (el) el.classList.toggle('edit-custom-font-size', on);
};
const focusInput = () => {
const el = document.querySelector('.page-custom-font-size input');
if (!el) return;
el.focus();
if (el) el.focus();
};
return (
<Page className="page-custom-font-size" onPageBeforeIn={() => toggleCustomClass(true)} onPageAfterIn={focusInput} onPageBeforeOut={() => { toggleCustomClass(false); apply(valueRef.current);}}>
useEffect(() => {
customFont.current = apply;
return () => {
if (customFont.current === apply) customFont.current = null;
};
}, [apply]);
return (
<Page className="page-custom-font-size" onPageBeforeIn={() => toggleCustomClass(true)} onPageAfterIn={focusInput} onPageBeforeOut={() => { toggleCustomClass(false); apply();}}>
<Navbar title={_t.txtCustom} backLink="Back">
{Device.phone &&
<NavRight>
<Link sheetClose="#edit-sheet">
<Link sheetClose="#edit-sheet" onClick={apply}>
{Device.ios ?
<SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg white'} />
@ -415,9 +420,8 @@ const PageCustomFontSize = (props) => {
}
</Navbar>
<List className="input-list">
<ListInput label={_t.textSize} type="number" inputmode="numeric" min={1} max={300}value={value}
<ListInput label={_t.textSize} type="number" inputmode="numeric" min={1} max={300} value={value}
onChange={(e) => setValue(e.target.value)}
onBlur={(e) => apply(e.target.value)}
/>
</List>
</Page>
@ -636,6 +640,7 @@ const PageTextCustomFontColor = inject("storeTextSettings", "storePalette")(obse
const PageTextAdditionalFormatting = inject("storeTextSettings", "storeFocusObjects")(observer(PageAdditionalFormatting));
const PageTextDirection = inject("storeTextSettings")(observer(PageDirection));
const PageTextCustomFontSize = inject('storeTextSettings')(observer(PageCustomFontSize))
const customFont = { current: null };
export {
EditTextContainer as EditText,
@ -645,5 +650,6 @@ export {
PageTextCustomFontColor,
PageOrientationTextShape,
PageTextAdditionalFormatting,
PageTextDirection
PageTextDirection,
customFont
};