[PE mobile] Fixed EditSlide and styles

2021-01-20 17:30:52 +03:00 · 2021-01-20 17:30:52 +03:00 · 032c1d9dda
parent 4b0b0478ad
commit 032c1d9dda
5 changed files with 104 additions and 43 deletions
--- a/apps/common/mobile/resources/less/common-ios.less
+++ b/apps/common/mobile/resources/less/common-ios.less
@ -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 {
        color: red;
    }
--- a/apps/common/mobile/resources/less/common-material.less
+++ b/apps/common/mobile/resources/less/common-material.less
@ -2,6 +2,7 @@
 .device-android {
    @tabLinkColor: rgba(255,255,255,.7);
    @red: #f44336;
+    @white: #fff;
    --f7-navbar-shadow-image: none;
    --f7-radio-active-color: @themeColor;
    --f7-toggle-active-color: @themeColor;
@ -35,29 +36,24 @@
    }
    .button {
        --f7-button-text-color: @themeColor;
-        border: 1px solid @themeColor;
        color: @themeColor;
        text-align: center;
        display: block;
-        // border-radius: 2px;
-        line-height: 27px;
-        border-radius: 5px;
-        // line-height: 36px;
+        border-radius: 2px;
+        line-height: 36px;
        box-sizing: border-box;
        appearance: none;
        background: 0 0;
        margin: 0;
-        // height: 36px;
-        height: 29px;
+        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;
-        padding: 0 10px;
+        min-width: 64px;
+        padding: 0 8px;
        position: relative;
        overflow: hidden;
        outline: 0;
@ -66,6 +62,33 @@
        -webkit-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 {
        .button {
            min-width: 0;
--- a/apps/common/mobile/resources/less/common.less
+++ b/apps/common/mobile/resources/less/common.less
@ -3,7 +3,7 @@
@black: #000000;
@gray: #c4c4c4;
@green: #4cd964;
-@brightred: #f00;
+@red: #f00;
@background-normal: @white;
@autoColor: @black;

@ -238,25 +238,32 @@
    }
 }

-.list {
-    .apply-all, .duplicate-slide, .delete-slide {
-        border: 0;
-        .item-content {
-            padding-left: 0;
-        }
-        .item-inner {
-            justify-content: center;
-            padding-right: 0;
-        }
-        .item-link .item-inner::before {
+.buttons-list {
+    ul {
+        &::before, &::after {
            display: none;
        }
-    }
-    .apply-all, .duplicate-slide {
-        color: @themeColor;
-    }
-    .delete-slide {
-        color: @brightred;
+        li {
+            border: 0;
+            font-weight: normal;
+            .item-link {
+                height: 100%;
+                .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;
+                    }
+                }
+            }
+        }
    }
 }

--- a/apps/presentationeditor/mobile/src/less/icons-material.less
+++ b/apps/presentationeditor/mobile/src/less/icons-material.less
@ -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>');
    }

-    &.icon-text-align-jast {
+    &.icon-text-align-just {
      width: 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>');
--- a/apps/presentationeditor/mobile/src/view/edit/EditSlide.jsx
+++ b/apps/presentationeditor/mobile/src/view/edit/EditSlide.jsx
@ -1,9 +1,9 @@
 import React, {Fragment, useState} from '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 { useTranslation } from 'react-i18next';
-// import {Device} from '../../../../../common/mobile/utils/device';
+import {Device} from '../../../../../common/mobile/utils/device';

 const EditSlide = props => {
    const { t } = useTranslation();
@ -31,9 +31,9 @@ const EditSlide = props => {
                    onFillColor: props.onFillColor
                }}></ListItem>
            </List>
-            <List>
-                <ListItem href="#" className="duplicate-slide" onClick={props.onDuplicateSlide}>{_t.textDuplicateSlide}</ListItem>
-                <ListItem href="#" className="delete-slide" onClick={props.onRemoveSlide}>{_t.textDeleteSlide}</ListItem>
+            <List className="buttons-list">
+                <ListItem href="#" className="button button-raised button-fill" onClick={props.onDuplicateSlide}>{_t.textDuplicateSlide}</ListItem>
+                <ListItem href="#" className="button button-raised button-red" onClick={props.onRemoveSlide}>{_t.textDeleteSlide}</ListItem>
            </List>
        </Fragment>
    )
@ -129,6 +129,7 @@ const PageLayout = props => {
 const PageTransition = props => {
    const { t } = useTranslation();
    const _t = t("View.Edit", { returnObjects: true });
+    const isAndroid = Device.android;
    const _arrEffect = [
        {displayValue: _t.textNone,    value: Asc.c_oAscSlideTransitionTypes.None},
        {displayValue: _t.textFade,    value: Asc.c_oAscSlideTransitionTypes.Fade},
@ -257,20 +258,27 @@ const PageTransition = props => {
                    }}>
                </ListItem>
                <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>
-                        <p className="buttons-row">
-                            <span className="button" onClick={() => {
+                    </div>}
+                    <div slot="after" className="splitter">
+                        <Segmented>
+                            <Button outline className='decrement item-link' onClick={() => {
                                let duration = parseInt(_effectDuration / 1000);
                                duration = Math.max(0, --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);
                                duration = Math.min(300, ++duration);
                                props.changeDuration(duration);
-                            }}>+</span>
-                        </p>
+                            }}>
+                                {isAndroid ? <Icon icon="icon-expand-up"></Icon> : ' + '}
+                            </Button>
+                        </Segmented>
                    </div>
                </ListItem>
            </List>
@ -297,8 +305,8 @@ const PageTransition = props => {
                    </div>
                </ListItem>
            </List>
-            <List>
-                <ListItem className="apply-all" href="#" onClick={props.onApplyAll}>{_t.textApplyAll}</ListItem>
+            <List className="buttons-list">
+                <ListItem href="#" className="button button-raised button-fill" onClick={props.onApplyAll}>{_t.textApplyAll}</ListItem>
            </List>
        </Page>
    );