From 45b0cb2bac6c04b9eca0acd6aedf1a6bcc990452 Mon Sep 17 00:00:00 2001 From: SergeyEzhin Date: Fri, 30 Apr 2021 01:18:03 +0300 Subject: [PATCH] [common] Edits toolbar and corrected searchbar --- apps/common/mobile/lib/view/Search.jsx | 43 +++++++++++++------ .../mobile/resources/less/common-ios.less | 36 +++++++++++++--- .../resources/less/common-material.less | 11 ++--- apps/common/mobile/resources/less/search.less | 7 ++- apps/documenteditor/mobile/locale/en.json | 3 +- .../mobile/src/controller/Search.jsx | 2 + .../mobile/src/view/Toolbar.jsx | 8 +++- apps/presentationeditor/mobile/locale/en.json | 3 +- .../mobile/src/controller/Search.jsx | 2 + .../mobile/src/view/Toolbar.jsx | 8 +++- apps/spreadsheeteditor/mobile/locale/en.json | 1 + .../mobile/src/controller/Search.jsx | 2 + .../mobile/src/view/Toolbar.jsx | 8 +++- 13 files changed, 101 insertions(+), 33 deletions(-) diff --git a/apps/common/mobile/lib/view/Search.jsx b/apps/common/mobile/lib/view/Search.jsx index ae026d894..21c08d876 100644 --- a/apps/common/mobile/lib/view/Search.jsx +++ b/apps/common/mobile/lib/view/Search.jsx @@ -9,7 +9,8 @@ import { observable, runInAction } from "mobx"; import { observer } from "mobx-react"; const searchOptions = observable({ - usereplace: false + usereplace: false, + isReplaceAll: false }); const popoverStyle = { @@ -31,15 +32,20 @@ class SearchSettingsView extends Component { searchBy: 1, lookIn: 1, isMatchCase: false, - isMatchCell: false + isMatchCell: false, + isReplaceAll: false }; } onFindReplaceClick(action) { - runInAction(() => searchOptions.usereplace = action == 'replace'); + runInAction(() => { + searchOptions.usereplace = action == 'replace'; + searchOptions.isReplaceAll = action == 'replace-all'; + }); this.setState({ - useReplace: searchOptions.usereplace + useReplace: searchOptions.usereplace, + isReplaceAll: searchOptions.isReplaceAll }); if (this.onReplaceChecked) {} @@ -251,14 +257,15 @@ class SearchView extends Component { render() { const usereplace = searchOptions.usereplace; - const hidden = {display: "none"}; + const isReplaceAll = searchOptions.isReplaceAll; + // const hidden = {display: "none"}; const searchQuery = this.state.searchQuery; const replaceQuery = this.state.replaceQuery; const isIos = Device.ios; const { _t } = this.props; if(this.searchbar && this.searchbar.enabled) { - usereplace ? this.searchbar.el.classList.add('replace') : this.searchbar.el.classList.remove('replace'); + usereplace || isReplaceAll ? this.searchbar.el.classList.add('replace') : this.searchbar.el.classList.remove('replace'); } return ( @@ -277,17 +284,25 @@ class SearchView extends Component { {isIos ? : null} -
- {this.changeReplaceQuery(e.target.value)}} /> - {isIos ? : null} - -
+ {usereplace || isReplaceAll ? +
+ {/* style={!usereplace ? hidden: null} */} + {this.changeReplaceQuery(e.target.value)}} /> + {isIos ? : null} + +
+ : null}
this.onSearchClick(SEARCH_BACKWARD)}> diff --git a/apps/common/mobile/resources/less/common-ios.less b/apps/common/mobile/resources/less/common-ios.less index 2dc225ede..5bea40077 100644 --- a/apps/common/mobile/resources/less/common-ios.less +++ b/apps/common/mobile/resources/less/common-ios.less @@ -435,6 +435,9 @@ // Find and Replace .navbar { + .searchbar { + background: var(--f7-navbar-bg-color); + } .searchbar-input-wrap { margin-right: 10px; height: 28px; @@ -462,6 +465,10 @@ } .searchbar-inner { + &__left { + margin-right: 10px; + justify-content: center; + } &__right { .buttons-row a.next { margin-left: 15px; @@ -469,14 +476,25 @@ } } - @media(max-width: 550px) - { + .searchbar-expandable.searchbar-enabled { + &.replace { + .searchbar-inner { + &__right { + width: 28%; + } + } + } + } + + @media(max-width: 550px) { + .navbar { + .searchbar-input-wrap { + margin-right: 0; + } + } .searchbar-expandable.searchbar-enabled { top: 0; .searchbar-inner { - &__left { - margin-right: 15px; - } &__center { flex-direction: column; } @@ -494,6 +512,14 @@ margin: 8px 0; } } + &__right { + width: auto; + height: 100%; + justify-content: space-between; + .buttons-row-replace { + height: 50%; + } + } } } } diff --git a/apps/common/mobile/resources/less/common-material.less b/apps/common/mobile/resources/less/common-material.less index 4bec965e1..512fe7a08 100644 --- a/apps/common/mobile/resources/less/common-material.less +++ b/apps/common/mobile/resources/less/common-material.less @@ -344,13 +344,9 @@ &__center { flex-wrap: wrap; } - &__left { - padding-top: 4px; - } - } - - .buttons-row-replace a { - color: @white; + // &__left { + // padding-top: 4px; + // } } .navbar { @@ -434,6 +430,7 @@ } .buttons-row-replace a { color: @white; + padding: 0; } .searchbar .buttons-row { align-self: flex-start; diff --git a/apps/common/mobile/resources/less/search.less b/apps/common/mobile/resources/less/search.less index caf870f49..f322929d1 100644 --- a/apps/common/mobile/resources/less/search.less +++ b/apps/common/mobile/resources/less/search.less @@ -15,10 +15,11 @@ } .searchbar-inner { + justify-content: space-between; &__center { display: flex; align-items: center; - width: 100%; + width: 81%; } &__right { display: flex; @@ -34,7 +35,9 @@ display: flex; flex-direction: column; align-items: center; - width: max-content; + // width: max-content; + width: 100%; + justify-content: center; a { font-size: 15px; height: auto; diff --git a/apps/documenteditor/mobile/locale/en.json b/apps/documenteditor/mobile/locale/en.json index 2701603f2..6bd1dfcf8 100644 --- a/apps/documenteditor/mobile/locale/en.json +++ b/apps/documenteditor/mobile/locale/en.json @@ -337,7 +337,8 @@ "textSearch": "Search", "textMarginsW": "Left and right margins are too high for a given page width", "textMarginsH": "Top and bottom margins are too high for a given page height", - "textCollaboration": "Collaboration" + "textCollaboration": "Collaboration", + "textFindAndReplaceAll": "Find and Replace All" }, "Edit": { "textClose": "Close", diff --git a/apps/documenteditor/mobile/src/controller/Search.jsx b/apps/documenteditor/mobile/src/controller/Search.jsx index 4184133cc..a61230b9f 100644 --- a/apps/documenteditor/mobile/src/controller/Search.jsx +++ b/apps/documenteditor/mobile/src/controller/Search.jsx @@ -35,6 +35,8 @@ class SearchSettings extends SearchSettingsView { this.onFindReplaceClick('find')} /> this.onFindReplaceClick('replace')} /> + this.onFindReplaceClick('replace-all')}> diff --git a/apps/documenteditor/mobile/src/view/Toolbar.jsx b/apps/documenteditor/mobile/src/view/Toolbar.jsx index 25171c0aa..a49d002a8 100644 --- a/apps/documenteditor/mobile/src/view/Toolbar.jsx +++ b/apps/documenteditor/mobile/src/view/Toolbar.jsx @@ -9,7 +9,7 @@ const ToolbarView = props => { {props.isShowBack && } - {props.isEdit && EditorUIController.getUndoRedo && EditorUIController.getUndoRedo({ + {Device.ios && props.isEdit && EditorUIController.getUndoRedo && EditorUIController.getUndoRedo({ disabledUndo: !props.isCanUndo, disabledRedo: !props.isCanRedo, onUndoClick: props.onUndo, @@ -18,6 +18,12 @@ const ToolbarView = props => { {!Device.phone && {props.docTitle}} + {Device.android && props.isEdit && EditorUIController.getUndoRedo && EditorUIController.getUndoRedo({ + disabledUndo: !props.isCanUndo, + disabledRedo: !props.isCanRedo, + onUndoClick: props.onUndo, + onRedoClick: props.onRedo + })} {props.isEdit && EditorUIController.getToolbarOptions && EditorUIController.getToolbarOptions({ disabled: disableEditBtn || props.disabledControls, onEditClick: e => props.openOptions('edit'), diff --git a/apps/presentationeditor/mobile/locale/en.json b/apps/presentationeditor/mobile/locale/en.json index 2b1d429dc..768aafced 100644 --- a/apps/presentationeditor/mobile/locale/en.json +++ b/apps/presentationeditor/mobile/locale/en.json @@ -150,7 +150,8 @@ "Settings": { "textDone": "Done", "textSettings": "Settings", - "textFindAndReplace": "Find and replace", + "textFindAndReplace": "Find and Replace", + "textFindAndReplaceAll": "Find and Replace All", "textPresentationSettings": "Presentation Settings", "textApplicationSettings": "Application Settings", "textDownload": "Download", diff --git a/apps/presentationeditor/mobile/src/controller/Search.jsx b/apps/presentationeditor/mobile/src/controller/Search.jsx index d99567a2d..3f9706fb2 100644 --- a/apps/presentationeditor/mobile/src/controller/Search.jsx +++ b/apps/presentationeditor/mobile/src/controller/Search.jsx @@ -28,6 +28,8 @@ class SearchSettings extends SearchSettingsView { this.onFindReplaceClick('find')} /> this.onFindReplaceClick('replace')} /> + this.onFindReplaceClick('replace-all')}> diff --git a/apps/presentationeditor/mobile/src/view/Toolbar.jsx b/apps/presentationeditor/mobile/src/view/Toolbar.jsx index 32c729891..cc053e6ae 100644 --- a/apps/presentationeditor/mobile/src/view/Toolbar.jsx +++ b/apps/presentationeditor/mobile/src/view/Toolbar.jsx @@ -8,7 +8,7 @@ const ToolbarView = props => { {props.isShowBack && } - {props.isEdit && EditorUIController.getUndoRedo && EditorUIController.getUndoRedo({ + {Device.ios && props.isEdit && EditorUIController.getUndoRedo && EditorUIController.getUndoRedo({ disabledUndo: !props.isCanUndo, disabledRedo: !props.isCanRedo, onUndoClick: props.onUndo, @@ -17,6 +17,12 @@ const ToolbarView = props => { {!Device.phone && {props.docTitle}} + {Device.android && props.isEdit && EditorUIController.getUndoRedo && EditorUIController.getUndoRedo({ + disabledUndo: !props.isCanUndo, + disabledRedo: !props.isCanRedo, + onUndoClick: props.onUndo, + onRedoClick: props.onRedo + })} {props.openOptions('preview')}}> {props.isEdit && EditorUIController.getToolbarOptions && EditorUIController.getToolbarOptions({ disabledAdd: props.disabledAdd || props.disabledControls, diff --git a/apps/spreadsheeteditor/mobile/locale/en.json b/apps/spreadsheeteditor/mobile/locale/en.json index 9c07b0773..53cd61ec1 100644 --- a/apps/spreadsheeteditor/mobile/locale/en.json +++ b/apps/spreadsheeteditor/mobile/locale/en.json @@ -402,6 +402,7 @@ }, "Settings": { "textFindAndReplace": "Find and Replace", + "textFindAndReplaceAll": "Find and Replace All", "textSpreadsheetSettings": "Spreadsheet Settings", "textApplicationSettings": "Application Settings", "textDownload": "Download", diff --git a/apps/spreadsheeteditor/mobile/src/controller/Search.jsx b/apps/spreadsheeteditor/mobile/src/controller/Search.jsx index c5da9a6b1..6deb8480e 100644 --- a/apps/spreadsheeteditor/mobile/src/controller/Search.jsx +++ b/apps/spreadsheeteditor/mobile/src/controller/Search.jsx @@ -36,6 +36,8 @@ class SearchSettings extends SearchSettingsView { this.onFindReplaceClick('find')} /> this.onFindReplaceClick('replace')} /> + this.onFindReplaceClick('replace-all')}> {_t.textSearchIn} diff --git a/apps/spreadsheeteditor/mobile/src/view/Toolbar.jsx b/apps/spreadsheeteditor/mobile/src/view/Toolbar.jsx index d6625cc27..00a96e3f5 100644 --- a/apps/spreadsheeteditor/mobile/src/view/Toolbar.jsx +++ b/apps/spreadsheeteditor/mobile/src/view/Toolbar.jsx @@ -8,7 +8,7 @@ const ToolbarView = props => { {props.isShowBack && } - {props.isEdit && EditorUIController.toolbarOptions && EditorUIController.toolbarOptions.getUndoRedo({ + {Device.ios && props.isEdit && EditorUIController.getUndoRedo && EditorUIController.getUndoRedo({ disabledUndo: !props.isCanUndo, disabledRedo: !props.isCanRedo, onUndoClick: props.onUndo, @@ -17,6 +17,12 @@ const ToolbarView = props => { {!Device.phone && {props.docTitle}} + {Device.android && props.isEdit && EditorUIController.getUndoRedo && EditorUIController.getUndoRedo({ + disabledUndo: !props.isCanUndo, + disabledRedo: !props.isCanRedo, + onUndoClick: props.onUndo, + onRedoClick: props.onRedo + })} {props.isEdit && EditorUIController.toolbarOptions && EditorUIController.toolbarOptions.getEditOptions({ disabled: props.disabledEditControls || props.disabledControls, onEditClick: () => props.openOptions('edit'),