From 1cb18ade2501c2dfd73aef314444d55a48948d5f Mon Sep 17 00:00:00 2001 From: SergeyEzhin Date: Wed, 17 Feb 2021 14:28:02 +0300 Subject: [PATCH] [SSE mobile] Corrected Text Settings and Chart Settings --- .../lib/component/ThemeColorPalette.jsx | 1 - .../mobile/resources/less/common-ios.less | 29 ++++++ .../resources/less/common-material.less | 56 ++++++++++++ apps/common/mobile/resources/less/common.less | 23 +---- .../mobile/src/controller/edit/EditChart.jsx | 1 + .../mobile/src/store/chartSettings.js | 5 +- .../mobile/src/store/textSettings.js | 2 +- .../mobile/src/view/edit/EditChart.jsx | 89 +++++++++---------- .../mobile/src/view/edit/EditText.jsx | 8 +- 9 files changed, 136 insertions(+), 78 deletions(-) diff --git a/apps/common/mobile/lib/component/ThemeColorPalette.jsx b/apps/common/mobile/lib/component/ThemeColorPalette.jsx index c4f838112..2f1db482a 100644 --- a/apps/common/mobile/lib/component/ThemeColorPalette.jsx +++ b/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 (
{themeColors.map((row, rowIndex) => { diff --git a/apps/common/mobile/resources/less/common-ios.less b/apps/common/mobile/resources/less/common-ios.less index a03af5378..ea0beba5a 100644 --- a/apps/common/mobile/resources/less/common-ios.less +++ b/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;} + } diff --git a/apps/common/mobile/resources/less/common-material.less b/apps/common/mobile/resources/less/common-material.less index 2dbc3ddf3..2b4c30547 100644 --- a/apps/common/mobile/resources/less/common-material.less +++ b/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%; + } + } + } + } diff --git a/apps/common/mobile/resources/less/common.less b/apps/common/mobile/resources/less/common.less index 6e9f78b4a..0175df94a 100644 --- a/apps/common/mobile/resources/less/common.less +++ b/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 { - 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"] 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;} diff --git a/apps/spreadsheeteditor/mobile/src/controller/edit/EditChart.jsx b/apps/spreadsheeteditor/mobile/src/controller/edit/EditChart.jsx index 8bd938360..aaa2ce74d 100644 --- a/apps/spreadsheeteditor/mobile/src/controller/edit/EditChart.jsx +++ b/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); diff --git a/apps/spreadsheeteditor/mobile/src/store/chartSettings.js b/apps/spreadsheeteditor/mobile/src/store/chartSettings.js index 035358842..0d10d78b4 100644 --- a/apps/spreadsheeteditor/mobile/src/store/chartSettings.js +++ b/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; diff --git a/apps/spreadsheeteditor/mobile/src/store/textSettings.js b/apps/spreadsheeteditor/mobile/src/store/textSettings.js index 1772a60db..674239912 100644 --- a/apps/spreadsheeteditor/mobile/src/store/textSettings.js +++ b/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(); diff --git a/apps/spreadsheeteditor/mobile/src/view/edit/EditChart.jsx b/apps/spreadsheeteditor/mobile/src/view/edit/EditChart.jsx index c73280b5e..7bf7fd327 100644 --- a/apps/spreadsheeteditor/mobile/src/view/edit/EditChart.jsx +++ b/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 customColors = props.storePalette.customColors; + const storeChartSettings = props.storeChartSettings; + const storePalette = props.storePalette; + const borderColor = storeChartSettings.borderColor; + const customColors = storePalette.customColors; const changeColor = (color, effectId, effectValue) => { if (color !== 'empty') { - if (effectId !== undefined ) { + 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 @@ -114,7 +116,7 @@ const PageBorderColor = props => { return ( - + { // 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)}}>
- {/* style={{backgroundImage: `url('resources/img/charts/${type.thumb}')`}} */} ) })} @@ -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: { - displayValue: `${_t.textNone}`, - value: 0 - }, - 2: { - displayValue: `${_t.textNoOverlay}`, - value: 1 - } + 0: `${_t.textNone}`, + 1: `${_t.textNoOverlay}` } const chartLayoutAxisTitleVertical = { @@ -392,7 +390,7 @@ const PageLayout = props => { {_t.textAxisTitle} @@ -446,6 +444,7 @@ const PageChartTitle = props => { { storeChartSettings.changeChartTitle(+key); props.setLayoutProperty('putTitle', key); + props.f7router.back(); }}> ) })} @@ -470,6 +469,7 @@ const PageLegend = props => { { storeChartSettings.changeChartLegend(+key); props.setLayoutProperty('putLegendPos', key); + props.f7router.back(); }}> ) })} @@ -491,10 +491,10 @@ const PageHorizontalAxisTitle = props => { {Object.keys(chartLayoutAxisTitleHorizontal).map(key => { return ( - { - console.log(chartLayoutAxisTitleHorizontal[key].value); - storeChartSettings.changeChartAxisHorTitle(chartLayoutAxisTitleHorizontal[key].value); - props.setLayoutProperty('putHorAxisLabel', chartLayoutAxisTitleHorizontal[key].value); + { + storeChartSettings.changeChartAxisHorTitle(+key); + props.setLayoutProperty('putHorAxisLabel', key); + props.f7router.back(); }}> ) })} @@ -519,6 +519,7 @@ const PageVerticalAxisTitle = props => { { storeChartSettings.changeChartAxisVertTitle(+key); props.setLayoutProperty('putVertAxisLabel', key); + props.f7router.back(); }}> ) })} @@ -543,6 +544,7 @@ const PageHorizontalGridlines = props => { { storeChartSettings.changeChartHorGridlines(+key); props.setLayoutProperty('putHorGridLines', key); + props.f7router.back(); }}> ) })} @@ -567,6 +569,7 @@ const PageVerticalGridlines = props => { { storeChartSettings.changeChartVertGridlines(+key); props.setLayoutProperty('putVertGridLines', key); + props.f7router.back(); }}> ) })} @@ -591,6 +594,7 @@ const PageDataLabels = props => { { storeChartSettings.changeChartDataLabel(+key); props.setLayoutProperty('putDataLabelsPos', key); + props.f7router.back(); }}> ) })} @@ -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 ( - +
@@ -718,7 +714,7 @@ const PageVerticalAxis = props => {
- + { onChange={() => { storeChartSettings.changeVertAxisCrosses(elem); props.onVerAxisCrossType(elem.value); + props.f7router.back(); }}> ) @@ -817,6 +814,7 @@ const PageDisplayUnits = props => { onChange={() => { storeChartSettings.changeDisplayUnits(elem); props.onVerAxisDisplayUnits(elem.value); + props.f7router.back(); }}> ) @@ -844,6 +842,7 @@ const PageVertMajorType = props => { onChange={() => { storeChartSettings.changeVertMajorType(elem); props.onVerAxisTickMajor(elem.value); + props.f7router.back(); }}> ) @@ -871,6 +870,7 @@ const PageVertMinorType = props => { onChange={() => { storeChartSettings.changeVertMinorType(elem); props.onVerAxisTickMinor(elem.value); + props.f7router.back(); }}> ) @@ -898,6 +898,7 @@ const PageVertLabelPosition = props => { onChange={() => { storeChartSettings.changeVertLabelPosition(elem); props.onVerAxisLabelPos(elem.value); + props.f7router.back(); }}> ) @@ -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 ( - + { onChange={() => { storeChartSettings.changeHorAxisCrosses(elem); props.onHorAxisCrossType(elem.value); + props.f7router.back(); }}> ) @@ -1096,6 +1087,7 @@ const PageHorAxisPosition = props => { onChange={() => { storeChartSettings.changeAxisPosition(elem); props.onHorAxisPos(elem.value); + props.f7router.back(); }}> ) @@ -1123,6 +1115,7 @@ const PageHorMajorType = props => { onChange={() => { storeChartSettings.changeHorMajorType(elem); props.onHorAxisTickMajor(elem.value); + props.f7router.back(); }}> ) @@ -1150,6 +1143,7 @@ const PageHorMinorType = props => { onChange={() => { storeChartSettings.changeHorMinorType(elem); props.onHorAxisTickMinor(elem.value); + props.f7router.back(); }}> ) @@ -1177,6 +1171,7 @@ const PageHorLabelPosition = props => { onChange={() => { storeChartSettings.changeHorLabelPosition(elem); props.onHorAxisLabelPos(elem.value); + props.f7router.back(); }}> ) diff --git a/apps/spreadsheeteditor/mobile/src/view/edit/EditText.jsx b/apps/spreadsheeteditor/mobile/src/view/edit/EditText.jsx index 03e54f413..b056ac4bb 100644 --- a/apps/spreadsheeteditor/mobile/src/view/edit/EditText.jsx +++ b/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