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

[common] Edits toolbar and corrected searchbar

Browse source
This commit is contained in:
SergeyEzhin 2021-04-30 01:18:03 +03:00
parent 482feeb67d
commit 45b0cb2bac
13 changed files with 101 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -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,15 +32,20 @@ class SearchSettingsView extends Component {
searchBy: 1, searchBy: 1,
lookIn: 1, lookIn: 1,
isMatchCase: false, isMatchCase: false,
isMatchCell: false isMatchCell: false,
isReplaceAll: false
}; };
} }
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) {}
@ -251,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 (
@ -277,17 +284,25 @@ 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" maxLength="255" id="idx-replace-val" value={replaceQuery} <div className="searchbar-input-wrap">
onChange={e => {this.changeReplaceQuery(e.target.value)}} /> {/* style={!usereplace ? hidden: null} */}
{isIos ? <i className="searchbar-icon" /> : null} <input placeholder={_t.textReplace} type="search" maxLength="255" id="idx-replace-val" value={replaceQuery}
<span className="input-clear-button" /> onChange={e => {this.changeReplaceQuery(e.target.value)}} />
</div> {isIos ? <i className="searchbar-icon" /> : null}
<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 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> */}
{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}
</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 icon-only prev " + (searchQuery.trim().length ? "" : "disabled")} onClick={() => this.onSearchClick(SEARCH_BACKWARD)}>

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

@ -435,6 +435,9 @@
// Find and Replace // Find and Replace
.navbar { .navbar {
.searchbar {
background: var(--f7-navbar-bg-color);
}
.searchbar-input-wrap { .searchbar-input-wrap {
margin-right: 10px; margin-right: 10px;
height: 28px; height: 28px;
@ -462,6 +465,10 @@
} }
.searchbar-inner { .searchbar-inner {
&__left {
margin-right: 10px;
justify-content: center;
}
&__right { &__right {
.buttons-row a.next { .buttons-row a.next {
margin-left: 15px; margin-left: 15px;
@ -469,14 +476,25 @@
} }
} }
@media(max-width: 550px) .searchbar-expandable.searchbar-enabled {
{ &.replace {
.searchbar-inner {
&__right {
width: 28%;
}
}
}
}
@media(max-width: 550px) {
.navbar {
.searchbar-input-wrap {
margin-right: 0;
}
}
.searchbar-expandable.searchbar-enabled { .searchbar-expandable.searchbar-enabled {
top: 0; top: 0;
.searchbar-inner { .searchbar-inner {
&__left {
margin-right: 15px;
}
&__center { &__center {
flex-direction: column; flex-direction: column;
} }
@ -494,6 +512,14 @@
margin: 8px 0; margin: 8px 0;
} }
} }
&__right {
width: auto;
height: 100%;
justify-content: space-between;
.buttons-row-replace {
height: 50%;
}
}
} }
} }
} }

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

