Lea/web-apps
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

[DE mobile] Correct styles navigation

Browse source
This commit is contained in:
SergeyEzhin 2022-02-15 15:55:06 +04:00
parent 51f7bb1617
commit 486ccc7f01
6 changed files with 75 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
apps/documenteditor/mobile/locale/en.json
View file

@ -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.",

5
apps/documenteditor/mobile/src/controller/settings/Navigation.jsx
View file

@ -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)
});

20
apps/documenteditor/mobile/src/less/app-ios.less
View file

@ -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

19
apps/documenteditor/mobile/src/less/app-material.less
View file

@ -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

25
apps/documenteditor/mobile/src/less/app.less
View file

@ -203,12 +203,27 @@
height: 40px;
background-color: @background-primary;
.icon-swipe {
margin-top: 8px;
width: 40px;
height: 4px;
background: rgba(0, 0, 0, 0.12);
border-radius: 2px;
margin-top: 8px;
width: 40px;
height: 4px;
background: @background-menu-divider;
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;
}

21
apps/documenteditor/mobile/src/view/settings/Navigation.jsx
View file

@ -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>