Merge pull request #908 from ONLYOFFICE/feature/pr1-last-develop-changes

Feature/pr1 last develop changes

apps/common/mobile/lib/controller/collaboration/Comments.jsx

@@ -558,10 +558,20 @@ class ViewCommentsController extends Component {
                 break;
         }
     }
+
+    showComment (comment) {
+        const api = Common.EditorApi.get();
+
+        api.asc_selectComment(comment.uid);      
+        api.asc_showComment(comment.uid, false);
+    }
+
+
     render() {
         return(
             <Fragment>
-                {this.props.allComments && <ViewComments onCommentMenuClick={this.onCommentMenuClick} onResolveComment={this.onResolveComment} />}
+                {this.props.allComments && <ViewComments onCommentMenuClick={this.onCommentMenuClick} onResolveComment={this.onResolveComment} 
+                    showComment={this.showComment} />}
                 {this.state.isOpenViewCurComments && <ViewCurrentComments opened={this.state.isOpenViewCurComments}
                                                                           closeCurComments={this.closeViewCurComments}
                                                                           onCommentMenuClick={this.onCommentMenuClick}

apps/common/mobile/lib/view/collaboration/Comments.jsx

@@ -626,7 +626,7 @@ const pickLink = (message) => {
 }
 
 // View comments
-const ViewComments = ({storeComments, storeAppOptions, onCommentMenuClick, onResolveComment}) => {
+const ViewComments = ({storeComments, storeAppOptions, onCommentMenuClick, onResolveComment, showComment}) => {
     const { t } = useTranslation();
     const _t = t('Common.Collaboration', {returnObjects: true});
     const isAndroid = Device.android;
@@ -657,7 +657,8 @@ const ViewComments = ({storeComments, storeAppOptions, onCommentMenuClick, onRes
                 <List className='comment-list'>
                     {sortComments.map((comment, indexComment) => {
                         return (
-                            <ListItem key={`comment-${indexComment}`}>
+                            <ListItem key={`comment-${indexComment}`} onClick={e => {
+                                    !e.target.closest('.comment-menu') && !e.target.closest('.reply-menu') ? showComment(comment) : null}}>
                                 <div slot='header' className='comment-header'>
                                     <div className='left'>
                                         {isAndroid && <div className='initials' style={{backgroundColor: `${comment.userColor ? comment.userColor : '#cfcfcf'}`}}>{comment.userInitials}</div>}

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

@@ -355,6 +355,10 @@
         color: red;
     }
 
+    .list-button {
+        position: initial;
+    }
+
     .block-title {
         position: relative;
         overflow: hidden;

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

@@ -103,7 +103,8 @@
 
     .button-fill {
         color: @white;
-        background-color: @themeColor;
+        // background-color: @themeColor;
+        background-color: transparent;
     }
 
     .button-raised {
@@ -116,14 +117,19 @@
     }
 
     .buttons-list {
-        li {
+        ul {
-            margin: 20px 16px;
+            &::before, &::after {
-            color: @white;
+                display: none;
-            border-radius: 2px;
+            }
-            text-transform: uppercase;
+            li {
-            height: 36px;
+                margin: 20px 16px;
-            min-height: 36px;
+                color: @white;
-            font-size: 14px;
+                border-radius: 2px;
+                text-transform: uppercase;
+                height: 36px;
+                min-height: 36px;
+                font-size: 14px;
+            }
         }
     }
 
@@ -142,7 +148,8 @@
         font-size: 14px;
         font-weight: 500;
         border-radius: 2px;
-        margin: 20px 16px;
+        // margin: 20px 16px;
+        margin: 0;
     }
     .button-raised .list-button {
         box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.24);

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

@@ -339,9 +339,9 @@
 
 .buttons-list {
     ul {
-        &::before, &::after {
+        // &::before, &::after {
-            display: none;
+        //     display: none;
-        }
+        // }
         li {
             border: 0;
             font-weight: normal;
@@ -505,6 +505,12 @@
     }
 }
 
+#edit-table-style {
+    .list ul ul {
+        padding-left: 0;
+    }
+}
+
 // Cell styles 
 
 .cell-styles-list {

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

@@ -25,6 +25,7 @@ class ContextMenu extends ContextMenuController {
         this.onApiHideComment = this.onApiHideComment.bind(this);
         this.onApiShowChange = this.onApiShowChange.bind(this);
         this.getUserName = this.getUserName.bind(this);
+        this.ShowModal = this.ShowModal.bind(this);
     }
 
     static closeContextMenu() {
@@ -43,9 +44,13 @@ class ContextMenu extends ContextMenuController {
         api.asc_unregisterCallback('asc_onShowComment', this.onApiShowComment);
         api.asc_unregisterCallback('asc_onHideComment', this.onApiHideComment);
         api.asc_unregisterCallback('asc_onShowRevisionsChange', this.onApiShowChange);
+        Common.Notifications.off('showSplitModal', this.ShowModal);
     }
 
-
+    ShowModal() {
+        this.showSplitModal()
+    }
+    
     onApiShowComment(comments) {
         this.isComments = comments && comments.length > 0;
     }
@@ -199,6 +204,7 @@ class ContextMenu extends ContextMenuController {
         api.asc_registerCallback('asc_onShowComment', this.onApiShowComment);
         api.asc_registerCallback('asc_onHideComment', this.onApiHideComment);
         api.asc_registerCallback('asc_onShowRevisionsChange', this.onApiShowChange);
+        Common.Notifications.on('showSplitModal', this.ShowModal);
     }
 
     initMenuItems() {

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

@@ -199,14 +199,18 @@ const ErrorController = inject('storeAppOptions')(({storeAppOptions, LoadingDocu
             Common.Gateway.reportWarning(id, config.msg);
 
             config.title    = _t.notcriticalErrorTitle;
+        
             config.callback = (btn) => {
                 if (id === Asc.c_oAscError.ID.Warning && btn === 'ok' && (storeAppOptions.canDownload || storeAppOptions.canDownloadOrigin)) {
                     api.asc_DownloadOrigin();
+                } else if(id === Asc.c_oAscError.ID.SplitCellMaxRows ||
+                                 Asc.c_oAscError.ID.SplitCellMaxCols ||
+                                 Asc.c_oAscError.ID.SplitCellRowsDivider && btn === 'ok' && (storeAppOptions.canDownload || storeAppOptions.canDownloadOrigin)) {
+                        Common.Notifications.trigger('showSplitModal',true);
                 }
                 storeAppOptions.changeEditingRights(false);
             };
         }
-
         f7.dialog.create({
             cssClass: 'error-dialog',
             title   : config.title,

apps/documenteditor/mobile/src/view/add/AddImage.jsx

@@ -20,7 +20,7 @@ const PageLinkSettings = props => {
                 >
                 </ListInput>
             </List>
-            <List>
+            <List className="buttons-list">
                 <ListButton className={'button-fill button-raised' + (stateValue.length < 1 ? ' disabled' : '')}
                             title={_t.textInsertImage}
                             onClick={() => {props.onInsertByUrl(stateValue)}}></ListButton>

apps/documenteditor/mobile/src/view/add/AddLink.jsx

@@ -39,7 +39,7 @@ const PageLink = props => {
                     onChange={(event) => {setTip(event.target.value)}}
                 ></ListInput>
             </List>
-            <List>
+            <List className="buttons-list">
                 <ListButton className={'button-fill button-raised' + (stateLink.length < 1 ? ' disabled' : '')} title={_t.textInsert} onClick={() => {
                     props.onInsertLink(stateLink, stateDisplay, stateTip)
                 }}></ListButton>

apps/documenteditor/mobile/src/view/add/AddOther.jsx

@@ -141,7 +141,7 @@ const PageFootnote = props => {
                     )
                 })}
             </List>
-            <List>
+            <List className="buttons-list">
                 <ListButton className={'button-fill button-raised'} title={_t.textInsertFootnote} onClick={() => {
                     props.onInsertFootnote(stateFormat, stateStartAt, stateLocation);
                 }}></ListButton>

apps/documenteditor/mobile/src/view/edit/EditChart.jsx

@@ -446,7 +446,7 @@ const EditChart = props => {
                     onReorder: props.onReorder
                 }}></ListItem>
             </List>
-            <List>
+            <List className="buttons-list">
                 <ListButton title={_t.textRemoveChart} onClick={() => {props.onRemoveChart()}} className='button-red button-fill button-raised'/>
             </List>
         </Fragment>

apps/documenteditor/mobile/src/view/edit/EditHyperlink.jsx

@@ -38,7 +38,7 @@ const EditHyperlink = props => {
                     onChange={(event) => {setTip(event.target.value)}}
                 ></ListInput>
             </List>
-            <List>
+            <List className="buttons-list">
                 <ListButton className={'button-fill button-raised' + (stateLink.length < 1 ? ' disabled' : '')} title={_t.textEditLink} onClick={() => {
                     props.onEditLink(stateLink, stateDisplay, stateTip)
                 }}></ListButton>

apps/documenteditor/mobile/src/view/edit/EditImage.jsx

@@ -156,7 +156,7 @@ const PageLinkSettings = props => {
                 >
                 </ListInput>
             </List>
-            <List>
+            <List className="buttons-list">
                 <ListButton className={'button-fill button-raised' + (stateValue.length < 1 ? ' disabled' : '')} title={_t.textReplaceImage} onClick={() => {onReplace()}}></ListButton>
             </List>
         </Page>
@@ -236,6 +236,10 @@ const PageReorder = props => {
 const EditImage = props => {
     const { t } = useTranslation();
     const _t = t('Edit', {returnObjects: true});
+    const storeFocusObjects = props.storeFocusObjects;
+    const imageObject = storeFocusObjects.imageObject;
+    const pluginGuid = imageObject.asc_getPluginGuid();
+
     return (
         <Fragment>
             <List>
@@ -246,7 +250,7 @@ const EditImage = props => {
                     onOverlap: props.onOverlap,
                     onWrapDistance: props.onWrapDistance
                 }}></ListItem>
-                <ListItem title={_t.textReplace} link='/edit-image-replace/' routeProps={{
+                <ListItem title={_t.textReplace} link='/edit-image-replace/' className={pluginGuid ? 'disabled' : ''} routeProps={{
                     onReplaceByFile: props.onReplaceByFile,
                     onReplaceByUrl: props.onReplaceByUrl
                 }}></ListItem>
@@ -254,7 +258,7 @@ const EditImage = props => {
                     onReorder: props.onReorder
                 }}></ListItem>
             </List>
-            <List>
+            <List className="buttons-list">
                 <ListButton className='button-fill button-raised' title={_t.textActualSize} onClick={() => {props.onDefaulSize()}}/>
                 <ListButton className='button-red button-fill button-raised' title={_t.textRemoveImage} onClick={() => {props.onRemoveImage()}}/>
             </List>

apps/documenteditor/mobile/src/view/edit/EditShape.jsx

@@ -507,6 +507,9 @@ const EditShape = props => {
     const storeShapeSettings = props.storeShapeSettings;
     const shapeObject = props.storeFocusObjects.shapeObject;
     const wrapType = storeShapeSettings.getWrapType(shapeObject);
+    
+    let disableRemove = !!props.storeFocusObjects.paragraphObject;
+
     return (
         <Fragment>
             <List>
@@ -536,8 +539,8 @@ const EditShape = props => {
                     onReorder: props.onReorder
                 }}></ListItem>
             </List>
-            <List>
+            <List className="buttons-list">
-                <ListButton title={_t.textRemoveShape} onClick={() => {props.onRemoveShape()}} className='button-red button-fill button-raised'/>
+                <ListButton title={_t.textRemoveShape} onClick={() => {props.onRemoveShape()}} className={`button-red button-fill button-raised${disableRemove ? ' disabled' : ''}`} />
             </List>
         </Fragment>
     )

apps/documenteditor/mobile/src/view/edit/EditTable.jsx

@@ -173,40 +173,25 @@ const PageWrap = props => {
 
 // Style
 
-const StyleTemplates = inject("storeFocusObjects")(observer(({templates, onStyleClick, storeFocusObjects}) => {
+const StyleTemplates = inject("storeFocusObjects","storeTableSettings")(observer(({onStyleClick,storeTableSettings,storeFocusObjects}) => {
     const tableObject = storeFocusObjects.tableObject;
     const styleId = tableObject && tableObject.get_TableStyle();
     const [stateId, setId] = useState(styleId);
-
+    const styles =  storeTableSettings.styles;
-    const widthContainer = document.querySelector(".page-content").clientWidth;
-    const columns = parseInt((widthContainer - 47) / 70); // magic
-    const styles = [];
-    let row = -1;
-    templates.forEach((style, index) => {
-        if (0 == index % columns) {
-            styles.push([]);
-            row++
-        }
-        styles[row].push(style);
-    });
 
     return (
         <div className="dataview table-styles">
-            {styles.map((row, rowIndex) => {
+            <ul className="row">
-                return (
+                    {styles.map((style, index) => {
-                    <div className="row" key={`row-${rowIndex}`}>
+                        return (
-                        {row.map((style, index)=>{
+                            <li key={index}
-                            return(
+                                className={style.templateId === stateId ? 'active' : ''}
-                                <div key={`${rowIndex}-${index}`}
+                                onClick={() => {onStyleClick(style.templateId); setId(style.templateId)}}>
-                                     className={style.templateId === stateId ? 'active' : ''}
+                                <img src={style.imageUrl}/>
-                                     onClick={() => {onStyleClick(style.templateId); setId(style.templateId)}}>
+                            </li>
-                                    <img src={style.imageUrl} />
+                        )
-                                </div>
+                    })}
-                            )
+            </ul>
-                        })}
-                    </div>
-                )
-            })}
         </div>
     )
 }));
@@ -560,7 +545,9 @@ const EditTable = props => {
                         </a>
                     </Row>
                 </ListItem>
-                <ListButton title={_t.textRemoveTable} onClick={() => {props.onRemoveTable()}} className='button-red button-fill button-raised'></ListButton>
+                <List className="buttons-list">
+                    <ListButton title={_t.textRemoveTable} onClick={() => {props.onRemoveTable()}} className='button-red button-fill button-raised'></ListButton>
+                </List>
             </List>
             <List>
                 <ListItem title={_t.textTableOptions} link='/edit-table-options/' routeProps={{

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

@@ -18,8 +18,6 @@ const ErrorController = inject('storeAppOptions')(({storeAppOptions, LoadingDocu
     });
 
     const onError = (id, level, errData) => {
-        if (id === -82) return; // format error
-
         if (id === Asc.c_oAscError.ID.LoadingScriptError) {
             f7.notification.create({
                 title: _t.criticalErrorTitle,

apps/presentationeditor/mobile/src/view/add/AddImage.jsx

@@ -20,7 +20,7 @@ const PageLinkSettings = props => {
                 >
                 </ListInput>
             </List>
-            <List>
+            <List className="buttons-list">
                 <ListButton className={'button-fill button-raised' + (stateValue.length < 1 ? ' disabled' : '')}
                             title={_t.textInsertImage}
                             onClick={() => {props.onInsertByUrl(stateValue)}}></ListButton>

apps/presentationeditor/mobile/src/view/add/AddLink.jsx

@@ -143,7 +143,7 @@ const PageLink = props => {
                 />
             </List>
             <List className="buttons-list">
-                <ListItem title={_t.textInsert} href="#"
+                <ListButton title={_t.textInsert}
                             className={`button-fill button-raised${typeLink === 1 && link.length < 1 && ' disabled'}`}
                             onClick={() => {
                                 props.onInsertLink(typeLink, (typeLink === 1 ?

apps/presentationeditor/mobile/src/view/edit/EditChart.jsx

@@ -1,6 +1,6 @@
 import React, {Fragment, useState} from 'react';
 import {observer, inject} from "mobx-react";
-import {List, ListItem, ListButton, Icon, Row, Page, Navbar, BlockTitle, Toggle, Range, Link, Tabs, Tab} from 'framework7-react';
+import {List, ListItem, ListButton, Icon, Row, Page, Navbar, BlockTitle, Toggle, Range, Link, Tabs, Tab, NavRight} from 'framework7-react';
 import { useTranslation } from 'react-i18next';
 import {Device} from '../../../../../common/mobile/utils/device';
 import {CustomColorPicker, ThemeColorPalette} from "../../../../../common/mobile/lib/component/ThemeColorPalette.jsx";
@@ -24,7 +24,15 @@ const PageCustomFillColor = props => {
 
     return (
         <Page>
-            <Navbar title={_t.textCustomColor} backLink={_t.textBack} />
+            <Navbar title={_t.textCustomColor} backLink={_t.textBack}>
+                {Device.phone &&
+                    <NavRight>
+                        <Link sheetClose='#edit-sheet'>
+                            <Icon icon='icon-expand-down'/>
+                        </Link>
+                    </NavRight>
+                }
+            </Navbar>
             <CustomColorPicker currentColor={fillColor} onAddNewColor={onAddNewColor}/>
         </Page>
     )
@@ -84,7 +92,15 @@ const PageCustomBorderColor = props => {
 
     return (
         <Page>
-            <Navbar title={_t.textCustomColor} backLink={_t.textBack} />
+            <Navbar title={_t.textCustomColor} backLink={_t.textBack}>
+                {Device.phone &&
+                    <NavRight>
+                        <Link sheetClose='#edit-sheet'>
+                            <Icon icon='icon-expand-down'/>
+                        </Link>
+                    </NavRight>
+                }
+            </Navbar>
             <CustomColorPicker currentColor={borderColor} onAddNewColor={onAddNewColor}/>
         </Page>
     )
@@ -114,7 +130,15 @@ const PageBorderColor = props => {
 
     return (
         <Page>
-            <Navbar title={_t.textColor} backLink={_t.textBack} />
+            <Navbar title={_t.textColor} backLink={_t.textBack}>
+                {Device.phone &&
+                    <NavRight>
+                        <Link sheetClose='#edit-sheet'>
+                            <Icon icon='icon-expand-down'/>
+                        </Link>
+                    </NavRight>
+                }
+            </Navbar>
             <ThemeColorPalette changeColor={changeColor} curColor={borderColor} customColors={customColors}/>
             <List>
                 <ListItem title={_t.textAddCustomColor} link={'/edit-chart-custom-border-color/'} routeProps={{
@@ -135,8 +159,6 @@ const PageStyle = props => {
     const styles = storeChartSettings.styles;
     const shapeObject = props.storeFocusObjects.shapeObject;
     const chartStyles = storeChartSettings.chartStyles;
-    // console.log(chartStyles, curType);
-    // console.log(Asc.c_oAscChartTypeSettings.comboBarLine, Asc.c_oAscChartTypeSettings.comboBarLineSecondary, Asc.c_oAscChartTypeSettings.comboAreaBar, Asc.c_oAscChartTypeSettings.comboCustom);
 
     let borderSize, borderType, borderColor;
 
@@ -173,6 +195,13 @@ const PageStyle = props => {
                     <Link key={"pe-link-chart-fill"} tabLink={"#edit-chart-fill"}>{_t.textFill}</Link>
                     <Link key={"pe-link-chart-border"} tabLink={"#edit-chart-border"}>{_t.textBorder}</Link>
                 </div>
+                {Device.phone &&
+                    <NavRight>
+                        <Link sheetClose='#edit-sheet'>
+                            <Icon icon='icon-expand-down'/>
+                        </Link>
+                    </NavRight>
+                }
             </Navbar>
             <Tabs animated>
                 <Tab key={"pe-tab-chart-type"} id={"edit-chart-type"} className="page-content no-padding-top dataview" tabActive={true}>
@@ -262,7 +291,15 @@ const PageReorder = props => {
 
     return (
         <Page>
-            <Navbar title={_t.textReorder} backLink={_t.textBack} />
+            <Navbar title={_t.textReorder} backLink={_t.textBack}>
+                {Device.phone &&
+                    <NavRight>
+                        <Link sheetClose='#edit-sheet'>
+                            <Icon icon='icon-expand-down'/>
+                        </Link>
+                    </NavRight>
+                }
+            </Navbar>
             <List>
                 <ListItem title={_t.textBringToForeground} onClick={() => {props.onReorder('all-up')}} link='#' className='no-indicator'>
                     <Icon slot="media" icon="icon-move-foreground"></Icon>
@@ -293,7 +330,15 @@ const PageAlign = props => {
 
     return (
         <Page>
-            <Navbar title={_t.textAlign} backLink={_t.textBack} />
+            <Navbar title={_t.textAlign} backLink={_t.textBack}>
+                {Device.phone &&
+                    <NavRight>
+                        <Link sheetClose='#edit-sheet'>
+                            <Icon icon='icon-expand-down'/>
+                        </Link>
+                    </NavRight>
+                }
+            </Navbar>
             <List>
                 <ListItem title={_t.textAlignLeft} link='#' onClick={() => {props.onAlign('align-left')}} className='no-indicator'>
                     <Icon slot="media" icon="icon-align-left"></Icon>
@@ -329,6 +374,7 @@ const PageAlign = props => {
 const EditChart = props => {
     const { t } = useTranslation();
     const _t = t('View.Edit', {returnObjects: true});
+    
     return (
         <Fragment>
             <List>
@@ -346,7 +392,7 @@ const EditChart = props => {
                     onAlign: props.onAlign
                 }}></ListItem>
             </List>
-            <List>
+            <List className="buttons-list">
                 <ListButton title={_t.textRemoveChart} onClick={() => {props.onRemoveChart()}} className='button-red button-fill button-raised'/>
             </List>
         </Fragment>

apps/presentationeditor/mobile/src/view/edit/EditImage.jsx

@@ -1,6 +1,6 @@
 import React, {Fragment, useState} from 'react';
 import {observer, inject} from "mobx-react";
-import {f7, Page, Navbar, List, ListItem, Row, BlockTitle, Link, Toggle, Icon, View, NavRight, ListItemCell, Range, Button, Segmented, Tab, Tabs, ListInput, ListButton} from 'framework7-react';
+import {f7, Page, Navbar, List, ListItem, Row, BlockTitle, Link, Toggle, Icon, View, ListItemCell, Range, Button, Segmented, Tab, Tabs, ListInput, ListButton, NavRight} from 'framework7-react';
 import { ThemeColorPalette, CustomColorPicker } from '../../../../../common/mobile/lib/component/ThemeColorPalette.jsx';
 import { useTranslation } from 'react-i18next';
 import {Device} from '../../../../../common/mobile/utils/device';
@@ -8,11 +8,14 @@ import {Device} from '../../../../../common/mobile/utils/device';
 const EditImage = props => {
     const { t } = useTranslation();
     const _t = t('View.Edit', {returnObjects: true});
+    const storeFocusObjects = props.storeFocusObjects;
+    const imageObject = storeFocusObjects.imageObject;
+    const pluginGuid = imageObject.asc_getPluginGuid();
 
     return (
         <Fragment>
             <List>
-                <ListItem title={_t.textReplace} link="/edit-replace-image/" routeProps={{
+                <ListItem title={_t.textReplace} link="/edit-replace-image/" className={pluginGuid ? 'disabled' : ''} routeProps={{
                     onReplaceByFile: props.onReplaceByFile,
                     onReplaceByUrl: props.onReplaceByUrl
                 }}></ListItem>
@@ -24,8 +27,8 @@ const EditImage = props => {
                 }}></ListItem>
             </List>
             <List className="buttons-list">
-                <ListItem href="#" className="button button-raised button-fill" onClick={props.onDefaultSize}>{_t.textActualSize}</ListItem>
+                <ListButton className="button-fill button-raised" onClick={props.onDefaultSize}>{_t.textActualSize}</ListButton>
-                <ListItem href="#" className="button button-raised button-red" onClick={props.onRemoveImage}>{_t.textRemoveImage}</ListItem>
+                <ListButton className="button-red button-fill button-raised" onClick={props.onRemoveImage}>{_t.textRemoveImage}</ListButton>
             </List>
         </Fragment>
     )
@@ -43,7 +46,15 @@ const PageReorder = props => {
 
     return (
         <Page>
-            <Navbar title={_t.textReorder} backLink={_t.textBack} />
+            <Navbar title={_t.textReorder} backLink={_t.textBack}>
+                {Device.phone &&
+                    <NavRight>
+                        <Link sheetClose='#edit-sheet'>
+                            <Icon icon='icon-expand-down'/>
+                        </Link>
+                    </NavRight>
+                }
+            </Navbar>
             <List>
                 <ListItem title={_t.textBringToForeground} link='#' onClick={() => {props.onReorder('all-up')}} className='no-indicator'>
                     <Icon slot="media" icon="icon-move-foreground"></Icon>
@@ -74,7 +85,15 @@ const PageAlign = props => {
 
     return (
         <Page>
-            <Navbar title={_t.textAlign} backLink={_t.textBack} />
+            <Navbar title={_t.textAlign} backLink={_t.textBack}>
+                {Device.phone &&
+                    <NavRight>
+                        <Link sheetClose='#edit-sheet'>
+                            <Icon icon='icon-expand-down'/>
+                        </Link>
+                    </NavRight>
+                }
+            </Navbar>
             <List>
                 <ListItem title={_t.textAlignLeft} link='#' onClick={() => {props.onAlign('align-left')}} className='no-indicator'>
                     <Icon slot="media" icon="icon-align-left"></Icon>
@@ -119,7 +138,15 @@ const PageReplace = props => {
 
     return (
         <Page className="images">
-            <Navbar title={_t.textReplace} backLink={_t.textBack} />
+            <Navbar title={_t.textReplace} backLink={_t.textBack}>
+                {Device.phone &&
+                    <NavRight>
+                        <Link sheetClose='#edit-sheet'>
+                            <Icon icon='icon-expand-down'/>
+                        </Link>
+                    </NavRight>
+                }
+            </Navbar>
             <List>
                 <ListItem title={_t.textPictureFromLibrary} onClick={() => {props.onReplaceByFile()}}>
                     <Icon slot="media" icon="icon-link"></Icon>
@@ -152,7 +179,15 @@ const PageLinkSettings = props => {
     };
     return (
         <Page>
-            <Navbar title={_t.textLinkSettings} backLink={_t.textBack} />
+            <Navbar title={_t.textLinkSettings} backLink={_t.textBack}>
+                {Device.phone &&
+                    <NavRight>
+                        <Link sheetClose='#edit-sheet'>
+                            <Icon icon='icon-expand-down'/>
+                        </Link>
+                    </NavRight>
+                }
+            </Navbar>
             <BlockTitle>{_t.textAddress}</BlockTitle>
             <List>
                 <ListInput

apps/presentationeditor/mobile/src/view/edit/EditLink.jsx

@@ -1,6 +1,6 @@
 import React, {useState, useEffect} from 'react';
 import {observer, inject} from "mobx-react";
-import {f7, List, ListItem, Page, Navbar, Icon, ListButton, ListInput, Segmented, Button} from 'framework7-react';
+import {f7, List, ListItem, Page, Navbar, Icon, ListButton, ListInput, Segmented, Button, NavRight, Link} from 'framework7-react';
 import { useTranslation } from 'react-i18next';
 import {Device} from "../../../../../common/mobile/utils/device";
 
@@ -17,7 +17,15 @@ const PageTypeLink = props => {
 
     return (
         <Page>
-            <Navbar title={_t.textLinkType} backLink={_t.textBack}/>
+            <Navbar title={_t.textLinkType} backLink={_t.textBack}>
+                {Device.phone &&
+                    <NavRight>
+                        <Link sheetClose='#edit-sheet'>
+                            <Icon icon='icon-expand-down'/>
+                        </Link>
+                    </NavRight>
+                }
+            </Navbar>
             <List>
                 <ListItem title={_t.textExternalLink} radio checked={typeLink === 1} onClick={() => {setTypeLink(1); props.changeType(1);}}></ListItem>
                 <ListItem title={_t.textSlideInThisPresentation} radio checked={typeLink === 0} onClick={() => {setTypeLink(0); props.changeType(0);}}></ListItem>
@@ -62,7 +70,15 @@ const PageLinkTo = props => {
 
     return (
         <Page>
-            <Navbar title={_t.textLinkTo} backLink={_t.textBack}/>
+            <Navbar title={_t.textLinkTo} backLink={_t.textBack}>
+                {Device.phone &&
+                    <NavRight>
+                        <Link sheetClose='#edit-sheet'>
+                            <Icon icon='icon-expand-down'/>
+                        </Link>
+                    </NavRight>
+                }
+            </Navbar>
             <List>
                 <ListItem title={_t.textNextSlide} radio checked={stateTypeTo === 0} onClick={() => {changeTypeTo(0)}}></ListItem>
                 <ListItem title={_t.textPreviousSlide} radio checked={stateTypeTo === 1} onClick={() => {changeTypeTo(1)}}></ListItem>
@@ -134,7 +150,15 @@ const PageLink = props => {
 
     return (
         <Page>
-            <Navbar title={_t.textLink} backLink={_t.textBack}/>
+            <Navbar title={_t.textLink} backLink={_t.textBack}>
+                {Device.phone &&
+                    <NavRight>
+                        <Link sheetClose='#edit-sheet'>
+                            <Icon icon='icon-expand-down'/>
+                        </Link>
+                    </NavRight>
+                }
+            </Navbar>
             <List inlineLabels className='inputs-list'>
                 <ListItem link={'/edit-link-type/'} title={_t.textLinkType} after={textType} routeProps={{
                     changeType,
@@ -171,7 +195,7 @@ const PageLink = props => {
                 />
             </List>
             <List className="buttons-list">
-                <ListItem title={_t.textEditLink} href="#"
+                <ListButton title={_t.textEditLink}
                             className={`button-fill button-raised${typeLink === 1 && link.length < 1 && ' disabled'}`}
                             onClick={() => {
                                 props.onEditLink(typeLink, (typeLink === 1 ?
@@ -179,8 +203,8 @@ const PageLink = props => {
                                     {linkTo: linkTo, numberTo: numberTo, display: stateDisplay, tip: screenTip, displayDisabled: displayDisabled}));
                             }}
                 />
-                <ListItem title={_t.textRemoveLink} href="#"
+                <ListButton title={_t.textRemoveLink}
-                            className={`button-fill button-red`}
+                            className={`button-red button-fill button-raised`}
                             onClick={() => {
                                 props.onRemoveLink()
                             }}

apps/presentationeditor/mobile/src/view/edit/EditShape.jsx

@@ -1,6 +1,6 @@
 import React, {Fragment, useState} from 'react';
 import {observer, inject} from "mobx-react";
-import {f7, Page, Navbar, List, ListItem, Row, BlockTitle, Link, Toggle, Icon, View, NavRight, ListItemCell, Range, Button, Segmented, Tab, Tabs} from 'framework7-react';
+import {f7, Page, Navbar, List, ListItem, Row, BlockTitle, Link, Toggle, Icon, View, NavRight, ListItemCell, Range, Button, Segmented, Tab, Tabs, ListButton} from 'framework7-react';
 import { ThemeColorPalette, CustomColorPicker } from '../../../../../common/mobile/lib/component/ThemeColorPalette.jsx';
 import { useTranslation } from 'react-i18next';
 import {Device} from '../../../../../common/mobile/utils/device';
@@ -12,6 +12,8 @@ const EditShape = props => {
     const shapeObject = storeFocusObjects.shapeObject;
     const canFill = shapeObject && shapeObject.get_CanFill();
 
+    let disableRemove = !!props.storeFocusObjects.paragraphObject;
+
     return (
         <Fragment>
             <List>
@@ -39,7 +41,7 @@ const EditShape = props => {
                 }}></ListItem>
             </List>
             <List className="buttons-list">
-                <ListItem href="#" className="button button-raised button-red" onClick={props.onRemoveShape}>{_t.textRemoveShape}</ListItem>
+                <ListButton className={`button-red button-fill button-raised${disableRemove ? ' disabled' : ''}`} onClick={props.onRemoveShape}>{_t.textRemoveShape}</ListButton>
             </List>
         </Fragment>
     )

apps/presentationeditor/mobile/src/view/edit/EditSlide.jsx

@@ -1,6 +1,6 @@
 import React, {Fragment, useState} from 'react';
 import {observer, inject} from "mobx-react";
-import {f7, Page, Navbar, List, ListItem, Row, BlockTitle, Link, Toggle, Icon, View, NavRight, ListItemCell, Range, Button, Segmented} from 'framework7-react';
+import {f7, Page, Navbar, List, ListItem, Row, BlockTitle, Link, Toggle, Icon, View, NavRight, ListItemCell, Range, Button, Segmented, ListButton} from 'framework7-react';
 import { ThemeColorPalette, CustomColorPicker } from '../../../../../common/mobile/lib/component/ThemeColorPalette.jsx';
 import { useTranslation } from 'react-i18next';
 import {Device} from '../../../../../common/mobile/utils/device';
@@ -32,8 +32,8 @@ const EditSlide = props => {
                 }}></ListItem>
             </List>
             <List className="buttons-list">
-                <ListItem href="#" className="button button-raised button-fill" onClick={props.onDuplicateSlide}>{_t.textDuplicateSlide}</ListItem>
+                <ListButton className="button-fill button-raised" onClick={props.onDuplicateSlide}>{_t.textDuplicateSlide}</ListButton>
-                <ListItem href="#" className="button button-raised button-red" onClick={props.onRemoveSlide}>{_t.textDeleteSlide}</ListItem>
+                <ListButton className="button-red button-fill button-raised" onClick={props.onRemoveSlide}>{_t.textDeleteSlide}</ListButton>
             </List>
         </Fragment>
     )
@@ -48,17 +48,16 @@ const PageTheme = props => {
     const defaultThemes = arrayThemes[0];
     const docThemes = arrayThemes[1];
 
-    console.log(arrayThemes);
-   
-    // console.log(slideThemeIndex);
-    // console.log(arrayThemes);
-  
     return (
         <Page className="slide-theme">
             <Navbar title={_t.textTheme} backLink={_t.textBack}>
-                <NavRight>
+                {Device.phone &&
-                    <Link icon='icon-expand-down' sheetClose></Link>
+                    <NavRight>
-                </NavRight>
+                        <Link sheetClose='#edit-sheet'>
+                            <Icon icon='icon-expand-down'/>
+                        </Link>
+                    </NavRight>
+                }
             </Navbar>
             {arrayThemes.length ? (
                 <List className="slide-theme__list">
@@ -99,15 +98,16 @@ const PageLayout = props => {
     const arrayLayouts = storeSlideSettings.arrayLayouts;
     const slideLayoutIndex = storeSlideSettings.slideLayoutIndex;
    
-    // console.log(slideLayoutIndex);
-    // console.log(arrayLayouts);
-   
     return (
         <Page className="slide-layout">
             <Navbar title={_t.textLayout} backLink={_t.textBack}>
-                <NavRight>
+                {Device.phone &&
-                    <Link icon='icon-expand-down' sheetClose></Link>
+                    <NavRight>
-                </NavRight>
+                        <Link sheetClose='#edit-sheet'>
+                            <Icon icon='icon-expand-down'/>
+                        </Link>
+                    </NavRight>
+                }
             </Navbar>
             {arrayLayouts.length ? (
                 <List className="slide-layout__list">
@@ -234,9 +234,13 @@ const PageTransition = props => {
     return (
         <Page className="slide-transition">
             <Navbar title={_t.textTransition} backLink={_t.textBack}>
-                <NavRight>
+                {Device.phone &&
-                    <Link icon='icon-expand-down' sheetClose></Link>
+                    <NavRight>
-                </NavRight>
+                        <Link sheetClose='#edit-sheet'>
+                            <Icon icon='icon-expand-down'/>
+                        </Link>
+                    </NavRight>
+                }
             </Navbar>
             <List>
                 <ListItem link="/effect/" title={_t.textEffect} after={nameEffect} routeProps={{
@@ -322,7 +326,15 @@ const PageEffect = props => {
 
     return (
         <Page className="style-effect">
-            <Navbar title={_t.textEffect} backLink={_t.textBack} />
+            <Navbar title={_t.textEffect} backLink={_t.textBack}>
+                {Device.phone &&
+                    <NavRight>
+                        <Link sheetClose='#edit-sheet'>
+                            <Icon icon='icon-expand-down'/>
+                        </Link>
+                    </NavRight>
+                }
+            </Navbar>
             {_arrEffect.length ? (
                 <List mediaList>
                     {_arrEffect.map((elem, index) => {
@@ -354,9 +366,13 @@ const PageType= props => {
     return (
         <Page className="style-type">
             <Navbar title={_t.textType} backLink={_t.textBack}>
-                <NavRight>
+                {Device.phone &&
-                    <Link icon='icon-expand-down' sheetClose></Link>
+                    <NavRight>
-                </NavRight>
+                        <Link sheetClose='#edit-sheet'>
+                            <Icon icon='icon-expand-down'/>
+                        </Link>
+                    </NavRight>
+                }
             </Navbar>
             {_arrCurrentEffectTypes.length ? (
                 <List mediaList>
@@ -406,9 +422,13 @@ const PageFillColor = props => {
     return (
         <Page>
             <Navbar title={_t.textFill} backLink={_t.textBack}>
-                <NavRight>
+                {Device.phone &&
-                    <Link icon='icon-expand-down' sheetClose></Link>
+                    <NavRight>
-                </NavRight>
+                        <Link sheetClose='#edit-sheet'>
+                            <Icon icon='icon-expand-down'/>
+                        </Link>
+                    </NavRight>
+                }
             </Navbar>
             <ThemeColorPalette changeColor={changeColor} curColor={fillColor} customColors={customColors} transparent={true} />
             <List>
@@ -439,7 +459,15 @@ const PageCustomFillColor = props => {
 
     return (
         <Page>
-            <Navbar title={_t.textCustomColor} backLink={_t.textBack} />
+            <Navbar title={_t.textCustomColor} backLink={_t.textBack}>
+                {Device.phone &&
+                    <NavRight>
+                        <Link sheetClose='#edit-sheet'>
+                            <Icon icon='icon-expand-down'/>
+                        </Link>
+                    </NavRight>
+                }
+            </Navbar>
             <CustomColorPicker currentColor={fillColor} onAddNewColor={onAddNewColor} />
         </Page>
     )

apps/presentationeditor/mobile/src/view/edit/EditTable.jsx

@@ -1,51 +1,36 @@
 import React, {Fragment, useState} from 'react';
 import {observer, inject} from "mobx-react";
-import {f7, Page, Navbar, List, ListItem, ListButton, Row, BlockTitle, Range, Toggle, Icon, Link, Tabs, Tab} from 'framework7-react';
+import {f7, Page, Navbar, List, ListItem, ListButton, Row, BlockTitle, Range, Toggle, Icon, Link, Tabs, Tab, NavRight} from 'framework7-react';
 import { useTranslation } from 'react-i18next';
 import {Device} from '../../../../../common/mobile/utils/device';
 import {CustomColorPicker, ThemeColorPalette} from "../../../../../common/mobile/lib/component/ThemeColorPalette.jsx";
 
 // Style
 
-const StyleTemplates = inject("storeFocusObjects")(observer(({templates, onStyleClick, storeFocusObjects}) => {
+const StyleTemplates = inject("storeFocusObjects","storeTableSettings")(observer(({onStyleClick,storeTableSettings,storeFocusObjects}) => {
     const tableObject = storeFocusObjects.tableObject;
     const styleId = tableObject ? tableObject.get_TableStyle() : null;
     const [stateId, setId] = useState(styleId);
-
+    const styles =  storeTableSettings.styles;
-    const widthContainer = document.querySelector(".page-content").clientWidth;
-    const columns = parseInt((widthContainer - 47) / 70); // magic
-    const styles = [];
-    let row = -1;
-    templates.forEach((style, index) => {
-        if (0 == index % columns) {
-            styles.push([]);
-            row++
-        }
-        styles[row].push(style);
-    });
 
     if (!tableObject && Device.phone) {
         $$('.sheet-modal.modal-in').length > 0 && f7.sheet.close();
         return null;
     }
-
+            
     return (
         <div className="dataview table-styles">
-            {styles.map((row, rowIndex) => {
+            <ul className="row">
-                return (
+                    {styles.map((style, index) => {
-                    <div className="row" key={`row-${rowIndex}`}>
+                        return (
-                        {row.map((style, index)=>{
+                            <li key={index}
-                            return(
+                                className={style.templateId === stateId ? 'active' : ''}
-                                <div key={`${rowIndex}-${index}`}
+                                onClick={() => {onStyleClick(style.templateId); setId(style.templateId)}}>
-                                    className={style.templateId === stateId ? 'active' : ''}
+                                <img src={style.imageUrl}/>
-                                    onClick={() => {onStyleClick(style.templateId); setId(style.templateId)}}>
+                            </li>
-                                    <img src={style.imageUrl} />
+                        )
-                                </div>
+                    })}
-                            )
+                </ul>
-                        })}
-                    </div>
-                )
-            })}
         </div>
     )
 }));
@@ -68,7 +53,15 @@ const PageStyleOptions = props => {
 
     return (
         <Page>
-            <Navbar title={_t.textOptions} backLink={_t.textBack}/>
+            <Navbar title={_t.textOptions} backLink={_t.textBack}>
+                {Device.phone &&
+                    <NavRight>
+                        <Link sheetClose='#edit-sheet'>
+                            <Icon icon='icon-expand-down'/>
+                        </Link>
+                    </NavRight>
+                }
+            </Navbar>
             <List>
                 <ListItem title={_t.textHeaderRow}>
                     <Toggle checked={isFirstRow} onChange={() => {props.onCheckTemplateChange(tableLook, 0, !isFirstRow)}}/>
@@ -113,7 +106,15 @@ const PageCustomFillColor = props => {
 
     return(
         <Page>
-            <Navbar title={_t.textCustomColor} backLink={_t.textBack} />
+            <Navbar title={_t.textCustomColor} backLink={_t.textBack}>
+                {Device.phone &&
+                    <NavRight>
+                        <Link sheetClose='#edit-sheet'>
+                            <Icon icon='icon-expand-down'/>
+                        </Link>
+                    </NavRight>
+                }
+            </Navbar>
             <CustomColorPicker currentColor={fillColor} onAddNewColor={onAddNewColor}/>
         </Page>
     )
@@ -169,7 +170,15 @@ const PageCustomBorderColor = props => {
 
     return (
         <Page>
-            <Navbar title={_t.textCustomColor} backLink={_t.textBack} />
+            <Navbar title={_t.textCustomColor} backLink={_t.textBack}>
+                {Device.phone &&
+                    <NavRight>
+                        <Link sheetClose='#edit-sheet'>
+                            <Icon icon='icon-expand-down'/>
+                        </Link>
+                    </NavRight>
+                }
+            </Navbar>
             <CustomColorPicker currentColor={borderColor} onAddNewColor={onAddNewColor}/>
         </Page>
     )
@@ -198,7 +207,15 @@ const PageBorderColor = props => {
 
     return (
         <Page>
-            <Navbar title={_t.textColor} backLink={_t.textBack} />
+            <Navbar title={_t.textColor} backLink={_t.textBack}>
+                {Device.phone &&
+                    <NavRight>
+                        <Link sheetClose='#edit-sheet'>
+                            <Icon icon='icon-expand-down'/>
+                        </Link>
+                    </NavRight>
+                }
+            </Navbar>
             <ThemeColorPalette changeColor={changeColor} curColor={borderColor} customColors={customColors}/>
             <List>
                 <ListItem title={_t.textAddCustomColor} link={'/edit-table-custom-border-color/'}></ListItem>
@@ -305,6 +322,13 @@ const PageStyle = props => {
                     <Link key={"pe-link-table-fill"}  tabLink={"#edit-table-fill"}>{_t.textFill}</Link>
                     <Link key={"pe-link-table-border"}  tabLink={"#edit-table-border"}>{_t.textBorder}</Link>
                 </div>
+                {Device.phone &&
+                    <NavRight>
+                        <Link sheetClose='#edit-sheet'>
+                            <Icon icon='icon-expand-down'/>
+                        </Link>
+                    </NavRight>
+                }
             </Navbar>
             <Tabs animated>
                 <Tab key={"pe-tab-table-style"} id={"edit-table-style"} className="page-content no-padding-top" tabActive={true}>
@@ -342,7 +366,15 @@ const PageReorder = props => {
 
     return (
         <Page>
-            <Navbar title={_t.textReorder} backLink={_t.textBack} />
+            <Navbar title={_t.textReorder} backLink={_t.textBack}>
+                {Device.phone &&
+                    <NavRight>
+                        <Link sheetClose='#edit-sheet'>
+                            <Icon icon='icon-expand-down'/>
+                        </Link>
+                    </NavRight>
+                }
+            </Navbar>
             <List>
                 <ListItem title={_t.textBringToForeground} link='#' onClick={() => {props.onReorder('all-up')}} className='no-indicator'>
                     <Icon slot="media" icon="icon-move-foreground"></Icon>
@@ -373,7 +405,15 @@ const PageAlign = props => {
 
     return (
         <Page>
-            <Navbar title={_t.textAlign} backLink={_t.textBack} />
+            <Navbar title={_t.textAlign} backLink={_t.textBack}>
+                {Device.phone &&
+                    <NavRight>
+                        <Link sheetClose='#edit-sheet'>
+                            <Icon icon='icon-expand-down'/>
+                        </Link>
+                    </NavRight>
+                }
+            </Navbar>
             <List>
                 <ListItem title={_t.textAlignLeft} link='#' onClick={() => {props.onAlign('align-left')}} className='no-indicator'>
                     <Icon slot="media" icon="icon-align-left"></Icon>
@@ -446,7 +486,7 @@ const EditTable = props => {
                     </Row>
                 </ListItem>
                 <List className="buttons-list">
-                    <ListItem href="#" title={_t.textRemoveTable} onClick={() => {props.onRemoveTable()}} className='button button-raised button-red'></ListItem>
+                    <ListButton title={_t.textRemoveTable} onClick={() => {props.onRemoveTable()}} className='button-red button-fill button-raised'></ListButton>
                 </List>
             </List>
             <List>

apps/presentationeditor/mobile/src/view/edit/EditText.jsx

@@ -1,6 +1,6 @@
 import React, {Fragment, useState} from 'react';
 import {observer, inject} from "mobx-react";
-import {f7, List, ListItem, Icon, Row, Button, Page, Navbar, Segmented, BlockTitle} from 'framework7-react';
+import {f7, List, ListItem, Icon, Row, Button, Page, Navbar, Segmented, BlockTitle, NavRight, Link} from 'framework7-react';
 import { useTranslation } from 'react-i18next';
 import {Device} from '../../../../../common/mobile/utils/device';
 import { ThemeColorPalette, CustomColorPicker } from '../../../../../common/mobile/lib/component/ThemeColorPalette.jsx';
@@ -201,7 +201,15 @@ const PageFonts = props => {
 
     return (
         <Page>
-            <Navbar title={_t.textFonts} backLink={_t.textBack} />
+            <Navbar title={_t.textFonts} backLink={_t.textBack}>
+                {Device.phone &&
+                    <NavRight>
+                        <Link sheetClose='#edit-sheet'>
+                            <Icon icon='icon-expand-down'/>
+                        </Link>
+                    </NavRight>
+                }
+            </Navbar>
             <List>
                 <ListItem title={_t.textSize}>
                     {!isAndroid && <div slot='after-start'>{displaySize}</div>}
@@ -267,7 +275,15 @@ const PageFontColor = props => {
 
     return (
         <Page>
-            <Navbar title={_t.textFontColors} backLink={_t.textBack} />
+            <Navbar title={_t.textFontColors} backLink={_t.textBack}>
+                {Device.phone &&
+                    <NavRight>
+                        <Link sheetClose='#edit-sheet'>
+                            <Icon icon='icon-expand-down'/>
+                        </Link>
+                    </NavRight>
+                }
+            </Navbar>
             <ThemeColorPalette changeColor={changeColor} curColor={textColor} customColors={customColors}/>
             <List>
                 <ListItem title={_t.textAddCustomColor} link={'/edit-text-custom-font-color/'} routeProps={{
@@ -297,7 +313,15 @@ const PageCustomFontColor = props => {
     };
     return(
         <Page>
-            <Navbar title={_t.textCustomColor} backLink={_t.textBack} />
+            <Navbar title={_t.textCustomColor} backLink={_t.textBack}>
+                {Device.phone &&
+                    <NavRight>
+                        <Link sheetClose='#edit-sheet'>
+                            <Icon icon='icon-expand-down'/>
+                        </Link>
+                    </NavRight>
+                }
+            </Navbar>
             <CustomColorPicker autoColor={autoColor} currentColor={textColor} onAddNewColor={onAddNewColor}/>
         </Page>
     )
@@ -334,7 +358,15 @@ const PageAdditionalFormatting = props => {
 
     return (
         <Page>
-            <Navbar title={_t.textAdditional} backLink={_t.textBack} />
+            <Navbar title={_t.textAdditional} backLink={_t.textBack}>
+                {Device.phone &&
+                    <NavRight>
+                        <Link sheetClose='#edit-sheet'>
+                            <Icon icon='icon-expand-down'/>
+                        </Link>
+                    </NavRight>
+                }
+            </Navbar>
             <List>
                 <ListItem title={_t.textStrikethrough} radio checked={isStrikeout} onClick={() => {props.onAdditionalStrikethrough('strikethrough', !isStrikeout)}}/>
                 <ListItem title={_t.textDoubleStrikethrough} radio checked={isDStrikeout} onClick={() => {props.onAdditionalStrikethrough('dbStrikethrough', !isDStrikeout)}}/>
@@ -391,7 +423,15 @@ const PageBullets = props => {
 
     return (
         <Page className='bullets dataview'>
-            <Navbar title={_t.textBullets} backLink={_t.textBack} />
+            <Navbar title={_t.textBullets} backLink={_t.textBack}>
+                {Device.phone &&
+                    <NavRight>
+                        <Link sheetClose='#edit-sheet'>
+                            <Icon icon='icon-expand-down'/>
+                        </Link>
+                    </NavRight>
+                }
+            </Navbar>
             {bulletArrays.map((bullets, index) => (
                     <ul className="row" style={{listStyle: 'none'}} key={'bullets-' + index}>
                         {bullets.map((bullet) => (
@@ -439,7 +479,15 @@ const PageNumbers = props => {
 
     return (
         <Page className='numbers dataview'>
-            <Navbar title={_t.textNumbers} backLink={_t.textBack} />
+            <Navbar title={_t.textNumbers} backLink={_t.textBack}>
+                {Device.phone &&
+                    <NavRight>
+                        <Link sheetClose='#edit-sheet'>
+                            <Icon icon='icon-expand-down'/>
+                        </Link>
+                    </NavRight>
+                }
+            </Navbar>
             {numberArrays.map((numbers, index) => (
                 <ul className="row" style={{listStyle: 'none'}} key={'numbers-' + index}>
                     {numbers.map((number) => (
@@ -472,7 +520,15 @@ const PageLineSpacing = props => {
 
     return (
         <Page>
-            <Navbar title={_t.textLineSpacing} backLink={_t.textBack} />
+            <Navbar title={_t.textLineSpacing} backLink={_t.textBack}>
+                {Device.phone &&
+                    <NavRight>
+                        <Link sheetClose='#edit-sheet'>
+                            <Icon icon='icon-expand-down'/>
+                        </Link>
+                    </NavRight>
+                }
+            </Navbar>
             <List>
                 <ListItem radio checked={lineSpacing === 1.0} title={1.0} onClick={() => {props.onLineSpacing(1.0)}}></ListItem>
                 <ListItem radio checked={lineSpacing === 1.15} title={1.15} onClick={() => {props.onLineSpacing(1.15)}}></ListItem>

apps/spreadsheeteditor/mobile/locale/en.json

@@ -223,6 +223,8 @@
             "txtNotUrl": "This field should be a URL in the format \"http://www.example.com\"",
             "textEmptyImgUrl": "You need to specify image URL.",
             "notcriticalErrorTitle": "Warning",
+            "errorStockChart": "Incorrect row order. To build a stock chart place the data on the sheet in the following order:<br> opening price, max price, min price, closing price.",
+            "errorMaxRows": "ERROR! The maximum number of data series per chart is 255.",
             "textLink": "Link",
             "textAddLink": "Add Link",
             "textLinkType": "Link Type",

apps/spreadsheeteditor/mobile/src/controller/add/AddChart.jsx

@@ -1,6 +1,7 @@
 import React, {Component} from 'react';
 import { f7 } from 'framework7-react';
 import {Device} from '../../../../../common/mobile/utils/device';
+import { withTranslation } from 'react-i18next';
 
 import AddChart from '../../view/add/AddChart';
 
@@ -20,10 +21,24 @@ class AddChartController extends Component {
 
     onInsertChart (type) {
         const api = Common.EditorApi.get();
-        const settings = api.asc_getChartObject();
+        const { t } = this.props;
-        settings.changeType(type);
+        const _t = t('View.Add', {returnObjects: true});
-        api.asc_addChartDrawingObject(settings);
+        const settings = api.asc_getChartObject(true);
-        this.closeModal();
+        const info = api.asc_getCellInfo();
+        const selType = info.asc_getSelectionType();
+        const isChartEdit = (selType == Asc.c_oAscSelectionType.RangeChart || selType == Asc.c_oAscSelectionType.RangeChartText);
+
+        if (settings) {
+            isChartEdit ? settings.changeType(type) : settings.putType(type);
+            let range = settings.getRange(),
+                isValid = !!range ? api.asc_checkDataRange(Asc.c_oAscSelectionDialogType.Chart, range, true, !settings.getInColumns(), settings.getType()) : Asc.c_oAscError.ID.No;
+            if (isValid == Asc.c_oAscError.ID.No) {
+                isChartEdit ? api.asc_editChartDrawingObject(settings) : api.asc_addChartDrawingObject(settings);
+                this.closeModal();
+            } else {
+                f7.dialog.alert((isValid == Asc.c_oAscError.ID.StockChartError) ? _t.errorStockChart : ((isValid == Asc.c_oAscError.ID.MaxDataSeriesError) ? _t.errorMaxRows : _t.txtInvalidRange), _t.notcriticalErrorTitle);
+            }
+        }
     }
 
     render () {
@@ -34,4 +49,6 @@ class AddChartController extends Component {
     }
 }
 
-export default AddChartController;
+const AddChartControllerTranslated = withTranslation()(AddChartController);
+
+export {AddChartControllerTranslated as AddChartController};

apps/spreadsheeteditor/mobile/src/view/add/Add.jsx

@@ -5,7 +5,7 @@ import {f7} from 'framework7-react';
 import { observer, inject } from "mobx-react";
 import {Device} from '../../../../../common/mobile/utils/device';
 
-import AddChartController from "../../controller/add/AddChart";
+import {AddChartController} from "../../controller/add/AddChart";
 import {AddFunctionController} from "../../controller/add/AddFunction";
 import {PageFunctionGroup, PageFunctionInfo} from "./AddFunction";
 import AddShapeController from "../../controller/add/AddShape";

apps/spreadsheeteditor/mobile/src/view/add/AddImage.jsx

@@ -36,7 +36,7 @@ const PageLinkSettings = props => {
                 >
                 </ListInput>
             </List>
-            <List>
+            <List className="buttons-list">
                 <ListButton className={'button-fill button-raised' + (stateValue.length < 1 ? ' disabled' : '')}
                             title={_t.textInsertImage}
                             onClick={() => {props.onInsertByUrl(stateValue)}}></ListButton>

apps/spreadsheeteditor/mobile/src/view/add/AddLink.jsx

@@ -129,7 +129,7 @@ const AddLinkView = props => {
                            className={isIos ? 'list-input-right' : ''}
                 />
             </List>
-            <List>
+            <List className="buttons-list">
                 <ListButton title={_t.textInsert}
                             className={`button-fill button-raised${(typeLink === 'ext' && link.length < 1 || typeLink === 'int' && range.length < 1) && ' disabled'}`}
                             onClick={() => {props.onInsertLink(typeLink === 'ext' ?

apps/spreadsheeteditor/mobile/src/view/edit/EditChart.jsx

@@ -1466,7 +1466,7 @@ const EditChart = props => {
                     onReorder: props.onReorder
                 }}></ListItem>
             </List>
-            <List>
+            <List className="buttons-list">
                 <ListButton title={_t.textRemoveChart} onClick={() => {props.onRemoveChart()}} className='button-red button-fill button-raised'/>
             </List>
         </Fragment>

apps/spreadsheeteditor/mobile/src/view/edit/EditImage.jsx

@@ -7,11 +7,14 @@ import {Device} from '../../../../../common/mobile/utils/device';
 const EditImage = props => {
     const { t } = useTranslation();
     const _t = t('View.Edit', {returnObjects: true});
+    const storeFocusObjects = props.storeFocusObjects;
+    const imageObject = storeFocusObjects.imageObject;
+    const pluginGuid = imageObject.asc_getPluginGuid();
 
     return (
         <Fragment>
             <List>
-                <ListItem title={_t.textReplace} link="/edit-replace-image/" routeProps={{
+                <ListItem title={_t.textReplace} link="/edit-replace-image/" className={pluginGuid ? 'disabled' : ''} routeProps={{
                     onReplaceByFile: props.onReplaceByFile,
                     onReplaceByUrl: props.onReplaceByUrl
                 }}></ListItem>
@@ -20,8 +23,8 @@ const EditImage = props => {
                 }}></ListItem>
             </List>
             <List className="buttons-list">
-                <ListItem href="#" className="button button-raised button-fill" onClick={props.onDefaultSize}>{_t.textActualSize}</ListItem>
+                <ListButton className="button-fill button-raised" onClick={props.onDefaultSize}>{_t.textActualSize}</ListButton>
-                <ListItem href="#" className="button button-raised button-red" onClick={props.onRemoveImage}>{_t.textRemoveImage}</ListItem>
+                <ListButton className="button-red button-fill button-raised" onClick={props.onRemoveImage}>{_t.textRemoveImage}</ListButton>
             </List>
         </Fragment>
     )

apps/spreadsheeteditor/mobile/src/view/edit/EditLink.jsx

@@ -157,7 +157,7 @@ const EditLink = props => {
                            className={isIos ? 'list-input-right' : ''}
                 />
             </List>
-            <List>
+            <List className="buttons-list">
                 <ListButton title={_t.textEditLink}
                             className={`button-fill button-raised${(typeLink === 'ext' && link.length < 1 || typeLink === 'int' || range.length < 1 || !curSheet.length) && ' disabled'}`}
                             onClick={() => {props.onEditLink(typeLink === 1 ?
@@ -165,7 +165,7 @@ const EditLink = props => {
                                 {type: 2, url: range, sheet: curSheet, text: stateDisplayText, tooltip: screenTip})}}
                 />
                 <ListButton title={_t.textRemoveLink}
-                            className={`button-fill button-red`}
+                            className={`button-red button-fill button-raised`}
                             onClick={() => props.onRemoveLink()}
                 />
             </List>

apps/spreadsheeteditor/mobile/src/view/edit/EditShape.jsx

@@ -1,6 +1,6 @@
 import React, {Fragment, useState} from 'react';
 import {observer, inject} from "mobx-react";
-import {f7, Page, Navbar, NavRight, List, ListItem, Link, Icon, Range, Tab, Tabs} from 'framework7-react';
+import {f7, Page, Navbar, NavRight, List, ListItem, Link, Icon, Range, Tab, Tabs, ListButton} from 'framework7-react';
 import { ThemeColorPalette, CustomColorPicker } from '../../../../../common/mobile/lib/component/ThemeColorPalette.jsx';
 import { useTranslation } from 'react-i18next';
 import {Device} from '../../../../../common/mobile/utils/device';
@@ -12,6 +12,8 @@ const EditShape = props => {
     const shapeObject = storeFocusObjects.shapeObject;
     const canFill = shapeObject && shapeObject.get_ShapeProperties().asc_getCanFill();
 
+    let disableRemove = storeFocusObjects.selections.indexOf('text') > -1;
+
     return (
         <Fragment>
             <List>
@@ -36,7 +38,7 @@ const EditShape = props => {
                 }}></ListItem>
             </List>
             <List className="buttons-list">
-                <ListItem href="#" className="button button-raised button-red" onClick={props.onRemoveShape}>{_t.textRemoveShape}</ListItem>
+                <ListButton className={`button-red button-fill button-raised${disableRemove ? ' disabled' : ''}`} onClick={props.onRemoveShape}>{_t.textRemoveShape}</ListButton>
             </List>
         </Fragment>
     )