From c2ba15338cc999caf6c2eee64675a0a5727ccc1d Mon Sep 17 00:00:00 2001 From: SergeyEzhin Date: Mon, 1 Mar 2021 18:03:47 +0300 Subject: [PATCH 01/21] [PE mobile] Fixed Link Settings --- .../mobile/src/controller/edit/EditLink.jsx | 8 ++++---- apps/presentationeditor/mobile/src/view/edit/EditLink.jsx | 7 ++++--- 2 files changed, 8 insertions(+), 7 deletions(-) diff --git a/apps/presentationeditor/mobile/src/controller/edit/EditLink.jsx b/apps/presentationeditor/mobile/src/controller/edit/EditLink.jsx index 6139aca40..756545b16 100644 --- a/apps/presentationeditor/mobile/src/controller/edit/EditLink.jsx +++ b/apps/presentationeditor/mobile/src/controller/edit/EditLink.jsx @@ -67,7 +67,7 @@ class EditLinkController extends Component { let mask = "ppaction://hlinksldjumpslide", indSlide = url.indexOf(mask); if (0 == indSlide) { - slideNum = parseInt(url.substring(mask.length)); + this.slideNum = parseInt(url.substring(mask.length)); if (slideNum < 0) this.slideNum = 0; if (slideNum >= slidesCount) this.slideNum = slidesCount - 1; } else this.slideNum = 0; @@ -121,7 +121,7 @@ class EditLinkController extends Component { break; case 1: url = url + "showjump?jump=previousslide"; - slidetip = _t.textPrevSlide; + slidetip = _t.textPreviousSlide; break; case 2: url = url + "showjump?jump=firstslide"; @@ -137,12 +137,12 @@ class EditLinkController extends Component { break; } props.put_Value(url); - props.put_ToolTip(!tip ? slidetip : tip); + props.put_ToolTip(tip === '' ? slidetip : tip); def_display = slidetip; } if (!linkInfo.displayDisabled) { - props.put_Text(!display ? def_display : display); + props.put_Text(display === '' ? def_display : display); } else props.put_Text(null); diff --git a/apps/presentationeditor/mobile/src/view/edit/EditLink.jsx b/apps/presentationeditor/mobile/src/view/edit/EditLink.jsx index e7e0b80e9..b6d154e97 100644 --- a/apps/presentationeditor/mobile/src/view/edit/EditLink.jsx +++ b/apps/presentationeditor/mobile/src/view/edit/EditLink.jsx @@ -13,8 +13,8 @@ const PageTypeLink = props => { - {setTypeLink(1); props.changeType(1); props.initLink();}}> - {setTypeLink(0); props.changeType(0); props.initLink();}}> + {setTypeLink(1); props.changeType(1);}}> + {setTypeLink(0); props.changeType(0);}}> ) @@ -32,7 +32,7 @@ const PageLinkTo = props => { props.changeTo(type); }; - const [stateNumberTo, setNumberTo] = useState(0); + const [stateNumberTo, setNumberTo] = useState(props.numberTo); const changeNumber = (curNumber, isDecrement) => { setTypeTo(4); @@ -139,6 +139,7 @@ const PageLink = props => { From ed550f1dceaf84344cceb600343e2894b916353d Mon Sep 17 00:00:00 2001 From: SergeyEzhin Date: Tue, 2 Mar 2021 22:33:26 +0300 Subject: [PATCH 02/21] [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/21] [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/21] [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/21] [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/21] [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/21] [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/21] [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/21] [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 f5d48e6492692cac4d75f2b345e9f3a68ab4b57a Mon Sep 17 00:00:00 2001 From: JuliaSvinareva Date: Wed, 10 Mar 2021 21:08:59 +0300 Subject: [PATCH 10/21] [mobile] Make view current comments, fixed change comment --- .../lib/controller/collaboration/Comments.jsx | 129 +++++++++-------- apps/common/mobile/lib/store/comments.js | 29 ++++ .../lib/view/collaboration/Comments.jsx | 137 ++++++++++++++---- .../mobile/resources/less/comments.less | 20 +++ apps/common/mobile/resources/less/icons.less | 3 + 5 files changed, 233 insertions(+), 85 deletions(-) diff --git a/apps/common/mobile/lib/controller/collaboration/Comments.jsx b/apps/common/mobile/lib/controller/collaboration/Comments.jsx index 8b44d1322..d7204f010 100644 --- a/apps/common/mobile/lib/controller/collaboration/Comments.jsx +++ b/apps/common/mobile/lib/controller/collaboration/Comments.jsx @@ -58,6 +58,8 @@ class CommentsController extends Component { api.asc_registerCallback('asc_onRemoveComment', this.removeComment.bind(this)); api.asc_registerCallback('asc_onRemoveComments', this.removeComments.bind(this)); api.asc_registerCallback('asc_onChangeCommentData', this.changeCommentData.bind(this)); + api.asc_registerCallback('asc_onShowComment', this.changeShowComments.bind(this)); + api.asc_registerCallback('asc_onHideComment', this.hideComments.bind(this)); }); Common.Notifications.on('comments:filterchange', this.onFilterChange.bind(this)); // for sse @@ -97,57 +99,58 @@ class CommentsController extends Component { this.removeComment(data[i]); } } + changeShowComments (id) { + this.storeComments.changeShowComment(id); + } + hideComments () { + //Common.Notifications.trigger('closeviewcomment'); + } changeCommentData (id, data) { - let date = null; - let replies = null; - let repliesCount = 0; + const changeComment = {}; + + const date = (data.asc_getOnlyOfficeTime()) ? new Date(stringOOToLocalDate(data.asc_getOnlyOfficeTime())) : + ((data.asc_getTime() === '') ? new Date() : new Date(stringUtcToLocalDate(data.asc_getTime()))); + + let user = this.usersStore.searchUserById(data.asc_getUserId()); + + changeComment.comment = data.asc_getText(); + changeComment.userId = data.asc_getUserId(); + changeComment.userName = data.asc_getUserName(); + changeComment.userColor = (user) ? user.asc_getColor() : null; + changeComment.resolved = data.asc_getSolved(); + changeComment.quote = data.asc_getQuoteText(); + changeComment.time = date.getTime(); + changeComment.date = dateToLocaleTimeString(date); + changeComment.editable = this.appOptions.canEditComments || (data.asc_getUserId() === this.curUserId); + changeComment.removable = this.appOptions.canDeleteComments || (data.asc_getUserId() === this.curUserId); + let dateReply = null; + const replies = []; - const comment = this.storeComments.findComment(id); + const repliesCount = data.asc_getRepliesCount(); + for (let i = 0; i < repliesCount; ++i) { - if (comment) { + dateReply = (data.asc_getReply(i).asc_getOnlyOfficeTime()) ? new Date(stringOOToLocalDate(data.asc_getReply(i).asc_getOnlyOfficeTime())) : + ((data.asc_getReply(i).asc_getTime() === '') ? new Date() : new Date(stringUtcToLocalDate(data.asc_getReply(i).asc_getTime()))); - date = (data.asc_getOnlyOfficeTime()) ? new Date(stringOOToLocalDate(data.asc_getOnlyOfficeTime())) : - ((data.asc_getTime() === '') ? new Date() : new Date(stringUtcToLocalDate(data.asc_getTime()))); - - let user = this.usersStore.searchUserById(data.asc_getUserId()); - - comment.comment = data.asc_getText(); - comment.userId = data.asc_getUserId(); - comment.userName = data.asc_getUserName(); - comment.userColor = (user) ? user.asc_getColor() : null; - comment.resolved = data.asc_getSolved(); - comment.quote = data.asc_getQuoteText(); - comment.time = date.getTime(); - comment.date = dateToLocaleTimeString(date); - comment.editable = this.appOptions.canEditComments || (data.asc_getUserId() === this.curUserId); - comment.removable = this.appOptions.canDeleteComments || (data.asc_getUserId() === this.curUserId); - - replies = []; - - repliesCount = data.asc_getRepliesCount(); - for (let i = 0; i < repliesCount; ++i) { - - dateReply = (data.asc_getReply(i).asc_getOnlyOfficeTime()) ? new Date(stringOOToLocalDate(data.asc_getReply(i).asc_getOnlyOfficeTime())) : - ((data.asc_getReply(i).asc_getTime() === '') ? new Date() : new Date(stringUtcToLocalDate(data.asc_getReply(i).asc_getTime()))); - - user = this.usersStore.searchUserById(data.asc_getReply(i).asc_getUserId()); - const userName = data.asc_getReply(i).asc_getUserName(); - replies.push({ - ind: i, - userId: data.asc_getReply(i).asc_getUserId(), - userName: userName, - userColor: (user) ? user.asc_getColor() : null, - date: dateToLocaleTimeString(dateReply), - reply: data.asc_getReply(i).asc_getText(), - time: dateReply.getTime(), - userInitials: this.usersStore.getInitials(userName), - editable: this.appOptions.canEditComments || (data.asc_getReply(i).asc_getUserId() === this.curUserId), - removable: this.appOptions.canDeleteComments || (data.asc_getReply(i).asc_getUserId() === this.curUserId) - }); - } - comment.replies = replies; + user = this.usersStore.searchUserById(data.asc_getReply(i).asc_getUserId()); + const userName = data.asc_getReply(i).asc_getUserName(); + replies.push({ + ind: i, + userId: data.asc_getReply(i).asc_getUserId(), + userName: userName, + userColor: (user) ? user.asc_getColor() : null, + date: dateToLocaleTimeString(dateReply), + reply: data.asc_getReply(i).asc_getText(), + time: dateReply.getTime(), + userInitials: this.usersStore.getInitials(userName), + editable: this.appOptions.canEditComments || (data.asc_getReply(i).asc_getUserId() === this.curUserId), + removable: this.appOptions.canDeleteComments || (data.asc_getReply(i).asc_getUserId() === this.curUserId) + }); } + changeComment.replies = replies; + + this.props.storeComments.changeComment(id, changeComment); } onFilterChange (filter) { this.storeComments.changeFilter(filter); @@ -308,7 +311,7 @@ class EditCommentController extends Component { var reply = comment.replies; if (reply && reply.length > 0) { reply.forEach((reply) => { - var addReply = (!!Asc.asc_CCommentDataWord ? new Asc.asc_CCommentDataWord(null) : new Asc.asc_CCommentData(null)); + var addReply = (typeof Asc.asc_CCommentDataWord !== 'undefined' ? new Asc.asc_CCommentDataWord(null) : new Asc.asc_CCommentData(null)); if (addReply) { addReply.asc_putText(reply.reply); addReply.asc_putTime(utcDateToString(new Date(reply.time))); @@ -325,11 +328,12 @@ class EditCommentController extends Component { } } onEditComment (comment, text) { - comment.comment = text.trim(); + const changeComment = {...comment}; + changeComment.comment = text.trim(); const user = this.props.users.currentUser; - comment.userid = user.asc_getIdOriginal(); - comment.username = user.asc_getUserName(); - this.onChangeComment(comment); + changeComment.userid = user.asc_getIdOriginal(); + changeComment.username = user.asc_getUserName(); + this.onChangeComment(changeComment); } onAddReply (comment, replyVal) { let reply = null; @@ -386,10 +390,13 @@ class EditCommentController extends Component { onEditReply (comment, reply, textReply) { const currentUser = this.props.users.currentUser; const indReply = reply.ind; - comment.replies[indReply].reply = textReply; - comment.replies[indReply].userid = currentUser.asc_getIdOriginal(); - comment.replies[indReply].username = currentUser.asc_getUserName(); - this.onChangeComment(comment); + const changeComment = {...comment}; + changeComment.replies = [...comment.replies]; + changeComment.replies[indReply] = {...reply}; + changeComment.replies[indReply].reply = textReply; + changeComment.replies[indReply].userid = currentUser.asc_getIdOriginal(); + changeComment.replies[indReply].username = currentUser.asc_getUserName(); + this.onChangeComment(changeComment); } render() { const storeComments = this.props.storeComments; @@ -418,14 +425,18 @@ class ViewCommentsController extends Component { Common.Notifications.on('viewcomment', () => { this.setState({isOpenViewCurComments: true}); }); + Common.Notifications.on('closeviewcomment', () => { + this.closeViewCurComments(); + }); } closeViewCurComments () { + f7.sheet.close('#view-comment-sheet'); this.setState({isOpenViewCurComments: false}); } onResolveComment (comment) { let reply = null, addReply = null, - ascComment = (!!Asc.asc_CCommentDataWord ? new Asc.asc_CCommentDataWord(null) : new Asc.asc_CCommentData(null)); + ascComment = (typeof Asc.asc_CCommentDataWord !== 'undefined' ? new Asc.asc_CCommentDataWord(null) : new Asc.asc_CCommentData(null)); if (ascComment && comment) { ascComment.asc_putText(comment.comment); @@ -444,7 +455,7 @@ class ViewCommentsController extends Component { reply = comment.replies; if (reply && reply.length > 0) { reply.forEach((reply) => { - addReply = (!!Asc.asc_CCommentDataWord ? new Asc.asc_CCommentDataWord(null) : new Asc.asc_CCommentData(null)); + addReply = (typeof Asc.asc_CCommentDataWord !== 'undefined' ? new Asc.asc_CCommentDataWord(null) : new Asc.asc_CCommentData(null)); if (addReply) { addReply.asc_putText(reply.reply); addReply.asc_putTime(utcDateToString(new Date(reply.time))); @@ -546,7 +557,11 @@ class ViewCommentsController extends Component { return( {this.props.allComments && } - {this.state.isOpenViewCurComments && } + {this.state.isOpenViewCurComments && } ) } diff --git a/apps/common/mobile/lib/store/comments.js b/apps/common/mobile/lib/store/comments.js index ffc55c4c2..7852e0d0f 100644 --- a/apps/common/mobile/lib/store/comments.js +++ b/apps/common/mobile/lib/store/comments.js @@ -9,8 +9,12 @@ export class storeComments { filter: observable, groupCollectionFilter: observable, + showComments: observable, + changeShowComment: action, + addComment: action, removeComment: action, + changeComment: action, changeFilter: action, sortComments: computed, @@ -29,6 +33,14 @@ export class storeComments { filter = undefined; groupCollectionFilter = []; // for sse + showComments = []; + changeShowComment (uid) { + this.showComments.length = 0; + uid.forEach((item) => { + this.showComments.push(this.findComment(item)); + }); + } + addComment (comment) { comment.groupName ? this.addCommentToGroupCollection(comment) : this.addCommentToCollection(comment); } @@ -81,6 +93,23 @@ export class storeComments { } } + changeComment (id, changeComment) { + const comment = this.findComment(id); + if (comment) { + comment.comment = changeComment.comment; + comment.userId = changeComment.userId; + comment.userName = changeComment.userName; + comment.userColor = changeComment.userColor; + comment.resolved = changeComment.resolved; + comment.quote = changeComment.quote; + comment.time = changeComment.time; + comment.date = changeComment.date; + comment.editable = changeComment.editable; + comment.removable = changeComment.removable; + comment.replies = changeComment.replies; + } + } + changeFilter (filter) { let comments = []; this.filter = filter; diff --git a/apps/common/mobile/lib/view/collaboration/Comments.jsx b/apps/common/mobile/lib/view/collaboration/Comments.jsx index 96d87328f..a6495fedd 100644 --- a/apps/common/mobile/lib/view/collaboration/Comments.jsx +++ b/apps/common/mobile/lib/view/collaboration/Comments.jsx @@ -4,6 +4,18 @@ import { f7, Popup, Sheet, Popover, Page, Toolbar, Navbar, NavLeft, NavRight, Na import { useTranslation } from 'react-i18next'; import {Device} from '../../../utils/device'; +// Utils +const sliceQuote = (text) => { + if (text) { + let sliced = text.slice(0, 100); + if (sliced.length < text.length) { + sliced += '...'; + return sliced; + } + return text; + } +}; + // Add comment const AddCommentPopup = inject("storeComments")(observer(props => { @@ -533,16 +545,6 @@ const ViewComments = ({storeComments, storeAppOptions, onCommentMenuClick, onRes const viewMode = !storeAppOptions.canComments; const comments = storeComments.sortComments; - const sliceQuote = (text) => { - if (text) { - let sliced = text.slice(0, 100); - if (sliced.length < text.length) { - sliced += '...'; - return sliced; - } - return text; - } - }; const [clickComment, setComment] = useState(); const [commentActionsOpened, openActionComment] = useState(false); @@ -633,18 +635,105 @@ const ViewComments = ({storeComments, storeAppOptions, onCommentMenuClick, onRes const _ViewComments = inject('storeComments', 'storeAppOptions')(observer(ViewComments)); -const CommentList = () => { - return ( - - - - ) -}; - -const ViewCommentSheet = ({closeCurComments}) => { +const CommentList = inject("storeComments", "storeAppOptions")(observer(({storeComments, storeAppOptions, onCommentMenuClick, onResolveComment}) => { const { t } = useTranslation(); const _t = t('Common.Collaboration', {returnObjects: true}); + const isAndroid = Device.android; + const viewMode = !storeAppOptions.canComments; + + const comments = storeComments.showComments; + + const [currentIndex, setCurrentIndex] = useState(0); + const comment = comments[currentIndex]; + + const [commentActionsOpened, openActionComment] = useState(false); + + const [reply, setReply] = useState(); + const [replyActionsOpened, openActionReply] = useState(false); + + return ( + + + {_t.textAddReply} +
+ + +
+ + + + +
+
+ {isAndroid &&
{comment.userInitials}
} +
+
{comment.userName}
+
{comment.date}
+
+
+ {!viewMode && +
+
{onResolveComment(comment);}}>
+
{openActionComment(true);}} + >
+
+ } +
+
+ {comment.quote &&
{sliceQuote(comment.quote)}
} + 
{comment.comment}
+ {comment.replies.length > 0 && +
    + {comment.replies.map((reply, indexReply) => { + return ( +
  • +
    +
    +
    +
    +
    + {isAndroid &&
    {reply.userInitials}
    } +
    +
    {reply.userName}
    +
    {reply.date}
    +
    +
    + {!viewMode && +
    +
    {setReply(reply); openActionReply(true);}} + > + +
    +
    + } +
    +
    + 
    {reply.reply}
    +
    +
    +
    +
    +
    • + ) + })} +
