[SSE mobile] Corrected Text Settings and Chart Settings

apps/common/mobile/lib/component/ThemeColorPalette.jsx

@@ -3,7 +3,6 @@ import { f7, ListItem, List, Icon } from 'framework7-react';
 import { useTranslation } from 'react-i18next';
 
 const ThemeColors = ({ themeColors, onColorClick, curColor }) => {
-    console.log(curColor);
     return (
         <div className='palette'>
             {themeColors.map((row, rowIndex) => {

apps/common/mobile/resources/less/common-ios.less

@@ -3,6 +3,7 @@
 
 .device-ios {
     @blockTitleColor: #6d6d72;
+    @darkGreen: #40865c;
 
     --f7-navbar-link-color: @themeColor;
     --f7-navbar-text-color: @black;
@@ -389,4 +390,32 @@
             background-color: @white;
         }
     }
+
+    // input[type="number"]
+
+    .item-input {
+        width: 100%;
+        margin-top: -8px;
+        margin-bottom: -7px;
+        flex-shrink: 1;
+    }
+
+    .item-content { 
+        .item-after input {
+            height: 43px;
+        }
+        .item-after input.right {
+            text-align: right;
+        }
+        .item-after input.field {
+            color: @darkGreen;
+        }
+    }
+    
+    input[type="number"]::placeholder { color: @darkGreen;}
+    input[type="number"]::-webkit-input-placeholder {color: @darkGreen;}
+    input[type="number"]::-moz-placeholder {color: @darkGreen;}
+    input[type="number"]:-moz-placeholder {color: @darkGreen;}
+    input[type="number"]:-ms-input-placeholder {color: @darkGreen;}
+
 }

apps/common/mobile/resources/less/common-material.less

@@ -3,6 +3,9 @@
     @tabLinkColor: rgba(255,255,255,.7);
     @red: #f44336;
     @white: #fff;
+    @darkGreen: #40865c;
+    @darkGrey: #757575;
+
     --f7-navbar-shadow-image: none;
     --f7-radio-active-color: @themeColor;
     --f7-toggle-active-color: @themeColor;
@@ -278,7 +281,9 @@
             }
         }
     }
+
     // Color palette
+
     #color-picker {
         .right-block {
             .button-round {
@@ -286,4 +291,55 @@
             }
         }
     }
+
+    // input[type="number"]
+
+    .list.inputs-list {
+        ul:after {
+            display: none;
+        }
+        .item-inner {
+            display: block;
+            margin-bottom: 4px;
+            padding-bottom: 0;
+            &:after {
+                display: none;
+            }
+        }
+        .item-input {
+            flex-shrink: 1;
+            font-size: 0;
+            position: relative;
+            margin-bottom: 4px;
+            min-height: 36px;
+            &:after {
+                content: '';
+                position: absolute;
+                left: 0;
+                bottom: 0;
+                right: auto;
+                top: auto;
+                height: 1px;
+                width: 100%;
+                background-color: rgba(0,0,0,.12);
+                display: block;
+                z-index: 15;
+                transform-origin: 50% 100%;
+                transition: .2;
+            }
+        }
+        .item-link {
+            .item-inner .item-title {
+                font-size: 16px;
+            }
+        }
+        .item-after {
+            font-size: 14px;
+            color: @darkGrey;
+            div {
+                width: 100%;
+            }
+        }
+    }
+
 }

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

@@ -3,7 +3,6 @@
 @black: #000000;
 @gray: #c4c4c4;
 @green: #4cd964;
-@darkGreen: #40865c;
 @red: #f00;
 @background-normal: @white;
 @autoColor: @black;
@@ -457,20 +456,7 @@
     }
 }
 
