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

[PE mobile] Fixed EditSlide and styles

Browse source
This commit is contained in:
SergeyEzhin 2021-01-20 17:30:52 +03:00
parent 4b0b0478ad
commit 032c1d9dda
5 changed files with 104 additions and 43 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -293,6 +293,29 @@
} }
} }
.button-fill {
color: @themeColor;
background-color: @white;
}
.button-red {
color: @red;
background-color: @white;
}
.buttons-list {
li {
border: 0;
border-radius: 0;
height: 43px;
min-height: 43px;
font-size: 17px;
text-transform: initial;
padding: 0;
box-shadow: none;
}
}
.button-red .list-button { .button-red .list-button {
color: red; color: red;
} }

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

@ -2,6 +2,7 @@
.device-android { .device-android {
@tabLinkColor: rgba(255,255,255,.7); @tabLinkColor: rgba(255,255,255,.7);
@red: #f44336; @red: #f44336;
@white: #fff;
--f7-navbar-shadow-image: none; --f7-navbar-shadow-image: none;
--f7-radio-active-color: @themeColor; --f7-radio-active-color: @themeColor;
--f7-toggle-active-color: @themeColor; --f7-toggle-active-color: @themeColor;
@ -35,29 +36,24 @@
} }
.button { .button {
--f7-button-text-color: @themeColor; --f7-button-text-color: @themeColor;
border: 1px solid @themeColor;
color: @themeColor; color: @themeColor;
text-align: center; text-align: center;
display: block; display: block;
// border-radius: 2px; border-radius: 2px;
line-height: 27px; line-height: 36px;
border-radius: 5px;
// line-height: 36px;
box-sizing: border-box; box-sizing: border-box;
appearance: none; appearance: none;
background: 0 0; background: 0 0;
margin: 0; margin: 0;
// height: 36px; height: 36px;
height: 29px;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
font-size: 14px; font-size: 14px;
text-transform: uppercase; text-transform: uppercase;
font-family: inherit; font-family: inherit;
cursor: pointer; cursor: pointer;
// min-width: 64px; min-width: 64px;
// padding: 0 8px; padding: 0 8px;
padding: 0 10px;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
outline: 0; outline: 0;
@ -66,6 +62,33 @@
-webkit-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0); transform: translate3d(0,0,0);
} }
.button-fill {
color: @white;
background-color: @themeColor;
}
.button-raised {
box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.24);
}
.button-red {
color: @white;
background-color: @red;
}
.buttons-list {
li {
margin: 20px 16px;
color: @white;
border-radius: 2px;
text-transform: uppercase;
height: 36px;
min-height: 36px;
font-size: 14px;
}
}
.table-presets { .table-presets {
.button { .button {
min-width: 0; min-width: 0;

43
apps/common/mobile/resources/less/common.less
View file

@ -3,7 +3,7 @@
@black: #000000; @black: #000000;
@gray: #c4c4c4; @gray: #c4c4c4;
@green: #4cd964; @green: #4cd964;
@brightred: #f00; @red: #f00;
@background-normal: @white; @background-normal: @white;
@autoColor: @black; @autoColor: @black;
@ -238,25 +238,32 @@
} }
} }
.list { .buttons-list {
.apply-all, .duplicate-slide, .delete-slide { ul {
border: 0; &::before, &::after {
.item-content {
padding-left: 0;
}
.item-inner {
justify-content: center;
padding-right: 0;
}
.item-link .item-inner::before {
display: none; display: none;
} }
} li {
.apply-all, .duplicate-slide { border: 0;
color: @themeColor; font-weight: normal;
} .item-link {
.delete-slide { height: 100%;
color: @brightred; .item-content {
min-height: initial;
height: 100%;
padding: 0;
}
.item-inner {
justify-content: center;
align-items: center;
padding: 0;
min-height: initial;
&::before {
display: none;
}
}
}
}
} }
} }

2
apps/presentationeditor/mobile/src/less/icons-material.less
View file

