From e0258fa0b75d09b2e264c1021de54e5cb368b8dd Mon Sep 17 00:00:00 2001 From: SergeyEzhin Date: Tue, 9 Mar 2021 22:42:29 +0300 Subject: [PATCH] [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;