[SSE mobile] Corrected styles, Chart Settings and added Link Settings

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

@@ -393,25 +393,6 @@
 
     // 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;}

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

@@ -291,55 +291,4 @@
             }
         }
     }
-
-    // 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/spreadsheeteditor/mobile/locale/en.json

@@ -200,7 +200,22 @@
             "textCrossesValue": "Crosses Value",
             "textOnTickMarks": "On Tick Marks",
             "textBetweenTickMarks": "Between Tick Marks",
-            "textAxisPosition": "Axis Position"
+            "textAxisPosition": "Axis Position",
+            "textHyperlink": "Hyperlink",
+            "textLinkType": "Link Type",
+            "textLink": "Link",
+            "textSheet": "Sheet",
+            "textRange": "Range",
+            "textDisplay": "Display",
+            "textScreenTip": "Screen Tip",
+            "textEditLink": "Edit Link",
+            "textRemoveLink": "Remove Link",
+            "textRequired": "Required",
+            "textInternalDataRange": "Internal Data Range",
+            "textExternalLink": "External Link",
+            "textDefault": "Selected range",
+            "textInvalidRange": "Invalid cells range",
+            "txtNotUrl": "This field should be a URL in the format \"http://www.example.com\""
         }
     },
     "Common": {

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

@@ -0,0 +1,145 @@
+import React, { Component } from 'react';
+import { f7 } from 'framework7-react';
+import { Device } from '../../../../../common/mobile/utils/device';
+import {observer, inject} from "mobx-react";
+import { withTranslation } from 'react-i18next';
+
+import { EditLink } from '../../view/edit/EditLink';
+
+class EditLinkController extends Component {
+    constructor (props) {
+        super(props);
+        this.onEditLink = this.onEditLink.bind(this);
+        this.onRemoveLink = this.onRemoveLink.bind(this);
+
+        const api = Common.EditorApi.get();
+        const cellInfo = api.asc_getCellInfo();
+
+        this.linkInfo = cellInfo.asc_getHyperlink();
+        this.isLock = cellInfo.asc_getLockText();
+        this.currentSheet = api.asc_getWorksheetName(api.asc_getActiveWorksheetIndex());
+
+        // Sheets
+
+        let items = [];
+        let wsc = api.asc_getWorksheetsCount();
+        const aws = api.asc_getActiveWorksheetIndex();
+
+        if (wsc > 0) {
+            items = [];
+            while ( !(--wsc < 0) ) {
+                if ( !api.asc_isWorksheetHidden(wsc) ) {
+                    items.unshift({
+                        value: wsc,
+                        caption: api.asc_getWorksheetName(wsc)
+                    });
+                    if (wsc === aws) {
+                        this.activeSheet = {
+                            value: wsc,
+                            caption: api.asc_getWorksheetName(wsc)
+                        }
+                    }
+                }
+            }
+            this.sheets = items;
+        }
+    }
+
+    closeModal () {
+        if ( Device.phone ) {
+            f7.sheet.close('#edit-sheet', true);
+        } else {
+            f7.popover.close('#edit-popover');
+        }
+    }
+
+    onEditLink(args) {
+        const api = Common.EditorApi.get();
+        const { t } = this.props;
+        const _t = t("View.Edit", {returnObjects: true});
+
+        let linkProps = new Asc.asc_CHyperlink(),
+            sheet = "",
+            displayText = args.text,
+            tip = args.tooltip,
+            defaultDisplay = "";
+
+        linkProps.asc_setType(args.type);
+
+        if(args.type === Asc.c_oAscHyperlinkType.RangeLink) {
+            let range = args.url,
+                isValidRange = /^[A-Z]+[1-9]\d*:[A-Z]+[1-9]\d*$/.test(range);
+
+            if (!isValidRange)
+                isValidRange = /^[A-Z]+[1-9]\d*$/.test(range);
+
+            if (!isValidRange) {
+                f7.dialog.alert(_t.textInvalidRange, _t.notcriticalErrorTitle);
+                return;
+            }
+
+            sheet = args.sheet;
+
+            linkProps.asc_setSheet(sheet);
+            linkProps.asc_setRange(range);
+            defaultDisplay = sheet + '!' + range;
+        } else {
+            let url = args.url.replace(/^\s+|\s+$/g,'');
+
+            if (! /(((^https?)|(^ftp)):\/\/)|(^mailto:)/i.test(url)) {
+                let urlType = api.asc_getUrlType(url.trim());
+
+                if (urlType < 1) {
+                    f7.dialog.alert(_t.txtNotUrl, _t.notcriticalErrorTitle);
+                    return;
+                }
+
+                url = ( (urlType == 2) ? 'mailto:' : 'http://' ) + url;
+            }
+
+            url = url.replace(new RegExp("%20",'g')," ");
+
+            linkProps.asc_setHyperlinkUrl(url);
+            defaultDisplay = url;
+        }
+
+        if (this.isLock) {
+            linkProps.asc_setText(null);
+        } else {
+            if (!displayText) {
+                displayText = defaultDisplay;
+            }
+            linkProps.asc_setText(displayText);
+        }
+
+        linkProps.asc_setTooltip(tip);
+
+        api.asc_insertHyperlink(linkProps);
+        this.closeModal();
+     
+    }
+
+    onRemoveLink() {
+        const api = Common.EditorApi.get();
+        api.asc_removeHyperlink();
+        this.closeModal();
+    }
+
+    render () {
+        return (
+            <EditLink 
+                linkInfo={this.linkInfo}
+                isLock={this.isLock}
+                sheets={this.sheets}
+                activeSheet={this.activeSheet}
+                currentSheet={this.currentSheet}
+                onEditLink={this.onEditLink} 
+                onRemoveLink={this.onRemoveLink}
+            />
+        )
+    }
+}
+
+const EditLinkWithTranslation = withTranslation()(EditLinkController);
+
+export {EditLinkWithTranslation as EditLinkController};

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

@@ -10,12 +10,14 @@ import EditShapeController from "../../controller/edit/EditShape";
 import EditImageController from "../../controller/edit/EditImage";
 import EditTextController from "../../controller/edit/EditText";
 import EditChartController from "../../controller/edit/EditChart";
+import { EditLinkController } from "../../controller/edit/EditLink";
 
 import { PageShapeStyle, PageShapeStyleNoFill, PageReplaceContainer, PageReorderContainer, PageShapeBorderColor, PageShapeCustomBorderColor, PageShapeCustomFillColor } from './EditShape';
 import { PageImageReplace, PageImageReorder, PageLinkSettings } from './EditImage';
 import { TextColorCell, FillColorCell, CustomTextColorCell, CustomFillColorCell, FontsCell, TextFormatCell, TextOrientationCell, BorderStyleCell, BorderColorCell, CustomBorderColorCell, BorderSizeCell, PageFormatCell, PageAccountingFormatCell, PageCurrencyFormatCell, PageDateFormatCell, PageTimeFormatCell } from './EditCell';
 import { PageTextFonts, PageTextFontColor, PageTextCustomFontColor } from './EditText';
 import { PageChartStyle, PageChartCustomFillColor, PageChartBorderColor, PageChartCustomBorderColor, PageChartReorder, PageChartLayout, PageChartLegend, PageChartTitle, PageChartHorizontalAxisTitle, PageChartVerticalAxisTitle, PageChartHorizontalGridlines, PageChartVerticalGridlines, PageChartDataLabels, PageChartVerticalAxis, PageChartVertAxisCrosses, PageChartDisplayUnits, PageChartVertMajorType, PageChartVertMinorType, PageChartVertLabelPosition, PageChartHorizontalAxis, PageChartHorAxisCrosses, PageChartHorAxisPosition, PageChartHorMajorType, PageChartHorMinorType, PageChartHorLabelPosition } from './EditChart';
+import { PageTypeLink, PageSheet } from './EditLink';
 
 const routes = [
 
@@ -254,6 +256,17 @@ const routes = [
     {
         path: '/edit-hor-label-position/',
         component: PageChartHorLabelPosition
+    },
+
+    // Link 
+
+    {
+        path: '/edit-link-type/',
+        component: PageTypeLink
+    },
+    {
+        path: '/edit-link-sheet',
+        component: PageSheet
     }
 
 
@@ -361,6 +374,13 @@ const EditTabs = props => {
                 component: <EditChartController />
             })
         }
+        if (settings.indexOf('hyperlink') > -1) {
+            editors.push({
+                caption: _t.textHyperlink,
+                id: 'edit-link',
+                component: <EditLinkController />
+            })
+        }
     }
 
     return (

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

@@ -606,7 +606,7 @@ const PageDataLabels = props => {
 const PageVerticalAxis = props => {
     const { t } = useTranslation();
     const _t = t('View.Edit', {returnObjects: true});
-    const isAndroid = Device.android;
+    const isIos = Device.ios;
     const storeChartSettings = props.storeChartSettings;
     const axisProps = props.initVertAxis();
     const crossValue = axisProps.getCrossesRule();
@@ -694,41 +694,42 @@ const PageVerticalAxis = props => {
     return (
         <Page>
             <Navbar title={_t.textAxisOptions} backLink={_t.textBack} />
-            <List className={isAndroid ? "inputs-list": ""}>
+            <List inlineLabels className="inputs-list">
-                <ListItem title={_t.textMinimumValue}>
+                <ListInput 
-                    <div slot="after">
+                    label={_t.textMinimumValue}
-                        <div className="item-input">
+                    type="number"
-                            <input type="number" className="field right placeholder-color" value={minValue} 
+                    placeholder="Auto"
+                    value={minValue}
                     onChange={e => props.onVerAxisMinValue(e.target.value)}
-                                onInput={e => setMinValue(e.target.value)} placeholder="Auto" />
+                    onInput={e => setMinValue(e.target.value)}
-                        </div>
+                    className={isIos ? 'list-input-right' : ''}
-                    </div>
+                />
-                </ListItem>
+
-                <ListItem title={_t.textMaximumValue}>
+                <ListInput 
-                    <div slot="after">
+                    label={_t.textMaximumValue}
-                        <div className="item-input">
+                    type="number"
-                            <input type="number" className="field right placeholder-color" value={maxValue} 
+                    placeholder="Auto"
+                    value={maxValue}
                     onChange={e => props.onVerAxisMaxValue(e.target.value)} 
-                                onInput={e => setMaxValue(e.target.value)} placeholder="Auto" />
+                    onInput={e => setMaxValue(e.target.value)}
-                        </div>
+                    className={isIos ? 'list-input-right' : ''}
-                    </div>
+                />
-                </ListItem>
             </List>
-            <List className={isAndroid ? "inputs-list": ""}>
+            <List inlineLabels className="inputs-list">
                 <ListItem title={_t.textAxisCrosses} link="/edit-vert-axis-crosses/" after={storeChartSettings.axisVertCrosses.display} routeProps={{
                     axisCrosses,
                     onVerAxisCrossType: props.onVerAxisCrossType
                 }}></ListItem>
                 {storeChartSettings.axisVertCrosses.value == Asc.c_oAscCrossesRule.value ? (
-                    <ListItem title={_t.textCrossesValue}>
+                    <ListInput 
-                        <div slot="after">
+                        label={_t.textCrossesValue}
-                            <div className="item-input">
+                        type="number"
-                                <input type="number" className="field right placeholder-color" value={crossesValue} 
+                        placeholder="0"
+                        value={crossesValue}
                         onChange={e => props.onVerAxisCrossValue(e.target.value)} 
-                                    onInput={e => setCrossesValue(e.target.value)} placeholder="0" />
+                        onInput={e => setCrossesValue(e.target.value)}
-                            </div>
+                        className={isIos ? 'list-input-right' : ''}
-                        </div>
+                    />
-                    </ListItem>
                 ) : null}
             </List>
             <List>
@@ -993,15 +994,15 @@ const PageHorizontalAxis = props => {
                     onHorAxisCrossType: props.onHorAxisCrossType
                 }}></ListItem>
                 {storeChartSettings.axisHorCrosses.value == Asc.c_oAscCrossesRule.value ? (
-                    <ListItem title={_t.textCrossesValue}>
+                    <ListInput 
-                        <div slot="after">
+                        label={_t.textCrossesValue}
-                            <div className="item-input">
+                        type="text"
-                                <input type="number" className="field right placeholder-color" value={crossesValue} 
+                        placeholder="0"
+                        value={crossesValue}
                         onChange={e => props.onHorAxisCrossValue(e.target.value)} 
-                                    onInput={e => setCrossesValue(e.target.value)} placeholder="0" />
+                        onInput={e => setCrossesValue(e.target.value)}
-                            </div>
+                        className={isIos ? 'list-input-right' : ''}
-                        </div>
+                    />
-                    </ListItem>
                 ) : null}
             </List>
             <List>

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

@@ -0,0 +1,153 @@
+import React, {useState, useEffect, Fragment} from 'react';
+import {observer, inject} from "mobx-react";
+import {List, ListItem, Page, Navbar, Icon, ListButton, ListInput, Segmented, Button} from 'framework7-react';
+import { useTranslation } from 'react-i18next';
+import {Device} from "../../../../../common/mobile/utils/device";
+
+const PageTypeLink = ({curType, changeType}) => {
+    const { t } = useTranslation();
+    const _t = t('View.Edit', {returnObjects: true});
+    const [typeLink, setTypeLink] = useState(curType);
+
+    return (
+        <Page>
+            <Navbar title={_t.textLinkType} backLink={_t.textBack}/>
+            <List>
+                <ListItem title={_t.textExternalLink} radio checked={typeLink === 1} onClick={() => {setTypeLink(1); changeType(1);}}></ListItem>
+                <ListItem title={_t.textInternalDataRange} radio checked={typeLink === 2} onClick={() => {setTypeLink(2); changeType(2);}}></ListItem>
+            </List>
+        </Page>
+    )
+};
+
+const PageSheet = ({curSheet, sheets, changeSheet}) => {
+    const { t } = useTranslation();
+    const _t = t('View.Edit', {returnObjects: true});
+    const [stateSheet, setSheet] = useState(curSheet.value);
+
+    return (
+        <Page>
+            <Navbar title={_t.textSheet} backLink={_t.textBack}/>
+            <List>
+                {sheets.map(sheet => {
+                    return(
+                        <ListItem 
+                            key={`sheet-${sheet.value}`}
+                            title={sheet.caption}
+                            radio
+                            checked={stateSheet === sheet.value}
+                            onClick={() => {
+                                setSheet(sheet.value);
+                                changeSheet(sheet);
+                            }}
+                        />
+                    )
+                })}
+
+            </List>
+        </Page>
+    )
+};
+
+const EditLink = props => {
+    const isIos = Device.ios;
+    const { t } = useTranslation();
+    const _t = t('View.Edit', {returnObjects: true});
+    const linkInfo = props.linkInfo;
+    const isLock = props.isLock;
+    const sheets = props.sheets;
+    const activeSheet = props.activeSheet;
+    const currentSheet = props.currentSheet;
+    const valueLinkInfo = linkInfo.asc_getType();
+    const linkSheet = (valueLinkInfo == Asc.c_oAscHyperlinkType.RangeLink) ? linkInfo.asc_getSheet() : currentSheet;
+    
+    const [typeLink, setTypeLink] = useState(valueLinkInfo);
+    const textType = typeLink != Asc.c_oAscHyperlinkType.RangeLink ? _t.textExternalLink : _t.textInternalDataRange;
+    const changeType = (newType) => {
+        setTypeLink(newType);
+    };
+   
+    const [link, setLink] = useState(linkInfo.asc_getHyperlinkUrl() ? linkInfo.asc_getHyperlinkUrl().replace(new RegExp(" ", 'g'), "%20") : '');
+   
+    const displayText = isLock ? _t.textDefault : linkInfo.asc_getText();
+    const [stateDisplayText, setDisplayText] = useState(displayText);
+   
+    const [screenTip, setScreenTip] = useState(linkInfo.asc_getTooltip());
+  
+    const [curSheet, setSheet] = useState(activeSheet);
+    const changeSheet = (sheet) => {
+        setSheet(sheet);
+    };
+
+    const valueRange = linkInfo.asc_getRange();
+    const [range, setRange] = useState(valueRange || '');
+    
+    return (
+        <Fragment>
+            <List inlineLabels className='inputs-list'>
+                <ListItem link={'/edit-link-type/'} title={_t.textLinkType} after={textType} routeProps={{
+                    changeType: changeType,
+                    curType: typeLink
+                }}/>
+                {typeLink != Asc.c_oAscHyperlinkType.RangeLink &&
+                    <ListInput label={_t.textLink}
+                               type="text"
+                               placeholder={_t.textLink}
+                               value={link}
+                               onChange={(event) => {setLink(event.target.value)}}
+                               className={isIos ? 'list-input-right' : ''}
+                    />
+                }
+                {typeLink == Asc.c_oAscHyperlinkType.RangeLink &&
+                    <ListItem link={'/edit-link-sheet/'} title={_t.textSheet} after={linkSheet} routeProps={{
+                        changeSheet: changeSheet,
+                        sheets,
+                        curSheet
+                    }}/>
+                }
+                {typeLink == Asc.c_oAscHyperlinkType.RangeLink &&
+                    <ListInput label={_t.textRange}
+                               type="text"
+                               placeholder={_t.textRequired}
+                               value={range}
+                               onChange={(event) => {setRange(event.target.value)}}
+                               className={isIos ? 'list-input-right' : ''}
+                    />
+                }
+                <ListInput label={_t.textDisplay}
+                           type="text"
+                           placeholder={_t.textDisplay}
+                           value={stateDisplayText}
+                           disabled={isLock}
+                           onChange={(event) => {setDisplayText(event.target.value)}}
+                           className={isIos ? 'list-input-right' : ''}
+                />
+                <ListInput label={_t.textScreenTip}
+                           type="text"
+                           placeholder={_t.textScreenTip}
+                           value={screenTip}
+                           onChange={(event) => {setScreenTip(event.target.value)}}
+                           className={isIos ? 'list-input-right' : ''}
+                />
+            </List>
+            <List>
+                <ListButton title={_t.textEditLink}
+                            className={`button-fill button-raised${(typeLink === 'ext' && link.length < 1 || typeLink === 'int' && range.length < 1) && ' disabled'}`}
+                            onClick={() => {props.onEditLink(typeLink === 1 ?
+                                {type: 1, url: link, text: stateDisplayText, tooltip: screenTip} :
+                                {type: 2, url: range, sheet: curSheet.caption, text: stateDisplayText, tooltip: screenTip})}}
+                />
+                <ListButton title={_t.textRemoveLink}
+                            className={`button-fill button-red`}
+                            onClick={() => props.onRemoveLink()}
+                />
+            </List>
+        </Fragment>
+    )
+};
+
+export {
+    EditLink,
+    PageTypeLink,
+    PageSheet
+};