@ -344,13 +344,9 @@
&__center { &__center {
flex-wrap: wrap; flex-wrap: wrap;
} }
&__left { // &__left {
padding-top: 4px; // padding-top: 4px;
} // }
}
.buttons-row-replace a {
color: @white;
} }
.navbar { .navbar {
@ -434,6 +430,7 @@
} }
.buttons-row-replace a { .buttons-row-replace a {
color: @white; color: @white;
padding: 0;
} }
.searchbar .buttons-row { .searchbar .buttons-row {
align-self: flex-start; align-self: flex-start;

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

@ -15,10 +15,11 @@
} }
.searchbar-inner { .searchbar-inner {
justify-content: space-between;
&__center { &__center {
display: flex; display: flex;
align-items: center; align-items: center;
width: 100%; width: 81%;
} }
&__right { &__right {
display: flex; display: flex;
@ -34,7 +35,9 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
width: max-content; // width: max-content;
width: 100%;
justify-content: center;
a { a {
font-size: 15px; font-size: 15px;
height: auto; height: auto;

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

@ -337,7 +337,8 @@
"textSearch": "Search", "textSearch": "Search",
"textMarginsW": "Left and right margins are too high for a given page width", "textMarginsW": "Left and right margins are too high for a given page width",
"textMarginsH": "Top and bottom margins are too high for a given page height", "textMarginsH": "Top and bottom margins are too high for a given page height",
"textCollaboration": "Collaboration" "textCollaboration": "Collaboration",
"textFindAndReplaceAll": "Find and Replace All"
}, },
"Edit": { "Edit": {
"textClose": "Close", "textClose": "Close",

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

@ -35,6 +35,8 @@ 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')} />
<ListItem radio title={_t.textFindAndReplaceAll} name="find-replace-checkbox" checked={this.state.isReplaceAll}
onClick={() => this.onFindReplaceClick('replace-all')}></ListItem>
</List> </List>
<List> <List>
<ListItem title={_t.textCaseSensitive}> <ListItem title={_t.textCaseSensitive}>

8
apps/documenteditor/mobile/src/view/Toolbar.jsx
View file

@ -9,7 +9,7 @@ const ToolbarView = props => {
<Fragment> <Fragment>
<NavLeft> <NavLeft>
{props.isShowBack && <Link className={`btn-doc-back${props.disabledControls && ' disabled'}`} icon='icon-back' onClick={props.onBack}></Link>} {props.isShowBack && <Link className={`btn-doc-back${props.disabledControls && ' disabled'}`} icon='icon-back' onClick={props.onBack}></Link>}
{props.isEdit && EditorUIController.getUndoRedo && EditorUIController.getUndoRedo({ {Device.ios && props.isEdit && EditorUIController.getUndoRedo && EditorUIController.getUndoRedo({
disabledUndo: !props.isCanUndo, disabledUndo: !props.isCanUndo,
disabledRedo: !props.isCanRedo, disabledRedo: !props.isCanRedo,
onUndoClick: props.onUndo, onUndoClick: props.onUndo,
@ -18,6 +18,12 @@ const ToolbarView = props => {
</NavLeft> </NavLeft>
{!Device.phone && <NavTitle>{props.docTitle}</NavTitle>} {!Device.phone && <NavTitle>{props.docTitle}</NavTitle>}
<NavRight> <NavRight>
{Device.android && props.isEdit && EditorUIController.getUndoRedo && EditorUIController.getUndoRedo({
disabledUndo: !props.isCanUndo,
disabledRedo: !props.isCanRedo,
onUndoClick: props.onUndo,
onRedoClick: props.onRedo
})}
{props.isEdit && EditorUIController.getToolbarOptions && EditorUIController.getToolbarOptions({ {props.isEdit && EditorUIController.getToolbarOptions && EditorUIController.getToolbarOptions({
disabled: disableEditBtn || props.disabledControls, disabled: disableEditBtn || props.disabledControls,
onEditClick: e => props.openOptions('edit'), onEditClick: e => props.openOptions('edit'),

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

@ -150,7 +150,8 @@
"Settings": { "Settings": {
"textDone": "Done", "textDone": "Done",
"textSettings": "Settings", "textSettings": "Settings",
"textFindAndReplace": "Find and replace", "textFindAndReplace": "Find and Replace",
"textFindAndReplaceAll": "Find and Replace All",
"textPresentationSettings": "Presentation Settings", "textPresentationSettings": "Presentation Settings",
"textApplicationSettings": "Application Settings", "textApplicationSettings": "Application Settings",
"textDownload": "Download", "textDownload": "Download",

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

@ -28,6 +28,8 @@ 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')} />
<ListItem radio title={_t.textFindAndReplaceAll} name="find-replace-checkbox" checked={this.state.isReplaceAll}
onClick={() => this.onFindReplaceClick('replace-all')}></ListItem>
</List> </List>
<List> <List>
<ListItem title={_t.textCaseSensitive}> <ListItem title={_t.textCaseSensitive}>

8
apps/presentationeditor/mobile/src/view/Toolbar.jsx
View file

@ -8,7 +8,7 @@ const ToolbarView = props => {
<Fragment> <Fragment>
<NavLeft> <NavLeft>
{props.isShowBack && <Link className={`btn-doc-back${props.disabledControls && ' disabled'}`} icon='icon-back' onClick={props.onBack}></Link>} {props.isShowBack && <Link className={`btn-doc-back${props.disabledControls && ' disabled'}`} icon='icon-back' onClick={props.onBack}></Link>}
{props.isEdit && EditorUIController.getUndoRedo && EditorUIController.getUndoRedo({ {Device.ios && props.isEdit && EditorUIController.getUndoRedo && EditorUIController.getUndoRedo({
disabledUndo: !props.isCanUndo, disabledUndo: !props.isCanUndo,
disabledRedo: !props.isCanRedo, disabledRedo: !props.isCanRedo,
onUndoClick: props.onUndo, onUndoClick: props.onUndo,
@ -17,6 +17,12 @@ const ToolbarView = props => {
</NavLeft> </NavLeft>
{!Device.phone && <NavTitle>{props.docTitle}</NavTitle>} {!Device.phone && <NavTitle>{props.docTitle}</NavTitle>}
<NavRight> <NavRight>
{Device.android && props.isEdit && EditorUIController.getUndoRedo && EditorUIController.getUndoRedo({
disabledUndo: !props.isCanUndo,
disabledRedo: !props.isCanRedo,
onUndoClick: props.onUndo,
onRedoClick: props.onRedo
})}
<Link className={(props.disabledControls || props.disabledPreview) && 'disabled'} icon='icon-play' href={false} onClick={() => {props.openOptions('preview')}}></Link> <Link className={(props.disabledControls || props.disabledPreview) && 'disabled'} icon='icon-play' href={false} onClick={() => {props.openOptions('preview')}}></Link>
{props.isEdit && EditorUIController.getToolbarOptions && EditorUIController.getToolbarOptions({ {props.isEdit && EditorUIController.getToolbarOptions && EditorUIController.getToolbarOptions({
disabledAdd: props.disabledAdd || props.disabledControls, disabledAdd: props.disabledAdd || props.disabledControls,

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

@ -402,6 +402,7 @@
}, },
"Settings": { "Settings": {
"textFindAndReplace": "Find and Replace", "textFindAndReplace": "Find and Replace",
"textFindAndReplaceAll": "Find and Replace All",
"textSpreadsheetSettings": "Spreadsheet Settings", "textSpreadsheetSettings": "Spreadsheet Settings",
"textApplicationSettings": "Application Settings", "textApplicationSettings": "Application Settings",
"textDownload": "Download", "textDownload": "Download",

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

@ -36,6 +36,8 @@ 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')} />
<ListItem radio title={_t.textFindAndReplaceAll} name="find-replace-checkbox" checked={this.state.isReplaceAll}
onClick={() => this.onFindReplaceClick('replace-all')}></ListItem>
</List> </List>
<BlockTitle>{_t.textSearchIn}</BlockTitle> <BlockTitle>{_t.textSearchIn}</BlockTitle>
<List> <List>

8
apps/spreadsheeteditor/mobile/src/view/Toolbar.jsx
View file

@ -8,7 +8,7 @@ const ToolbarView = props => {
<Fragment> <Fragment>
<NavLeft> <NavLeft>
{props.isShowBack && <Link className={`btn-doc-back${props.disabledControls && ' disabled'}`} icon='icon-back' onClick={props.onBack}></Link>} {props.isShowBack && <Link className={`btn-doc-back${props.disabledControls && ' disabled'}`} icon='icon-back' onClick={props.onBack}></Link>}
{props.isEdit && EditorUIController.toolbarOptions && EditorUIController.toolbarOptions.getUndoRedo({ {Device.ios && props.isEdit && EditorUIController.getUndoRedo && EditorUIController.getUndoRedo({
disabledUndo: !props.isCanUndo, disabledUndo: !props.isCanUndo,
disabledRedo: !props.isCanRedo, disabledRedo: !props.isCanRedo,
onUndoClick: props.onUndo, onUndoClick: props.onUndo,
@ -17,6 +17,12 @@ const ToolbarView = props => {
</NavLeft> </NavLeft>
{!Device.phone && <NavTitle>{props.docTitle}</NavTitle>} {!Device.phone && <NavTitle>{props.docTitle}</NavTitle>}
<NavRight> <NavRight>
{Device.android && props.isEdit && EditorUIController.getUndoRedo && EditorUIController.getUndoRedo({
disabledUndo: !props.isCanUndo,
disabledRedo: !props.isCanRedo,
onUndoClick: props.onUndo,
onRedoClick: props.onRedo
})}
{props.isEdit && EditorUIController.toolbarOptions && EditorUIController.toolbarOptions.getEditOptions({ {props.isEdit && EditorUIController.toolbarOptions && EditorUIController.toolbarOptions.getEditOptions({
disabled: props.disabledEditControls || props.disabledControls, disabled: props.disabledEditControls || props.disabledControls,
onEditClick: () => props.openOptions('edit'), onEditClick: () => props.openOptions('edit'),