[DE mobile] Added Replace All and adding styles for phones

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 =
             <Navbar title="Find and replace">
                 {!show_popover &&
                     <NavRight>
                         <Link popupClose=".search-settings-popup">Done</Link>
-                    </NavRight>}
+                    </NavRight>
+                }
             </Navbar>;
         const extra = this.extraSearchOptions();
         const content =
@@ -66,7 +68,7 @@ class SearchSettingsView extends Component {
         return (
             show_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>
         )
     }
 }
@@ -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.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');
     }
 
@@ -139,8 +145,9 @@ class SearchView extends Component {
             find: this.searchbar.query
         };
 
-        if ( searchOptions.usereplace )
+        if (searchOptions.usereplace) {
             params.replace = this.$replace.val();
+        }
 
         return 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,11 +249,12 @@ class SearchView extends Component {
             <form className="searchbar">
                 <div className="searchbar-bg"></div>
                 <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}>
                             <i className="icon icon-settings" />
                         </a>
                     </div>
+                    <div className="searchbar-inner__center">
                         <div className="searchbar-input-wrap">
                             <input placeholder="Search" type="search" value={searchQuery} 
                                 onChange={e => {this.changeSearchQuery(e.target.value)}} />
@@ -245,8 +267,13 @@ class SearchView extends Component {
                             <i className="searchbar-icon" />
                             <span className="input-clear-button" />
                         </div>
+                    </div>
+                    <div className="buttons-row searchbar-inner__right">
+                        <div className="buttons-row buttons-row-replace">
+                            <a id="replace-link" className={"link " + (searchQuery.trim().length ? "" : "disabled")} style={!usereplace ? hidden: null} onClick={() => this.onReplaceClick()}>Replace</a>
+                            <a id="replace-all-link" className={"link " + (searchQuery.trim().length ? "" : "disabled")} style={!usereplace ? hidden: null} onClick={() => this.onReplaceAllClick()}>Replace All</a>
+                        </div>
                         <div className="buttons-row">
-                        <a className={"link replace " + (searchQuery.trim().length ? "" : "disabled")} style={!usereplace ? hidden: null} onClick={() => this.onReplaceClick()}>Replace</a>
                             <a className={"link icon-only prev " + (searchQuery.trim().length ? "" : "disabled")} onClick={() => this.onSearchClick(SEARCH_BACKWARD)}>
                                 <i className="icon icon-prev" />
                             </a>
@@ -255,6 +282,7 @@ class SearchView extends Component {
                             </a>
                         </div>
                     </div>
+                </div>
             </form>
         )
     }

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%;
+    }
 }

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('<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;
+    }
 }

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;
+    //         }
+    //     }
+    // }
 }

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": {

apps/documenteditor/mobile/src/controller/Search.jsx

@@ -77,7 +77,15 @@ const Search = props => {
         }
     }
 
-    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}

apps/spreadsheeteditor/mobile/src/less/icons-material.less

@@ -15,7 +15,7 @@
         &.icon-search {
             width: 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 {
             width: 22px;