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 {
@blockTitleColor: #6d6d72;
@ -14,6 +11,8 @@
--f7-list-bg-color: @white;
--f7-navbar-bg-color: #f7f7f8;
--f7-tabbar-link-inactive-color: @themeColor;
--f7-radio-active-color: @themeColor;
--f7-toggle-active-color: @themeColor;
--f7-range-bar-active-bg-color: @themeColor;
@ -272,7 +271,7 @@
}
}
.red .list-button {
.button-red .list-button {
color: red;
}

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

@ -1,5 +1,217 @@
.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 {
.list:last-child {
li:last-child {

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

@ -21,4 +21,8 @@
align-items: center;
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;
@white: #ffffff;
@black: #000000;
@gray: #c4c4c4;
@import '../../../../common/mobile/resources/less/_mixins.less';
@import '../../../../common/mobile/resources/less/collaboration.less';

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

@ -26,13 +26,23 @@
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>');
}
&.icon-expand-down {
width: 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>');
}
}
}
i.icon {
&.icon-expand-down {
width: 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>');
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
&.icon-search {

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

@ -117,14 +117,16 @@ const EmptyEditLayout = () => {
};
const EditLayoutNavbar = ({ editors, inPopover }) => {
const isAndroid = Device.android;
const { t } = useTranslation();
const _t = t('Edit', {returnObjects: true});
return (
<Navbar>
{
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>)}
{isAndroid && <span className='tab-link-highlight' style={{width: 100 / editors.lenght + '%'}}></span>}
</div> :
<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 {List, ListItem, ListButton, Icon, Row, Col, Button, Page, Navbar, Segmented, BlockTitle, Toggle, Range} from 'framework7-react';
import { useTranslation } from 'react-i18next';
import {Device} from '../../../../../common/mobile/utils/device';
const PageStyle = props => {
return (
@ -12,6 +13,7 @@ const PageStyle = props => {
};
const PageWrap = props => {
const isAndroid = Device.android;
const { t } = useTranslation();
const _t = t('Edit', {returnObjects: true});
const storeChartSettings = props.storeChartSettings;
@ -28,25 +30,25 @@ const PageWrap = props => {
<Navbar title={_t.textWrap} backLink={_t.textBack} />
<List>
<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 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 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 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 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 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 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>
</List>
{
@ -147,7 +149,7 @@ const EditChart = props => {
}}></ListItem>
</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>
</Fragment>
)

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

@ -1,9 +1,11 @@
import React, { Fragment, useState } from '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 {Device} from "../../../../../common/mobile/utils/device";
const EditHeader = props => {
const isAndroid = Device.android;
const { t } = useTranslation();
const _t = t('Edit', {returnObjects: true});
const headerObject = props.storeFocusObjects.headerObject;
@ -35,11 +37,16 @@ const EditHeader = props => {
<Toggle checked={startPageNumber<0} onToggleChange={() => {props.onNumberingContinue(!(startPageNumber<0), _startAt)}}/>
</ListItem>
<ListItem title={_t.textStartAt} className={startPageNumber<0 ? 'disabled' : ''}>
<div slot='after-start'>{_startAt}</div>
{!isAndroid && <div slot='after-start'>{_startAt}</div>}
<div slot='after'>
<Segmented>
<Button outline className='item-link decrement' onClick={() => {props.onStartAt(_startAt, true)}}> - </Button>
<Button outline className='item-link increment' onClick={() => {props.onStartAt(_startAt, false)}}> + </Button>
<Button outline className='decrement item-link' onClick={() => {props.onStartAt(_startAt, true)}}>
{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>
</div>
</ListItem>

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

@ -15,7 +15,7 @@ const EditHyperlink = props => {
const [stateTip, setTip] = useState(tip);
return (
<Fragment>
<List inlineLabels>
<List inlineLabels className='inputs-list'>
<ListInput
label={_t.textLink}
type="text"
@ -39,10 +39,10 @@ const EditHyperlink = props => {
></ListInput>
</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)
}}></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>
</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 { useTranslation } from 'react-i18next';
import {f7} from 'framework7-react';
import {Device} from '../../../../../common/mobile/utils/device';
const PageWrap = props => {
const isAndroid = Device.android;
const { t } = useTranslation();
const _t = t('Edit', {returnObjects: true});
const storeImageSettings = props.storeImageSettings;
@ -21,25 +23,25 @@ const PageWrap = props => {
<Navbar title={_t.textWrap} backLink={_t.textBack} />
<List>
<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 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 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 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 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 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 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>
</List>
{
@ -132,7 +134,7 @@ const PageLinkSettings = props => {
</ListInput>
</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>
</Page>
)
@ -204,8 +206,8 @@ const EditImage = props => {
}}></ListItem>
</List>
<List>
<ListButton title={_t.textActualSize} onClick={() => {props.onDefaulSize()}}/>
<ListButton title={_t.textRemoveImage} onClick={() => {props.onRemoveImage()}} className='red'/>
<ListButton className='button-fill button-raised' title={_t.textActualSize} onClick={() => {props.onDefaulSize()}}/>
<ListButton className='button-red button-fill button-raised' title={_t.textRemoveImage} onClick={() => {props.onRemoveImage()}}/>
</List>
</Fragment>
)

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

@ -1,9 +1,11 @@
import React, {Fragment, useState} from '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 {Device} from '../../../../../common/mobile/utils/device';
const PageAdvancedSettings = props => {
const isAndroid = Device.android;
const { t } = useTranslation();
const metricText = Common.Utils.Metric.getCurrentMetricName();
const storeFocusObjects = props.storeFocusObjects;
@ -32,29 +34,44 @@ const PageAdvancedSettings = props => {
<BlockTitle>{t('Edit.textDistanceFromText')}</BlockTitle>
<List>
<ListItem title={t('Edit.textBefore')}>
<div slot='after-start'>{displayBefore}</div>
{!isAndroid && <div slot='after-start'>{displayBefore}</div>}
<div slot='after'>
<Segmented>
<Button outline className='item-link decrement' onClick={() => {props.onDistanceBefore(spaceBefore, true)}}> - </Button>
<Button outline className='item-link increment' onClick={() => {props.onDistanceBefore(spaceBefore, false)}}> + </Button>
<Button outline className='decrement item-link' onClick={() => {props.onDistanceBefore(spaceBefore, true)}}>
{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>
</div>
</ListItem>
<ListItem title={t('Edit.textAfter')}>
<div slot='after-start'>{displayAfter}</div>
{!isAndroid && <div slot='after-start'>{displayAfter}</div>}
<div slot='after'>
<Segmented>
<Button outline className='item-link decrement' onClick={() => {props.onDistanceAfter(spaceAfter, true)}}> - </Button>
<Button outline className='item-link increment' onClick={() => {props.onDistanceAfter(spaceAfter, false)}}> + </Button>
<Button outline className='decrement item-link' onClick={() => {props.onDistanceAfter(spaceAfter, true)}}>
{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>
</div>
</ListItem>
<ListItem title={t('Edit.textFirstLine')}>
<div slot='after-start'>{firstLine + ' ' + metricText}</div>
{!isAndroid && <div slot='after-start'>{firstLine + ' ' + metricText}</div>}
<div slot='after'>
<Segmented>
<Button outline className='item-link decrement' onClick={() => {props.onSpinFirstLine(paragraphObj, true)}}> - </Button>
<Button outline className='item-link increment' onClick={() => {props.onSpinFirstLine(paragraphObj, false)}}> + </Button>
<Button outline className='decrement item-link' onClick={() => {props.onSpinFirstLine(paragraphObj, true)}}>
{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>
</div>
</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 {List, ListItem, Icon, Row, Page, Navbar, BlockTitle, Toggle, Range, ListButton} from 'framework7-react';
import { useTranslation } from 'react-i18next';
import {Device} from '../../../../../common/mobile/utils/device';
const PageStyle = props => {
return (
@ -12,6 +13,7 @@ const PageStyle = props => {
};
const PageWrap = props => {
const isAndroid = Device.android;
const { t } = useTranslation();
const _t = t('Edit', {returnObjects: true});
const storeShapeSettings = props.storeShapeSettings;
@ -28,25 +30,25 @@ const PageWrap = props => {
<Navbar title={_t.textWrap} backLink={_t.textBack} />
<List>
<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 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 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 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 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 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 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>
</List>
{
@ -184,7 +186,7 @@ const EditShape = props => {
}}></ListItem>
</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>
</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 {Page, Navbar, List, ListItem, ListButton, Row, BlockTitle, Range, Toggle, Icon} from 'framework7-react';
import { useTranslation } from 'react-i18next';
import {Device} from '../../../../../common/mobile/utils/device';
const PageTableOptions = props => {
const { t } = useTranslation();
@ -53,6 +54,7 @@ const PageWrap = props => {
TABLE_ALIGN_CENTER: 1,
TABLE_ALIGN_RIGHT: 2
};
const isAndroid = Device.android;
const { t } = useTranslation();
const _t = t('Edit', {returnObjects: true});
const storeTableSettings = props.storeTableSettings;
@ -68,10 +70,10 @@ const PageWrap = props => {
<Navbar title={_t.textWrap} backLink={_t.textBack} />
<List>
<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 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>
</List>
<List>
@ -173,7 +175,7 @@ const EditTable = props => {
</a>
</Row>
</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>
<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 {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 {Device} from '../../../../../common/mobile/utils/device';
const PageFonts = props => {
const isAndroid = Device.android;
const { t } = useTranslation();
const storeTextSettings = props.storeTextSettings;
const size = storeTextSettings.fontSize;
@ -29,11 +31,16 @@ const PageFonts = props => {
<Navbar title={t('Edit.textFonts')} backLink={t('Edit.textBack')} />
<List>
<ListItem title={t('Edit.textSize')}>
<div slot='after-start'>{displaySize}</div>
{!isAndroid && <div slot='after-start'>{displaySize}</div>}
<div slot='after'>
<Segmented>
<Button outline className='item-link decrement' onClick={() => {props.changeFontSize(size, true)}}> - </Button>
<Button outline className='item-link increment' onClick={() => {props.changeFontSize(size, false)}}> + </Button>
<Button outline className='decrement item-link' onClick={() => {props.changeFontSize(size, true)}}>
{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>
</div>
</ListItem>
@ -61,6 +68,7 @@ const PageFonts = props => {
};
const PageAdditionalFormatting = props => {
const isAndroid = Device.android;
const { t } = useTranslation();
const storeTextSettings = props.storeTextSettings;
const storeFocusObjects = props.storeFocusObjects;
@ -85,11 +93,16 @@ const PageAdditionalFormatting = props => {
</List>
<List>
<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'>
<Segmented>
<Button outline className='item-link decrement' onClick={() => {props.changeLetterSpacing(letterSpacing, true)}}> - </Button>
<Button outline className='item-link increment' onClick={() => {props.changeLetterSpacing(letterSpacing, false)}}> + </Button>
<Button outline className='decrement item-link' onClick={() => {props.changeLetterSpacing(letterSpacing, true)}}>
{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>
</div>
</ListItem>
@ -196,6 +209,7 @@ const PageLineSpacing = props => {
};
const EditText = props => {
const isAndroid = Device.android;
const { t } = useTranslation();
const storeTextSettings = props.storeTextSettings;
const fontName = storeTextSettings.fontName || t('Edit.textFonts');
@ -222,11 +236,11 @@ const EditText = props => {
</Row>
</ListItem>
<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>
</ListItem>
<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 title={t("Edit.textAdditionalFormatting")} link="/edit-text-add-formatting/" routeProps={{
onAdditionalStrikethrough: props.onAdditionalStrikethrough,
@ -234,7 +248,7 @@ const EditText = props => {
onAdditionalScript: props.onAdditionalScript,
changeLetterSpacing: props.changeLetterSpacing
}}>
<Icon slot="media" icon="icon-text-additional"></Icon>
{!isAndroid && <Icon slot="media" icon="icon-text-additional"></Icon>}
</ListItem>
</List>
<List>
@ -267,17 +281,17 @@ const EditText = props => {
<ListItem title={t("Edit.textBullets")} link='/edit-text-bullets/' routeProps={{
onBullet: props.onBullet
}}>
<Icon slot="media" icon="icon-bullets"></Icon>
{!isAndroid && <Icon slot="media" icon="icon-bullets"></Icon>}
</ListItem>
<ListItem title={t("Edit.textNumbers")} link='/edit-text-numbers/' routeProps={{
onNumber: props.onNumber
}}>
<Icon slot="media" icon="icon-numbers"></Icon>
{!isAndroid && <Icon slot="media" icon="icon-numbers"></Icon>}
</ListItem>
<ListItem title={t("Edit.textLineSpacing")} link='/edit-text-line-spacing/' routeProps={{
onLineSpacing: props.onLineSpacing
}}>
<Icon slot="media" icon="icon-linespacing"></Icon>
{!isAndroid && <Icon slot="media" icon="icon-linespacing"></Icon>}
</ListItem>
</List>
</Fragment>

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

@ -1,7 +1,8 @@
import React, {useState} from '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 {Device} from '../../../../../common/mobile/utils/device';
const PageDocumentFormats = props => {
const { t } = useTranslation();
@ -28,6 +29,7 @@ const PageDocumentFormats = props => {
};
const PageDocumentMargins = props => {
const isAndroid = Device.android;
const { t } = useTranslation();
const _t = t('Settings', {returnObjects: true});
const metricText = Common.Utils.Metric.getMetricName(Common.Utils.Metric.getCurrentMetric());
@ -64,38 +66,58 @@ const PageDocumentMargins = props => {
<Navbar title={_t.textMargins} backLink={_t.textBack} />
<List>
<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'>
<Segmented>
<Button outline className='item-link decrement' onClick={() => {onChangeMargins('top', true)}}> - </Button>
<Button outline className='item-link increment' onClick={() => {onChangeMargins('top', false)}}> + </Button>
<Button outline className='decrement item-link' onClick={() => {onChangeMargins('top', true)}}>
{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>
</div>
</ListItem>
<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'>
<Segmented>
<Button outline className='item-link decrement' onClick={() => {onChangeMargins('bottom', true)}}> - </Button>
<Button outline className='item-link increment' onClick={() => {onChangeMargins('bottom', false)}}> + </Button>
<Button outline className='decrement item-link' onClick={() => {onChangeMargins('bottom', true)}}>
{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>
</div>
</ListItem>
<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'>
<Segmented>
<Button outline className='item-link decrement' onClick={() => {onChangeMargins('left', true)}}> - </Button>
<Button outline className='item-link increment' onClick={() => {onChangeMargins('left', false)}}> + </Button>
<Button outline className='decrement item-link' onClick={() => {onChangeMargins('left', true)}}>
{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>
</div>
</ListItem>
<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'>
<Segmented>
<Button outline className='item-link decrement' onClick={() => {onChangeMargins('right', true)}}> - </Button>
<Button outline className='item-link increment' onClick={() => {onChangeMargins('right', false)}}> + </Button>
<Button outline className='decrement item-link' onClick={() => {onChangeMargins('right', true)}}>
{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>
</div>
</ListItem>