[all] corrected searchbar markup

Merge branch 'feature/mobile-apps-on-reactjs' into feature/mobile-apps-on-reactjs-searchbar
# Conflicts: # apps/common/mobile/lib/view/Search.jsx # apps/common/mobile/resources/less/common-material.less
2021-04-22 23:51:21 +03:00 · 2021-04-22 23:18:21 +03:00 · 2021-04-19 17:50:40 +03:00 · 2021-04-15 14:07:26 +03:00 · 2021-04-05 13:38:11 +03:00 · 2021-04-03 00:40:44 +03:00
13 changed files with 167 additions and 180 deletions
--- a/apps/common/mobile/lib/view/Search.jsx
+++ b/apps/common/mobile/lib/view/Search.jsx
@ -1,5 +1,5 @@

-import React, { Component } from 'react';
+import React, { Component, Fragment } from 'react';
 import { Searchbar, Popover, Popup, View, Page, List, ListItem, Navbar, NavRight, Link } from 'framework7-react';
 import { Toggle } from 'framework7-react';
 import { f7 } from 'framework7-react';
@ -9,7 +9,8 @@ import { observable, runInAction } from "mobx";
 import { observer } from "mobx-react";

 const searchOptions = observable({
-    usereplace: false
+    usereplace: false,
+    isReplaceAll: false
 });

 const popoverStyle = {
@ -31,15 +32,20 @@ class SearchSettingsView extends Component {
            searchBy: 1,
            lookIn: 1,
            isMatchCase: false,
-            isMatchCell: false
+            isMatchCell: false, 
+            isReplaceAll: false
        };
    }

    onFindReplaceClick(action) {
-        runInAction(() => searchOptions.usereplace = action == 'replace');
+        runInAction(() => {
+            searchOptions.usereplace = action == 'replace';
+            searchOptions.isReplaceAll = action == 'replace-all';
+        });

        this.setState({
-            useReplace: searchOptions.usereplace
+            useReplace: searchOptions.usereplace,
+            isReplaceAll: searchOptions.isReplaceAll
        });

        if (this.onReplaceChecked) {}
@ -251,44 +257,38 @@ 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 (
            <form className="searchbar">
                {isIos ? <div className="searchbar-bg"></div> : null}
                <div className="searchbar-inner">
-                    <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-inner__left">
                        <div className="searchbar-input-wrap">
                            <input placeholder={_t.textSearch} type="search" maxLength="255" value={searchQuery} 
                                onChange={e => {this.changeSearchQuery(e.target.value)}} />
                            {isIos ? <i className="searchbar-icon" /> : null}
                            <span className="input-clear-button" />
                        </div>
-                        <div className="searchbar-input-wrap" style={!usereplace ? hidden: null}>
-                            <input placeholder={_t.textReplace} type="search" maxLength="255" id="idx-replace-val" value={replaceQuery} 
-                                onChange={e => {this.changeReplaceQuery(e.target.value)}} />
-                            {isIos ? <i className="searchbar-icon" /> : null}
-                            <span className="input-clear-button" />
-                        </div>
+                        {usereplace || isReplaceAll ? (
+                            <div className="searchbar-input-wrap">
+                                <input placeholder={_t.textReplace} type="search" maxLength="255" id="idx-replace-val" value={replaceQuery} 
+                                    onChange={e => {this.changeReplaceQuery(e.target.value)}} />
+                                {isIos ? <i className="searchbar-icon" /> : null}
+                                <span className="input-clear-button" />
+                            </div>
+                        ) : null}
                    </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()}>{_t.textReplace}</a>
-                            <a id="replace-all-link" className={"link " + (searchQuery.trim().length ? "" : "disabled")} style={!usereplace ? hidden: null} onClick={() => this.onReplaceAllClick()}>{_t.textReplaceAll}</a>
-                        </div>
                        <div className="buttons-row">
                            <a className={"link icon-only prev " + (searchQuery.trim().length ? "" : "disabled")} onClick={() => this.onSearchClick(SEARCH_BACKWARD)}>
                                <i className="icon icon-prev" />
@ -296,6 +296,25 @@ class SearchView extends Component {
                            <a className={"link icon-only next " + (searchQuery.trim().length ? "" : "disabled")} onClick={() => this.onSearchClick(SEARCH_FORWARD)}>
                                <i className="icon icon-next" />
                            </a>
+                            <a id="idx-btn-search-settings" className="link icon-only link-settings" onClick={this.onSettingsClick}>
+                                <i className="icon icon-settings" />
+                            </a>
+                        </div>
+                        <div className="buttons-row-replace" style={!Device.isPhone ? {paddingRight: '14px'} : null}>
+                            {!Device.isPhone && usereplace ? (
+                                <Fragment>
+                                    <a id="replace-link" className={"link " + (searchQuery.trim().length ? "" : "disabled")} onClick={() => this.onReplaceClick()}>{_t.textReplace}</a>
+                                    <a id="replace-all-link" className={"link " + (searchQuery.trim().length ? "" : "disabled")} onClick={() => this.onReplaceAllClick()}>{_t.textReplaceAll}</a>
+                                </Fragment>
+                            ) : (
+                                <Fragment>
+                                    {isReplaceAll ? (
+                                        <a id="replace-all-link" className={"link " + (searchQuery.trim().length ? "" : "disabled")} onClick={() => this.onReplaceAllClick()}>{_t.textReplaceAll}</a>
+                                    ) : usereplace ? (
+                                        <a id="replace-link" className={"link " + (searchQuery.trim().length ? "" : "disabled")} onClick={() => this.onReplaceClick()}>{_t.textReplace}</a>
+                                    ) : null}
+                                </Fragment>
+                            )}
                        </div>
                    </div>
                </div>
--- a/apps/common/mobile/resources/less/common-ios.less
+++ b/apps/common/mobile/resources/less/common-ios.less
@ -438,9 +438,18 @@
        .searchbar-input-wrap {
            margin-right: 10px;
            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%;
+            }
        }
    }

