-
-
-
+
-
-
-
-
-
-
@@ -223,4 +303,6 @@ class SearchView extends Component {
}
}
-export {SearchView as default, SearchView, SearchSettingsView};
+const SearchViewWithObserver = observer(SearchView);
+
+export {SearchViewWithObserver as SearchView, SearchSettingsView};
diff --git a/apps/common/mobile/resources/less/common-ios.less b/apps/common/mobile/resources/less/common-ios.less
index ea41f12844..f45704f6c5 100644
--- a/apps/common/mobile/resources/less/common-ios.less
+++ b/apps/common/mobile/resources/less/common-ios.less
@@ -390,4 +390,70 @@
background-color: @white;
}
}
+
+ // Find and Replace
+
+ .navbar {
+ .searchbar-input-wrap {
+ margin-right: 10px;
+ height: 28px;
+ }
+ .buttons-row-replace a {
+ color: @themeColor;
+ }
+ }
+
+ .searchbar input[type=search] {
+ box-sizing: border-box;
+ width: 100%;
+ height: 100%;
+ display: block;
+ border: none;
+ appearance: none;
+ border-radius: 5px;
+ font-family: inherit;
+ color: @black;
+ font-size: 14px;
+ font-weight: 400;
+ padding: 0 8px;
+ background-color: @white;
+ padding: 0 28px;
+ }
+
+ .searchbar-inner {
+ &__right {
+ .buttons-row a.next {
+ margin-left: 15px;
+ }
+ }
+ }
+
+ @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 {
+ &__center {
+ .searchbar-input-wrap {
+ margin: 8px 0;
+ }
+ }
+ }
+ }
+ }
+ }
}
diff --git a/apps/common/mobile/resources/less/common-material.less b/apps/common/mobile/resources/less/common-material.less
index 2dbc3ddf33..9e2afe6f56 100644
--- a/apps/common/mobile/resources/less/common-material.less
+++ b/apps/common/mobile/resources/less/common-material.less
@@ -286,4 +286,116 @@
}
}
}
+
+ // Find and Replace
+
+ .searchbar-inner {
+ &__center {
+ flex-wrap: wrap;
+ }
+ &__left {
+ padding-top: 4px;
+ }
+ }
+
+ .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;
+ &:after {
+ color: @white;
+ font-size: 19px;
+ }
+ }
+
+ .searchbar-icon {
+ &:after {
+ color: @white;
+ font-size: 19px;
+ }
+ }
+
+ .searchbar input[type=search] {
+ box-sizing: border-box;
+ width: 100%;
+ display: block;
+ border: none;
+ appearance: none;
+ border-radius: 0;
+ font-family: inherit;
+ color: @white;
+ font-size: 16px;
+ font-weight: 400;
+ padding: 0;
+ border-bottom: 1px solid @white;
+ height: 100%;
+ padding: 0 36px 0 24px;
+ background-color: transparent;
+ background-repeat: no-repeat;
+ background-position: 0 center;
+ opacity: 1;
+ background-size: 24px 24px;
+ transition-duration: .3s;
+ .encoded-svg-background('
');
+ }
+
+ .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: 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;
+ }
+ }
+ }
+ }
}
diff --git a/apps/common/mobile/resources/less/ios/icons.less b/apps/common/mobile/resources/less/ios/icons.less
index 820a9527ac..204df9989d 100644
--- a/apps/common/mobile/resources/less/ios/icons.less
+++ b/apps/common/mobile/resources/less/ios/icons.less
@@ -4,16 +4,21 @@
&.icon_mask {
background-color: white;
}
-
&.icon-prev {
width: 22px;
height: 22px;
- .encoded-svg-background('
');
+ .encoded-svg-background('
');
+ &:after {
+ display: none;
+ }
}
&.icon-next {
width: 22px;
height: 22px;
- .encoded-svg-background('
');
+ .encoded-svg-background('
');
+ &:after {
+ display: none;
+ }
}
}
}
diff --git a/apps/common/mobile/resources/less/material/icons.less b/apps/common/mobile/resources/less/material/icons.less
index 6e8f3626bf..ef7b499878 100644
--- a/apps/common/mobile/resources/less/material/icons.less
+++ b/apps/common/mobile/resources/less/material/icons.less
@@ -4,16 +4,21 @@
&.icon_mask {
background-color: black;
}
-
&.icon-prev {
- width: 24px;
- height: 24px;
- .encoded-svg-background('
');
+ width: 20px;
+ height: 20px;
+ .encoded-svg-background('
');
+ &:after {
+ display: none;
+ }
}
&.icon-next {
- width: 24px;
- height: 24px;
- .encoded-svg-background('
');
+ width: 20px;
+ height: 20px;
+ .encoded-svg-background('
');
+ &:after {
+ display: none;
+ }
}
}
}
diff --git a/apps/common/mobile/resources/less/search.less b/apps/common/mobile/resources/less/search.less
index 21249b9414..caf870f494 100644
--- a/apps/common/mobile/resources/less/search.less
+++ b/apps/common/mobile/resources/less/search.less
@@ -14,7 +14,59 @@
}
}
- .searchbar-input-wrap {
- margin-right: 10px;
+ .searchbar-inner {
+ &__center {
+ display: flex;
+ align-items: center;
+ width: 100%;
+ }
+ &__right {
+ display: flex;
+ align-items: center;
+ }
+ }
+
+ .searchbar-expandable {
+ 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;
+ }
+ }
+ }
+ }
}
}
diff --git a/apps/documenteditor/mobile/locale/en.json b/apps/documenteditor/mobile/locale/en.json
index 04eb48129d..54937afbf3 100644
--- a/apps/documenteditor/mobile/locale/en.json
+++ b/apps/documenteditor/mobile/locale/en.json
@@ -210,7 +210,13 @@
"advDRMPassword": "Password",
"closeButtonText": "Close File",
"advDRMOptions": "Protected File",
- "txtProtected": "Once you enter the password and open the file, the current password to the file will be reset"
+ "txtProtected": "Once you enter the password and open the file, the current password to the file will be reset",
+ "textNoTextFound": "Text not found",
+ "textReplace": "Replace",
+ "textReplaceAll": "Replace All",
+ "textCaseSensitive": "Case Sensitive",
+ "textHighlightResults": "Highlight Results",
+ "textSearch": "Search"
},
"Edit": {
"textClose": "Close",
@@ -311,7 +317,6 @@
"textAutomatic": "Automatic",
"textAddCustomColor": "Add Custom Color",
"textCustomColor": "Custom Color",
- "textBackground": "Background",
"textFill": "Fill",
"textBorder": "Border",
"textEffects": "Effects",
diff --git a/apps/documenteditor/mobile/src/controller/Search.jsx b/apps/documenteditor/mobile/src/controller/Search.jsx
index 99ac30ccc7..4184133cc7 100644
--- a/apps/documenteditor/mobile/src/controller/Search.jsx
+++ b/apps/documenteditor/mobile/src/controller/Search.jsx
@@ -1,8 +1,9 @@
import React from 'react';
-import { List, ListItem, Toggle } from 'framework7-react';
+import { List, ListItem, Toggle, Page, Navbar, NavRight, Link } from 'framework7-react';
import { SearchController, SearchView, SearchSettingsView } from '../../../../common/mobile/lib/controller/Search';
import { f7 } from 'framework7-react';
-
+import { withTranslation } from 'react-i18next';
+import { Device } from '../../../../common/mobile/utils/device';
class SearchSettings extends SearchSettingsView {
constructor(props) {
@@ -18,21 +19,43 @@ class SearchSettings extends SearchSettingsView {
extraSearchOptions() {
const anc_markup = super.extraSearchOptions();
+ const show_popover = !Device.phone;
+ const { t } = this.props;
+ const _t = t("Settings", {returnObjects: true});
- const markup =
-
+ const markup = (
+
+
+ {!show_popover &&
+
+ {_t.textDone}
+
+ }
+
+
+ this.onFindReplaceClick('find')} />
+ this.onFindReplaceClick('replace')} />
+
+
+
-
+
-
;
+
+
+ );
return {...anc_markup, ...markup};
}
}
class DESearchView extends SearchView {
+ constructor(props) {
+ super(props);
+ }
+
searchParams() {
let params = super.searchParams();
@@ -57,19 +80,39 @@ class DESearchView extends SearchView {
}
}
-const Search = props => {
+const Search = withTranslation()(props => {
+ const { t } = props;
+ const _t = t('Settings', {returnObjects: true});
+
const onSearchQuery = params => {
const api = Common.EditorApi.get();
- if ( !params.replace ) {
- if ( !api.asc_findText(params.find, params.forward, params.caseSensitive, params.highlight) ) {
- f7.dialog.alert('there are no more results', e => {
- });
+ if (params.find && params.find.length) {
+ if (!api.asc_findText(params.find, params.forward, params.caseSensitive, params.highlight) ) {
+ f7.dialog.alert(null, _t.textNoTextFound);
}
}
};
- return
-};
+ const onReplaceQuery = params => {
+ const api = Common.EditorApi.get();
-export {Search, SearchSettings}
+ if (params.find && params.find.length) {
+ api.asc_replaceText(params.find, params.replace, false, params.caseSensitive, params.highlight);
+ }
+ }
+
+ const onReplaceAllQuery = params => {
+ const api = Common.EditorApi.get();
+
+ if (params.find && params.find.length) {
+ api.asc_replaceText(params.find, params.replace, true, params.caseSensitive, params.highlight);
+ }
+ }
+
+ return
+});
+
+const SearchSettingsWithTranslation = withTranslation()(SearchSettings);
+
+export {Search, SearchSettingsWithTranslation as SearchSettings}
diff --git a/apps/documenteditor/mobile/src/less/icons-material.less b/apps/documenteditor/mobile/src/less/icons-material.less
index 8590b8555c..a388db33ff 100644
--- a/apps/documenteditor/mobile/src/less/icons-material.less
+++ b/apps/documenteditor/mobile/src/less/icons-material.less
@@ -79,7 +79,7 @@
&.icon-search {
width: 22px;
height: 22px;
- .encoded-svg-background('
');
+ .encoded-svg-background('
');
}
&.icon-reader {
width: 22px;
diff --git a/apps/documenteditor/mobile/src/page/main.jsx b/apps/documenteditor/mobile/src/page/main.jsx
index fbed1a5e1c..4598f8f32f 100644
--- a/apps/documenteditor/mobile/src/page/main.jsx
+++ b/apps/documenteditor/mobile/src/page/main.jsx
@@ -70,15 +70,17 @@ export default class MainPage extends Component {
this.handleClickToOpenOptions('coauth')}>
this.handleClickToOpenOptions('settings')}>
- { Device.phone ? null :
}
+ {/* { Device.phone ? null :
} */}
+
{/* Page content */}
-
+
- {
+ {/* {
Device.phone ? null :
- }
+ } */}
+
{
!this.state.editOptionsVisible ? null :
diff --git a/apps/documenteditor/mobile/src/store/applicationSettings.js b/apps/documenteditor/mobile/src/store/applicationSettings.js
index a1e17a40c7..9fea1a4f09 100644
--- a/apps/documenteditor/mobile/src/store/applicationSettings.js
+++ b/apps/documenteditor/mobile/src/store/applicationSettings.js
@@ -3,20 +3,20 @@ import {makeObservable, action, observable} from 'mobx';
export class storeApplicationSettings {
constructor() {
makeObservable(this, {
- unitMeasurement: observable
- , isSpellChecking: observable
- , isNonprintingCharacters: observable
- , isHiddenTableBorders: observable
- , isComments: observable
- , isResolvedComments: observable
- , macrosMode: observable
- , changeSpellCheck: action
- , changeUnitMeasurement: action
- , changeNoCharacters: action
- , changeShowTableEmptyLine: action
- , changeDisplayComments: action
- , changeDisplayResolved: action
- , changeMacrosSettings: action
+ unitMeasurement: observable,
+ isSpellChecking: observable,
+ isNonprintingCharacters: observable,
+ isHiddenTableBorders: observable,
+ isComments: observable,
+ isResolvedComments: observable,
+ macrosMode: observable,
+ changeSpellCheck: action,
+ changeUnitMeasurement: action,
+ changeNoCharacters: action,
+ changeShowTableEmptyLine: action,
+ changeDisplayComments: action,
+ changeDisplayResolved: action,
+ changeMacrosSettings: action
})
}
diff --git a/apps/documenteditor/mobile/src/store/chartSettings.js b/apps/documenteditor/mobile/src/store/chartSettings.js
index 90485f4627..8ae720d455 100644
--- a/apps/documenteditor/mobile/src/store/chartSettings.js
+++ b/apps/documenteditor/mobile/src/store/chartSettings.js
@@ -1,6 +1,22 @@
-import {action, observable, computed} from 'mobx';
+import {action, observable, computed, makeObservable} from 'mobx';
export class storeChartSettings {
+ constructor() {
+ makeObservable(this, {
+ chartStyles: observable,
+ fillColor: observable,
+ borderColor: observable,
+ clearChartStyles: action,
+ updateChartStyles: action,
+ styles: computed,
+ types: computed,
+ setFillColor: action,
+ getFillColor: action,
+ setBorderColor: action,
+ initBorderColor: action
+ });
+ }
+
wrapTypesTransform () {
const map = [
{ ui:'inline', sdk: Asc.c_oAscWrapStyle2.Inline },
@@ -56,14 +72,18 @@ export class storeChartSettings {
}
// style
- @observable chartStyles = null;
- @action clearChartStyles () {
+
+ chartStyles = null;
+
+ clearChartStyles () {
this.chartStyles = null;
}
- @action updateChartStyles (styles) {
+
+ updateChartStyles (styles) {
this.chartStyles = styles;
}
- @computed get styles () {
+
+ get styles () {
if (!this.chartStyles) return null;
const widthContainer = document.querySelector(".page-content").clientWidth;
const columns = parseInt(widthContainer / 70); // magic
@@ -78,7 +98,8 @@ export class storeChartSettings {
});
return styles;
}
- @computed get types () {
+
+ get types () {
const types = [
{ type: Asc.c_oAscChartTypeSettings.barNormal, thumb: 'chart-03.png'},
{ type: Asc.c_oAscChartTypeSettings.barStacked, thumb: 'chart-02.png'},
@@ -120,10 +141,13 @@ export class storeChartSettings {
}
// Fill Color
- @observable fillColor = undefined;
+
+ fillColor = undefined;
+
setFillColor (color) {
this.fillColor = color;
}
+
getFillColor (shapeProperties) {
let fill = shapeProperties.get_fill();
const fillType = fill.get_type();
@@ -144,10 +168,13 @@ export class storeChartSettings {
}
// Border size and border color
- @observable borderColor;
+
+ borderColor;
+
setBorderColor (color) {
this.borderColor = color;
}
+
initBorderColor (stroke) {
let color = 'transparent';
if (stroke && stroke.get_type() == Asc.c_oAscStrokeType.STROKE_COLOR) {
@@ -164,6 +191,7 @@ export class storeChartSettings {
this.borderColor = color;
return color;
}
+
borderSizeTransform () {
const _sizes = [0, 0.5, 1, 1.5, 2.25, 3, 4.5, 6];
diff --git a/apps/documenteditor/mobile/src/store/documentInfo.js b/apps/documenteditor/mobile/src/store/documentInfo.js
index 4417029983..3bfa673563 100644
--- a/apps/documenteditor/mobile/src/store/documentInfo.js
+++ b/apps/documenteditor/mobile/src/store/documentInfo.js
@@ -1,21 +1,33 @@
-import { action, observable } from "mobx";
+import {action, observable, makeObservable} from "mobx";
export class storeDocumentInfo {
- @observable infoObj = {
+ constructor() {
+ makeObservable(this, {
+ infoObj: observable,
+ isLoaded: observable,
+ dataDoc: observable,
+ switchIsLoaded: action,
+ changeCount: action,
+ setDataDoc: action
+ });
+ }
+
+ infoObj = {
pageCount: 0,
wordsCount: 0,
paragraphCount: 0,
symbolsCount: 0,
symbolsWSCount: 0,
};
- @observable isLoaded = false;
- @observable dataDoc;
- @action switchIsLoaded(value) {
+ isLoaded = false;
+ dataDoc;
+
+ switchIsLoaded(value) {
this.isLoaded = value;
}
- @action changeCount(obj) {
+ changeCount(obj) {
if (obj) {
if (obj.get_PageCount() > -1)
this.infoObj.pageCount = obj.get_PageCount();
@@ -30,7 +42,7 @@ export class storeDocumentInfo {
}
}
- @action setDataDoc(obj) {
+ setDataDoc(obj) {
this.dataDoc = obj;
}
}
\ No newline at end of file
diff --git a/apps/documenteditor/mobile/src/store/documentSettings.js b/apps/documenteditor/mobile/src/store/documentSettings.js
index d426d93f50..50a73a764e 100644
--- a/apps/documenteditor/mobile/src/store/documentSettings.js
+++ b/apps/documenteditor/mobile/src/store/documentSettings.js
@@ -1,15 +1,31 @@
-import {action, observable, computed} from 'mobx';
+import {action, observable, computed, makeObservable} from 'mobx';
export class storeDocumentSettings {
- @observable isPortrait = true;
- @action resetPortrait (isPortrait) {
+ constructor() {
+ makeObservable(this, {
+ isPortrait: observable,
+ widthDocument: observable,
+ heightDocument: observable,
+ allSchemes: observable,
+ resetPortrait: action,
+ changeDocSize: action,
+ pageSizesIndex: computed,
+ addSchemes: action
+ });
+ }
+
+ isPortrait = true;
+
+ resetPortrait (isPortrait) {
this.isPortrait = isPortrait === true;
}
//Document Formats
- @observable widthDocument;
- @observable heightDocument;
- @action changeDocSize (width, height) {
+
+ widthDocument;
+ heightDocument;
+
+ changeDocSize (width, height) {
let w = width;
let h = height;
if (!this.isPortrait) {
@@ -20,6 +36,7 @@ export class storeDocumentSettings {
this.widthDocument = w;
this.heightDocument = h;
}
+
getPageSizesList () {
const txtCm = Common.Utils.Metric.getMetricName(Common.Utils.Metric.c_MetricUnits.cm);
const pageSizes = [
@@ -43,7 +60,8 @@ export class storeDocumentSettings {
];
return pageSizes;
}
- @computed get pageSizesIndex () {
+
+ get pageSizesIndex () {
let w = this.widthDocument;
let h = this.heightDocument;
let ind = -1;
@@ -61,9 +79,9 @@ export class storeDocumentSettings {
// Color Schemes
- @observable allSchemes;
+ allSchemes;
- @action addSchemes(arr) {
+ addSchemes(arr) {
this.allSchemes = arr;
}
diff --git a/apps/documenteditor/mobile/src/store/focusObjects.js b/apps/documenteditor/mobile/src/store/focusObjects.js
index e9ff424bc1..b9a9f4e168 100644
--- a/apps/documenteditor/mobile/src/store/focusObjects.js
+++ b/apps/documenteditor/mobile/src/store/focusObjects.js
@@ -1,14 +1,32 @@
-import {action, observable, computed} from 'mobx';
+import {action, observable, computed, makeObservable} from 'mobx';
export class storeFocusObjects {
- @observable _focusObjects = [];
- @observable _headerType = 1;
+ constructor() {
+ makeObservable(this, {
+ _focusObjects: observable,
+ _headerType: observable,
+ resetFocusObjects: action,
+ settings: computed,
+ headerType: computed,
+ headerObject: computed,
+ paragraphObject: computed,
+ shapeObject: computed,
+ imageObject: computed,
+ tableObject: computed,
+ isTableInStack: computed,
+ chartObject: computed,
+ linkObject: computed
+ });
+ }
- @action resetFocusObjects (objects) {
+ _focusObjects = [];
+ _headerType = 1;
+
+ resetFocusObjects (objects) {
this._focusObjects = objects;
}
- @computed get settings() {
+ get settings() {
const _settings = [];
for (let object of this._focusObjects) {
let type = object.get_ObjectType();
@@ -34,7 +52,8 @@ export class storeFocusObjects {
}
return _settings.filter((value, index, self) => self.indexOf(value) === index);
}
- @computed get headerType() {
+
+ get headerType() {
for (let object of this._focusObjects) {
const type = object.get_ObjectType();
if (Asc.c_oAscTypeSelectElement.Header === type) {
@@ -43,7 +62,8 @@ export class storeFocusObjects {
}
return this._headerType;
}
- @computed get headerObject() {
+
+ get headerObject() {
const headers = [];
for (let object of this._focusObjects) {
if (object.get_ObjectType() == Asc.c_oAscTypeSelectElement.Header) {
@@ -57,7 +77,8 @@ export class storeFocusObjects {
return undefined;
}
}
- @computed get paragraphObject() {
+
+ get paragraphObject() {
const paragraphs = [];
for (let object of this._focusObjects) {
if (object.get_ObjectType() === Asc.c_oAscTypeSelectElement.Paragraph) {
@@ -71,7 +92,8 @@ export class storeFocusObjects {
return undefined;
}
}
- @computed get shapeObject() {
+
+ get shapeObject() {
const shapes = [];
for (let object of this._focusObjects) {
if (object.get_ObjectType() === Asc.c_oAscTypeSelectElement.Image) {
@@ -87,7 +109,8 @@ export class storeFocusObjects {
return undefined;
}
}
- @computed get imageObject() {
+
+ get imageObject() {
const images = [];
for (let object of this._focusObjects) {
if (object.get_ObjectType() == Asc.c_oAscTypeSelectElement.Image) {
@@ -104,7 +127,8 @@ export class storeFocusObjects {
return undefined;
}
}
- @computed get tableObject() {
+
+ get tableObject() {
const tables = [];
for (let object of this._focusObjects) {
if (object.get_ObjectType() == Asc.c_oAscTypeSelectElement.Table) {
@@ -118,7 +142,8 @@ export class storeFocusObjects {
return undefined;
}
}
- @computed get isTableInStack() {
+
+ get isTableInStack() {
for (let object of this._focusObjects) {
if (object.get_ObjectType() == Asc.c_oAscTypeSelectElement.Table) {
return true;
@@ -126,7 +151,8 @@ export class storeFocusObjects {
}
return false;
}
- @computed get chartObject() {
+
+ get chartObject() {
const charts = [];
for (let object of this._focusObjects) {
if (object.get_ObjectValue() && object.get_ObjectValue().get_ChartProperties()) {
@@ -140,7 +166,8 @@ export class storeFocusObjects {
return undefined;
}
}
- @computed get linkObject() {
+
+ get linkObject() {
const links = [];
for (let object of this._focusObjects) {
if (object.get_ObjectType() == Asc.c_oAscTypeSelectElement.Hyperlink) {
diff --git a/apps/documenteditor/mobile/src/store/palette.js b/apps/documenteditor/mobile/src/store/palette.js
index f5e40e59b7..55ba20a2dd 100644
--- a/apps/documenteditor/mobile/src/store/palette.js
+++ b/apps/documenteditor/mobile/src/store/palette.js
@@ -1,9 +1,16 @@
-import {action, observable} from 'mobx';
+import {action, observable, makeObservable} from 'mobx';
export class storePalette {
- @observable customColors = [];
+ constructor() {
+ makeObservable(this, {
+ customColors: observable,
+ changeCustomColors: action
+ });
+ }
+
+ customColors = [];
- @action changeCustomColors (colors) {
+ changeCustomColors (colors) {
this.customColors = colors;
}
}
\ No newline at end of file
diff --git a/apps/documenteditor/mobile/src/store/paragraphSettings.js b/apps/documenteditor/mobile/src/store/paragraphSettings.js
index 70c4650928..ed5bd2004e 100644
--- a/apps/documenteditor/mobile/src/store/paragraphSettings.js
+++ b/apps/documenteditor/mobile/src/store/paragraphSettings.js
@@ -1,18 +1,33 @@
-import {action, observable, computed} from 'mobx';
+import {action, observable, computed, makeObservable} from 'mobx';
export class storeParagraphSettings {
- @observable styles = [];
- @observable styleThumbSize = null;
- @observable styleName = undefined;
+ constructor() {
+ makeObservable(this, {
+ styles: observable,
+ styleThumbSize: observable,
+ styleName: observable,
+ backColor: observable,
+ initEditorStyles: action,
+ paragraphStyles: computed,
+ changeParaStyleName: action,
+ setBackColor: action,
+ getBackgroundColor: action
+ });
+ }
- @action initEditorStyles (styles) {
+ styles = [];
+ styleThumbSize = null;
+ styleName = undefined;
+
+ initEditorStyles (styles) {
this.styles = styles.get_MergedStyles();
this.styleThumbSize = {
width : styles.STYLE_THUMBNAIL_WIDTH,
height : styles.STYLE_THUMBNAIL_HEIGHT
};
}
- @computed get paragraphStyles () {
+
+ get paragraphStyles () {
let _styles = [];
for (let style of this.styles) {
_styles.push({
@@ -22,14 +37,17 @@ export class storeParagraphSettings {
}
return _styles;
}
- @action changeParaStyleName (name) {
+
+ changeParaStyleName (name) {
this.styleName = name;
}
- @observable backColor = undefined;
+ backColor = undefined;
+
setBackColor (color) {
this.backColor = color;
}
+
getBackgroundColor (paragraphObject) {
const shade = paragraphObject.get_Shade();
let backColor = 'transparent';
diff --git a/apps/documenteditor/mobile/src/store/review.js b/apps/documenteditor/mobile/src/store/review.js
index 9c54504772..61c39e384a 100644
--- a/apps/documenteditor/mobile/src/store/review.js
+++ b/apps/documenteditor/mobile/src/store/review.js
@@ -1,15 +1,24 @@
-import {action, observable, computed} from 'mobx';
+import {action, observable, makeObservable} from 'mobx';
export class storeReview {
- @observable displayMode = 'markup';
+ constructor() {
+ makeObservable(this, {
+ displayMode: observable,
+ dataChanges: observable,
+ changeDisplayMode: action,
+ changeArrReview: action
+ });
+ }
- @action changeDisplayMode (mode) {
+ displayMode = 'markup';
+
+ changeDisplayMode (mode) {
this.displayMode = mode;
}
- @observable dataChanges = [];
+ dataChanges = [];
- @action changeArrReview (data) {
+ changeArrReview (data) {
this.dataChanges = data && data.length > 0 ? data : [];
}
}
\ No newline at end of file
diff --git a/apps/documenteditor/mobile/src/store/shapeSettings.js b/apps/documenteditor/mobile/src/store/shapeSettings.js
index f4e752ed02..50e6c68e3f 100644
--- a/apps/documenteditor/mobile/src/store/shapeSettings.js
+++ b/apps/documenteditor/mobile/src/store/shapeSettings.js
@@ -1,6 +1,17 @@
-import {action, observable, computed} from 'mobx';
+import {action, observable, computed, makeObservable} from 'mobx';
export class storeShapeSettings {
+ constructor() {
+ makeObservable(this, {
+ fillColor: observable,
+ borderColorView: observable,
+ setFillColor: action,
+ getFillColor: action,
+ setBorderColor: action,
+ initBorderColorView: action
+ });
+ }
+
getStyleGroups () {
const styles = [
{
@@ -136,6 +147,7 @@ export class storeShapeSettings {
}
return groups;
}
+
wrapTypesTransform () {
const map = [
{ ui:'inline', sdk: Asc.c_oAscWrapStyle2.Inline },
@@ -191,10 +203,13 @@ export class storeShapeSettings {
}
// Fill Color
- @observable fillColor = undefined;
+
+ fillColor = undefined;
+
setFillColor (color) {
this.fillColor = color;
}
+
getFillColor (shapeObject) {
let fill = shapeObject.get_ShapeProperties().get_fill();
const fillType = fill.get_type();
@@ -215,10 +230,13 @@ export class storeShapeSettings {
}
// Border size and color
- @observable borderColorView;
+
+ borderColorView;
+
setBorderColor (color) {
this.borderColorView = color;
}
+
initBorderColorView (shapeObject) {
const stroke = shapeObject.get_ShapeProperties().get_stroke();
let color = 'transparent';
@@ -236,6 +254,7 @@ export class storeShapeSettings {
this.borderColorView = color;
return color;
}
+
borderSizeTransform () {
const _sizes = [0, 0.5, 1, 1.5, 2.25, 3, 4.5, 6];
diff --git a/apps/documenteditor/mobile/src/store/tableSettings.js b/apps/documenteditor/mobile/src/store/tableSettings.js
index b40d71bc00..892e307a22 100644
--- a/apps/documenteditor/mobile/src/store/tableSettings.js
+++ b/apps/documenteditor/mobile/src/store/tableSettings.js
@@ -3,14 +3,25 @@ import {f7} from 'framework7-react';
export class storeTableSettings {
constructor() {
- makeObservable(this)
+ makeObservable(this, {
+ _templates: observable,
+ cellBorders: observable,
+ cellBorderWidth: observable,
+ cellBorderColor: observable,
+ initTableTemplates: action,
+ styles: computed,
+ updateCellBorderWidth: action,
+ updateCellBorderColor: action,
+ });
}
- @observable _templates = [];
- @action initTableTemplates (templates) {
+ _templates = [];
+
+ initTableTemplates (templates) {
this._templates = templates;
}
- @computed get styles () {
+
+ get styles () {
let styles = [];
for (let template of this._templates) {
styles.push({
@@ -69,9 +80,10 @@ export class storeTableSettings {
}
// Border style
- @observable cellBorders;
- @observable cellBorderWidth = 0.5;
- @observable cellBorderColor = '000000';
+
+ cellBorders;
+ cellBorderWidth = 0.5;
+ cellBorderColor = '000000';
borderSizeTransform () {
const _sizes = [0, 0.5, 1, 1.5, 2.25, 3, 4.5, 6];
diff --git a/apps/documenteditor/mobile/src/store/textSettings.js b/apps/documenteditor/mobile/src/store/textSettings.js
index 48d42403b6..9c794163c1 100644
--- a/apps/documenteditor/mobile/src/store/textSettings.js
+++ b/apps/documenteditor/mobile/src/store/textSettings.js
@@ -1,25 +1,64 @@
-import {action, observable, computed} from 'mobx';
+import {action, observable, computed, makeObservable} from 'mobx';
export class storeTextSettings {
- @observable fontsArray = [];
- @observable fontName = '';
- @observable fontSize = undefined;
- @observable isBold = false;
- @observable isItalic = false;
- @observable isUnderline = false;
- @observable isStrikethrough = false;
- @observable typeBaseline = undefined;
- @observable listType = undefined;
- @observable typeBullets = undefined;
- @observable typeNumbers = undefined;
- @observable paragraphAlign = undefined;
- @observable textColor = undefined;
- @observable customTextColors = [];
- @observable lineSpacing = undefined;
- @observable backgroundColor = undefined;
+ constructor() {
+ makeObservable(this, {
+ fontsArray: observable,
+ fontName: observable,
+ fontSize: observable,
+ isBold: observable,
+ isItalic: observable,
+ isUnderline: observable,
+ isStrikethrough: observable,
+ typeBaseline: observable,
+ listType: observable,
+ typeBullets: observable,
+ typeNumbers: observable,
+ paragraphAlign: observable,
+ textColor: observable,
+ customTextColors: observable,
+ lineSpacing: observable,
+ backgroundColor: observable,
+ initEditorFonts: action,
+ resetFontName: action,
+ resetFontSize: action,
+ resetIsBold: action,
+ resetIsItalic: action,
+ resetIsUnderline: action,
+ resetIsStrikeout: action,
+ resetTypeBaseline: action,
+ isSuperscript: computed,
+ isSubscript: computed,
+ resetListType: action,
+ resetBullets: action,
+ resetNumbers: action,
+ resetParagraphAlign: action,
+ resetTextColor: action,
+ changeCustomTextColors: action,
+ resetLineSpacing: action,
+ resetBackgroundColor: action
+ });
+ }
+
+ fontsArray = [];
+ fontName = '';
+ fontSize = undefined;
+ isBold = false;
+ isItalic = false;
+ isUnderline = false;
+ isStrikethrough = false;
+ typeBaseline = undefined;
+ listType = undefined;
+ typeBullets = undefined;
+ typeNumbers = undefined;
+ paragraphAlign = undefined;
+ textColor = undefined;
+ customTextColors = [];
+ lineSpacing = undefined;
+ backgroundColor = undefined;
- @action initEditorFonts (fonts, select) {
+ initEditorFonts (fonts, select) {
let array = [];
for (let font of fonts) {
let fontId = font.asc_getFontId();
@@ -33,49 +72,49 @@ export class storeTextSettings {
}
this.fontsArray = array;
}
- @action resetFontName (font) {
+ resetFontName (font) {
let name = (typeof font.get_Name) === "function" ? font.get_Name() : font.asc_getName();
this.fontName = name;
}
- @action resetFontSize (size) {
+ resetFontSize (size) {
this.fontSize = size;
}
- @action resetIsBold (isBold) {
+ resetIsBold (isBold) {
this.isBold = isBold;
}
- @action resetIsItalic (isItalic) {
+ resetIsItalic (isItalic) {
this.isItalic = isItalic;
}
- @action resetIsUnderline (isUnderline) {
+ resetIsUnderline (isUnderline) {
this.isUnderline = isUnderline;
}
- @action resetIsStrikeout (isStrikethrough) {
+ resetIsStrikeout (isStrikethrough) {
this.isStrikethrough = isStrikethrough;
}
// vertical align
- @action resetTypeBaseline (typeBaseline) {
+ resetTypeBaseline (typeBaseline) {
this.typeBaseline = typeBaseline;
}
- @computed get isSuperscript() {
+ get isSuperscript() {
return (this.typeBaseline === 1);
}
- @computed get isSubscript() {
+ get isSubscript() {
return (this.typeBaseline === 2);
}
// bullets
- @action resetListType (type) {
+ resetListType (type) {
this.listType = type;
}
- @action resetBullets (type) {
+ resetBullets (type) {
this.typeBullets = type;
}
- @action resetNumbers (type) {
+ resetNumbers (type) {
this.typeNumbers = type;
}
- @action resetParagraphAlign (align) {
+ resetParagraphAlign (align) {
let value;
switch (align) {
case 0:
@@ -94,7 +133,7 @@ export class storeTextSettings {
this.paragraphAlign = value;
}
- @action resetTextColor (color) {
+ resetTextColor (color) {
let value;
if (color) {
if (color.get_auto()) {
@@ -113,16 +152,16 @@ export class storeTextSettings {
this.textColor = value;
}
- @action changeCustomTextColors (colors) {
+ changeCustomTextColors (colors) {
this.customTextColors = colors;
}
- @action resetLineSpacing (vc) {
+ resetLineSpacing (vc) {
let line = (vc.get_Line() === null || vc.get_LineRule() === null || vc.get_LineRule() != 1) ? -1 : vc.get_Line();
this.lineSpacing = line;
}
- @action resetBackgroundColor (color) {
+ resetBackgroundColor (color) {
let value;
if (color.get_type() == Asc.c_oAscColor.COLOR_TYPE_SCHEME) {
value = {
diff --git a/apps/documenteditor/mobile/src/view/edit/EditParagraph.jsx b/apps/documenteditor/mobile/src/view/edit/EditParagraph.jsx
index bd1d8c762b..048265fd48 100644
--- a/apps/documenteditor/mobile/src/view/edit/EditParagraph.jsx
+++ b/apps/documenteditor/mobile/src/view/edit/EditParagraph.jsx
@@ -79,21 +79,21 @@ const PageAdvancedSettings = props => {
- {props.onSpaceBetween(!spaceBetween)}}/>
+ {props.onSpaceBetween(!spaceBetween)}}/>
- {props.onBreakBefore(!breakBefore)}}/>
+ {props.onBreakBefore(!breakBefore)}}/>
- {props.onOrphan(!orphanControl)}}/>
+ {props.onOrphan(!orphanControl)}}/>
- {props.onKeepTogether(!keepTogether)}}/>
+ {props.onKeepTogether(!keepTogether)}}/>
- {props.onKeepNext(!keepWithNext)}}/>
+ {props.onKeepNext(!keepWithNext)}}/>
diff --git a/apps/documenteditor/mobile/src/view/edit/EditShape.jsx b/apps/documenteditor/mobile/src/view/edit/EditShape.jsx
index 56da592805..27bcc1e6e8 100644
--- a/apps/documenteditor/mobile/src/view/edit/EditShape.jsx
+++ b/apps/documenteditor/mobile/src/view/edit/EditShape.jsx
@@ -317,10 +317,10 @@ const PageWrap = props => {
}
- {props.onMoveText(!moveText)}}/>
+ {props.onMoveText(!moveText)}}/>
- {props.onOverlap(!overlap)}}/>
+ {props.onOverlap(!overlap)}}/>
{
diff --git a/apps/documenteditor/mobile/src/view/edit/EditTable.jsx b/apps/documenteditor/mobile/src/view/edit/EditTable.jsx
index 7e31718d78..01efdba287 100644
--- a/apps/documenteditor/mobile/src/view/edit/EditTable.jsx
+++ b/apps/documenteditor/mobile/src/view/edit/EditTable.jsx
@@ -21,10 +21,10 @@ const PageTableOptions = props => {
- {props.onOptionRepeat(!isRepeat)}}/>
+ {props.onOptionRepeat(!isRepeat)}}/>
- {props.onOptionResize(!isResize)}}/>
+ {props.onOptionResize(!isResize)}}/>
{_t.textCellMargins}
@@ -79,7 +79,7 @@ const PageWrap = props => {
- {props.onWrapMoveText(!moveText)}}/>
+ {props.onWrapMoveText(!moveText)}}/>
{
@@ -189,24 +189,24 @@ const PageStyleOptions = props => {
- {props.onCheckTemplateChange(tableLook, 0, !isFirstRow)}}/>
+ {props.onCheckTemplateChange(tableLook, 0, !isFirstRow)}}/>
- {props.onCheckTemplateChange(tableLook, 1, !isLastRow)}}/>
+ {props.onCheckTemplateChange(tableLook, 1, !isLastRow)}}/>
- {props.onCheckTemplateChange(tableLook, 2, !isBandHor)}}/>
+ {props.onCheckTemplateChange(tableLook, 2, !isBandHor)}}/>
- {props.onCheckTemplateChange(tableLook, 3, !isFirstCol)}}/>
+ {props.onCheckTemplateChange(tableLook, 3, !isFirstCol)}}/>
- {props.onCheckTemplateChange(tableLook, 4, !isLastCol)}}/>
+ {props.onCheckTemplateChange(tableLook, 4, !isLastCol)}}/>
- {props.onCheckTemplateChange(tableLook, 5, !isBandVer)}}/>
+ {props.onCheckTemplateChange(tableLook, 5, !isBandVer)}}/>
diff --git a/apps/documenteditor/mobile/src/view/settings/Settings.jsx b/apps/documenteditor/mobile/src/view/settings/Settings.jsx
index 8d74639b91..a199d82e31 100644
--- a/apps/documenteditor/mobile/src/view/settings/Settings.jsx
+++ b/apps/documenteditor/mobile/src/view/settings/Settings.jsx
@@ -64,6 +64,14 @@ const SettingsList = inject("storeAppOptions")( observer( withTranslation()( pro
props.onOptionClick(page)
};
+ const closeModal = () => {
+ if (Device.phone) {
+ f7.sheet.close('.settings-popup', true);
+ } else {
+ f7.popover.close('#settings-popover');
+ }
+ };
+
useEffect(() => {
});
@@ -100,7 +108,7 @@ const SettingsList = inject("storeAppOptions")( observer( withTranslation()( pro
{navbar}
{!props.inPopover &&
-
+
}
diff --git a/apps/presentationeditor/mobile/locale/en.json b/apps/presentationeditor/mobile/locale/en.json
index 9f00933f2c..15ec8dca9a 100644
--- a/apps/presentationeditor/mobile/locale/en.json
+++ b/apps/presentationeditor/mobile/locale/en.json
@@ -71,7 +71,14 @@
"textAddress": "address:",
"textEmail": "email:",
"textTel": "tel:",
- "textPoweredBy": "Powered By"
+ "textPoweredBy": "Powered By",
+ "textReplaceAll": "Replace All",
+ "textFind": "Find",
+ "textSearch": "Search",
+ "textCaseSensitive": "Case Sensitive",
+ "textHighlight": "Highlight Results",
+ "textReplace": "Replace",
+ "textNoTextFound": "Text not Found"
},
"Add": {
"textSlide": "Slide",
@@ -244,7 +251,15 @@
"textRemoveLink": "Remove Link",
"textDisplay": "Display",
"textScreenTip": "Screen Tip",
- "textDefault": "Selected text"
+ "textDefault": "Selected text",
+ "textReplaceAll": "Replace All",
+ "textFind": "Find",
+ "textFindAndReplace": "Find and Replace",
+ "textDone": "Done",
+ "textSearch": "Search",
+ "textCaseSensitive": "Case Sensitive",
+ "textHighlight": "Highlight Results",
+ "textNoTextFound": "Text not Found"
}
},
"Common": {
diff --git a/apps/presentationeditor/mobile/src/controller/Search.jsx b/apps/presentationeditor/mobile/src/controller/Search.jsx
new file mode 100644
index 0000000000..d99567a2da
--- /dev/null
+++ b/apps/presentationeditor/mobile/src/controller/Search.jsx
@@ -0,0 +1,100 @@
+import React from 'react';
+import { List, ListItem, Toggle, Page, Navbar, NavRight, Link } from 'framework7-react';
+import { SearchController, SearchView, SearchSettingsView } from '../../../../common/mobile/lib/controller/Search';
+import { f7 } from 'framework7-react';
+import { withTranslation } from 'react-i18next';
+import { Device } from '../../../../common/mobile/utils/device';
+
+class SearchSettings extends SearchSettingsView {
+ constructor(props) {
+ super(props);
+ }
+
+ extraSearchOptions() {
+ const anc_markup = super.extraSearchOptions();
+ const show_popover = !Device.phone;
+ const { t } = this.props;
+ const _t = t("View.Settings", {returnObjects: true});
+
+ const markup = (
+
+
+ {!show_popover &&
+
+ {_t.textDone}
+
+ }
+
+
+ this.onFindReplaceClick('find')} />
+ this.onFindReplaceClick('replace')} />
+
+
+
+
+
+
+
+ );
+
+ return {...anc_markup, ...markup};
+ }
+}
+
+class PESearchView extends SearchView {
+ constructor(props) {
+ super(props);
+ }
+
+ searchParams() {
+ let params = super.searchParams();
+
+ const checkboxCaseSensitive = f7.toggle.get('.toggle-case-sensitive');
+ const searchOptions = {
+ caseSensitive: checkboxCaseSensitive.checked,
+ };
+
+ return {...params, ...searchOptions};
+ }
+
+ onSearchbarShow(isshowed, bar) {
+ super.onSearchbarShow(isshowed, bar);
+ }
+}
+
+const Search = withTranslation()(props => {
+ const { t } = props;
+ const _t = t('View.Settings', {returnObjects: true});
+
+ const onSearchQuery = params => {
+ const api = Common.EditorApi.get();
+
+ if (params.find && params.find.length) {
+ if (!api.findText(params.find, params.forward, params.caseSensitive) ) {
+ f7.dialog.alert(null, _t.textNoTextFound);
+ }
+ }
+ };
+
+ const onReplaceQuery = params => {
+ const api = Common.EditorApi.get();
+
+ if (params.find && params.find.length) {
+ api.asc_replaceText(params.find, params.replace, false, params.caseSensitive);
+ }
+ }
+
+ const onReplaceAllQuery = params => {
+ const api = Common.EditorApi.get();
+
+ if (params.find && params.find.length) {
+ api.asc_replaceText(params.find, params.replace, true, params.caseSensitive);
+ }
+ }
+
+ return
+});
+
+const SearchSettingsWithTranslation = withTranslation()(SearchSettings);
+
+export {Search, SearchSettingsWithTranslation as SearchSettings}
diff --git a/apps/presentationeditor/mobile/src/controller/edit/EditLink.jsx b/apps/presentationeditor/mobile/src/controller/edit/EditLink.jsx
index 953e0f2f40..6139aca409 100644
--- a/apps/presentationeditor/mobile/src/controller/edit/EditLink.jsx
+++ b/apps/presentationeditor/mobile/src/controller/edit/EditLink.jsx
@@ -9,8 +9,14 @@ import { EditLink } from '../../view/edit/EditLink';
class EditLinkController extends Component {
constructor (props) {
super(props);
+
+ const api = Common.EditorApi.get();
+
this.onEditLink = this.onEditLink.bind(this);
this.onRemoveLink = this.onRemoveLink.bind(this);
+ this.initLink = this.initLink.bind(this);
+ this.slidesCount = api.getCountPages();
+ this.initLink();
}
closeModal () {
@@ -21,6 +27,58 @@ class EditLinkController extends Component {
}
}
+ initLink() {
+ const api = Common.EditorApi.get();
+ const linkObject = this.props.storeFocusObjects.linkObject;
+ const url = linkObject.get_Value();
+ const tooltip = linkObject.get_ToolTip();
+ const display = linkObject.get_Text();
+
+ this.url = url;
+ this.tooltip = tooltip;
+ this.display = display;
+ this.slideLink = 0;
+ this.slideNum = 0;
+
+ let indAction;
+ let slidesCount;
+ let slideNum;
+
+ if(url === null || url === undefined || url === '') {
+ this.typeLink = 1;
+ }
+ else {
+ indAction = url.indexOf("ppaction://hlink");
+ if(0 == indAction) {
+ if (url == "ppaction://hlinkshowjump?jump=firstslide") {
+ this.slideLink = 2;
+ } else if (url == "ppaction://hlinkshowjump?jump=lastslide") {
+ this.slideLink = 3;
+ }
+ else if (url == "ppaction://hlinkshowjump?jump=nextslide") {
+ this.slideLink = 0;
+ }
+ else if (url == "ppaction://hlinkshowjump?jump=previousslide") {
+ this.slideLink = 1;
+ }
+ else {
+ this.slideLink = 4;
+ slidesCount = api.getCountPages();
+ let mask = "ppaction://hlinksldjumpslide",
+ indSlide = url.indexOf(mask);
+ if (0 == indSlide) {
+ slideNum = parseInt(url.substring(mask.length));
+ if (slideNum < 0) this.slideNum = 0;
+ if (slideNum >= slidesCount) this.slideNum = slidesCount - 1;
+ } else this.slideNum = 0;
+ }
+ this.typeLink = 0
+ } else {
+ this.typeLink = 1;
+ }
+ }
+ }
+
onEditLink(type, linkInfo) {
const api = Common.EditorApi.get();
const { t } = this.props;
@@ -102,13 +160,21 @@ class EditLinkController extends Component {
render () {
return (
)
}
}
-const EditLinkWithTranslation = withTranslation()(EditLinkController);
+const EditLinkWithTranslation = inject("storeFocusObjects")(observer(withTranslation()(EditLinkController)));
export {EditLinkWithTranslation as EditLinkController};
\ No newline at end of file
diff --git a/apps/presentationeditor/mobile/src/controller/settings/PresentationSettings.jsx b/apps/presentationeditor/mobile/src/controller/settings/PresentationSettings.jsx
index 1a10990357..16305cdfbd 100644
--- a/apps/presentationeditor/mobile/src/controller/settings/PresentationSettings.jsx
+++ b/apps/presentationeditor/mobile/src/controller/settings/PresentationSettings.jsx
@@ -6,19 +6,35 @@ class PresentationSettingsController extends Component {
constructor(props) {
super(props);
this.initSlideSize = this.initSlideSize.bind(this);
+ this.onSlideSize = this.onSlideSize.bind(this);
+ this.initSlideSize();
}
initSlideSize() {
if (!this.init) {
const api = Common.EditorApi.get();
+ const slideSizes = [
+ [9144000, 6858000, Asc.c_oAscSlideSZType.SzScreen4x3],
+ [12192000, 6858000, Asc.c_oAscSlideSZType.SzCustom]
+ ];
+
this.props.storePresentationSettings.changeSizeIndex(api.get_PresentationWidth(), api.get_PresentationHeight());
+ this.props.storePresentationSettings.initSlideSizes(slideSizes);
this.init = true;
}
}
onSlideSize(slideSizeArr) {
const api = Common.EditorApi.get();
- api.changeSlideSize(slideSizeArr[0], slideSizeArr[1]);
+
+ let ratio = slideSizeArr[1] / slideSizeArr[0];
+ let currentHeight = this.props.storePresentationSettings.currentPageSize.height;
+ let currentPageSize = {
+ width: (currentHeight || slideSizeArr[1]) / ratio,
+ height: currentHeight
+ };
+ // api.changeSlideSize(slideSizeArr[0], slideSizeArr[1], slideSizeArr[2]);
+ api.changeSlideSize(currentPageSize.width, currentPageSize.height, slideSizeArr[2]);
}
// Color Schemes
diff --git a/apps/presentationeditor/mobile/src/less/app.less b/apps/presentationeditor/mobile/src/less/app.less
index 5d0124ddb9..4297bfb61f 100644
--- a/apps/presentationeditor/mobile/src/less/app.less
+++ b/apps/presentationeditor/mobile/src/less/app.less
@@ -1,12 +1,16 @@
@themeColor: #aa5252;
+@import '../../../../../vendor/framework7-react/node_modules/framework7/less/mixins.less';
+
@import '../../../../common/mobile/resources/less/_mixins.less';
@import '../../../../common/mobile/resources/less/collaboration.less';
@import '../../../../common/mobile/resources/less/common.less';
@import '../../../../common/mobile/resources/less/common-ios.less';
@import '../../../../common/mobile/resources/less/common-material.less';
+@import '../../../../common/mobile/resources/less/icons.less';
@import '../../../../common/mobile/resources/less/dataview.less';
@import '../../../../common/mobile/resources/less/about.less';
+@import '../../../../common/mobile/resources/less/search.less';
@import './app-material.less';
@import './app-ios.less';
@import './icons-ios.less';
diff --git a/apps/presentationeditor/mobile/src/page/main.jsx b/apps/presentationeditor/mobile/src/page/main.jsx
index 5bd43e73bc..e1c094826a 100644
--- a/apps/presentationeditor/mobile/src/page/main.jsx
+++ b/apps/presentationeditor/mobile/src/page/main.jsx
@@ -4,7 +4,9 @@ import { Page, View, Navbar, NavLeft, NavRight, Link, Icon } from 'framework7-re
import EditOptions from '../view/edit/Edit';
import AddOptions from '../view/add/Add';
import Settings from '../view/settings/Settings';
-import CollaborationView from '../../../../common/mobile/lib/view/collaboration/Collaboration.jsx'
+import CollaborationView from '../../../../common/mobile/lib/view/collaboration/Collaboration.jsx';
+import { Device } from '../../../../common/mobile/utils/device';
+import { Search, SearchSettings } from '../controller/Search';
export default class MainPage extends Component {
constructor(props) {
@@ -58,12 +60,17 @@ export default class MainPage extends Component {
this.handleClickToOpenOptions('edit')}>
this.handleClickToOpenOptions('add')}>
+ { Device.phone ? null : }
this.handleClickToOpenOptions('coauth')}>
this.handleClickToOpenOptions('settings')}>
+
{/* Page content */}
+
+
+
{
!this.state.editOptionsVisible ? null :
diff --git a/apps/presentationeditor/mobile/src/store/linkSettings.js b/apps/presentationeditor/mobile/src/store/linkSettings.js
index a6d935ad7d..2eabdba1ed 100644
--- a/apps/presentationeditor/mobile/src/store/linkSettings.js
+++ b/apps/presentationeditor/mobile/src/store/linkSettings.js
@@ -5,68 +5,4 @@ export class storeLinkSettings {
@action canAddHyperlink (value) {
this.canAddLink = value;
}
-
- @observable typeLink;
- @action changeLinkType(value) {
- this.typeLink = value;
- }
-
- @observable slideLink;
- @action changeSlideLink(value) {
- this.slideLink = value;
- }
-
- @observable slideNum;
- @action changeSlideNum(value) {
- this.slideNum = value;
- }
-
- @observable slideName;
- @action changeSlideName(value) {
- this.slideName = value;
- }
-
- initCategory(linkObject) {
- const url = linkObject.get_Value();
- const api = Common.EditorApi.get();
-
- let indAction;
- let slidesCount;
- let slideNum;
-
- if(url === null || url === undefined || url === '') {
- this.changeLinkType(1);
- }
- else {
- indAction = url.indexOf("ppaction://hlink");
- if(0 == indAction) {
- if (url == "ppaction://hlinkshowjump?jump=firstslide") {
- this.changeSlideLink(2);
- } else if (url == "ppaction://hlinkshowjump?jump=lastslide") {
- this.changeSlideLink(3);
- }
- else if (url == "ppaction://hlinkshowjump?jump=nextslide") {
- this.changeSlideLink(0);
- }
- else if (url == "ppaction://hlinkshowjump?jump=previousslide") {
- this.changeSlideLink(1);
- }
- else {
- this.changeSlideLink(4);
- slidesCount = api.getCountPages();
- let mask = "ppaction://hlinksldjumpslide",
- indSlide = url.indexOf(mask);
- if (0 == indSlide) {
- slideNum = parseInt(url.substring(mask.length));
- if (slideNum < 0) this.changeSlideNum(0);
- if (slideNum >= slidesCount) this.changeSlideNum(slidesCount - 1);
- } else this.changeSlideNum(0);
- }
- this.changeLinkType(0);
- } else {
- this.changeLinkType(1);
- }
- }
- }
-
}
diff --git a/apps/presentationeditor/mobile/src/store/presentationSettings.js b/apps/presentationeditor/mobile/src/store/presentationSettings.js
index 6ae95de51f..1fc6c04f8c 100644
--- a/apps/presentationeditor/mobile/src/store/presentationSettings.js
+++ b/apps/presentationeditor/mobile/src/store/presentationSettings.js
@@ -1,26 +1,42 @@
-import {action, observable} from 'mobx';
+import {action, observable, makeObservable} from 'mobx';
export class storePresentationSettings {
- slideSize = [[254, 190.5], [254, 143]];
- @observable slideSizeIndex;
-
- get getSlideSizes() {
- return this.slideSize;
+ constructor() {
+ makeObservable(this, {
+ slideSizes: observable,
+ currentPageSize: observable,
+ slideSizeIndex: observable,
+ allSchemes: observable,
+ changeSizeIndex: action,
+ addSchemes: action,
+ initSlideSizes: action
+ })
}
- @action changeSizeIndex(width, height) {
- this.slideSize.forEach((array, index) => {
- if(Math.abs(array[0] - width) < 0.001 && Math.abs((array[1] - height)) < 0.001) {
+ slideSizes = [];
+ currentPageSize;
+ slideSizeIndex;
+
+ changeSizeIndex(width, height) {
+ this.currentPageSize = {width, height};
+ let ratio = height / width;
+
+ this.slideSizes.forEach((array, index) => {
+ if(Math.abs(array[1] / array[0] - ratio) < 0.001) {
this.slideSizeIndex = index;
}
- })
+ });
+ }
+
+ initSlideSizes(value) {
+ this.slideSizes = value;
}
// Color Schemes
- @observable allSchemes;
+ allSchemes;
- @action addSchemes(arr) {
+ addSchemes(arr) {
this.allSchemes = arr;
}
diff --git a/apps/presentationeditor/mobile/src/view/edit/EditLink.jsx b/apps/presentationeditor/mobile/src/view/edit/EditLink.jsx
index 95edad25e1..e7e0b80e9b 100644
--- a/apps/presentationeditor/mobile/src/view/edit/EditLink.jsx
+++ b/apps/presentationeditor/mobile/src/view/edit/EditLink.jsx
@@ -7,15 +7,14 @@ import {Device} from "../../../../../common/mobile/utils/device";
const PageTypeLink = props => {
const { t } = useTranslation();
const _t = t('View.Edit', {returnObjects: true});
- const storeLinkSettings = props.storeLinkSettings;
- const typeLink = storeLinkSettings.typeLink;
+ const [typeLink, setTypeLink] = useState(props.curType);
return (
- {storeLinkSettings.changeLinkType(1);}}>
- {storeLinkSettings.changeLinkType(0);}}>
+ {setTypeLink(1); props.changeType(1); props.initLink();}}>
+ {setTypeLink(0); props.changeType(0); props.initLink();}}>
)
@@ -25,23 +24,18 @@ const PageLinkTo = props => {
const isAndroid = Device.android;
const { t } = useTranslation();
const _t = t('View.Edit', {returnObjects: true});
- const api = Common.EditorApi.get();
- const slidesCount = api.getCountPages();
- const storeLinkSettings = props.storeLinkSettings;
- const slideLink = storeLinkSettings.slideLink;
- // console.log(slideLink);
- // const slideNum = storeLinkSettings.slideNum;
- // const [stateTypeTo, setTypeTo] = useState(props.curTo);
+ const slidesCount = props.slidesCount;
+ const [stateTypeTo, setTypeTo] = useState(props.curTo);
const changeTypeTo = (type) => {
- storeLinkSettings.changeSlideLink(type);
+ setTypeTo(type);
props.changeTo(type);
};
const [stateNumberTo, setNumberTo] = useState(0);
const changeNumber = (curNumber, isDecrement) => {
- storeLinkSettings.changeSlideLink(4);
+ setTypeTo(4);
let value;
if (isDecrement) {
@@ -51,7 +45,6 @@ const PageLinkTo = props => {
}
setNumberTo(value);
- storeLinkSettings.changeSlideNum(value);
props.changeTo(4, value);
};
@@ -59,10 +52,10 @@ const PageLinkTo = props => {
- {changeTypeTo(0)}}>
- {changeTypeTo(1)}}>
- {changeTypeTo(2)}}>
- {changeTypeTo(3)}}>
+ {changeTypeTo(0)}}>
+ {changeTypeTo(1)}}>
+ {changeTypeTo(2)}}>
+ {changeTypeTo(3)}}>
{!isAndroid && {stateNumberTo + 1}
}
@@ -85,42 +78,44 @@ const PageLinkTo = props => {
const PageLink = props => {
const { t } = useTranslation();
const _t = t('View.Edit', {returnObjects: true});
- const storeFocusObjects = props.storeFocusObjects;
- const storeLinkSettings = props.storeLinkSettings;
- const linkObject = storeFocusObjects.linkObject;
-
- useEffect(() => {
- storeLinkSettings.initCategory(linkObject);
- }, [linkObject]);
+ const url = props.url;
+ const tooltip = props.tooltip;
+ const display = props.display;
+ const slideNum = props.slideNum;
+ const slideLink = props.slideLink;
+ const valueTypeLink = props.typeLink;
- const url = linkObject.get_Value();
- const tooltip = linkObject.get_ToolTip();
- const display = linkObject.get_Text();
- const slideNum = storeLinkSettings.slideNum;
- const slideLink = storeLinkSettings.slideLink;
- const typeLink = storeLinkSettings.typeLink;
-
- if(typeLink === 1) {
- storeLinkSettings.changeSlideName(_t.textNextSlide);
- storeLinkSettings.changeSlideLink(0);
- }
+ const typesDisplayTo = {
+ 0: `${_t.textNextSlide}`,
+ 1: `${_t.textPreviousSlide}`,
+ 2: `${_t.textFirstSlide}`,
+ 3: `${_t.textLastSlide}`,
+ 4: `${_t.textSlide} ${slideNum + 1}`
+ };
+ const [typeLink, setTypeLink] = useState(valueTypeLink);
const textType = typeLink === 1 ? _t.textExternalLink : _t.textSlideInThisPresentation;
+
+ const changeType = (newType) => {
+ setTypeLink(newType);
+ };
+
const [link, setLink] = useState(typeLink !== 0 ? url : '');
+ const [linkTo, setLinkTo] = useState(slideLink);
+ const [displayTo, setDisplayTo] = useState(typesDisplayTo[slideLink]);
+ const [numberTo, setNumberTo] = useState(slideNum);
- const changeTo = (slideLink, number) => {
- switch (slideLink) {
- case 0 : storeLinkSettings.changeSlideName(_t.textNextSlide); break;
- case 1 : storeLinkSettings.changeSlideName(_t.textPreviousSlide); break;
- case 2 : storeLinkSettings.changeSlideName(_t.textFirstSlide); break;
- case 3 : storeLinkSettings.changeSlideName(_t.textLastSlide); break;
- case 4 : storeLinkSettings.changeSlideName(`${_t.textSlide} ${number + 1}`); storeLinkSettings.changeSlideNum(number);
+ const changeTo = (type, number) => {
+ setLinkTo(type);
+ switch (type) {
+ case 0 : setDisplayTo(_t.textNextSlide); break;
+ case 1 : setDisplayTo(_t.textPreviousSlide); break;
+ case 2 : setDisplayTo(_t.textFirstSlide); break;
+ case 3 : setDisplayTo(_t.textLastSlide); break;
+ case 4 : setDisplayTo(`${_t.textSlide} ${number + 1}`); setNumberTo(number); break;
}
- }
+ };
- changeTo(slideLink, slideNum);
-
- const slideName = storeLinkSettings.slideName;
const [screenTip, setScreenTip] = useState(tooltip);
const displayDisabled = display !== false && display === null;
const [stateDisplay, setDisplay] = useState(display !== false ? ((display !== null) ? display : _t.textDefault) : "");
@@ -130,7 +125,9 @@ const PageLink = props => {
{typeLink !== 0 ?
{
value={link}
onChange={(event) => {setLink(event.target.value)}}
/> :
-
}
{
onClick={() => {
props.onEditLink(typeLink, (typeLink === 1 ?
{url: link, display: stateDisplay, tip: screenTip, displayDisabled: displayDisabled } :
- {linkTo: slideLink, numberTo: slideNum, display: stateDisplay, tip: screenTip, displayDisabled: displayDisabled}));
+ {linkTo: linkTo, numberTo: numberTo, display: stateDisplay, tip: screenTip, displayDisabled: displayDisabled}));
}}
/>
{
)
};
-const EditLink = inject("storeFocusObjects", "storeLinkSettings")(observer(PageLink));
-const LinkTo = inject("storeFocusObjects", "storeLinkSettings")(observer(PageLinkTo));
-const TypeLink = inject("storeFocusObjects", "storeLinkSettings")(observer(PageTypeLink));
-
-export {EditLink,
- LinkTo as PageLinkTo,
- TypeLink as PageTypeLink}
\ No newline at end of file
+export {PageLink as EditLink,
+ PageLinkTo,
+ PageTypeLink}
\ No newline at end of file
diff --git a/apps/presentationeditor/mobile/src/view/settings/PresentationSettings.jsx b/apps/presentationeditor/mobile/src/view/settings/PresentationSettings.jsx
index e6da2e8225..3f8ebc7e98 100644
--- a/apps/presentationeditor/mobile/src/view/settings/PresentationSettings.jsx
+++ b/apps/presentationeditor/mobile/src/view/settings/PresentationSettings.jsx
@@ -6,15 +6,13 @@ import { useTranslation } from "react-i18next";
const PagePresentationSettings = props => {
const { t } = useTranslation();
const _t = t("View.Settings", { returnObjects: true });
- props.initSlideSize();
- const store = props.storePresentationSettings;
- const slideSizeArr = store.getSlideSizes;
- const slideSizeIndex = store.slideSizeIndex;
+ const storePresentationSettings = props.storePresentationSettings;
+ const slideSizeArr = storePresentationSettings.slideSizes;
+ const slideSizeIndex = storePresentationSettings.slideSizeIndex;
return (
-
{_t.textSlideSize}
{
props.onSlideSize(slideSizeArr[1])} title={_t.mniSlideWide}>
-
{
const curScheme = props.initPageColorSchemes();
const [stateScheme, setScheme] = useState(curScheme);
const _t = t('View.Settings', {returnObjects: true});
- const store = props.storePresentationSettings;
- const allSchemes = store.allSchemes;
+ const storePresentationSettings = props.storePresentationSettings;
+ const allSchemes = storePresentationSettings.allSchemes;
return (
diff --git a/apps/presentationeditor/mobile/src/view/settings/Settings.jsx b/apps/presentationeditor/mobile/src/view/settings/Settings.jsx
index 094ecb6cf1..43deb4bdf5 100644
--- a/apps/presentationeditor/mobile/src/view/settings/Settings.jsx
+++ b/apps/presentationeditor/mobile/src/view/settings/Settings.jsx
@@ -106,9 +106,9 @@ const SettingsList = withTranslation()(props => {
{navbar}
{!props.inPopover &&
-
-
-
+
+
+
}
diff --git a/apps/spreadsheeteditor/mobile/src/less/icons-material.less b/apps/spreadsheeteditor/mobile/src/less/icons-material.less
index bfaba3ec21..1aad05d4f3 100644
--- a/apps/spreadsheeteditor/mobile/src/less/icons-material.less
+++ b/apps/spreadsheeteditor/mobile/src/less/icons-material.less
@@ -15,7 +15,7 @@
&.icon-search {
width: 22px;
height: 22px;
- .encoded-svg-background('');
+ .encoded-svg-background('');
}
&.icon-edit {
width: 22px;