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

[DE mobile] Fix template, add styles

Browse source
This commit is contained in:
JuliaSvinareva 2020-11-26 19:38:10 +03:00
parent c320b30ff7
commit 110d27b7d1
15 changed files with 378 additions and 80 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
apps/common/mobile/resources/less/common-ios.less
View file

@ -1,7 +1,4 @@
@white: #ffffff;
@black: #000000;
.device-ios { .device-ios {
@blockTitleColor: #6d6d72; @blockTitleColor: #6d6d72;
@ -14,6 +11,8 @@
--f7-list-bg-color: @white; --f7-list-bg-color: @white;
--f7-navbar-bg-color: #f7f7f8; --f7-navbar-bg-color: #f7f7f8;
--f7-tabbar-link-inactive-color: @themeColor;
--f7-radio-active-color: @themeColor; --f7-radio-active-color: @themeColor;
--f7-toggle-active-color: @themeColor; --f7-toggle-active-color: @themeColor;
--f7-range-bar-active-bg-color: @themeColor; --f7-range-bar-active-bg-color: @themeColor;
@ -272,7 +271,7 @@
} }
} }
.red .list-button { .button-red .list-button {
color: red; color: red;
} }

212
apps/common/mobile/resources/less/common-material.less
View file

@ -1,5 +1,217 @@
.device-android { .device-android {
@tabLinkColor: rgba(255,255,255,.7);
@red: #f44336;
--f7-navbar-shadow-image: none;
--f7-radio-active-color: @themeColor;
--f7-toggle-active-color: @themeColor;
--f7-range-bar-active-bg-color: @themeColor;
--f7-range-knob-color: @themeColor;
--f7-range-knob-size: 16px;
--f7-link-highlight-color: transparent;
--f7-touch-ripple-color: rgba(255,255,255,0.1);
--f7-input-focused-border-color: @themeColor;
--f7-label-focused-text-color: @themeColor;
// Buttons
.segmented {
.decrement, .increment {
display: flex;
border: none;
min-width: 40px;
margin-left: 0;
border-radius: 0;
height: 32px;
}
label {
color: @black;
margin: 0 5px;
line-height: 32px;
}
}
.button {
--f7-button-text-color: @themeColor;
text-align: center;
display: block;
border-radius: 2px;
line-height: 36px;
box-sizing: border-box;
appearance: none;
background: 0 0;
margin: 0;
height: 36px;
white-space: nowrap;
text-overflow: ellipsis;
font-size: 14px;
text-transform: uppercase;
font-family: inherit;
cursor: pointer;
min-width: 64px;
padding: 0 8px;
position: relative;
overflow: hidden;
outline: 0;
border: none;
-webkit-transition-duration: .3s;
transition-duration: .3s;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
.button-fill .list-button {
background-color: @themeColor;
color: @white;
height: 36px;
text-align: center;
line-height: 36px;
text-transform: uppercase;
font-size: 14px;
font-weight: 500;
border-radius: 2px;
margin: 20px 16px;
}
.button-raised .list-button {
box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.24);
}
.button-red .list-button {
background-color: @red;
}
// Tabs
.tab-buttons {
position: relative;
display: flex;
height: 100%;
width: 100%;
justify-content: space-between;
.tab-link {
height: 100%;
box-sizing: border-box;
padding-left: 0;
padding-right: 0;
font-size: 14px;
font-weight: 500;
text-transform: uppercase;
align-items: center;
color: @tabLinkColor;
&.tab-link-active {
color: @white;
}
}
.tab-link-highlight {
--f7-tabbar-link-active-border-color: rgba(255,255,255,0.5);
position: absolute;
left: 0;
bottom: 0;
height: 3px;
}
}
// List
.list {
li.no-indicator {
.item-link {
.item-inner:before {
content: none;
}
}
}
.item-link {
.item-inner {
.item-after {
color: @black;
}
}
}
&.inputs-list {
.item-input {
.item-inner {
display: block;
.item-label {
width: 100%;
font-size: 12px;
}
.item-input-wrap {
margin-left: 0;
}
}
}
}
.buttons {
box-sizing: border-box;
min-height: 48px;
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
.item-content {
width: 100%;
.item-inner {
padding-bottom: 0;
padding-top: 0;
.row {
width: 100%;
.button {
flex: 1;
font-size: 17px;
margin-left: 5px;
&:first-child {
margin-left: 0;
}
&.active {
color: @white;
background-color: @themeColor;
i.icon {
background-color: @white;
}
}
}
}
}
}
}
}
// Bullets and numbers
.bullets,
.numbers {
.page-content {
background: @white;
}
.row {
justify-content: space-around;
}
ul {
margin-top: 10px;
}
li {
width: 70px;
height: 70px;
margin-right: 1px;
border: 1px solid @gray;
html.pixel-ratio-2 & {
border: 0.5px solid @gray;
}
html.pixel-ratio-3 & {
border: 0.33px solid @gray;
}
.thumb {
width: 100%;
height: 100%;
background-color: @white;
background-size: cover;
label {
width: 100%;
text-align: center;
position: absolute;
top: 34%;
}
}
}
}
.popover__titled { .popover__titled {
.list:last-child { .list:last-child {
li:last-child { li:last-child {

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

@ -21,4 +21,8 @@
align-items: center; align-items: center;
width: auto; width: auto;
} }
.toggle input[type="checkbox"]:checked + .toggle-icon {
background-color: rgba(68,105,149,.5);
}
} }

3
apps/documenteditor/mobile/src/css/app.less
View file

@ -1,4 +1,7 @@
@themeColor: #446995; @themeColor: #446995;
@white: #ffffff;
@black: #000000;
@gray: #c4c4c4;
@import '../../../../common/mobile/resources/less/_mixins.less'; @import '../../../../common/mobile/resources/less/_mixins.less';
@import '../../../../common/mobile/resources/less/collaboration.less'; @import '../../../../common/mobile/resources/less/collaboration.less';

16
apps/documenteditor/mobile/src/css/icons-material.less
View file

@ -26,14 +26,24 @@
height: 24px; height: 24px;
.encoded-svg-background('<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M14.9912 6C14.9912 8.18203 14.4464 9.76912 13.7789 10.7492C13.101 11.7447 12.4042 12 11.9912 12C11.5782 12 10.8814 11.7447 10.2035 10.7492C9.53601 9.76912 8.99121 8.18203 8.99121 6C8.99121 4.23017 10.4571 3 11.9912 3C13.5254 3 14.9912 4.23017 14.9912 6ZM13.4917 13.6397C13.0059 13.8771 12.4989 14 11.9912 14C11.4861 14 10.9817 13.8784 10.4983 13.6434C8.53188 14.3681 6.94518 15.0737 5.78927 15.7768C4.10512 16.8011 4 17.4079 4 17.5C4 17.7664 4.1014 18.3077 5.27104 18.8939C6.50029 19.5099 8.64545 19.9999 12 20C15.3546 20 17.4997 19.5099 18.7289 18.8939C19.8986 18.3078 20 17.7664 20 17.5C20 17.4079 19.8949 16.8011 18.2107 15.7768C17.0529 15.0726 15.4627 14.3657 13.4917 13.6397ZM15.2272 12.1594C16.2765 10.7825 16.9912 8.67814 16.9912 6C16.9912 3 14.5 1 11.9912 1C9.48242 1 6.99121 3 6.99121 6C6.99121 8.68159 7.70777 10.7879 8.75931 12.1647C4.60309 13.7964 2 15.4951 2 17.5C2 19.9852 5 21.9999 12 22C19 22 22 19.9852 22 17.5C22 15.4929 19.3913 13.7927 15.2272 12.1594Z" fill="@{navBarIconColor}"/></svg>'); .encoded-svg-background('<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M14.9912 6C14.9912 8.18203 14.4464 9.76912 13.7789 10.7492C13.101 11.7447 12.4042 12 11.9912 12C11.5782 12 10.8814 11.7447 10.2035 10.7492C9.53601 9.76912 8.99121 8.18203 8.99121 6C8.99121 4.23017 10.4571 3 11.9912 3C13.5254 3 14.9912 4.23017 14.9912 6ZM13.4917 13.6397C13.0059 13.8771 12.4989 14 11.9912 14C11.4861 14 10.9817 13.8784 10.4983 13.6434C8.53188 14.3681 6.94518 15.0737 5.78927 15.7768C4.10512 16.8011 4 17.4079 4 17.5C4 17.7664 4.1014 18.3077 5.27104 18.8939C6.50029 19.5099 8.64545 19.9999 12 20C15.3546 20 17.4997 19.5099 18.7289 18.8939C19.8986 18.3078 20 17.7664 20 17.5C20 17.4079 19.8949 16.8011 18.2107 15.7768C17.0529 15.0726 15.4627 14.3657 13.4917 13.6397ZM15.2272 12.1594C16.2765 10.7825 16.9912 8.67814 16.9912 6C16.9912 3 14.5 1 11.9912 1C9.48242 1 6.99121 3 6.99121 6C6.99121 8.68159 7.70777 10.7879 8.75931 12.1647C4.60309 13.7964 2 15.4951 2 17.5C2 19.9852 5 21.9999 12 22C19 22 22 19.9852 22 17.5C22 15.4929 19.3913 13.7927 15.2272 12.1594Z" fill="@{navBarIconColor}"/></svg>');
} }
}
}
i.icon {
&.icon-expand-down { &.icon-expand-down {
width: 22px; width: 22px;
height: 22px; height: 22px;
.encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 22 22" fill="@{navBarIconColor}"><g><polygon points="10.9,16.9 2,8.1 4.1,6 11.1,12.8 17.9,6 20,8.1 11.2,16.9 11.1,17 "/></g></svg>'); .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 22 22" fill="@{navBarIconColor}"><g><polygon points="10.9,16.9 2,8.1 4.1,6 11.1,12.8 17.9,6 20,8.1 11.2,16.9 11.1,17 "/></g></svg>');
} }
}
}
i.icon {
&.icon-expand-down {
width: 17px;
height: 17px;
.encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 22 22" fill="@{black}"><g><polygon points="10.9,16.9 2,8.1 4.1,6 11.1,12.8 17.9,6 20,8.1 11.2,16.9 11.1,17 "/></g></svg>');
}
&.icon-expand-up {
width: 17px;
height: 17px;
.encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 22 22" fill="@{black}"><g><polygon points="10.9,5.1 2,13.9 4.1,16 11.1,9.2 17.9,16 20,13.9 11.2,5.1 11.1,5 "/></g></svg>');
}
//Settings //Settings
&.icon-search { &.icon-search {
width: 22px; width: 22px;

4
apps/documenteditor/mobile/src/view/edit/Edit.jsx
View file

@ -117,14 +117,16 @@ const EmptyEditLayout = () => {
}; };
const EditLayoutNavbar = ({ editors, inPopover }) => { const EditLayoutNavbar = ({ editors, inPopover }) => {
const isAndroid = Device.android;
const { t } = useTranslation(); const { t } = useTranslation();
const _t = t('Edit', {returnObjects: true}); const _t = t('Edit', {returnObjects: true});
return ( return (
<Navbar> <Navbar>
{ {
editors.length > 1 ? editors.length > 1 ?
<div className='tab-buttons'> <div className='tab-buttons tabbar'>
{editors.map((item, index) => <Link key={"de-link-" + item.id} tabLink={"#" + item.id} tabLinkActive={index === 0}>{item.caption}</Link>)} {editors.map((item, index) => <Link key={"de-link-" + item.id} tabLink={"#" + item.id} tabLinkActive={index === 0}>{item.caption}</Link>)}
{isAndroid && <span className='tab-link-highlight' style={{width: 100 / editors.lenght + '%'}}></span>}
</div> : </div> :
<NavTitle>{ editors[0].caption }</NavTitle> <NavTitle>{ editors[0].caption }</NavTitle>
} }

18
apps/documenteditor/mobile/src/view/edit/EditChart.jsx
View file

@ -2,6 +2,7 @@ import React, {Fragment, useState} from 'react';
import {observer, inject} from "mobx-react"; import {observer, inject} from "mobx-react";
import {List, ListItem, ListButton, Icon, Row, Col, Button, Page, Navbar, Segmented, BlockTitle, Toggle, Range} from 'framework7-react'; import {List, ListItem, ListButton, Icon, Row, Col, Button, Page, Navbar, Segmented, BlockTitle, Toggle, Range} from 'framework7-react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import {Device} from '../../../../../common/mobile/utils/device';
const PageStyle = props => { const PageStyle = props => {
return ( return (
@ -12,6 +13,7 @@ const PageStyle = props => {
}; };
const PageWrap = props => { const PageWrap = props => {
const isAndroid = Device.android;
const { t } = useTranslation(); const { t } = useTranslation();
const _t = t('Edit', {returnObjects: true}); const _t = t('Edit', {returnObjects: true});
const storeChartSettings = props.storeChartSettings; const storeChartSettings = props.storeChartSettings;
@ -28,25 +30,25 @@ const PageWrap = props => {
<Navbar title={_t.textWrap} backLink={_t.textBack} /> <Navbar title={_t.textWrap} backLink={_t.textBack} />
<List> <List>
<ListItem title={_t.textInline} radio checked={wrapType === 'inline'} onClick={() => {props.onWrapType('inline')}}> <ListItem title={_t.textInline} radio checked={wrapType === 'inline'} onClick={() => {props.onWrapType('inline')}}>
<Icon slot="media" icon="icon-wrap-inline"></Icon> {!isAndroid && <Icon slot="media" icon="icon-wrap-inline"></Icon>}
</ListItem> </ListItem>
<ListItem title={_t.textSquare} radio checked={wrapType === 'square'} onClick={() => {props.onWrapType('square')}}> <ListItem title={_t.textSquare} radio checked={wrapType === 'square'} onClick={() => {props.onWrapType('square')}}>
<Icon slot="media" icon="icon-wrap-square"></Icon> {!isAndroid && <Icon slot="media" icon="icon-wrap-square"></Icon>}
</ListItem> </ListItem>
<ListItem title={_t.textTight} radio checked={wrapType === 'tight'} onClick={() => {props.onWrapType('tight')}}> <ListItem title={_t.textTight} radio checked={wrapType === 'tight'} onClick={() => {props.onWrapType('tight')}}>
<Icon slot="media" icon="icon-wrap-tight"></Icon> {!isAndroid && <Icon slot="media" icon="icon-wrap-tight"></Icon>}
</ListItem> </ListItem>
<ListItem title={_t.textThrough} radio checked={wrapType === 'through'} onClick={() => {props.onWrapType('through')}}> <ListItem title={_t.textThrough} radio checked={wrapType === 'through'} onClick={() => {props.onWrapType('through')}}>
<Icon slot="media" icon="icon-wrap-through"></Icon> {!isAndroid && <Icon slot="media" icon="icon-wrap-through"></Icon>}
</ListItem> </ListItem>
<ListItem title={_t.textTopAndBottom} radio checked={wrapType === 'top-bottom'} onClick={() => {props.onWrapType('top-bottom')}}> <ListItem title={_t.textTopAndBottom} radio checked={wrapType === 'top-bottom'} onClick={() => {props.onWrapType('top-bottom')}}>
<Icon slot="media" icon="icon-wrap-top-bottom"></Icon> {!isAndroid && <Icon slot="media" icon="icon-wrap-top-bottom"></Icon>}
</ListItem> </ListItem>
<ListItem title={_t.textInFront} radio checked={wrapType === 'infront'} onClick={() => {props.onWrapType('infront')}}> <ListItem title={_t.textInFront} radio checked={wrapType === 'infront'} onClick={() => {props.onWrapType('infront')}}>
<Icon slot="media" icon="icon-wrap-infront"></Icon> {!isAndroid && <Icon slot="media" icon="icon-wrap-infront"></Icon>}
</ListItem> </ListItem>
<ListItem title={_t.textBehind} radio checked={wrapType === 'behind'} onClick={() => {props.onWrapType('behind')}}> <ListItem title={_t.textBehind} radio checked={wrapType === 'behind'} onClick={() => {props.onWrapType('behind')}}>
<Icon slot="media" icon="icon-wrap-behind"></Icon> {!isAndroid && <Icon slot="media" icon="icon-wrap-behind"></Icon>}
</ListItem> </ListItem>
</List> </List>
{ {
@ -147,7 +149,7 @@ const EditChart = props => {
}}></ListItem> }}></ListItem>
</List> </List>
<List> <List>
<ListButton title={_t.textRemoveChart} onClick={() => {props.onRemoveChart()}} className='red'/> <ListButton title={_t.textRemoveChart} onClick={() => {props.onRemoveChart()}} className='button-red button-fill button-raised'/>
</List> </List>
</Fragment> </Fragment>
) )

15
apps/documenteditor/mobile/src/view/edit/EditHeader.jsx
View file

@ -1,9 +1,11 @@
import React, { Fragment, useState } from 'react'; import React, { Fragment, useState } from 'react';
import { observer, inject } from "mobx-react"; import { observer, inject } from "mobx-react";
import { List, ListItem, Segmented, Button, Toggle, BlockTitle } from 'framework7-react'; import { List, ListItem, Segmented, Button, Toggle, BlockTitle, Icon } from 'framework7-react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import {Device} from "../../../../../common/mobile/utils/device";
const EditHeader = props => { const EditHeader = props => {
const isAndroid = Device.android;
const { t } = useTranslation(); const { t } = useTranslation();
const _t = t('Edit', {returnObjects: true}); const _t = t('Edit', {returnObjects: true});
const headerObject = props.storeFocusObjects.headerObject; const headerObject = props.storeFocusObjects.headerObject;
@ -35,11 +37,16 @@ const EditHeader = props => {
<Toggle checked={startPageNumber<0} onToggleChange={() => {props.onNumberingContinue(!(startPageNumber<0), _startAt)}}/> <Toggle checked={startPageNumber<0} onToggleChange={() => {props.onNumberingContinue(!(startPageNumber<0), _startAt)}}/>
</ListItem> </ListItem>
<ListItem title={_t.textStartAt} className={startPageNumber<0 ? 'disabled' : ''}> <ListItem title={_t.textStartAt} className={startPageNumber<0 ? 'disabled' : ''}>
<div slot='after-start'>{_startAt}</div> {!isAndroid && <div slot='after-start'>{_startAt}</div>}
<div slot='after'> <div slot='after'>
<Segmented> <Segmented>
<Button outline className='item-link decrement' onClick={() => {props.onStartAt(_startAt, true)}}> - </Button> <Button outline className='decrement item-link' onClick={() => {props.onStartAt(_startAt, true)}}>
<Button outline className='item-link increment' onClick={() => {props.onStartAt(_startAt, false)}}> + </Button> {isAndroid ? <Icon icon="icon-expand-down"></Icon> : ' - '}
</Button>
{isAndroid && <label>{_startAt}</label>}
<Button outline className='increment item-link' onClick={() => {props.onStartAt(_startAt, false)}}>
{isAndroid ? <Icon icon="icon-expand-up"></Icon> : ' + '}
</Button>
</Segmented> </Segmented>
</div> </div>
</ListItem> </ListItem>

6
apps/documenteditor/mobile/src/view/edit/EditHyperlink.jsx
View file

@ -15,7 +15,7 @@ const EditHyperlink = props => {
const [stateTip, setTip] = useState(tip); const [stateTip, setTip] = useState(tip);
return ( return (
<Fragment> <Fragment>
<List inlineLabels> <List inlineLabels className='inputs-list'>
<ListInput <ListInput
label={_t.textLink} label={_t.textLink}
type="text" type="text"
@ -39,10 +39,10 @@ const EditHyperlink = props => {
></ListInput> ></ListInput>
</List> </List>
<List> <List>
<ListButton className={stateLink.length < 1 ? 'disabled' : ''} title={_t.textEditLink} onClick={() => { <ListButton className={'button-fill button-raised' + (stateLink.length < 1 ? ' disabled' : '')} title={_t.textEditLink} onClick={() => {
props.onEditLink(stateLink, stateDisplay, stateTip) props.onEditLink(stateLink, stateDisplay, stateTip)
}}></ListButton> }}></ListButton>
<ListButton title={_t.textRemoveLink} onClick={() => {props.onRemoveLink()}} className='red'/> <ListButton title={_t.textRemoveLink} onClick={() => {props.onRemoveLink()}} className='button-red button-fill button-raised'/>
</List> </List>
</Fragment> </Fragment>
) )

22
apps/documenteditor/mobile/src/view/edit/EditImage.jsx
View file

@ -3,8 +3,10 @@ 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, Col, Button, Page, Navbar, Segmented, BlockTitle, Toggle, Range} from 'framework7-react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import {f7} from 'framework7-react'; import {f7} from 'framework7-react';
import {Device} from '../../../../../common/mobile/utils/device';
const PageWrap = props => { const PageWrap = props => {
const isAndroid = Device.android;
const { t } = useTranslation(); const { t } = useTranslation();
const _t = t('Edit', {returnObjects: true}); const _t = t('Edit', {returnObjects: true});
const storeImageSettings = props.storeImageSettings; const storeImageSettings = props.storeImageSettings;
@ -21,25 +23,25 @@ const PageWrap = props => {
<Navbar title={_t.textWrap} backLink={_t.textBack} /> <Navbar title={_t.textWrap} backLink={_t.textBack} />
<List> <List>
<ListItem title={_t.textInline} radio checked={wrapType === 'inline'} onClick={() => {props.onWrapType('inline')}}> <ListItem title={_t.textInline} radio checked={wrapType === 'inline'} onClick={() => {props.onWrapType('inline')}}>
<Icon slot="media" icon="icon-wrap-inline"></Icon> {!isAndroid && <Icon slot="media" icon="icon-wrap-inline"></Icon>}
</ListItem> </ListItem>
<ListItem title={_t.textSquare} radio checked={wrapType === 'square'} onClick={() => {props.onWrapType('square')}}> <ListItem title={_t.textSquare} radio checked={wrapType === 'square'} onClick={() => {props.onWrapType('square')}}>
<Icon slot="media" icon="icon-wrap-square"></Icon> {!isAndroid && <Icon slot="media" icon="icon-wrap-square"></Icon>}
</ListItem> </ListItem>
<ListItem title={_t.textTight} radio checked={wrapType === 'tight'} onClick={() => {props.onWrapType('tight')}}> <ListItem title={_t.textTight} radio checked={wrapType === 'tight'} onClick={() => {props.onWrapType('tight')}}>
<Icon slot="media" icon="icon-wrap-tight"></Icon> {!isAndroid && <Icon slot="media" icon="icon-wrap-tight"></Icon>}
</ListItem> </ListItem>
<ListItem title={_t.textThrough} radio checked={wrapType === 'through'} onClick={() => {props.onWrapType('through')}}> <ListItem title={_t.textThrough} radio checked={wrapType === 'through'} onClick={() => {props.onWrapType('through')}}>
<Icon slot="media" icon="icon-wrap-through"></Icon> {!isAndroid && <Icon slot="media" icon="icon-wrap-through"></Icon>}
</ListItem> </ListItem>
<ListItem title={_t.textTopAndBottom} radio checked={wrapType === 'top-bottom'} onClick={() => {props.onWrapType('top-bottom')}}> <ListItem title={_t.textTopAndBottom} radio checked={wrapType === 'top-bottom'} onClick={() => {props.onWrapType('top-bottom')}}>
<Icon slot="media" icon="icon-wrap-top-bottom"></Icon> {!isAndroid && <Icon slot="media" icon="icon-wrap-top-bottom"></Icon>}
</ListItem> </ListItem>
<ListItem title={_t.textInFront} radio checked={wrapType === 'infront'} onClick={() => {props.onWrapType('infront')}}> <ListItem title={_t.textInFront} radio checked={wrapType === 'infront'} onClick={() => {props.onWrapType('infront')}}>
<Icon slot="media" icon="icon-wrap-infront"></Icon> {!isAndroid && <Icon slot="media" icon="icon-wrap-infront"></Icon>}
</ListItem> </ListItem>
<ListItem title={_t.textBehind} radio checked={wrapType === 'behind'} onClick={() => {props.onWrapType('behind')}}> <ListItem title={_t.textBehind} radio checked={wrapType === 'behind'} onClick={() => {props.onWrapType('behind')}}>
<Icon slot="media" icon="icon-wrap-behind"></Icon> {!isAndroid && <Icon slot="media" icon="icon-wrap-behind"></Icon>}
</ListItem> </ListItem>
</List> </List>
{ {
@ -132,7 +134,7 @@ const PageLinkSettings = props => {
</ListInput> </ListInput>
</List> </List>
<List> <List>
<ListButton className={stateValue.length < 1 ? 'disabled' : ''} title={_t.textReplaceImage} onClick={() => {onReplace()}}></ListButton> <ListButton className={'button-fill button-raised' + (stateValue.length < 1 ? ' disabled' : '')} title={_t.textReplaceImage} onClick={() => {onReplace()}}></ListButton>
</List> </List>
</Page> </Page>
) )
@ -204,8 +206,8 @@ const EditImage = props => {
}}></ListItem> }}></ListItem>
</List> </List>
<List> <List>
<ListButton title={_t.textActualSize} onClick={() => {props.onDefaulSize()}}/> <ListButton className='button-fill button-raised' title={_t.textActualSize} onClick={() => {props.onDefaulSize()}}/>
<ListButton title={_t.textRemoveImage} onClick={() => {props.onRemoveImage()}} className='red'/> <ListButton className='button-red button-fill button-raised' title={_t.textRemoveImage} onClick={() => {props.onRemoveImage()}}/>
</List> </List>
</Fragment> </Fragment>
) )

37
apps/documenteditor/mobile/src/view/edit/EditParagraph.jsx
View file

@ -1,9 +1,11 @@
import React, {Fragment, useState} from 'react'; import React, {Fragment, useState} from 'react';
import {observer, inject} from "mobx-react"; import {observer, inject} from "mobx-react";
import {List, ListItem, Icon, Row, Col, Button, Page, Navbar, Segmented, BlockTitle, Toggle} from 'framework7-react'; import {List, ListItem, Icon, Button, Page, Navbar, Segmented, BlockTitle, Toggle} from 'framework7-react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import {Device} from '../../../../../common/mobile/utils/device';
const PageAdvancedSettings = props => { const PageAdvancedSettings = props => {
const isAndroid = Device.android;
const { t } = useTranslation(); const { t } = useTranslation();
const metricText = Common.Utils.Metric.getCurrentMetricName(); const metricText = Common.Utils.Metric.getCurrentMetricName();
const storeFocusObjects = props.storeFocusObjects; const storeFocusObjects = props.storeFocusObjects;
@ -32,29 +34,44 @@ const PageAdvancedSettings = props => {
<BlockTitle>{t('Edit.textDistanceFromText')}</BlockTitle> <BlockTitle>{t('Edit.textDistanceFromText')}</BlockTitle>
<List> <List>
<ListItem title={t('Edit.textBefore')}> <ListItem title={t('Edit.textBefore')}>
<div slot='after-start'>{displayBefore}</div> {!isAndroid && <div slot='after-start'>{displayBefore}</div>}
<div slot='after'> <div slot='after'>
<Segmented> <Segmented>
<Button outline className='item-link decrement' onClick={() => {props.onDistanceBefore(spaceBefore, true)}}> - </Button> <Button outline className='decrement item-link' onClick={() => {props.onDistanceBefore(spaceBefore, true)}}>
<Button outline className='item-link increment' onClick={() => {props.onDistanceBefore(spaceBefore, false)}}> + </Button> {isAndroid ? <Icon icon="icon-expand-down"></Icon> : ' - '}
</Button>
{isAndroid && <label>{displayBefore}</label>}
<Button outline className='increment item-link' onClick={() => {props.onDistanceBefore(spaceBefore, false)}}>
{isAndroid ? <Icon icon="icon-expand-up"></Icon> : ' + '}
</Button>
</Segmented> </Segmented>
</div> </div>
</ListItem> </ListItem>
<ListItem title={t('Edit.textAfter')}> <ListItem title={t('Edit.textAfter')}>
<div slot='after-start'>{displayAfter}</div> {!isAndroid && <div slot='after-start'>{displayAfter}</div>}
<div slot='after'> <div slot='after'>
<Segmented> <Segmented>
<Button outline className='item-link decrement' onClick={() => {props.onDistanceAfter(spaceAfter, true)}}> - </Button> <Button outline className='decrement item-link' onClick={() => {props.onDistanceAfter(spaceAfter, true)}}>
<Button outline className='item-link increment' onClick={() => {props.onDistanceAfter(spaceAfter, false)}}> + </Button> {isAndroid ? <Icon icon="icon-expand-down"></Icon> : ' - '}
</Button>
{isAndroid && <label>{displayAfter}</label>}
<Button outline className='increment item-link' onClick={() => {props.onDistanceAfter(spaceAfter, false)}}>
{isAndroid ? <Icon icon="icon-expand-up"></Icon> : ' + '}
</Button>
</Segmented> </Segmented>
</div> </div>
</ListItem> </ListItem>
<ListItem title={t('Edit.textFirstLine')}> <ListItem title={t('Edit.textFirstLine')}>
<div slot='after-start'>{firstLine + ' ' + metricText}</div> {!isAndroid && <div slot='after-start'>{firstLine + ' ' + metricText}</div>}
<div slot='after'> <div slot='after'>
<Segmented> <Segmented>
<Button outline className='item-link decrement' onClick={() => {props.onSpinFirstLine(paragraphObj, true)}}> - </Button> <Button outline className='decrement item-link' onClick={() => {props.onSpinFirstLine(paragraphObj, true)}}>
<Button outline className='item-link increment' onClick={() => {props.onSpinFirstLine(paragraphObj, false)}}> + </Button> {isAndroid ? <Icon icon="icon-expand-down"></Icon> : ' - '}
</Button>
{isAndroid && <label>{firstLine + ' ' + metricText}</label>}
<Button outline className='increment item-link' onClick={() => {props.onSpinFirstLine(paragraphObj, false)}}>
{isAndroid ? <Icon icon="icon-expand-up"></Icon> : ' + '}
</Button>
</Segmented> </Segmented>
</div> </div>
</ListItem> </ListItem>

18
apps/documenteditor/mobile/src/view/edit/EditShape.jsx
View file

@ -2,6 +2,7 @@ import React, {Fragment, useState} from 'react';
import {observer, inject} from "mobx-react"; import {observer, inject} from "mobx-react";
import {List, ListItem, Icon, Row, Page, Navbar, BlockTitle, Toggle, Range, ListButton} from 'framework7-react'; import {List, ListItem, Icon, Row, Page, Navbar, BlockTitle, Toggle, Range, ListButton} from 'framework7-react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import {Device} from '../../../../../common/mobile/utils/device';
const PageStyle = props => { const PageStyle = props => {
return ( return (
@ -12,6 +13,7 @@ const PageStyle = props => {
}; };
const PageWrap = props => { const PageWrap = props => {
const isAndroid = Device.android;
const { t } = useTranslation(); const { t } = useTranslation();
const _t = t('Edit', {returnObjects: true}); const _t = t('Edit', {returnObjects: true});
const storeShapeSettings = props.storeShapeSettings; const storeShapeSettings = props.storeShapeSettings;
@ -28,25 +30,25 @@ const PageWrap = props => {
<Navbar title={_t.textWrap} backLink={_t.textBack} /> <Navbar title={_t.textWrap} backLink={_t.textBack} />
<List> <List>
<ListItem title={_t.textInline} radio checked={wrapType === 'inline'} onClick={() => {props.onWrapType('inline')}}> <ListItem title={_t.textInline} radio checked={wrapType === 'inline'} onClick={() => {props.onWrapType('inline')}}>
<Icon slot="media" icon="icon-wrap-inline"></Icon> {!isAndroid && <Icon slot="media" icon="icon-wrap-inline"></Icon>}
</ListItem> </ListItem>
<ListItem title={_t.textSquare} radio checked={wrapType === 'square'} onClick={() => {props.onWrapType('square')}}> <ListItem title={_t.textSquare} radio checked={wrapType === 'square'} onClick={() => {props.onWrapType('square')}}>
<Icon slot="media" icon="icon-wrap-square"></Icon> {!isAndroid && <Icon slot="media" icon="icon-wrap-square"></Icon>}
</ListItem> </ListItem>
<ListItem title={_t.textTight} radio checked={wrapType === 'tight'} onClick={() => {props.onWrapType('tight')}}> <ListItem title={_t.textTight} radio checked={wrapType === 'tight'} onClick={() => {props.onWrapType('tight')}}>
<Icon slot="media" icon="icon-wrap-tight"></Icon> {!isAndroid && <Icon slot="media" icon="icon-wrap-tight"></Icon>}
</ListItem> </ListItem>
<ListItem title={_t.textThrough} radio checked={wrapType === 'through'} onClick={() => {props.onWrapType('through')}}> <ListItem title={_t.textThrough} radio checked={wrapType === 'through'} onClick={() => {props.onWrapType('through')}}>
<Icon slot="media" icon="icon-wrap-through"></Icon> {!isAndroid && <Icon slot="media" icon="icon-wrap-through"></Icon>}
</ListItem> </ListItem>
<ListItem title={_t.textTopAndBottom} radio checked={wrapType === 'top-bottom'} onClick={() => {props.onWrapType('top-bottom')}}> <ListItem title={_t.textTopAndBottom} radio checked={wrapType === 'top-bottom'} onClick={() => {props.onWrapType('top-bottom')}}>
<Icon slot="media" icon="icon-wrap-top-bottom"></Icon> {!isAndroid && <Icon slot="media" icon="icon-wrap-top-bottom"></Icon>}
</ListItem> </ListItem>
<ListItem title={_t.textInFront} radio checked={wrapType === 'infront'} onClick={() => {props.onWrapType('infront')}}> <ListItem title={_t.textInFront} radio checked={wrapType === 'infront'} onClick={() => {props.onWrapType('infront')}}>
<Icon slot="media" icon="icon-wrap-infront"></Icon> {!isAndroid && <Icon slot="media" icon="icon-wrap-infront"></Icon>}
</ListItem> </ListItem>
<ListItem title={_t.textBehind} radio checked={wrapType === 'behind'} onClick={() => {props.onWrapType('behind')}}> <ListItem title={_t.textBehind} radio checked={wrapType === 'behind'} onClick={() => {props.onWrapType('behind')}}>
<Icon slot="media" icon="icon-wrap-behind"></Icon> {!isAndroid && <Icon slot="media" icon="icon-wrap-behind"></Icon>}
</ListItem> </ListItem>
</List> </List>
{ {
@ -184,7 +186,7 @@ const EditShape = props => {
}}></ListItem> }}></ListItem>
</List> </List>
<List> <List>
<ListButton title={_t.textRemoveShape} onClick={() => {props.onRemoveShape()}} className='red'/> <ListButton title={_t.textRemoveShape} onClick={() => {props.onRemoveShape()}} className='button-red button-fill button-raised'/>
</List> </List>
</Fragment> </Fragment>
) )

8
apps/documenteditor/mobile/src/view/edit/EditTable.jsx
View file

@ -2,6 +2,7 @@ import React, {Fragment, useState} from 'react';
import {observer, inject} from "mobx-react"; import {observer, inject} from "mobx-react";
import {Page, Navbar, List, ListItem, ListButton, Row, BlockTitle, Range, Toggle, Icon} from 'framework7-react'; import {Page, Navbar, List, ListItem, ListButton, Row, BlockTitle, Range, Toggle, Icon} from 'framework7-react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import {Device} from '../../../../../common/mobile/utils/device';
const PageTableOptions = props => { const PageTableOptions = props => {
const { t } = useTranslation(); const { t } = useTranslation();
@ -53,6 +54,7 @@ const PageWrap = props => {
TABLE_ALIGN_CENTER: 1, TABLE_ALIGN_CENTER: 1,
TABLE_ALIGN_RIGHT: 2 TABLE_ALIGN_RIGHT: 2
}; };
const isAndroid = Device.android;
const { t } = useTranslation(); const { t } = useTranslation();
const _t = t('Edit', {returnObjects: true}); const _t = t('Edit', {returnObjects: true});
const storeTableSettings = props.storeTableSettings; const storeTableSettings = props.storeTableSettings;
@ -68,10 +70,10 @@ const PageWrap = props => {
<Navbar title={_t.textWrap} backLink={_t.textBack} /> <Navbar title={_t.textWrap} backLink={_t.textBack} />
<List> <List>
<ListItem title={_t.textInline} radio checked={wrapType === 'inline'} onClick={() => {props.onWrapType(c_tableWrap.TABLE_WRAP_NONE)}}> <ListItem title={_t.textInline} radio checked={wrapType === 'inline'} onClick={() => {props.onWrapType(c_tableWrap.TABLE_WRAP_NONE)}}>
<Icon slot="media" icon="icon-wrap-table-inline"></Icon> {!isAndroid && <Icon slot="media" icon="icon-wrap-table-inline"></Icon>}
</ListItem> </ListItem>
<ListItem title={_t.textFlow} radio checked={wrapType === 'flow'} onClick={() => {props.onWrapType(c_tableWrap.TABLE_WRAP_PARALLEL)}}> <ListItem title={_t.textFlow} radio checked={wrapType === 'flow'} onClick={() => {props.onWrapType(c_tableWrap.TABLE_WRAP_PARALLEL)}}>
<Icon slot="media" icon="icon-wrap-table-flow"></Icon> {!isAndroid && <Icon slot="media" icon="icon-wrap-table-flow"></Icon>}
</ListItem> </ListItem>
</List> </List>
<List> <List>
@ -173,7 +175,7 @@ const EditTable = props => {
</a> </a>
</Row> </Row>
</ListItem> </ListItem>
<ListButton title={_t.textRemoveTable} onClick={() => {props.onRemoveTable()}} className='red'></ListButton> <ListButton title={_t.textRemoveTable} onClick={() => {props.onRemoveTable()}} className='button-red button-fill button-raised'></ListButton>
</List> </List>
<List> <List>
<ListItem title={_t.textTableOptions} link='/edit-table-options/' routeProps={{ <ListItem title={_t.textTableOptions} link='/edit-table-options/' routeProps={{

40
apps/documenteditor/mobile/src/view/edit/EditText.jsx
View file

@ -1,9 +1,11 @@
import React, {Fragment, useState} from 'react'; import React, {Fragment, useState} from 'react';
import {observer, inject} from "mobx-react"; import {observer, inject} from "mobx-react";
import {List, ListItem, Icon, Row, Col, Button, Page, Navbar, Segmented, BlockTitle} from 'framework7-react'; import {List, ListItem, Icon, Row, Button, Page, Navbar, Segmented, BlockTitle} from 'framework7-react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import {Device} from '../../../../../common/mobile/utils/device';
const PageFonts = props => { const PageFonts = props => {
const isAndroid = Device.android;
const { t } = useTranslation(); const { t } = useTranslation();
const storeTextSettings = props.storeTextSettings; const storeTextSettings = props.storeTextSettings;
const size = storeTextSettings.fontSize; const size = storeTextSettings.fontSize;
@ -29,11 +31,16 @@ const PageFonts = props => {
<Navbar title={t('Edit.textFonts')} backLink={t('Edit.textBack')} /> <Navbar title={t('Edit.textFonts')} backLink={t('Edit.textBack')} />
<List> <List>
<ListItem title={t('Edit.textSize')}> <ListItem title={t('Edit.textSize')}>
<div slot='after-start'>{displaySize}</div> {!isAndroid && <div slot='after-start'>{displaySize}</div>}
<div slot='after'> <div slot='after'>
<Segmented> <Segmented>
<Button outline className='item-link decrement' onClick={() => {props.changeFontSize(size, true)}}> - </Button> <Button outline className='decrement item-link' onClick={() => {props.changeFontSize(size, true)}}>
<Button outline className='item-link increment' onClick={() => {props.changeFontSize(size, false)}}> + </Button> {isAndroid ? <Icon icon="icon-expand-down"></Icon> : ' - '}
</Button>
{isAndroid && <label>{displaySize}</label>}
<Button outline className='increment item-link' onClick={() => {props.changeFontSize(size, false)}}>
{isAndroid ? <Icon icon="icon-expand-up"></Icon> : ' + '}
</Button>
</Segmented> </Segmented>
</div> </div>
</ListItem> </ListItem>
@ -61,6 +68,7 @@ const PageFonts = props => {
}; };
const PageAdditionalFormatting = props => { const PageAdditionalFormatting = props => {
const isAndroid = Device.android;
const { t } = useTranslation(); const { t } = useTranslation();
const storeTextSettings = props.storeTextSettings; const storeTextSettings = props.storeTextSettings;
const storeFocusObjects = props.storeFocusObjects; const storeFocusObjects = props.storeFocusObjects;
@ -85,11 +93,16 @@ const PageAdditionalFormatting = props => {
</List> </List>
<List> <List>
<ListItem title={t('Edit.textLetterSpacing')}> <ListItem title={t('Edit.textLetterSpacing')}>
<div slot='after-start'>{letterSpacing + ' ' + Common.Utils.Metric.getCurrentMetricName()}</div> {!isAndroid && <div slot='after-start'>{letterSpacing + ' ' + Common.Utils.Metric.getCurrentMetricName()}</div>}
<div slot='after'> <div slot='after'>
<Segmented> <Segmented>
<Button outline className='item-link decrement' onClick={() => {props.changeLetterSpacing(letterSpacing, true)}}> - </Button> <Button outline className='decrement item-link' onClick={() => {props.changeLetterSpacing(letterSpacing, true)}}>
<Button outline className='item-link increment' onClick={() => {props.changeLetterSpacing(letterSpacing, false)}}> + </Button> {isAndroid ? <Icon icon="icon-expand-down"></Icon> : ' - '}
</Button>
{isAndroid && <label>{letterSpacing + ' ' + Common.Utils.Metric.getCurrentMetricName()}</label>}
<Button outline className='increment item-link' onClick={() => {props.changeLetterSpacing(letterSpacing, false)}}>
{isAndroid ? <Icon icon="icon-expand-up"></Icon> : ' + '}
</Button>
</Segmented> </Segmented>
</div> </div>
</ListItem> </ListItem>
@ -196,6 +209,7 @@ const PageLineSpacing = props => {
}; };
const EditText = props => { const EditText = props => {
const isAndroid = Device.android;
const { t } = useTranslation(); const { t } = useTranslation();
const storeTextSettings = props.storeTextSettings; const storeTextSettings = props.storeTextSettings;
const fontName = storeTextSettings.fontName || t('Edit.textFonts'); const fontName = storeTextSettings.fontName || t('Edit.textFonts');
@ -222,11 +236,11 @@ const EditText = props => {
</Row> </Row>
</ListItem> </ListItem>
<ListItem title={t("Edit.textFontColor")} link="#"> <ListItem title={t("Edit.textFontColor")} link="#">
<Icon slot="media" icon="icon-text-color"></Icon> {!isAndroid && <Icon slot="media" icon="icon-text-color"></Icon>}
<span className="color-preview"></span> <span className="color-preview"></span>
</ListItem> </ListItem>
<ListItem title={t("Edit.textHighlightColor")} link="#"> <ListItem title={t("Edit.textHighlightColor")} link="#">
<Icon slot="media" icon="icon-text-selection"></Icon> {!isAndroid && <Icon slot="media" icon="icon-text-selection"></Icon>}
</ListItem> </ListItem>
<ListItem title={t("Edit.textAdditionalFormatting")} link="/edit-text-add-formatting/" routeProps={{ <ListItem title={t("Edit.textAdditionalFormatting")} link="/edit-text-add-formatting/" routeProps={{
onAdditionalStrikethrough: props.onAdditionalStrikethrough, onAdditionalStrikethrough: props.onAdditionalStrikethrough,
@ -234,7 +248,7 @@ const EditText = props => {
onAdditionalScript: props.onAdditionalScript, onAdditionalScript: props.onAdditionalScript,
changeLetterSpacing: props.changeLetterSpacing changeLetterSpacing: props.changeLetterSpacing
}}> }}>
<Icon slot="media" icon="icon-text-additional"></Icon> {!isAndroid && <Icon slot="media" icon="icon-text-additional"></Icon>}
</ListItem> </ListItem>
</List> </List>
<List> <List>
@ -267,17 +281,17 @@ const EditText = props => {
<ListItem title={t("Edit.textBullets")} link='/edit-text-bullets/' routeProps={{ <ListItem title={t("Edit.textBullets")} link='/edit-text-bullets/' routeProps={{
onBullet: props.onBullet onBullet: props.onBullet
}}> }}>
<Icon slot="media" icon="icon-bullets"></Icon> {!isAndroid && <Icon slot="media" icon="icon-bullets"></Icon>}
</ListItem> </ListItem>
<ListItem title={t("Edit.textNumbers")} link='/edit-text-numbers/' routeProps={{ <ListItem title={t("Edit.textNumbers")} link='/edit-text-numbers/' routeProps={{
onNumber: props.onNumber onNumber: props.onNumber
}}> }}>
<Icon slot="media" icon="icon-numbers"></Icon> {!isAndroid && <Icon slot="media" icon="icon-numbers"></Icon>}
</ListItem> </ListItem>
<ListItem title={t("Edit.textLineSpacing")} link='/edit-text-line-spacing/' routeProps={{ <ListItem title={t("Edit.textLineSpacing")} link='/edit-text-line-spacing/' routeProps={{
onLineSpacing: props.onLineSpacing onLineSpacing: props.onLineSpacing
}}> }}>
<Icon slot="media" icon="icon-linespacing"></Icon> {!isAndroid && <Icon slot="media" icon="icon-linespacing"></Icon>}
</ListItem> </ListItem>
</List> </List>
</Fragment> </Fragment>

48
apps/documenteditor/mobile/src/view/settings/DocumentSettings.jsx
View file

@ -1,7 +1,8 @@
import React, {useState} from 'react'; import React, {useState} from 'react';
import {observer, inject} from "mobx-react"; import {observer, inject} from "mobx-react";
import {Page, Navbar, List, ListItem, BlockTitle, Segmented, Button} from 'framework7-react'; import {Page, Navbar, List, ListItem, BlockTitle, Segmented, Button, Icon} from 'framework7-react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import {Device} from '../../../../../common/mobile/utils/device';
const PageDocumentFormats = props => { const PageDocumentFormats = props => {
const { t } = useTranslation(); const { t } = useTranslation();
@ -28,6 +29,7 @@ const PageDocumentFormats = props => {
}; };
const PageDocumentMargins = props => { const PageDocumentMargins = props => {
const isAndroid = Device.android;
const { t } = useTranslation(); const { t } = useTranslation();
const _t = t('Settings', {returnObjects: true}); const _t = t('Settings', {returnObjects: true});
const metricText = Common.Utils.Metric.getMetricName(Common.Utils.Metric.getCurrentMetric()); const metricText = Common.Utils.Metric.getMetricName(Common.Utils.Metric.getCurrentMetric());
@ -64,38 +66,58 @@ const PageDocumentMargins = props => {
<Navbar title={_t.textMargins} backLink={_t.textBack} /> <Navbar title={_t.textMargins} backLink={_t.textBack} />
<List> <List>
<ListItem title={_t.textTop}> <ListItem title={_t.textTop}>
<div slot='after-start'>{parseFloat(Common.Utils.Metric.fnRecalcFromMM(stateTop).toFixed(2)) + ' ' + metricText}</div> {!isAndroid && <div slot='after-start'>{parseFloat(Common.Utils.Metric.fnRecalcFromMM(stateTop).toFixed(2)) + ' ' + metricText}</div>}
<div slot='after'> <div slot='after'>
<Segmented> <Segmented>
<Button outline className='item-link decrement' onClick={() => {onChangeMargins('top', true)}}> - </Button> <Button outline className='decrement item-link' onClick={() => {onChangeMargins('top', true)}}>
<Button outline className='item-link increment' onClick={() => {onChangeMargins('top', false)}}> + </Button> {isAndroid ? <Icon icon="icon-expand-down"></Icon> : ' - '}
</Button>
{isAndroid && <label>{parseFloat(Common.Utils.Metric.fnRecalcFromMM(stateTop).toFixed(2)) + ' ' + metricText}</label>}
<Button outline className='increment item-link' onClick={() => {onChangeMargins('top', false)}}>
{isAndroid ? <Icon icon="icon-expand-up"></Icon> : ' + '}
</Button>
</Segmented> </Segmented>
</div> </div>
</ListItem> </ListItem>
<ListItem title={_t.textBottom}> <ListItem title={_t.textBottom}>
<div slot='after-start'>{parseFloat(Common.Utils.Metric.fnRecalcFromMM(stateBottom).toFixed(2))+ ' ' + metricText}</div> {!isAndroid && <div slot='after-start'>{parseFloat(Common.Utils.Metric.fnRecalcFromMM(stateBottom).toFixed(2))+ ' ' + metricText}</div>}
<div slot='after'> <div slot='after'>
<Segmented> <Segmented>
<Button outline className='item-link decrement' onClick={() => {onChangeMargins('bottom', true)}}> - </Button> <Button outline className='decrement item-link' onClick={() => {onChangeMargins('bottom', true)}}>
<Button outline className='item-link increment' onClick={() => {onChangeMargins('bottom', false)}}> + </Button> {isAndroid ? <Icon icon="icon-expand-down"></Icon> : ' - '}
</Button>
{isAndroid && <label>{parseFloat(Common.Utils.Metric.fnRecalcFromMM(stateBottom).toFixed(2))+ ' ' + metricText}</label>}
<Button outline className='increment item-link' onClick={() => {onChangeMargins('bottom', false)}}>
{isAndroid ? <Icon icon="icon-expand-up"></Icon> : ' + '}
</Button>
</Segmented> </Segmented>
</div> </div>
</ListItem> </ListItem>
<ListItem title={_t.textLeft}> <ListItem title={_t.textLeft}>
<div slot='after-start'>{parseFloat(Common.Utils.Metric.fnRecalcFromMM(stateLeft).toFixed(2))+ ' ' + metricText}</div> {!isAndroid && <div slot='after-start'>{parseFloat(Common.Utils.Metric.fnRecalcFromMM(stateLeft).toFixed(2))+ ' ' + metricText}</div>}
<div slot='after'> <div slot='after'>
<Segmented> <Segmented>
<Button outline className='item-link decrement' onClick={() => {onChangeMargins('left', true)}}> - </Button> <Button outline className='decrement item-link' onClick={() => {onChangeMargins('left', true)}}>
<Button outline className='item-link increment' onClick={() => {onChangeMargins('left', false)}}> + </Button> {isAndroid ? <Icon icon="icon-expand-down"></Icon> : ' - '}
</Button>
{isAndroid && <label>{parseFloat(Common.Utils.Metric.fnRecalcFromMM(stateLeft).toFixed(2))+ ' ' + metricText}</label>}
<Button outline className='increment item-link' onClick={() => {onChangeMargins('left', false)}}>
{isAndroid ? <Icon icon="icon-expand-up"></Icon> : ' + '}
</Button>
</Segmented> </Segmented>
</div> </div>
</ListItem> </ListItem>
<ListItem title={_t.textRight}> <ListItem title={_t.textRight}>
<div slot='after-start'>{parseFloat(Common.Utils.Metric.fnRecalcFromMM(stateRight).toFixed(2))+ ' ' + metricText}</div> {!isAndroid && <div slot='after-start'>{parseFloat(Common.Utils.Metric.fnRecalcFromMM(stateRight).toFixed(2))+ ' ' + metricText}</div>}
<div slot='after'> <div slot='after'>
<Segmented> <Segmented>
<Button outline className='item-link decrement' onClick={() => {onChangeMargins('right', true)}}> - </Button> <Button outline className='decrement item-link' onClick={() => {onChangeMargins('right', true)}}>
<Button outline className='item-link increment' onClick={() => {onChangeMargins('right', false)}}> + </Button> {isAndroid ? <Icon icon="icon-expand-down"></Icon> : ' - '}
</Button>
{isAndroid && <label>{parseFloat(Common.Utils.Metric.fnRecalcFromMM(stateRight).toFixed(2))+ ' ' + metricText}</label>}
<Button outline className='increment item-link' onClick={() => {onChangeMargins('right', false)}}>
{isAndroid ? <Icon icon="icon-expand-up"></Icon> : ' + '}
</Button>
</Segmented> </Segmented>
</div> </div>
</ListItem> </ListItem>