@ -461,43 +470,11 @@
        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;
-                .searchbar-inner {
-                    height: 100%;
-                    &__center {
-                        .searchbar-input-wrap {
-                            margin: 8px 0;
-                        }
-                    }
-                }
-            }
-        } 
-    }
+    } 

    .actions-button {
        background: rgba(255,255,255,.95);
--- a/apps/common/mobile/resources/less/common-material.less
+++ b/apps/common/mobile/resources/less/common-material.less
@ -39,6 +39,48 @@
            display: flex;
            justify-content: center;
        }
+        .searchbar-inner {
+            padding-right: 10px;
+            padding-left: 18px;
+            &__left, &__right {
+                height: auto;
+            }
+            &__right {
+                display: flex;
+                flex-direction: column;
+                .buttons-row, .buttons-row-replace {
+                    height: 50%;
+                }
+            }
+            &__center {
+                flex-wrap: wrap;
+            }
+        }
+        .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;
+        }
+        .subnavbar-inner {
+            padding: 0 10px;
+        }
    }

    .page.page-with-subnavbar.page-with-logo {
@ -48,6 +90,7 @@
    }

    // Buttons
+
    .segmented {
        .decrement, .increment {
            display: flex;
@ -340,30 +383,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;
@ -394,60 +421,19 @@
        padding: 0;
        border-bottom: 1px solid @white;
        height: 100%;
-        padding: 0 36px 0 24px;
+        padding: 0 36px 0 4px;
        background-color: transparent;
        background-repeat: no-repeat;
        background-position: 0 center;
        opacity: 1;
        background-size: 24px 24px;
        transition-duration: .3s;
-        .encoded-svg-background('<svg xmlns="http://www.w3.org/2000/svg" fill="@{white}" 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>');
+        //.encoded-svg-background('<svg xmlns="http://www.w3.org/2000/svg" fill="@{white}" 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;
-    }
-
-    .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: 56px;
-        }
-        .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;
-                }
-            }
-        }
+        opacity: .5;
    }

    .actions-button-text {
--- a/apps/common/mobile/resources/less/search.less
+++ b/apps/common/mobile/resources/less/search.less
@ -1,28 +1,54 @@
@statusBarBorderColor: #cbcbcb;

 .navbar {
-    .searchbar {
-        background-color: var(--f7-navbar-bg-color);
+    .subnavbar {
+        .searchbar {
+            background-color: var(--f7-navbar-bg-color);

-        .buttons-row {
-            align-self: center;
-            display: flex;
-        }
+            .buttons-row {
+                align-self: center;
+                display: flex;
+            }

-        .searchbar-bg {
-            .hairline(bottom, @statusBarBorderColor);
+            .searchbar-bg {
+                .hairline(bottom, @statusBarBorderColor);
+            }
        }
    }

    .searchbar-inner {
-        &__center {
-            display: flex;
-            align-items: center;
-            width: 100%;
+        justify-content: space-between;
+        padding-left: 22px;
+        height: 100%;
+        &__left {
+            width: 75%;
        }
        &__right {
+            margin-left: 10px;
+            .buttons-row {
+                display: flex;
+                justify-content: flex-end;
+            }
+            .link-settings {
+                min-width: 24px;
+            }
+        }
+        .buttons-row-replace {
            display: flex;
+            flex-direction: row;
            align-items: center;
+            width: 100%;
+            padding-left: 19px;
+            a {
+                font-size: 15px;
+                height: auto;
+                display: block;
+                line-height: normal;
+                padding: 0;
+            }
+            a:nth-child(2) {
+                margin-left: 20px;
+            }
        }
    }

@ -30,43 +56,7 @@
        transition-duration: 0s;
    }

-    .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;
-        }
-    }
-
-    @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;
-                    }
-                }
-            }
-        } 
-    }
+    .searchbar-expandable.searchbar-enabled {
+        top: 0;
+    } 
 }
