Merge pull request #1619 from ONLYOFFICE/feature/bug-fixes

Feature/bug fixes

apps/common/mobile/lib/view/Search.jsx

@@ -118,8 +118,6 @@ class SearchView extends Component {
                 on: {
                     search: (bar, curval, prevval) => {
                     },
-                    enable: this.onSearchbarShow.bind(this, true),
-                    disable: this.onSearchbarShow.bind(this, false)
                 }
             });
         }
@@ -183,11 +181,11 @@ class SearchView extends Component {
         }
     }
 
-    onSearchbarShow(isshowed, bar) {
+    // onSearchbarShow(isshowed, bar) {
-        if ( !isshowed ) {
+    //     if ( !isshowed ) {
-            this.$replace.val('');
+    //         // this.$replace.val('');
-        }
+    //     }
-    }
+    // }
 
     onEditorTouchStart(e) {
         console.log('taouch start');
@@ -260,7 +258,7 @@ class SearchView extends Component {
                     </div>
                     <div className="searchbar-inner__center">
                         <div className="searchbar-input-wrap">
-                            <input className="searchbar-input" value={searchQuery} placeholder={_t.textSearch} type="search" maxLength="255"
+                            <input className="searchbar-input" value={searchQuery} placeholder={_t.textSearch} type="text" maxLength="255"
                                 onChange={e => {this.changeSearchQuery(e.target.value)}} />
                             {isIos ? <i className="searchbar-icon" /> : null}
                             <span className="input-clear-button" onClick={() => this.changeSearchQuery('')} />
@@ -268,7 +266,7 @@ class SearchView extends Component {
                         {/* {usereplace || isReplaceAll ?  */}
                             <div className="searchbar-input-wrap" style={usereplace || isReplaceAll ? null : hidden}>
                                 {/* style={!usereplace ? hidden: null} */}
-                                <input value={replaceQuery} placeholder={_t.textReplace} type="search" maxLength="255" id="idx-replace-val"
+                                <input value={replaceQuery} placeholder={_t.textReplace} type="text" 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('')} />

apps/common/mobile/resources/less/colors-table-dark.less

@@ -5,7 +5,7 @@
         --background-primary: #232323;
         --background-secondary: #333;
         --background-tertiary: #131313;
-        --background-menu-divider: fade(#545458, 65%);
+        --background-menu-divider: fade(#545458, 50%);
         --background-button: #333333;
 
         --text-normal: fade(#FFF, 87%);

apps/common/mobile/resources/less/colors-table.less

@@ -10,7 +10,7 @@
     --background-primary: #FFF;
     --background-secondary: #FFF;
     --background-tertiary: #EFF0F5;
-    --background-menu-divider: fade(#3C3C43, 36%);
+    --background-menu-divider: fade(#3C3C43, 15%);
     --background-button: #EFF0F5;
 
     --text-normal: #000000;

apps/common/mobile/resources/less/common-ios.less

@@ -528,7 +528,7 @@
         }
     }
 
-    .searchbar input[type=search] {
+    .searchbar input {
         box-sizing: border-box;
         width: 100%;
         height: 100%;

apps/common/mobile/resources/less/common-material.less

@@ -495,7 +495,7 @@
         }
     }
 
-    .searchbar input[type=search] {
+    .searchbar input {
         box-sizing: border-box;
         width: 100%;
         display: block;
@@ -519,7 +519,7 @@
         .encoded-svg-background('<svg xmlns="http://www.w3.org/2000/svg" fill="@{white}" height="24" viewBox="0 0 24 24" width="24"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/><path d="M0 0h24v24H0z" fill="none"/></svg>');
     }
 
-    .searchbar input[type=search]::placeholder {
+    .searchbar input::placeholder {
         color: @fill-white;
     }
 

apps/common/mobile/resources/less/common.less

@@ -950,6 +950,9 @@ input[type="number"]::-webkit-inner-spin-button {
 
 .popover__functions {
     box-shadow: 0px 10px 100px rgba(0, 0, 0, 0.3);
+    .view {
+        transition: .2s height;
+    }
 }
 
 .target-function-list {

apps/documenteditor/mobile/src/controller/Search.jsx

@@ -80,9 +80,9 @@ class DESearchView extends SearchView {
     }
 
     onSearchbarShow(isshowed, bar) {
-        super.onSearchbarShow(isshowed, bar);
+        // super.onSearchbarShow(isshowed, bar);
-
         const api = Common.EditorApi.get();
+
         if ( isshowed && this.state.searchQuery.length ) {
             const checkboxMarkResults = f7.toggle.get('.toggle-mark-results');
             api.asc_selectSearchingResults(checkboxMarkResults.checked);

apps/documenteditor/mobile/src/controller/settings/Settings.jsx

@@ -41,9 +41,11 @@ const Settings = props => {
     };
 
     const onPrint = () => {
+        const api = Common.EditorApi.get();
+
         closeModal();
         setTimeout(() => {
-            Common.EditorApi.get().asc_Print();
+            api.asc_Print();
         }, 400);
     };
 

apps/documenteditor/mobile/src/less/app.less

@@ -1,6 +1,4 @@
-
 @import '../../../../../vendor/framework7-react/node_modules/framework7/less/mixins.less';
-
 @import '../../../../common/mobile/resources/less/_mixins.less';
 @import '../../../../common/mobile/resources/less/colors-table.less';
 @import '../../../../common/mobile/resources/less/colors-table-dark.less';
@@ -11,6 +9,9 @@
     --toolbar-background: var(--background-primary, #FFF);
     --toolbar-segment: var(--brand-word, #446995);
     --toolbar-icons: var(--brand-word, #446995);
+    --f7-toolbar-border-color: var(--background-menu-divider);
+    --f7-bars-border-color: var(--background-menu-divider);
+    --f7-calendar-row-border-color: var(--background-menu-divider);
 }
 
 .device-android {
@@ -167,8 +168,74 @@
     }
 }
 
-.calendar-sheet, .calendar-popover{
+// Calendar
-    .calendar-day-weekend {
+
-        color: #D25252;
+.calendar {
+    background-color: @background-secondary;
+    .toolbar {
+        background-color: @background-secondary;
+        i.icon.icon-next, i.icon.icon-prev {
+            background-color: @text-normal;
+        }
+        &:after {
+            background-color: @background-menu-divider;
+        }
+    }
+    .calendar-row {
+        padding: 0 16px;
+        &:before {
+            display: none;
+        }
+    }
+    .current-year-value, .current-month-value {
+        color: @text-normal;
+        font-size: 16px;
+    }
+    .calendar-day-selected .calendar-day-number {
+        border: 1px solid transparent;
+        background-color: @brandColor;
+        color: @fill-white;
+    }
+    .calendar-day-today .calendar-day-number {
+        border: 1px solid @brandColor;
+        background-color: transparent;
+    }
+    .calendar-day-weekend .calendar-day-number {
+       color: #D25252;
+    }
+    .calendar-day-number {
+        color: @text-normal;
+        font-size: 14px;
+        font-weight: 500;
+        width: 47px;
+        height: 32px;
+        border-radius: 16px;
+    }
+    .calendar-week-header {
+        margin: 25px 16px 10px 16px;
+        background-color: @background-secondary;
+        color: @text-normal;
+        border-bottom: 1px solid @background-menu-divider;
+        padding-bottom: 5px;
+        height: auto;
+        .calendar-week-day {
+            color: @text-normal;
+            font-size: 12px;
+        }
+    }
+    .calendar-months {
+        margin-bottom: 12px;
+    }
+    .calendar-month-picker-item, .calendar-year-picker-item {
+        color: @text-normal;
+        &:before, &:after {
+            background-color: @background-menu-divider;
+        }
+    }
+    .calendar-month-picker, .calendar-year-picker {
+        background: @background-secondary;
+    }
+    .calendar-month-picker-item-current, .calendar-year-picker-item-current {
+        color: @brandColor;
     }
 }

apps/presentationeditor/mobile/src/controller/Search.jsx

@@ -65,9 +65,9 @@ class PESearchView extends SearchView {
         return {...params, ...searchOptions};
     }
 
-    onSearchbarShow(isshowed, bar) {
+    // onSearchbarShow(isshowed, bar) {
-        super.onSearchbarShow(isshowed, bar);
+    //     super.onSearchbarShow(isshowed, bar);
-    }
+    // }
 }
 
 const Search = withTranslation()(props => {

apps/presentationeditor/mobile/src/view/settings/Settings.jsx

@@ -86,9 +86,12 @@ const SettingsList = inject("storeAppOptions", "storeToolbarSettings")(observer(
     }
 
     const onPrint = () => {
-        closeModal();
         const api = Common.EditorApi.get();
-        api.asc_Print();
+
+        closeModal();
+        setTimeout(() => {
+            api.asc_Print();
+        }, 400);
     };
 
     const showHelp = () => {

apps/spreadsheeteditor/mobile/locale/en.json

@@ -360,7 +360,12 @@
       "txtNotUrl": "This field should be a URL in the format \"http://www.example.com\"",
       "txtSorting": "Sorting",
       "txtSortSelected": "Sort selected",
-      "txtYes": "Yes"
+      "txtYes": "Yes",
+      "textThisRowHint": "Choose only this row of the specified column",
+      "textAllTableHint": "Returns the entire contents of the table or specified table columns including column headers, data and total rows",
+      "textDataTableHint": "Returns the data cells of the table or specified table columns",
+      "textHeadersTableHint": "Returns the column headers for the table or specified table columns",
+      "textTotalsTableHint": "Returns the total rows for the table or specified table columns"
     },
     "Edit": {
       "notcriticalErrorTitle": "Warning",

apps/spreadsheeteditor/mobile/src/controller/CellEditor.jsx

@@ -3,8 +3,10 @@ import React, { useEffect, useState } from 'react';
 import CellEditorView from '../view/CellEditor';
 import { f7 } from 'framework7-react';
 import { Device } from '../../../../common/mobile/utils/device';
+import { useTranslation } from 'react-i18next';
+import {observer, inject} from "mobx-react";
 
-const CellEditor = props => {
+const CellEditor = inject("storeFunctions")(observer(props => {
     useEffect(() => {
         Common.Notifications.on('engineCreated', api => {
             api.asc_registerCallback('asc_onSelectionNameChanged', onApiCellSelection.bind(this));
@@ -13,9 +15,11 @@ const CellEditor = props => {
         });
     }, []);
 
+    const { t } = useTranslation();
     const [cellName, setCellName] = useState('');
     const [stateFunctions, setFunctionshDisabled] = useState(null);
     const [stateFuncArr, setFuncArr] = useState('');
+    const [stateHintArr, setHintArr] = useState('');
 
     const onApiCellSelection = info => {
         setCellName(typeof(info)=='string' ? info : info.asc_getName());
@@ -36,9 +40,62 @@ const CellEditor = props => {
     }
 
     const onFormulaCompleteMenu = funcArr => {
-        setFuncArr(funcArr);
+        const api = Common.EditorApi.get();
+        const storeFunctions = props.storeFunctions;
+        const functions = storeFunctions.functions;
 
         if(funcArr) {
+            funcArr.sort(function (a, b) {
+                let atype = a.asc_getType(),
+                    btype = b.asc_getType(),
+                    aname = a.asc_getName(true).toLocaleUpperCase(),
+                    bname = b.asc_getName(true).toLocaleUpperCase();
+    
+                if (atype === Asc.c_oAscPopUpSelectorType.TableThisRow) return -1;
+                if (btype === Asc.c_oAscPopUpSelectorType.TableThisRow) return 1;
+                if ((atype === Asc.c_oAscPopUpSelectorType.TableColumnName || btype === Asc.c_oAscPopUpSelectorType.TableColumnName) && atype !== btype)
+                    return atype === Asc.c_oAscPopUpSelectorType.TableColumnName ? -1 : 1;
+                if (aname < bname) return -1;
+                if (aname > bname) return 1;
+    
+                return 0;
+            });
+    
+            let hintArr = funcArr.map(item => {
+                let type = item.asc_getType(),
+                    name = item.asc_getName(true),
+                    origName = api.asc_getFormulaNameByLocale(name),
+                    args = functions[origName]?.args || '',
+                    caption = name,
+                    descr = '';
+
+                switch (type) {
+                    case Asc.c_oAscPopUpSelectorType.Func:
+                        descr = functions && functions[origName] ? functions[origName].descr : '';
+                        break;
+                    case Asc.c_oAscPopUpSelectorType.TableThisRow:
+                        descr = t('View.Add.textThisRowHint');
+                        break;
+                    case Asc.c_oAscPopUpSelectorType.TableAll:
+                        descr = t('View.Add.textAllTableHint');
+                        break;
+                    case Asc.c_oAscPopUpSelectorType.TableData:
+                        descr = t('View.Add.textDataTableHint');
+                        break;
+                    case Asc.c_oAscPopUpSelectorType.TableHeaders:
+                        descr = t('View.Add.textHeadersTableHint');
+                        break;
+                    case Asc.c_oAscPopUpSelectorType.TableTotals:
+                        descr = t('View.Add.textTotalsTableHint');
+                        break;
+                }
+
+                return {name, type, descr, caption, args};
+            });
+    
+            setHintArr(hintArr);
+            setFuncArr(funcArr);
+
             f7.popover.open('#idx-functions-list', '#idx-list-target');
         } else {
             f7.popover.close('#idx-functions-list');
@@ -48,6 +105,7 @@ const CellEditor = props => {
     const insertFormula = (name, type) => {
         const api = Common.EditorApi.get();
         api.asc_insertInCell(name, type, false);
+        f7.popover.close('#idx-functions-list');
     }
     
     return (
@@ -56,9 +114,10 @@ const CellEditor = props => {
             stateFunctions={stateFunctions}
             onClickToOpenAddOptions={props.onClickToOpenAddOptions} 
             funcArr={stateFuncArr}
+            hintArr={stateHintArr}
             insertFormula={insertFormula}
         />
     )
-};
+}));
 
 export default CellEditor;

apps/spreadsheeteditor/mobile/src/controller/Encoding.jsx

@@ -8,11 +8,7 @@ class EncodingController extends Component {
     constructor(props) {
         super(props);
 
-        const { t } = this.props;
-        const _t = t("View.Settings", { returnObjects: true });
-
         this.valuesDelimeter = [4, 2, 3, 1, 5];
-        this.namesDelimeter = [_t.txtComma, _t.txtSemicolon, _t.txtColon, _t.txtTab, _t.txtSpace];
         this.onSaveFormat = this.onSaveFormat.bind(this);
         this.closeModal = this.closeModal.bind(this);
         this.state = {
@@ -31,6 +27,9 @@ class EncodingController extends Component {
     }
 
     initEncoding(type, advOptions, mode, formatOptions) {
+        const { t } = this.props;
+        const _t = t("View.Settings", { returnObjects: true });
+        
         if(type === Asc.c_oAscAdvancedOptionsID.CSV) {
             Common.Notifications.trigger('preloader:close');
             Common.Notifications.trigger('preloader:endAction', Asc.c_oAscAsyncActionType['BlockInteraction'], -256, true);
@@ -39,6 +38,7 @@ class EncodingController extends Component {
             this.advOptions = advOptions;
             this.formatOptions = formatOptions;
             this.encodeData = [];
+            this.namesDelimeter = [_t.txtComma, _t.txtSemicolon, _t.txtColon, _t.txtTab, _t.txtSpace];
         
             const recommendedSettings = this.advOptions.asc_getRecommendedSettings();
 

apps/spreadsheeteditor/mobile/src/controller/Search.jsx

@@ -123,9 +123,9 @@ class SESearchView extends SearchView {
     }
 
     onSearchbarShow(isshowed, bar) {
-        super.onSearchbarShow(isshowed, bar);
+        // super.onSearchbarShow(isshowed, bar);
-
         const api = Common.EditorApi.get();
+
         if ( isshowed && this.state.searchQuery.length ) {
             const checkboxMarkResults = f7.toggle.get('.toggle-mark-results');
             api.asc_selectSearchingResults(checkboxMarkResults.checked);

apps/spreadsheeteditor/mobile/src/view/CellEditor.jsx

@@ -1,5 +1,5 @@
 
-import React, { Fragment, useState } from 'react';
+import React, { Fragment, useState, useEffect } from 'react';
 import { Input, View, Button, Link, Popover, ListItem, List, Icon, f7, Page, Navbar, NavRight } from 'framework7-react';
 import {observer, inject} from "mobx-react";
 import { __interactionsRef } from 'scheduler/tracing';
@@ -20,15 +20,26 @@ const FunctionInfo = props => {
     const functionObj = props.functionObj;
     const functionInfo = props.functionInfo;
 
+    useEffect(() => {
+        const functionsList = document.querySelector('#functions-list');
+        const height = functionsList.offsetHeight + 'px';
+
+        functionsList.closest('.view').style.height = '200px';
+
+        return () => {
+            functionsList.closest('.view').style.height = height;
+        }
+    }, []);
+
     return (
         <Page className='page-function-info'>
-            <Navbar title={functionInfo.caption} backLink={_t.textBack}>
+            <Navbar title={functionInfo.caption} backLink={_t.textBack} backLinkUrl='/functions-list/'>
                 <NavRight>
                     <Link text={t('View.Add.textInsert')} onClick={() => props.insertFormula(functionObj.name, functionObj.type)}></Link>
                 </NavRight>
             </Navbar>
             <div className='function-info'>
-                <h3>{`${functionInfo.caption} ${functionInfo.args}`}</h3>
+                <h3>{functionInfo.caption && functionInfo.args ? `${functionInfo.caption} ${functionInfo.args}` : functionInfo.name}</h3>
                 <p>{functionInfo.descr}</p>
             </div>
         </Page>
@@ -36,27 +47,37 @@ const FunctionInfo = props => {
 }
 
 const FunctionsList = props => {
-    const { t } = useTranslation();
     const isPhone = Device.isPhone;
     const functions = props.functions;
     const funcArr = props.funcArr;
+    const hintArr = props.hintArr;
+
+    useEffect(() => {
+        const functionsList = document.querySelector('#functions-list');
+        const height = functionsList.offsetHeight + 'px';
+
+        functionsList.closest('.view').style.height = height;
+    }, [funcArr]);
 
     return (
-        <div className={isPhone ? 'functions-list functions-list__mobile' : 'functions-list'}>
+        <div id="functions-list" className={isPhone ? 'functions-list functions-list__mobile' : 'functions-list'}>
             <List>
-                {funcArr.map((elem, index) => {
+                {funcArr && funcArr.length && funcArr.map((elem, index) => {
                     return (
                         <ListItem key={index} title={elem.name} className="no-indicator" onClick={() => props.insertFormula(elem.name, elem.type)}>
-                            <div slot='after'
+                            {(functions[elem.name] || hintArr[index]?.descr) &&
-                                onClick={(e) => {
+                                <div slot='after'
-                                    e.stopPropagation();
+                                    onClick={(e) => {
-                                    let functionInfo = functions[elem.name];
+                                        e.stopPropagation();
-                                    if(functionInfo) {    
+                                        let functionInfo = functions[elem.name] || hintArr[index];
-                                        f7.views.current.router.navigate('/function-info/', {props: {functionInfo, functionObj: elem, insertFormula: props.insertFormula}});
+
-                                    }
+                                        if(functionInfo) {    
-                                }}>
+                                            f7.views.current.router.navigate('/function-info/', {props: {functionInfo, functionObj: elem, insertFormula: props.insertFormula}});
-                                <Icon icon='icon-info'/>
+                                        }
-                            </div>
+                                    }}>
+                                    <Icon icon='icon-info'/>
+                                </div>
+                            }
                         </ListItem>
                     )
                 })}
@@ -65,8 +86,6 @@ const FunctionsList = props => {
     )
 }
 
-
-
 const CellEditorView = props => {
     const [expanded, setExpanded] = useState(false);
     const isPhone = Device.isPhone;
@@ -78,6 +97,7 @@ const CellEditorView = props => {
     const functions = storeFunctions.functions;
     const isEdit = storeAppOptions.isEdit;
     const funcArr = props.funcArr;
+    const hintArr = props.hintArr;
 
     const expandClick = e => {
         setExpanded(!expanded);
@@ -115,6 +135,7 @@ const CellEditorView = props => {
                                 <FunctionsList 
                                     functions={functions}
                                     funcArr={funcArr} 
+                                    hintArr={hintArr}
                                     insertFormula={props.insertFormula}
                                 />
                             </Page>
@@ -130,6 +151,10 @@ const routes = [
     {
         path: '/function-info/',
         component: FunctionInfo
+    },
+    {
+        path: '/functions-list/',
+        component: FunctionsList
     }
 ];
 

apps/spreadsheeteditor/mobile/src/view/settings/Settings.jsx

@@ -91,9 +91,12 @@ const SettingsList = inject("storeAppOptions")(observer(props => {
     }
 
     const onPrint = () => {
-        closeModal();
         const api = Common.EditorApi.get();
-        api.asc_Print();
+
+        closeModal();
+        setTimeout(() => {
+            api.asc_Print();
+        }, 400);
     };
 
     const showHelp = () => {