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

[PE mobile] Correct navbars

Browse source
This commit is contained in:
SergeyEzhin 2021-05-29 20:40:36 +03:00
parent 8461050b39
commit c43062883b
6 changed files with 298 additions and 57 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

62
apps/presentationeditor/mobile/src/view/edit/EditChart.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 {List, ListItem, ListButton, Icon, Row, Page, Navbar, BlockTitle, Toggle, Range, Link, Tabs, Tab} from 'framework7-react'; import {List, ListItem, ListButton, Icon, Row, Page, Navbar, BlockTitle, Toggle, Range, Link, Tabs, Tab, NavRight} 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";
@ -24,7 +24,15 @@ 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 sheetClose='#edit-sheet'>
<Icon icon='icon-expand-down'/>
</Link>
</NavRight>
}
</Navbar>
<CustomColorPicker currentColor={fillColor} onAddNewColor={onAddNewColor}/> <CustomColorPicker currentColor={fillColor} onAddNewColor={onAddNewColor}/>
</Page> </Page>
) )
@ -84,7 +92,15 @@ 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 sheetClose='#edit-sheet'>
<Icon icon='icon-expand-down'/>
</Link>
</NavRight>
}
</Navbar>
<CustomColorPicker currentColor={borderColor} onAddNewColor={onAddNewColor}/> <CustomColorPicker currentColor={borderColor} onAddNewColor={onAddNewColor}/>
</Page> </Page>
) )
@ -114,7 +130,15 @@ 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 sheetClose='#edit-sheet'>
<Icon icon='icon-expand-down'/>
</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={{
@ -135,8 +159,6 @@ const PageStyle = props => {
const styles = storeChartSettings.styles; const styles = storeChartSettings.styles;
const shapeObject = props.storeFocusObjects.shapeObject; const shapeObject = props.storeFocusObjects.shapeObject;
const chartStyles = storeChartSettings.chartStyles; const chartStyles = storeChartSettings.chartStyles;
// console.log(chartStyles, curType);
// console.log(Asc.c_oAscChartTypeSettings.comboBarLine, Asc.c_oAscChartTypeSettings.comboBarLineSecondary, Asc.c_oAscChartTypeSettings.comboAreaBar, Asc.c_oAscChartTypeSettings.comboCustom);
let borderSize, borderType, borderColor; let borderSize, borderType, borderColor;
@ -173,6 +195,13 @@ const PageStyle = props => {
<Link key={"pe-link-chart-fill"} tabLink={"#edit-chart-fill"}>{_t.textFill}</Link> <Link key={"pe-link-chart-fill"} tabLink={"#edit-chart-fill"}>{_t.textFill}</Link>
<Link key={"pe-link-chart-border"} tabLink={"#edit-chart-border"}>{_t.textBorder}</Link> <Link key={"pe-link-chart-border"} tabLink={"#edit-chart-border"}>{_t.textBorder}</Link>
</div> </div>
{Device.phone &&
<NavRight>
<Link sheetClose='#edit-sheet'>
<Icon icon='icon-expand-down'/>
</Link>
</NavRight>
}
</Navbar> </Navbar>
<Tabs animated> <Tabs animated>
<Tab key={"pe-tab-chart-type"} id={"edit-chart-type"} className="page-content no-padding-top dataview" tabActive={true}> <Tab key={"pe-tab-chart-type"} id={"edit-chart-type"} className="page-content no-padding-top dataview" tabActive={true}>
@ -262,7 +291,15 @@ 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 sheetClose='#edit-sheet'>
<Icon icon='icon-expand-down'/>
</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>
@ -293,7 +330,15 @@ const PageAlign = props => {
return ( return (
<Page> <Page>
<Navbar title={_t.textAlign} backLink={_t.textBack} /> <Navbar title={_t.textAlign} backLink={_t.textBack}>
{Device.phone &&
<NavRight>
<Link sheetClose='#edit-sheet'>
<Icon icon='icon-expand-down'/>
</Link>
</NavRight>
}
</Navbar>
<List> <List>
<ListItem title={_t.textAlignLeft} link='#' onClick={() => {props.onAlign('align-left')}} className='no-indicator'> <ListItem title={_t.textAlignLeft} link='#' onClick={() => {props.onAlign('align-left')}} className='no-indicator'>
<Icon slot="media" icon="icon-align-left"></Icon> <Icon slot="media" icon="icon-align-left"></Icon>
@ -329,6 +374,7 @@ const PageAlign = props => {
const EditChart = props => { const EditChart = props => {
const { t } = useTranslation(); const { t } = useTranslation();
const _t = t('View.Edit', {returnObjects: true}); const _t = t('View.Edit', {returnObjects: true});
return ( return (
<Fragment> <Fragment>
<List> <List>

42
apps/presentationeditor/mobile/src/view/edit/EditImage.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, ListInput, ListButton} from 'framework7-react'; import {f7, Page, Navbar, List, ListItem, Row, BlockTitle, Link, Toggle, Icon, View, ListItemCell, Range, Button, Segmented, Tab, Tabs, ListInput, ListButton, NavRight} 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';
@ -43,7 +43,15 @@ 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 sheetClose='#edit-sheet'>
<Icon icon='icon-expand-down'/>
</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>
@ -74,7 +82,15 @@ const PageAlign = props => {
return ( return (
<Page> <Page>
<Navbar title={_t.textAlign} backLink={_t.textBack} /> <Navbar title={_t.textAlign} backLink={_t.textBack}>
{Device.phone &&
<NavRight>
<Link sheetClose='#edit-sheet'>
<Icon icon='icon-expand-down'/>
</Link>
</NavRight>
}
</Navbar>
<List> <List>
<ListItem title={_t.textAlignLeft} link='#' onClick={() => {props.onAlign('align-left')}} className='no-indicator'> <ListItem title={_t.textAlignLeft} link='#' onClick={() => {props.onAlign('align-left')}} className='no-indicator'>
<Icon slot="media" icon="icon-align-left"></Icon> <Icon slot="media" icon="icon-align-left"></Icon>
@ -119,7 +135,15 @@ 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 sheetClose='#edit-sheet'>
<Icon icon='icon-expand-down'/>
</Link>
</NavRight>
}
</Navbar>
<List> <List>
<ListItem title={_t.textPictureFromLibrary} onClick={() => {props.onReplaceByFile()}}> <ListItem title={_t.textPictureFromLibrary} onClick={() => {props.onReplaceByFile()}}>
<Icon slot="media" icon="icon-link"></Icon> <Icon slot="media" icon="icon-link"></Icon>
@ -152,7 +176,15 @@ 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 sheetClose='#edit-sheet'>
<Icon icon='icon-expand-down'/>
</Link>
</NavRight>
}
</Navbar>
<BlockTitle>{_t.textAddress}</BlockTitle> <BlockTitle>{_t.textAddress}</BlockTitle>
<List> <List>
<ListInput <ListInput

32
apps/presentationeditor/mobile/src/view/edit/EditLink.jsx
View file

@ -1,6 +1,6 @@
import React, {useState, useEffect} from 'react'; import React, {useState, useEffect} 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, Icon, ListButton, ListInput, Segmented, Button, NavRight, 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,15 @@ const PageTypeLink = props => {
return ( return (
<Page> <Page>
<Navbar title={_t.textLinkType} backLink={_t.textBack}/> <Navbar title={_t.textLinkType} backLink={_t.textBack}>
{Device.phone &&
<NavRight>
<Link sheetClose='#edit-sheet'>
<Icon icon='icon-expand-down'/>
</Link>
</NavRight>
}
</Navbar>
<List> <List>
<ListItem title={_t.textExternalLink} radio checked={typeLink === 1} onClick={() => {setTypeLink(1); props.changeType(1);}}></ListItem> <ListItem title={_t.textExternalLink} radio checked={typeLink === 1} onClick={() => {setTypeLink(1); props.changeType(1);}}></ListItem>
<ListItem title={_t.textSlideInThisPresentation} radio checked={typeLink === 0} onClick={() => {setTypeLink(0); props.changeType(0);}}></ListItem> <ListItem title={_t.textSlideInThisPresentation} radio checked={typeLink === 0} onClick={() => {setTypeLink(0); props.changeType(0);}}></ListItem>
@ -62,7 +70,15 @@ const PageLinkTo = props => {
return ( return (
<Page> <Page>
<Navbar title={_t.textLinkTo} backLink={_t.textBack}/> <Navbar title={_t.textLinkTo} backLink={_t.textBack}>
{Device.phone &&
<NavRight>
<Link sheetClose='#edit-sheet'>
<Icon icon='icon-expand-down'/>
</Link>
</NavRight>
}
</Navbar>
<List> <List>
<ListItem title={_t.textNextSlide} radio checked={stateTypeTo === 0} onClick={() => {changeTypeTo(0)}}></ListItem> <ListItem title={_t.textNextSlide} radio checked={stateTypeTo === 0} onClick={() => {changeTypeTo(0)}}></ListItem>
<ListItem title={_t.textPreviousSlide} radio checked={stateTypeTo === 1} onClick={() => {changeTypeTo(1)}}></ListItem> <ListItem title={_t.textPreviousSlide} radio checked={stateTypeTo === 1} onClick={() => {changeTypeTo(1)}}></ListItem>
@ -134,7 +150,15 @@ const PageLink = props => {
return ( return (
<Page> <Page>
<Navbar title={_t.textLink} backLink={_t.textBack}/> <Navbar title={_t.textLink} backLink={_t.textBack}>
{Device.phone &&
<NavRight>
<Link sheetClose='#edit-sheet'>
<Icon icon='icon-expand-down'/>
</Link>
</NavRight>
}
</Navbar>
<List inlineLabels className='inputs-list'> <List inlineLabels className='inputs-list'>
<ListItem link={'/edit-link-type/'} title={_t.textLinkType} after={textType} routeProps={{ <ListItem link={'/edit-link-type/'} title={_t.textLinkType} after={textType} routeProps={{
changeType, changeType,

78
apps/presentationeditor/mobile/src/view/edit/EditSlide.jsx
View file

@ -48,17 +48,16 @@ const PageTheme = props => {
const defaultThemes = arrayThemes[0]; const defaultThemes = arrayThemes[0];
const docThemes = arrayThemes[1]; const docThemes = arrayThemes[1];
console.log(arrayThemes);
// console.log(slideThemeIndex);
// console.log(arrayThemes);
return ( return (
<Page className="slide-theme"> <Page className="slide-theme">
<Navbar title={_t.textTheme} backLink={_t.textBack}> <Navbar title={_t.textTheme} backLink={_t.textBack}>
<NavRight> {Device.phone &&
<Link icon='icon-expand-down' sheetClose></Link> <NavRight>
</NavRight> <Link sheetClose='#edit-sheet'>
<Icon icon='icon-expand-down'/>
</Link>
</NavRight>
}
</Navbar> </Navbar>
{arrayThemes.length ? ( {arrayThemes.length ? (
<List className="slide-theme__list"> <List className="slide-theme__list">
@ -99,15 +98,16 @@ const PageLayout = props => {
const arrayLayouts = storeSlideSettings.arrayLayouts; const arrayLayouts = storeSlideSettings.arrayLayouts;
const slideLayoutIndex = storeSlideSettings.slideLayoutIndex; const slideLayoutIndex = storeSlideSettings.slideLayoutIndex;
// console.log(slideLayoutIndex);
// console.log(arrayLayouts);
return ( return (
<Page className="slide-layout"> <Page className="slide-layout">
<Navbar title={_t.textLayout} backLink={_t.textBack}> <Navbar title={_t.textLayout} backLink={_t.textBack}>
<NavRight> {Device.phone &&
<Link icon='icon-expand-down' sheetClose></Link> <NavRight>
</NavRight> <Link sheetClose='#edit-sheet'>
<Icon icon='icon-expand-down'/>
</Link>
</NavRight>
}
</Navbar> </Navbar>
{arrayLayouts.length ? ( {arrayLayouts.length ? (
<List className="slide-layout__list"> <List className="slide-layout__list">
@ -234,9 +234,13 @@ const PageTransition = props => {
return ( return (
<Page className="slide-transition"> <Page className="slide-transition">
<Navbar title={_t.textTransition} backLink={_t.textBack}> <Navbar title={_t.textTransition} backLink={_t.textBack}>
<NavRight> {Device.phone &&
<Link icon='icon-expand-down' sheetClose></Link> <NavRight>
</NavRight> <Link sheetClose='#edit-sheet'>
<Icon icon='icon-expand-down'/>
</Link>
</NavRight>
}
</Navbar> </Navbar>
<List> <List>
<ListItem link="/effect/" title={_t.textEffect} after={nameEffect} routeProps={{ <ListItem link="/effect/" title={_t.textEffect} after={nameEffect} routeProps={{
@ -322,7 +326,15 @@ const PageEffect = props => {
return ( return (
<Page className="style-effect"> <Page className="style-effect">
<Navbar title={_t.textEffect} backLink={_t.textBack} /> <Navbar title={_t.textEffect} backLink={_t.textBack}>
{Device.phone &&
<NavRight>
<Link sheetClose='#edit-sheet'>
<Icon icon='icon-expand-down'/>
</Link>
</NavRight>
}
</Navbar>
{_arrEffect.length ? ( {_arrEffect.length ? (
<List mediaList> <List mediaList>
{_arrEffect.map((elem, index) => { {_arrEffect.map((elem, index) => {
@ -354,9 +366,13 @@ const PageType= props => {
return ( return (
<Page className="style-type"> <Page className="style-type">
<Navbar title={_t.textType} backLink={_t.textBack}> <Navbar title={_t.textType} backLink={_t.textBack}>
<NavRight> {Device.phone &&
<Link icon='icon-expand-down' sheetClose></Link> <NavRight>
</NavRight> <Link sheetClose='#edit-sheet'>
<Icon icon='icon-expand-down'/>
</Link>
</NavRight>
}
</Navbar> </Navbar>
{_arrCurrentEffectTypes.length ? ( {_arrCurrentEffectTypes.length ? (
<List mediaList> <List mediaList>
@ -406,9 +422,13 @@ const PageFillColor = props => {
return ( return (
<Page> <Page>
<Navbar title={_t.textFill} backLink={_t.textBack}> <Navbar title={_t.textFill} backLink={_t.textBack}>
<NavRight> {Device.phone &&
<Link icon='icon-expand-down' sheetClose></Link> <NavRight>
</NavRight> <Link sheetClose='#edit-sheet'>
<Icon icon='icon-expand-down'/>
</Link>
</NavRight>
}
</Navbar> </Navbar>
<ThemeColorPalette changeColor={changeColor} curColor={fillColor} customColors={customColors} transparent={true} /> <ThemeColorPalette changeColor={changeColor} curColor={fillColor} customColors={customColors} transparent={true} />
<List> <List>
@ -439,7 +459,15 @@ 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 sheetClose='#edit-sheet'>
<Icon icon='icon-expand-down'/>
</Link>
</NavRight>
}
</Navbar>
<CustomColorPicker currentColor={fillColor} onAddNewColor={onAddNewColor} /> <CustomColorPicker currentColor={fillColor} onAddNewColor={onAddNewColor} />
</Page> </Page>
) )

69
apps/presentationeditor/mobile/src/view/edit/EditTable.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, ListButton, Row, BlockTitle, Range, Toggle, Icon, Link, Tabs, Tab} from 'framework7-react'; import {f7, Page, Navbar, List, ListItem, ListButton, Row, BlockTitle, Range, Toggle, Icon, Link, Tabs, Tab, NavRight} 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";
@ -68,7 +68,15 @@ const PageStyleOptions = props => {
return ( return (
<Page> <Page>
<Navbar title={_t.textOptions} backLink={_t.textBack}/> <Navbar title={_t.textOptions} backLink={_t.textBack}>
{Device.phone &&
<NavRight>
<Link sheetClose='#edit-sheet'>
<Icon icon='icon-expand-down'/>
</Link>
</NavRight>
}
</Navbar>
<List> <List>
<ListItem title={_t.textHeaderRow}> <ListItem title={_t.textHeaderRow}>
<Toggle checked={isFirstRow} onChange={() => {props.onCheckTemplateChange(tableLook, 0, !isFirstRow)}}/> <Toggle checked={isFirstRow} onChange={() => {props.onCheckTemplateChange(tableLook, 0, !isFirstRow)}}/>
@ -113,7 +121,15 @@ 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 sheetClose='#edit-sheet'>
<Icon icon='icon-expand-down'/>
</Link>
</NavRight>
}
</Navbar>
<CustomColorPicker currentColor={fillColor} onAddNewColor={onAddNewColor}/> <CustomColorPicker currentColor={fillColor} onAddNewColor={onAddNewColor}/>
</Page> </Page>
) )
@ -169,7 +185,15 @@ 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 sheetClose='#edit-sheet'>
<Icon icon='icon-expand-down'/>
</Link>
</NavRight>
}
</Navbar>
<CustomColorPicker currentColor={borderColor} onAddNewColor={onAddNewColor}/> <CustomColorPicker currentColor={borderColor} onAddNewColor={onAddNewColor}/>
</Page> </Page>
) )
@ -198,7 +222,15 @@ 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 sheetClose='#edit-sheet'>
<Icon icon='icon-expand-down'/>
</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-table-custom-border-color/'}></ListItem> <ListItem title={_t.textAddCustomColor} link={'/edit-table-custom-border-color/'}></ListItem>
@ -305,6 +337,13 @@ const PageStyle = props => {
<Link key={"pe-link-table-fill"} tabLink={"#edit-table-fill"}>{_t.textFill}</Link> <Link key={"pe-link-table-fill"} tabLink={"#edit-table-fill"}>{_t.textFill}</Link>
<Link key={"pe-link-table-border"} tabLink={"#edit-table-border"}>{_t.textBorder}</Link> <Link key={"pe-link-table-border"} tabLink={"#edit-table-border"}>{_t.textBorder}</Link>
</div> </div>
{Device.phone &&
<NavRight>
<Link sheetClose='#edit-sheet'>
<Icon icon='icon-expand-down'/>
</Link>
</NavRight>
}
</Navbar> </Navbar>
<Tabs animated> <Tabs animated>
<Tab key={"pe-tab-table-style"} id={"edit-table-style"} className="page-content no-padding-top" tabActive={true}> <Tab key={"pe-tab-table-style"} id={"edit-table-style"} className="page-content no-padding-top" tabActive={true}>
@ -342,7 +381,15 @@ 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 sheetClose='#edit-sheet'>
<Icon icon='icon-expand-down'/>
</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>
@ -373,7 +420,15 @@ const PageAlign = props => {
return ( return (
<Page> <Page>
<Navbar title={_t.textAlign} backLink={_t.textBack} /> <Navbar title={_t.textAlign} backLink={_t.textBack}>
{Device.phone &&
<NavRight>
<Link sheetClose='#edit-sheet'>
<Icon icon='icon-expand-down'/>
</Link>
</NavRight>
}
</Navbar>
<List> <List>
<ListItem title={_t.textAlignLeft} link='#' onClick={() => {props.onAlign('align-left')}} className='no-indicator'> <ListItem title={_t.textAlignLeft} link='#' onClick={() => {props.onAlign('align-left')}} className='no-indicator'>
<Icon slot="media" icon="icon-align-left"></Icon> <Icon slot="media" icon="icon-align-left"></Icon>

72
apps/presentationeditor/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, Segmented, BlockTitle, NavRight, 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';
@ -201,7 +201,15 @@ 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 sheetClose='#edit-sheet'>
<Icon icon='icon-expand-down'/>
</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>}
@ -267,7 +275,15 @@ const PageFontColor = props => {
return ( return (
<Page> <Page>
<Navbar title={_t.textFontColors} backLink={_t.textBack} /> <Navbar title={_t.textFontColors} backLink={_t.textBack}>
{Device.phone &&
<NavRight>
<Link sheetClose='#edit-sheet'>
<Icon icon='icon-expand-down'/>
</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={{
@ -297,7 +313,15 @@ 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 sheetClose='#edit-sheet'>
<Icon icon='icon-expand-down'/>
</Link>
</NavRight>
}
</Navbar>
<CustomColorPicker autoColor={autoColor} currentColor={textColor} onAddNewColor={onAddNewColor}/> <CustomColorPicker autoColor={autoColor} currentColor={textColor} onAddNewColor={onAddNewColor}/>
</Page> </Page>
) )
@ -334,7 +358,15 @@ const PageAdditionalFormatting = props => {
return ( return (
<Page> <Page>
<Navbar title={_t.textAdditional} backLink={_t.textBack} /> <Navbar title={_t.textAdditional} backLink={_t.textBack}>
{Device.phone &&
<NavRight>
<Link sheetClose='#edit-sheet'>
<Icon icon='icon-expand-down'/>
</Link>
</NavRight>
}
</Navbar>
<List> <List>
<ListItem title={_t.textStrikethrough} radio checked={isStrikeout} onClick={() => {props.onAdditionalStrikethrough('strikethrough', !isStrikeout)}}/> <ListItem title={_t.textStrikethrough} radio checked={isStrikeout} onClick={() => {props.onAdditionalStrikethrough('strikethrough', !isStrikeout)}}/>
<ListItem title={_t.textDoubleStrikethrough} radio checked={isDStrikeout} onClick={() => {props.onAdditionalStrikethrough('dbStrikethrough', !isDStrikeout)}}/> <ListItem title={_t.textDoubleStrikethrough} radio checked={isDStrikeout} onClick={() => {props.onAdditionalStrikethrough('dbStrikethrough', !isDStrikeout)}}/>
@ -391,7 +423,15 @@ const PageBullets = props => {
return ( return (
<Page className='bullets dataview'> <Page className='bullets dataview'>
<Navbar title={_t.textBullets} backLink={_t.textBack} /> <Navbar title={_t.textBullets} backLink={_t.textBack}>
{Device.phone &&
<NavRight>
<Link sheetClose='#edit-sheet'>
<Icon icon='icon-expand-down'/>
</Link>
</NavRight>
}
</Navbar>
{bulletArrays.map((bullets, index) => ( {bulletArrays.map((bullets, index) => (
<ul className="row" style={{listStyle: 'none'}} key={'bullets-' + index}> <ul className="row" style={{listStyle: 'none'}} key={'bullets-' + index}>
{bullets.map((bullet) => ( {bullets.map((bullet) => (
@ -439,7 +479,15 @@ const PageNumbers = props => {
return ( return (
<Page className='numbers dataview'> <Page className='numbers dataview'>
<Navbar title={_t.textNumbers} backLink={_t.textBack} /> <Navbar title={_t.textNumbers} backLink={_t.textBack}>
{Device.phone &&
<NavRight>
<Link sheetClose='#edit-sheet'>
<Icon icon='icon-expand-down'/>
</Link>
</NavRight>
}
</Navbar>
{numberArrays.map((numbers, index) => ( {numberArrays.map((numbers, index) => (
<ul className="row" style={{listStyle: 'none'}} key={'numbers-' + index}> <ul className="row" style={{listStyle: 'none'}} key={'numbers-' + index}>
{numbers.map((number) => ( {numbers.map((number) => (
@ -472,7 +520,15 @@ const PageLineSpacing = props => {
return ( return (
<Page> <Page>
<Navbar title={_t.textLineSpacing} backLink={_t.textBack} /> <Navbar title={_t.textLineSpacing} backLink={_t.textBack}>
{Device.phone &&
<NavRight>
<Link sheetClose='#edit-sheet'>
<Icon icon='icon-expand-down'/>
</Link>
</NavRight>
}
</Navbar>
<List> <List>
<ListItem radio checked={lineSpacing === 1.0} title={1.0} onClick={() => {props.onLineSpacing(1.0)}}></ListItem> <ListItem radio checked={lineSpacing === 1.0} title={1.0} onClick={() => {props.onLineSpacing(1.0)}}></ListItem>
<ListItem radio checked={lineSpacing === 1.15} title={1.15} onClick={() => {props.onLineSpacing(1.15)}}></ListItem> <ListItem radio checked={lineSpacing === 1.15} title={1.15} onClick={() => {props.onLineSpacing(1.15)}}></ListItem>