Merge pull request #1953 from ONLYOFFICE/feature/fix-bugs

Feature/fix bugs

apps/common/mobile/resources/less/common.less

@@ -619,65 +619,7 @@
     }
 }
 
-// Cell styles 
-
-.cell-styles-list {
-    ul {
-        display: flex;
-        justify-content: space-around;
-        flex-wrap: wrap;
-        padding-left: 5px;
-        padding-right: 5px;
-        padding-top: 5px;
-        background-color: @background-tertiary;
-        li.item-theme {
-            // border: 0.5px solid #c8c7cc;
-            border: 2px solid @fill-white;
-            padding: 1px;
-            background-repeat: no-repeat;
-            width: 108px;
-            height: 53px;
-            margin-bottom: 8px;
-            background-position: center;
-            .item-content {
-                width: 100%;
-                height: 100%;
-                padding: 0;
-                .item-inner {
-                    width: 100%;
-                    height: 100%;
-                    padding: 0;
-                    &:after {
-                        display: none;
-                    }
-                    .thumb {
-                        width: 100%;
-                        height: 100%;
-                        padding: 0;
-                        background-size: contain;
-                        background-color: var(--canvas-content-background);
-                    }
-                }
-            }
-            &.active:before {
-                content: '';
-                position: absolute;
-                width: 22px;
-                height: 22px;
-                right: 2px;
-                bottom: 2px;
-                z-index: 1;
-                .encoded-svg-background('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 22 22" fill="#40865c"><g><circle fill="#fff" cx="11" cy="11" r="11"/><path d="M11,21A10,10,0,1,1,21,11,10,10,0,0,1,11,21h0ZM17.4,7.32L17.06,7a0.48,0.48,0,0,0-.67,0l-7,6.84L6.95,11.24a0.51,0.51,0,0,0-.59.08L6,11.66a0.58,0.58,0,0,0,0,.65l3.19,3.35a0.38,0.38,0,0,0,.39,0L17.4,8a0.48,0.48,0,0,0,0-.67h0Z"/></g></svg>');
-            }
-        }
-        &:after {
-            display: none;
-        }
-    }
-}
-
 // input[type="number"]
-
 input[type="number"]::-webkit-outer-spin-button,
 input[type="number"]::-webkit-inner-spin-button {
     -webkit-appearance: none;
@@ -685,7 +627,6 @@ input[type="number"]::-webkit-inner-spin-button {
 }
 
 // Regional Settings
-
 .icon.lang-flag {
     background-size: 48px auto;
     background-image: ~'url(@{common-image-path}/controls/flags@2x.png)';
@@ -1115,9 +1056,9 @@ input[type="number"]::-webkit-inner-spin-button {
 }
 
 // Swiper
-//.swiper-container {
+.swiper-wrapper .swiper-slide .list ul {
-//    height: 100%;
+    background-color: transparent;
-//}
+}
 
 .swiper-pagination-bullet {
     background: @background-menu-divider;
@@ -1128,10 +1069,11 @@ input[type="number"]::-webkit-inner-spin-button {
 }
 
 .swiper-pagination-bullets {
-    position: relative;
+    position: fixed;
-    margin-top: 10px;
+    width: 100%;
+    bottom: 9px;
     .swiper-pagination-bullet {
-        margin: 0 8px;
+        margin: 0 5.5px;
     }
 }
 

apps/spreadsheeteditor/mobile/src/less/app-ios.less

@@ -20,4 +20,20 @@
     .tooltip-cell-data {
         border-radius: 4px;
     }
+
+    .all-list.popover {
+        .view {
+            border-radius: var(--f7-popover-border-radius);
+        }
+        .page-content {
+            border-radius: var(--f7-popover-border-radius);
+
+            & > .list:last-child {
+                margin-bottom: 0;
+            }
+        }
+        .list {
+            overflow: hidden;
+        }
+    }
 }

apps/spreadsheeteditor/mobile/src/less/app.less

@@ -210,3 +210,60 @@
         margin: 0;
     }
 }
