[DE mobile] Correct styles navigation

apps/documenteditor/mobile/locale/en.json

@@ -645,7 +645,8 @@
     "txtScheme9": "Foundry",
     "textNavigation": "Navigation",
     "textEmptyScreens": "There are no headings in the document. Apply a headings style to the text so that it appeas in the table of cotents.",
-    "textBeginningDocument": "Beginning of document"
+    "textBeginningDocument": "Beginning of document",
+    "textEmptyHeading": "Empty Heading"
   },
   "Toolbar": {
     "dlgLeaveMsgText": "You have unsaved changes. Click 'Stay on this Page' to wait for autosave. Click 'Leave this Page' to discard all the unsaved changes.",

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

@@ -1,7 +1,6 @@
 import React, { Component } from "react";
 import { NavigationPopover, NavigationSheet } from "../../view/settings/Navigation";
 import { Device } from '../../../../../common/mobile/utils/device';
-import { f7, Sheet, Page, Popup } from 'framework7-react';
 import { withTranslation } from 'react-i18next';
 
 class NavigationController extends Component {
@@ -37,9 +36,9 @@ class NavigationController extends Component {
 
             arrHeaders.push({
                 name: navigationObject.get_Text(i),
-                level: level,
+                level,
                 index: i,
-                hasParent: hasParent,
+                hasParent,
                 isEmptyItem: navigationObject.isEmptyItem(i)
             });
 

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

@@ -38,6 +38,26 @@
             }
         }
     }
+
+    .navigation-sheet {
+        border-radius: 10px 10px 0px 0px;
+        &__title {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            background: @background-primary;
+            padding-bottom: 10px;
+            p {
+                font-style: normal;
+                font-weight: 600;
+                font-size: 17px;
+                line-height: 22px;
+                text-align: center;
+                color: @text-normal;
+                margin: 0;
+            }
+        }
+    }
 }
 
 // Color Schemes

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

@@ -86,6 +86,25 @@
             }
         }
     }
+
+    .navigation-sheet {
+        border-radius: 4px 4px 0px 0px;
+        &__title {
+            display: flex;
+            align-items: center;
+            background: @background-primary;
+            padding-bottom: 15px;
+            padding-left: 16px;
+            p {
+                font-style: normal;
+                font-weight: 500;
+                font-size: 20px;
+                line-height: 23px;
+                color: @text-normal;
+                margin: 0;
+            }
+        }
+    }
 }
 
 // Color Schemes

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

@@ -203,12 +203,27 @@
     height: 40px;
     background-color: @background-primary;
     .icon-swipe {
-      margin-top: 8px;
+        margin-top: 8px;
-      width: 40px;
+        width: 40px;
-      height: 4px;
+        height: 4px;
-      background: rgba(0, 0, 0, 0.12);
+        background: @background-menu-divider;
-      border-radius: 2px;
+        border-radius: 2px;
     }
 }
 
+.navigation-sheet {
+    box-shadow: 0px -2px 20px rgba(0, 0, 0, 0.2);
+    overflow: hidden;
+    .sheet-modal-inner {
+        background: @background-tertiary;
+    }
+    &.sheet-modal-bottom:before, &.sheet-modal:not(.sheet-modal-top):before {
+        display: none;
+    }
+}
+
+.navigation-list {
+    margin: 0;
+}
+
 

apps/documenteditor/mobile/src/view/settings/Navigation.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, Component, Fragment } from "react";
+import React, { useState, useEffect } from "react";
 import { Device } from '../../../../../common/mobile/utils/device';
 import {f7, View, List, ListItem, Icon, Row, Button, Page, Navbar, NavRight, Segmented, BlockTitle, Link, ListButton, Toggle, Actions, ActionsButton, ActionsGroup, Sheet} from 'framework7-react';
 import { useTranslation } from 'react-i18next';
@@ -14,16 +14,16 @@ const NavigationPopover = props => {
     return (
         <Page>
             <Navbar title={t('Settings.textNavigation')} backLink={_t.textBack} />
-            {!arrHeaders.length 
+            {!arrHeaders || !arrHeaders.length 
                 ?
                     <div className="empty-screens">
                         <p className="empty-screens__text">{t('Settings.textEmptyScreens')}</p>
                     </div>
                 :
-                    <List>
+                    <List className="navigation-list">
                         {arrHeaders.map((header, index) => {
                             return (
-                                <ListItem radio key={index} title={header.name} checked={header.index === currentPosition} style={{paddingLeft: header.level * 16}} onClick={() => {
+                                <ListItem radio key={index} title={header.isEmptyItem ? t('Settings.textEmptyHeading') : header.name} checked={header.index === currentPosition} style={{paddingLeft: header.level * 16}} onClick={() => {
                                     setCurrentPosition(header.index);
                                     props.onSelectItem(header.index);
                                 }}></ListItem>
@@ -88,20 +88,23 @@ const NavigationSheet = props => {
     }, []);
 
     return (
-        <Sheet id="view-navigation-sheet" closeByOutsideClick={true} onSheetClosed={() => props.onclosed()} style={{height: `${stateHeight}`, opacity: `${stateOpacity}`}}>
+        <Sheet id="view-navigation-sheet" className="navigation-sheet" backdrop={false} closeByBackdropClick={false} closeByOutsideClick={true} onSheetClosed={() => props.onclosed()} style={{height: `${stateHeight}`, opacity: `${stateOpacity}`}}>
             <div id='swipe-handler' className='swipe-container' onTouchStart={handleTouchStart} onTouchMove={handleTouchMove} onTouchEnd={handleTouchEnd}>
-                <Icon icon='icon-swipe'/>
+                <Icon icon='icon icon-swipe'/>
             </div>
-            {!arrHeaders.length 
+            <div className="navigation-sheet__title">
+                <p>{t('Settings.textNavigation')}</p>
+            </div>
+            {!arrHeaders || !arrHeaders.length 
                 ?
                     <div className="empty-screens">
                         <p className="empty-screens__text">{t('Settings.textEmptyScreens')}</p>
                     </div>
                 :
-                    <List>
+                    <List className="navigation-list">
                         {arrHeaders.map((header, index) => {
                             return (
-                                <ListItem radio key={index} title={header.name} checked={header.index === currentPosition} style={{paddingLeft: header.level * 16}} onClick={() => {
+                                <ListItem radio key={index} title={header.isEmptyItem ? t('Settings.textEmptyHeading') : header.name} checked={header.index === currentPosition} style={{paddingLeft: header.level * 16}} onClick={() => {
                                     setCurrentPosition(header.index);
                                     props.onSelectItem(header.index);
                                 }}></ListItem>