-.list-block .item-input {
+// input[type="number"]
-    width: 100%;
-    margin-top: -8px;
-    margin-bottom: -7px;
-    flex-shrink: 1;
-}
-
-.item-content .item-after input.field.right {
-    text-align: right;
-}
-
-.item-content .item-after input.field {
-    color: @darkGreen;
-}
 
 input[type="number"]::-webkit-outer-spin-button,
 input[type="number"]::-webkit-inner-spin-button {
@@ -478,10 +464,3 @@ input[type="number"]::-webkit-inner-spin-button {
     margin: 0;
 }
 
-input[type="number"]::placeholder {
-    color: @darkGreen;
-}
-input[type="number"]::-webkit-input-placeholder {color: @darkGreen;}
-input[type="number"]::-moz-placeholder {color: @darkGreen;}
-input[type="number"]:-moz-placeholder {color: @darkGreen;}
-input[type="number"]:-ms-input-placeholder {color: @darkGreen;}

apps/spreadsheeteditor/mobile/src/controller/edit/EditChart.jsx

@@ -8,6 +8,7 @@ import { EditChart } from '../../view/edit/EditChart';
 class EditChartController extends Component {
     constructor (props) {
         super(props);
+        this.props.storeChartSettings.initChartLayout(this.props.storeFocusObjects.chartObject.get_ChartProperties());
         this.onRemoveChart = this.onRemoveChart.bind(this);
         this.onType = this.onType.bind(this);
         this.onStyle = this.onStyle.bind(this);

apps/spreadsheeteditor/mobile/src/store/chartSettings.js

@@ -2,7 +2,7 @@ import {action, observable, computed} from 'mobx';
 
 export class storeChartSettings {
 
-    @observable borderColor;
+    @observable borderColor = undefined;
 
     setBorderColor (color) {
         this.borderColor = color;
@@ -11,7 +11,6 @@ export class storeChartSettings {
     @action initBorderColor(shapeProperties) {
         let stroke = shapeProperties.get_stroke();
         this.borderColor = (stroke && stroke.get_type() == Asc.c_oAscStrokeType.STROKE_COLOR) ? this.resetColor(stroke.get_color()) : 'transparent';
-        return this.borderColor;
     }
 
     @observable fillColor = undefined;
@@ -27,6 +26,8 @@ export class storeChartSettings {
         if (fillType == Asc.c_oAscFill.FILL_TYPE_SOLID) {
             this.fillColor = this.resetColor(fill.asc_getFill().asc_getColor());
         }
+
+        return this.fillColor;
     }
 
     @observable chartTitle = undefined;

apps/spreadsheeteditor/mobile/src/store/textSettings.js

@@ -33,7 +33,7 @@ export class storeTextSettings {
         this.isUnderline = xfs.asc_getFontUnderline();
     
         let color = xfs.asc_getFontColor();
-        console.log(color);
+        // console.log(color);
         this.textColor = this.resetTextColor(color);
 
         this.paragraphAlign = xfs.asc_getHorAlign();

apps/spreadsheeteditor/mobile/src/view/edit/EditChart.jsx

@@ -92,18 +92,20 @@ const PageCustomBorderColor = props => {
 const PageBorderColor = props => {
     const { t } = useTranslation();
     const _t = t('View.Edit', {returnObjects: true});
-    const borderColor = props.storeChartSettings.borderColor;
+    const storeChartSettings = props.storeChartSettings;
-    const customColors = props.storePalette.customColors;
+    const storePalette = props.storePalette;
+    const borderColor = storeChartSettings.borderColor;
+    const customColors = storePalette.customColors;
 
     const changeColor = (color, effectId, effectValue) => {
         if (color !== 'empty') {
             if (effectId !== undefined) {
                 const newColor = {color: color, effectId: effectId, effectValue: effectValue};
                 props.onBorderColor(newColor);
-                props.storeChartSettings.setBorderColor(newColor);
+                storeChartSettings.setBorderColor(newColor);
             } else {
                 props.onBorderColor(color);
-                props.storeChartSettings.setBorderColor(color);
+                storeChartSettings.setBorderColor(color);
             }
         } else {
             // open custom color menu
@@ -148,7 +150,11 @@ const PageStyle = props => {
 
     // Init border color
 
-    const borderColor = storeChartSettings.initBorderColor(shapeProperties);
+    if(!storeChartSettings.borderColor) {
+        storeChartSettings.initBorderColor(shapeProperties);
+    }
+
+    const borderColor = storeChartSettings.borderColor;
     const displayBorderColor = borderColor == 'transparent' ? borderColor : `#${(typeof borderColor === "object" ? borderColor.color : borderColor)}`;
 
     return (
@@ -173,7 +179,6 @@ const PageStyle = props => {
                                                 className={curType === type.type ? ' active' : ''}
                                                 onClick={() => {props.onType(type.type)}}>
                                                 <div className={'thumb' + ` ${type.thumb}`}></div>
-                                                {/* style={{backgroundImage: `url('resources/img/charts/${type.thumb}')`}} */}
                                             </li>
                                         )
                                     })}
@@ -264,11 +269,10 @@ const PageLayout = props => {
     const _t = t('View.Edit', {returnObjects: true});
     const storeFocusObjects = props.storeFocusObjects;
     const storeChartSettings = props.storeChartSettings;
-    const chartProperties = storeFocusObjects.chartObject.get_ChartProperties();
+    const chartObject = storeFocusObjects.chartObject;
+    const chartProperties = chartObject.get_ChartProperties();
     const chartType = chartProperties.getType();
 
-    storeChartSettings.initChartLayout(chartProperties);
-
     const chartTitle = storeChartSettings.chartTitle;
     const chartLegend = storeChartSettings.chartLegend;
     const chartAxisHorTitle = storeChartSettings.chartAxisHorTitle;
@@ -334,14 +338,8 @@ const PageLayout = props => {
     }
 
     const chartLayoutAxisTitleHorizontal = {
-        0: {
+        0: `${_t.textNone}`,
-            displayValue: `${_t.textNone}`,
+        1: `${_t.textNoOverlay}`
-            value: 0
-        },
-        2: {
-            displayValue: `${_t.textNoOverlay}`,
-            value: 1
-        }
     }
 
     const chartLayoutAxisTitleVertical = {
@@ -392,7 +390,7 @@ const PageLayout = props => {
             <BlockTitle>{_t.textAxisTitle}</BlockTitle>
             <List>
                 <ListItem title={_t.textHorizontal} link="/edit-horizontal-axis-title/" 
-                    after={chartLayoutAxisTitleHorizontal[chartAxisHorTitle].displayValue} disabled={disableSetting} routeProps={{
+                    after={chartLayoutAxisTitleHorizontal[chartAxisHorTitle]} disabled={disableSetting} routeProps={{
                         chartLayoutAxisTitleHorizontal,
                         setLayoutProperty: props.setLayoutProperty
                     }}>
@@ -446,6 +444,7 @@ const PageChartTitle = props => {
                         <ListItem key={key} title={chartLayoutTitles[key]} radio checked={+key === currentTitle} onChange={() => {
                             storeChartSettings.changeChartTitle(+key);
                             props.setLayoutProperty('putTitle', key);
+                            props.f7router.back();
                         }}></ListItem>
                     )
                 })}
@@ -470,6 +469,7 @@ const PageLegend = props => {
                         <ListItem key={key} title={chartLayoutLegends[key]} radio checked={+key === currentLegend} onChange={() => {
                             storeChartSettings.changeChartLegend(+key);
                             props.setLayoutProperty('putLegendPos', key);
+                            props.f7router.back();
                         }}></ListItem>
                     )
                 })}
@@ -491,10 +491,10 @@ const PageHorizontalAxisTitle = props => {
             <List>
                 {Object.keys(chartLayoutAxisTitleHorizontal).map(key => {
                     return (
-                        <ListItem key={key} title={chartLayoutAxisTitleHorizontal[key].displayValue} radio checked={+key === currentAxisHorTitle} onChange={() => {
+                        <ListItem key={key} title={chartLayoutAxisTitleHorizontal[key]} radio checked={+key === currentAxisHorTitle} onChange={() => {
-                            console.log(chartLayoutAxisTitleHorizontal[key].value);
+                            storeChartSettings.changeChartAxisHorTitle(+key);
-                            storeChartSettings.changeChartAxisHorTitle(chartLayoutAxisTitleHorizontal[key].value);
+                            props.setLayoutProperty('putHorAxisLabel', key);
-                            props.setLayoutProperty('putHorAxisLabel', chartLayoutAxisTitleHorizontal[key].value);
+                            props.f7router.back();
                         }}></ListItem>
                     )
                 })}
@@ -519,6 +519,7 @@ const PageVerticalAxisTitle = props => {
                         <ListItem key={key} title={chartLayoutAxisTitleVertical[key]} radio checked={+key === currentAxisVertTitle} onChange={() => {
                             storeChartSettings.changeChartAxisVertTitle(+key);
                             props.setLayoutProperty('putVertAxisLabel', key);
+                            props.f7router.back();
                         }}></ListItem>
                     )
                 })}
@@ -543,6 +544,7 @@ const PageHorizontalGridlines = props => {
                         <ListItem key={key} title={chartLayoutGridlinesHorizontal[key]} radio checked={+key === currentChartHorGridlines} onChange={() => {
                             storeChartSettings.changeChartHorGridlines(+key);
                             props.setLayoutProperty('putHorGridLines', key);
+                            props.f7router.back();
                         }}></ListItem>
                     )
                 })}
@@ -567,6 +569,7 @@ const PageVerticalGridlines = props => {
                         <ListItem key={key} title={chartLayoutGridlinesVertical[key]} radio checked={+key === currentChartVertGridlines} onChange={() => {
                             storeChartSettings.changeChartVertGridlines(+key);
                             props.setLayoutProperty('putVertGridLines', key);
+                            props.f7router.back();
                         }}></ListItem>
                     )
                 })}
@@ -591,6 +594,7 @@ const PageDataLabels = props => {
                         <ListItem key={key} title={chartDataLabels[key]} radio checked={+key === currentChartDataLabel} onChange={() => {
                             storeChartSettings.changeChartDataLabel(+key);
                             props.setLayoutProperty('putDataLabelsPos', key);
+                            props.f7router.back();
                         }}></ListItem>
                     )
                 })}