+ } +
+ + + + + + + ) +})); + +const ViewCommentSheet = ({closeCurComments, onCommentMenuClick, onResolveComment}) => { useEffect(() => { f7.sheet.open('#view-comment-sheet'); }); @@ -681,7 +770,6 @@ const ViewCommentSheet = ({closeCurComments}) => { const swipeEnd = parseInt(touchObj.clientY); const dist = swipeEnd - stateStartY; if (isNeedClose) { - f7.sheet.close('#view-comment-sheet'); closeCurComments(); } else if (stateHeight === '90%' && dist > 20) { setHeight('45%'); @@ -689,17 +777,10 @@ const ViewCommentSheet = ({closeCurComments}) => { }; return ( - - {_t.textAddReply} -
- - -
-
- + ) }; diff --git a/apps/common/mobile/resources/less/comments.less b/apps/common/mobile/resources/less/comments.less index 9bd88e835..c4f1a3036 100644 --- a/apps/common/mobile/resources/less/comments.less +++ b/apps/common/mobile/resources/less/comments.less @@ -154,4 +154,24 @@ } } } +} + +.page-current-comment { + position: relative; + .page-content { + background-color: @white; + } + .comment-list { + ul { + &:before, &:after { + content: none; + } + .item-content .item-inner { + padding-top: 0; + .reply-list .item-content .item-inner { + padding-top: 13px; + } + } + } + } } \ No newline at end of file diff --git a/apps/common/mobile/resources/less/icons.less b/apps/common/mobile/resources/less/icons.less index 20a138647..df3a49f3f 100644 --- a/apps/common/mobile/resources/less/icons.less +++ b/apps/common/mobile/resources/less/icons.less @@ -7,4 +7,7 @@ i.icon { height: 24px; .encoded-svg-uncolored-mask(''); } + &.icon-prev:after, &.icon-next:after { + content: none; + } } From e47157f949da9304bcfb63fe11e11fb89ba2f139 Mon Sep 17 00:00:00 2001 From: SergeyEzhin Date: Wed, 10 Mar 2021 21:46:18 +0300 Subject: [PATCH 11/21] [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 465ede2f4e76440450d336c24acddb99b0aee925 Mon Sep 17 00:00:00 2001 From: Maxim Kadushkin Date: Thu, 11 Mar 2021 10:18:13 +0300 Subject: [PATCH 12/21] [mobile] refactoring build scripts --- vendor/framework7-react/build/build.js | 3 +- .../framework7-react/build/webpack.config.js | 36 ++-- .../build/webpack.config.pe.js | 203 ------------------ 3 files changed, 20 insertions(+), 222 deletions(-) delete mode 100644 vendor/framework7-react/build/webpack.config.pe.js diff --git a/vendor/framework7-react/build/build.js b/vendor/framework7-react/build/build.js index 6a5eeef16..3e170daa5 100644 --- a/vendor/framework7-react/build/build.js +++ b/vendor/framework7-react/build/build.js @@ -2,8 +2,7 @@ const webpack = require('webpack'); const ora = require('ora'); const rm = require('rimraf'); const chalk = require('chalk'); -const editor = process.env.TARGET_EDITOR; -const config = !process.env.TARGET_EDITOR ? require('./webpack.config.js') : require('./webpack.config.pe.js'); +const config = require('./webpack.config.js'); const env = process.env.NODE_ENV || 'development'; const target = process.env.TARGET || 'web'; diff --git a/vendor/framework7-react/build/webpack.config.js b/vendor/framework7-react/build/webpack.config.js index 4e0deb9ac..6c930e51d 100644 --- a/vendor/framework7-react/build/webpack.config.js +++ b/vendor/framework7-react/build/webpack.config.js @@ -16,14 +16,16 @@ function resolvePath(dir) { const env = process.env.NODE_ENV || 'development'; const target = process.env.TARGET || 'web'; +const editor = process.env.TARGET_EDITOR == 'cell' ? 'spreadsheeteditor' : + process.env.TARGET_EDITOR == 'slide' ? 'presentationeditor' : 'documenteditor'; module.exports = { mode: env, entry: { - app: '../../apps/documenteditor/mobile/src/app.js', + app: `../../apps/${editor}/mobile/src/app.js`, }, output: { - path: resolvePath('../../apps/documenteditor/mobile'), // path above depends on it + path: resolvePath(`../../apps/${editor}/mobile`), // path above depends on it filename: 'dist/js/[name].js', // in such form will be injected in index.html chunkFilename: 'dist/js/[name].js', publicPath: '', @@ -33,7 +35,7 @@ module.exports = { resolve: { extensions: ['.js', '.jsx', '.json'], alias: { - '@': resolvePath('../../apps/documenteditor/mobile/src'), + '@': resolvePath(`../../apps/${editor}/mobile/src`), }, modules: [path.resolve(__dirname, '..', 'node_modules'), 'node_modules'], }, @@ -63,7 +65,7 @@ module.exports = { } }, include: [ - resolvePath('../../apps/documenteditor/mobile/src'), + resolvePath(`../../apps/${editor}/mobile/src`), resolvePath('../../apps/common/mobile/lib'), resolvePath('node_modules/framework7'), @@ -106,15 +108,7 @@ module.exports = { publicPath: '../' } }), - 'css-loader', - { - loader: "less-loader", - options: { - lessOptions: { - javascriptEnabled: true - } - } - }, + 'css-loader', { loader: 'postcss-loader', options: { @@ -123,6 +117,14 @@ module.exports = { } }, }, + { + loader: "less-loader", + options: { + lessOptions: { + javascriptEnabled: true + } + } + }, ], }, { @@ -131,7 +133,7 @@ module.exports = { options: { limit: 10000, name: 'images/[name].[ext]', - outputPath: '../../../apps/documenteditor/mobile/dist', + outputPath: `../../../apps/${editor}/mobile/dist`, }, }, @@ -141,7 +143,7 @@ module.exports = { options: { limit: 10000, name: 'fonts/[name].[ext]', - outputPath: '../../../apps/documenteditor/mobile/dist/assets', + outputPath: `../../../apps/${editor}/mobile/dist/assets`, }, }, @@ -168,8 +170,8 @@ module.exports = { ]), // new CleanWebpackPlugin(), new HtmlWebpackPlugin({ - filename: '../../../apps/documenteditor/mobile/index.html', - template: '../../apps/documenteditor/mobile/src/index_dev.html', + filename: `../../../apps/${editor}/mobile/index.html`, + template: `../../apps/${editor}/mobile/src/index_dev.html`, inject: true, minify: env === 'production' ? { collapseWhitespace: true, diff --git a/vendor/framework7-react/build/webpack.config.pe.js b/vendor/framework7-react/build/webpack.config.pe.js deleted file mode 100644 index 6c930e51d..000000000 --- a/vendor/framework7-react/build/webpack.config.pe.js +++ /dev/null @@ -1,203 +0,0 @@ -const webpack = require('webpack'); -const CopyWebpackPlugin = require('copy-webpack-plugin'); -const HtmlWebpackPlugin = require('html-webpack-plugin'); -const { CleanWebpackPlugin } = require('clean-webpack-plugin'); - -const MiniCssExtractPlugin = require('mini-css-extract-plugin'); -const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin'); -const TerserPlugin = require('terser-webpack-plugin'); -const WorkboxPlugin = require('workbox-webpack-plugin'); - -const path = require('path'); - -function resolvePath(dir) { - return path.join(__dirname, '..', dir); -} - -const env = process.env.NODE_ENV || 'development'; -const target = process.env.TARGET || 'web'; -const editor = process.env.TARGET_EDITOR == 'cell' ? 'spreadsheeteditor' : - process.env.TARGET_EDITOR == 'slide' ? 'presentationeditor' : 'documenteditor'; - -module.exports = { - mode: env, - entry: { - app: `../../apps/${editor}/mobile/src/app.js`, - }, - output: { - path: resolvePath(`../../apps/${editor}/mobile`), // path above depends on it - filename: 'dist/js/[name].js', // in such form will be injected in index.html - chunkFilename: 'dist/js/[name].js', - publicPath: '', - hotUpdateChunkFilename: 'hot/hot-update.js', - hotUpdateMainFilename: 'hot/hot-update.json', - }, - resolve: { - extensions: ['.js', '.jsx', '.json'], - alias: { - '@': resolvePath(`../../apps/${editor}/mobile/src`), - }, - modules: [path.resolve(__dirname, '..', 'node_modules'), 'node_modules'], - }, - watch: true, - watchOptions: { - aggregateTimeout: 600, - poll: 1000, - }, - externals: { - jquery: 'jQuery' - }, - - devtool: env === 'production' ? 'source-map' : 'source-map', - optimization: { - minimizer: [new TerserPlugin({ - sourceMap: true, - })], - }, - module: { - rules: [ - { - test: /\.(mjs|js|jsx)$/, - use: { - loader: 'babel-loader', - options: { - - } - }, - include: [ - resolvePath(`../../apps/${editor}/mobile/src`), - resolvePath('../../apps/common/mobile/lib'), - resolvePath('node_modules/framework7'), - - resolvePath('node_modules/framework7-react'), - - resolvePath('node_modules/template7'), - resolvePath('node_modules/dom7'), - resolvePath('node_modules/ssr-window'), - ], - }, - - - - { - test: /\.css$/, - use: [ - (env === 'development' ? 'style-loader' : { - loader: MiniCssExtractPlugin.loader, - options: { - publicPath: '../' - } - }), - 'css-loader', - { - loader: 'postcss-loader', - options: { - config: { - path: path.resolve(__dirname, '..'), - } - }, - }, - ], - }, - { - test: /\.less$/, - use: [ - (env === 'development' ? 'style-loader' : { - loader: MiniCssExtractPlugin.loader, - options: { - publicPath: '../' - } - }), - 'css-loader', - { - loader: 'postcss-loader', - options: { - config: { - path: path.resolve(__dirname, '..'), - } - }, - }, - { - loader: "less-loader", - options: { - lessOptions: { - javascriptEnabled: true - } - } - }, - ], - }, - { - test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, - loader: 'url-loader', - options: { - limit: 10000, - name: 'images/[name].[ext]', - outputPath: `../../../apps/${editor}/mobile/dist`, - - }, - }, - { - test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, - loader: 'url-loader', - options: { - limit: 10000, - name: 'fonts/[name].[ext]', - outputPath: `../../../apps/${editor}/mobile/dist/assets`, - - }, - }, - ], - }, - plugins: [ - new webpack.DefinePlugin({ - 'process.env.NODE_ENV': JSON.stringify(env), - 'process.env.TARGET': JSON.stringify(target), - }), - - ...(env === 'production' ? [ - new OptimizeCSSPlugin({ - cssProcessorOptions: { - safe: true, - map: { inline: false }, - }, - }), - new webpack.optimize.ModuleConcatenationPlugin(), - ] : [ - // Development only plugins - new webpack.HotModuleReplacementPlugin(), - new webpack.NamedModulesPlugin(), - ]), - // new CleanWebpackPlugin(), - new HtmlWebpackPlugin({ - filename: `../../../apps/${editor}/mobile/index.html`, - template: `../../apps/${editor}/mobile/src/index_dev.html`, - inject: true, - minify: env === 'production' ? { - collapseWhitespace: true, - removeComments: true, - removeRedundantAttributes: true, - removeScriptTypeAttributes: true, - removeStyleLinkTypeAttributes: true, - useShortDoctype: true - } : false, - }), - new MiniCssExtractPlugin({ - filename: 'css/[name].css', - }), - new CopyWebpackPlugin({ - patterns: [ - { - noErrorOnMissing: true, - from: resolvePath('src/static'), - to: resolvePath('www/static'), - }, - { - noErrorOnMissing: true, - from: resolvePath('src/manifest.json'), - to: resolvePath('www/manifest.json'), - }, - ], - }), - ], -}; \ No newline at end of file From 3b40251853adc3b94ab4f851739544a0c9c074c5 Mon Sep 17 00:00:00 2001 From: Maxim Kadushkin Date: Thu, 11 Mar 2021 10:21:22 +0300 Subject: [PATCH 13/21] [mobile] fill 'About' info in compile time --- .../src/view/settings/PresentationAbout.jsx | 25 ++++++++++++++++--- .../framework7-react/build/webpack.config.js | 6 +++++ 2 files changed, 27 insertions(+), 4 deletions(-) diff --git a/apps/presentationeditor/mobile/src/view/settings/PresentationAbout.jsx b/apps/presentationeditor/mobile/src/view/settings/PresentationAbout.jsx index 27e777d22..82a36a6d2 100644 --- a/apps/presentationeditor/mobile/src/view/settings/PresentationAbout.jsx +++ b/apps/presentationeditor/mobile/src/view/settings/PresentationAbout.jsx @@ -17,9 +17,8 @@ const PagePresentationAbout = props => { const infoCustomer = customer ? customer.info : null; const logoCustomer = customer ? customer.logo : null; - console.log(store); - console.log(isCanBranding); - + const publisherUrl = __PUBLISHER_URL__, + publisherPrintUrl = publisherUrl.replace(/https?:\/{2}|\/$/,""); return ( @@ -35,7 +34,25 @@ const PagePresentationAbout = props => {

PRESENTATION EDITOR

-

{_t.textVersion} 6.1.1

+

{_t.textVersion} {__PRODUCT_VERSION__}

+
+
{nameCustomer && nameCustomer.length ? ( diff --git a/vendor/framework7-react/build/webpack.config.js b/vendor/framework7-react/build/webpack.config.js index 6c930e51d..8d4fc4a43 100644 --- a/vendor/framework7-react/build/webpack.config.js +++ b/vendor/framework7-react/build/webpack.config.js @@ -153,6 +153,12 @@ module.exports = { new webpack.DefinePlugin({ 'process.env.NODE_ENV': JSON.stringify(env), 'process.env.TARGET': JSON.stringify(target), + __PRODUCT_VERSION__: JSON.stringify(process.env.PRODUCT_VERSION ? process.env.PRODUCT_VERSION : '0.0.1'), + __PUBLISHER_ADDRESS__: JSON.stringify('20A-12 Ernesta Birznieka-Upisha street, Riga, Latvia, EU, LV-1050'), + __SUPPORT_EMAIL__: JSON.stringify('support@onlyoffice.com'), + __PUBLISHER_PHONE__: JSON.stringify('+371 633-99867'), + __PUBLISHER_URL__: JSON.stringify('https://www.onlyoffice.com'), + __PUBLISHER_NAME__: JSON.stringify('Ascensio System SIA'), }), ...(env === 'production' ? [ From 299db5fcb69540b528e2d5f9a6ec487e94fd68c3 Mon Sep 17 00:00:00 2001 From: JuliaSvinareva Date: Thu, 11 Mar 2021 23:38:53 +0300 Subject: [PATCH 14/21] [mobile] Make view current comments (fix on tablet, add reply, prev and next comment, add styles) --- .../lib/view/collaboration/Comments.jsx | 30 +++++++++++++++---- .../mobile/resources/less/comments.less | 20 +++++++++++++ .../resources/less/material/comments.less | 8 ++++- 3 files changed, 51 insertions(+), 7 deletions(-) diff --git a/apps/common/mobile/lib/view/collaboration/Comments.jsx b/apps/common/mobile/lib/view/collaboration/Comments.jsx index a6495fedd..e76f84edc 100644 --- a/apps/common/mobile/lib/view/collaboration/Comments.jsx +++ b/apps/common/mobile/lib/view/collaboration/Comments.jsx @@ -652,13 +652,31 @@ const CommentList = inject("storeComments", "storeAppOptions")(observer(({storeC const [reply, setReply] = useState(); const [replyActionsOpened, openActionReply] = useState(false); + const onViewPrevComment = () => { + if (currentIndex - 1 < 0) { + setCurrentIndex(comments.length - 1); + } else { + setCurrentIndex(currentIndex - 1); + } + }; + + const onViewNextComment = () => { + if (currentIndex + 1 === comments.length) { + setCurrentIndex(0); + } else { + setCurrentIndex(currentIndex + 1); + } + }; + return ( - {_t.textAddReply} + {!viewMode && + {onCommentMenuClick('addReply', comment);}}>{_t.textAddReply} + }
- - + +
@@ -785,13 +803,13 @@ const ViewCommentSheet = ({closeCurComments, onCommentMenuClick, onResolveCommen ) }; -const ViewCommentPopover = () => { +const ViewCommentPopover = ({onCommentMenuClick, onResolveComment}) => { useEffect(() => { f7.popover.open('#view-comment-popover', '#btn-coauth'); }); return ( - - + + ) }; diff --git a/apps/common/mobile/resources/less/comments.less b/apps/common/mobile/resources/less/comments.less index c4f1a3036..1387992e9 100644 --- a/apps/common/mobile/resources/less/comments.less +++ b/apps/common/mobile/resources/less/comments.less @@ -130,6 +130,9 @@ border-radius: 2px; } } +} + +#view-comment-popover, #view-comment-sheet { .toolbar { position: fixed; background-color: @white; @@ -156,6 +159,23 @@ } } +#view-comment-popover { + background-color: @white; + .page .page-content { + padding: 16px; + padding-left: 0; + } + .comment-list { + .item-content { + .item-inner { + .comment-header, .reply-header { + padding-right: 0; + } + } + } + } +} + .page-current-comment { position: relative; .page-content { diff --git a/apps/common/mobile/resources/less/material/comments.less b/apps/common/mobile/resources/less/material/comments.less index 35725b330..b1c72ccce 100644 --- a/apps/common/mobile/resources/less/material/comments.less +++ b/apps/common/mobile/resources/less/material/comments.less @@ -39,7 +39,7 @@ } .comment-list { - .item-inner:after { + .item-inner:after, li:last-child li .item-inner:after { content: none; } .comment-header { @@ -79,4 +79,10 @@ } } + #view-comment-popover { + .toolbar-bottom:after { + content: none; + } + } + } \ No newline at end of file From 257c564d35f4d199f9d63139e8b79224fbbd2ef2 Mon Sep 17 00:00:00 2001 From: SergeyEzhin Date: Mon, 15 Mar 2021 20:29:01 +0300 Subject: [PATCH 15/21] [PE mobile] Corrected stores according to mobx v. 6 and Slide Settings --- .../settings/PresentationSettings.jsx | 7 + .../mobile/src/store/appOptions.js | 15 +- .../mobile/src/store/applicationSettings.js | 26 ++-- .../mobile/src/store/chartSettings.js | 31 ++-- .../mobile/src/store/focusObjects.js | 43 ++++-- .../mobile/src/store/linkSettings.js | 14 +- .../mobile/src/store/palette.js | 13 +- .../mobile/src/store/presentationInfo.js | 16 ++- .../mobile/src/store/presentationSettings.js | 32 +++-- .../mobile/src/store/shapeSettings.js | 16 ++- .../mobile/src/store/slideSettings.js | 56 ++++---- .../mobile/src/store/tableSettings.js | 26 +++- .../mobile/src/store/textSettings.js | 132 ++++++++++++------ .../mobile/src/view/edit/EditSlide.jsx | 48 +++---- .../view/settings/PresentationSettings.jsx | 2 +- 15 files changed, 325 insertions(+), 152 deletions(-) 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/appOptions.js b/apps/presentationeditor/mobile/src/store/appOptions.js index 7bec65bc4..052cd0a15 100644 --- a/apps/presentationeditor/mobile/src/store/appOptions.js +++ b/apps/presentationeditor/mobile/src/store/appOptions.js @@ -1,8 +1,16 @@ -import {action, observable} from 'mobx'; +import {action, observable, makeObservable} from 'mobx'; export class storeAppOptions { + constructor() { + makeObservable(this, { + setConfigOptions: action, + setPermissionOptions: action + }); + } + config = {}; - @action setConfigOptions (config) { + + setConfigOptions (config) { this.config = config; this.user = Common.Utils.fillUserInfo(config.user, config.lang, "Local.User"/*me.textAnonymous*/); this.isDesktopApp = config.targetApp == 'desktop'; @@ -24,7 +32,8 @@ export class storeAppOptions { this.canBack = this.canBackToFolder === true; this.canPlugins = false; } - @action setPermissionOptions (document, licType, params, permissions) { + + setPermissionOptions (document, licType, params, permissions) { this.review = (permissions.review === undefined) ? (permissions.edit !== false) : permissions.review; this.canAnalytics = params.asc_getIsAnalyticsEnable(); this.canLicense = (licType === Asc.c_oLicenseResult.Success || licType === Asc.c_oLicenseResult.SuccessLimit); diff --git a/apps/presentationeditor/mobile/src/store/applicationSettings.js b/apps/presentationeditor/mobile/src/store/applicationSettings.js index b9e764a27..46a9f1e8f 100644 --- a/apps/presentationeditor/mobile/src/store/applicationSettings.js +++ b/apps/presentationeditor/mobile/src/store/applicationSettings.js @@ -1,20 +1,30 @@ -import {action, observable} from 'mobx'; +import {action, observable, makeObservable} from 'mobx'; export class storeApplicationSettings { - - @observable unitMeasurement = 1; - @observable isSpellChecking = true; - @observable macrosMode = 0; + constructor() { + makeObservable(this, { + unitMeasurement: observable, + isSpellChecking: observable, + macrosMode: observable, + changeUnitMeasurement: action, + changeSpellCheck: action, + changeMacrosSettings: action + }); + } + + unitMeasurement = 1; + isSpellChecking = true; + macrosMode = 0; - @action changeUnitMeasurement(value) { + changeUnitMeasurement(value) { this.unitMeasurement = +value; } - @action changeSpellCheck(value) { + changeSpellCheck(value) { this.isSpellChecking = value; } - @action changeMacrosSettings(value) { + changeMacrosSettings(value) { this.macrosMode = +value; } } \ No newline at end of file diff --git a/apps/presentationeditor/mobile/src/store/chartSettings.js b/apps/presentationeditor/mobile/src/store/chartSettings.js index 42eeee22f..935fc7203 100644 --- a/apps/presentationeditor/mobile/src/store/chartSettings.js +++ b/apps/presentationeditor/mobile/src/store/chartSettings.js @@ -1,20 +1,35 @@ -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 + }); + } // Style - @observable chartStyles = null; + chartStyles = null; - @action clearChartStyles () { + 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 @@ -32,7 +47,7 @@ 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'}, @@ -75,7 +90,7 @@ export class storeChartSettings { // Fill Color - @observable fillColor = undefined; + fillColor = undefined; setFillColor (color) { this.fillColor = color; @@ -104,7 +119,7 @@ export class storeChartSettings { // Border size and border color - @observable borderColor; + borderColor; setBorderColor (color) { this.borderColor = color; diff --git a/apps/presentationeditor/mobile/src/store/focusObjects.js b/apps/presentationeditor/mobile/src/store/focusObjects.js index a207233f4..4ad5bafc1 100644 --- a/apps/presentationeditor/mobile/src/store/focusObjects.js +++ b/apps/presentationeditor/mobile/src/store/focusObjects.js @@ -1,13 +1,30 @@ -import {action, observable, computed} from 'mobx'; +import {action, observable, computed, makeObservable} from 'mobx'; export class storeFocusObjects { - @observable _focusObjects = []; + constructor() { + makeObservable(this, { + _focusObjects: observable, + resetFocusObjects: action, + settings: computed, + slideObject: computed, + paragraphObject: computed, + paragraphLocked: computed, + shapeObject: computed, + imageObject: computed, + tableObject: computed, + isTableInStack: computed, + chartObject: computed, + linkObject: computed + }); + } - @action resetFocusObjects(objects) { + _focusObjects = []; + + resetFocusObjects(objects) { this._focusObjects = objects; } - @computed get settings() { + get settings() { const _settings = []; let no_text = true; for (let object of this._focusObjects) { @@ -53,7 +70,7 @@ export class storeFocusObjects { return resultArr; } - @computed get slideObject() { + get slideObject() { const slides = []; for (let object of this._focusObjects) { if (object.get_ObjectType() === Asc.c_oAscTypeSelectElement.Slide) { @@ -68,7 +85,7 @@ export class storeFocusObjects { } } - @computed get paragraphObject() { + get paragraphObject() { const paragraphs = []; for (let object of this._focusObjects) { if (object.get_ObjectType() === Asc.c_oAscTypeSelectElement.Paragraph) { @@ -83,7 +100,7 @@ export class storeFocusObjects { } } - @computed get paragraphLocked() { + get paragraphLocked() { let _paragraphLocked = false; for (let object of this._focusObjects) { if (Asc.c_oAscTypeSelectElement.Paragraph == object.get_ObjectType()) { @@ -93,7 +110,7 @@ export class storeFocusObjects { return _paragraphLocked; } - @computed get shapeObject() { + get shapeObject() { const shapes = []; for (let object of this._focusObjects) { if (object.get_ObjectType() === Asc.c_oAscTypeSelectElement.Shape) { @@ -108,7 +125,7 @@ export class storeFocusObjects { } } - @computed get imageObject() { + get imageObject() { const images = []; for (let object of this._focusObjects) { if (object.get_ObjectType() == Asc.c_oAscTypeSelectElement.Image && object.get_ObjectValue()) { @@ -123,7 +140,7 @@ export class storeFocusObjects { } } - @computed get tableObject() { + get tableObject() { const tables = []; for (let object of this._focusObjects) { if (object.get_ObjectType() == Asc.c_oAscTypeSelectElement.Table) { @@ -138,7 +155,7 @@ export class storeFocusObjects { } } - @computed get isTableInStack() { + get isTableInStack() { for (let object of this._focusObjects) { if (object.get_ObjectType() == Asc.c_oAscTypeSelectElement.Table) { return true; @@ -147,7 +164,7 @@ export class storeFocusObjects { return false; } - @computed get chartObject() { + get chartObject() { const charts = []; for (let object of this._focusObjects) { @@ -164,7 +181,7 @@ export class storeFocusObjects { } } - @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/presentationeditor/mobile/src/store/linkSettings.js b/apps/presentationeditor/mobile/src/store/linkSettings.js index 2eabdba1e..a163d68df 100644 --- a/apps/presentationeditor/mobile/src/store/linkSettings.js +++ b/apps/presentationeditor/mobile/src/store/linkSettings.js @@ -1,8 +1,16 @@ -import {action, observable, computed} from 'mobx'; +import {action, observable, makeObservable} from 'mobx'; export class storeLinkSettings { - @observable canAddLink; - @action canAddHyperlink (value) { + constructor() { + makeObservable(this, { + canAddLink: observable, + canAddHyperlink: action + }); + } + + canAddLink; + + canAddHyperlink (value) { this.canAddLink = value; } } diff --git a/apps/presentationeditor/mobile/src/store/palette.js b/apps/presentationeditor/mobile/src/store/palette.js index 01ec9aa24..48e15904b 100644 --- a/apps/presentationeditor/mobile/src/store/palette.js +++ b/apps/presentationeditor/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 + }); + } - @action changeCustomColors (colors) { + customColors = []; + + changeCustomColors (colors) { this.customColors = colors; } } \ No newline at end of file diff --git a/apps/presentationeditor/mobile/src/store/presentationInfo.js b/apps/presentationeditor/mobile/src/store/presentationInfo.js index a46d0ef5a..29b690525 100644 --- a/apps/presentationeditor/mobile/src/store/presentationInfo.js +++ b/apps/presentationeditor/mobile/src/store/presentationInfo.js @@ -1,10 +1,16 @@ -import { action, observable } from "mobx"; +import { action, observable, makeObservable } from "mobx"; export class storePresentationInfo { + constructor() { + makeObservable(this, { + dataDoc: observable, + setDataDoc: action + }); + } - @observable dataDoc; + dataDoc; - @action setDataDoc(obj) { - this.dataDoc = obj; - } + setDataDoc(obj) { + this.dataDoc = obj; + } } \ No newline at end of file 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/store/shapeSettings.js b/apps/presentationeditor/mobile/src/store/shapeSettings.js index d119dd7da..b2b88fef9 100644 --- a/apps/presentationeditor/mobile/src/store/shapeSettings.js +++ b/apps/presentationeditor/mobile/src/store/shapeSettings.js @@ -1,6 +1,16 @@ -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 = [ @@ -140,7 +150,7 @@ export class storeShapeSettings { // Fill Color - @observable fillColor = undefined; + fillColor = undefined; setFillColor (color) { this.fillColor = color; @@ -169,7 +179,7 @@ export class storeShapeSettings { // Border size and color - @observable borderColorView; + borderColorView; setBorderColor (color) { this.borderColorView = color; diff --git a/apps/presentationeditor/mobile/src/store/slideSettings.js b/apps/presentationeditor/mobile/src/store/slideSettings.js index 37ee3ec4c..18ab8a04d 100644 --- a/apps/presentationeditor/mobile/src/store/slideSettings.js +++ b/apps/presentationeditor/mobile/src/store/slideSettings.js @@ -1,17 +1,30 @@ -import {action, observable, computed} from 'mobx'; +import {action, observable, computed, makeObservable} from 'mobx'; export class storeSlideSettings { + constructor() { + makeObservable(this, { + arrayLayouts: observable, + slideLayoutIndex: observable, + fillColor: observable, + arrayThemes: observable, + slideThemeIndex: observable, + getFillColor: action, + changeFillColor: action, + addArrayLayouts: action, + slideLayouts: computed, + changeSlideLayoutIndex: action, + addArrayThemes: action, + changeSlideThemeIndex: action, + }); + } + + arrayLayouts; + slideLayoutIndex = -1; + fillColor = undefined; + arrayThemes; + slideThemeIndex; - @observable arrayLayouts; - @observable slideLayoutIndex = -1; - @observable fillColor = undefined; - @observable arrayThemes; - @observable slideThemeIndex; - @observable effect; - @observable type; - - @action getFillColor (slideObject) { - + getFillColor (slideObject) { let color = 'transparent'; let fill = slideObject.get_background(), fillType = fill.get_type(); @@ -34,14 +47,15 @@ export class storeSlideSettings { return color; } - @action changeFillColor (color) { + changeFillColor (color) { this.fillColor = color; } - @action addArrayLayouts(array) { + addArrayLayouts(array) { this.arrayLayouts = array; } - @computed get slideLayouts () { + + get slideLayouts () { const layouts = []; const columns = 2; let row = -1; @@ -60,23 +74,15 @@ export class storeSlideSettings { return layouts; } - @action changeSlideLayoutIndex(index) { + changeSlideLayoutIndex(index) { this.slideLayoutIndex = index; } - @action addArrayThemes(array) { + addArrayThemes(array) { this.arrayThemes = array; } - @action changeSlideThemeIndex(index) { + changeSlideThemeIndex(index) { this.slideThemeIndex = index; } - - @action changeEffect(value) { - this.effect = value; - } - - @action changeType(value) { - this.type = value; - } } \ No newline at end of file diff --git a/apps/presentationeditor/mobile/src/store/tableSettings.js b/apps/presentationeditor/mobile/src/store/tableSettings.js index 7608c5f3c..272093980 100644 --- a/apps/presentationeditor/mobile/src/store/tableSettings.js +++ b/apps/presentationeditor/mobile/src/store/tableSettings.js @@ -1,15 +1,27 @@ -import {action, observable, computed} from 'mobx'; +import {action, observable, computed, makeObservable} from 'mobx'; import {f7} from 'framework7-react'; export class storeTableSettings { + constructor() { + makeObservable(this, { + _templates: observable, + cellBorders: observable, + cellBorderWidth: observable, + cellBorderColor: observable, + initTableTemplates: action, + styles: computed, + updateCellBorderWidth: action, + updateCellBorderColor: action, + }); + } - @observable _templates = []; + _templates = []; - @action initTableTemplates (templates) { + initTableTemplates (templates) { this._templates = templates; } - @computed get styles () { + get styles () { let styles = []; for (let template of this._templates) { styles.push({ @@ -52,9 +64,9 @@ 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/presentationeditor/mobile/src/store/textSettings.js b/apps/presentationeditor/mobile/src/store/textSettings.js index bc543b916..7f4b50f26 100644 --- a/apps/presentationeditor/mobile/src/store/textSettings.js +++ b/apps/presentationeditor/mobile/src/store/textSettings.js @@ -1,27 +1,69 @@ -import {action, observable, computed} from 'mobx'; +import {action, observable, computed, makeObservable} from 'mobx'; export class storeTextSettings { + 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, + paragraphValign: observable, + canIncreaseIndent: observable, + canDecreaseIndent: observable, + textColor: observable, + customTextColors: observable, + lineSpacing: observable, + initEditorFonts: action, + resetFontName: action, + resetFontSize: action, + resetIsBold: action, + resetIsItalic: action, + resetIsUnderline: action, + resetIsStrikeout: action, + resetIncreaseIndent: action, + resetDecreaseIndent: action, + resetTypeBaseline: action, + isSuperscript: computed, + isSubscript: computed, + resetListType: action, + resetBullets: action, + resetNumbers: action, + resetParagraphAlign: action, + resetParagraphValign: action, + resetTextColor: action, + changeCustomTextColors: action, + resetLineSpacing: action + }); + } - @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 paragraphValign = undefined; - @observable canIncreaseIndent = undefined; - @observable canDecreaseIndent = undefined; - @observable textColor = undefined; - @observable customTextColors = []; - @observable lineSpacing = undefined; + fontsArray = []; + fontName = ''; + fontSize = undefined; + isBold = false; + isItalic = false; + isUnderline = false; + isStrikethrough = false; + typeBaseline = undefined; + listType = undefined; + typeBullets = undefined; + typeNumbers = undefined; + paragraphAlign = undefined; + paragraphValign = undefined; + canIncreaseIndent = undefined; + canDecreaseIndent = undefined; + textColor = undefined; + customTextColors = []; + lineSpacing = undefined; - @action initEditorFonts (fonts, select) { + initEditorFonts (fonts, select) { let array = []; for (let font of fonts) { let fontId = font.asc_getFontId(); @@ -35,59 +77,71 @@ 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; } // Indent - @action resetIncreaseIndent(value) { + resetIncreaseIndent(value) { this.canIncreaseIndent = value; } - @action resetDecreaseIndent(value) { + resetDecreaseIndent(value) { this.canDecreaseIndent = value; } // 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: @@ -106,7 +160,7 @@ export class storeTextSettings { this.paragraphAlign = value; } - @action resetParagraphValign (align) { + resetParagraphValign (align) { let value; switch (align) { case 0: @@ -122,7 +176,7 @@ export class storeTextSettings { this.paragraphValign = value; } - @action resetTextColor (color) { + resetTextColor (color) { let value; if (color) { if (color.get_auto()) { @@ -141,11 +195,11 @@ 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; } diff --git a/apps/presentationeditor/mobile/src/view/edit/EditSlide.jsx b/apps/presentationeditor/mobile/src/view/edit/EditSlide.jsx index 2cbdf19f1..0e7210666 100644 --- a/apps/presentationeditor/mobile/src/view/edit/EditSlide.jsx +++ b/apps/presentationeditor/mobile/src/view/edit/EditSlide.jsx @@ -212,20 +212,12 @@ const PageTransition = props => { }; const storeFocusObjects = props.storeFocusObjects; - const storeSlideSettings = props.storeSlideSettings; const transitionObj = storeFocusObjects.slideObject.get_transition(); - if(!storeSlideSettings.effect) { - storeSlideSettings.changeEffect(transitionObj.get_TransitionType()); - } - - const _effect = storeSlideSettings.effect; + const [_effect, setEffect] = useState(transitionObj.get_TransitionType()); const valueEffectTypes = fillEffectTypes(_effect); + const [type, setType] = useState(valueEffectTypes); - if(!storeSlideSettings.type) { - storeSlideSettings.changeType(valueEffectTypes); - } - let _effectDelay = transitionObj.get_SlideAdvanceDuration(); const [stateRange, changeRange] = useState((_effectDelay !== null && _effectDelay !== undefined) ? parseInt(_effectDelay / 1000.) : 0); @@ -248,13 +240,19 @@ const PageTransition = props => { @@ -285,11 +283,11 @@ const PageTransition = props => { {_t.textStartOnClick} - {props.onStartClick(!isStartOnClick)}} /> + {props.onStartClick(!isStartOnClick)}} /> {_t.textDelay} - {props.onDelayCheck(!isDelay, _effectDelay)}} /> + {props.onDelayCheck(!isDelay, _effectDelay)}} />
@@ -316,8 +314,8 @@ const PageTransition = props => { const PageEffect = props => { const { t } = useTranslation(); const _t = t("View.Edit", { returnObjects: true }); - const storeSlideSettings = props.storeSlideSettings; - const _effect = storeSlideSettings.effect; + const _effect = props._effect; + const [currentEffect, setEffect] = useState(_effect); const _arrEffect = props._arrEffect; return ( @@ -328,10 +326,11 @@ const PageEffect = props => { {_arrEffect.map((elem, index) => { return ( { - storeSlideSettings.changeEffect(elem.value); + checked={elem.value === currentEffect} onChange={() => { + setEffect(elem.value); + props.setEffect(elem.value); let valueEffectTypes = props.fillEffectTypes(elem.value); - storeSlideSettings.changeType(valueEffectTypes); + props.setType(valueEffectTypes); props.onEffectClick(elem.value, valueEffectTypes); }}> ) @@ -346,9 +345,9 @@ const PageType= props => { const { t } = useTranslation(); const _t = t("View.Edit", { returnObjects: true }); const _arrCurrentEffectTypes = props._arrCurrentEffectTypes; - const storeSlideSettings = props.storeSlideSettings; - const _effect = storeSlideSettings.effect; - const type = storeSlideSettings.type; + const _effect = props._effect; + const type = props.type; + const [currentType, setType] = useState(type); return ( @@ -362,8 +361,9 @@ const PageType= props => { {_arrCurrentEffectTypes.map((elem, index) => { return ( { - storeSlideSettings.changeType(elem.value); + checked={elem.value === currentType} onChange={() => { + setType(elem.value); + props.setType(elem.value); props.onEffectTypeClick(elem.value, _effect); }}> diff --git a/apps/presentationeditor/mobile/src/view/settings/PresentationSettings.jsx b/apps/presentationeditor/mobile/src/view/settings/PresentationSettings.jsx index 7288657df..fc3f51ca6 100644 --- a/apps/presentationeditor/mobile/src/view/settings/PresentationSettings.jsx +++ b/apps/presentationeditor/mobile/src/view/settings/PresentationSettings.jsx @@ -6,7 +6,7 @@ import { useTranslation } from "react-i18next"; const PagePresentationSettings = props => { const { t } = useTranslation(); const _t = t("View.Settings", { returnObjects: true }); - props.initSlideSize(); + // 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 16/21] [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 3921dfa9ee997ef74edc190f2f5430c71192781e Mon Sep 17 00:00:00 2001 From: JuliaSvinareva Date: Tue, 16 Mar 2021 00:59:14 +0300 Subject: [PATCH 17/21] [mobile] Add actions for more items in context menu --- .../mobile/lib/controller/ContextMenu.jsx | 33 +++- apps/common/mobile/lib/view/ContextMenu.jsx | 24 ++- .../mobile/resources/less/contextmenu.less | 4 + apps/documenteditor/mobile/locale/en.json | 15 ++ .../mobile/src/controller/ContextMenu.jsx | 160 ++++++++---------- 5 files changed, 139 insertions(+), 97 deletions(-) diff --git a/apps/common/mobile/lib/controller/ContextMenu.jsx b/apps/common/mobile/lib/controller/ContextMenu.jsx index f25deba51..cc67da9c3 100644 --- a/apps/common/mobile/lib/controller/ContextMenu.jsx +++ b/apps/common/mobile/lib/controller/ContextMenu.jsx @@ -1,8 +1,8 @@ -import React, { Component } from 'react'; +import React, { Component, Fragment } from 'react'; import { f7 } from 'framework7-react'; import { Device } from '../../../../common/mobile/utils/device' -import ContextMenuView, { idContextMenuElement } from '../view/ContextMenu'; +import ContextMenuView, { idContextMenuElement, ActionsWithExtraItems } from '../view/ContextMenu'; const idCntextMenuTargetElement = '#idx-context-menu-target'; @@ -11,12 +11,15 @@ class ContextMenuController extends Component { super(props); this.state = { - opened: false - , items: [] + opened: false, + items: [], + openedMore: false, + extraItems: [] }; this.onMenuItemClick = this.onMenuItemClick.bind(this); this.onMenuClosed = this.onMenuClosed.bind(this); + this.onActionClosed = this.onActionClosed.bind(this); this.onDocumentReady = this.onDocumentReady.bind(this); this.onApiOpenContextMenu = this.onApiOpenContextMenu.bind(this); this.onApiHideContextMenu = this.onApiHideContextMenu.bind(this); @@ -96,7 +99,10 @@ class ContextMenuController extends Component { onApiOpenContextMenu(x, y) { if ( !this.state.opened ) { - this.setState({items: this.initMenuItems()}); + this.setState({ + items: this.initMenuItems(), + extraItems: this.initExtraItems() + }); this.$targetEl.css({left: `${x}px`, top: `${y}px`}); const popover = f7.popover.open(idContextMenuElement, idCntextMenuTargetElement); @@ -132,8 +138,16 @@ class ContextMenuController extends Component { // })(); } + onActionClosed() { + this.setState({openedMore: false}); + } + onMenuItemClick(action) { this.onApiHideContextMenu(); + + if (action === 'showActionSheet') { + this.setState({openedMore: true}); + } } componentWillUnmount() { @@ -158,9 +172,16 @@ class ContextMenuController extends Component { return []; } + initExtraItems () { + return []; + } + render() { return ( - + + + + ) } } diff --git a/apps/common/mobile/lib/view/ContextMenu.jsx b/apps/common/mobile/lib/view/ContextMenu.jsx index 4bf1c2c61..2447ba24d 100644 --- a/apps/common/mobile/lib/view/ContextMenu.jsx +++ b/apps/common/mobile/lib/view/ContextMenu.jsx @@ -1,6 +1,7 @@ import React, { Component } from 'react'; -import { Popover, List, ListItem, ListButton, Link, Icon } from 'framework7-react'; +import { Popover, List, ListItem, ListButton, Link, Icon, Actions, ActionsGroup, ActionsButton } from 'framework7-react'; import { f7 } from 'framework7-react'; +import { useTranslation } from 'react-i18next'; const idContextMenuElement = "idx-context-menu-popover"; @@ -38,5 +39,24 @@ class ContextMenuView extends Component { } } +const ActionsWithExtraItems = ({items, onMenuItemClick, opened, onActionClosed}) => { + const { t } = useTranslation(); + const _t = t('ContextMenu', {returnObjects: true}); + return ( + onActionClosed()}> + + {items.length > 0 && items.map((item, index)=>{ + return( + {onMenuItemClick(item.event)}}>{item.caption} + ) + })} + + + {_t.menuCancel} + + + ) +}; + const exportedIdMenuElemen = `#${idContextMenuElement}`; -export {ContextMenuView as default, exportedIdMenuElemen as idContextMenuElement}; \ No newline at end of file +export {ContextMenuView as default, exportedIdMenuElemen as idContextMenuElement, ActionsWithExtraItems}; \ No newline at end of file diff --git a/apps/common/mobile/resources/less/contextmenu.less b/apps/common/mobile/resources/less/contextmenu.less index c41be2a1f..fae7b1fb6 100644 --- a/apps/common/mobile/resources/less/contextmenu.less +++ b/apps/common/mobile/resources/less/contextmenu.less @@ -4,4 +4,8 @@ .document-menu { width: auto; +} + +html.phone .document-menu .list-block .list-button { + padding: 0 10px; } \ No newline at end of file diff --git a/apps/documenteditor/mobile/locale/en.json b/apps/documenteditor/mobile/locale/en.json index 23eca76da..04eb48129 100644 --- a/apps/documenteditor/mobile/locale/en.json +++ b/apps/documenteditor/mobile/locale/en.json @@ -129,6 +129,21 @@ "textEditReply": "Edit Reply" } }, + "ContextMenu": { + "menuViewComment": "View Comment", + "menuAddComment": "Add Comment", + "menuMerge": "Merge", + "menuSplit": "Split", + "menuDelete": "Delete", + "menuDeleteTable": "Delete Table", + "menuEdit": "Edit", + "menuAddLink": "Add Link", + "menuReviewChange": "Review Change", + "menuReview": "Review", + "menuOpenLink": "Open Link", + "menuMore": "More", + "menuCancel": "Cancel" + }, "Settings": { "textCancel": "Cancel", "textSettings": "Settings", diff --git a/apps/documenteditor/mobile/src/controller/ContextMenu.jsx b/apps/documenteditor/mobile/src/controller/ContextMenu.jsx index c82ae0f3a..793a3e3d9 100644 --- a/apps/documenteditor/mobile/src/controller/ContextMenu.jsx +++ b/apps/documenteditor/mobile/src/controller/ContextMenu.jsx @@ -4,6 +4,7 @@ import { inject, observer } from "mobx-react"; import ContextMenuController from '../../../../common/mobile/lib/controller/ContextMenu'; import { idContextMenuElement } from '../../../../common/mobile/lib/view/ContextMenu'; import { Device } from '../../../../common/mobile/utils/device'; +import { withTranslation} from 'react-i18next'; @inject ( stores => ({ isEdit: stores.storeAppOptions.isEdit, @@ -70,6 +71,9 @@ class ContextMenu extends ContextMenuController { initMenuItems() { if ( !Common.EditorApi ) return []; + const { t } = this.props; + const _t = t("ContextMenu", { returnObjects: true }); + const { isEdit, canViewComments, canReview } = this.props; const api = Common.EditorApi.get(); @@ -81,7 +85,6 @@ class ContextMenu extends ContextMenuController { if ( canCopy ) { itemsIcon.push({ - caption: /*me.menuCopy*/ 'Copy', event: 'copy', icon: 'icon-copy' }); @@ -89,7 +92,7 @@ class ContextMenu extends ContextMenuController { if ( canViewComments && this.isComments && !isEdit ) { itemsText.push({ - caption: /*me.menuViewComment*/'View Comment', + caption: _t.menuViewComment, event: 'viewcomment' }); } @@ -144,7 +147,6 @@ class ContextMenu extends ContextMenuController { if ( isEdit && !this.isDisconnected ) { if ( !lockedText && !lockedTable && !lockedImage && !lockedHeader && canCopy ) { itemsIcon.push({ - // caption: me.menuCut, event: 'cut', icon: 'icon-cut' }); @@ -155,16 +157,70 @@ class ContextMenu extends ContextMenuController { if ( !lockedText && !lockedTable && !lockedImage && !lockedHeader ) { itemsIcon.push({ - // caption: me.menuPaste, event: 'paste', icon: 'icon-paste' }); } - // For test + if ( isTable && api.CheckBeforeMergeCells() && !lockedTable && !lockedHeader) { + itemsText.push({ + caption: _t.menuMerge, + event: 'merge' + }); + } + + if ( isTable && api.CheckBeforeSplitCells() && !lockedTable && !lockedHeader ) { + itemsText.push({ + caption: _t.menuSplit, + event: 'split' + }); + } + + if ( !lockedText && !lockedTable && !lockedImage && !lockedHeader ) { + itemsText.push({ + caption: _t.menuDelete, + event: 'delete' + }); + } + + if ( isTable && !lockedTable && !lockedText && !lockedHeader ) { + itemsText.push({ + caption: _t.menuDeleteTable, + event: 'deletetable' + }); + } + + if ( !lockedText && !lockedTable && !lockedImage && !lockedHeader ){ + itemsText.push({ + caption: _t.menuEdit, + event: 'edit' + }); + } + + // if ( !_.isEmpty(api.can_AddHyperlink()) && !lockedHeader) { + // arrItems.push({ + // caption: _t.menuAddLink, + // event: 'addlink' + // }); + // } + + if ( canReview ) { + if (false /*_inRevisionChange*/) { + itemsText.push({ + caption: _t.menuReviewChange, + event: 'reviewchange' + }); + } else { + itemsText.push({ + caption: _t.menuReview, + event: 'review' + }); + } + } + if ( this.isComments && canViewComments ) { itemsText.push({ - caption: /*me.menuViewComment*/'View Comment', + caption: _t.menuViewComment, event: 'viewcomment' }); } @@ -173,102 +229,23 @@ class ContextMenu extends ContextMenuController { const hideAddComment = !canViewComments || api.can_AddQuotedComment() === false || lockedText || lockedTable || lockedImage || lockedHeader || (!isText && isObject); if ( !hideAddComment ) { itemsText.push({ - caption: /*me.menuAddComment*/'Add Comment', + caption: _t.menuAddComment, event: 'addcomment' }); } - // end test - - if ( isTable && api.CheckBeforeMergeCells() && !lockedTable && !lockedHeader) { - itemsText.push({ - caption: /*me.menuMerge*/'Merge', - event: 'merge' - }); - } - - if ( isTable && api.CheckBeforeSplitCells() && !lockedTable && !lockedHeader ) { - itemsText.push({ - caption: /*me.menuSplit*/'Split', - event: 'split' - }); - } - - if ( !lockedText && !lockedTable && !lockedImage && !lockedHeader ) { - itemsText.push({ - caption: /*me.menuDelete*/'Delete', - event: 'delete' - }); - } - - if ( isTable && !lockedTable && !lockedText && !lockedHeader ) { - itemsText.push({ - caption: /*me.menuDeleteTable*/'Delete Table', - event: 'deletetable' - }); - } - - if ( !lockedText && !lockedTable && !lockedImage && !lockedHeader ){ - itemsText.push({ - caption: /*me.menuEdit*/'Edit', - event: 'edit' - }); - } - - // if ( !_.isEmpty(api.can_AddHyperlink()) && !lockedHeader) { - // arrItems.push({ - // caption: me.menuAddLink, - // event: 'addlink' - // }); - // } - - if ( canReview ) { - if (false /*_inRevisionChange*/) { - itemsText.push({ - caption: /*me.menuReviewChange*/'Review Change', - event: 'reviewchange' - }); - } else { - itemsText.push({ - caption: /*me.menuReview*/'Review', - event: 'review' - }); - } - } - - if ( this.isComments && canViewComments ) { - itemsText.push({ - caption: /*me.menuViewComment*/'View Comment', - event: 'viewcomment' - }); - } - - /*const isObject = isShape || isChart || isImage || isTable; - const hideAddComment = !canViewComments || api.can_AddQuotedComment() === false || lockedText || lockedTable || lockedImage || lockedHeader || (!isText && isObject); - if ( !hideAddComment ) { - itemsText.push({ - caption: 'Add Comment', - event: 'addcomment' - }); - }*/ } } if ( isLink ) { itemsText.push({ - caption: /*me.menuOpenLink*/'Open Link', + caption: _t.menuOpenLink, event: 'openlink' }); } if ( Device.phone && itemsText.length > 2 ) { - // _actionSheets = arrItems.slice(2); - // arrItems = arrItems.slice(0, 2); - // arrItems.push({ - // caption: me.menuMore, - // event: 'showActionSheet' - // }); this.extraItems = itemsText.splice(2,itemsText.length, { - caption: /*me.menuMore*/'More', + caption: _t.menuMore, event: 'showActionSheet' }); } @@ -285,6 +262,11 @@ class ContextMenu extends ContextMenuController { // event: 'review' // }]; } + + initExtraItems () { + return (this.extraItems && this.extraItems.length > 0 ? this.extraItems : []); + } } -export { ContextMenu as default }; \ No newline at end of file +const _ContextMenu = withTranslation()(ContextMenu); +export { _ContextMenu as default }; \ No newline at end of file From 2ab1d32e9787d0a424e976da4d0c4cc0d3678066 Mon Sep 17 00:00:00 2001 From: SergeyEzhin Date: Tue, 16 Mar 2021 13:49:16 +0300 Subject: [PATCH 18/21] [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 b4bd17d0bc3d27cd71dc1d7f2e0d4aadaa81a2fb Mon Sep 17 00:00:00 2001 From: JuliaSvinareva Date: Tue, 16 Mar 2021 00:59:14 +0300 Subject: [PATCH 19/21] [mobile] Add actions for more items in context menu --- .../mobile/lib/controller/ContextMenu.jsx | 33 +++- apps/common/mobile/lib/view/ContextMenu.jsx | 24 ++- .../mobile/resources/less/contextmenu.less | 4 + apps/documenteditor/mobile/locale/en.json | 15 ++ .../mobile/src/controller/ContextMenu.jsx | 160 ++++++++---------- 5 files changed, 139 insertions(+), 97 deletions(-) diff --git a/apps/common/mobile/lib/controller/ContextMenu.jsx b/apps/common/mobile/lib/controller/ContextMenu.jsx index f25deba51..cc67da9c3 100644 --- a/apps/common/mobile/lib/controller/ContextMenu.jsx +++ b/apps/common/mobile/lib/controller/ContextMenu.jsx @@ -1,8 +1,8 @@ -import React, { Component } from 'react'; +import React, { Component, Fragment } from 'react'; import { f7 } from 'framework7-react'; import { Device } from '../../../../common/mobile/utils/device' -import ContextMenuView, { idContextMenuElement } from '../view/ContextMenu'; +import ContextMenuView, { idContextMenuElement, ActionsWithExtraItems } from '../view/ContextMenu'; const idCntextMenuTargetElement = '#idx-context-menu-target'; @@ -11,12 +11,15 @@ class ContextMenuController extends Component { super(props); this.state = { - opened: false - , items: [] + opened: false, + items: [], + openedMore: false, + extraItems: [] }; this.onMenuItemClick = this.onMenuItemClick.bind(this); this.onMenuClosed = this.onMenuClosed.bind(this); + this.onActionClosed = this.onActionClosed.bind(this); this.onDocumentReady = this.onDocumentReady.bind(this); this.onApiOpenContextMenu = this.onApiOpenContextMenu.bind(this); this.onApiHideContextMenu = this.onApiHideContextMenu.bind(this); @@ -96,7 +99,10 @@ class ContextMenuController extends Component { onApiOpenContextMenu(x, y) { if ( !this.state.opened ) { - this.setState({items: this.initMenuItems()}); + this.setState({ + items: this.initMenuItems(), + extraItems: this.initExtraItems() + }); this.$targetEl.css({left: `${x}px`, top: `${y}px`}); const popover = f7.popover.open(idContextMenuElement, idCntextMenuTargetElement); @@ -132,8 +138,16 @@ class ContextMenuController extends Component { // })(); } + onActionClosed() { + this.setState({openedMore: false}); + } + onMenuItemClick(action) { this.onApiHideContextMenu(); + + if (action === 'showActionSheet') { + this.setState({openedMore: true}); + } } componentWillUnmount() { @@ -158,9 +172,16 @@ class ContextMenuController extends Component { return []; } + initExtraItems () { + return []; + } + render() { return ( - + + + + ) } } diff --git a/apps/common/mobile/lib/view/ContextMenu.jsx b/apps/common/mobile/lib/view/ContextMenu.jsx index 4bf1c2c61..2447ba24d 100644 --- a/apps/common/mobile/lib/view/ContextMenu.jsx +++ b/apps/common/mobile/lib/view/ContextMenu.jsx @@ -1,6 +1,7 @@ import React, { Component } from 'react'; -import { Popover, List, ListItem, ListButton, Link, Icon } from 'framework7-react'; +import { Popover, List, ListItem, ListButton, Link, Icon, Actions, ActionsGroup, ActionsButton } from 'framework7-react'; import { f7 } from 'framework7-react'; +import { useTranslation } from 'react-i18next'; const idContextMenuElement = "idx-context-menu-popover"; @@ -38,5 +39,24 @@ class ContextMenuView extends Component { } } +const ActionsWithExtraItems = ({items, onMenuItemClick, opened, onActionClosed}) => { + const { t } = useTranslation(); + const _t = t('ContextMenu', {returnObjects: true}); + return ( + onActionClosed()}> + + {items.length > 0 && items.map((item, index)=>{ + return( + {onMenuItemClick(item.event)}}>{item.caption} + ) + })} + + + {_t.menuCancel} + + + ) +}; + const exportedIdMenuElemen = `#${idContextMenuElement}`; -export {ContextMenuView as default, exportedIdMenuElemen as idContextMenuElement}; \ No newline at end of file +export {ContextMenuView as default, exportedIdMenuElemen as idContextMenuElement, ActionsWithExtraItems}; \ No newline at end of file diff --git a/apps/common/mobile/resources/less/contextmenu.less b/apps/common/mobile/resources/less/contextmenu.less index c41be2a1f..fae7b1fb6 100644 --- a/apps/common/mobile/resources/less/contextmenu.less +++ b/apps/common/mobile/resources/less/contextmenu.less @@ -4,4 +4,8 @@ .document-menu { width: auto; +} + +html.phone .document-menu .list-block .list-button { + padding: 0 10px; } \ No newline at end of file diff --git a/apps/documenteditor/mobile/locale/en.json b/apps/documenteditor/mobile/locale/en.json index 23eca76da..04eb48129 100644 --- a/apps/documenteditor/mobile/locale/en.json +++ b/apps/documenteditor/mobile/locale/en.json @@ -129,6 +129,21 @@ "textEditReply": "Edit Reply" } }, + "ContextMenu": { + "menuViewComment": "View Comment", + "menuAddComment": "Add Comment", + "menuMerge": "Merge", + "menuSplit": "Split", + "menuDelete": "Delete", + "menuDeleteTable": "Delete Table", + "menuEdit": "Edit", + "menuAddLink": "Add Link", + "menuReviewChange": "Review Change", + "menuReview": "Review", + "menuOpenLink": "Open Link", + "menuMore": "More", + "menuCancel": "Cancel" + }, "Settings": { "textCancel": "Cancel", "textSettings": "Settings", diff --git a/apps/documenteditor/mobile/src/controller/ContextMenu.jsx b/apps/documenteditor/mobile/src/controller/ContextMenu.jsx index c82ae0f3a..793a3e3d9 100644 --- a/apps/documenteditor/mobile/src/controller/ContextMenu.jsx +++ b/apps/documenteditor/mobile/src/controller/ContextMenu.jsx @@ -4,6 +4,7 @@ import { inject, observer } from "mobx-react"; import ContextMenuController from '../../../../common/mobile/lib/controller/ContextMenu'; import { idContextMenuElement } from '../../../../common/mobile/lib/view/ContextMenu'; import { Device } from '../../../../common/mobile/utils/device'; +import { withTranslation} from 'react-i18next'; @inject ( stores => ({ isEdit: stores.storeAppOptions.isEdit, @@ -70,6 +71,9 @@ class ContextMenu extends ContextMenuController { initMenuItems() { if ( !Common.EditorApi ) return []; + const { t } = this.props; + const _t = t("ContextMenu", { returnObjects: true }); + const { isEdit, canViewComments, canReview } = this.props; const api = Common.EditorApi.get(); @@ -81,7 +85,6 @@ class ContextMenu extends ContextMenuController { if ( canCopy ) { itemsIcon.push({ - caption: /*me.menuCopy*/ 'Copy', event: 'copy', icon: 'icon-copy' }); @@ -89,7 +92,7 @@ class ContextMenu extends ContextMenuController { if ( canViewComments && this.isComments && !isEdit ) { itemsText.push({ - caption: /*me.menuViewComment*/'View Comment', + caption: _t.menuViewComment, event: 'viewcomment' }); } @@ -144,7 +147,6 @@ class ContextMenu extends ContextMenuController { if ( isEdit && !this.isDisconnected ) { if ( !lockedText && !lockedTable && !lockedImage && !lockedHeader && canCopy ) { itemsIcon.push({ - // caption: me.menuCut, event: 'cut', icon: 'icon-cut' }); @@ -155,16 +157,70 @@ class ContextMenu extends ContextMenuController { if ( !lockedText && !lockedTable && !lockedImage && !lockedHeader ) { itemsIcon.push({ - // caption: me.menuPaste, event: 'paste', icon: 'icon-paste' }); } - // For test + if ( isTable && api.CheckBeforeMergeCells() && !lockedTable && !lockedHeader) { + itemsText.push({ + caption: _t.menuMerge, + event: 'merge' + }); + } + + if ( isTable && api.CheckBeforeSplitCells() && !lockedTable && !lockedHeader ) { + itemsText.push({ + caption: _t.menuSplit, + event: 'split' + }); + } + + if ( !lockedText && !lockedTable && !lockedImage && !lockedHeader ) { + itemsText.push({ + caption: _t.menuDelete, + event: 'delete' + }); + } + + if ( isTable && !lockedTable && !lockedText && !lockedHeader ) { + itemsText.push({ + caption: _t.menuDeleteTable, + event: 'deletetable' + }); + } + + if ( !lockedText && !lockedTable && !lockedImage && !lockedHeader ){ + itemsText.push({ + caption: _t.menuEdit, + event: 'edit' + }); + } + + // if ( !_.isEmpty(api.can_AddHyperlink()) && !lockedHeader) { + // arrItems.push({ + // caption: _t.menuAddLink, + // event: 'addlink' + // }); + // } + + if ( canReview ) { + if (false /*_inRevisionChange*/) { + itemsText.push({ + caption: _t.menuReviewChange, + event: 'reviewchange' + }); + } else { + itemsText.push({ + caption: _t.menuReview, + event: 'review' + }); + } + } + if ( this.isComments && canViewComments ) { itemsText.push({ - caption: /*me.menuViewComment*/'View Comment', + caption: _t.menuViewComment, event: 'viewcomment' }); } @@ -173,102 +229,23 @@ class ContextMenu extends ContextMenuController { const hideAddComment = !canViewComments || api.can_AddQuotedComment() === false || lockedText || lockedTable || lockedImage || lockedHeader || (!isText && isObject); if ( !hideAddComment ) { itemsText.push({ - caption: /*me.menuAddComment*/'Add Comment', + caption: _t.menuAddComment, event: 'addcomment' }); } - // end test - - if ( isTable && api.CheckBeforeMergeCells() && !lockedTable && !lockedHeader) { - itemsText.push({ - caption: /*me.menuMerge*/'Merge', - event: 'merge' - }); - } - - if ( isTable && api.CheckBeforeSplitCells() && !lockedTable && !lockedHeader ) { - itemsText.push({ - caption: /*me.menuSplit*/'Split', - event: 'split' - }); - } - - if ( !lockedText && !lockedTable && !lockedImage && !lockedHeader ) { - itemsText.push({ - caption: /*me.menuDelete*/'Delete', - event: 'delete' - }); - } - - if ( isTable && !lockedTable && !lockedText && !lockedHeader ) { - itemsText.push({ - caption: /*me.menuDeleteTable*/'Delete Table', - event: 'deletetable' - }); - } - - if ( !lockedText && !lockedTable && !lockedImage && !lockedHeader ){ - itemsText.push({ - caption: /*me.menuEdit*/'Edit', - event: 'edit' - }); - } - - // if ( !_.isEmpty(api.can_AddHyperlink()) && !lockedHeader) { - // arrItems.push({ - // caption: me.menuAddLink, - // event: 'addlink' - // }); - // } - - if ( canReview ) { - if (false /*_inRevisionChange*/) { - itemsText.push({ - caption: /*me.menuReviewChange*/'Review Change', - event: 'reviewchange' - }); - } else { - itemsText.push({ - caption: /*me.menuReview*/'Review', - event: 'review' - }); - } - } - - if ( this.isComments && canViewComments ) { - itemsText.push({ - caption: /*me.menuViewComment*/'View Comment', - event: 'viewcomment' - }); - } - - /*const isObject = isShape || isChart || isImage || isTable; - const hideAddComment = !canViewComments || api.can_AddQuotedComment() === false || lockedText || lockedTable || lockedImage || lockedHeader || (!isText && isObject); - if ( !hideAddComment ) { - itemsText.push({ - caption: 'Add Comment', - event: 'addcomment' - }); - }*/ } } if ( isLink ) { itemsText.push({ - caption: /*me.menuOpenLink*/'Open Link', + caption: _t.menuOpenLink, event: 'openlink' }); } if ( Device.phone && itemsText.length > 2 ) { - // _actionSheets = arrItems.slice(2); - // arrItems = arrItems.slice(0, 2); - // arrItems.push({ - // caption: me.menuMore, - // event: 'showActionSheet' - // }); this.extraItems = itemsText.splice(2,itemsText.length, { - caption: /*me.menuMore*/'More', + caption: _t.menuMore, event: 'showActionSheet' }); } @@ -285,6 +262,11 @@ class ContextMenu extends ContextMenuController { // event: 'review' // }]; } + + initExtraItems () { + return (this.extraItems && this.extraItems.length > 0 ? this.extraItems : []); + } } -export { ContextMenu as default }; \ No newline at end of file +const _ContextMenu = withTranslation()(ContextMenu); +export { _ContextMenu as default }; \ No newline at end of file From 555e983bc3b4967acf4e873010ed1c3780881615 Mon Sep 17 00:00:00 2001 From: SergeyEzhin Date: Tue, 16 Mar 2021 16:41:17 +0300 Subject: [PATCH 20/21] [PE mobile] Small edits --- apps/presentationeditor/mobile/src/store/appOptions.js | 2 ++ vendor/framework7-react/babel.config.js | 2 +- vendor/framework7-react/package.json | 4 ++-- 3 files changed, 5 insertions(+), 3 deletions(-) diff --git a/apps/presentationeditor/mobile/src/store/appOptions.js b/apps/presentationeditor/mobile/src/store/appOptions.js index 052cd0a15..21b5e7eba 100644 --- a/apps/presentationeditor/mobile/src/store/appOptions.js +++ b/apps/presentationeditor/mobile/src/store/appOptions.js @@ -3,11 +3,13 @@ import {action, observable, makeObservable} from 'mobx'; export class storeAppOptions { constructor() { makeObservable(this, { + isEdit: observable, setConfigOptions: action, setPermissionOptions: action }); } + isEdit = false; config = {}; setConfigOptions (config) { diff --git a/vendor/framework7-react/babel.config.js b/vendor/framework7-react/babel.config.js index a899c701d..e25272bed 100644 --- a/vendor/framework7-react/babel.config.js +++ b/vendor/framework7-react/babel.config.js @@ -9,6 +9,6 @@ module.exports = { '@babel/plugin-transform-runtime', '@babel/plugin-syntax-dynamic-import', ['@babel/plugin-proposal-decorators', {'legacy': true }], - ['@babel/plugin-proposal-class-properties',{'loose':true}], + ['@babel/plugin-proposal-class-properties',{'loose': false}], ], }; diff --git a/vendor/framework7-react/package.json b/vendor/framework7-react/package.json index 2cfa15418..a7e241a4d 100644 --- a/vendor/framework7-react/package.json +++ b/vendor/framework7-react/package.json @@ -58,8 +58,8 @@ "less": "^3.13.1", "less-loader": "^6.2.0", "mini-css-extract-plugin": "^0.9.0", - "mobx": "^5.15.7", - "mobx-react": "^6.3.1", + "mobx": "^6.1.8", + "mobx-react": "^7.1.0", "optimize-css-assets-webpack-plugin": "^5.0.4", "ora": "^4.1.1", "postcss-loader": "^3.0.0", From d16393eb696f4a2c6856de4132a59d170cdf51b3 Mon Sep 17 00:00:00 2001 From: SergeyEzhin Date: Tue, 16 Mar 2021 18:06:12 +0300 Subject: [PATCH 21/21] [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)}}/>