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

[mobile] Changed searchbar

Browse source
This commit is contained in:
SergeyEzhin 2021-04-15 14:07:26 +03:00
parent 1cc8510e12
commit 6fe3f773d1
10 changed files with 102 additions and 220 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -38,23 +38,19 @@ class SearchSettingsView extends Component {
} }
onFindReplaceClick(action) { onFindReplaceClick(action) {
runInAction(() => searchOptions.usereplace = action == 'replace'); runInAction(() => {
searchOptions.usereplace = action == 'replace';
searchOptions.isReplaceAll = action == 'replace-all';
});
this.setState({ this.setState({
useReplace: searchOptions.usereplace, useReplace: searchOptions.usereplace,
isReplaceAll: searchOptions.isReplaceAll
}); });
if (this.onReplaceChecked) {} if (this.onReplaceChecked) {}
} }
onSwitchReplaceMode(value) {
runInAction(() => searchOptions.isReplaceAll = value === true);
this.setState({
isReplaceAll: searchOptions.isReplaceAll
});
}
extraSearchOptions() { extraSearchOptions() {
} }
@ -261,14 +257,15 @@ class SearchView extends Component {
render() { render() {
const usereplace = searchOptions.usereplace; const usereplace = searchOptions.usereplace;
const hidden = {display: "none"}; const isReplaceAll = searchOptions.isReplaceAll;
// 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 isIos = Device.ios; const isIos = Device.ios;
const { _t } = this.props; const { _t } = this.props;
if(this.searchbar && this.searchbar.enabled) { 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 ( return (
@ -282,12 +279,14 @@ class SearchView extends Component {
{isIos ? <i className="searchbar-icon" /> : null} {isIos ? <i className="searchbar-icon" /> : null}
<span className="input-clear-button" /> <span className="input-clear-button" />
</div> </div>
<div className="searchbar-input-wrap" style={!usereplace ? hidden: null}> {usereplace || isReplaceAll ? (
<input placeholder={_t.textReplace} type="search" id="idx-replace-val" value={replaceQuery} <div className="searchbar-input-wrap">
onChange={e => {this.changeReplaceQuery(e.target.value)}} /> <input placeholder={_t.textReplace} type="search" id="idx-replace-val" value={replaceQuery}
{isIos ? <i className="searchbar-icon" /> : null} onChange={e => {this.changeReplaceQuery(e.target.value)}} />
<span className="input-clear-button" /> {isIos ? <i className="searchbar-icon" /> : null}
</div> <span className="input-clear-button" />
</div>
) : null}
</div> </div>
<div className="buttons-row searchbar-inner__right"> <div className="buttons-row searchbar-inner__right">
<div className="buttons-row"> <div className="buttons-row">
@ -302,55 +301,22 @@ class SearchView extends Component {
</a> </a>
</div> </div>
<div className="buttons-row-replace"> <div className="buttons-row-replace">
{!Device.isPhone ? ( {!Device.isPhone && usereplace ? (
<Fragment> <Fragment>
<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")} 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")} onClick={() => this.onReplaceAllClick()}>{_t.textReplaceAll}</a>
</Fragment> </Fragment>
) : ( ) : (
<Fragment> <Fragment>
{searchOptions.isReplaceAll ? ( {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-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")} style={!usereplace ? hidden: null} onClick={() => this.onReplaceClick()}>{_t.textReplace}</a> <a id="replace-link" className={"link " + (searchQuery.trim().length ? "" : "disabled")} onClick={() => this.onReplaceClick()}>{_t.textReplace}</a>
)} ) : null}
</Fragment> </Fragment>
)} )}
</div> </div>
</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">
<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" />
</a>
<a className={"link icon-only next " + (searchQuery.trim().length ? "" : "disabled")} onClick={() => this.onSearchClick(SEARCH_FORWARD)}>
<i className="icon icon-next" />
</a>
</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>
) )

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

@ -440,8 +440,16 @@
height: 28px; height: 28px;
margin: 8px 0; margin: 8px 0;
} }
.buttons-row-replace a { .buttons-row-replace {
color: @themeColor; margin-top: 5px;
a {
color: @themeColor;
}
}
.searchbar-inner {
&__left, &__right {
height: 100%;
}
} }
} }
@ -462,51 +470,12 @@
padding: 0 28px; padding: 0 28px;
} }
.searchbar-inner {
// &__right {
// .buttons-row a.next {
// margin-left: 15px;
// }
// }
}
.searchbar-expandable.searchbar-enabled { .searchbar-expandable.searchbar-enabled {
&.replace { &.replace {
height: 88px; 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;
// 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);
} }

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

@ -28,8 +28,52 @@
display: flex; display: flex;
justify-content: center; justify-content: center;
} }
.searchbar-inner {
padding-right: 19px;
&__left, &__right {
height: auto;
}
&__right {
display: flex;
flex-direction: column;
.buttons-row, .buttons-row-replace {
height: 50%;
}
}
&__center {
flex-wrap: wrap;
}
a.link-settings {
margin: 0;
padding: 0;
}
}
.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;
}
} }
// Buttons // Buttons
.segmented { .segmented {
.decrement, .increment { .decrement, .increment {
display: flex; display: flex;
@ -322,30 +366,14 @@
// Find and Replace // Find and Replace
.searchbar-inner { .searchbar {
&__center { background-color: @themeColor;
flex-wrap: wrap;
}
&__left {
padding-top: 4px;
}
} }
.buttons-row-replace a { .buttons-row-replace a {
color: @white; color: @white;
} }
.navbar {
.searchbar-input-wrap {
height: 32px;
margin-right: 10px;
margin: 4px 0;
}
&-inner {
overflow: initial;
}
}
.searchbar .input-clear-button { .searchbar .input-clear-button {
width: 18px; width: 18px;
height: 18px; height: 18px;
@ -390,48 +418,6 @@
color: @white; 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: 48px;
// }
.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;
// }
}
}
}
.actions-button-text { .actions-button-text {
cursor: pointer; cursor: pointer;
line-height: 48px; line-height: 48px;

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

@ -23,27 +23,18 @@
} }
.searchbar-inner { .searchbar-inner {
flex-wrap: wrap;
padding-left: 25px; padding-left: 25px;
padding-right: 18px; padding-right: 18px;
justify-content: space-between; justify-content: space-between;
height: 100%; height: 100%;
// &__center {
// display: flex;
// align-items: center;
// width: 100%;
// }
// &__right {
// display: flex;
// align-items: center;
// }
&__left { &__left {
height: 100%; // height: 100%;
width: 65%; width: 65%;
} }
&__right { &__right {
height: 100%; // height: 100%;
.buttons-row { .buttons-row {
display: flex;
justify-content: flex-end; justify-content: flex-end;
} }
.link-settings { .link-settings {
@ -60,7 +51,7 @@
align-items: center; align-items: center;
width: 100%; width: 100%;
justify-content: center; justify-content: center;
margin-top: 5px; // margin-top: 5px;
a { a {
font-size: 15px; font-size: 15px;
height: auto; height: auto;
@ -79,31 +70,4 @@
.searchbar-expandable.searchbar-enabled { .searchbar-expandable.searchbar-enabled {
top: 0; top: 0;
} }
// @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;
// }
// }
// }
// }
// }
} }

3
apps/documenteditor/mobile/locale/en.json
View file

@ -248,7 +248,8 @@
"textReplaceAll": "Replace All", "textReplaceAll": "Replace All",
"textCaseSensitive": "Case Sensitive", "textCaseSensitive": "Case Sensitive",
"textHighlightResults": "Highlight Results", "textHighlightResults": "Highlight Results",
"textSearch": "Search" "textSearch": "Search",
"textFindAndReplaceAll": "Find and Replace All"
}, },
"Edit": { "Edit": {
"textClose": "Close", "textClose": "Close",

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

@ -35,13 +35,11 @@ class SearchSettings extends SearchSettingsView {
<List> <List>
<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')} />
{Device.isPhone ? (
<ListItem radio title={_t.textFindAndReplaceAll} name="find-replace-checkbox" checked={this.state.isReplaceAll}
onClick={() => this.onFindReplaceClick('replace-all')}></ListItem>
) : null}
</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" />

3
apps/presentationeditor/mobile/locale/en.json
View file

@ -91,7 +91,8 @@
"textCaseSensitive": "Case Sensitive", "textCaseSensitive": "Case Sensitive",
"textHighlight": "Highlight Results", "textHighlight": "Highlight Results",
"textReplace": "Replace", "textReplace": "Replace",
"textNoTextFound": "Text not Found" "textNoTextFound": "Text not Found",
"textFindAndReplaceAll": "Find and Replace All"
}, },
"Add": { "Add": {
"textSlide": "Slide", "textSlide": "Slide",

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

@ -28,13 +28,11 @@ class SearchSettings extends SearchSettingsView {
<List> <List>
<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')} />
{Device.isPhone ? (
<ListItem radio title={_t.textFindAndReplaceAll} name="find-replace-checkbox" checked={this.state.isReplaceAll}
onClick={() => this.onFindReplaceClick('replace-all')}></ListItem>
) : null}
</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" />

3
apps/spreadsheeteditor/mobile/locale/en.json
View file

@ -331,7 +331,8 @@
"textFormulas": "Formulas", "textFormulas": "Formulas",
"textValues": "Values", "textValues": "Values",
"textNoTextFound": "Text not found", "textNoTextFound": "Text not found",
"textReplaceAll": "Replace All" "textReplaceAll": "Replace All",
"textFindAndReplaceAll": "Find and Replace All"
} }
}, },
"Statusbar": { "Statusbar": {

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

@ -36,13 +36,11 @@ class SearchSettings extends SearchSettingsView {
<List> <List>
<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')} />
{Device.isPhone ? (
<ListItem radio title={_t.textFindAndReplaceAll} name="find-replace-checkbox" checked={this.state.isReplaceAll}
onClick={() => this.onFindReplaceClick('replace-all')}></ListItem>
) : null}
</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({