Lea/web-apps
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

[mobile] Editing searchbar

Browse source
This commit is contained in:
SergeyEzhin 2021-04-03 00:40:44 +03:00
parent 0283f82a4d
commit 2cfe6a1805
7 changed files with 231 additions and 115 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

73
apps/common/mobile/lib/view/Search.jsx
View file

@ -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 { Searchbar, Popover, Popup, View, Page, List, ListItem, Navbar, NavRight, Link } from 'framework7-react';
import { Toggle } from 'framework7-react'; import { Toggle } from 'framework7-react';
import { f7 } from 'framework7-react'; import { f7 } from 'framework7-react';
@ -9,7 +9,8 @@ import { observable, runInAction } from "mobx";
import { observer } from "mobx-react"; import { observer } from "mobx-react";
const searchOptions = observable({ const searchOptions = observable({
usereplace: false usereplace: false,
isReplaceAll: false
}); });
const popoverStyle = { const popoverStyle = {
@ -31,7 +32,8 @@ class SearchSettingsView extends Component {
searchBy: 1, searchBy: 1,
lookIn: 1, lookIn: 1,
isMatchCase: false, isMatchCase: false,
isMatchCell: false isMatchCell: false,
isReplaceAll: false
}; };
} }
@ -39,12 +41,20 @@ class SearchSettingsView extends Component {
runInAction(() => searchOptions.usereplace = action == 'replace'); runInAction(() => searchOptions.usereplace = action == 'replace');
this.setState({ this.setState({
useReplace: searchOptions.usereplace useReplace: searchOptions.usereplace,
}); });
if (this.onReplaceChecked) {} if (this.onReplaceChecked) {}
} }
onSwitchReplaceMode(value) {
runInAction(() => searchOptions.isReplaceAll = value === true);
this.setState({
isReplaceAll: searchOptions.isReplaceAll
});
}
extraSearchOptions() { extraSearchOptions() {
} }
@ -265,12 +275,7 @@ class SearchView extends Component {
<form className="searchbar"> <form className="searchbar">
{isIos ? <div className="searchbar-bg"></div> : null} {isIos ? <div className="searchbar-bg"></div> : null}
<div className="searchbar-inner"> <div className="searchbar-inner">
<div className="buttons-row searchbar-inner__left"> <div className="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"> <div className="searchbar-input-wrap">
<input placeholder={_t.textSearch} type="search" value={searchQuery} <input placeholder={_t.textSearch} type="search" value={searchQuery}
onChange={e => {this.changeSearchQuery(e.target.value)}} /> onChange={e => {this.changeSearchQuery(e.target.value)}} />
@ -285,6 +290,49 @@ class SearchView extends Component {
</div> </div>
</div> </div>
<div className="buttons-row searchbar-inner__right"> <div className="buttons-row searchbar-inner__right">
<div className="buttons-row">
<a className={"link icon-only prev " + (searchQuery.trim().length ? "" : "disabled")} onClick={() => this.onSearchClick(SEARCH_BACKWARD)}>
<i className="icon icon-prev" />
</a>
<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">
{!Device.isPhone ? (
<Fragment>
<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>
</Fragment>
) : (
<Fragment>
{searchOptions.isReplaceAll ? (
<a id="replace-all-link" className={"link " + (searchQuery.trim().length ? "" : "disabled")} style={!usereplace ? hidden: null} onClick={() => this.onReplaceAllClick()}>{_t.textReplaceAll}</a>
) : (
<a id="replace-link" className={"link " + (searchQuery.trim().length ? "" : "disabled")} style={!usereplace ? hidden: null} onClick={() => this.onReplaceClick()}>{_t.textReplace}</a>
)}
</Fragment>
)}
</div>
</div>
{/* <div className="searchbar-inner__center">
<div className="searchbar-input-wrap">
<input placeholder={_t.textSearch} type="search" 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" 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>
</div> */}
{/* <div className="buttons-row searchbar-inner__right">
<div className="buttons-row buttons-row-replace"> <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-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> <a id="replace-all-link" className={"link " + (searchQuery.trim().length ? "" : "disabled")} style={!usereplace ? hidden: null} onClick={() => this.onReplaceAllClick()}>{_t.textReplaceAll}</a>
@ -298,6 +346,11 @@ class SearchView extends Component {
</a> </a>
</div> </div>
</div> </div>
<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> </div>
</form> </form>
) )

76
apps/common/mobile/resources/less/common-ios.less
View file

@ -438,6 +438,7 @@
.searchbar-input-wrap { .searchbar-input-wrap {
margin-right: 10px; margin-right: 10px;
height: 28px; height: 28px;
margin: 8px 0;
} }
.buttons-row-replace a { .buttons-row-replace a {
color: @themeColor; color: @themeColor;
@ -462,42 +463,49 @@
} }
.searchbar-inner { .searchbar-inner {
&__right { // &__right {
.buttons-row a.next { // .buttons-row a.next {
margin-left: 15px; // margin-left: 15px;
} // }
} // }
} }
@media(max-width: 550px) .searchbar-expandable.searchbar-enabled {
{ &.replace {
.searchbar-expandable.searchbar-enabled { height: 88px;
top: 0; }
.searchbar-inner { }
&__left {
margin-right: 15px; // @media(max-width: 550px)
} // {
&__center { // .searchbar-expandable.searchbar-enabled {
flex-direction: column; // top: 0;
} // .searchbar-inner {
&__right { // // &__left {
flex-direction: column-reverse; // // margin-right: 15px;
margin-left: 10px; // // }
} // // &__center {
} // // flex-direction: column;
&.replace { // // }
height: 88px; // // &__right {
.searchbar-inner { // // flex-direction: column-reverse;
height: 100%; // // margin-left: 10px;
&__center { // // }
.searchbar-input-wrap { // }
margin: 8px 0; // &.replace {
} // height: 88px;
} // margin-top: 5px;
} // .searchbar-inner {
} // height: 100%;
} // &__center {
} // .searchbar-input-wrap {
// margin: 8px 0;
// }
// }
// }
// }
// }
// }
.actions-button { .actions-button {
background: rgba(255,255,255,.95); background: rgba(255,255,255,.95);

38
apps/common/mobile/resources/less/common-material.less
View file

@ -396,38 +396,38 @@
// height: 100%; // height: 100%;
.searchbar-inner { .searchbar-inner {
height: 100%; height: 100%;
&__center { // &__center {
flex-direction: column; // flex-direction: column;
} // }
&__right { // &__right {
flex-direction: column-reverse; // flex-direction: column-reverse;
} // }
} }
&.replace { &.replace {
height: 96px; height: 96px;
} }
} }
a.link { // a.link {
padding: 0 16px; // padding: 0 16px;
} // }
a.icon-only { // a.icon-only {
width: auto; // width: auto;
height: 48px; // height: 48px;
} // }
.buttons-row-replace a { .buttons-row-replace a {
color: @white; color: @white;
} }
.searchbar .buttons-row { // .searchbar .buttons-row {
align-self: flex-start; // align-self: flex-start;
} // }
} }
@media(max-width: 550px) { @media(max-width: 550px) {
.searchbar-expandable.searchbar-enabled { .searchbar-expandable.searchbar-enabled {
.searchbar-inner { .searchbar-inner {
&__left { // &__left {
margin-right: 33px; // margin-right: 33px;
} // }
} }
} }
} }

141
apps/common/mobile/resources/less/search.less
View file

@ -1,28 +1,74 @@
@statusBarBorderColor: #cbcbcb; @statusBarBorderColor: #cbcbcb;
.navbar { .navbar {
.searchbar { .subnavbar {
background-color: var(--f7-navbar-bg-color); .searchbar {
background-color: var(--f7-navbar-bg-color);
.buttons-row { .buttons-row {
align-self: center; align-self: center;
display: flex; display: flex;
} }
.searchbar-bg { .searchbar-bg {
.hairline(bottom, @statusBarBorderColor); .hairline(bottom, @statusBarBorderColor);
}
.searchbar-inner {
&__right {
display: block;
}
}
} }
} }
.searchbar-inner { .searchbar-inner {
&__center { flex-wrap: wrap;
display: flex; padding-left: 25px;
align-items: center; padding-right: 18px;
width: 100%; justify-content: space-between;
height: 100%;
// &__center {
// display: flex;
// align-items: center;
// width: 100%;
// }
// &__right {
// display: flex;
// align-items: center;
// }
&__left {
height: 100%;
width: 65%;
} }
&__right { &__right {
display: flex; height: 100%;
align-items: center; .buttons-row {
justify-content: flex-end;
}
.link-settings {
max-width: 24px;
min-width: 24px;
margin-left: 20px;
}
}
}
.buttons-row-replace {
display: flex;
flex-direction: row;
align-items: center;
width: 100%;
justify-content: center;
margin-top: 5px;
a {
font-size: 15px;
height: auto;
display: block;
line-height: normal;
}
a:nth-child(2) {
margin-left: 20px;
} }
} }
@ -30,43 +76,34 @@
transition-duration: 0s; transition-duration: 0s;
} }
.buttons-row-replace { .searchbar-expandable.searchbar-enabled {
display: flex; top: 0;
flex-direction: column; }
align-items: center;
width: max-content;
a {
font-size: 15px;
height: auto;
display: block;
line-height: normal;
}
}
@media(max-width: 550px) // @media(max-width: 550px)
{ // {
.searchbar-expandable.searchbar-enabled { // .searchbar-expandable.searchbar-enabled {
.searchbar-inner { // .searchbar-inner {
&__left { // // &__left {
min-width: 22px; // // min-width: 22px;
max-width: 22px; // // max-width: 22px;
} // // }
&__center { // // &__center {
flex-direction: column; // // flex-direction: column;
} // // }
&__right { // // &__right {
flex-direction: column-reverse; // // flex-direction: column-reverse;
} // // }
} // }
&.replace { // &.replace {
top: 0; // top: 0;
.searchbar-inner { // .searchbar-inner {
height: 100%; // height: 100%;
&__left { // &__left {
align-self: flex-start; // align-self: flex-start;
} // }
} // }
} // }
} // }
} // }
} }

6
apps/documenteditor/mobile/src/controller/Search.jsx
View file

@ -36,6 +36,12 @@ class SearchSettings extends SearchSettingsView {
<ListItem radio title={_t.textFind} name="find-replace-checkbox" checked={!this.state.useReplace} onClick={e => this.onFindReplaceClick('find')} /> <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')} /> <ListItem radio title={_t.textFindAndReplace} name="find-replace-checkbox" checked={this.state.useReplace} onClick={e => this.onFindReplaceClick('replace')} />
</List> </List>
{Device.isPhone ? (
<List>
<ListItem checkbox checked={this.state.isReplaceAll} title={_t.textReplaceAll}
onChange={() => this.onSwitchReplaceMode(!this.state.isReplaceAll)}></ListItem>
</List>
) : null}
<List> <List>
<ListItem title={_t.textCaseSensitive}> <ListItem title={_t.textCaseSensitive}>
<Toggle slot="after" className="toggle-case-sensitive" /> <Toggle slot="after" className="toggle-case-sensitive" />

6
apps/presentationeditor/mobile/src/controller/Search.jsx
View file

@ -29,6 +29,12 @@ class SearchSettings extends SearchSettingsView {
<ListItem radio title={_t.textFind} name="find-replace-checkbox" checked={!this.state.useReplace} onClick={e => this.onFindReplaceClick('find')} /> <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')} /> <ListItem radio title={_t.textFindAndReplace} name="find-replace-checkbox" checked={this.state.useReplace} onClick={e => this.onFindReplaceClick('replace')} />
</List> </List>
{Device.isPhone ? (
<List>
<ListItem checkbox checked={this.state.isReplaceAll} title={_t.textReplaceAll}
onChange={() => this.onSwitchReplaceMode(!this.state.isReplaceAll)}></ListItem>
</List>
) : null}
<List> <List>
<ListItem title={_t.textCaseSensitive}> <ListItem title={_t.textCaseSensitive}>
<Toggle slot="after" className="toggle-case-sensitive" /> <Toggle slot="after" className="toggle-case-sensitive" />

6
apps/spreadsheeteditor/mobile/src/controller/Search.jsx
View file

@ -37,6 +37,12 @@ class SearchSettings extends SearchSettingsView {
<ListItem radio title={_t.textFind} name="find-replace-checkbox" checked={!this.state.useReplace} onClick={e => this.onFindReplaceClick('find')} /> <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')} /> <ListItem radio title={_t.textFindAndReplace} name="find-replace-checkbox" checked={this.state.useReplace} onClick={e => this.onFindReplaceClick('replace')} />
</List> </List>
{Device.isPhone ? (
<List>
<ListItem checkbox checked={this.state.isReplaceAll} title={_t.textReplaceAll}
onChange={() => this.onSwitchReplaceMode(!this.state.isReplaceAll)}></ListItem>
</List>
) : null}
<BlockTitle>{_t.textSearchIn}</BlockTitle> <BlockTitle>{_t.textSearchIn}</BlockTitle>
<List> <List>
<ListItem radio title={_t.textWorkbook} name="search-in-checkbox" value="0" checked={this.state.searchIn === 0} onClick={() => this.setState({ <ListItem radio title={_t.textWorkbook} name="search-in-checkbox" value="0" checked={this.state.searchIn === 0} onClick={() => this.setState({