[DE mobile] Edit icons and navigation view
This commit is contained in:
SergeyEzhin
parent
afa38a73bf
commit
240c1bc05d
|
|
@ -1,5 +1,5 @@
|
|||
import React, { Component } from "react";
|
||||
import Navigation from "../../view/settings/Navigation";
|
||||
import {Navigation, 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';
|
||||
|
|
@ -8,12 +8,11 @@ class NavigationController extends Component {
|
|||
constructor(props) {
|
||||
super(props);
|
||||
this.updateNavigation = this.updateNavigation.bind(this);
|
||||
this.closeModal = this.closeModal.bind(this);
|
||||
}
|
||||
|
||||
closeModal() {
|
||||
if (Device.phone) {
|
||||
f7.popup.close('.settings-popup', true);
|
||||
f7.popup.close('.settings-popup');
|
||||
} else {
|
||||
f7.popover.close('#settings-popover');
|
||||
}
|
||||
|
|
@ -73,30 +72,19 @@ class NavigationController extends Component {
|
|||
}
|
||||
};
|
||||
|
||||
componentDidMount() {
|
||||
if(Device.phone) {
|
||||
f7.sheet.open('#view-navigation-sheet', true);
|
||||
this.closeModal();
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
!Device.phone ?
|
||||
<Navigation
|
||||
onSelectItem={this.onSelectItem}
|
||||
updateNavigation={this.updateNavigation}
|
||||
closeModal={this.closeModal}
|
||||
/>
|
||||
:
|
||||
<Sheet id="view-navigation-sheet" push>
|
||||
<Navigation
|
||||
<NavigationSheet
|
||||
onSelectItem={this.onSelectItem}
|
||||
updateNavigation={this.updateNavigation}
|
||||
closeModal={this.closeModal}
|
||||
/>
|
||||
</Sheet>
|
||||
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -166,7 +166,7 @@
|
|||
.style-toc {
|
||||
&__image {
|
||||
margin: 0 15px;
|
||||
max-height: 180px;
|
||||
max-height: 150px;
|
||||
overflow: hidden;
|
||||
&_active {
|
||||
border: 1.5px solid @brandColor;
|
||||
|
|
@ -197,4 +197,18 @@
|
|||
}
|
||||
}
|
||||
|
||||
.swipe-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -86,11 +86,6 @@
|
|||
height: 22px;
|
||||
.encoded-svg-mask('<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M16 4H2V5H16V4Z" fill="@{brandColor}"/><path d="M19 9H5V10H19V9Z" fill="@{brandColor}"/><path d="M23 14V15H9V14H23Z" fill="@{brandColor}" /><path d="M16 20V19H2V20H16Z" fill="@{brandColor}"/></svg>')
|
||||
}
|
||||
&.icon-empty-screens {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
.encoded-svg-background('<svg width="200" height="200" viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_876_40308)"><path d="M176.406 41.5727V47.1081M179.247 44.3397H173.566M193.447 82.6943V86.6484M195.477 84.6716H191.418M149.804 13.5V21.4068M153.861 17.4542H145.746M43.3426 37.0267V43.3521M46.5888 40.1895H40.0967M33.7747 50.4702V55.2143M36.2084 52.843H31.3394M15.1078 89.0626V92.2253M16.7309 90.644H13.4849M4.55885 97.762V105.669M8.6156 101.716H0.500488" stroke="#3C3C43" stroke-opacity="0.3" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round"/><rect x="4" y="188" width="4" height="2" rx="1" fill="#3C3C43" fill-opacity="0.3"/><rect x="10" y="188" width="12" height="2" rx="1" fill="#3C3C43" fill-opacity="0.3"/><rect x="183" y="188" width="10" height="2" rx="1" fill="#3C3C43" fill-opacity="0.3"/><rect x="196" y="188" width="10" height="2" rx="1" fill="#3C3C43" fill-opacity="0.3"/><rect x="26" y="188" width="152" height="2" rx="1" fill="#3C3C43" fill-opacity="0.3"/><rect x="68" y="71" width="64" height="4" fill="#3C3C43" fill-opacity="0.3"/><rect x="68" y="160" width="64" height="4" fill="#3C3C43" fill-opacity="0.3"/><circle cx="100" cy="174" r="6.5" stroke="#3C3C43" stroke-opacity="0.3" stroke-width="3"/><rect x="88" y="64" width="14" height="3" rx="1.5" fill="#3C3C43" fill-opacity="0.3"/><rect x="104" y="64" width="8" height="3" rx="1.5" fill="#3C3C43" fill-opacity="0.3"/><path d="M77 95.5C77 94.6716 77.6716 94 78.5 94H115.5C116.328 94 117 94.6716 117 95.5C117 96.3284 116.328 97 115.5 97H78.5C77.6716 97 77 96.3284 77 95.5Z" fill="#3C3C43" fill-opacity="0.3"/><path d="M77 105.5C77 104.672 77.6716 104 78.5 104H99.5C100.328 104 101 104.672 101 105.5C101 106.328 100.328 107 99.5 107H78.5C77.6716 107 77 106.328 77 105.5Z" fill="#3C3C43" fill-opacity="0.3"/><path d="M77 115.5C77 114.672 77.6716 114 78.5 114H115.5C116.328 114 117 114.672 117 115.5C117 116.328 116.328 117 115.5 117H78.5C77.6716 117 77 116.328 77 115.5Z" fill="#3C3C43" fill-opacity="0.3"/><path d="M77 125.5C77 124.672 77.6716 124 78.5 124H107.5C108.328 124 109 124.672 109 125.5C109 126.328 108.328 127 107.5 127H78.5C77.6716 127 77 126.328 77 125.5Z" fill="#3C3C43" fill-opacity="0.3"/><circle cx="121.5" cy="95.5" r="1.5" fill="#3C3C43" fill-opacity="0.3"/><circle cx="121.5" cy="105.5" r="1.5" fill="#3C3C43" fill-opacity="0.3"/><circle cx="121.5" cy="115.5" r="1.5" fill="#3C3C43" fill-opacity="0.3"/><circle cx="121.5" cy="125.5" r="1.5" fill="#3C3C43" fill-opacity="0.3"/><rect x="66" y="58" width="68" height="128" rx="8" stroke="#3C3C43" stroke-opacity="0.3" stroke-width="4"/></g><defs><clipPath id="clip0_876_40308"><rect width="200" height="200" fill="white"/></clipPath></defs></svg>')
|
||||
}
|
||||
|
||||
// Download
|
||||
|
||||
|
|
|
|||
|
|
@ -139,7 +139,7 @@
|
|||
&.icon-table-contents {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
.encoded-svg-mask('<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 20 13" fill="@{brandColor}"><path fill-rule="evenodd" clip-rule="evenodd" d="M17 0H0V1H17V0ZM11.9 4H0V5H11.9V4ZM0 8H17V9H0V8ZM15 12H0V13H15V12Z"/><path fill-rule="evenodd" clip-rule="evenodd" d="M20 0H19V1H20V0ZM20 4H19V5H20V4ZM19 8H20V9H19V8ZM20 12H19V13H20V12Z"/></svg>');
|
||||
.encoded-svg-mask('<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M2 12.9825V11.0175H16.9926V12.9825H2ZM2 18.9708V17.0058H16.9926V18.9708H2ZM2 5.02924H16.9926V6.99415H2V5.02924ZM19.0049 11.0175V9.9883H22V10.924L20.1749 12.9825H22V14.0117H19.0049V13.076L20.7833 11.0175H19.0049ZM19.9877 8.02339V5.02924H19.0049V4H20.9704V8.02339H19.9877ZM19.0049 17.0058V15.9766H22V20H19.0049V18.9708H20.9704V18.5029H19.9877V17.4737H20.9704V17.0058H19.0049Z" fill="@{brandColor}"/></svg>');
|
||||
}
|
||||
&.icon-navigation {
|
||||
width: 22px;
|
||||
|
|
|
|||
|
|
@ -6,8 +6,6 @@ import { useTranslation } from 'react-i18next';
|
|||
const Navigation = props => {
|
||||
const { t } = useTranslation();
|
||||
const _t = t('Settings', {returnObjects: true});
|
||||
const android = Device.android;
|
||||
const isPhone = Device.phone;
|
||||
const api = Common.EditorApi.get();
|
||||
const navigationObject = api.asc_ShowDocumentOutline();
|
||||
const [currentPosition, setCurrentPosition] = useState(navigationObject.get_CurrentPosition());
|
||||
|
|
@ -15,15 +13,10 @@ const Navigation = props => {
|
|||
|
||||
return (
|
||||
<Page>
|
||||
{!isPhone && <Navbar title={t('Settings.textNavigation')} backLink={_t.textBack} />}
|
||||
<Navbar title={t('Settings.textNavigation')} backLink={_t.textBack} />
|
||||
{!arrHeaders.length
|
||||
?
|
||||
<div className="empty-screens">
|
||||
{!android &&
|
||||
<div className="empty-screens__icon">
|
||||
<Icon slot="media" icon="icon-empty-screens"></Icon>
|
||||
</div>
|
||||
}
|
||||
<p className="empty-screens__text">{t('Settings.textEmptyScreens')}</p>
|
||||
</div>
|
||||
:
|
||||
|
|
@ -42,4 +35,86 @@ const Navigation = props => {
|
|||
)
|
||||
}
|
||||
|
||||
export default Navigation;
|
||||
const NavigationSheet = props => {
|
||||
const { t } = useTranslation();
|
||||
const api = Common.EditorApi.get();
|
||||
const navigationObject = api.asc_ShowDocumentOutline();
|
||||
const [currentPosition, setCurrentPosition] = useState(navigationObject.get_CurrentPosition());
|
||||
const arrHeaders = props.updateNavigation();
|
||||
|
||||
const [stateHeight, setHeight] = useState('45%');
|
||||
const [stateOpacity, setOpacity] = useState(1);
|
||||
|
||||
const [stateStartY, setStartY] = useState();
|
||||
const [isNeedClose, setNeedClose] = useState(false);
|
||||
|
||||
const handleTouchStart = (event) => {
|
||||
const touchObj = event.changedTouches[0];
|
||||
setStartY(parseInt(touchObj.clientY));
|
||||
};
|
||||
|
||||
const handleTouchMove = (event) => {
|
||||
const touchObj = event.changedTouches[0];
|
||||
const dist = parseInt(touchObj.clientY) - stateStartY;
|
||||
|
||||
if (dist < 0) {
|
||||
setHeight('90%');
|
||||
setOpacity(1);
|
||||
setNeedClose(false);
|
||||
} else if (dist < 80) {
|
||||
setHeight('45%');
|
||||
setOpacity(1);
|
||||
setNeedClose(false);
|
||||
} else {
|
||||
setNeedClose(true);
|
||||
setOpacity(0.6);
|
||||
}
|
||||
};
|
||||
|
||||
const handleTouchEnd = (event) => {
|
||||
const touchObj = event.changedTouches[0];
|
||||
const swipeEnd = parseInt(touchObj.clientY);
|
||||
const dist = swipeEnd - stateStartY;
|
||||
|
||||
if (isNeedClose) {
|
||||
f7.sheet.close('#view-navigation-sheet');
|
||||
} else if (stateHeight === '90%' && dist > 20) {
|
||||
setHeight('45%');
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
props.closeModal();
|
||||
f7.sheet.open('#view-navigation-sheet', true);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<Sheet id="view-navigation-sheet" style={{height: `${stateHeight}`, opacity: `${stateOpacity}`}}>
|
||||
<div id='swipe-handler' className='swipe-container' onTouchStart={handleTouchStart} onTouchMove={handleTouchMove} onTouchEnd={handleTouchEnd}>
|
||||
<Icon icon='icon-swipe'/>
|
||||
</div>
|
||||
{!arrHeaders.length
|
||||
?
|
||||
<div className="empty-screens">
|
||||
<p className="empty-screens__text">{t('Settings.textEmptyScreens')}</p>
|
||||
</div>
|
||||
:
|
||||
<List>
|
||||
{arrHeaders.map((header, index) => {
|
||||
return (
|
||||
<ListItem radio key={index} title={header.name} checked={header.index === currentPosition} style={{paddingLeft: header.level * 16}} onClick={() => {
|
||||
setCurrentPosition(header.index);
|
||||
props.onSelectItem(header.index);
|
||||
}}></ListItem>
|
||||
)
|
||||
})}
|
||||
</List>
|
||||
}
|
||||
</Sheet>
|
||||
)
|
||||
}
|
||||
|
||||
export {
|
||||
Navigation,
|
||||
NavigationSheet
|
||||
};
|
||||
Loading…
Reference in a new issue