From 0a36021498362784d846600c2d765a82dcf33a07 Mon Sep 17 00:00:00 2001 From: SergeyEzhin Date: Fri, 26 Feb 2021 21:06:07 +0300 Subject: [PATCH 01/13] [PE mobile] Corrected Link Settings and Presentation Settings --- .../mobile/src/controller/edit/EditLink.jsx | 68 ++++++++++- .../settings/PresentationSettings.jsx | 11 +- .../mobile/src/store/linkSettings.js | 64 ---------- .../mobile/src/store/presentationSettings.js | 20 ++-- .../mobile/src/view/edit/EditLink.jsx | 111 +++++++++--------- .../view/settings/PresentationSettings.jsx | 12 +- 6 files changed, 147 insertions(+), 139 deletions(-) diff --git a/apps/presentationeditor/mobile/src/controller/edit/EditLink.jsx b/apps/presentationeditor/mobile/src/controller/edit/EditLink.jsx index 953e0f2f4..6139aca40 100644 --- a/apps/presentationeditor/mobile/src/controller/edit/EditLink.jsx +++ b/apps/presentationeditor/mobile/src/controller/edit/EditLink.jsx @@ -9,8 +9,14 @@ import { EditLink } from '../../view/edit/EditLink'; class EditLinkController extends Component { constructor (props) { super(props); + + const api = Common.EditorApi.get(); + this.onEditLink = this.onEditLink.bind(this); this.onRemoveLink = this.onRemoveLink.bind(this); + this.initLink = this.initLink.bind(this); + this.slidesCount = api.getCountPages(); + this.initLink(); } closeModal () { @@ -21,6 +27,58 @@ class EditLinkController extends Component { } } + initLink() { + const api = Common.EditorApi.get(); + const linkObject = this.props.storeFocusObjects.linkObject; + const url = linkObject.get_Value(); + const tooltip = linkObject.get_ToolTip(); + const display = linkObject.get_Text(); + + this.url = url; + this.tooltip = tooltip; + this.display = display; + this.slideLink = 0; + this.slideNum = 0; + + let indAction; + let slidesCount; + let slideNum; + + if(url === null || url === undefined || url === '') { + this.typeLink = 1; + } + else { + indAction = url.indexOf("ppaction://hlink"); + if(0 == indAction) { + if (url == "ppaction://hlinkshowjump?jump=firstslide") { + this.slideLink = 2; + } else if (url == "ppaction://hlinkshowjump?jump=lastslide") { + this.slideLink = 3; + } + else if (url == "ppaction://hlinkshowjump?jump=nextslide") { + this.slideLink = 0; + } + else if (url == "ppaction://hlinkshowjump?jump=previousslide") { + this.slideLink = 1; + } + else { + this.slideLink = 4; + slidesCount = api.getCountPages(); + let mask = "ppaction://hlinksldjumpslide", + indSlide = url.indexOf(mask); + if (0 == indSlide) { + slideNum = parseInt(url.substring(mask.length)); + if (slideNum < 0) this.slideNum = 0; + if (slideNum >= slidesCount) this.slideNum = slidesCount - 1; + } else this.slideNum = 0; + } + this.typeLink = 0 + } else { + this.typeLink = 1; + } + } + } + onEditLink(type, linkInfo) { const api = Common.EditorApi.get(); const { t } = this.props; @@ -102,13 +160,21 @@ class EditLinkController extends Component { render () { return ( ) } } -const EditLinkWithTranslation = withTranslation()(EditLinkController); +const EditLinkWithTranslation = inject("storeFocusObjects")(observer(withTranslation()(EditLinkController))); export {EditLinkWithTranslation as EditLinkController}; \ No newline at end of file diff --git a/apps/presentationeditor/mobile/src/controller/settings/PresentationSettings.jsx b/apps/presentationeditor/mobile/src/controller/settings/PresentationSettings.jsx index 1a1099035..184fec041 100644 --- a/apps/presentationeditor/mobile/src/controller/settings/PresentationSettings.jsx +++ b/apps/presentationeditor/mobile/src/controller/settings/PresentationSettings.jsx @@ -6,6 +6,7 @@ class PresentationSettingsController extends Component { constructor(props) { super(props); this.initSlideSize = this.initSlideSize.bind(this); + this.onSlideSize = this.onSlideSize.bind(this); } initSlideSize() { @@ -18,7 +19,15 @@ class PresentationSettingsController extends Component { onSlideSize(slideSizeArr) { const api = Common.EditorApi.get(); - api.changeSlideSize(slideSizeArr[0], slideSizeArr[1]); + + let ratio = slideSizeArr[1] / slideSizeArr[0]; + let currentHeight = this.props.storePresentationSettings.currentPageSize.height; + let currentPageSize = { + width: (currentHeight || slideSizeArr[1]) / ratio, + height: currentHeight + }; + // api.changeSlideSize(slideSizeArr[0], slideSizeArr[1], slideSizeArr[2]); + api.changeSlideSize(currentPageSize.width, currentPageSize.height, slideSizeArr[2]); } // Color Schemes diff --git a/apps/presentationeditor/mobile/src/store/linkSettings.js b/apps/presentationeditor/mobile/src/store/linkSettings.js index a6d935ad7..2eabdba1e 100644 --- a/apps/presentationeditor/mobile/src/store/linkSettings.js +++ b/apps/presentationeditor/mobile/src/store/linkSettings.js @@ -5,68 +5,4 @@ export class storeLinkSettings { @action canAddHyperlink (value) { this.canAddLink = value; } - - @observable typeLink; - @action changeLinkType(value) { - this.typeLink = value; - } - - @observable slideLink; - @action changeSlideLink(value) { - this.slideLink = value; - } - - @observable slideNum; - @action changeSlideNum(value) { - this.slideNum = value; - } - - @observable slideName; - @action changeSlideName(value) { - this.slideName = value; - } - - initCategory(linkObject) { - const url = linkObject.get_Value(); - const api = Common.EditorApi.get(); - - let indAction; - let slidesCount; - let slideNum; - - if(url === null || url === undefined || url === '') { - this.changeLinkType(1); - } - else { - indAction = url.indexOf("ppaction://hlink"); - if(0 == indAction) { - if (url == "ppaction://hlinkshowjump?jump=firstslide") { - this.changeSlideLink(2); - } else if (url == "ppaction://hlinkshowjump?jump=lastslide") { - this.changeSlideLink(3); - } - else if (url == "ppaction://hlinkshowjump?jump=nextslide") { - this.changeSlideLink(0); - } - else if (url == "ppaction://hlinkshowjump?jump=previousslide") { - this.changeSlideLink(1); - } - else { - this.changeSlideLink(4); - slidesCount = api.getCountPages(); - let mask = "ppaction://hlinksldjumpslide", - indSlide = url.indexOf(mask); - if (0 == indSlide) { - slideNum = parseInt(url.substring(mask.length)); - if (slideNum < 0) this.changeSlideNum(0); - if (slideNum >= slidesCount) this.changeSlideNum(slidesCount - 1); - } else this.changeSlideNum(0); - } - this.changeLinkType(0); - } else { - this.changeLinkType(1); - } - } - } - } diff --git a/apps/presentationeditor/mobile/src/store/presentationSettings.js b/apps/presentationeditor/mobile/src/store/presentationSettings.js index 6ae95de51..566af4936 100644 --- a/apps/presentationeditor/mobile/src/store/presentationSettings.js +++ b/apps/presentationeditor/mobile/src/store/presentationSettings.js @@ -1,19 +1,23 @@ import {action, observable} from 'mobx'; export class storePresentationSettings { - slideSize = [[254, 190.5], [254, 143]]; + @observable slideSizes = [ + [9144000, 6858000, Asc.c_oAscSlideSZType.SzScreen4x3], + [12192000, 6858000, Asc.c_oAscSlideSZType.SzCustom] + ]; + + @observable currentPageSize; @observable slideSizeIndex; - get getSlideSizes() { - return this.slideSize; - } - @action changeSizeIndex(width, height) { - this.slideSize.forEach((array, index) => { - if(Math.abs(array[0] - width) < 0.001 && Math.abs((array[1] - height)) < 0.001) { + this.currentPageSize = {width, height}; + let ratio = height / width; + + this.slideSizes.forEach((array, index) => { + if(Math.abs(array[1] / array[0] - ratio) < 0.001) { this.slideSizeIndex = index; } - }) + }); } // Color Schemes diff --git a/apps/presentationeditor/mobile/src/view/edit/EditLink.jsx b/apps/presentationeditor/mobile/src/view/edit/EditLink.jsx index 95edad25e..e7e0b80e9 100644 --- a/apps/presentationeditor/mobile/src/view/edit/EditLink.jsx +++ b/apps/presentationeditor/mobile/src/view/edit/EditLink.jsx @@ -7,15 +7,14 @@ import {Device} from "../../../../../common/mobile/utils/device"; const PageTypeLink = props => { const { t } = useTranslation(); const _t = t('View.Edit', {returnObjects: true}); - const storeLinkSettings = props.storeLinkSettings; - const typeLink = storeLinkSettings.typeLink; + const [typeLink, setTypeLink] = useState(props.curType); return ( - {storeLinkSettings.changeLinkType(1);}}> - {storeLinkSettings.changeLinkType(0);}}> + {setTypeLink(1); props.changeType(1); props.initLink();}}> + {setTypeLink(0); props.changeType(0); props.initLink();}}> ) @@ -25,23 +24,18 @@ const PageLinkTo = props => { const isAndroid = Device.android; const { t } = useTranslation(); const _t = t('View.Edit', {returnObjects: true}); - const api = Common.EditorApi.get(); - const slidesCount = api.getCountPages(); - const storeLinkSettings = props.storeLinkSettings; - const slideLink = storeLinkSettings.slideLink; - // console.log(slideLink); - // const slideNum = storeLinkSettings.slideNum; - // const [stateTypeTo, setTypeTo] = useState(props.curTo); + const slidesCount = props.slidesCount; + const [stateTypeTo, setTypeTo] = useState(props.curTo); const changeTypeTo = (type) => { - storeLinkSettings.changeSlideLink(type); + setTypeTo(type); props.changeTo(type); }; const [stateNumberTo, setNumberTo] = useState(0); const changeNumber = (curNumber, isDecrement) => { - storeLinkSettings.changeSlideLink(4); + setTypeTo(4); let value; if (isDecrement) { @@ -51,7 +45,6 @@ const PageLinkTo = props => { } setNumberTo(value); - storeLinkSettings.changeSlideNum(value); props.changeTo(4, value); }; @@ -59,10 +52,10 @@ const PageLinkTo = props => { - {changeTypeTo(0)}}> - {changeTypeTo(1)}}> - {changeTypeTo(2)}}> - {changeTypeTo(3)}}> + {changeTypeTo(0)}}> + {changeTypeTo(1)}}> + {changeTypeTo(2)}}> + {changeTypeTo(3)}}> {!isAndroid &&
{stateNumberTo + 1}
}
@@ -85,42 +78,44 @@ const PageLinkTo = props => { const PageLink = props => { const { t } = useTranslation(); const _t = t('View.Edit', {returnObjects: true}); - const storeFocusObjects = props.storeFocusObjects; - const storeLinkSettings = props.storeLinkSettings; - const linkObject = storeFocusObjects.linkObject; - - useEffect(() => { - storeLinkSettings.initCategory(linkObject); - }, [linkObject]); + const url = props.url; + const tooltip = props.tooltip; + const display = props.display; + const slideNum = props.slideNum; + const slideLink = props.slideLink; + const valueTypeLink = props.typeLink; - const url = linkObject.get_Value(); - const tooltip = linkObject.get_ToolTip(); - const display = linkObject.get_Text(); - const slideNum = storeLinkSettings.slideNum; - const slideLink = storeLinkSettings.slideLink; - const typeLink = storeLinkSettings.typeLink; - - if(typeLink === 1) { - storeLinkSettings.changeSlideName(_t.textNextSlide); - storeLinkSettings.changeSlideLink(0); - } + const typesDisplayTo = { + 0: `${_t.textNextSlide}`, + 1: `${_t.textPreviousSlide}`, + 2: `${_t.textFirstSlide}`, + 3: `${_t.textLastSlide}`, + 4: `${_t.textSlide} ${slideNum + 1}` + }; + const [typeLink, setTypeLink] = useState(valueTypeLink); const textType = typeLink === 1 ? _t.textExternalLink : _t.textSlideInThisPresentation; + + const changeType = (newType) => { + setTypeLink(newType); + }; + const [link, setLink] = useState(typeLink !== 0 ? url : ''); + const [linkTo, setLinkTo] = useState(slideLink); + const [displayTo, setDisplayTo] = useState(typesDisplayTo[slideLink]); + const [numberTo, setNumberTo] = useState(slideNum); - const changeTo = (slideLink, number) => { - switch (slideLink) { - case 0 : storeLinkSettings.changeSlideName(_t.textNextSlide); break; - case 1 : storeLinkSettings.changeSlideName(_t.textPreviousSlide); break; - case 2 : storeLinkSettings.changeSlideName(_t.textFirstSlide); break; - case 3 : storeLinkSettings.changeSlideName(_t.textLastSlide); break; - case 4 : storeLinkSettings.changeSlideName(`${_t.textSlide} ${number + 1}`); storeLinkSettings.changeSlideNum(number); + const changeTo = (type, number) => { + setLinkTo(type); + switch (type) { + case 0 : setDisplayTo(_t.textNextSlide); break; + case 1 : setDisplayTo(_t.textPreviousSlide); break; + case 2 : setDisplayTo(_t.textFirstSlide); break; + case 3 : setDisplayTo(_t.textLastSlide); break; + case 4 : setDisplayTo(`${_t.textSlide} ${number + 1}`); setNumberTo(number); break; } - } + }; - changeTo(slideLink, slideNum); - - const slideName = storeLinkSettings.slideName; const [screenTip, setScreenTip] = useState(tooltip); const displayDisabled = display !== false && display === null; const [stateDisplay, setDisplay] = useState(display !== false ? ((display !== null) ? display : _t.textDefault) : ""); @@ -130,7 +125,9 @@ const PageLink = props => { {typeLink !== 0 ? { value={link} onChange={(event) => {setLink(event.target.value)}} /> : - } { onClick={() => { props.onEditLink(typeLink, (typeLink === 1 ? {url: link, display: stateDisplay, tip: screenTip, displayDisabled: displayDisabled } : - {linkTo: slideLink, numberTo: slideNum, display: stateDisplay, tip: screenTip, displayDisabled: displayDisabled})); + {linkTo: linkTo, numberTo: numberTo, display: stateDisplay, tip: screenTip, displayDisabled: displayDisabled})); }} /> { ) }; -const EditLink = inject("storeFocusObjects", "storeLinkSettings")(observer(PageLink)); -const LinkTo = inject("storeFocusObjects", "storeLinkSettings")(observer(PageLinkTo)); -const TypeLink = inject("storeFocusObjects", "storeLinkSettings")(observer(PageTypeLink)); - -export {EditLink, - LinkTo as PageLinkTo, - TypeLink as PageTypeLink} \ No newline at end of file +export {PageLink as EditLink, + PageLinkTo, + PageTypeLink} \ No newline at end of file diff --git a/apps/presentationeditor/mobile/src/view/settings/PresentationSettings.jsx b/apps/presentationeditor/mobile/src/view/settings/PresentationSettings.jsx index e6da2e822..7288657df 100644 --- a/apps/presentationeditor/mobile/src/view/settings/PresentationSettings.jsx +++ b/apps/presentationeditor/mobile/src/view/settings/PresentationSettings.jsx @@ -7,14 +7,13 @@ const PagePresentationSettings = props => { const { t } = useTranslation(); const _t = t("View.Settings", { returnObjects: true }); props.initSlideSize(); - const store = props.storePresentationSettings; - const slideSizeArr = store.getSlideSizes; - const slideSizeIndex = store.slideSizeIndex; + const storePresentationSettings = props.storePresentationSettings; + const slideSizeArr = storePresentationSettings.slideSizes; + const slideSizeIndex = storePresentationSettings.slideSizeIndex; return ( - {_t.textSlideSize} { props.onSlideSize(slideSizeArr[1])} title={_t.mniSlideWide}> - { const curScheme = props.initPageColorSchemes(); const [stateScheme, setScheme] = useState(curScheme); const _t = t('View.Settings', {returnObjects: true}); - const store = props.storePresentationSettings; - const allSchemes = store.allSchemes; + const storePresentationSettings = props.storePresentationSettings; + const allSchemes = storePresentationSettings.allSchemes; return ( From ed550f1dceaf84344cceb600343e2894b916353d Mon Sep 17 00:00:00 2001 From: SergeyEzhin Date: Tue, 2 Mar 2021 22:33:26 +0300 Subject: [PATCH 02/13] [DE mobile] Added replacing --- apps/common/mobile/lib/view/Search.jsx | 49 ++++++++++++++++--- apps/documenteditor/mobile/locale/en.json | 5 +- .../mobile/src/controller/Search.jsx | 22 ++++++--- apps/documenteditor/mobile/src/page/main.jsx | 8 +-- .../mobile/src/view/settings/Settings.jsx | 10 +++- 5 files changed, 75 insertions(+), 19 deletions(-) diff --git a/apps/common/mobile/lib/view/Search.jsx b/apps/common/mobile/lib/view/Search.jsx index 51bca9ca5..b65518223 100644 --- a/apps/common/mobile/lib/view/Search.jsx +++ b/apps/common/mobile/lib/view/Search.jsx @@ -76,6 +76,11 @@ class SearchView extends Component { constructor(props) { super(props); + this.state = { + searchQuery: '', + replaceQuery: '' + }; + $$(document).on('page:init', (e, page) => { if ( page.name == 'home' ) { this.searchbar = f7.searchbar.create({ @@ -114,16 +119,18 @@ class SearchView extends Component { this.onSettingsClick = this.onSettingsClick.bind(this); this.onSearchClick = this.onSearchClick.bind(this); + this.onReplaceClick = this.onReplaceClick.bind(this); } componentDidMount(){ const $$ = Dom7; - this.$repalce = $$('#idx-replace-val'); + this.$replace = $$('#idx-replace-val'); } onSettingsClick(e) { if ( Device.phone ) { // f7.popup.open('.settings-popup'); + f7.popover.open('#idx-search-settings', '#idx-btn-search-settings'); } else f7.popover.open('#idx-search-settings', '#idx-btn-search-settings'); } @@ -149,9 +156,18 @@ class SearchView extends Component { } } + onReplaceClick() { + if ( this.searchbar && this.searchbar.query) { + if ( this.props.onReplaceQuery ) { + let params = this.searchParams(); + this.props.onReplaceQuery(params); + } + } + } + onSearchbarShow(isshowed, bar) { if ( !isshowed ) { - this.$repalce.val(''); + this.$replace.val(''); } } @@ -187,9 +203,27 @@ class SearchView extends Component { return out; } + changeSearchQuery(value) { + this.setState({ + searchQuery: value + }); + } + + changeReplaceQuery(value) { + this.setState({ + replaceQuery: value + }); + } + render() { const usereplace = searchOptions.usereplace; const hidden = {display: "none"}; + const searchQuery = this.state.searchQuery; + const replaceQuery = this.state.replaceQuery; + + // console.log(searchQuery); + // console.log(replaceQuery) + return (
@@ -200,20 +234,23 @@ class SearchView extends Component {
- + {this.changeSearchQuery(e.target.value)}} />
- + {this.changeReplaceQuery(e.target.value)}} />
diff --git a/apps/documenteditor/mobile/locale/en.json b/apps/documenteditor/mobile/locale/en.json index 00f9f0ea6..cbecaa31a 100644 --- a/apps/documenteditor/mobile/locale/en.json +++ b/apps/documenteditor/mobile/locale/en.json @@ -194,7 +194,9 @@ "advDRMPassword": "Password", "closeButtonText": "Close File", "advDRMOptions": "Protected File", - "txtProtected": "Once you enter the password and open the file, the current password to the file will be reset" + "txtProtected": "Once you enter the password and open the file, the current password to the file will be reset", + "textNoTextFound": "Text not found", + "textReplaceAll": "Replace All" }, "Edit": { "textClose": "Close", @@ -295,7 +297,6 @@ "textAutomatic": "Automatic", "textAddCustomColor": "Add Custom Color", "textCustomColor": "Custom Color", - "textBackground": "Background", "textFill": "Fill", "textBorder": "Border", "textEffects": "Effects", diff --git a/apps/documenteditor/mobile/src/controller/Search.jsx b/apps/documenteditor/mobile/src/controller/Search.jsx index 99ac30ccc..75dce02b5 100644 --- a/apps/documenteditor/mobile/src/controller/Search.jsx +++ b/apps/documenteditor/mobile/src/controller/Search.jsx @@ -2,7 +2,7 @@ import React from 'react'; import { List, ListItem, Toggle } from 'framework7-react'; import { SearchController, SearchView, SearchSettingsView } from '../../../../common/mobile/lib/controller/Search'; import { f7 } from 'framework7-react'; - +// import { useTranslation, withTranslation } from 'react-i18next'; class SearchSettings extends SearchSettingsView { constructor(props) { @@ -58,18 +58,26 @@ class DESearchView extends SearchView { } const Search = props => { + const onSearchQuery = params => { const api = Common.EditorApi.get(); - - if ( !params.replace ) { - if ( !api.asc_findText(params.find, params.forward, params.caseSensitive, params.highlight) ) { - f7.dialog.alert('there are no more results', e => { - }); + + if (params.find && params.find.length) { + if (!api.asc_findText(params.find, params.forward, params.caseSensitive, params.highlight) ) { + f7.dialog.alert(null, 'Text not Found'); } } }; - return + const onReplaceQuery = params => { + const api = Common.EditorApi.get(); + + if (params.find && params.find.length) { + api.asc_replaceText(params.find, params.replace, false, params.caseSensitive, params.highlight); + } + } + + return }; export {Search, SearchSettings} diff --git a/apps/documenteditor/mobile/src/page/main.jsx b/apps/documenteditor/mobile/src/page/main.jsx index 8775dcdd7..93e165f05 100644 --- a/apps/documenteditor/mobile/src/page/main.jsx +++ b/apps/documenteditor/mobile/src/page/main.jsx @@ -71,15 +71,17 @@ export default class MainPage extends Component { this.handleClickToOpenOptions('coauth')}> this.handleClickToOpenOptions('settings')}> - { Device.phone ? null : } + {/* { Device.phone ? null : } */} + {/* Page content */} - { + {/* { Device.phone ? null : - } + } */} + { !this.state.editOptionsVisible ? null : diff --git a/apps/documenteditor/mobile/src/view/settings/Settings.jsx b/apps/documenteditor/mobile/src/view/settings/Settings.jsx index 8d74639b9..a199d82e3 100644 --- a/apps/documenteditor/mobile/src/view/settings/Settings.jsx +++ b/apps/documenteditor/mobile/src/view/settings/Settings.jsx @@ -64,6 +64,14 @@ const SettingsList = inject("storeAppOptions")( observer( withTranslation()( pro props.onOptionClick(page) }; + const closeModal = () => { + if (Device.phone) { + f7.sheet.close('.settings-popup', true); + } else { + f7.popover.close('#settings-popover'); + } + }; + useEffect(() => { }); @@ -100,7 +108,7 @@ const SettingsList = inject("storeAppOptions")( observer( withTranslation()( pro {navbar} {!props.inPopover && - + } From f9ffaf6891debcf005db13219d806ec0c2703f10 Mon Sep 17 00:00:00 2001 From: SergeyEzhin Date: Wed, 3 Mar 2021 22:52:16 +0300 Subject: [PATCH 03/13] [DE mobile] Added Replace All and adding styles for phones --- apps/common/mobile/lib/view/Search.jsx | 88 ++++++++++++------- .../mobile/resources/less/common-ios.less | 20 +++++ .../resources/less/common-material.less | 30 +++++++ apps/common/mobile/resources/less/search.less | 50 +++++++++++ apps/documenteditor/mobile/locale/en.json | 1 + .../mobile/src/controller/Search.jsx | 12 ++- .../mobile/src/less/icons-material.less | 2 +- 7 files changed, 170 insertions(+), 33 deletions(-) diff --git a/apps/common/mobile/lib/view/Search.jsx b/apps/common/mobile/lib/view/Search.jsx index b65518223..3da889751 100644 --- a/apps/common/mobile/lib/view/Search.jsx +++ b/apps/common/mobile/lib/view/Search.jsx @@ -6,6 +6,7 @@ import { Dom7 } from 'framework7'; import { Device } from '../../../../common/mobile/utils/device'; import { observable } from "mobx"; import { observer } from "mobx-react"; +import { useTranslation, withTranslation } from 'react-i18next'; const searchOptions = observable({ usereplace: false @@ -31,11 +32,11 @@ class SearchSettingsView extends Component { onFindReplaceClick(action) { searchOptions.usereplace = action == 'replace'; + this.setState({ useReplace: searchOptions.usereplace }); - if (this.onReplaceChecked) {} } @@ -43,13 +44,14 @@ class SearchSettingsView extends Component { } render() { - const show_popover = true; + const show_popover = !Device.phone; const navbar = {!show_popover && Done - } + + } ; const extra = this.extraSearchOptions(); const content = @@ -66,7 +68,7 @@ class SearchSettingsView extends Component { return ( show_popover ? {content} : - {content} + {content} ) } } @@ -89,7 +91,7 @@ class SearchView extends Component { expandable: true, backdrop: false, on: { - search: (bar, curval, prevval) => { + search: (bar, curval, prevval) => { }, enable: this.onSearchbarShow.bind(this, true), disable: this.onSearchbarShow.bind(this, false) @@ -104,6 +106,8 @@ class SearchView extends Component { const $$ = Dom7; const $editor = $$('#editor_sdk'); + const $replaceLink = $$('#replace-link'); + if (false /*iOSVersion() < 13*/) { // $editor.single('mousedown touchstart', _.bind(me.onEditorTouchStart, me)); // $editor.single('mouseup touchend', _.bind(me.onEditorTouchEnd, me)); @@ -114,6 +118,7 @@ class SearchView extends Component { $editor.on('pointerdown', this.onEditorTouchStart.bind(this)); $editor.on('pointerup', this.onEditorTouchEnd.bind(this)); + // $replaceLink.on('click', this.onReplaceHold.bind(this)); } }); @@ -125,12 +130,13 @@ class SearchView extends Component { componentDidMount(){ const $$ = Dom7; this.$replace = $$('#idx-replace-val'); + // this.t = t; + // console.log(this.t); } onSettingsClick(e) { if ( Device.phone ) { - // f7.popup.open('.settings-popup'); - f7.popover.open('#idx-search-settings', '#idx-btn-search-settings'); + f7.popup.open('.search-settings-popup'); } else f7.popover.open('#idx-search-settings', '#idx-btn-search-settings'); } @@ -139,14 +145,15 @@ class SearchView extends Component { find: this.searchbar.query }; - if ( searchOptions.usereplace ) + if (searchOptions.usereplace) { params.replace = this.$replace.val(); + } return params; } onSearchClick(action) { - if ( this.searchbar && this.searchbar.query) { + if (this.searchbar && this.searchbar.query) { if ( this.props.onSearchQuery ) { let params = this.searchParams(); params.forward = action != SEARCH_BACKWARD; @@ -157,7 +164,7 @@ class SearchView extends Component { } onReplaceClick() { - if ( this.searchbar && this.searchbar.query) { + if (this.searchbar && this.searchbar.query) { if ( this.props.onReplaceQuery ) { let params = this.searchParams(); this.props.onReplaceQuery(params); @@ -165,6 +172,19 @@ class SearchView extends Component { } } + onReplaceAllClick() { + if (this.searchbar && this.searchbar.query) { + if (this.props.onReplaceAllQuery) { + let params = this.searchParams(); + this.props.onReplaceAllQuery(params); + } + } + } + + // onReplaceHold() { + // f7.dialog.alert('Tap hold fired!'); + // } + onSearchbarShow(isshowed, bar) { if ( !isshowed ) { this.$replace.val(''); @@ -220,6 +240,7 @@ class SearchView extends Component { const hidden = {display: "none"}; const searchQuery = this.state.searchQuery; const replaceQuery = this.state.replaceQuery; + // const _t = this.t('View.Settings', {returnObjects: true}); // console.log(searchQuery); // console.log(replaceQuery) @@ -228,31 +249,38 @@ class SearchView extends Component {
-
+ -
- {this.changeSearchQuery(e.target.value)}} /> - - +
+
+ {this.changeSearchQuery(e.target.value)}} /> + + +
+
+ {this.changeReplaceQuery(e.target.value)}} /> + + +
-
- {this.changeReplaceQuery(e.target.value)}} /> - - -
- diff --git a/apps/common/mobile/resources/less/common-ios.less b/apps/common/mobile/resources/less/common-ios.less index ea41f1284..d283aad3b 100644 --- a/apps/common/mobile/resources/less/common-ios.less +++ b/apps/common/mobile/resources/less/common-ios.less @@ -390,4 +390,24 @@ background-color: @white; } } + + // Find and Replace + + .searchbar input[type=search] { + box-sizing: border-box; + width: 100%; + height: 28px; + display: block; + border: none; + appearance: none; + border-radius: 5px; + font-family: inherit; + color: @black; + font-size: 14px; + font-weight: 400; + padding: 0 8px; + background-color: @white; + padding: 0 28px; + height: 100%; + } } diff --git a/apps/common/mobile/resources/less/common-material.less b/apps/common/mobile/resources/less/common-material.less index 2dbc3ddf3..a1e6a4cf5 100644 --- a/apps/common/mobile/resources/less/common-material.less +++ b/apps/common/mobile/resources/less/common-material.less @@ -286,4 +286,34 @@ } } } + + // Search and Replace + + .searchbar input[type=search] { + box-sizing: border-box; + width: 100%; + height: 32px; + display: block; + border: none; + appearance: none; + border-radius: 0; + font-family: inherit; + color: @white; + font-size: 16px; + font-weight: 400; + padding: 0; + border-bottom: 1px solid @white; + height: 100%; + padding: 0 36px 0 24px; + background-color: transparent; + background-repeat: no-repeat; + background-position: 0 center; + opacity: 1; + background-size: 24px 24px; + transition-duration: .3s; + // .encoded-svg-uncolored-mask(''); + } + .searchbar input[type=search]::placeholder { + color: @white; + } } diff --git a/apps/common/mobile/resources/less/search.less b/apps/common/mobile/resources/less/search.less index 21249b941..695d7a018 100644 --- a/apps/common/mobile/resources/less/search.less +++ b/apps/common/mobile/resources/less/search.less @@ -17,4 +17,54 @@ .searchbar-input-wrap { margin-right: 10px; } + + .searchbar-inner { + &__center { + display: flex; + align-items: center; + width: 100%; + flex-wrap: wrap; + } + &__right { + display: flex; + align-items: center; + } + } + + .buttons-row-replace { + display: flex; + flex-direction: column; + align-items: center; + width: max-content; + a { + font-size: 15px; + height: auto; + display: block; + line-height: normal; + } + } + + // .searchbar-expandable.replace { + // height: 88px; + // top: 0; + // } + + // @media(max-width: 550px) + // { + // .searchbar-inner { + // height: 88px; + // &__left { + // min-width: 22px; + // max-width: 22px; + // margin-right: 15px; + // } + // &__center { + // flex-direction: column; + // } + // &__right { + // flex-direction: column-reverse; + // margin-left: 10px; + // } + // } + // } } diff --git a/apps/documenteditor/mobile/locale/en.json b/apps/documenteditor/mobile/locale/en.json index cbecaa31a..b7ebd65e8 100644 --- a/apps/documenteditor/mobile/locale/en.json +++ b/apps/documenteditor/mobile/locale/en.json @@ -196,6 +196,7 @@ "advDRMOptions": "Protected File", "txtProtected": "Once you enter the password and open the file, the current password to the file will be reset", "textNoTextFound": "Text not found", + "textReplace": "Replace", "textReplaceAll": "Replace All" }, "Edit": { diff --git a/apps/documenteditor/mobile/src/controller/Search.jsx b/apps/documenteditor/mobile/src/controller/Search.jsx index 75dce02b5..9f4a3633a 100644 --- a/apps/documenteditor/mobile/src/controller/Search.jsx +++ b/apps/documenteditor/mobile/src/controller/Search.jsx @@ -71,13 +71,21 @@ const Search = props => { const onReplaceQuery = params => { const api = Common.EditorApi.get(); - + if (params.find && params.find.length) { api.asc_replaceText(params.find, params.replace, false, params.caseSensitive, params.highlight); } } - return + const onReplaceAllQuery = params => { + const api = Common.EditorApi.get(); + + if (params.find && params.find.length) { + api.asc_replaceText(params.find, params.replace, true, params.caseSensitive, params.highlight); + } + } + + return }; export {Search, SearchSettings} diff --git a/apps/spreadsheeteditor/mobile/src/less/icons-material.less b/apps/spreadsheeteditor/mobile/src/less/icons-material.less index 2f1fcf0c7..008cd29ab 100644 --- a/apps/spreadsheeteditor/mobile/src/less/icons-material.less +++ b/apps/spreadsheeteditor/mobile/src/less/icons-material.less @@ -15,7 +15,7 @@ &.icon-search { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-background(''); } &.icon-edit { width: 22px; From d3dfbb3771b3241e9d4b300da92e35e238c48620 Mon Sep 17 00:00:00 2001 From: SergeyEzhin Date: Thu, 4 Mar 2021 14:07:11 +0300 Subject: [PATCH 04/13] [DE mobile] Deleted flex-wrap from Searchbar Inner --- apps/common/mobile/resources/less/search.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/common/mobile/resources/less/search.less b/apps/common/mobile/resources/less/search.less index 695d7a018..516d9dbd3 100644 --- a/apps/common/mobile/resources/less/search.less +++ b/apps/common/mobile/resources/less/search.less @@ -23,7 +23,7 @@ display: flex; align-items: center; width: 100%; - flex-wrap: wrap; + // flex-wrap: wrap; } &__right { display: flex; From f067ea462258998556d6ef11c1ab334d1e037197 Mon Sep 17 00:00:00 2001 From: SergeyEzhin Date: Fri, 5 Mar 2021 20:53:37 +0300 Subject: [PATCH 05/13] [DE mobile] Make Find and Replace for ios and android --- apps/common/mobile/lib/view/Search.jsx | 14 ++-- .../mobile/resources/less/common-ios.less | 44 ++++++++++- .../resources/less/common-material.less | 76 ++++++++++++++++++- apps/common/mobile/resources/less/search.less | 57 +++++++------- .../mobile/src/less/icons-material.less | 16 ++++ apps/documenteditor/mobile/src/page/main.jsx | 2 +- 6 files changed, 169 insertions(+), 40 deletions(-) diff --git a/apps/common/mobile/lib/view/Search.jsx b/apps/common/mobile/lib/view/Search.jsx index 3da889751..5ab35c29d 100644 --- a/apps/common/mobile/lib/view/Search.jsx +++ b/apps/common/mobile/lib/view/Search.jsx @@ -147,7 +147,7 @@ class SearchView extends Component { if (searchOptions.usereplace) { params.replace = this.$replace.val(); - } + } return params; } @@ -240,14 +240,16 @@ class SearchView extends Component { const hidden = {display: "none"}; const searchQuery = this.state.searchQuery; const replaceQuery = this.state.replaceQuery; + const isIos = Device.ios; // const _t = this.t('View.Settings', {returnObjects: true}); - // console.log(searchQuery); - // console.log(replaceQuery) + if(this.searchbar && this.searchbar.enabled) { + usereplace ? this.searchbar.el.classList.add('replace') : this.searchbar.el.classList.remove('replace'); + } return (
-
+ {isIos ?
: null}
diff --git a/apps/common/mobile/resources/less/common-ios.less b/apps/common/mobile/resources/less/common-ios.less index d283aad3b..83abb5853 100644 --- a/apps/common/mobile/resources/less/common-ios.less +++ b/apps/common/mobile/resources/less/common-ios.less @@ -393,10 +393,17 @@ // Find and Replace + .navbar { + .searchbar-input-wrap { + margin-right: 10px; + height: 28px; + } + } + .searchbar input[type=search] { box-sizing: border-box; width: 100%; - height: 28px; + height: 100%; display: block; border: none; appearance: none; @@ -408,6 +415,39 @@ padding: 0 8px; background-color: @white; padding: 0 28px; - height: 100%; + } + + @media(max-width: 550px) + { + .searchbar-expandable.searchbar-enabled { + top: auto; + .searchbar-inner { + &__left { + margin-right: 15px; + } + &__center { + flex-direction: column; + } + &__right { + flex-direction: column-reverse; + margin-left: 10px; + } + } + &.replace { + height: 88px; + top: 0; + .searchbar-inner { + height: 100%; + &__left { + align-items: flex-start; + } + &__center { + .searchbar-input-wrap { + margin: 8px 0; + } + } + } + } + } } } diff --git a/apps/common/mobile/resources/less/common-material.less b/apps/common/mobile/resources/less/common-material.less index a1e6a4cf5..0738151ed 100644 --- a/apps/common/mobile/resources/less/common-material.less +++ b/apps/common/mobile/resources/less/common-material.less @@ -287,12 +287,45 @@ } } - // Search and Replace + // Find and Replace + + .searchbar-inner { + &__center { + flex-wrap: wrap; + } + } + + .buttons-row-replace a { + color: @white; + } + + .navbar { + .searchbar-input-wrap { + height: 32px; + margin-right: 10px; + margin: 4px 0; + } + } + + .searchbar .input-clear-button { + width: 18px; + height: 18px; + &:after { + color: @white; + font-size: 19px; + } + } + + .searchbar-icon { + &:after { + color: @white; + font-size: 19px; + } + } .searchbar input[type=search] { box-sizing: border-box; width: 100%; - height: 32px; display: block; border: none; appearance: none; @@ -311,9 +344,46 @@ opacity: 1; background-size: 24px 24px; transition-duration: .3s; - // .encoded-svg-uncolored-mask(''); + .encoded-svg-background(''); } + .searchbar input[type=search]::placeholder { color: @white; } + + .navbar.with-searchbar-expandable-enabled, .navbar.with-searchbar-expandable-enabled { + height: 96px; + .searchbar-expandable.searchbar-enabled { + top: auto; + height: 100%; + .searchbar-inner { + &__center { + flex-direction: column; + } + &__right { + flex-direction: column-reverse; + margin-left: 10px; + } + } + &.replace { + top: 0; + .searchbar-inner { + height: 100%; + &__left { + align-items: flex-start; + } + } + } + } + } + + @media(max-width: 550px) { + .searchbar-expandable.searchbar-enabled { + .searchbar-inner { + &__left { + margin-right: 33px; + } + } + } + } } diff --git a/apps/common/mobile/resources/less/search.less b/apps/common/mobile/resources/less/search.less index 516d9dbd3..ba83edb0c 100644 --- a/apps/common/mobile/resources/less/search.less +++ b/apps/common/mobile/resources/less/search.less @@ -14,16 +14,11 @@ } } - .searchbar-input-wrap { - margin-right: 10px; - } - .searchbar-inner { &__center { display: flex; align-items: center; width: 100%; - // flex-wrap: wrap; } &__right { display: flex; @@ -44,27 +39,33 @@ } } - // .searchbar-expandable.replace { - // height: 88px; - // top: 0; - // } - - // @media(max-width: 550px) - // { - // .searchbar-inner { - // height: 88px; - // &__left { - // min-width: 22px; - // max-width: 22px; - // margin-right: 15px; - // } - // &__center { - // flex-direction: column; - // } - // &__right { - // flex-direction: column-reverse; - // margin-left: 10px; - // } - // } - // } + @media(max-width: 550px) + { + .searchbar-expandable.searchbar-enabled { + top: auto; + .searchbar-inner { + &__left { + min-width: 22px; + max-width: 22px; + } + &__center { + flex-direction: column; + } + &__right { + flex-direction: column-reverse; + margin-left: 10px; + } + } + &.replace { + height: 88px; + top: 0; + .searchbar-inner { + height: 100%; + &__left { + align-items: flex-start; + } + } + } + } + } } diff --git a/apps/documenteditor/mobile/src/less/icons-material.less b/apps/documenteditor/mobile/src/less/icons-material.less index 8b6dc0e2c..28c70d175 100644 --- a/apps/documenteditor/mobile/src/less/icons-material.less +++ b/apps/documenteditor/mobile/src/less/icons-material.less @@ -57,6 +57,22 @@ height: 24px; .encoded-svg-background(''); } + &.icon-prev { + width: 20px; + height: 20px; + .encoded-svg-background(''); + &:after { + display: none; + } + } + &.icon-next { + width: 20px; + height: 20px; + .encoded-svg-background(''); + &:after { + display: none; + } + } } } i.icon { diff --git a/apps/documenteditor/mobile/src/page/main.jsx b/apps/documenteditor/mobile/src/page/main.jsx index 93e165f05..2072e41db 100644 --- a/apps/documenteditor/mobile/src/page/main.jsx +++ b/apps/documenteditor/mobile/src/page/main.jsx @@ -76,7 +76,7 @@ export default class MainPage extends Component { {/* Page content */} - + {/* { Device.phone ? null : From e866cec627931a3da4d55894cee3335dcedd2130 Mon Sep 17 00:00:00 2001 From: SergeyEzhin Date: Fri, 5 Mar 2021 23:11:07 +0300 Subject: [PATCH 06/13] [DE mobile] Small edits of styles --- .../common/mobile/resources/less/common-material.less | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/apps/common/mobile/resources/less/common-material.less b/apps/common/mobile/resources/less/common-material.less index 0738151ed..d1c3c74ba 100644 --- a/apps/common/mobile/resources/less/common-material.less +++ b/apps/common/mobile/resources/less/common-material.less @@ -305,6 +305,9 @@ margin-right: 10px; margin: 4px 0; } + &-inner { + overflow: initial; + } } .searchbar .input-clear-button { @@ -344,7 +347,7 @@ opacity: 1; background-size: 24px 24px; transition-duration: .3s; - .encoded-svg-background(''); + .encoded-svg-background(''); } .searchbar input[type=search]::placeholder { @@ -352,11 +355,11 @@ } .navbar.with-searchbar-expandable-enabled, .navbar.with-searchbar-expandable-enabled { - height: 96px; .searchbar-expandable.searchbar-enabled { - top: auto; + top: 0; height: 100%; .searchbar-inner { + height: 100%; &__center { flex-direction: column; } @@ -366,7 +369,7 @@ } } &.replace { - top: 0; + height: 96px; .searchbar-inner { height: 100%; &__left { From e0258fa0b75d09b2e264c1021de54e5cb368b8dd Mon Sep 17 00:00:00 2001 From: SergeyEzhin Date: Tue, 9 Mar 2021 22:42:29 +0300 Subject: [PATCH 07/13] [DE mobile] Corrected Find and Replace --- apps/common/mobile/lib/controller/Search.jsx | 3 +- apps/common/mobile/lib/view/Search.jsx | 28 +++++++++++-------- .../mobile/resources/less/common-ios.less | 18 ++++++++---- .../resources/less/common-material.less | 27 ++++++++++++------ .../mobile/resources/less/ios/icons.less | 16 +++++++++++ .../mobile/resources/less/material/icons.less | 16 +++++++++++ apps/common/mobile/resources/less/search.less | 9 +++--- .../mobile/src/controller/Search.jsx | 8 ++++-- .../mobile/src/less/icons-material.less | 18 +----------- 9 files changed, 92 insertions(+), 51 deletions(-) diff --git a/apps/common/mobile/lib/controller/Search.jsx b/apps/common/mobile/lib/controller/Search.jsx index fa60859ec..cd686b884 100644 --- a/apps/common/mobile/lib/controller/Search.jsx +++ b/apps/common/mobile/lib/controller/Search.jsx @@ -1,5 +1,6 @@ import React from 'react'; -import SearchView, {SearchSettingsView} from '../view/Search' +import SearchView, {SearchSettingsView} from '../view/Search'; +import { useTranslation, withTranslation } from 'react-i18next'; const SearchController = props => { diff --git a/apps/common/mobile/lib/view/Search.jsx b/apps/common/mobile/lib/view/Search.jsx index 5ab35c29d..51c911cda 100644 --- a/apps/common/mobile/lib/view/Search.jsx +++ b/apps/common/mobile/lib/view/Search.jsx @@ -130,8 +130,6 @@ class SearchView extends Component { componentDidMount(){ const $$ = Dom7; this.$replace = $$('#idx-replace-val'); - // this.t = t; - // console.log(this.t); } onSettingsClick(e) { @@ -153,10 +151,12 @@ class SearchView extends Component { } onSearchClick(action) { - if (this.searchbar && this.searchbar.query) { - if ( this.props.onSearchQuery ) { + if (this.searchbar && this.state.searchQuery) { + if (this.props.onSearchQuery) { let params = this.searchParams(); + params.find = this.state.searchQuery; params.forward = action != SEARCH_BACKWARD; + // console.log(params); this.props.onSearchQuery(params); } @@ -164,27 +164,29 @@ class SearchView extends Component { } onReplaceClick() { - if (this.searchbar && this.searchbar.query) { - if ( this.props.onReplaceQuery ) { + if (this.searchbar && this.state.searchQuery) { + if (this.props.onReplaceQuery) { let params = this.searchParams(); + params.find = this.state.searchQuery; + // console.log(params); + this.props.onReplaceQuery(params); } } } onReplaceAllClick() { - if (this.searchbar && this.searchbar.query) { + if (this.searchbar && this.state.searchQuery) { if (this.props.onReplaceAllQuery) { let params = this.searchParams(); + params.find = this.state.searchQuery; + // console.log(params); + this.props.onReplaceAllQuery(params); } } } - // onReplaceHold() { - // f7.dialog.alert('Tap hold fired!'); - // } - onSearchbarShow(isshowed, bar) { if ( !isshowed ) { this.$replace.val(''); @@ -241,11 +243,13 @@ class SearchView extends Component { const searchQuery = this.state.searchQuery; const replaceQuery = this.state.replaceQuery; const isIos = Device.ios; + // const _t = this.t('View.Settings', {returnObjects: true}); + // console.log(this.state.searchQuery, this.state.replaceQuery); if(this.searchbar && this.searchbar.enabled) { usereplace ? this.searchbar.el.classList.add('replace') : this.searchbar.el.classList.remove('replace'); - } + } return ( diff --git a/apps/common/mobile/resources/less/common-ios.less b/apps/common/mobile/resources/less/common-ios.less index 83abb5853..f45704f6c 100644 --- a/apps/common/mobile/resources/less/common-ios.less +++ b/apps/common/mobile/resources/less/common-ios.less @@ -398,6 +398,9 @@ margin-right: 10px; height: 28px; } + .buttons-row-replace a { + color: @themeColor; + } } .searchbar input[type=search] { @@ -417,10 +420,18 @@ padding: 0 28px; } + .searchbar-inner { + &__right { + .buttons-row a.next { + margin-left: 15px; + } + } + } + @media(max-width: 550px) { .searchbar-expandable.searchbar-enabled { - top: auto; + top: 0; .searchbar-inner { &__left { margin-right: 15px; @@ -435,12 +446,7 @@ } &.replace { height: 88px; - top: 0; .searchbar-inner { - height: 100%; - &__left { - align-items: flex-start; - } &__center { .searchbar-input-wrap { margin: 8px 0; diff --git a/apps/common/mobile/resources/less/common-material.less b/apps/common/mobile/resources/less/common-material.less index d1c3c74ba..9e2afe6f5 100644 --- a/apps/common/mobile/resources/less/common-material.less +++ b/apps/common/mobile/resources/less/common-material.less @@ -293,6 +293,9 @@ &__center { flex-wrap: wrap; } + &__left { + padding-top: 4px; + } } .buttons-row-replace a { @@ -354,10 +357,10 @@ color: @white; } - .navbar.with-searchbar-expandable-enabled, .navbar.with-searchbar-expandable-enabled { + .navbar { .searchbar-expandable.searchbar-enabled { top: 0; - height: 100%; + // height: 100%; .searchbar-inner { height: 100%; &__center { @@ -365,19 +368,25 @@ } &__right { flex-direction: column-reverse; - margin-left: 10px; } } &.replace { height: 96px; - .searchbar-inner { - height: 100%; - &__left { - align-items: flex-start; - } - } } } + a.link { + padding: 0 16px; + } + a.icon-only { + width: auto; + height: 48px; + } + .buttons-row-replace a { + color: @white; + } + .searchbar .buttons-row { + align-self: flex-start; + } } @media(max-width: 550px) { diff --git a/apps/common/mobile/resources/less/ios/icons.less b/apps/common/mobile/resources/less/ios/icons.less index 5fa78c04f..204df9989 100644 --- a/apps/common/mobile/resources/less/ios/icons.less +++ b/apps/common/mobile/resources/less/ios/icons.less @@ -4,5 +4,21 @@ &.icon_mask { background-color: white; } + &.icon-prev { + width: 22px; + height: 22px; + .encoded-svg-background(''); + &:after { + display: none; + } + } + &.icon-next { + width: 22px; + height: 22px; + .encoded-svg-background(''); + &:after { + display: none; + } + } } } diff --git a/apps/common/mobile/resources/less/material/icons.less b/apps/common/mobile/resources/less/material/icons.less index 6891a5b97..ef7b49987 100644 --- a/apps/common/mobile/resources/less/material/icons.less +++ b/apps/common/mobile/resources/less/material/icons.less @@ -4,5 +4,21 @@ &.icon_mask { background-color: black; } + &.icon-prev { + width: 20px; + height: 20px; + .encoded-svg-background(''); + &:after { + display: none; + } + } + &.icon-next { + width: 20px; + height: 20px; + .encoded-svg-background(''); + &:after { + display: none; + } + } } } diff --git a/apps/common/mobile/resources/less/search.less b/apps/common/mobile/resources/less/search.less index ba83edb0c..caf870f49 100644 --- a/apps/common/mobile/resources/less/search.less +++ b/apps/common/mobile/resources/less/search.less @@ -26,6 +26,10 @@ } } + .searchbar-expandable { + transition-duration: 0s; + } + .buttons-row-replace { display: flex; flex-direction: column; @@ -42,7 +46,6 @@ @media(max-width: 550px) { .searchbar-expandable.searchbar-enabled { - top: auto; .searchbar-inner { &__left { min-width: 22px; @@ -53,16 +56,14 @@ } &__right { flex-direction: column-reverse; - margin-left: 10px; } } &.replace { - height: 88px; top: 0; .searchbar-inner { height: 100%; &__left { - align-items: flex-start; + align-self: flex-start; } } } diff --git a/apps/documenteditor/mobile/src/controller/Search.jsx b/apps/documenteditor/mobile/src/controller/Search.jsx index 9f4a3633a..3f7bb08bf 100644 --- a/apps/documenteditor/mobile/src/controller/Search.jsx +++ b/apps/documenteditor/mobile/src/controller/Search.jsx @@ -2,7 +2,7 @@ import React from 'react'; import { List, ListItem, Toggle } from 'framework7-react'; import { SearchController, SearchView, SearchSettingsView } from '../../../../common/mobile/lib/controller/Search'; import { f7 } from 'framework7-react'; -// import { useTranslation, withTranslation } from 'react-i18next'; +import { useTranslation, withTranslation } from 'react-i18next'; class SearchSettings extends SearchSettingsView { constructor(props) { @@ -58,12 +58,16 @@ class DESearchView extends SearchView { } const Search = props => { + // const { t } = useTranslation(); + // const _t = t('View.Settings', {returnObjects: true}); const onSearchQuery = params => { const api = Common.EditorApi.get(); - + if (params.find && params.find.length) { if (!api.asc_findText(params.find, params.forward, params.caseSensitive, params.highlight) ) { + // const { t } = useTranslation(); + // const _t = t('View.Settings', {returnObjects: true}); f7.dialog.alert(null, 'Text not Found'); } } diff --git a/apps/documenteditor/mobile/src/less/icons-material.less b/apps/documenteditor/mobile/src/less/icons-material.less index 28c70d175..75630079b 100644 --- a/apps/documenteditor/mobile/src/less/icons-material.less +++ b/apps/documenteditor/mobile/src/less/icons-material.less @@ -57,22 +57,6 @@ height: 24px; .encoded-svg-background(''); } - &.icon-prev { - width: 20px; - height: 20px; - .encoded-svg-background(''); - &:after { - display: none; - } - } - &.icon-next { - width: 20px; - height: 20px; - .encoded-svg-background(''); - &:after { - display: none; - } - } } } i.icon { @@ -95,7 +79,7 @@ &.icon-search { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-background(''); } &.icon-reader { width: 22px; From bb6172015c591943dea895fea8e499a73365b274 Mon Sep 17 00:00:00 2001 From: Maxim Kadushkin Date: Wed, 10 Mar 2021 16:58:14 +0300 Subject: [PATCH 08/13] [common mobile] fixes for mobx ver 6 --- apps/common/mobile/lib/view/Search.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/common/mobile/lib/view/Search.jsx b/apps/common/mobile/lib/view/Search.jsx index 51c911cda..5c81055aa 100644 --- a/apps/common/mobile/lib/view/Search.jsx +++ b/apps/common/mobile/lib/view/Search.jsx @@ -4,7 +4,7 @@ import { Toggle } from 'framework7-react'; import { f7 } from 'framework7-react'; import { Dom7 } from 'framework7'; import { Device } from '../../../../common/mobile/utils/device'; -import { observable } from "mobx"; +import { observable, runInAction } from "mobx"; import { observer } from "mobx-react"; import { useTranslation, withTranslation } from 'react-i18next'; @@ -31,7 +31,7 @@ class SearchSettingsView extends Component { } onFindReplaceClick(action) { - searchOptions.usereplace = action == 'replace'; + runInAction(() => searchOptions.usereplace = action == 'replace'); this.setState({ useReplace: searchOptions.usereplace From de79f6e5260e154c286148909264c38e59209d00 Mon Sep 17 00:00:00 2001 From: SergeyEzhin Date: Wed, 10 Mar 2021 19:51:22 +0300 Subject: [PATCH 09/13] [PE mobile] Added Find and Replace --- apps/common/mobile/lib/view/Search.jsx | 7 +- .../mobile/src/controller/Search.jsx | 2 - apps/presentationeditor/mobile/locale/en.json | 10 ++- .../mobile/src/controller/Search.jsx | 81 +++++++++++++++++++ .../mobile/src/less/app.less | 4 + .../mobile/src/page/main.jsx | 9 ++- .../mobile/src/view/settings/Settings.jsx | 6 +- 7 files changed, 110 insertions(+), 9 deletions(-) create mode 100644 apps/presentationeditor/mobile/src/controller/Search.jsx diff --git a/apps/common/mobile/lib/view/Search.jsx b/apps/common/mobile/lib/view/Search.jsx index 51c911cda..68a57f341 100644 --- a/apps/common/mobile/lib/view/Search.jsx +++ b/apps/common/mobile/lib/view/Search.jsx @@ -55,7 +55,7 @@ class SearchSettingsView extends Component { ; const extra = this.extraSearchOptions(); const content = - + {navbar} @@ -83,6 +83,8 @@ class SearchView extends Component { replaceQuery: '' }; + const $$ = Dom7; + $$(document).on('page:init', (e, page) => { if ( page.name == 'home' ) { this.searchbar = f7.searchbar.create({ @@ -104,7 +106,6 @@ class SearchView extends Component { // return (m = /(iPad|iPhone|iphone).*?(OS |os |OS\_)(\d+((_|\.)\d)?((_|\.)\d)?)/.exec(ua)) ? parseFloat(m[3]) : 0; // } - const $$ = Dom7; const $editor = $$('#editor_sdk'); const $replaceLink = $$('#replace-link'); @@ -195,10 +196,12 @@ class SearchView extends Component { onEditorTouchStart(e) { this.startPoint = this.pointerPosition(e); + // console.log(this.startPoint); } onEditorTouchEnd(e) { const endPoint = this.pointerPosition(e); + // console.log(endPoint); if ( this.searchbar.enabled ) { const distance = (this.startPoint.x === undefined || this.startPoint.y === undefined) ? 0 : diff --git a/apps/documenteditor/mobile/src/controller/Search.jsx b/apps/documenteditor/mobile/src/controller/Search.jsx index 3f7bb08bf..0da97f37e 100644 --- a/apps/documenteditor/mobile/src/controller/Search.jsx +++ b/apps/documenteditor/mobile/src/controller/Search.jsx @@ -66,8 +66,6 @@ const Search = props => { if (params.find && params.find.length) { if (!api.asc_findText(params.find, params.forward, params.caseSensitive, params.highlight) ) { - // const { t } = useTranslation(); - // const _t = t('View.Settings', {returnObjects: true}); f7.dialog.alert(null, 'Text not Found'); } } diff --git a/apps/presentationeditor/mobile/locale/en.json b/apps/presentationeditor/mobile/locale/en.json index 9f00933f2..ea418aa9c 100644 --- a/apps/presentationeditor/mobile/locale/en.json +++ b/apps/presentationeditor/mobile/locale/en.json @@ -244,7 +244,15 @@ "textRemoveLink": "Remove Link", "textDisplay": "Display", "textScreenTip": "Screen Tip", - "textDefault": "Selected text" + "textDefault": "Selected text", + "textNoTextFound": "Text not found", + "textReplaceAll": "Replace All", + "textFind": "Find", + "textFindAndReplace": "Find and Replace", + "textDone": "Done", + "textSearch": "Search", + "textCase": "Case sensitive", + "textHighlight": "Highlight results" } }, "Common": { diff --git a/apps/presentationeditor/mobile/src/controller/Search.jsx b/apps/presentationeditor/mobile/src/controller/Search.jsx new file mode 100644 index 000000000..37f8f7548 --- /dev/null +++ b/apps/presentationeditor/mobile/src/controller/Search.jsx @@ -0,0 +1,81 @@ +import React from 'react'; +import { List, ListItem, Toggle } from 'framework7-react'; +import { SearchController, SearchView, SearchSettingsView } from '../../../../common/mobile/lib/controller/Search'; +import { f7 } from 'framework7-react'; +import { useTranslation, withTranslation } from 'react-i18next'; + +class SearchSettings extends SearchSettingsView { + constructor(props) { + super(props); + } + + extraSearchOptions() { + const anc_markup = super.extraSearchOptions(); + + const markup = + + + + ; + + return {...anc_markup, ...markup}; + } +} + +class PESearchView extends SearchView { + searchParams() { + let params = super.searchParams(); + + const checkboxCaseSensitive = f7.toggle.get('.toggle-case-sensitive'); + const searchOptions = { + caseSensitive: checkboxCaseSensitive.checked, + }; + + return {...params, ...searchOptions}; + } + + onSearchbarShow(isshowed, bar) { + super.onSearchbarShow(isshowed, bar); + + // const api = Common.EditorApi.get(); + // if ( isshowed ) { + // const checkboxMarkResults = f7.toggle.get('.toggle-mark-results'); + // api.asc_selectSearchingResults(checkboxMarkResults.checked); + // } else api.asc_selectSearchingResults(false); + } +} + +const Search = props => { + // const { t } = useTranslation(); + // const _t = t('View.Settings', {returnObjects: true}); + + const onSearchQuery = params => { + const api = Common.EditorApi.get(); + + if (params.find && params.find.length) { + if (!api.findText(params.find, params.forward, params.caseSensitive) ) { + f7.dialog.alert(null, 'Text not Found'); + } + } + }; + + const onReplaceQuery = params => { + const api = Common.EditorApi.get(); + + if (params.find && params.find.length) { + api.asc_replaceText(params.find, params.replace, false, params.caseSensitive); + } + } + + const onReplaceAllQuery = params => { + const api = Common.EditorApi.get(); + + if (params.find && params.find.length) { + api.asc_replaceText(params.find, params.replace, true, params.caseSensitive); + } + } + + return +}; + +export {Search, SearchSettings} diff --git a/apps/presentationeditor/mobile/src/less/app.less b/apps/presentationeditor/mobile/src/less/app.less index 5d0124ddb..4297bfb61 100644 --- a/apps/presentationeditor/mobile/src/less/app.less +++ b/apps/presentationeditor/mobile/src/less/app.less @@ -1,12 +1,16 @@ @themeColor: #aa5252; +@import '../../../../../vendor/framework7-react/node_modules/framework7/less/mixins.less'; + @import '../../../../common/mobile/resources/less/_mixins.less'; @import '../../../../common/mobile/resources/less/collaboration.less'; @import '../../../../common/mobile/resources/less/common.less'; @import '../../../../common/mobile/resources/less/common-ios.less'; @import '../../../../common/mobile/resources/less/common-material.less'; +@import '../../../../common/mobile/resources/less/icons.less'; @import '../../../../common/mobile/resources/less/dataview.less'; @import '../../../../common/mobile/resources/less/about.less'; +@import '../../../../common/mobile/resources/less/search.less'; @import './app-material.less'; @import './app-ios.less'; @import './icons-ios.less'; diff --git a/apps/presentationeditor/mobile/src/page/main.jsx b/apps/presentationeditor/mobile/src/page/main.jsx index 5bd43e73b..2f4844379 100644 --- a/apps/presentationeditor/mobile/src/page/main.jsx +++ b/apps/presentationeditor/mobile/src/page/main.jsx @@ -4,7 +4,9 @@ import { Page, View, Navbar, NavLeft, NavRight, Link, Icon } from 'framework7-re import EditOptions from '../view/edit/Edit'; import AddOptions from '../view/add/Add'; import Settings from '../view/settings/Settings'; -import CollaborationView from '../../../../common/mobile/lib/view/collaboration/Collaboration.jsx' +import CollaborationView from '../../../../common/mobile/lib/view/collaboration/Collaboration.jsx'; +import { Device } from '../../../../common/mobile/utils/device'; +import { Search, SearchSettings } from '../controller/Search'; export default class MainPage extends Component { constructor(props) { @@ -58,12 +60,17 @@ export default class MainPage extends Component { this.handleClickToOpenOptions('edit')}> this.handleClickToOpenOptions('add')}> + { Device.phone ? null : } this.handleClickToOpenOptions('coauth')}> this.handleClickToOpenOptions('settings')}> + {/* Page content */} + + + { !this.state.editOptionsVisible ? null : diff --git a/apps/presentationeditor/mobile/src/view/settings/Settings.jsx b/apps/presentationeditor/mobile/src/view/settings/Settings.jsx index 094ecb6cf..43deb4bdf 100644 --- a/apps/presentationeditor/mobile/src/view/settings/Settings.jsx +++ b/apps/presentationeditor/mobile/src/view/settings/Settings.jsx @@ -106,9 +106,9 @@ const SettingsList = withTranslation()(props => { {navbar} {!props.inPopover && - - - + + + } From e47157f949da9304bcfb63fe11e11fb89ba2f139 Mon Sep 17 00:00:00 2001 From: SergeyEzhin Date: Wed, 10 Mar 2021 21:46:18 +0300 Subject: [PATCH 10/13] [PE mobile] Fixed Presentation Settings according to mobx v. 6 --- .../mobile/src/controller/Search.jsx | 6 ---- .../settings/PresentationSettings.jsx | 7 ++++ .../mobile/src/store/presentationSettings.js | 32 +++++++++++++------ .../view/settings/PresentationSettings.jsx | 1 - 4 files changed, 29 insertions(+), 17 deletions(-) diff --git a/apps/presentationeditor/mobile/src/controller/Search.jsx b/apps/presentationeditor/mobile/src/controller/Search.jsx index 37f8f7548..ae761031e 100644 --- a/apps/presentationeditor/mobile/src/controller/Search.jsx +++ b/apps/presentationeditor/mobile/src/controller/Search.jsx @@ -36,12 +36,6 @@ class PESearchView extends SearchView { onSearchbarShow(isshowed, bar) { super.onSearchbarShow(isshowed, bar); - - // const api = Common.EditorApi.get(); - // if ( isshowed ) { - // const checkboxMarkResults = f7.toggle.get('.toggle-mark-results'); - // api.asc_selectSearchingResults(checkboxMarkResults.checked); - // } else api.asc_selectSearchingResults(false); } } diff --git a/apps/presentationeditor/mobile/src/controller/settings/PresentationSettings.jsx b/apps/presentationeditor/mobile/src/controller/settings/PresentationSettings.jsx index 184fec041..16305cdfb 100644 --- a/apps/presentationeditor/mobile/src/controller/settings/PresentationSettings.jsx +++ b/apps/presentationeditor/mobile/src/controller/settings/PresentationSettings.jsx @@ -7,12 +7,19 @@ class PresentationSettingsController extends Component { super(props); this.initSlideSize = this.initSlideSize.bind(this); this.onSlideSize = this.onSlideSize.bind(this); + this.initSlideSize(); } initSlideSize() { if (!this.init) { const api = Common.EditorApi.get(); + const slideSizes = [ + [9144000, 6858000, Asc.c_oAscSlideSZType.SzScreen4x3], + [12192000, 6858000, Asc.c_oAscSlideSZType.SzCustom] + ]; + this.props.storePresentationSettings.changeSizeIndex(api.get_PresentationWidth(), api.get_PresentationHeight()); + this.props.storePresentationSettings.initSlideSizes(slideSizes); this.init = true; } } diff --git a/apps/presentationeditor/mobile/src/store/presentationSettings.js b/apps/presentationeditor/mobile/src/store/presentationSettings.js index 566af4936..1fc6c04f8 100644 --- a/apps/presentationeditor/mobile/src/store/presentationSettings.js +++ b/apps/presentationeditor/mobile/src/store/presentationSettings.js @@ -1,15 +1,23 @@ -import {action, observable} from 'mobx'; +import {action, observable, makeObservable} from 'mobx'; export class storePresentationSettings { - @observable slideSizes = [ - [9144000, 6858000, Asc.c_oAscSlideSZType.SzScreen4x3], - [12192000, 6858000, Asc.c_oAscSlideSZType.SzCustom] - ]; + constructor() { + makeObservable(this, { + slideSizes: observable, + currentPageSize: observable, + slideSizeIndex: observable, + allSchemes: observable, + changeSizeIndex: action, + addSchemes: action, + initSlideSizes: action + }) + } - @observable currentPageSize; - @observable slideSizeIndex; + slideSizes = []; + currentPageSize; + slideSizeIndex; - @action changeSizeIndex(width, height) { + changeSizeIndex(width, height) { this.currentPageSize = {width, height}; let ratio = height / width; @@ -20,11 +28,15 @@ export class storePresentationSettings { }); } + initSlideSizes(value) { + this.slideSizes = value; + } + // Color Schemes - @observable allSchemes; + allSchemes; - @action addSchemes(arr) { + addSchemes(arr) { this.allSchemes = arr; } diff --git a/apps/presentationeditor/mobile/src/view/settings/PresentationSettings.jsx b/apps/presentationeditor/mobile/src/view/settings/PresentationSettings.jsx index 7288657df..3f8ebc7e9 100644 --- a/apps/presentationeditor/mobile/src/view/settings/PresentationSettings.jsx +++ b/apps/presentationeditor/mobile/src/view/settings/PresentationSettings.jsx @@ -6,7 +6,6 @@ import { useTranslation } from "react-i18next"; const PagePresentationSettings = props => { const { t } = useTranslation(); const _t = t("View.Settings", { returnObjects: true }); - props.initSlideSize(); const storePresentationSettings = props.storePresentationSettings; const slideSizeArr = storePresentationSettings.slideSizes; const slideSizeIndex = storePresentationSettings.slideSizeIndex; From 32f5bd693e5fb2eb6742a969bc177bfbd8b046be Mon Sep 17 00:00:00 2001 From: SergeyEzhin Date: Mon, 15 Mar 2021 21:35:19 +0300 Subject: [PATCH 11/13] [DE PE mobile] Correcting Find and Replace --- apps/common/mobile/lib/controller/Search.jsx | 4 +- apps/common/mobile/lib/view/Search.jsx | 78 ++++++++++--------- apps/documenteditor/mobile/locale/en.json | 5 +- .../mobile/src/controller/Search.jsx | 51 ++++++++---- apps/documenteditor/mobile/src/page/main.jsx | 4 +- apps/presentationeditor/mobile/locale/en.json | 15 +++- .../mobile/src/controller/Search.jsx | 49 +++++++++--- .../mobile/src/page/main.jsx | 4 +- 8 files changed, 138 insertions(+), 72 deletions(-) diff --git a/apps/common/mobile/lib/controller/Search.jsx b/apps/common/mobile/lib/controller/Search.jsx index cd686b884..8a0983a5d 100644 --- a/apps/common/mobile/lib/controller/Search.jsx +++ b/apps/common/mobile/lib/controller/Search.jsx @@ -1,7 +1,5 @@ import React from 'react'; -import SearchView, {SearchSettingsView} from '../view/Search'; -import { useTranslation, withTranslation } from 'react-i18next'; - +import {SearchView, SearchSettingsView} from '../view/Search'; const SearchController = props => { const onSearchQuery = params => { diff --git a/apps/common/mobile/lib/view/Search.jsx b/apps/common/mobile/lib/view/Search.jsx index ee5f42d4b..8ab31b908 100644 --- a/apps/common/mobile/lib/view/Search.jsx +++ b/apps/common/mobile/lib/view/Search.jsx @@ -6,7 +6,6 @@ import { Dom7 } from 'framework7'; import { Device } from '../../../../common/mobile/utils/device'; import { observable, runInAction } from "mobx"; import { observer } from "mobx-react"; -import { useTranslation, withTranslation } from 'react-i18next'; const searchOptions = observable({ usereplace: false @@ -25,8 +24,13 @@ class SearchSettingsView extends Component { this.state = { useReplace: false, - caseSensitive: false, - markResults: false + // caseSensitive: false, + // markResults: false + searchIn: 0, + searchBy: 1, + lookIn: 1, + isMatchCase: false, + isMatchCell: false }; } @@ -45,25 +49,21 @@ class SearchSettingsView extends Component { render() { const show_popover = !Device.phone; - const navbar = - - {!show_popover && - - Done - - } - ; + // const navbar = + // + // {!show_popover && + // + // Done + // + // } + // ; const extra = this.extraSearchOptions(); const content = - - {navbar} - - this.onFindReplaceClick('find')} /> - this.onFindReplaceClick('replace')} /> - - { extra } - + {/* */} + {/* {navbar} */} + {extra} + {/* */} ; return ( show_popover ? @@ -73,7 +73,7 @@ class SearchSettingsView extends Component { } } -@observer +// @observer class SearchView extends Component { constructor(props) { super(props); @@ -107,7 +107,7 @@ class SearchView extends Component { // } const $editor = $$('#editor_sdk'); - const $replaceLink = $$('#replace-link'); + // const $replaceLink = $$('#replace-link'); if (false /*iOSVersion() < 13*/) { // $editor.single('mousedown touchstart', _.bind(me.onEditorTouchStart, me)); @@ -203,11 +203,20 @@ class SearchView extends Component { const endPoint = this.pointerPosition(e); // console.log(endPoint); - if ( this.searchbar.enabled ) { - const distance = (this.startPoint.x === undefined || this.startPoint.y === undefined) ? 0 : - Math.sqrt((endPoint.x -= this.startPoint.x) * endPoint.x + (endPoint.y -= this.startPoint.y) * endPoint.y); + if (this.searchbar.enabled) { + let distance; - if ( distance < 1 ) { + if(this.startPoint) { + distance = (!!this.startPoint.x || !!this.startPoint.y) ? 0 : + Math.sqrt((endPoint.x -= this.startPoint.x) * endPoint.x + (endPoint.y -= this.startPoint.y) * endPoint.y); + } else { + distance = 0; + } + + // const distance = (this.startPoint.x === undefined || this.startPoint.y === undefined) ? 0 : + // Math.sqrt((endPoint.x -= this.startPoint.x) * endPoint.x + (endPoint.y -= this.startPoint.y) * endPoint.y); + + if (distance < 1) { this.searchbar.disable(); } } @@ -219,8 +228,7 @@ class SearchView extends Component { const touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0]; out.x = touch.pageX; out.y = touch.pageY; - } else - if ( e.type == 'mousedown' || e.type == 'mouseup' ) { + } else if ( e.type == 'mousedown' || e.type == 'mouseup' ) { out.x = e.pageX; out.y = e.pageY; } @@ -246,9 +254,7 @@ class SearchView extends Component { const searchQuery = this.state.searchQuery; const replaceQuery = this.state.replaceQuery; const isIos = Device.ios; - - // const _t = this.t('View.Settings', {returnObjects: true}); - // console.log(this.state.searchQuery, this.state.replaceQuery); + const { _t } = this.props; if(this.searchbar && this.searchbar.enabled) { usereplace ? this.searchbar.el.classList.add('replace') : this.searchbar.el.classList.remove('replace'); @@ -265,13 +271,13 @@ class SearchView extends Component {
- {this.changeSearchQuery(e.target.value)}} /> {isIos ? : null}
- {this.changeReplaceQuery(e.target.value)}} /> {isIos ? : null} @@ -279,8 +285,8 @@ class SearchView extends Component {
this.onSearchClick(SEARCH_BACKWARD)}> @@ -297,4 +303,6 @@ class SearchView extends Component { } } -export {SearchView as default, SearchView, SearchSettingsView}; +const SearchViewWithObserver = observer(SearchView); + +export {SearchViewWithObserver as SearchView, SearchSettingsView}; diff --git a/apps/documenteditor/mobile/locale/en.json b/apps/documenteditor/mobile/locale/en.json index 9ef6d3d38..2943e90e6 100644 --- a/apps/documenteditor/mobile/locale/en.json +++ b/apps/documenteditor/mobile/locale/en.json @@ -198,7 +198,10 @@ "txtProtected": "Once you enter the password and open the file, the current password to the file will be reset", "textNoTextFound": "Text not found", "textReplace": "Replace", - "textReplaceAll": "Replace All" + "textReplaceAll": "Replace All", + "textCaseSensitive": "Case Sensitive", + "textHighlightResults": "Highlight Results", + "textSearch": "Search" }, "Edit": { "textClose": "Close", diff --git a/apps/documenteditor/mobile/src/controller/Search.jsx b/apps/documenteditor/mobile/src/controller/Search.jsx index 0da97f37e..4184133cc 100644 --- a/apps/documenteditor/mobile/src/controller/Search.jsx +++ b/apps/documenteditor/mobile/src/controller/Search.jsx @@ -1,8 +1,9 @@ import React from 'react'; -import { List, ListItem, Toggle } from 'framework7-react'; +import { List, ListItem, Toggle, Page, Navbar, NavRight, Link } from 'framework7-react'; import { SearchController, SearchView, SearchSettingsView } from '../../../../common/mobile/lib/controller/Search'; import { f7 } from 'framework7-react'; -import { useTranslation, withTranslation } from 'react-i18next'; +import { withTranslation } from 'react-i18next'; +import { Device } from '../../../../common/mobile/utils/device'; class SearchSettings extends SearchSettingsView { constructor(props) { @@ -18,21 +19,43 @@ class SearchSettings extends SearchSettingsView { extraSearchOptions() { const anc_markup = super.extraSearchOptions(); + const show_popover = !Device.phone; + const { t } = this.props; + const _t = t("Settings", {returnObjects: true}); - const markup = - + const markup = ( + + + {!show_popover && + + {_t.textDone} + + } + + + this.onFindReplaceClick('find')} /> + this.onFindReplaceClick('replace')} /> + + + - + - ; + + + ); return {...anc_markup, ...markup}; } } class DESearchView extends SearchView { + constructor(props) { + super(props); + } + searchParams() { let params = super.searchParams(); @@ -57,16 +80,16 @@ class DESearchView extends SearchView { } } -const Search = props => { - // const { t } = useTranslation(); - // const _t = t('View.Settings', {returnObjects: true}); +const Search = withTranslation()(props => { + const { t } = props; + const _t = t('Settings', {returnObjects: true}); const onSearchQuery = params => { const api = Common.EditorApi.get(); if (params.find && params.find.length) { if (!api.asc_findText(params.find, params.forward, params.caseSensitive, params.highlight) ) { - f7.dialog.alert(null, 'Text not Found'); + f7.dialog.alert(null, _t.textNoTextFound); } } }; @@ -87,7 +110,9 @@ const Search = props => { } } - return -}; + return +}); -export {Search, SearchSettings} +const SearchSettingsWithTranslation = withTranslation()(SearchSettings); + +export {Search, SearchSettingsWithTranslation as SearchSettings} diff --git a/apps/documenteditor/mobile/src/page/main.jsx b/apps/documenteditor/mobile/src/page/main.jsx index 38d3e529f..4598f8f32 100644 --- a/apps/documenteditor/mobile/src/page/main.jsx +++ b/apps/documenteditor/mobile/src/page/main.jsx @@ -71,7 +71,7 @@ export default class MainPage extends Component { this.handleClickToOpenOptions('settings')}> {/* { Device.phone ? null : } */} - + {/* Page content */} @@ -80,7 +80,7 @@ export default class MainPage extends Component { {/* { Device.phone ? null : } */} - + { !this.state.editOptionsVisible ? null : diff --git a/apps/presentationeditor/mobile/locale/en.json b/apps/presentationeditor/mobile/locale/en.json index ea418aa9c..15ec8dca9 100644 --- a/apps/presentationeditor/mobile/locale/en.json +++ b/apps/presentationeditor/mobile/locale/en.json @@ -71,7 +71,14 @@ "textAddress": "address:", "textEmail": "email:", "textTel": "tel:", - "textPoweredBy": "Powered By" + "textPoweredBy": "Powered By", + "textReplaceAll": "Replace All", + "textFind": "Find", + "textSearch": "Search", + "textCaseSensitive": "Case Sensitive", + "textHighlight": "Highlight Results", + "textReplace": "Replace", + "textNoTextFound": "Text not Found" }, "Add": { "textSlide": "Slide", @@ -245,14 +252,14 @@ "textDisplay": "Display", "textScreenTip": "Screen Tip", "textDefault": "Selected text", - "textNoTextFound": "Text not found", "textReplaceAll": "Replace All", "textFind": "Find", "textFindAndReplace": "Find and Replace", "textDone": "Done", "textSearch": "Search", - "textCase": "Case sensitive", - "textHighlight": "Highlight results" + "textCaseSensitive": "Case Sensitive", + "textHighlight": "Highlight Results", + "textNoTextFound": "Text not Found" } }, "Common": { diff --git a/apps/presentationeditor/mobile/src/controller/Search.jsx b/apps/presentationeditor/mobile/src/controller/Search.jsx index ae761031e..d99567a2d 100644 --- a/apps/presentationeditor/mobile/src/controller/Search.jsx +++ b/apps/presentationeditor/mobile/src/controller/Search.jsx @@ -1,8 +1,9 @@ import React from 'react'; -import { List, ListItem, Toggle } from 'framework7-react'; +import { List, ListItem, Toggle, Page, Navbar, NavRight, Link } from 'framework7-react'; import { SearchController, SearchView, SearchSettingsView } from '../../../../common/mobile/lib/controller/Search'; import { f7 } from 'framework7-react'; -import { useTranslation, withTranslation } from 'react-i18next'; +import { withTranslation } from 'react-i18next'; +import { Device } from '../../../../common/mobile/utils/device'; class SearchSettings extends SearchSettingsView { constructor(props) { @@ -11,18 +12,40 @@ class SearchSettings extends SearchSettingsView { extraSearchOptions() { const anc_markup = super.extraSearchOptions(); + const show_popover = !Device.phone; + const { t } = this.props; + const _t = t("View.Settings", {returnObjects: true}); - const markup = - + const markup = ( + + + {!show_popover && + + {_t.textDone} + + } + + + this.onFindReplaceClick('find')} /> + this.onFindReplaceClick('replace')} /> + + + - ; + + + ); return {...anc_markup, ...markup}; } } class PESearchView extends SearchView { + constructor(props) { + super(props); + } + searchParams() { let params = super.searchParams(); @@ -39,16 +62,16 @@ class PESearchView extends SearchView { } } -const Search = props => { - // const { t } = useTranslation(); - // const _t = t('View.Settings', {returnObjects: true}); +const Search = withTranslation()(props => { + const { t } = props; + const _t = t('View.Settings', {returnObjects: true}); const onSearchQuery = params => { const api = Common.EditorApi.get(); if (params.find && params.find.length) { if (!api.findText(params.find, params.forward, params.caseSensitive) ) { - f7.dialog.alert(null, 'Text not Found'); + f7.dialog.alert(null, _t.textNoTextFound); } } }; @@ -69,7 +92,9 @@ const Search = props => { } } - return -}; + return +}); -export {Search, SearchSettings} +const SearchSettingsWithTranslation = withTranslation()(SearchSettings); + +export {Search, SearchSettingsWithTranslation as SearchSettings} diff --git a/apps/presentationeditor/mobile/src/page/main.jsx b/apps/presentationeditor/mobile/src/page/main.jsx index 2f4844379..e1c094826 100644 --- a/apps/presentationeditor/mobile/src/page/main.jsx +++ b/apps/presentationeditor/mobile/src/page/main.jsx @@ -64,12 +64,12 @@ export default class MainPage extends Component { this.handleClickToOpenOptions('coauth')}> this.handleClickToOpenOptions('settings')}> - + {/* Page content */} - + { !this.state.editOptionsVisible ? null : From 2ab1d32e9787d0a424e976da4d0c4cc0d3678066 Mon Sep 17 00:00:00 2001 From: SergeyEzhin Date: Tue, 16 Mar 2021 13:49:16 +0300 Subject: [PATCH 12/13] [DE mobile] Corrected stores according to mobx v. 6 --- .../mobile/src/store/applicationSettings.js | 28 ++--- .../mobile/src/store/chartSettings.js | 44 +++++-- .../mobile/src/store/documentInfo.js | 26 +++-- .../mobile/src/store/documentSettings.js | 36 ++++-- .../mobile/src/store/focusObjects.js | 55 ++++++--- .../mobile/src/store/palette.js | 13 ++- .../mobile/src/store/paragraphSettings.js | 34 ++++-- .../documenteditor/mobile/src/store/review.js | 19 ++- .../mobile/src/store/shapeSettings.js | 25 +++- .../mobile/src/store/tableSettings.js | 26 +++-- .../mobile/src/store/textSettings.js | 109 ++++++++++++------ 11 files changed, 302 insertions(+), 113 deletions(-) diff --git a/apps/documenteditor/mobile/src/store/applicationSettings.js b/apps/documenteditor/mobile/src/store/applicationSettings.js index a1e17a40c..9fea1a4f0 100644 --- a/apps/documenteditor/mobile/src/store/applicationSettings.js +++ b/apps/documenteditor/mobile/src/store/applicationSettings.js @@ -3,20 +3,20 @@ import {makeObservable, action, observable} from 'mobx'; export class storeApplicationSettings { constructor() { makeObservable(this, { - unitMeasurement: observable - , isSpellChecking: observable - , isNonprintingCharacters: observable - , isHiddenTableBorders: observable - , isComments: observable - , isResolvedComments: observable - , macrosMode: observable - , changeSpellCheck: action - , changeUnitMeasurement: action - , changeNoCharacters: action - , changeShowTableEmptyLine: action - , changeDisplayComments: action - , changeDisplayResolved: action - , changeMacrosSettings: action + unitMeasurement: observable, + isSpellChecking: observable, + isNonprintingCharacters: observable, + isHiddenTableBorders: observable, + isComments: observable, + isResolvedComments: observable, + macrosMode: observable, + changeSpellCheck: action, + changeUnitMeasurement: action, + changeNoCharacters: action, + changeShowTableEmptyLine: action, + changeDisplayComments: action, + changeDisplayResolved: action, + changeMacrosSettings: action }) } diff --git a/apps/documenteditor/mobile/src/store/chartSettings.js b/apps/documenteditor/mobile/src/store/chartSettings.js index 90485f462..8ae720d45 100644 --- a/apps/documenteditor/mobile/src/store/chartSettings.js +++ b/apps/documenteditor/mobile/src/store/chartSettings.js @@ -1,6 +1,22 @@ -import {action, observable, computed} from 'mobx'; +import {action, observable, computed, makeObservable} from 'mobx'; export class storeChartSettings { + constructor() { + makeObservable(this, { + chartStyles: observable, + fillColor: observable, + borderColor: observable, + clearChartStyles: action, + updateChartStyles: action, + styles: computed, + types: computed, + setFillColor: action, + getFillColor: action, + setBorderColor: action, + initBorderColor: action + }); + } + wrapTypesTransform () { const map = [ { ui:'inline', sdk: Asc.c_oAscWrapStyle2.Inline }, @@ -56,14 +72,18 @@ export class storeChartSettings { } // style - @observable chartStyles = null; - @action clearChartStyles () { + + chartStyles = null; + + clearChartStyles () { this.chartStyles = null; } - @action updateChartStyles (styles) { + + updateChartStyles (styles) { this.chartStyles = styles; } - @computed get styles () { + + get styles () { if (!this.chartStyles) return null; const widthContainer = document.querySelector(".page-content").clientWidth; const columns = parseInt(widthContainer / 70); // magic @@ -78,7 +98,8 @@ export class storeChartSettings { }); return styles; } - @computed get types () { + + get types () { const types = [ { type: Asc.c_oAscChartTypeSettings.barNormal, thumb: 'chart-03.png'}, { type: Asc.c_oAscChartTypeSettings.barStacked, thumb: 'chart-02.png'}, @@ -120,10 +141,13 @@ export class storeChartSettings { } // Fill Color - @observable fillColor = undefined; + + fillColor = undefined; + setFillColor (color) { this.fillColor = color; } + getFillColor (shapeProperties) { let fill = shapeProperties.get_fill(); const fillType = fill.get_type(); @@ -144,10 +168,13 @@ export class storeChartSettings { } // Border size and border color - @observable borderColor; + + borderColor; + setBorderColor (color) { this.borderColor = color; } + initBorderColor (stroke) { let color = 'transparent'; if (stroke && stroke.get_type() == Asc.c_oAscStrokeType.STROKE_COLOR) { @@ -164,6 +191,7 @@ export class storeChartSettings { this.borderColor = color; return color; } + borderSizeTransform () { const _sizes = [0, 0.5, 1, 1.5, 2.25, 3, 4.5, 6]; diff --git a/apps/documenteditor/mobile/src/store/documentInfo.js b/apps/documenteditor/mobile/src/store/documentInfo.js index 441702998..3bfa67356 100644 --- a/apps/documenteditor/mobile/src/store/documentInfo.js +++ b/apps/documenteditor/mobile/src/store/documentInfo.js @@ -1,21 +1,33 @@ -import { action, observable } from "mobx"; +import {action, observable, makeObservable} from "mobx"; export class storeDocumentInfo { - @observable infoObj = { + constructor() { + makeObservable(this, { + infoObj: observable, + isLoaded: observable, + dataDoc: observable, + switchIsLoaded: action, + changeCount: action, + setDataDoc: action + }); + } + + infoObj = { pageCount: 0, wordsCount: 0, paragraphCount: 0, symbolsCount: 0, symbolsWSCount: 0, }; - @observable isLoaded = false; - @observable dataDoc; - @action switchIsLoaded(value) { + isLoaded = false; + dataDoc; + + switchIsLoaded(value) { this.isLoaded = value; } - @action changeCount(obj) { + changeCount(obj) { if (obj) { if (obj.get_PageCount() > -1) this.infoObj.pageCount = obj.get_PageCount(); @@ -30,7 +42,7 @@ export class storeDocumentInfo { } } - @action setDataDoc(obj) { + setDataDoc(obj) { this.dataDoc = obj; } } \ No newline at end of file diff --git a/apps/documenteditor/mobile/src/store/documentSettings.js b/apps/documenteditor/mobile/src/store/documentSettings.js index d426d93f5..50a73a764 100644 --- a/apps/documenteditor/mobile/src/store/documentSettings.js +++ b/apps/documenteditor/mobile/src/store/documentSettings.js @@ -1,15 +1,31 @@ -import {action, observable, computed} from 'mobx'; +import {action, observable, computed, makeObservable} from 'mobx'; export class storeDocumentSettings { - @observable isPortrait = true; - @action resetPortrait (isPortrait) { + constructor() { + makeObservable(this, { + isPortrait: observable, + widthDocument: observable, + heightDocument: observable, + allSchemes: observable, + resetPortrait: action, + changeDocSize: action, + pageSizesIndex: computed, + addSchemes: action + }); + } + + isPortrait = true; + + resetPortrait (isPortrait) { this.isPortrait = isPortrait === true; } //Document Formats - @observable widthDocument; - @observable heightDocument; - @action changeDocSize (width, height) { + + widthDocument; + heightDocument; + + changeDocSize (width, height) { let w = width; let h = height; if (!this.isPortrait) { @@ -20,6 +36,7 @@ export class storeDocumentSettings { this.widthDocument = w; this.heightDocument = h; } + getPageSizesList () { const txtCm = Common.Utils.Metric.getMetricName(Common.Utils.Metric.c_MetricUnits.cm); const pageSizes = [ @@ -43,7 +60,8 @@ export class storeDocumentSettings { ]; return pageSizes; } - @computed get pageSizesIndex () { + + get pageSizesIndex () { let w = this.widthDocument; let h = this.heightDocument; let ind = -1; @@ -61,9 +79,9 @@ export class storeDocumentSettings { // Color Schemes - @observable allSchemes; + allSchemes; - @action addSchemes(arr) { + addSchemes(arr) { this.allSchemes = arr; } diff --git a/apps/documenteditor/mobile/src/store/focusObjects.js b/apps/documenteditor/mobile/src/store/focusObjects.js index e9ff424bc..b9a9f4e16 100644 --- a/apps/documenteditor/mobile/src/store/focusObjects.js +++ b/apps/documenteditor/mobile/src/store/focusObjects.js @@ -1,14 +1,32 @@ -import {action, observable, computed} from 'mobx'; +import {action, observable, computed, makeObservable} from 'mobx'; export class storeFocusObjects { - @observable _focusObjects = []; - @observable _headerType = 1; + constructor() { + makeObservable(this, { + _focusObjects: observable, + _headerType: observable, + resetFocusObjects: action, + settings: computed, + headerType: computed, + headerObject: computed, + paragraphObject: computed, + shapeObject: computed, + imageObject: computed, + tableObject: computed, + isTableInStack: computed, + chartObject: computed, + linkObject: computed + }); + } - @action resetFocusObjects (objects) { + _focusObjects = []; + _headerType = 1; + + resetFocusObjects (objects) { this._focusObjects = objects; } - @computed get settings() { + get settings() { const _settings = []; for (let object of this._focusObjects) { let type = object.get_ObjectType(); @@ -34,7 +52,8 @@ export class storeFocusObjects { } return _settings.filter((value, index, self) => self.indexOf(value) === index); } - @computed get headerType() { + + get headerType() { for (let object of this._focusObjects) { const type = object.get_ObjectType(); if (Asc.c_oAscTypeSelectElement.Header === type) { @@ -43,7 +62,8 @@ export class storeFocusObjects { } return this._headerType; } - @computed get headerObject() { + + get headerObject() { const headers = []; for (let object of this._focusObjects) { if (object.get_ObjectType() == Asc.c_oAscTypeSelectElement.Header) { @@ -57,7 +77,8 @@ export class storeFocusObjects { return undefined; } } - @computed get paragraphObject() { + + get paragraphObject() { const paragraphs = []; for (let object of this._focusObjects) { if (object.get_ObjectType() === Asc.c_oAscTypeSelectElement.Paragraph) { @@ -71,7 +92,8 @@ export class storeFocusObjects { return undefined; } } - @computed get shapeObject() { + + get shapeObject() { const shapes = []; for (let object of this._focusObjects) { if (object.get_ObjectType() === Asc.c_oAscTypeSelectElement.Image) { @@ -87,7 +109,8 @@ export class storeFocusObjects { return undefined; } } - @computed get imageObject() { + + get imageObject() { const images = []; for (let object of this._focusObjects) { if (object.get_ObjectType() == Asc.c_oAscTypeSelectElement.Image) { @@ -104,7 +127,8 @@ export class storeFocusObjects { return undefined; } } - @computed get tableObject() { + + get tableObject() { const tables = []; for (let object of this._focusObjects) { if (object.get_ObjectType() == Asc.c_oAscTypeSelectElement.Table) { @@ -118,7 +142,8 @@ export class storeFocusObjects { return undefined; } } - @computed get isTableInStack() { + + get isTableInStack() { for (let object of this._focusObjects) { if (object.get_ObjectType() == Asc.c_oAscTypeSelectElement.Table) { return true; @@ -126,7 +151,8 @@ export class storeFocusObjects { } return false; } - @computed get chartObject() { + + get chartObject() { const charts = []; for (let object of this._focusObjects) { if (object.get_ObjectValue() && object.get_ObjectValue().get_ChartProperties()) { @@ -140,7 +166,8 @@ export class storeFocusObjects { return undefined; } } - @computed get linkObject() { + + get linkObject() { const links = []; for (let object of this._focusObjects) { if (object.get_ObjectType() == Asc.c_oAscTypeSelectElement.Hyperlink) { diff --git a/apps/documenteditor/mobile/src/store/palette.js b/apps/documenteditor/mobile/src/store/palette.js index f5e40e59b..55ba20a2d 100644 --- a/apps/documenteditor/mobile/src/store/palette.js +++ b/apps/documenteditor/mobile/src/store/palette.js @@ -1,9 +1,16 @@ -import {action, observable} from 'mobx'; +import {action, observable, makeObservable} from 'mobx'; export class storePalette { - @observable customColors = []; + constructor() { + makeObservable(this, { + customColors: observable, + changeCustomColors: action + }); + } + + customColors = []; - @action changeCustomColors (colors) { + changeCustomColors (colors) { this.customColors = colors; } } \ No newline at end of file diff --git a/apps/documenteditor/mobile/src/store/paragraphSettings.js b/apps/documenteditor/mobile/src/store/paragraphSettings.js index 70c465092..ed5bd2004 100644 --- a/apps/documenteditor/mobile/src/store/paragraphSettings.js +++ b/apps/documenteditor/mobile/src/store/paragraphSettings.js @@ -1,18 +1,33 @@ -import {action, observable, computed} from 'mobx'; +import {action, observable, computed, makeObservable} from 'mobx'; export class storeParagraphSettings { - @observable styles = []; - @observable styleThumbSize = null; - @observable styleName = undefined; + constructor() { + makeObservable(this, { + styles: observable, + styleThumbSize: observable, + styleName: observable, + backColor: observable, + initEditorStyles: action, + paragraphStyles: computed, + changeParaStyleName: action, + setBackColor: action, + getBackgroundColor: action + }); + } - @action initEditorStyles (styles) { + styles = []; + styleThumbSize = null; + styleName = undefined; + + initEditorStyles (styles) { this.styles = styles.get_MergedStyles(); this.styleThumbSize = { width : styles.STYLE_THUMBNAIL_WIDTH, height : styles.STYLE_THUMBNAIL_HEIGHT }; } - @computed get paragraphStyles () { + + get paragraphStyles () { let _styles = []; for (let style of this.styles) { _styles.push({ @@ -22,14 +37,17 @@ export class storeParagraphSettings { } return _styles; } - @action changeParaStyleName (name) { + + changeParaStyleName (name) { this.styleName = name; } - @observable backColor = undefined; + backColor = undefined; + setBackColor (color) { this.backColor = color; } + getBackgroundColor (paragraphObject) { const shade = paragraphObject.get_Shade(); let backColor = 'transparent'; diff --git a/apps/documenteditor/mobile/src/store/review.js b/apps/documenteditor/mobile/src/store/review.js index 9c5450477..61c39e384 100644 --- a/apps/documenteditor/mobile/src/store/review.js +++ b/apps/documenteditor/mobile/src/store/review.js @@ -1,15 +1,24 @@ -import {action, observable, computed} from 'mobx'; +import {action, observable, makeObservable} from 'mobx'; export class storeReview { - @observable displayMode = 'markup'; + constructor() { + makeObservable(this, { + displayMode: observable, + dataChanges: observable, + changeDisplayMode: action, + changeArrReview: action + }); + } - @action changeDisplayMode (mode) { + displayMode = 'markup'; + + changeDisplayMode (mode) { this.displayMode = mode; } - @observable dataChanges = []; + dataChanges = []; - @action changeArrReview (data) { + changeArrReview (data) { this.dataChanges = data && data.length > 0 ? data : []; } } \ No newline at end of file diff --git a/apps/documenteditor/mobile/src/store/shapeSettings.js b/apps/documenteditor/mobile/src/store/shapeSettings.js index f4e752ed0..50e6c68e3 100644 --- a/apps/documenteditor/mobile/src/store/shapeSettings.js +++ b/apps/documenteditor/mobile/src/store/shapeSettings.js @@ -1,6 +1,17 @@ -import {action, observable, computed} from 'mobx'; +import {action, observable, computed, makeObservable} from 'mobx'; export class storeShapeSettings { + constructor() { + makeObservable(this, { + fillColor: observable, + borderColorView: observable, + setFillColor: action, + getFillColor: action, + setBorderColor: action, + initBorderColorView: action + }); + } + getStyleGroups () { const styles = [ { @@ -136,6 +147,7 @@ export class storeShapeSettings { } return groups; } + wrapTypesTransform () { const map = [ { ui:'inline', sdk: Asc.c_oAscWrapStyle2.Inline }, @@ -191,10 +203,13 @@ export class storeShapeSettings { } // Fill Color - @observable fillColor = undefined; + + fillColor = undefined; + setFillColor (color) { this.fillColor = color; } + getFillColor (shapeObject) { let fill = shapeObject.get_ShapeProperties().get_fill(); const fillType = fill.get_type(); @@ -215,10 +230,13 @@ export class storeShapeSettings { } // Border size and color - @observable borderColorView; + + borderColorView; + setBorderColor (color) { this.borderColorView = color; } + initBorderColorView (shapeObject) { const stroke = shapeObject.get_ShapeProperties().get_stroke(); let color = 'transparent'; @@ -236,6 +254,7 @@ export class storeShapeSettings { this.borderColorView = color; return color; } + borderSizeTransform () { const _sizes = [0, 0.5, 1, 1.5, 2.25, 3, 4.5, 6]; diff --git a/apps/documenteditor/mobile/src/store/tableSettings.js b/apps/documenteditor/mobile/src/store/tableSettings.js index b40d71bc0..892e307a2 100644 --- a/apps/documenteditor/mobile/src/store/tableSettings.js +++ b/apps/documenteditor/mobile/src/store/tableSettings.js @@ -3,14 +3,25 @@ import {f7} from 'framework7-react'; export class storeTableSettings { constructor() { - makeObservable(this) + makeObservable(this, { + _templates: observable, + cellBorders: observable, + cellBorderWidth: observable, + cellBorderColor: observable, + initTableTemplates: action, + styles: computed, + updateCellBorderWidth: action, + updateCellBorderColor: action, + }); } - @observable _templates = []; - @action initTableTemplates (templates) { + _templates = []; + + initTableTemplates (templates) { this._templates = templates; } - @computed get styles () { + + get styles () { let styles = []; for (let template of this._templates) { styles.push({ @@ -69,9 +80,10 @@ export class storeTableSettings { } // Border style - @observable cellBorders; - @observable cellBorderWidth = 0.5; - @observable cellBorderColor = '000000'; + + cellBorders; + cellBorderWidth = 0.5; + cellBorderColor = '000000'; borderSizeTransform () { const _sizes = [0, 0.5, 1, 1.5, 2.25, 3, 4.5, 6]; diff --git a/apps/documenteditor/mobile/src/store/textSettings.js b/apps/documenteditor/mobile/src/store/textSettings.js index 48d42403b..9c794163c 100644 --- a/apps/documenteditor/mobile/src/store/textSettings.js +++ b/apps/documenteditor/mobile/src/store/textSettings.js @@ -1,25 +1,64 @@ -import {action, observable, computed} from 'mobx'; +import {action, observable, computed, makeObservable} from 'mobx'; export class storeTextSettings { - @observable fontsArray = []; - @observable fontName = ''; - @observable fontSize = undefined; - @observable isBold = false; - @observable isItalic = false; - @observable isUnderline = false; - @observable isStrikethrough = false; - @observable typeBaseline = undefined; - @observable listType = undefined; - @observable typeBullets = undefined; - @observable typeNumbers = undefined; - @observable paragraphAlign = undefined; - @observable textColor = undefined; - @observable customTextColors = []; - @observable lineSpacing = undefined; - @observable backgroundColor = undefined; + constructor() { + makeObservable(this, { + fontsArray: observable, + fontName: observable, + fontSize: observable, + isBold: observable, + isItalic: observable, + isUnderline: observable, + isStrikethrough: observable, + typeBaseline: observable, + listType: observable, + typeBullets: observable, + typeNumbers: observable, + paragraphAlign: observable, + textColor: observable, + customTextColors: observable, + lineSpacing: observable, + backgroundColor: observable, + initEditorFonts: action, + resetFontName: action, + resetFontSize: action, + resetIsBold: action, + resetIsItalic: action, + resetIsUnderline: action, + resetIsStrikeout: action, + resetTypeBaseline: action, + isSuperscript: computed, + isSubscript: computed, + resetListType: action, + resetBullets: action, + resetNumbers: action, + resetParagraphAlign: action, + resetTextColor: action, + changeCustomTextColors: action, + resetLineSpacing: action, + resetBackgroundColor: action + }); + } + + fontsArray = []; + fontName = ''; + fontSize = undefined; + isBold = false; + isItalic = false; + isUnderline = false; + isStrikethrough = false; + typeBaseline = undefined; + listType = undefined; + typeBullets = undefined; + typeNumbers = undefined; + paragraphAlign = undefined; + textColor = undefined; + customTextColors = []; + lineSpacing = undefined; + backgroundColor = undefined; - @action initEditorFonts (fonts, select) { + initEditorFonts (fonts, select) { let array = []; for (let font of fonts) { let fontId = font.asc_getFontId(); @@ -33,49 +72,49 @@ export class storeTextSettings { } this.fontsArray = array; } - @action resetFontName (font) { + resetFontName (font) { let name = (typeof font.get_Name) === "function" ? font.get_Name() : font.asc_getName(); this.fontName = name; } - @action resetFontSize (size) { + resetFontSize (size) { this.fontSize = size; } - @action resetIsBold (isBold) { + resetIsBold (isBold) { this.isBold = isBold; } - @action resetIsItalic (isItalic) { + resetIsItalic (isItalic) { this.isItalic = isItalic; } - @action resetIsUnderline (isUnderline) { + resetIsUnderline (isUnderline) { this.isUnderline = isUnderline; } - @action resetIsStrikeout (isStrikethrough) { + resetIsStrikeout (isStrikethrough) { this.isStrikethrough = isStrikethrough; } // vertical align - @action resetTypeBaseline (typeBaseline) { + resetTypeBaseline (typeBaseline) { this.typeBaseline = typeBaseline; } - @computed get isSuperscript() { + get isSuperscript() { return (this.typeBaseline === 1); } - @computed get isSubscript() { + get isSubscript() { return (this.typeBaseline === 2); } // bullets - @action resetListType (type) { + resetListType (type) { this.listType = type; } - @action resetBullets (type) { + resetBullets (type) { this.typeBullets = type; } - @action resetNumbers (type) { + resetNumbers (type) { this.typeNumbers = type; } - @action resetParagraphAlign (align) { + resetParagraphAlign (align) { let value; switch (align) { case 0: @@ -94,7 +133,7 @@ export class storeTextSettings { this.paragraphAlign = value; } - @action resetTextColor (color) { + resetTextColor (color) { let value; if (color) { if (color.get_auto()) { @@ -113,16 +152,16 @@ export class storeTextSettings { this.textColor = value; } - @action changeCustomTextColors (colors) { + changeCustomTextColors (colors) { this.customTextColors = colors; } - @action resetLineSpacing (vc) { + resetLineSpacing (vc) { let line = (vc.get_Line() === null || vc.get_LineRule() === null || vc.get_LineRule() != 1) ? -1 : vc.get_Line(); this.lineSpacing = line; } - @action resetBackgroundColor (color) { + resetBackgroundColor (color) { let value; if (color.get_type() == Asc.c_oAscColor.COLOR_TYPE_SCHEME) { value = { From d16393eb696f4a2c6856de4132a59d170cdf51b3 Mon Sep 17 00:00:00 2001 From: SergeyEzhin Date: Tue, 16 Mar 2021 18:06:12 +0300 Subject: [PATCH 13/13] [DE mobile] Changing event for switches --- .../mobile/src/view/edit/EditParagraph.jsx | 10 +++++----- .../mobile/src/view/edit/EditShape.jsx | 4 ++-- .../mobile/src/view/edit/EditTable.jsx | 18 +++++++++--------- 3 files changed, 16 insertions(+), 16 deletions(-) diff --git a/apps/documenteditor/mobile/src/view/edit/EditParagraph.jsx b/apps/documenteditor/mobile/src/view/edit/EditParagraph.jsx index bd1d8c762..048265fd4 100644 --- a/apps/documenteditor/mobile/src/view/edit/EditParagraph.jsx +++ b/apps/documenteditor/mobile/src/view/edit/EditParagraph.jsx @@ -79,21 +79,21 @@ const PageAdvancedSettings = props => { - {props.onSpaceBetween(!spaceBetween)}}/> + {props.onSpaceBetween(!spaceBetween)}}/> - {props.onBreakBefore(!breakBefore)}}/> + {props.onBreakBefore(!breakBefore)}}/> - {props.onOrphan(!orphanControl)}}/> + {props.onOrphan(!orphanControl)}}/> - {props.onKeepTogether(!keepTogether)}}/> + {props.onKeepTogether(!keepTogether)}}/> - {props.onKeepNext(!keepWithNext)}}/> + {props.onKeepNext(!keepWithNext)}}/> diff --git a/apps/documenteditor/mobile/src/view/edit/EditShape.jsx b/apps/documenteditor/mobile/src/view/edit/EditShape.jsx index 56da59280..27bcc1e6e 100644 --- a/apps/documenteditor/mobile/src/view/edit/EditShape.jsx +++ b/apps/documenteditor/mobile/src/view/edit/EditShape.jsx @@ -317,10 +317,10 @@ const PageWrap = props => { } - {props.onMoveText(!moveText)}}/> + {props.onMoveText(!moveText)}}/> - {props.onOverlap(!overlap)}}/> + {props.onOverlap(!overlap)}}/> { diff --git a/apps/documenteditor/mobile/src/view/edit/EditTable.jsx b/apps/documenteditor/mobile/src/view/edit/EditTable.jsx index 7e31718d7..01efdba28 100644 --- a/apps/documenteditor/mobile/src/view/edit/EditTable.jsx +++ b/apps/documenteditor/mobile/src/view/edit/EditTable.jsx @@ -21,10 +21,10 @@ const PageTableOptions = props => { - {props.onOptionRepeat(!isRepeat)}}/> + {props.onOptionRepeat(!isRepeat)}}/> - {props.onOptionResize(!isResize)}}/> + {props.onOptionResize(!isResize)}}/> {_t.textCellMargins} @@ -79,7 +79,7 @@ const PageWrap = props => { - {props.onWrapMoveText(!moveText)}}/> + {props.onWrapMoveText(!moveText)}}/> { @@ -189,24 +189,24 @@ const PageStyleOptions = props => { - {props.onCheckTemplateChange(tableLook, 0, !isFirstRow)}}/> + {props.onCheckTemplateChange(tableLook, 0, !isFirstRow)}}/> - {props.onCheckTemplateChange(tableLook, 1, !isLastRow)}}/> + {props.onCheckTemplateChange(tableLook, 1, !isLastRow)}}/> - {props.onCheckTemplateChange(tableLook, 2, !isBandHor)}}/> + {props.onCheckTemplateChange(tableLook, 2, !isBandHor)}}/> - {props.onCheckTemplateChange(tableLook, 3, !isFirstCol)}}/> + {props.onCheckTemplateChange(tableLook, 3, !isFirstCol)}}/> - {props.onCheckTemplateChange(tableLook, 4, !isLastCol)}}/> + {props.onCheckTemplateChange(tableLook, 4, !isLastCol)}}/> - {props.onCheckTemplateChange(tableLook, 5, !isBandVer)}}/> + {props.onCheckTemplateChange(tableLook, 5, !isBandVer)}}/>