[DE mobile] Added Replace All and adding styles for phones
This commit is contained in:
parent
ed550f1dce
commit
f9ffaf6891
|
@ -6,6 +6,7 @@ import { Dom7 } from 'framework7';
|
||||||
import { Device } from '../../../../common/mobile/utils/device';
|
import { Device } from '../../../../common/mobile/utils/device';
|
||||||
import { observable } from "mobx";
|
import { observable } from "mobx";
|
||||||
import { observer } from "mobx-react";
|
import { observer } from "mobx-react";
|
||||||
|
import { useTranslation, withTranslation } from 'react-i18next';
|
||||||
|
|
||||||
const searchOptions = observable({
|
const searchOptions = observable({
|
||||||
usereplace: false
|
usereplace: false
|
||||||
|
@ -31,11 +32,11 @@ class SearchSettingsView extends Component {
|
||||||
|
|
||||||
onFindReplaceClick(action) {
|
onFindReplaceClick(action) {
|
||||||
searchOptions.usereplace = action == 'replace';
|
searchOptions.usereplace = action == 'replace';
|
||||||
|
|
||||||
this.setState({
|
this.setState({
|
||||||
useReplace: searchOptions.usereplace
|
useReplace: searchOptions.usereplace
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
if (this.onReplaceChecked) {}
|
if (this.onReplaceChecked) {}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -43,13 +44,14 @@ class SearchSettingsView extends Component {
|
||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const show_popover = true;
|
const show_popover = !Device.phone;
|
||||||
const navbar =
|
const navbar =
|
||||||
<Navbar title="Find and replace">
|
<Navbar title="Find and replace">
|
||||||
{!show_popover &&
|
{!show_popover &&
|
||||||
<NavRight>
|
<NavRight>
|
||||||
<Link popupClose=".search-settings-popup">Done</Link>
|
<Link popupClose=".search-settings-popup">Done</Link>
|
||||||
</NavRight>}
|
</NavRight>
|
||||||
|
}
|
||||||
</Navbar>;
|
</Navbar>;
|
||||||
const extra = this.extraSearchOptions();
|
const extra = this.extraSearchOptions();
|
||||||
const content =
|
const content =
|
||||||
|
@ -66,7 +68,7 @@ class SearchSettingsView extends Component {
|
||||||
return (
|
return (
|
||||||
show_popover ?
|
show_popover ?
|
||||||
<Popover id="idx-search-settings" className="popover__titled">{content}</Popover> :
|
<Popover id="idx-search-settings" className="popover__titled">{content}</Popover> :
|
||||||
<Popup id="idx-search-settings">{content}</Popup>
|
<Popup id="idx-search-settings" className="search-settings-popup">{content}</Popup>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -89,7 +91,7 @@ class SearchView extends Component {
|
||||||
expandable: true,
|
expandable: true,
|
||||||
backdrop: false,
|
backdrop: false,
|
||||||
on: {
|
on: {
|
||||||
search: (bar, curval, prevval) => {
|
search: (bar, curval, prevval) => {
|
||||||
},
|
},
|
||||||
enable: this.onSearchbarShow.bind(this, true),
|
enable: this.onSearchbarShow.bind(this, true),
|
||||||
disable: this.onSearchbarShow.bind(this, false)
|
disable: this.onSearchbarShow.bind(this, false)
|
||||||
|
@ -104,6 +106,8 @@ class SearchView extends Component {
|
||||||
|
|
||||||
const $$ = Dom7;
|
const $$ = Dom7;
|
||||||
const $editor = $$('#editor_sdk');
|
const $editor = $$('#editor_sdk');
|
||||||
|
const $replaceLink = $$('#replace-link');
|
||||||
|
|
||||||
if (false /*iOSVersion() < 13*/) {
|
if (false /*iOSVersion() < 13*/) {
|
||||||
// $editor.single('mousedown touchstart', _.bind(me.onEditorTouchStart, me));
|
// $editor.single('mousedown touchstart', _.bind(me.onEditorTouchStart, me));
|
||||||
// $editor.single('mouseup touchend', _.bind(me.onEditorTouchEnd, 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('pointerdown', this.onEditorTouchStart.bind(this));
|
||||||
$editor.on('pointerup', this.onEditorTouchEnd.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(){
|
componentDidMount(){
|
||||||
const $$ = Dom7;
|
const $$ = Dom7;
|
||||||
this.$replace = $$('#idx-replace-val');
|
this.$replace = $$('#idx-replace-val');
|
||||||
|
// this.t = t;
|
||||||
|
// console.log(this.t);
|
||||||
}
|
}
|
||||||
|
|
||||||
onSettingsClick(e) {
|
onSettingsClick(e) {
|
||||||
if ( Device.phone ) {
|
if ( Device.phone ) {
|
||||||
// f7.popup.open('.settings-popup');
|
f7.popup.open('.search-settings-popup');
|
||||||
f7.popover.open('#idx-search-settings', '#idx-btn-search-settings');
|
|
||||||
} else f7.popover.open('#idx-search-settings', '#idx-btn-search-settings');
|
} else f7.popover.open('#idx-search-settings', '#idx-btn-search-settings');
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -139,14 +145,15 @@ class SearchView extends Component {
|
||||||
find: this.searchbar.query
|
find: this.searchbar.query
|
||||||
};
|
};
|
||||||
|
|
||||||
if ( searchOptions.usereplace )
|
if (searchOptions.usereplace) {
|
||||||
params.replace = this.$replace.val();
|
params.replace = this.$replace.val();
|
||||||
|
}
|
||||||
|
|
||||||
return params;
|
return params;
|
||||||
}
|
}
|
||||||
|
|
||||||
onSearchClick(action) {
|
onSearchClick(action) {
|
||||||
if ( this.searchbar && this.searchbar.query) {
|
if (this.searchbar && this.searchbar.query) {
|
||||||
if ( this.props.onSearchQuery ) {
|
if ( this.props.onSearchQuery ) {
|
||||||
let params = this.searchParams();
|
let params = this.searchParams();
|
||||||
params.forward = action != SEARCH_BACKWARD;
|
params.forward = action != SEARCH_BACKWARD;
|
||||||
|
@ -157,7 +164,7 @@ class SearchView extends Component {
|
||||||
}
|
}
|
||||||
|
|
||||||
onReplaceClick() {
|
onReplaceClick() {
|
||||||
if ( this.searchbar && this.searchbar.query) {
|
if (this.searchbar && this.searchbar.query) {
|
||||||
if ( this.props.onReplaceQuery ) {
|
if ( this.props.onReplaceQuery ) {
|
||||||
let params = this.searchParams();
|
let params = this.searchParams();
|
||||||
this.props.onReplaceQuery(params);
|
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) {
|
onSearchbarShow(isshowed, bar) {
|
||||||
if ( !isshowed ) {
|
if ( !isshowed ) {
|
||||||
this.$replace.val('');
|
this.$replace.val('');
|
||||||
|
@ -220,6 +240,7 @@ class SearchView extends Component {
|
||||||
const hidden = {display: "none"};
|
const hidden = {display: "none"};
|
||||||
const searchQuery = this.state.searchQuery;
|
const searchQuery = this.state.searchQuery;
|
||||||
const replaceQuery = this.state.replaceQuery;
|
const replaceQuery = this.state.replaceQuery;
|
||||||
|
// const _t = this.t('View.Settings', {returnObjects: true});
|
||||||
|
|
||||||
// console.log(searchQuery);
|
// console.log(searchQuery);
|
||||||
// console.log(replaceQuery)
|
// console.log(replaceQuery)
|
||||||
|
@ -228,31 +249,38 @@ class SearchView extends Component {
|
||||||
<form className="searchbar">
|
<form className="searchbar">
|
||||||
<div className="searchbar-bg"></div>
|
<div className="searchbar-bg"></div>
|
||||||
<div className="searchbar-inner">
|
<div className="searchbar-inner">
|
||||||
<div className="buttons-row">
|
<div className="buttons-row searchbar-inner__left">
|
||||||
<a id="idx-btn-search-settings" className="link icon-only" onClick={this.onSettingsClick}>
|
<a id="idx-btn-search-settings" className="link icon-only" onClick={this.onSettingsClick}>
|
||||||
<i className="icon icon-settings" />
|
<i className="icon icon-settings" />
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
<div className="searchbar-input-wrap">
|
<div className="searchbar-inner__center">
|
||||||
<input placeholder="Search" type="search" value={searchQuery}
|
<div className="searchbar-input-wrap">
|
||||||
onChange={e => {this.changeSearchQuery(e.target.value)}} />
|
<input placeholder="Search" type="search" value={searchQuery}
|
||||||
<i className="searchbar-icon" />
|
onChange={e => {this.changeSearchQuery(e.target.value)}} />
|
||||||
<span className="input-clear-button" />
|
<i className="searchbar-icon" />
|
||||||
|
<span className="input-clear-button" />
|
||||||
|
</div>
|
||||||
|
<div className="searchbar-input-wrap" style={!usereplace ? hidden: null}>
|
||||||
|
<input placeholder="Replace" type="search" id="idx-replace-val" value={replaceQuery}
|
||||||
|
onChange={e => {this.changeReplaceQuery(e.target.value)}} />
|
||||||
|
<i className="searchbar-icon" />
|
||||||
|
<span className="input-clear-button" />
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="searchbar-input-wrap" style={!usereplace ? hidden: null}>
|
<div className="buttons-row searchbar-inner__right">
|
||||||
<input placeholder="Replace" type="search" id="idx-replace-val" value={replaceQuery}
|
<div className="buttons-row buttons-row-replace">
|
||||||
onChange={e => {this.changeReplaceQuery(e.target.value)}} />
|
<a id="replace-link" className={"link " + (searchQuery.trim().length ? "" : "disabled")} style={!usereplace ? hidden: null} onClick={() => this.onReplaceClick()}>Replace</a>
|
||||||
<i className="searchbar-icon" />
|
<a id="replace-all-link" className={"link " + (searchQuery.trim().length ? "" : "disabled")} style={!usereplace ? hidden: null} onClick={() => this.onReplaceAllClick()}>Replace All</a>
|
||||||
<span className="input-clear-button" />
|
</div>
|
||||||
</div>
|
<div className="buttons-row">
|
||||||
<div className="buttons-row">
|
<a className={"link icon-only prev " + (searchQuery.trim().length ? "" : "disabled")} onClick={() => this.onSearchClick(SEARCH_BACKWARD)}>
|
||||||
<a className={"link replace " + (searchQuery.trim().length ? "" : "disabled")} style={!usereplace ? hidden: null} onClick={() => this.onReplaceClick()}>Replace</a>
|
<i className="icon icon-prev" />
|
||||||
<a className={"link icon-only prev " + (searchQuery.trim().length ? "" : "disabled")} onClick={() => this.onSearchClick(SEARCH_BACKWARD)}>
|
</a>
|
||||||
<i className="icon icon-prev" />
|
<a className={"link icon-only next " + (searchQuery.trim().length ? "" : "disabled")} onClick={() => this.onSearchClick(SEARCH_FORWARD)}>
|
||||||
</a>
|
<i className="icon icon-next" />
|
||||||
<a className={"link icon-only next " + (searchQuery.trim().length ? "" : "disabled")} onClick={() => this.onSearchClick(SEARCH_FORWARD)}>
|
</a>
|
||||||
<i className="icon icon-next" />
|
</div>
|
||||||
</a>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
|
|
|
@ -390,4 +390,24 @@
|
||||||
background-color: @white;
|
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%;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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('<svg xmlns="http://www.w3.org/2000/svg" fill="#FFFFFF" height="24" viewBox="0 0 24 24" width="24"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/><path d="M0 0h24v24H0z" fill="none"/></svg>');
|
||||||
|
}
|
||||||
|
.searchbar input[type=search]::placeholder {
|
||||||
|
color: @white;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -17,4 +17,54 @@
|
||||||
.searchbar-input-wrap {
|
.searchbar-input-wrap {
|
||||||
margin-right: 10px;
|
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;
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// }
|
||||||
}
|
}
|
||||||
|
|
|
@ -196,6 +196,7 @@
|
||||||
"advDRMOptions": "Protected 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",
|
"textNoTextFound": "Text not found",
|
||||||
|
"textReplace": "Replace",
|
||||||
"textReplaceAll": "Replace All"
|
"textReplaceAll": "Replace All"
|
||||||
},
|
},
|
||||||
"Edit": {
|
"Edit": {
|
||||||
|
|
|
@ -71,13 +71,21 @@ const Search = props => {
|
||||||
|
|
||||||
const onReplaceQuery = params => {
|
const onReplaceQuery = params => {
|
||||||
const api = Common.EditorApi.get();
|
const api = Common.EditorApi.get();
|
||||||
|
|
||||||
if (params.find && params.find.length) {
|
if (params.find && params.find.length) {
|
||||||
api.asc_replaceText(params.find, params.replace, false, params.caseSensitive, params.highlight);
|
api.asc_replaceText(params.find, params.replace, false, params.caseSensitive, params.highlight);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
return <DESearchView onSearchQuery={onSearchQuery} onReplaceQuery={onReplaceQuery} />
|
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 <DESearchView onSearchQuery={onSearchQuery} onReplaceQuery={onReplaceQuery} onReplaceAllQuery={onReplaceAllQuery} />
|
||||||
};
|
};
|
||||||
|
|
||||||
export {Search, SearchSettings}
|
export {Search, SearchSettings}
|
||||||
|
|
|
@ -15,7 +15,7 @@
|
||||||
&.icon-search {
|
&.icon-search {
|
||||||
width: 22px;
|
width: 22px;
|
||||||
height: 22px;
|
height: 22px;
|
||||||
.encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M19.5,16.8L16,13.3c0.7-1.1,1.1-2.4,1.1-3.8C17,5.4,13.6,2,9.5,2S2,5.4,2,9.5S5.4,17,9.5,17c1.4,0,2.7-0.4,3.8-1.1l3.5,3.5c0.7,0.7,1.9,0.7,2.6,0C20.2,18.7,20.2,17.6,19.5,16.8z M9.5,15.3c-3.2,0-5.8-2.6-5.8-5.8s2.6-5.8,5.8-5.8s5.8,2.6,5.8,5.8S12.7,15.3,9.5,15.3z"/></g></svg>');
|
.encoded-svg-background('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M19.5,16.8L16,13.3c0.7-1.1,1.1-2.4,1.1-3.8C17,5.4,13.6,2,9.5,2S2,5.4,2,9.5S5.4,17,9.5,17c1.4,0,2.7-0.4,3.8-1.1l3.5,3.5c0.7,0.7,1.9,0.7,2.6,0C20.2,18.7,20.2,17.6,19.5,16.8z M9.5,15.3c-3.2,0-5.8-2.6-5.8-5.8s2.6-5.8,5.8-5.8s5.8,2.6,5.8,5.8S12.7,15.3,9.5,15.3z"/></g></svg>');
|
||||||
}
|
}
|
||||||
&.icon-edit {
|
&.icon-edit {
|
||||||
width: 22px;
|
width: 22px;
|
||||||
|
|
Loading…
Reference in a new issue