+
+// Cell styles
+
+.cell-styles-list {
+    ul {
+        display: flex;
+        justify-content: space-around;
+        flex-wrap: wrap;
+        padding-left: 5px;
+        padding-right: 5px;
+        padding-top: 5px;
+        background-color: @background-tertiary;
+        li.item-theme {
+            // border: 0.5px solid #c8c7cc;
+            border: 2px solid @fill-white;
+            padding: 1px;
+            background-repeat: no-repeat;
+            width: 108px;
+            height: 53px;
+            margin-bottom: 8px;
+            background-position: center;
+            .item-content {
+                width: 100%;
+                height: 100%;
+                padding: 0;
+                .item-inner {
+                    width: 100%;
+                    height: 100%;
+                    padding: 0;
+                    &:after {
+                        display: none;
+                    }
+                    .thumb {
+                        width: 100%;
+                        height: 100%;
+                        padding: 0;
+                        background-size: contain;
+                        background-color: var(--canvas-content-background);
+                    }
+                }
+            }
+            &.active:before {
+                content: '';
+                position: absolute;
+                width: 22px;
+                height: 22px;
+                right: 2px;
+                bottom: 2px;
+                z-index: 1;
+                .encoded-svg-background('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 22 22" fill="#40865c"><g><circle fill="#fff" cx="11" cy="11" r="11"/><path d="M11,21A10,10,0,1,1,21,11,10,10,0,0,1,11,21h0ZM17.4,7.32L17.06,7a0.48,0.48,0,0,0-.67,0l-7,6.84L6.95,11.24a0.51,0.51,0,0,0-.59.08L6,11.66a0.58,0.58,0,0,0,0,.65l3.19,3.35a0.38,0.38,0,0,0,.39,0L17.4,8a0.48,0.48,0,0,0,0-.67h0Z"/></g></svg>');
+            }
+        }
+        &:after {
+            display: none;
+        }
+    }
+}

apps/spreadsheeteditor/mobile/src/view/add/AddChart.jsx

@@ -1,17 +1,42 @@
 import React, {Fragment, useState} from 'react';
 import {observer, inject} from "mobx-react";
 import {Swiper, SwiperSlide} from 'framework7-react';
+import {Device} from "../../../../../common/mobile/utils/device";
 
 const AddChart = props => {
     const types = props.storeChartSettings.types;
     const countSlides = Math.floor(types.length / 3);
-    const arraySlides = Array(countSlides).fill(countSlides);
+    const arraySlides = !Device.phone ? Array(countSlides).fill(countSlides) : [types.slice(0, 6), types.slice(6)];
     
     return (
         <div className={'dataview chart-types'}>
             {types && types.length ? (
                 <Swiper pagination={true}>
-                    {arraySlides.map((_, indexSlide) => {
+                    {Device.phone ?
+                        arraySlides.map((typesSlide, indexSlide) => {
+                            return (
+                                <SwiperSlide key={indexSlide}>
+                                    {typesSlide.map((row, indexRow) => {
+                                        return (
+                                            <ul className="row" key={`row-${indexRow}`}>
+                                                {row.map((type, index) => {
+                                                    return (
+                                                        <li key={`${indexRow}-${index}`}
+                                                            onClick={() => {
+                                                                props.onInsertChart(type.type)
+                                                            }}>
+                                                            <div className={`thumb ${type.thumb}`}></div>
+                                                        </li>
+                                                    )
+                                                })}
+                                            </ul>
+                                        )
+                                    })}
+                                </SwiperSlide>
+                            )
+                        })
+                        :
+                        arraySlides.map((_, indexSlide) => {
                             let typesSlide = types.slice(indexSlide * 3, (indexSlide * 3) + 3);
 
                             return (
@@ -22,7 +47,9 @@ const AddChart = props => {
                                                 {row.map((type, index) => {
                                                     return (
                                                         <li key={`${indexRow}-${index}`}
-                                                        onClick={()=>{props.onInsertChart(type.type)}}>
+                                                            onClick={() => {
+                                                                props.onInsertChart(type.type)
+                                                            }}>
                                                             <div className={`thumb ${type.thumb}`}></div>
                                                         </li>
                                                     )