From 6fe3f773d17f1838df183df947780883f2aa6d29 Mon Sep 17 00:00:00 2001 From: SergeyEzhin Date: Thu, 15 Apr 2021 14:07:26 +0300 Subject: [PATCH] [mobile] Changed searchbar --- apps/common/mobile/lib/view/Search.jsx | 82 ++++---------- .../mobile/resources/less/common-ios.less | 51 ++------- .../resources/less/common-material.less | 106 ++++++++---------- apps/common/mobile/resources/less/search.less | 44 +------- apps/documenteditor/mobile/locale/en.json | 3 +- .../mobile/src/controller/Search.jsx | 10 +- apps/presentationeditor/mobile/locale/en.json | 3 +- .../mobile/src/controller/Search.jsx | 10 +- apps/spreadsheeteditor/mobile/locale/en.json | 3 +- .../mobile/src/controller/Search.jsx | 10 +- 10 files changed, 102 insertions(+), 220 deletions(-) diff --git a/apps/common/mobile/lib/view/Search.jsx b/apps/common/mobile/lib/view/Search.jsx index 64f8ef7d4..f3a551608 100644 --- a/apps/common/mobile/lib/view/Search.jsx +++ b/apps/common/mobile/lib/view/Search.jsx @@ -38,23 +38,19 @@ class SearchSettingsView extends Component { } onFindReplaceClick(action) { - runInAction(() => searchOptions.usereplace = action == 'replace'); + runInAction(() => { + searchOptions.usereplace = action == 'replace'; + searchOptions.isReplaceAll = action == 'replace-all'; + }); this.setState({ useReplace: searchOptions.usereplace, + isReplaceAll: searchOptions.isReplaceAll }); if (this.onReplaceChecked) {} } - onSwitchReplaceMode(value) { - runInAction(() => searchOptions.isReplaceAll = value === true); - - this.setState({ - isReplaceAll: searchOptions.isReplaceAll - }); - } - extraSearchOptions() { } @@ -261,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 ( @@ -282,12 +279,14 @@ class SearchView extends Component { {isIos ? : null} -
- {this.changeReplaceQuery(e.target.value)}} /> - {isIos ? : null} - -
+ {usereplace || isReplaceAll ? ( +
+ {this.changeReplaceQuery(e.target.value)}} /> + {isIos ? : null} + +
+ ) : null}
@@ -302,55 +301,22 @@ class SearchView extends Component {
- {/*
-
- {this.changeSearchQuery(e.target.value)}} /> - {isIos ? : null} - -
-
- {this.changeReplaceQuery(e.target.value)}} /> - {isIos ? : null} - -
-
*/} - {/* -
- - - -
*/} ) diff --git a/apps/common/mobile/resources/less/common-ios.less b/apps/common/mobile/resources/less/common-ios.less index 0549eba14..99c3b61e7 100644 --- a/apps/common/mobile/resources/less/common-ios.less +++ b/apps/common/mobile/resources/less/common-ios.less @@ -440,8 +440,16 @@ height: 28px; margin: 8px 0; } - .buttons-row-replace a { - color: @themeColor; + .buttons-row-replace { + margin-top: 5px; + a { + color: @themeColor; + } + } + .searchbar-inner { + &__left, &__right { + height: 100%; + } } } @@ -462,51 +470,12 @@ padding: 0 28px; } - .searchbar-inner { - // &__right { - // .buttons-row a.next { - // margin-left: 15px; - // } - // } - } - .searchbar-expandable.searchbar-enabled { &.replace { height: 88px; } } - // @media(max-width: 550px) - // { - // .searchbar-expandable.searchbar-enabled { - // top: 0; - // .searchbar-inner { - // // &__left { - // // margin-right: 15px; - // // } - // // &__center { - // // flex-direction: column; - // // } - // // &__right { - // // flex-direction: column-reverse; - // // margin-left: 10px; - // // } - // } - // &.replace { - // height: 88px; - // margin-top: 5px; - // .searchbar-inner { - // height: 100%; - // &__center { - // .searchbar-input-wrap { - // margin: 8px 0; - // } - // } - // } - // } - // } - // } - .actions-button { background: rgba(255,255,255,.95); } diff --git a/apps/common/mobile/resources/less/common-material.less b/apps/common/mobile/resources/less/common-material.less index 27ac89bed..9f53539a0 100644 --- a/apps/common/mobile/resources/less/common-material.less +++ b/apps/common/mobile/resources/less/common-material.less @@ -28,8 +28,52 @@ display: flex; justify-content: center; } + .searchbar-inner { + padding-right: 19px; + &__left, &__right { + height: auto; + } + &__right { + display: flex; + flex-direction: column; + .buttons-row, .buttons-row-replace { + height: 50%; + } + } + &__center { + flex-wrap: wrap; + } + a.link-settings { + margin: 0; + padding: 0; + } + } + .searchbar-expandable.searchbar-enabled { + top: 0; + .searchbar-inner { + height: 100%; + } + &.replace { + height: 96px; + .searchbar-inner { + &__right { + height: 100%; + } + } + } + } + .searchbar-input-wrap { + height: 32px; + margin-right: 10px; + margin: 8px 0; + } + &-inner { + overflow: initial; + } } + // Buttons + .segmented { .decrement, .increment { display: flex; @@ -322,30 +366,14 @@ // Find and Replace - .searchbar-inner { - &__center { - flex-wrap: wrap; - } - &__left { - padding-top: 4px; - } + .searchbar { + background-color: @themeColor; } .buttons-row-replace a { color: @white; } - .navbar { - .searchbar-input-wrap { - height: 32px; - margin-right: 10px; - margin: 4px 0; - } - &-inner { - overflow: initial; - } - } - .searchbar .input-clear-button { width: 18px; height: 18px; @@ -390,48 +418,6 @@ color: @white; } - .navbar { - .searchbar-expandable.searchbar-enabled { - top: 0; - // height: 100%; - .searchbar-inner { - height: 100%; - // &__center { - // flex-direction: column; - // } - // &__right { - // flex-direction: column-reverse; - // } - } - &.replace { - height: 96px; - } - } - // 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) { - .searchbar-expandable.searchbar-enabled { - .searchbar-inner { - // &__left { - // margin-right: 33px; - // } - } - } - } - .actions-button-text { cursor: pointer; line-height: 48px; diff --git a/apps/common/mobile/resources/less/search.less b/apps/common/mobile/resources/less/search.less index 19059b326..e25416b37 100644 --- a/apps/common/mobile/resources/less/search.less +++ b/apps/common/mobile/resources/less/search.less @@ -23,27 +23,18 @@ } .searchbar-inner { - flex-wrap: wrap; padding-left: 25px; padding-right: 18px; justify-content: space-between; height: 100%; - // &__center { - // display: flex; - // align-items: center; - // width: 100%; - // } - // &__right { - // display: flex; - // align-items: center; - // } &__left { - height: 100%; + // height: 100%; width: 65%; } &__right { - height: 100%; + // height: 100%; .buttons-row { + display: flex; justify-content: flex-end; } .link-settings { @@ -60,7 +51,7 @@ align-items: center; width: 100%; justify-content: center; - margin-top: 5px; + // margin-top: 5px; a { font-size: 15px; height: auto; @@ -79,31 +70,4 @@ .searchbar-expandable.searchbar-enabled { top: 0; } - - // @media(max-width: 550px) - // { - // .searchbar-expandable.searchbar-enabled { - // .searchbar-inner { - // // &__left { - // // min-width: 22px; - // // max-width: 22px; - // // } - // // &__center { - // // flex-direction: column; - // // } - // // &__right { - // // flex-direction: column-reverse; - // // } - // } - // &.replace { - // top: 0; - // .searchbar-inner { - // height: 100%; - // &__left { - // align-self: flex-start; - // } - // } - // } - // } - // } } diff --git a/apps/documenteditor/mobile/locale/en.json b/apps/documenteditor/mobile/locale/en.json index e2d292591..f8d450c9c 100644 --- a/apps/documenteditor/mobile/locale/en.json +++ b/apps/documenteditor/mobile/locale/en.json @@ -248,7 +248,8 @@ "textReplaceAll": "Replace All", "textCaseSensitive": "Case Sensitive", "textHighlightResults": "Highlight Results", - "textSearch": "Search" + "textSearch": "Search", + "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 5a6b7c210..89b7d5c96 100644 --- a/apps/documenteditor/mobile/src/controller/Search.jsx +++ b/apps/documenteditor/mobile/src/controller/Search.jsx @@ -35,13 +35,11 @@ class SearchSettings extends SearchSettingsView { this.onFindReplaceClick('find')} /> this.onFindReplaceClick('replace')} /> + {Device.isPhone ? ( + this.onFindReplaceClick('replace-all')}> + ) : null} - {Device.isPhone ? ( - - this.onSwitchReplaceMode(!this.state.isReplaceAll)}> - - ) : null} diff --git a/apps/presentationeditor/mobile/locale/en.json b/apps/presentationeditor/mobile/locale/en.json index 8c39b9e5b..41827c607 100644 --- a/apps/presentationeditor/mobile/locale/en.json +++ b/apps/presentationeditor/mobile/locale/en.json @@ -91,7 +91,8 @@ "textCaseSensitive": "Case Sensitive", "textHighlight": "Highlight Results", "textReplace": "Replace", - "textNoTextFound": "Text not Found" + "textNoTextFound": "Text not Found", + "textFindAndReplaceAll": "Find and Replace All" }, "Add": { "textSlide": "Slide", diff --git a/apps/presentationeditor/mobile/src/controller/Search.jsx b/apps/presentationeditor/mobile/src/controller/Search.jsx index 7af4a597c..966fd8d9a 100644 --- a/apps/presentationeditor/mobile/src/controller/Search.jsx +++ b/apps/presentationeditor/mobile/src/controller/Search.jsx @@ -28,13 +28,11 @@ class SearchSettings extends SearchSettingsView { this.onFindReplaceClick('find')} /> this.onFindReplaceClick('replace')} /> + {Device.isPhone ? ( + this.onFindReplaceClick('replace-all')}> + ) : null} - {Device.isPhone ? ( - - this.onSwitchReplaceMode(!this.state.isReplaceAll)}> - - ) : null} diff --git a/apps/spreadsheeteditor/mobile/locale/en.json b/apps/spreadsheeteditor/mobile/locale/en.json index e1b4b968c..53b76b9a9 100644 --- a/apps/spreadsheeteditor/mobile/locale/en.json +++ b/apps/spreadsheeteditor/mobile/locale/en.json @@ -331,7 +331,8 @@ "textFormulas": "Formulas", "textValues": "Values", "textNoTextFound": "Text not found", - "textReplaceAll": "Replace All" + "textReplaceAll": "Replace All", + "textFindAndReplaceAll": "Find and Replace All" } }, "Statusbar": { diff --git a/apps/spreadsheeteditor/mobile/src/controller/Search.jsx b/apps/spreadsheeteditor/mobile/src/controller/Search.jsx index afe5a5305..f1e918dfd 100644 --- a/apps/spreadsheeteditor/mobile/src/controller/Search.jsx +++ b/apps/spreadsheeteditor/mobile/src/controller/Search.jsx @@ -36,13 +36,11 @@ class SearchSettings extends SearchSettingsView { this.onFindReplaceClick('find')} /> this.onFindReplaceClick('replace')} /> + {Device.isPhone ? ( + this.onFindReplaceClick('replace-all')}> + ) : null} - {Device.isPhone ? ( - - this.onSwitchReplaceMode(!this.state.isReplaceAll)}> - - ) : null} {_t.textSearchIn} this.setState({