--- a/apps/documenteditor/mobile/locale/en.json
+++ b/apps/documenteditor/mobile/locale/en.json
@ -334,7 +334,8 @@
    "textReplaceAll": "Replace All",
    "textCaseSensitive": "Case Sensitive",
    "textHighlightResults": "Highlight Results",
-    "textSearch": "Search"
+    "textSearch": "Search",
+    "textFindAndReplaceAll": "Find and Replace All"
  },
  "Edit": {
    "textClose": "Close",
--- a/apps/documenteditor/mobile/src/controller/Search.jsx
+++ b/apps/documenteditor/mobile/src/controller/Search.jsx
@ -35,6 +35,10 @@ class SearchSettings extends SearchSettingsView {
                    <List>
                        <ListItem radio title={_t.textFind} name="find-replace-checkbox" checked={!this.state.useReplace} onClick={e => this.onFindReplaceClick('find')} />
                        <ListItem radio title={_t.textFindAndReplace} name="find-replace-checkbox" checked={this.state.useReplace} onClick={e => this.onFindReplaceClick('replace')} />
+                        {Device.isPhone ? (
+                            <ListItem radio title={_t.textFindAndReplaceAll} name="find-replace-checkbox" checked={this.state.isReplaceAll}
+                                onClick={() => this.onFindReplaceClick('replace-all')}></ListItem>
+                        ) : null}
                    </List>
                    <List>
                        <ListItem title={_t.textCaseSensitive}>
--- a/apps/documenteditor/mobile/src/less/app-material.less
+++ b/apps/documenteditor/mobile/src/less/app-material.less
@ -7,7 +7,7 @@
 .device-android {
    // Main Toolbar
    #editor-navbar.navbar .right {
-        padding-right: 4px;
+        //padding-right: 4px;
    }
    #editor-navbar.navbar .right a.link,
    #editor-navbar.navbar .left a.link {
--- a/apps/presentationeditor/mobile/locale/en.json
+++ b/apps/presentationeditor/mobile/locale/en.json
@ -198,7 +198,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",
--- a/apps/presentationeditor/mobile/src/controller/Search.jsx
+++ b/apps/presentationeditor/mobile/src/controller/Search.jsx
@ -28,6 +28,10 @@ class SearchSettings extends SearchSettingsView {
                    <List>
                        <ListItem radio title={_t.textFind} name="find-replace-checkbox" checked={!this.state.useReplace} onClick={e => this.onFindReplaceClick('find')} />
                        <ListItem radio title={_t.textFindAndReplace} name="find-replace-checkbox" checked={this.state.useReplace} onClick={e => this.onFindReplaceClick('replace')} />
+                        {Device.isPhone ? (
+                            <ListItem radio title={_t.textFindAndReplaceAll} name="find-replace-checkbox" checked={this.state.isReplaceAll}
+                                onClick={() => this.onFindReplaceClick('replace-all')}></ListItem>
+                        ) : null}
                    </List>
                    <List>
                        <ListItem title={_t.textCaseSensitive}>
--- a/apps/presentationeditor/mobile/src/less/app-material.less
+++ b/apps/presentationeditor/mobile/src/less/app-material.less
@ -11,7 +11,7 @@

    // Main Toolbar
    #editor-navbar.navbar .right {
-        padding-right: 4px;
+        //padding-right: 4px;
    }
    #editor-navbar.navbar .right a.link,
    #editor-navbar.navbar .left a.link {
--- a/apps/spreadsheeteditor/mobile/locale/en.json
+++ b/apps/spreadsheeteditor/mobile/locale/en.json
@ -337,7 +337,8 @@
            "textFormulas": "Formulas",
            "textValues": "Values",
            "textNoTextFound": "Text not found",
-            "textReplaceAll": "Replace All"
+            "textReplaceAll": "Replace All",
+            "textFindAndReplaceAll": "Find and Replace All"
        }
    },
    "Statusbar": {
--- a/apps/spreadsheeteditor/mobile/src/controller/Search.jsx
+++ b/apps/spreadsheeteditor/mobile/src/controller/Search.jsx
@ -36,6 +36,10 @@ class SearchSettings extends SearchSettingsView {
                <List>
                    <ListItem radio title={_t.textFind} name="find-replace-checkbox" checked={!this.state.useReplace} onClick={e => this.onFindReplaceClick('find')} />
                    <ListItem radio title={_t.textFindAndReplace} name="find-replace-checkbox" checked={this.state.useReplace} onClick={e => this.onFindReplaceClick('replace')} />
+                    {Device.isPhone ? (
+                        <ListItem radio title={_t.textFindAndReplaceAll} name="find-replace-checkbox" checked={this.state.isReplaceAll}
+                            onClick={() => this.onFindReplaceClick('replace-all')}></ListItem>
+                    ) : null}
                </List>
                <BlockTitle>{_t.textSearchIn}</BlockTitle>
                <List>
--- a/apps/spreadsheeteditor/mobile/src/less/app-material.less
+++ b/apps/spreadsheeteditor/mobile/src/less/app-material.less
@ -11,7 +11,7 @@

    // Main Toolbar
    #editor-navbar.navbar .right {
-        padding-right: 4px;
+        //padding-right: 4px;
    }
    #editor-navbar.navbar .right a.link,
    #editor-navbar.navbar .left a.link {
Author	SHA1	Message	Date
Maxim Kadushkin	6fe7679493	[all] corrected searchbar markup	2021-04-22 23:51:21 +03:00
Maxim Kadushkin	d10913b91c	Merge branch 'feature/mobile-apps-on-reactjs' into feature/mobile-apps-on-reactjs-searchbar # Conflicts: # apps/common/mobile/lib/view/Search.jsx # apps/common/mobile/resources/less/common-material.less	2021-04-22 23:18:21 +03:00
SergeyEzhin	8f7bc6daee	[mobile] Editing styles	2021-04-19 17:50:40 +03:00
SergeyEzhin	6fe3f773d1	[mobile] Changed searchbar	2021-04-15 14:07:26 +03:00
SergeyEzhin	1cc8510e12	Merge branch 'feature/mobile-apps-on-reactjs' into feature/mobile-apps-on-reactjs-searchbar	2021-04-05 13:38:11 +03:00
SergeyEzhin	2cfe6a1805	[mobile] Editing searchbar	2021-04-03 00:40:44 +03:00