Lea/web-apps
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

[SSE mobile] Fix templates

Browse source
This commit is contained in:
JuliaSvinareva 2021-05-18 13:46:26 +03:00
parent e183568395
commit affeda1999
6 changed files with 387 additions and 68 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

128
apps/spreadsheeteditor/mobile/src/view/edit/EditCell.jsx
View file

@ -146,7 +146,13 @@ const PageFontsCell = props => {
return ( return (
<Page> <Page>
<Navbar title={_t.textFonts} backLink={_t.textBack} /> <Navbar title={_t.textFonts} backLink={_t.textBack}>
{Device.phone &&
<NavRight>
<Link icon='icon-expand-down' sheetClose></Link>
</NavRight>
}
</Navbar>
<List> <List>
<ListItem title={_t.textSize}> <ListItem title={_t.textSize}>
{!isAndroid && <div slot='after-start'>{displaySize}</div>} {!isAndroid && <div slot='after-start'>{displaySize}</div>}
@ -218,9 +224,11 @@ const PageTextColorCell = props => {
return ( return (
<Page> <Page>
<Navbar title={_t.textTextColor} backLink={_t.textBack}> <Navbar title={_t.textTextColor} backLink={_t.textBack}>
<NavRight> {Device.phone &&
<Link icon='icon-expand-down' sheetClose></Link> <NavRight>
</NavRight> <Link icon='icon-expand-down' sheetClose></Link>
</NavRight>
}
</Navbar> </Navbar>
<ThemeColorPalette changeColor={changeColor} curColor={fontColor} customColors={customColors} /> <ThemeColorPalette changeColor={changeColor} curColor={fontColor} customColors={customColors} />
<List> <List>
@ -265,9 +273,11 @@ const PageFillColorCell = props => {
return ( return (
<Page> <Page>
<Navbar title={_t.textFillColor} backLink={_t.textBack}> <Navbar title={_t.textFillColor} backLink={_t.textBack}>
<NavRight> {Device.phone &&
<Link icon='icon-expand-down' sheetClose></Link> <NavRight>
</NavRight> <Link icon='icon-expand-down' sheetClose></Link>
</NavRight>
}
</Navbar> </Navbar>
<ThemeColorPalette changeColor={changeColor} curColor={fillColor} customColors={customColors} transparent={true} /> <ThemeColorPalette changeColor={changeColor} curColor={fillColor} customColors={customColors} transparent={true} />
<List> <List>
@ -298,7 +308,13 @@ const PageCustomTextColorCell = props => {
return ( return (
<Page> <Page>
<Navbar title={_t.textCustomColor} backLink={_t.textBack} /> <Navbar title={_t.textCustomColor} backLink={_t.textBack}>
{Device.phone &&
<NavRight>
<Link icon='icon-expand-down' sheetClose></Link>
</NavRight>
}
</Navbar>
<CustomColorPicker currentColor={fontColor} onAddNewColor={onAddNewColor} /> <CustomColorPicker currentColor={fontColor} onAddNewColor={onAddNewColor} />
</Page> </Page>
) )
@ -323,7 +339,13 @@ const PageCustomFillColorCell = props => {
return ( return (
<Page> <Page>
<Navbar title={_t.textCustomColor} backLink={_t.textBack} /> <Navbar title={_t.textCustomColor} backLink={_t.textBack}>
{Device.phone &&
<NavRight>
<Link icon='icon-expand-down' sheetClose></Link>
</NavRight>
}
</Navbar>
<CustomColorPicker currentColor={fillColor} onAddNewColor={onAddNewColor} /> <CustomColorPicker currentColor={fillColor} onAddNewColor={onAddNewColor} />
</Page> </Page>
) )
@ -346,7 +368,13 @@ const PageTextFormatCell = props => {
return ( return (
<Page> <Page>
<Navbar title={_t.textTextFormat} backLink={_t.textBack} /> <Navbar title={_t.textTextFormat} backLink={_t.textBack}>
{Device.phone &&
<NavRight>
<Link icon='icon-expand-down' sheetClose></Link>
</NavRight>
}
</Navbar>
<List> <List>
<ListItem title={_t.textAlignLeft} radio checked={hAlignStr === 'left'} onChange={() => { <ListItem title={_t.textAlignLeft} radio checked={hAlignStr === 'left'} onChange={() => {
props.onHAlignChange('left'); props.onHAlignChange('left');
@ -419,7 +447,13 @@ const PageTextOrientationCell = props => {
return ( return (
<Page> <Page>
<Navbar title={_t.textTextOrientation} backLink={_t.textBack} /> <Navbar title={_t.textTextOrientation} backLink={_t.textBack}>
{Device.phone &&
<NavRight>
<Link icon='icon-expand-down' sheetClose></Link>
</NavRight>
}
</Navbar>
<List> <List>
<ListItem title={_t.textHorizontalText} radio checked={orientationStr === 'horizontal'} <ListItem title={_t.textHorizontalText} radio checked={orientationStr === 'horizontal'}
after={isAndroid ? <Icon slot="media" icon="icon-text-orientation-horizontal"></Icon> : null} onChange={() => { after={isAndroid ? <Icon slot="media" icon="icon-text-orientation-horizontal"></Icon> : null} onChange={() => {
@ -494,7 +528,13 @@ const PageBorderStyleCell = props => {
return ( return (
<Page> <Page>
<Navbar title={_t.textBorderStyle} backLink={_t.textBack} /> <Navbar title={_t.textBorderStyle} backLink={_t.textBack}>
{Device.phone &&
<NavRight>
<Link icon='icon-expand-down' sheetClose></Link>
</NavRight>
}
</Navbar>
<List> <List>
<ListItem link='#' className='no-indicator' title={_t.textNoBorder} onClick={() => { <ListItem link='#' className='no-indicator' title={_t.textNoBorder} onClick={() => {
storeCellSettings.changeBorderStyle('none'); storeCellSettings.changeBorderStyle('none');
@ -616,9 +656,11 @@ const PageBorderColorCell = props => {
return ( return (
<Page> <Page>
<Navbar backLink={_t.textBack}> <Navbar backLink={_t.textBack}>
<NavRight> {Device.phone &&
<Link icon='icon-expand-down' sheetClose></Link> <NavRight>
</NavRight> <Link icon='icon-expand-down' sheetClose></Link>
</NavRight>
}
</Navbar> </Navbar>
<ThemeColorPalette changeColor={changeColor} curColor={borderColor} customColors={customColors} /> <ThemeColorPalette changeColor={changeColor} curColor={borderColor} customColors={customColors} />
<List> <List>
@ -653,7 +695,13 @@ const PageCustomBorderColorCell = props => {
return ( return (
<Page> <Page>
<Navbar title={_t.textCustomColor} backLink={_t.textBack} /> <Navbar title={_t.textCustomColor} backLink={_t.textBack}>
{Device.phone &&
<NavRight>
<Link icon='icon-expand-down' sheetClose></Link>
</NavRight>
}
</Navbar>
<CustomColorPicker currentColor={borderColor} onAddNewColor={onAddNewColor} /> <CustomColorPicker currentColor={borderColor} onAddNewColor={onAddNewColor} />
</Page> </Page>
) )
@ -674,7 +722,13 @@ const PageBorderSizeCell = props => {
return ( return (
<Page> <Page>
<Navbar title={_t.textSize} backLink={_t.textBack} /> <Navbar title={_t.textSize} backLink={_t.textBack}>
{Device.phone &&
<NavRight>
<Link icon='icon-expand-down' sheetClose></Link>
</NavRight>
}
</Navbar>
<List> <List>
{Object.keys(borderSizes).map(key => { {Object.keys(borderSizes).map(key => {
return ( return (
@ -695,7 +749,13 @@ const PageFormatCell = props => {
return ( return (
<Page> <Page>
<Navbar title={_t.textFormat} backLink={_t.textBack} /> <Navbar title={_t.textFormat} backLink={_t.textBack}>
{Device.phone &&
<NavRight>
<Link icon='icon-expand-down' sheetClose></Link>
</NavRight>
}
</Navbar>
<List> <List>
<ListItem link='#' className='no-indicator' title={_t.textGeneral} onClick={() => props.onCellFormat('R2VuZXJhbA==')}> <ListItem link='#' className='no-indicator' title={_t.textGeneral} onClick={() => props.onCellFormat('R2VuZXJhbA==')}>
<Icon slot="media" icon="icon-format-general"></Icon> <Icon slot="media" icon="icon-format-general"></Icon>
@ -746,7 +806,13 @@ const PageAccountingFormatCell = props => {
return ( return (
<Page> <Page>
<Navbar title={_t.textAccounting} backLink={_t.textBack} /> <Navbar title={_t.textAccounting} backLink={_t.textBack}>
{Device.phone &&
<NavRight>
<Link icon='icon-expand-down' sheetClose></Link>
</NavRight>
}
</Navbar>
<List> <List>
<ListItem link='#' className='no-indicator' title={_t.textDollar} after='$' <ListItem link='#' className='no-indicator' title={_t.textDollar} after='$'
onClick={() => props.onCellFormat('XyglMjQqJTIwJTIzJTJDJTIzJTIzMC4wMF8pJTNCXyglMjQqJTIwKCUyMyUyQyUyMyUyMzAuMDApJTNCXyglMjQqJTIwJTIyLSUyMiUzRiUzRl8pJTNCXyglNDBfKQ==')}> onClick={() => props.onCellFormat('XyglMjQqJTIwJTIzJTJDJTIzJTIzMC4wMF8pJTNCXyglMjQqJTIwKCUyMyUyQyUyMyUyMzAuMDApJTNCXyglMjQqJTIwJTIyLSUyMiUzRiUzRl8pJTNCXyglNDBfKQ==')}>
@ -774,7 +840,13 @@ const PageCurrencyFormatCell = props => {
return ( return (
<Page> <Page>
<Navbar title={_t.textAccounting} backLink={_t.textBack} /> <Navbar title={_t.textAccounting} backLink={_t.textBack}>
{Device.phone &&
<NavRight>
<Link icon='icon-expand-down' sheetClose></Link>
</NavRight>
}
</Navbar>
<List> <List>
<ListItem link='#' className='no-indicator' title={_t.textDollar} after='$' <ListItem link='#' className='no-indicator' title={_t.textDollar} after='$'
onClick={() => props.onCellFormat('JTI0JTIzJTJDJTIzJTIzMC4wMA==')}> onClick={() => props.onCellFormat('JTI0JTIzJTJDJTIzJTIzMC4wMA==')}>
@ -802,7 +874,13 @@ const PageDateFormatCell = props => {
return ( return (
<Page> <Page>
<Navbar title={_t.textDate} backLink={_t.textBack} /> <Navbar title={_t.textDate} backLink={_t.textBack}>
{Device.phone &&
<NavRight>
<Link icon='icon-expand-down' sheetClose></Link>
</NavRight>
}
</Navbar>
<List> <List>
<ListItem link='#' className='no-indicator' title='07-24-88' after='MM-dd-yy' <ListItem link='#' className='no-indicator' title='07-24-88' after='MM-dd-yy'
onClick={() => props.onCellFormat('TU0tZGQteXk=')}></ListItem> onClick={() => props.onCellFormat('TU0tZGQteXk=')}></ListItem>
@ -835,7 +913,13 @@ const PageTimeFormatCell = props => {
return ( return (
<Page> <Page>
<Navbar title={_t.textTime} backLink={_t.textBack} /> <Navbar title={_t.textTime} backLink={_t.textBack}>
{Device.phone &&
<NavRight>
<Link icon='icon-expand-down' sheetClose></Link>
</NavRight>
}
</Navbar>
<List> <List>
<ListItem link='#' className='no-indicator' title='10:56' after='HH:mm' <ListItem link='#' className='no-indicator' title='10:56' after='HH:mm'
onClick={() => props.onCellFormat('aCUzQW1tJTNCJTQw')}> onClick={() => props.onCellFormat('aCUzQW1tJTNCJTQw')}>

199
apps/spreadsheeteditor/mobile/src/view/edit/EditChart.jsx
View file

@ -1,6 +1,6 @@
import React, {Fragment, useState, useEffect} from 'react'; import React, {Fragment, useState, useEffect} from 'react';
import {observer, inject} from "mobx-react"; import {observer, inject} from "mobx-react";
import {f7, List, ListItem, ListButton, ListInput, Icon, Row, Page, Navbar, BlockTitle, Toggle, Range, Link, Tabs, Tab, NavTitle, NavRight} from 'framework7-react'; import {f7, List, ListItem, ListButton, ListInput, Icon, Page, Navbar, NavRight, BlockTitle, Toggle, Range, Link, Tabs, Tab} from 'framework7-react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import {Device} from '../../../../../common/mobile/utils/device'; import {Device} from '../../../../../common/mobile/utils/device';
import {CustomColorPicker, ThemeColorPalette} from "../../../../../common/mobile/lib/component/ThemeColorPalette.jsx"; import {CustomColorPicker, ThemeColorPalette} from "../../../../../common/mobile/lib/component/ThemeColorPalette.jsx";
@ -23,7 +23,13 @@ const PageCustomFillColor = props => {
return ( return (
<Page> <Page>
<Navbar title={_t.textCustomColor} backLink={_t.textBack} /> <Navbar title={_t.textCustomColor} backLink={_t.textBack}>
{Device.phone &&
<NavRight>
<Link icon='icon-expand-down' sheetClose></Link>
</NavRight>
}
</Navbar>
<CustomColorPicker currentColor={fillColor} onAddNewColor={onAddNewColor}/> <CustomColorPicker currentColor={fillColor} onAddNewColor={onAddNewColor}/>
</Page> </Page>
) )
@ -83,7 +89,13 @@ const PageCustomBorderColor = props => {
return ( return (
<Page> <Page>
<Navbar title={_t.textCustomColor} backLink={_t.textBack} /> <Navbar title={_t.textCustomColor} backLink={_t.textBack}>
{Device.phone &&
<NavRight>
<Link icon='icon-expand-down' sheetClose></Link>
</NavRight>
}
</Navbar>
<CustomColorPicker currentColor={borderColor} onAddNewColor={onAddNewColor}/> <CustomColorPicker currentColor={borderColor} onAddNewColor={onAddNewColor}/>
</Page> </Page>
) )
@ -115,7 +127,13 @@ const PageBorderColor = props => {
return ( return (
<Page> <Page>
<Navbar title={_t.textColor} backLink={_t.textBack} /> <Navbar title={_t.textColor} backLink={_t.textBack}>
{Device.phone &&
<NavRight>
<Link icon='icon-expand-down' sheetClose></Link>
</NavRight>
}
</Navbar>
<ThemeColorPalette changeColor={changeColor} curColor={borderColor} customColors={customColors} /> <ThemeColorPalette changeColor={changeColor} curColor={borderColor} customColors={customColors} />
<List> <List>
<ListItem title={_t.textAddCustomColor} link={'/edit-chart-custom-border-color/'} routeProps={{ <ListItem title={_t.textAddCustomColor} link={'/edit-chart-custom-border-color/'} routeProps={{
@ -178,6 +196,11 @@ const PageStyle = props => {
<Link key={"sse-link-chart-fill"} tabLink={"#edit-chart-fill"}>{_t.textFill}</Link> <Link key={"sse-link-chart-fill"} tabLink={"#edit-chart-fill"}>{_t.textFill}</Link>
<Link key={"sse-link-chart-border"} tabLink={"#edit-chart-border"}>{_t.textBorder}</Link> <Link key={"sse-link-chart-border"} tabLink={"#edit-chart-border"}>{_t.textBorder}</Link>
</div> </div>
{Device.phone &&
<NavRight>
<Link icon='icon-expand-down' sheetClose></Link>
</NavRight>
}
</Navbar> </Navbar>
<Tabs animated> <Tabs animated>
<Tab key={"sse-tab-chart-type"} id={"edit-chart-type"} className="page-content no-padding-top dataview" tabActive={true}> <Tab key={"sse-tab-chart-type"} id={"edit-chart-type"} className="page-content no-padding-top dataview" tabActive={true}>
@ -262,7 +285,13 @@ const PageReorder = props => {
} }
return ( return (
<Page> <Page>
<Navbar title={_t.textReorder} backLink={_t.textBack} /> <Navbar title={_t.textReorder} backLink={_t.textBack}>
{Device.phone &&
<NavRight>
<Link icon='icon-expand-down' sheetClose></Link>
</NavRight>
}
</Navbar>
<List> <List>
<ListItem title={_t.textBringToForeground} onClick={() => {props.onReorder('all-up')}} link='#' className='no-indicator'> <ListItem title={_t.textBringToForeground} onClick={() => {props.onReorder('all-up')}} link='#' className='no-indicator'>
<Icon slot="media" icon="icon-move-foreground"></Icon> <Icon slot="media" icon="icon-move-foreground"></Icon>
@ -404,7 +433,13 @@ const PageLayout = props => {
return ( return (
<Page> <Page>
<Navbar title={_t.textLayout} backLink={_t.textBack} /> <Navbar title={_t.textLayout} backLink={_t.textBack}>
{Device.phone &&
<NavRight>
<Link icon='icon-expand-down' sheetClose></Link>
</NavRight>
}
</Navbar>
<List> <List>
<ListItem title={_t.textChartTitle} <ListItem title={_t.textChartTitle}
after={chartLayoutTitles[chartTitle]} link="/edit-chart-title/" routeProps={{ after={chartLayoutTitles[chartTitle]} link="/edit-chart-title/" routeProps={{
@ -482,7 +517,13 @@ const PageChartTitle = props => {
return ( return (
<Page> <Page>
<Navbar title={_t.textChartTitle} backLink={_t.textBack} /> <Navbar title={_t.textChartTitle} backLink={_t.textBack}>
{Device.phone &&
<NavRight>
<Link icon='icon-expand-down' sheetClose></Link>
</NavRight>
}
</Navbar>
<List> <List>
{Object.keys(chartLayoutTitles).map(key => { {Object.keys(chartLayoutTitles).map(key => {
return ( return (
@ -507,7 +548,13 @@ const PageLegend = props => {
return ( return (
<Page> <Page>
<Navbar title={_t.textLegend} backLink={_t.textBack} /> <Navbar title={_t.textLegend} backLink={_t.textBack}>
{Device.phone &&
<NavRight>
<Link icon='icon-expand-down' sheetClose></Link>
</NavRight>
}
</Navbar>
<List> <List>
{Object.keys(chartLayoutLegends).map(key => { {Object.keys(chartLayoutLegends).map(key => {
return ( return (
@ -532,7 +579,13 @@ const PageHorizontalAxisTitle = props => {
return ( return (
<Page> <Page>
<Navbar title={_t.textHorizontal} backLink={_t.textBack} /> <Navbar title={_t.textHorizontal} backLink={_t.textBack}>
{Device.phone &&
<NavRight>
<Link icon='icon-expand-down' sheetClose></Link>
</NavRight>
}
</Navbar>
<List> <List>
{Object.keys(chartLayoutAxisTitleHorizontal).map(key => { {Object.keys(chartLayoutAxisTitleHorizontal).map(key => {
return ( return (
@ -557,7 +610,13 @@ const PageVerticalAxisTitle = props => {
return ( return (
<Page> <Page>
<Navbar title={_t.textVertical} backLink={_t.textBack} /> <Navbar title={_t.textVertical} backLink={_t.textBack}>
{Device.phone &&
<NavRight>
<Link icon='icon-expand-down' sheetClose></Link>
</NavRight>
}
</Navbar>
<List> <List>
{Object.keys(chartLayoutAxisTitleVertical).map(key => { {Object.keys(chartLayoutAxisTitleVertical).map(key => {
return ( return (
@ -582,7 +641,13 @@ const PageHorizontalGridlines = props => {
return ( return (
<Page> <Page>
<Navbar title={_t.textHorizontal} backLink={_t.textBack} /> <Navbar title={_t.textHorizontal} backLink={_t.textBack}>
{Device.phone &&
<NavRight>
<Link icon='icon-expand-down' sheetClose></Link>
</NavRight>
}
</Navbar>
<List> <List>
{Object.keys(chartLayoutGridlinesHorizontal).map(key => { {Object.keys(chartLayoutGridlinesHorizontal).map(key => {
return ( return (
@ -607,7 +672,13 @@ const PageVerticalGridlines = props => {
return ( return (
<Page> <Page>
<Navbar title={_t.textVertical} backLink={_t.textBack} /> <Navbar title={_t.textVertical} backLink={_t.textBack}>
{Device.phone &&
<NavRight>
<Link icon='icon-expand-down' sheetClose></Link>
</NavRight>
}
</Navbar>
<List> <List>
{Object.keys(chartLayoutGridlinesVertical).map(key => { {Object.keys(chartLayoutGridlinesVertical).map(key => {
return ( return (
@ -632,7 +703,13 @@ const PageDataLabels = props => {
return ( return (
<Page> <Page>
<Navbar title={_t.textDataLabels} backLink={_t.textBack} /> <Navbar title={_t.textDataLabels} backLink={_t.textBack}>
{Device.phone &&
<NavRight>
<Link icon='icon-expand-down' sheetClose></Link>
</NavRight>
}
</Navbar>
<List> <List>
{Object.keys(chartDataLabels).map(key => { {Object.keys(chartDataLabels).map(key => {
return ( return (
@ -724,7 +801,13 @@ const PageVerticalAxis = props => {
return ( return (
<Page> <Page>
<Navbar title={_t.textAxisOptions} backLink={_t.textBack} /> <Navbar title={_t.textAxisOptions} backLink={_t.textBack}>
{Device.phone &&
<NavRight>
<Link icon='icon-expand-down' sheetClose></Link>
</NavRight>
}
</Navbar>
<List inlineLabels className="inputs-list"> <List inlineLabels className="inputs-list">
<ListInput <ListInput
label={_t.textMinimumValue} label={_t.textMinimumValue}
@ -818,7 +901,13 @@ const PageVertAxisCrosses = props => {
return ( return (
<Page> <Page>
<Navbar title={_t.textAxisCrosses} backLink={_t.textBack} /> <Navbar title={_t.textAxisCrosses} backLink={_t.textBack}>
{Device.phone &&
<NavRight>
<Link icon='icon-expand-down' sheetClose></Link>
</NavRight>
}
</Navbar>
<List> <List>
{axisCrosses.map((elem, index) => { {axisCrosses.map((elem, index) => {
return ( return (
@ -846,7 +935,13 @@ const PageDisplayUnits = props => {
return ( return (
<Page> <Page>
<Navbar title={_t.textDisplayUnits} backLink={_t.textBack} /> <Navbar title={_t.textDisplayUnits} backLink={_t.textBack}>
{Device.phone &&
<NavRight>
<Link icon='icon-expand-down' sheetClose></Link>
</NavRight>
}
</Navbar>
<List> <List>
{vertAxisDisplayUnits.map((elem, index) => { {vertAxisDisplayUnits.map((elem, index) => {
return ( return (
@ -874,7 +969,13 @@ const PageVertMajorType = props => {
return ( return (
<Page> <Page>
<Navbar title={_t.textMajorType} backLink={_t.textBack} /> <Navbar title={_t.textMajorType} backLink={_t.textBack}>
{Device.phone &&
<NavRight>
<Link icon='icon-expand-down' sheetClose></Link>
</NavRight>
}
</Navbar>
<List> <List>
{tickOptions.map((elem, index) => { {tickOptions.map((elem, index) => {
return ( return (
@ -902,7 +1003,13 @@ const PageVertMinorType = props => {
return ( return (
<Page> <Page>
<Navbar title={_t.textMinorType} backLink={_t.textBack} /> <Navbar title={_t.textMinorType} backLink={_t.textBack}>
{Device.phone &&
<NavRight>
<Link icon='icon-expand-down' sheetClose></Link>
</NavRight>
}
</Navbar>
<List> <List>
{tickOptions.map((elem, index) => { {tickOptions.map((elem, index) => {
return ( return (
@ -930,7 +1037,13 @@ const PageVertLabelPosition = props => {
return ( return (
<Page> <Page>
<Navbar title={_t.textLabelPosition} backLink={_t.textBack} /> <Navbar title={_t.textLabelPosition} backLink={_t.textBack}>
{Device.phone &&
<NavRight>
<Link icon='icon-expand-down' sheetClose></Link>
</NavRight>
}
</Navbar>
<List> <List>
{verticalAxisLabelsPosition.map((elem, index) => { {verticalAxisLabelsPosition.map((elem, index) => {
return ( return (
@ -1015,7 +1128,13 @@ const PageHorizontalAxis = props => {
return ( return (
<Page> <Page>
<Navbar title={_t.textAxisOptions} backLink={_t.textBack} /> <Navbar title={_t.textAxisOptions} backLink={_t.textBack}>
{Device.phone &&
<NavRight>
<Link icon='icon-expand-down' sheetClose></Link>
</NavRight>
}
</Navbar>
<List inlineLabels className="inputs-list"> <List inlineLabels className="inputs-list">
<ListItem title={_t.textAxisCrosses} link="/edit-hor-axis-crosses/" after={currentAxisCrosses.display} routeProps={{ <ListItem title={_t.textAxisCrosses} link="/edit-hor-axis-crosses/" after={currentAxisCrosses.display} routeProps={{
axisCrosses, axisCrosses,
@ -1088,7 +1207,13 @@ const PageHorAxisCrosses = props => {
return ( return (
<Page> <Page>
<Navbar title={_t.textAxisCrosses} backLink={_t.textBack} /> <Navbar title={_t.textAxisCrosses} backLink={_t.textBack}>
{Device.phone &&
<NavRight>
<Link icon='icon-expand-down' sheetClose></Link>
</NavRight>
}
</Navbar>
<List> <List>
{axisCrosses.map((elem, index) => { {axisCrosses.map((elem, index) => {
return ( return (
@ -1116,7 +1241,13 @@ const PageHorAxisPosition = props => {
return ( return (
<Page> <Page>
<Navbar title={_t.textAxisPosition} backLink={_t.textBack} /> <Navbar title={_t.textAxisPosition} backLink={_t.textBack}>
{Device.phone &&
<NavRight>
<Link icon='icon-expand-down' sheetClose></Link>
</NavRight>
}
</Navbar>
<List> <List>
{horAxisPosition.map((elem, index) => { {horAxisPosition.map((elem, index) => {
return ( return (
@ -1144,7 +1275,13 @@ const PageHorMajorType = props => {
return ( return (
<Page> <Page>
<Navbar title={_t.textMajorType} backLink={_t.textBack} /> <Navbar title={_t.textMajorType} backLink={_t.textBack}>
{Device.phone &&
<NavRight>
<Link icon='icon-expand-down' sheetClose></Link>
</NavRight>
}
</Navbar>
<List> <List>
{tickOptions.map((elem, index) => { {tickOptions.map((elem, index) => {
return ( return (
@ -1172,7 +1309,13 @@ const PageHorMinorType = props => {
return ( return (
<Page> <Page>
<Navbar title={_t.textMinorType} backLink={_t.textBack} /> <Navbar title={_t.textMinorType} backLink={_t.textBack}>
{Device.phone &&
<NavRight>
<Link icon='icon-expand-down' sheetClose></Link>
</NavRight>
}
</Navbar>
<List> <List>
{tickOptions.map((elem, index) => { {tickOptions.map((elem, index) => {
return ( return (
@ -1200,7 +1343,13 @@ const PageHorLabelPosition = props => {
return ( return (
<Page> <Page>
<Navbar title={_t.textLabelPosition} backLink={_t.textBack} /> <Navbar title={_t.textLabelPosition} backLink={_t.textBack}>
{Device.phone &&
<NavRight>
<Link icon='icon-expand-down' sheetClose></Link>
</NavRight>
}
</Navbar>
<List> <List>
{horAxisLabelsPosition.map((elem, index) => { {horAxisLabelsPosition.map((elem, index) => {
return ( return (

27
apps/spreadsheeteditor/mobile/src/view/edit/EditImage.jsx
View file

@ -1,7 +1,6 @@
import React, {Fragment, useState} from 'react'; import React, {Fragment, useState} from 'react';
import {observer, inject} from "mobx-react"; import {observer, inject} from "mobx-react";
import {f7, Page, Navbar, List, ListItem, Row, BlockTitle, Link, Toggle, Icon, View, NavRight, ListItemCell, Range, Button, Segmented, Tab, Tabs, ListInput, ListButton} from 'framework7-react'; import {f7, Page, Navbar, NavRight, List, ListItem, BlockTitle, Icon, ListInput, ListButton, Link} from 'framework7-react';
import { ThemeColorPalette, CustomColorPicker } from '../../../../../common/mobile/lib/component/ThemeColorPalette.jsx';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import {Device} from '../../../../../common/mobile/utils/device'; import {Device} from '../../../../../common/mobile/utils/device';
@ -40,7 +39,13 @@ const PageReorder = props => {
return ( return (
<Page> <Page>
<Navbar title={_t.textReorder} backLink={_t.textBack} /> <Navbar title={_t.textReorder} backLink={_t.textBack}>
{Device.phone &&
<NavRight>
<Link icon='icon-expand-down' sheetClose></Link>
</NavRight>
}
</Navbar>
<List> <List>
<ListItem title={_t.textBringToForeground} link='#' onClick={() => {props.onReorder('all-up')}} className='no-indicator'> <ListItem title={_t.textBringToForeground} link='#' onClick={() => {props.onReorder('all-up')}} className='no-indicator'>
<Icon slot="media" icon="icon-move-foreground"></Icon> <Icon slot="media" icon="icon-move-foreground"></Icon>
@ -72,7 +77,13 @@ const PageReplace = props => {
return ( return (
<Page className="images"> <Page className="images">
<Navbar title={_t.textReplace} backLink={_t.textBack} /> <Navbar title={_t.textReplace} backLink={_t.textBack}>
{Device.phone &&
<NavRight>
<Link icon='icon-expand-down' sheetClose></Link>
</NavRight>
}
</Navbar>
<List> <List>
<ListItem title={_t.textPictureFromLibrary} onClick={() => {props.onReplaceByFile()}}> <ListItem title={_t.textPictureFromLibrary} onClick={() => {props.onReplaceByFile()}}>
<Icon slot="media" icon="icon-image-library"></Icon> <Icon slot="media" icon="icon-image-library"></Icon>
@ -105,7 +116,13 @@ const PageLinkSettings = props => {
}; };
return ( return (
<Page> <Page>
<Navbar title={_t.textLinkSettings} backLink={_t.textBack} /> <Navbar title={_t.textLinkSettings} backLink={_t.textBack}>
{Device.phone &&
<NavRight>
<Link icon='icon-expand-down' sheetClose></Link>
</NavRight>
}
</Navbar>
<BlockTitle>{_t.textAddress}</BlockTitle> <BlockTitle>{_t.textAddress}</BlockTitle>
<List> <List>
<ListInput <ListInput

18
apps/spreadsheeteditor/mobile/src/view/edit/EditLink.jsx
View file

@ -1,6 +1,6 @@
import React, {useState, useEffect, Fragment} from 'react'; import React, {useState, useEffect, Fragment} from 'react';
import {observer, inject} from "mobx-react"; import {observer, inject} from "mobx-react";
import {f7, List, ListItem, Page, Navbar, Icon, ListButton, ListInput, Segmented, Button} from 'framework7-react'; import {f7, List, ListItem, Page, Navbar, NavRight, Icon, ListButton, ListInput, Link} from 'framework7-react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import {Device} from "../../../../../common/mobile/utils/device"; import {Device} from "../../../../../common/mobile/utils/device";
@ -17,7 +17,13 @@ const PageTypeLink = ({curType, changeType, storeFocusObjects}) => {
return ( return (
<Page> <Page>
<Navbar title={_t.textLinkType} backLink={_t.textBack}/> <Navbar title={_t.textLinkType} backLink={_t.textBack}>
{Device.phone &&
<NavRight>
<Link icon='icon-expand-down' sheetClose></Link>
</NavRight>
}
</Navbar>
<List> <List>
<ListItem title={_t.textExternalLink} radio checked={typeLink === 1} onClick={() => {setTypeLink(1); changeType(1);}}></ListItem> <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> <ListItem title={_t.textInternalDataRange} radio checked={typeLink === 2} onClick={() => {setTypeLink(2); changeType(2);}}></ListItem>
@ -39,7 +45,13 @@ const PageSheet = ({curSheet, sheets, changeSheet, storeFocusObjects}) => {
return ( return (
<Page> <Page>
<Navbar title={_t.textSheet} backLink={_t.textBack}/> <Navbar title={_t.textSheet} backLink={_t.textBack}>
{Device.phone &&
<NavRight>
<Link icon='icon-expand-down' sheetClose></Link>
</NavRight>
}
</Navbar>
<List> <List>
{sheets.map(sheet => { {sheets.map(sheet => {
return( return(

55
apps/spreadsheeteditor/mobile/src/view/edit/EditShape.jsx
View file

@ -1,6 +1,6 @@
import React, {Fragment, useState} from 'react'; import React, {Fragment, useState} from 'react';
import {observer, inject} from "mobx-react"; import {observer, inject} from "mobx-react";
import {f7, Page, Navbar, List, ListItem, Row, BlockTitle, Link, Toggle, Icon, View, NavRight, ListItemCell, Range, Button, Segmented, Tab, Tabs} from 'framework7-react'; import {f7, Page, Navbar, NavRight, List, ListItem, Link, Icon, Range, Tab, Tabs} from 'framework7-react';
import { ThemeColorPalette, CustomColorPicker } from '../../../../../common/mobile/lib/component/ThemeColorPalette.jsx'; import { ThemeColorPalette, CustomColorPicker } from '../../../../../common/mobile/lib/component/ThemeColorPalette.jsx';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import {Device} from '../../../../../common/mobile/utils/device'; import {Device} from '../../../../../common/mobile/utils/device';
@ -120,6 +120,11 @@ const PageStyle = props => {
<Link key={"se-link-shape-border"} tabLink={"#edit-shape-border"}>{_t.textBorder}</Link> <Link key={"se-link-shape-border"} tabLink={"#edit-shape-border"}>{_t.textBorder}</Link>
<Link key={"se-link-shape-effects"} tabLink={"#edit-shape-effects"}>{_t.textEffects}</Link> <Link key={"se-link-shape-effects"} tabLink={"#edit-shape-effects"}>{_t.textEffects}</Link>
</div> </div>
{Device.phone &&
<NavRight>
<Link icon='icon-expand-down' sheetClose></Link>
</NavRight>
}
</Navbar> </Navbar>
<Tabs animated> <Tabs animated>
<Tab key={"se-tab-shape-fill"} id={"edit-shape-fill"} className="page-content no-padding-top" tabActive={true}> <Tab key={"se-tab-shape-fill"} id={"edit-shape-fill"} className="page-content no-padding-top" tabActive={true}>
@ -188,7 +193,13 @@ const PageCustomFillColor = props => {
return( return(
<Page> <Page>
<Navbar title={_t.textCustomColor} backLink={_t.textBack} /> <Navbar title={_t.textCustomColor} backLink={_t.textBack}>
{Device.phone &&
<NavRight>
<Link icon='icon-expand-down' sheetClose></Link>
</NavRight>
}
</Navbar>
<CustomColorPicker currentColor={fillColor} onAddNewColor={onAddNewColor}/> <CustomColorPicker currentColor={fillColor} onAddNewColor={onAddNewColor}/>
</Page> </Page>
) )
@ -218,7 +229,13 @@ const PageStyleNoFill = props => {
return ( return (
<Page> <Page>
<Navbar backLink={_t.textBack} title={_t.textBorder}></Navbar> <Navbar backLink={_t.textBack} title={_t.textBorder}>
{Device.phone &&
<NavRight>
<Link icon='icon-expand-down' sheetClose></Link>
</NavRight>
}
</Navbar>
<List> <List>
<ListItem> <ListItem>
<div slot="root-start" className='inner-range-title'>{_t.textSize}</div> <div slot="root-start" className='inner-range-title'>{_t.textSize}</div>
@ -260,7 +277,13 @@ const PageReplace = props => {
return ( return (
<Page className="shapes dataview"> <Page className="shapes dataview">
<Navbar title={_t.textReplace} backLink={_t.textBack} /> <Navbar title={_t.textReplace} backLink={_t.textBack}>
{Device.phone &&
<NavRight>
<Link icon='icon-expand-down' sheetClose></Link>
</NavRight>
}
</Navbar>
{shapes.map((row, indexRow) => { {shapes.map((row, indexRow) => {
return ( return (
<ul className="row" key={'shape-row-' + indexRow}> <ul className="row" key={'shape-row-' + indexRow}>
@ -292,7 +315,13 @@ const PageReorder = props => {
return ( return (
<Page> <Page>
<Navbar title={_t.textReorder} backLink={_t.textBack} /> <Navbar title={_t.textReorder} backLink={_t.textBack}>
{Device.phone &&
<NavRight>
<Link icon='icon-expand-down' sheetClose></Link>
</NavRight>
}
</Navbar>
<List> <List>
<ListItem title={_t.textBringToForeground} link='#' onClick={() => {props.onReorder('all-up')}} className='no-indicator'> <ListItem title={_t.textBringToForeground} link='#' onClick={() => {props.onReorder('all-up')}} className='no-indicator'>
<Icon slot="media" icon="icon-move-foreground"></Icon> <Icon slot="media" icon="icon-move-foreground"></Icon>
@ -334,7 +363,13 @@ const PageBorderColor = props => {
}; };
return ( return (
<Page> <Page>
<Navbar title={_t.textColor} backLink={_t.textBack} /> <Navbar title={_t.textColor} backLink={_t.textBack}>
{Device.phone &&
<NavRight>
<Link icon='icon-expand-down' sheetClose></Link>
</NavRight>
}
</Navbar>
<ThemeColorPalette changeColor={changeColor} curColor={borderColor} customColors={customColors}/> <ThemeColorPalette changeColor={changeColor} curColor={borderColor} customColors={customColors}/>
<List> <List>
<ListItem title={_t.textAddCustomColor} link={'/edit-shape-custom-border-color/'} routeProps={{ <ListItem title={_t.textAddCustomColor} link={'/edit-shape-custom-border-color/'} routeProps={{
@ -360,7 +395,13 @@ const PageCustomBorderColor = props => {
}; };
return ( return (
<Page> <Page>
<Navbar title={_t.textCustomColor} backLink={_t.textBack} /> <Navbar title={_t.textCustomColor} backLink={_t.textBack}>
{Device.phone &&
<NavRight>
<Link icon='icon-expand-down' sheetClose></Link>
</NavRight>
}
</Navbar>
<CustomColorPicker currentColor={borderColor} onAddNewColor={onAddNewColor}/> <CustomColorPicker currentColor={borderColor} onAddNewColor={onAddNewColor}/>
</Page> </Page>
) )

28
apps/spreadsheeteditor/mobile/src/view/edit/EditText.jsx
View file

@ -1,6 +1,6 @@
import React, {Fragment, useState} from 'react'; import React, {Fragment, useState} from 'react';
import {observer, inject} from "mobx-react"; import {observer, inject} from "mobx-react";
import {f7, List, ListItem, Icon, Row, Button, Page, Navbar, Segmented, BlockTitle} from 'framework7-react'; import {f7, List, ListItem, Icon, Row, Button, Page, Navbar, NavRight, Segmented, BlockTitle, Link} from 'framework7-react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import {Device} from '../../../../../common/mobile/utils/device'; import {Device} from '../../../../../common/mobile/utils/device';
import { ThemeColorPalette, CustomColorPicker } from '../../../../../common/mobile/lib/component/ThemeColorPalette.jsx'; import { ThemeColorPalette, CustomColorPicker } from '../../../../../common/mobile/lib/component/ThemeColorPalette.jsx';
@ -9,14 +9,12 @@ const EditText = props => {
const isAndroid = Device.android; const isAndroid = Device.android;
const { t } = useTranslation(); const { t } = useTranslation();
const _t = t('View.Edit', {returnObjects: true}); const _t = t('View.Edit', {returnObjects: true});
// const metricText = Common.Utils.Metric.getCurrentMetricName();
const storeTextSettings = props.storeTextSettings; const storeTextSettings = props.storeTextSettings;
const textIn = storeTextSettings.textIn; const textIn = storeTextSettings.textIn;
const fontName = storeTextSettings.fontName || _t.textFonts; const fontName = storeTextSettings.fontName || _t.textFonts;
const fontSize = storeTextSettings.fontSize; const fontSize = storeTextSettings.fontSize;
const fontColor = storeTextSettings.textColor; const fontColor = storeTextSettings.textColor;
// console.log(fontColor);
const displaySize = typeof fontSize === 'undefined' ? _t.textAuto : fontSize + ' ' + _t.textPt; const displaySize = typeof fontSize === 'undefined' ? _t.textAuto : fontSize + ' ' + _t.textPt;
const isBold = storeTextSettings.isBold; const isBold = storeTextSettings.isBold;
@ -119,7 +117,13 @@ const PageFonts = props => {
return ( return (
<Page> <Page>
<Navbar title={_t.textFonts} backLink={_t.textBack} /> <Navbar title={_t.textFonts} backLink={_t.textBack}>
{Device.phone &&
<NavRight>
<Link icon='icon-expand-down' sheetClose></Link>
</NavRight>
}
</Navbar>
<List> <List>
<ListItem title={_t.textSize}> <ListItem title={_t.textSize}>
{!isAndroid && <div slot='after-start'>{displaySize}</div>} {!isAndroid && <div slot='after-start'>{displaySize}</div>}
@ -184,7 +188,13 @@ const PageFontColor = props => {
return ( return (
<Page> <Page>
<Navbar title={_t.textTextColor} backLink={_t.textBack} /> <Navbar title={_t.textTextColor} backLink={_t.textBack}>
{Device.phone &&
<NavRight>
<Link icon='icon-expand-down' sheetClose></Link>
</NavRight>
}
</Navbar>
<ThemeColorPalette changeColor={changeColor} curColor={textColor} customColors={customColors} /> <ThemeColorPalette changeColor={changeColor} curColor={textColor} customColors={customColors} />
<List> <List>
<ListItem title={_t.textAddCustomColor} link={'/edit-text-custom-font-color/'} routeProps={{ <ListItem title={_t.textAddCustomColor} link={'/edit-text-custom-font-color/'} routeProps={{
@ -216,7 +226,13 @@ const PageCustomFontColor = props => {
}; };
return ( return (
<Page> <Page>
<Navbar title={_t.textCustomColor} backLink={_t.textBack} /> <Navbar title={_t.textCustomColor} backLink={_t.textBack}>
{Device.phone &&
<NavRight>
<Link icon='icon-expand-down' sheetClose></Link>
</NavRight>
}
</Navbar>
<CustomColorPicker autoColor={autoColor} currentColor={textColor} onAddNewColor={onAddNewColor}/> <CustomColorPicker autoColor={autoColor} currentColor={textColor} onAddNewColor={onAddNewColor}/>
</Page> </Page>
) )