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

Merge branch 'feature/mobile-apps-on-reactjs-edits' into feature/mobile-apps-on-reactjs

Browse source
This commit is contained in:
Maxim Kadushkin 2021-04-30 16:21:15 +03:00
parent 0ba574b9cf 374acddf54
commit 537498e8c1
19 changed files with 145 additions and 60 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -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,14 +257,15 @@ class SearchView extends Component {
render() {
const usereplace = searchOptions.usereplace;
const isReplaceAll = searchOptions.isReplaceAll;
const hidden = {display: "none"};
const searchQuery = this.state.searchQuery;
const replaceQuery = this.state.replaceQuery;
// 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 (
@ -272,22 +279,30 @@ class SearchView extends Component {
</div>
<div className="searchbar-inner__center">
<div className="searchbar-input-wrap">
<input placeholder={_t.textSearch} type="search" maxLength="255" value={searchQuery}
<input placeholder={_t.textSearch} type="search" maxLength="255"
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" />
<span className="input-clear-button" onClick={() => this.changeSearchQuery('')} />
</div>
{/* {usereplace || isReplaceAll ? */}
<div className="searchbar-input-wrap" style={usereplace || isReplaceAll ? null : hidden}>
{/* style={!usereplace ? hidden: null} */}
<input placeholder={_t.textReplace} type="search" maxLength="255" id="idx-replace-val"
onChange={e => {this.changeReplaceQuery(e.target.value)}} />
{isIos ? <i className="searchbar-icon" /> : null}
<span className="input-clear-button" onClick={() => this.changeReplaceQuery('')} />
</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>
{/* <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> */}
{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 className="buttons-row">
<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
.navbar {
.searchbar {
background: var(--f7-navbar-bg-color);
}
.searchbar-input-wrap {
margin-right: 10px;
height: 28px;
@ -462,6 +465,10 @@
}
.searchbar-inner {
&__left {
margin-right: 10px;
justify-content: center;
}
&__right {
.buttons-row a.next {
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 {
top: 0;
.searchbar-inner {
&__left {
margin-right: 15px;
}
&__center {
flex-direction: column;
}
@ -494,6 +512,14 @@
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 {
flex-wrap: wrap;
}
&__left {
padding-top: 4px;
}
}
.buttons-row-replace a {
color: @white;
// &__left {
// padding-top: 4px;
// }
}
.navbar {
@ -434,6 +430,7 @@
}
.buttons-row-replace a {
color: @white;
padding: 0;
}
.searchbar .buttons-row {
align-self: flex-start;

34
apps/common/mobile/resources/less/common.less
View file

@ -133,13 +133,6 @@
}
}
.dialog {
z-index: 13700;
.content-block {
padding: 0;
}
}
.about {
.content-block {
margin: 0 auto 15px;
@ -751,23 +744,28 @@ input[type="number"]::-webkit-inner-spin-button {
}
}
.picker-3d {
.picker-item {
.dlg-adv-options {
z-index: 13700;
.content-block {
padding: 0;
text-align: left;
font-size: 16px;
span {
}
.picker-3d {
.picker-item {
padding: 0;
text-align: left;
font-size: 16px;
span {
padding: 0;
}
}
}
.picker-center-highlight {
width: 100%;
left: 0;
right: 0;
}
}
.picker-center-highlight {
width: 100%;
left: 0;
right: 0;
}

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

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

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

@ -337,7 +337,8 @@
"textSearch": "Search",
"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",
"textCollaboration": "Collaboration"
"textCollaboration": "Collaboration",
"textFindAndReplaceAll": "Find and Replace All"
},
"Edit": {
"textClose": "Close",

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

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

5
apps/documenteditor/mobile/src/less/icons-material.less
View file

@ -52,6 +52,11 @@
height: 24px;
.encoded-svg-background('<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M7 12C7 13.6569 5.65685 15 4 15C2.34315 15 1 13.6569 1 12C1 10.3431 2.34315 9 4 9C5.65685 9 7 10.3431 7 12ZM15 12C15 13.6569 13.6569 15 12 15C10.3431 15 9 13.6569 9 12C9 10.3431 10.3431 9 12 9C13.6569 9 15 10.3431 15 12ZM20 15C21.6569 15 23 13.6569 23 12C23 10.3431 21.6569 9 20 9C18.3431 9 17 10.3431 17 12C17 13.6569 18.3431 15 20 15Z" fill="@{navBarIconColor}"/></svg>');
}
&.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" viewBox="0 0 22 22" fill="@{white}"><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>');
}
}
}
i.icon {

7
apps/documenteditor/mobile/src/store/textSettings.js
View file

@ -36,7 +36,8 @@ export class storeTextSettings {
resetTextColor: action,
changeCustomTextColors: action,
resetLineSpacing: action,
resetBackgroundColor: action
resetBackgroundColor: action,
changeFontFamily: action
});
}
@ -156,6 +157,10 @@ export class storeTextSettings {
this.customTextColors = colors;
}
changeFontFamily(name) {
this.fontName = name;
}
resetLineSpacing (vc) {
let line = (vc.get_Line() === null || vc.get_LineRule() === null || vc.get_LineRule() != 1) ? -1 : vc.get_Line();
this.lineSpacing = line;

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

@ -9,7 +9,7 @@ const ToolbarView = props => {
<Fragment>
<NavLeft>
{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,
disabledRedo: !props.isCanRedo,
onUndoClick: props.onUndo,
@ -18,6 +18,12 @@ const ToolbarView = props => {
</NavLeft>
{!Device.phone && <NavTitle>{props.docTitle}</NavTitle>}
<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({
disabled: disableEditBtn || props.disabledControls,
onEditClick: e => props.openOptions('edit'),

5
apps/documenteditor/mobile/src/view/edit/EditText.jsx
View file

@ -28,6 +28,9 @@ const PageFonts = props => {
}}
});
};
console.log(curFontName);
return (
<Page>
<Navbar title={t('Edit.textFonts')} backLink={t('Edit.textBack')} />
@ -60,7 +63,7 @@ const PageFonts = props => {
checked={curFontName === item.name}
title={item.name}
style={{fontFamily: `${item.name}`}}
onClick={() => {props.changeFontFamily(item.name)}}
onClick={() => {storeTextSettings.changeFontFamily(item.name); props.changeFontFamily(item.name)}}
></ListItem>
))}
</ul>

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

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

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

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

5
apps/presentationeditor/mobile/src/less/icons-material.less
View file

@ -476,6 +476,11 @@
height: 24px;
.encoded-svg-background('<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M17.0235 7C18.4006 7 19.5743 7.49845 20.5446 8.49534C21.5149 9.46108 22 10.6293 22 12C22 13.3708 21.5149 14.5546 20.5446 15.5515C19.5743 16.5172 18.4006 17.0001 17.0235 17.0001H13V15H17C17.8451 15 18.5884 14.7882 19.1831 14.1963C19.8091 13.5733 20 12.8411 20 12C20 11.1589 19.8091 10.4424 19.1831 9.85049C18.5884 9.22743 17.8685 9 17.0235 9H13V7H17.0235ZM8.00939 12.9814V11.0187H15.9906V12.9814H8.00939ZM4.76995 9.85049C4.17527 10.4424 4 11.1589 4 12C4 12.8411 4.17527 13.5733 4.76995 14.1963C5.39593 14.7882 6.15493 15 7 15H11.0141V17.0001H6.97653C5.59937 17.0001 4.42567 16.5172 3.4554 15.5515C2.48513 14.5546 2 13.3708 2 12C2 10.6293 2.48513 9.46108 3.4554 8.49534C4.42567 7.49845 5.59937 7 6.97653 7H11.0141V9H6.97653C6.13146 9 5.39593 9.22743 4.76995 9.85049Z" fill="@{themeColor}"/></svg>');
}
&.icon-plus {
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="@{navBarIconColor}"><g><path d="M21,12h-9v9h-2v-9H1v-2h9V1h2v9h9V12z"/></g></svg>');
}
}
// Overwrite color for toolbar

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

@ -8,7 +8,7 @@ const ToolbarView = props => {
<Fragment>
<NavLeft>
{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,
disabledRedo: !props.isCanRedo,
onUndoClick: props.onUndo,
@ -17,6 +17,12 @@ const ToolbarView = props => {
</NavLeft>
{!Device.phone && <NavTitle>{props.docTitle}</NavTitle>}
<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>
{props.isEdit && EditorUIController.getToolbarOptions && EditorUIController.getToolbarOptions({
disabledAdd: props.disabledAdd || props.disabledControls,

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

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

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

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

5
apps/spreadsheeteditor/mobile/src/less/icons-material.less
View file

@ -391,6 +391,11 @@
height: 24px;
.encoded-svg-background('<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M7.0213 21.5174L10.9355 18.1047L9.82839 17.1394L7.25058 19.3869L7.25059 2L5.68491 2L5.68491 19.3869L3.1071 17.1394L2 18.1047L5.91419 21.5174L6.46774 22L7.0213 21.5174Z" fill="@{themeColor}"/><path d="M13.4675 11.4058L13.4959 9.75035L15.4273 9.06091L15.479 6.04827L13.5695 5.45761L13.5972 3.84333L22 6.64062L21.9724 8.24976L13.4675 11.4058ZM16.8599 8.54922L20.0145 7.45944L16.8952 6.49282L16.8599 8.54922Z" fill="@{themeColor}"/><path d="M21.8957 12.9213L21.844 15.934C21.8338 16.5303 21.7974 16.9746 21.7347 17.2669C21.6758 17.5625 21.556 17.8266 21.3752 18.0591C21.1944 18.2951 20.9547 18.4926 20.656 18.6517C20.3612 18.8107 20.0312 18.8932 19.6661 18.8991C19.2701 18.9056 18.9085 18.8156 18.5812 18.6291C18.2538 18.446 18.0103 18.193 17.8506 17.8701C17.6928 18.3318 17.4311 18.689 17.0655 18.9417C16.7 19.1943 16.2731 19.3247 15.7849 19.3326C15.4005 19.3389 15.0271 19.2645 14.6646 19.1094C14.306 18.9577 14.0195 18.7448 13.8051 18.4707C13.5946 18.2001 13.4678 17.8629 13.4248 17.4593C13.3984 17.2062 13.3896 16.5947 13.3986 15.6249L13.3986 12.9213L21.8957 12.9213ZM20.4627 14.4661L18.508 14.498L18.4909 15.4954C18.4807 16.0883 18.484 16.4566 18.5007 16.6002C18.5309 16.8601 18.6273 17.0624 18.7901 17.2071C18.9566 17.3552 19.1764 17.4269 19.4493 17.4225C19.7107 17.4182 19.9232 17.3496 20.0869 17.2167C20.2544 17.0872 20.3576 16.8954 20.3965 16.6412C20.4184 16.4901 20.4354 16.0564 20.4477 15.34L20.4627 14.4661ZM17.101 14.521L14.8407 14.558L14.8166 15.9666C14.8071 16.515 14.8185 16.8626 14.8505 17.0094C14.8928 17.2349 15.0011 17.4164 15.1755 17.554C15.3537 17.695 15.5928 17.7631 15.8926 17.7582C16.1463 17.754 16.3625 17.6957 16.5412 17.5831C16.7199 17.4705 16.8514 17.3091 16.9358 17.0987C17.02 16.8917 17.0681 16.4421 17.08 15.7497L17.101 14.521Z" fill="@{themeColor}"/></svg>');
}
&.icon-plus {
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="@{navBarIconColor}"><g><path d="M21,12h-9v9h-2v-9H1v-2h9V1h2v9h9V12z"/></g></svg>');
}
}
// Overwrite color for toolbar

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

@ -4,19 +4,21 @@ import { Device } from '../../../../common/mobile/utils/device';
import EditorUIController from '../lib/patch'
const ToolbarView = props => {
const undo_box = props.isEdit && EditorUIController.toolbarOptions ? EditorUIController.toolbarOptions.getUndoRedo({
disabledUndo: !props.isCanUndo,
disabledRedo: !props.isCanRedo,
onUndoClick: props.onUndo,
onRedoClick: props.onRedo
}) : null;
return (
<Fragment>
<NavLeft>
{props.isShowBack && <Link className={`btn-doc-back${props.disabledControls && ' disabled'}`} icon='icon-back' onClick={props.onBack}></Link>}
{props.isEdit && EditorUIController.toolbarOptions && EditorUIController.toolbarOptions.getUndoRedo({
disabledUndo: !props.isCanUndo,
disabledRedo: !props.isCanRedo,
onUndoClick: props.onUndo,
onRedoClick: props.onRedo
})}
{Device.ios && undo_box}
</NavLeft>
{!Device.phone && <NavTitle>{props.docTitle}</NavTitle>}
<NavRight>
{Device.android && undo_box}
{props.isEdit && EditorUIController.toolbarOptions && EditorUIController.toolbarOptions.getEditOptions({
disabled: props.disabledEditControls || props.disabledControls,
onEditClick: () => props.openOptions('edit'),