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;