[DE mobile] Some edits toc

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

@@ -18,6 +18,7 @@
     --f7-navbar-text-color: @fill-white;
     --f7-navbar-height: 56px;
 
+    --f7-list-bg-color: @background-primary;
     --f7-subnavbar-bg-color: @toolbar-background;
     --f7-subnavbar-link-color: @toolbar-icons;
     --f7-subnavbar-text-color: @fill-white;
@@ -84,7 +85,6 @@
         --f7-input-placeholder-color: @text-secondary;
         --f7-label-text-color: @text-normal;
         --f7-page-bg-color: @background-tertiary;
-        --f7-list-bg-color: @background-primary;
         --f7-list-item-border-color: @background-menu-divider;
         --f7-list-chevron-icon-color: @text-tertiary;
         --f7-toggle-inactive-color: @background-menu-divider;

apps/documenteditor/mobile/locale/en.json

@@ -336,7 +336,7 @@
     "textType": "Type",
     "textWe": "We",
     "textWrap": "Wrap",
-    "textTableOfCont": "Table Of Cont.",
+    "textTableOfCont": "TOC",
     "textPageNumbers": "Page Numbers",
     "textSimple": "Simple",
     "textRightAlign": "Right Align",

apps/documenteditor/mobile/src/controller/add/AddTableContents.jsx

@@ -6,6 +6,7 @@ import {AddTableContents} from '../../view/add/AddTableContents';
 class AddTableContentsController extends Component {
     constructor (props) {
         super(props);
+        this.onTableContents = this.onTableContents.bind(this);
     }
 
     closeModal () {
@@ -18,7 +19,8 @@ class AddTableContentsController extends Component {
 
     componentDidMount () {
         const api = Common.EditorApi.get();
-        api.asc_getButtonsTOC('toc1', 'toc2');
+        const widthImage = !Device.phone ? 330 : window.innerWidth - 30;
+        api.asc_getButtonsTOC('toc1', 'toc2', widthImage);
     }
 
     onTableContents(type, currentTOC) {
@@ -49,6 +51,8 @@ class AddTableContentsController extends Component {
                 api.asc_AddTableOfContents(null, props);
                 break;
         }
+
+        this.closeModal();
     }
 
     render () {

apps/documenteditor/mobile/src/controller/edit/EditTableContents.jsx

@@ -11,6 +11,16 @@ class EditTableContentsController extends Component {
         this.startLevel = 1;
         this.endLevel = 3;
         this.fillTOCProps = this.fillTOCProps.bind(this);
+        this.onRemoveTableContents = this.onRemoveTableContents.bind(this);
+        this.onUpdateTableContents = this.onUpdateTableContents.bind(this);
+    }
+
+    closeModal() {
+        if (Device.phone) {
+            f7.sheet.close('#edit-sheet', true);
+        } else {
+            f7.popover.close('#edit-popover');
+        }
     }
 
     getStylesImages() {
@@ -224,7 +234,7 @@ class EditTableContentsController extends Component {
         api.asc_SetTableOfContentsPr(propsTableContents);
     }
 
-    onTableContentsUpdate(type, currentTOC) {
+    onUpdateTableContents(type, currentTOC) {
         const api = Common.EditorApi.get();
         let props = api.asc_GetTableOfContentsPr(currentTOC);
 
@@ -242,13 +252,15 @@ class EditTableContentsController extends Component {
 
         currentTOC = (currentTOC && props) ? props.get_InternalClass() : undefined;
         api.asc_RemoveTableOfContents(currentTOC);
+
+        this.closeModal();
     }
 
     render () {
         return (
             <EditTableContents 
                 onStyle={this.onStyle} 
-                onTableContentsUpdate={this.onTableContentsUpdate}
+                onUpdateTableContents={this.onUpdateTableContents}
                 onRemoveTableContents={this.onRemoveTableContents}
                 onPageNumbers={this.onPageNumbers}
                 onRightAlign={this.onRightAlign}

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

@@ -48,11 +48,11 @@ const EditTableContents = props => {
                 [
                   {
                     text: t('Edit.textRefreshEntireTable'),
-                    onClick: () => props.onTableContentsUpdate('all')
+                    onClick: () => props.onUpdateTableContents('all')
                   },
                   {
                     text: t('Edit.textRefreshPageNumbersOnly'),
-                    onClick: () => props.onTableContentsUpdate('pages')
+                    onClick: () => props.onUpdateTableContents('pages')
                   }
                 ],
                 [