@@ -602,6 +606,7 @@ const PageDataLabels = props => {
 const PageVerticalAxis = props => {
     const { t } = useTranslation();
     const _t = t('View.Edit', {returnObjects: true});
+    const isAndroid = Device.android;
     const storeChartSettings = props.storeChartSettings;
     const axisProps = props.initVertAxis();
     const crossValue = axisProps.getCrossesRule();
@@ -647,8 +652,6 @@ const PageVerticalAxis = props => {
         storeChartSettings.changeVertAxisCrosses(currentAxisCrosses);
     }
 
-    // console.log(storeChartSettings.axisCrosses);
-
     const defineCurrentDisplayUnits = () => vertAxisDisplayUnits.find(elem => elem.value ===  axisProps.getDispUnitsRule());
     const currentDisplayUnits = defineCurrentDisplayUnits();
 
@@ -656,8 +659,6 @@ const PageVerticalAxis = props => {
         storeChartSettings.changeDisplayUnits(currentDisplayUnits);
     }
 
-    // console.log(storeChartSettings.displayUnits);
-
     if(storeChartSettings.valuesVertReverseOrder == undefined) {
         storeChartSettings.toggleVertValuesReverseOrder(axisProps.getInvertValOrder());
     }
@@ -677,9 +678,6 @@ const PageVerticalAxis = props => {
         storeChartSettings.changeVertMinorType(currentMinorType);
     }
 
-    // console.log(storeChartSettings.vertMajorType);
-    // console.log(storeChartSettings.vertMinorType);
-
     const defineLabelsPosition = () => verticalAxisLabelsPosition.find(elem => elem.value === axisProps.getTickLabelsPos());
     const currentLabelsPosition = defineLabelsPosition();
 
@@ -687,8 +685,6 @@ const PageVerticalAxis = props => {
         storeChartSettings.changeVertLabelPosition(currentLabelsPosition);
     }
 
-    // console.log(storeChartSettings.vertLabelPosition);
-
     const [minValue, setMinValue] = useState(axisProps.getMinValRule() == Asc.c_oAscValAxisRule.auto ? '' : axisProps.getMinVal());
     const [maxValue, setMaxValue] = useState(axisProps.getMaxValRule() == Asc.c_oAscValAxisRule.auto ? '' : axisProps.getMaxVal());
 
@@ -698,7 +694,7 @@ const PageVerticalAxis = props => {
     return (
         <Page>
             <Navbar title={_t.textAxisOptions} backLink={_t.textBack} />
-            <List>
+            <List className={isAndroid ? "inputs-list": ""}>
                 <ListItem title={_t.textMinimumValue}>
                     <div slot="after">
                         <div className="item-input">
@@ -718,7 +714,7 @@ const PageVerticalAxis = props => {
                     </div>
                 </ListItem>
             </List>
-            <List>
+            <List className={isAndroid ? "inputs-list": ""}>
                 <ListItem title={_t.textAxisCrosses} link="/edit-vert-axis-crosses/" after={storeChartSettings.axisVertCrosses.display} routeProps={{
                     axisCrosses,
                     onVerAxisCrossType: props.onVerAxisCrossType
@@ -790,6 +786,7 @@ const PageVertAxisCrosses = props => {
                             onChange={() => { 
                                 storeChartSettings.changeVertAxisCrosses(elem);
                                 props.onVerAxisCrossType(elem.value);
+                                props.f7router.back();
                             }}>
                         </ListItem>
                     )
@@ -817,6 +814,7 @@ const PageDisplayUnits = props => {
                             onChange={() => {
                                 storeChartSettings.changeDisplayUnits(elem);
                                 props.onVerAxisDisplayUnits(elem.value);
+                                props.f7router.back();
                             }}>
                         </ListItem>
                     )
@@ -844,6 +842,7 @@ const PageVertMajorType = props => {
                             onChange={() => {
                                 storeChartSettings.changeVertMajorType(elem);
                                 props.onVerAxisTickMajor(elem.value);
+                                props.f7router.back();
                             }}>
                         </ListItem>
                     )
@@ -871,6 +870,7 @@ const PageVertMinorType = props => {
                             onChange={() => {
                                 storeChartSettings.changeVertMinorType(elem);
                                 props.onVerAxisTickMinor(elem.value);
+                                props.f7router.back();
                             }}>
                         </ListItem>
                     )
@@ -898,6 +898,7 @@ const PageVertLabelPosition = props => {
                             onChange={() => {
                                 storeChartSettings.changeVertLabelPosition(elem);
                                 props.onVerAxisLabelPos(elem.value);
+                                props.f7router.back();
                             }}>
                         </ListItem>
                     )
@@ -947,8 +948,6 @@ const PageHorizontalAxis = props => {
         storeChartSettings.changeHorAxisCrosses(currentAxisCrosses);
     }
 
-    console.log(storeChartSettings.axisHorCrosses);
-
     const defineAxisPosition = () => horAxisPosition.find(elem => elem.value === axisProps.getLabelsPosition());
     const axisPosition = defineAxisPosition();
 
@@ -956,14 +955,10 @@ const PageHorizontalAxis = props => {
         storeChartSettings.changeAxisPosition(axisPosition);
     }
 
-    console.log(storeChartSettings.axisPosition)
-
     if(storeChartSettings.valuesHorReverseOrder == undefined) {
         storeChartSettings.toggleHorValuesReverseOrder(axisProps.getInvertCatOrder());
     }
 
-    console.log(storeChartSettings.valuesHorReverseOrder);
-
     const valueMajorType = axisProps.getMajorTickMark();
     const valueMinorType = axisProps.getMinorTickMark();
     const defineCurrentTickOption = (elemType) => tickOptions.find(elem => elem.value === elemType);
@@ -979,9 +974,6 @@ const PageHorizontalAxis = props => {
         storeChartSettings.changeHorMinorType(currentMinorType);
     }
 
-    console.log(storeChartSettings.horMajorType);
-    console.log(storeChartSettings.horMinorType);
-
     const defineLabelsPosition = () => horAxisLabelsPosition.find(elem => elem.value === axisProps.getTickLabelsPos());
     const currentLabelsPosition = defineLabelsPosition();
 
@@ -989,15 +981,13 @@ const PageHorizontalAxis = props => {
         storeChartSettings.changeHorLabelPosition(currentLabelsPosition);
     }
 
-    console.log(storeChartSettings.horLabelPosition);
-
     const currentCrossesValue = axisProps.getCrosses();
     const [crossesValue, setCrossesValue] = useState(!currentCrossesValue ? '' : currentCrossesValue);
 
     return (
         <Page>
             <Navbar title={_t.textAxisOptions} backLink={_t.textBack} />
-            <List>
+            <List className={isAndroid ? "inputs-list": ""}>
                 <ListItem title={_t.textAxisCrosses} link="/edit-hor-axis-crosses/" after={storeChartSettings.axisHorCrosses.display} routeProps={{
                     axisCrosses,
                     onHorAxisCrossType: props.onHorAxisCrossType
@@ -1069,6 +1059,7 @@ const PageHorAxisCrosses = props => {
                             onChange={() => { 
                                 storeChartSettings.changeHorAxisCrosses(elem);
                                 props.onHorAxisCrossType(elem.value);
+                                props.f7router.back();
                             }}>
                         </ListItem>
                     )
@@ -1096,6 +1087,7 @@ const PageHorAxisPosition = props => {
                             onChange={() => { 
                                 storeChartSettings.changeAxisPosition(elem);
                                 props.onHorAxisPos(elem.value);
+                                props.f7router.back();
                             }}>
                         </ListItem>
                     )
@@ -1123,6 +1115,7 @@ const PageHorMajorType = props => {
                             onChange={() => {
                                 storeChartSettings.changeHorMajorType(elem);
                                 props.onHorAxisTickMajor(elem.value);
+                                props.f7router.back();
                             }}>
                         </ListItem>
                     )
@@ -1150,6 +1143,7 @@ const PageHorMinorType = props => {
                             onChange={() => {
                                 storeChartSettings.changeHorMinorType(elem);
                                 props.onHorAxisTickMinor(elem.value);
+                                props.f7router.back();
                             }}>
                         </ListItem>
                     )
@@ -1177,6 +1171,7 @@ const PageHorLabelPosition = props => {
                             onChange={() => {
                                 storeChartSettings.changeHorLabelPosition(elem);
                                 props.onHorAxisLabelPos(elem.value);
+                                props.f7router.back();
                             }}>
                         </ListItem>
                     )

apps/spreadsheeteditor/mobile/src/view/edit/EditText.jsx

@@ -16,7 +16,7 @@ const EditText = props => {
     const fontName = storeTextSettings.fontName || _t.textFonts;
     const fontSize = storeTextSettings.fontSize;
     const fontColor = storeTextSettings.textColor;
-    console.log(fontColor);
+    // console.log(fontColor);
 
     const displaySize = typeof fontSize === 'undefined' ? _t.textAuto : fontSize + ' ' + _t.textPt;
     const isBold = storeTextSettings.isBold;
@@ -166,17 +166,15 @@ const PageFontColor = props => {
     const textColor = storeTextSettings.textColor;
     const customColors = storePalette.customColors;
 
-    console.log(textColor);
-
     const changeColor = (color, effectId, effectValue) => {
         if (color !== 'empty') {
             if (effectId !== undefined) {
                 const newColor = {color: color, effectId: effectId, effectValue: effectValue};
-                storeTextSettings.changeTextColor(newColor);
                 props.onTextColor(newColor);
+                storeTextSettings.changeTextColor(newColor);
             } else {
-                storeTextSettings.changeTextColor(color);
                 props.onTextColor(color);
+                storeTextSettings.changeTextColor(color);
             }
         } else {
             // open custom color menu