@ -127,7 +127,7 @@
.encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M1,3v1h21V3H1z M4,7v1h14V7H4z M1,12h21v-1H1V12z M4,15v1h14v-1H4z M1,20h21v-1H1V20z"/></g></svg>'); .encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M1,3v1h21V3H1z M4,7v1h14V7H4z M1,12h21v-1H1V12z M4,15v1h14v-1H4z M1,20h21v-1H1V20z"/></g></svg>');
} }
&.icon-text-align-jast { &.icon-text-align-just {
width: 22px; width: 22px;
height: 22px; height: 22px;
.encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M1,3v1h21V3H1z M1,8h21V7H1V8z M1,12h21v-1H1V12z M1,16h21v-1H1V16z M1,20h21v-1H1V20z"/></g></svg>'); .encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M1,3v1h21V3H1z M1,8h21V7H1V8z M1,12h21v-1H1V12z M1,16h21v-1H1V16z M1,20h21v-1H1V20z"/></g></svg>');

36
apps/presentationeditor/mobile/src/view/edit/EditSlide.jsx
View file

@ -1,9 +1,9 @@
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 {f7, Page, Navbar, List, ListItem, Row, BlockTitle, Link, Toggle, Icon, View, NavRight, ListItemCell, Range} from 'framework7-react'; import {f7, Page, Navbar, List, ListItem, Row, BlockTitle, Link, Toggle, Icon, View, NavRight, ListItemCell, Range, Button, Segmented} from 'framework7-react';
import { ThemeColorPalette, CustomColorPicker } from '../../../../../common/mobile/lib/component/ThemeColorPalette.jsx'; import { ThemeColorPalette, CustomColorPicker } from '../../../../../common/mobile/lib/component/ThemeColorPalette.jsx';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
// import {Device} from '../../../../../common/mobile/utils/device'; import {Device} from '../../../../../common/mobile/utils/device';
const EditSlide = props => { const EditSlide = props => {
const { t } = useTranslation(); const { t } = useTranslation();
@ -31,9 +31,9 @@ const EditSlide = props => {
onFillColor: props.onFillColor onFillColor: props.onFillColor
}}></ListItem> }}></ListItem>
</List> </List>
<List> <List className="buttons-list">
<ListItem href="#" className="duplicate-slide" onClick={props.onDuplicateSlide}>{_t.textDuplicateSlide}</ListItem> <ListItem href="#" className="button button-raised button-fill" onClick={props.onDuplicateSlide}>{_t.textDuplicateSlide}</ListItem>
<ListItem href="#" className="delete-slide" onClick={props.onRemoveSlide}>{_t.textDeleteSlide}</ListItem> <ListItem href="#" className="button button-raised button-red" onClick={props.onRemoveSlide}>{_t.textDeleteSlide}</ListItem>
</List> </List>
</Fragment> </Fragment>
) )
@ -129,6 +129,7 @@ const PageLayout = props => {
const PageTransition = props => { const PageTransition = props => {
const { t } = useTranslation(); const { t } = useTranslation();
const _t = t("View.Edit", { returnObjects: true }); const _t = t("View.Edit", { returnObjects: true });
const isAndroid = Device.android;
const _arrEffect = [ const _arrEffect = [
{displayValue: _t.textNone, value: Asc.c_oAscSlideTransitionTypes.None}, {displayValue: _t.textNone, value: Asc.c_oAscSlideTransitionTypes.None},
{displayValue: _t.textFade, value: Asc.c_oAscSlideTransitionTypes.Fade}, {displayValue: _t.textFade, value: Asc.c_oAscSlideTransitionTypes.Fade},
@ -257,20 +258,27 @@ const PageTransition = props => {
}}> }}>
</ListItem> </ListItem>
<ListItem title={_t.textDuration} disabled={_effect == Asc.c_oAscSlideTransitionTypes.None}> <ListItem title={_t.textDuration} disabled={_effect == Asc.c_oAscSlideTransitionTypes.None}>
<div slot="after" className="splitter"> {!isAndroid && <div slot='after-start'>
<label>{(_effectDuration !== null && _effectDuration !== undefined) ? (parseInt(_effectDuration / 1000.) + ' ' + _t.textSec) : ''}</label> <label>{(_effectDuration !== null && _effectDuration !== undefined) ? (parseInt(_effectDuration / 1000.) + ' ' + _t.textSec) : ''}</label>
<p className="buttons-row"> </div>}
<span className="button" onClick={() => { <div slot="after" className="splitter">
<Segmented>
<Button outline className='decrement item-link' onClick={() => {
let duration = parseInt(_effectDuration / 1000); let duration = parseInt(_effectDuration / 1000);
duration = Math.max(0, --duration); duration = Math.max(0, --duration);
props.changeDuration(duration); props.changeDuration(duration);
}}>-</span> }}>
<span className="button" onClick={() => { {isAndroid ? <Icon icon="icon-expand-down"></Icon> : ' - '}
</Button>
{isAndroid && <label>{(_effectDuration !== null && _effectDuration !== undefined) ? (parseInt(_effectDuration / 1000.) + ' ' + _t.textSec) : ''}</label>}
<Button outline className='increment item-link' onClick={() => {
let duration = parseInt(_effectDuration / 1000); let duration = parseInt(_effectDuration / 1000);
duration = Math.min(300, ++duration); duration = Math.min(300, ++duration);
props.changeDuration(duration); props.changeDuration(duration);
}}>+</span> }}>
</p> {isAndroid ? <Icon icon="icon-expand-up"></Icon> : ' + '}
</Button>
</Segmented>
</div> </div>
</ListItem> </ListItem>
</List> </List>
@ -297,8 +305,8 @@ const PageTransition = props => {
</div> </div>
</ListItem> </ListItem>
</List> </List>
<List> <List className="buttons-list">
<ListItem className="apply-all" href="#" onClick={props.onApplyAll}>{_t.textApplyAll}</ListItem> <ListItem href="#" className="button button-raised button-fill" onClick={props.onApplyAll}>{_t.textApplyAll}</ListItem>
</List> </List>
</Page> </Page>
); );