From 383620fbc7adc98e3f2a5ef63ecbc802cc70135e Mon Sep 17 00:00:00 2001
From: JuliaSvinareva <Julia.Svinaryova@onlyoffice.com>
Date: Mon, 17 May 2021 16:14:41 +0300
Subject: [PATCH] [DE mobile] Fix templates

---
 .../lib/view/collaboration/Comments.jsx       | 10 +-
 .../mobile/src/view/edit/EditChart.jsx        | 59 ++++++++++--
 .../mobile/src/view/edit/EditImage.jsx        | 42 ++++++++-
 .../mobile/src/view/edit/EditParagraph.jsx    | 32 ++++++-
 .../mobile/src/view/edit/EditShape.jsx        | 79 ++++++++++++++--
 .../mobile/src/view/edit/EditTable.jsx        | 69 ++++++++++++--
 .../mobile/src/view/edit/EditText.jsx         | 94 ++++++++++++++++---
 7 files changed, 342 insertions(+), 43 deletions(-)

diff --git a/apps/common/mobile/lib/view/collaboration/Comments.jsx b/apps/common/mobile/lib/view/collaboration/Comments.jsx
index 7b0af776b..08f2666da 100644
--- a/apps/common/mobile/lib/view/collaboration/Comments.jsx
+++ b/apps/common/mobile/lib/view/collaboration/Comments.jsx
@@ -589,7 +589,15 @@ const ViewComments = ({storeComments, storeAppOptions, onCommentMenuClick, onRes
 
     return (
         <Page>
-            <Navbar title={_t.textComments} backLink={_t.textBack}/>
+            <Navbar title={_t.textComments} backLink={_t.textBack}>
+                {Device.phone &&
+                    <NavRight>
+                        <Link sheetClose=".coauth__sheet">
+                            <Icon icon='icon-expand-down'/>
+                        </Link>
+                    </NavRight>
+                }
+            </Navbar>
             {!sortComments ?
                 <div className='no-comments'>{_t.textNoComments}</div> :
                 <List className='comment-list'>
diff --git a/apps/documenteditor/mobile/src/view/edit/EditChart.jsx b/apps/documenteditor/mobile/src/view/edit/EditChart.jsx
index b8c98ea74..4a013cf20 100644
--- a/apps/documenteditor/mobile/src/view/edit/EditChart.jsx
+++ b/apps/documenteditor/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, NavRight, BlockTitle, Toggle, Range, Link, Tabs, Tab} from 'framework7-react';
 import {f7} from 'framework7-react';
 import { useTranslation } from 'react-i18next';
 import {Device} from '../../../../../common/mobile/utils/device';
@@ -21,7 +21,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>
     )
@@ -76,7 +84,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>
     )
@@ -104,7 +120,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={{
@@ -161,6 +185,13 @@ const PageStyle = props => {
                     <Link key={"de-link-chart-fill"}  tabLink={"#edit-chart-fill"}>{_t.textFill}</Link>
                     <Link key={"de-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={"de-tab-chart-type"} id={"edit-chart-type"} className="page-content no-padding-top dataview" tabActive={true}>
@@ -260,7 +291,15 @@ const PageWrap = props => {
     }
     return (
         <Page>
-            <Navbar title={_t.textWrap} backLink={_t.textBack} />
+            <Navbar title={_t.textWrap} backLink={_t.textBack}>
+                {Device.phone &&
+                    <NavRight>
+                        <Link sheetClose='#edit-sheet'>
+                            <Icon icon='icon-expand-down'/>
+                        </Link>
+                    </NavRight>
+                }
+            </Navbar>
             <List>
                 <ListItem title={_t.textInline} radio checked={wrapType === 'inline'} onClick={() => {props.onWrapType('inline')}}>
                     {!isAndroid && <Icon slot="media" icon="icon-wrap-inline"></Icon>}
@@ -355,7 +394,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>
diff --git a/apps/documenteditor/mobile/src/view/edit/EditImage.jsx b/apps/documenteditor/mobile/src/view/edit/EditImage.jsx
index 646abe6f6..26795d0e3 100644
--- a/apps/documenteditor/mobile/src/view/edit/EditImage.jsx
+++ b/apps/documenteditor/mobile/src/view/edit/EditImage.jsx
@@ -1,6 +1,6 @@
 import React, {Fragment, useState} from 'react';
 import {observer, inject} from "mobx-react";
-import {List, ListItem, ListInput, ListButton, Icon, Row, Col, Button, Page, Navbar, Segmented, BlockTitle, Toggle, Range} from 'framework7-react';
+import {List, ListItem, ListInput, ListButton, Icon, Row, Page, Navbar, NavRight, BlockTitle, Toggle, Range, Link} from 'framework7-react';
 import { useTranslation } from 'react-i18next';
 import {f7} from 'framework7-react';
 import {Device} from '../../../../../common/mobile/utils/device';
@@ -27,7 +27,15 @@ const PageWrap = props => {
     }
     return (
         <Page>
-            <Navbar title={_t.textWrap} backLink={_t.textBack} />
+            <Navbar title={_t.textWrap} backLink={_t.textBack}>
+                {Device.phone &&
+                    <NavRight>
+                        <Link sheetClose='#edit-sheet'>
+                            <Icon icon='icon-expand-down'/>
+                        </Link>
+                    </NavRight>
+                }
+            </Navbar>
             <List>
                 <ListItem title={_t.textInline} radio checked={wrapType === 'inline'} onClick={() => {props.onWrapType('inline')}}>
                     {!isAndroid && <Icon slot="media" icon="icon-wrap-inline"></Icon>}
@@ -129,7 +137,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
@@ -157,7 +173,15 @@ const PageReplace = props => {
     }
     return (
         <Page>
-            <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>
@@ -182,7 +206,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>
diff --git a/apps/documenteditor/mobile/src/view/edit/EditParagraph.jsx b/apps/documenteditor/mobile/src/view/edit/EditParagraph.jsx
index 050fc162d..0f1118b02 100644
--- a/apps/documenteditor/mobile/src/view/edit/EditParagraph.jsx
+++ b/apps/documenteditor/mobile/src/view/edit/EditParagraph.jsx
@@ -1,6 +1,6 @@
 import React, {Fragment, useState} from 'react';
 import {observer, inject} from "mobx-react";
-import {f7, List, ListItem, Icon, Button, Page, Navbar, Segmented, BlockTitle, Toggle} from 'framework7-react';
+import {f7, List, ListItem, Icon, Button, Page, Navbar, NavRight, Segmented, BlockTitle, Toggle, 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';
@@ -38,7 +38,15 @@ const PageAdvancedSettings = props => {
     }
     return(
         <Page>
-            <Navbar title={t('Edit.textAdvanced')} backLink={t('Edit.textBack')} />
+            <Navbar title={t('Edit.textAdvanced')} backLink={t('Edit.textBack')}>
+                {Device.phone &&
+                    <NavRight>
+                        <Link sheetClose='#edit-sheet'>
+                            <Icon icon='icon-expand-down'/>
+                        </Link>
+                    </NavRight>
+                }
+            </Navbar>
             <BlockTitle>{t('Edit.textDistanceFromText')}</BlockTitle>
             <List>
                 <ListItem title={t('Edit.textBefore')}>
@@ -122,7 +130,15 @@ const PageCustomBackColor = 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={backgroundColor} onAddNewColor={onAddNewColor}/>
         </Page>
     )
@@ -150,7 +166,15 @@ const PageBackgroundColor = props => {
     };
     return(
         <Page>
-            <Navbar title={_t.textBackground} backLink={_t.textBack} />
+            <Navbar title={_t.textBackground} backLink={_t.textBack}>
+                {Device.phone &&
+                    <NavRight>
+                        <Link sheetClose='#edit-sheet'>
+                            <Icon icon='icon-expand-down'/>
+                        </Link>
+                    </NavRight>
+                }
+            </Navbar>
             <ThemeColorPalette changeColor={changeColor} curColor={backgroundColor} customColors={customColors} transparent={true}/>
             <List>
                 <ListItem title={_t.textAddCustomColor} link={'/edit-paragraph-custom-color/'} routeProps={{
diff --git a/apps/documenteditor/mobile/src/view/edit/EditShape.jsx b/apps/documenteditor/mobile/src/view/edit/EditShape.jsx
index 7b49b98b0..093bb735a 100644
--- a/apps/documenteditor/mobile/src/view/edit/EditShape.jsx
+++ b/apps/documenteditor/mobile/src/view/edit/EditShape.jsx
@@ -1,6 +1,6 @@
 import React, {Fragment, useState} from 'react';
 import {observer, inject} from "mobx-react";
-import {List, ListItem, Icon, Row, Page, Navbar, BlockTitle, Toggle, Range, ListButton, Link, Tabs, Tab} from 'framework7-react';
+import {List, ListItem, Icon, Row, Page, Navbar, NavRight, BlockTitle, Toggle, Range, ListButton, Link, Tabs, Tab} from 'framework7-react';
 import { f7 } from 'framework7-react';
 import { useTranslation } from 'react-i18next';
 import {Device} from '../../../../../common/mobile/utils/device';
@@ -21,7 +21,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>
     )
@@ -76,7 +84,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>
     )
@@ -104,7 +120,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-shape-custom-border-color/'} routeProps={{
@@ -157,6 +181,13 @@ const PageStyle = props => {
                     <Link key={"de-link-shape-border"}  tabLink={"#edit-shape-border"}>{_t.textBorder}</Link>
                     <Link key={"de-link-shape-effects"}  tabLink={"#edit-shape-effects"}>{_t.textEffects}</Link>
                 </div>
+                {Device.phone &&
+                    <NavRight>
+                        <Link sheetClose='#edit-sheet'>
+                            <Icon icon='icon-expand-down'/>
+                        </Link>
+                    </NavRight>
+                }
             </Navbar>
             <Tabs animated>
                 <Tab key={"de-tab-shape-fill"} id={"edit-shape-fill"} className="page-content no-padding-top" tabActive={true}>
@@ -237,7 +268,15 @@ const PageStyleNoFill = props => {
 
     return (
         <Page>
-            <Navbar backLink={_t.textBack} title={_t.textBorder}></Navbar>
+            <Navbar backLink={_t.textBack} title={_t.textBorder}>
+                {Device.phone &&
+                    <NavRight>
+                        <Link sheetClose='#edit-sheet'>
+                            <Icon icon='icon-expand-down'/>
+                        </Link>
+                    </NavRight>
+                }
+            </Navbar>
             <List>
                 <ListItem>
                     <div slot="root-start" className='inner-range-title'>{_t.textSize}</div>
@@ -286,7 +325,15 @@ const PageWrap = props => {
     }
     return (
         <Page>
-            <Navbar title={_t.textWrap} backLink={_t.textBack} />
+            <Navbar title={_t.textWrap} backLink={_t.textBack}>
+                {Device.phone &&
+                    <NavRight>
+                        <Link sheetClose='#edit-sheet'>
+                            <Icon icon='icon-expand-down'/>
+                        </Link>
+                    </NavRight>
+                }
+            </Navbar>
             <List>
                 <ListItem title={_t.textInline} radio checked={wrapType === 'inline'} onClick={() => {props.onWrapType('inline')}}>
                     {!isAndroid && <Icon slot="media" icon="icon-wrap-inline"></Icon>}
@@ -386,7 +433,15 @@ const PageReplace = props => {
 
     return (
         <Page className="shapes dataview">
-            <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>
             {shapes.map((row, indexRow) => {
                 return (
                     <ul className="row" key={'shape-row-' + indexRow}>
@@ -418,7 +473,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>
diff --git a/apps/documenteditor/mobile/src/view/edit/EditTable.jsx b/apps/documenteditor/mobile/src/view/edit/EditTable.jsx
index 93d79deef..e1eb03bd4 100644
--- a/apps/documenteditor/mobile/src/view/edit/EditTable.jsx
+++ b/apps/documenteditor/mobile/src/view/edit/EditTable.jsx
@@ -1,6 +1,6 @@
 import React, {Fragment, useState} from 'react';
 import {observer, inject} from "mobx-react";
-import {Page, Navbar, List, ListItem, ListButton, Row, BlockTitle, Range, Toggle, Icon, Link, Tabs, Tab} from 'framework7-react';
+import {Page, Navbar, NavRight, List, ListItem, ListButton, Row, BlockTitle, Range, Toggle, Icon, Link, Tabs, Tab} from 'framework7-react';
 import { f7 } from 'framework7-react';
 import { useTranslation } from 'react-i18next';
 import {Device} from '../../../../../common/mobile/utils/device';
@@ -29,7 +29,15 @@ const PageTableOptions = 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.textRepeatAsHeaderRow} className={isRepeat === null ? 'disabled' : ''}>
                     <Toggle checked={isRepeat} onChange={() => {props.onOptionRepeat(!isRepeat)}}/>
@@ -88,7 +96,15 @@ const PageWrap = props => {
 
     return (
         <Page>
-            <Navbar title={_t.textWrap} backLink={_t.textBack} />
+            <Navbar title={_t.textWrap} backLink={_t.textBack}>
+                {Device.phone &&
+                    <NavRight>
+                        <Link sheetClose='#edit-sheet'>
+                            <Icon icon='icon-expand-down'/>
+                        </Link>
+                    </NavRight>
+                }
+            </Navbar>
             <List>
                 <ListItem title={_t.textInline} radio checked={wrapType === 'inline'} onChange={() => {props.onWrapType(c_tableWrap.TABLE_WRAP_NONE)}}>
                     {!isAndroid && <Icon slot="media" icon="icon-wrap-table-inline"></Icon>}
@@ -211,7 +227,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)}}/>
@@ -256,7 +280,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>
     )
@@ -307,7 +339,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>
     )
@@ -334,7 +374,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>
@@ -448,6 +496,13 @@ const PageStyle = props => {
                     <Link key={"de-link-table-fill"}  tabLink={"#edit-table-fill"}>{_t.textFill}</Link>
                     <Link key={"de-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={"de-tab-table-style"} id={"edit-table-style"} className="page-content no-padding-top" tabActive={true}>
diff --git a/apps/documenteditor/mobile/src/view/edit/EditText.jsx b/apps/documenteditor/mobile/src/view/edit/EditText.jsx
index a52f10051..e14cf43ed 100644
--- a/apps/documenteditor/mobile/src/view/edit/EditText.jsx
+++ b/apps/documenteditor/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, NavRight, Segmented, BlockTitle, Link} from 'framework7-react';
 import { useTranslation } from 'react-i18next';
 import {Device} from '../../../../../common/mobile/utils/device';
 
@@ -29,11 +29,17 @@ const PageFonts = props => {
         });
     };
 
-    console.log(curFontName);
-
     return (
         <Page>
-            <Navbar title={t('Edit.textFonts')} backLink={t('Edit.textBack')} />
+            <Navbar title={t('Edit.textFonts')} backLink={t('Edit.textBack')}>
+                {Device.phone &&
+                    <NavRight>
+                        <Link sheetClose='#edit-sheet'>
+                            <Icon icon='icon-expand-down'/>
+                        </Link>
+                    </NavRight>
+                }
+            </Navbar>
             <List>
                 <ListItem title={t('Edit.textSize')}>
                     {!isAndroid && <div slot='after-start'>{displaySize}</div>}
@@ -94,7 +100,15 @@ const PageAdditionalFormatting = props => {
     }
     return(
         <Page>
-            <Navbar title={t('Edit.textAdditional')} backLink={t('Edit.textBack')} />
+            <Navbar title={t('Edit.textAdditional')} backLink={t('Edit.textBack')}>
+                {Device.phone &&
+                    <NavRight>
+                        <Link sheetClose='#edit-sheet'>
+                            <Icon icon='icon-expand-down'/>
+                        </Link>
+                    </NavRight>
+                }
+            </Navbar>
             <List>
                 <ListItem title={t('Edit.textStrikethrough')} radio checked={isStrikeout} onClick={() => {props.onAdditionalStrikethrough('strikeout', !isStrikeout)}}/>
                 <ListItem title={t('Edit.textDoubleStrikethrough')} radio checked={isDStrikeout} onClick={() => {props.onAdditionalStrikethrough('dbStrikeout', !isDStrikeout)}}/>
@@ -144,7 +158,15 @@ const PageBullets = props => {
     
     return(
         <Page className='bullets dataview'>
-            <Navbar title={t('Edit.textBullets')} backLink={t('Edit.textBack')} />
+            <Navbar title={t('Edit.textBullets')} backLink={t('Edit.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) => (
@@ -189,7 +211,15 @@ const PageNumbers = props => {
     const typeNumbers = storeTextSettings.typeNumbers;
     return(
         <Page className='numbers dataview'>
-            <Navbar title={t('Edit.textNumbers')} backLink={t('Edit.textBack')} />
+            <Navbar title={t('Edit.textNumbers')} backLink={t('Edit.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) => (
@@ -220,7 +250,15 @@ const PageLineSpacing = props => {
     const lineSpacing = storeTextSettings.lineSpacing;
     return(
         <Page>
-            <Navbar title={t('Edit.textLineSpacing')} backLink={t('Edit.textBack')} />
+            <Navbar title={t('Edit.textLineSpacing')} backLink={t('Edit.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>
@@ -249,7 +287,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>
     )
@@ -274,7 +320,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>
             <List>
                 <ListItem className={'item-color-auto' + (textColor === 'auto' ? ' active' : '')} title={_t.textAutomatic} onClick={() => {
                     props.onTextColorAuto();
@@ -308,7 +362,15 @@ const PageCustomBackColor = 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={backgroundColor} onAddNewColor={onAddNewColor}/>
         </Page>
     )
@@ -333,7 +395,15 @@ const PageBackgroundColor = props => {
     };
     return(
         <Page>
-            <Navbar title={_t.textHighlightColor} backLink={_t.textBack} />
+            <Navbar title={_t.textHighlightColor} backLink={_t.textBack}>
+                {Device.phone &&
+                    <NavRight>
+                        <Link sheetClose='#edit-sheet'>
+                            <Icon icon='icon-expand-down'/>
+                        </Link>
+                    </NavRight>
+                }
+            </Navbar>
             <ThemeColorPalette changeColor={changeColor} curColor={backgroundColor} customColors={customColors} transparent={true}/>
             <List>
                 <ListItem title={_t.textAddCustomColor} link={'/edit-text-custom-back-color/'} routeProps={{