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

[DE mobile] Fix templates

Browse source
This commit is contained in:
JuliaSvinareva 2021-05-17 16:14:41 +03:00
parent e24fa28ff6
commit 383620fbc7
7 changed files with 342 additions and 43 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
apps/common/mobile/lib/view/collaboration/Comments.jsx
View file

@ -589,7 +589,15 @@ const ViewComments = ({storeComments, storeAppOptions, onCommentMenuClick, onRes
return ( return (
<Page> <Page>
<Navbar title={_t.textComments} backLink={_t.textBack}/> <Navbar title={_t.textComments} backLink={_t.textBack}>
{Device.phone &&
<NavRight>
<Link sheetClose=".coauth__sheet">
<Icon icon='icon-expand-down'/>
</Link>
</NavRight>
}
</Navbar>
{!sortComments ? {!sortComments ?
<div className='no-comments'>{_t.textNoComments}</div> : <div className='no-comments'>{_t.textNoComments}</div> :
<List className='comment-list'> <List className='comment-list'>

59
apps/documenteditor/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, NavRight, BlockTitle, Toggle, Range, Link, Tabs, Tab} from 'framework7-react';
import {f7} from 'framework7-react'; import {f7} 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';
@ -21,7 +21,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>
) )
@ -76,7 +84,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>
) )
@ -104,7 +120,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={{
@ -161,6 +185,13 @@ const PageStyle = props => {
<Link key={"de-link-chart-fill"} tabLink={"#edit-chart-fill"}>{_t.textFill}</Link> <Link key={"de-link-chart-fill"} tabLink={"#edit-chart-fill"}>{_t.textFill}</Link>
<Link key={"de-link-chart-border"} tabLink={"#edit-chart-border"}>{_t.textBorder}</Link> <Link key={"de-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={"de-tab-chart-type"} id={"edit-chart-type"} className="page-content no-padding-top dataview" tabActive={true}> <Tab key={"de-tab-chart-type"} id={"edit-chart-type"} className="page-content no-padding-top dataview" tabActive={true}>
@ -260,7 +291,15 @@ const PageWrap = props => {
} }
return ( return (
<Page> <Page>
<Navbar title={_t.textWrap} backLink={_t.textBack} /> <Navbar title={_t.textWrap} backLink={_t.textBack}>
{Device.phone &&
<NavRight>
<Link sheetClose='#edit-sheet'>
<Icon icon='icon-expand-down'/>
</Link>
</NavRight>
}
</Navbar>
<List> <List>
<ListItem title={_t.textInline} radio checked={wrapType === 'inline'} onClick={() => {props.onWrapType('inline')}}> <ListItem title={_t.textInline} radio checked={wrapType === 'inline'} onClick={() => {props.onWrapType('inline')}}>
{!isAndroid && <Icon slot="media" icon="icon-wrap-inline"></Icon>} {!isAndroid && <Icon slot="media" icon="icon-wrap-inline"></Icon>}
@ -355,7 +394,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>

42
apps/documenteditor/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 {List, ListItem, ListInput, ListButton, Icon, Row, Col, Button, Page, Navbar, Segmented, BlockTitle, Toggle, Range} from 'framework7-react'; import {List, ListItem, ListInput, ListButton, Icon, Row, Page, Navbar, NavRight, BlockTitle, Toggle, Range, Link} from 'framework7-react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import {f7} from 'framework7-react'; import {f7} from 'framework7-react';
import {Device} from '../../../../../common/mobile/utils/device'; import {Device} from '../../../../../common/mobile/utils/device';
@ -27,7 +27,15 @@ const PageWrap = props => {
} }
return ( return (
<Page> <Page>
<Navbar title={_t.textWrap} backLink={_t.textBack} /> <Navbar title={_t.textWrap} backLink={_t.textBack}>
{Device.phone &&
<NavRight>
<Link sheetClose='#edit-sheet'>
<Icon icon='icon-expand-down'/>
</Link>
</NavRight>
}
</Navbar>
<List> <List>
<ListItem title={_t.textInline} radio checked={wrapType === 'inline'} onClick={() => {props.onWrapType('inline')}}> <ListItem title={_t.textInline} radio checked={wrapType === 'inline'} onClick={() => {props.onWrapType('inline')}}>
{!isAndroid && <Icon slot="media" icon="icon-wrap-inline"></Icon>} {!isAndroid && <Icon slot="media" icon="icon-wrap-inline"></Icon>}
@ -129,7 +137,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
@ -157,7 +173,15 @@ const PageReplace = props => {
} }
return ( return (
<Page> <Page>
<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>
@ -182,7 +206,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>

32
apps/documenteditor/mobile/src/view/edit/EditParagraph.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, Button, Page, Navbar, Segmented, BlockTitle, Toggle} from 'framework7-react'; import {f7, List, ListItem, Icon, Button, Page, Navbar, NavRight, Segmented, BlockTitle, Toggle, 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';
@ -38,7 +38,15 @@ const PageAdvancedSettings = props => {
} }
return( return(
<Page> <Page>
<Navbar title={t('Edit.textAdvanced')} backLink={t('Edit.textBack')} /> <Navbar title={t('Edit.textAdvanced')} backLink={t('Edit.textBack')}>
{Device.phone &&
<NavRight>
<Link sheetClose='#edit-sheet'>
<Icon icon='icon-expand-down'/>
</Link>
</NavRight>
}
</Navbar>
<BlockTitle>{t('Edit.textDistanceFromText')}</BlockTitle> <BlockTitle>{t('Edit.textDistanceFromText')}</BlockTitle>
<List> <List>
<ListItem title={t('Edit.textBefore')}> <ListItem title={t('Edit.textBefore')}>
@ -122,7 +130,15 @@ const PageCustomBackColor = 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={backgroundColor} onAddNewColor={onAddNewColor}/> <CustomColorPicker currentColor={backgroundColor} onAddNewColor={onAddNewColor}/>
</Page> </Page>
) )
@ -150,7 +166,15 @@ const PageBackgroundColor = props => {
}; };
return( return(
<Page> <Page>
<Navbar title={_t.textBackground} backLink={_t.textBack} /> <Navbar title={_t.textBackground} backLink={_t.textBack}>
{Device.phone &&
<NavRight>
<Link sheetClose='#edit-sheet'>
<Icon icon='icon-expand-down'/>
</Link>
</NavRight>
}
</Navbar>
<ThemeColorPalette changeColor={changeColor} curColor={backgroundColor} customColors={customColors} transparent={true}/> <ThemeColorPalette changeColor={changeColor} curColor={backgroundColor} customColors={customColors} transparent={true}/>
<List> <List>
<ListItem title={_t.textAddCustomColor} link={'/edit-paragraph-custom-color/'} routeProps={{ <ListItem title={_t.textAddCustomColor} link={'/edit-paragraph-custom-color/'} routeProps={{

79
apps/documenteditor/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 {List, ListItem, Icon, Row, Page, Navbar, BlockTitle, Toggle, Range, ListButton, Link, Tabs, Tab} from 'framework7-react'; import {List, ListItem, Icon, Row, Page, Navbar, NavRight, BlockTitle, Toggle, Range, ListButton, Link, Tabs, Tab} from 'framework7-react';
import { f7 } from 'framework7-react'; import { f7 } 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';
@ -21,7 +21,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>
) )
@ -76,7 +84,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>
) )
@ -104,7 +120,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-shape-custom-border-color/'} routeProps={{ <ListItem title={_t.textAddCustomColor} link={'/edit-shape-custom-border-color/'} routeProps={{
@ -157,6 +181,13 @@ const PageStyle = props => {
<Link key={"de-link-shape-border"} tabLink={"#edit-shape-border"}>{_t.textBorder}</Link> <Link key={"de-link-shape-border"} tabLink={"#edit-shape-border"}>{_t.textBorder}</Link>
<Link key={"de-link-shape-effects"} tabLink={"#edit-shape-effects"}>{_t.textEffects}</Link> <Link key={"de-link-shape-effects"} tabLink={"#edit-shape-effects"}>{_t.textEffects}</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={"de-tab-shape-fill"} id={"edit-shape-fill"} className="page-content no-padding-top" tabActive={true}> <Tab key={"de-tab-shape-fill"} id={"edit-shape-fill"} className="page-content no-padding-top" tabActive={true}>
@ -237,7 +268,15 @@ 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 sheetClose='#edit-sheet'>
<Icon icon='icon-expand-down'/>
</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>
@ -286,7 +325,15 @@ const PageWrap = props => {
} }
return ( return (
<Page> <Page>
<Navbar title={_t.textWrap} backLink={_t.textBack} /> <Navbar title={_t.textWrap} backLink={_t.textBack}>
{Device.phone &&
<NavRight>
<Link sheetClose='#edit-sheet'>
<Icon icon='icon-expand-down'/>
</Link>
</NavRight>
}
</Navbar>
<List> <List>
<ListItem title={_t.textInline} radio checked={wrapType === 'inline'} onClick={() => {props.onWrapType('inline')}}> <ListItem title={_t.textInline} radio checked={wrapType === 'inline'} onClick={() => {props.onWrapType('inline')}}>
{!isAndroid && <Icon slot="media" icon="icon-wrap-inline"></Icon>} {!isAndroid && <Icon slot="media" icon="icon-wrap-inline"></Icon>}
@ -386,7 +433,15 @@ 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 sheetClose='#edit-sheet'>
<Icon icon='icon-expand-down'/>
</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}>
@ -418,7 +473,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>

69
apps/documenteditor/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 {Page, Navbar, List, ListItem, ListButton, Row, BlockTitle, Range, Toggle, Icon, Link, Tabs, Tab} from 'framework7-react'; import {Page, Navbar, NavRight, List, ListItem, ListButton, Row, BlockTitle, Range, Toggle, Icon, Link, Tabs, Tab} from 'framework7-react';
import { f7 } from 'framework7-react'; import { f7 } 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';
@ -29,7 +29,15 @@ const PageTableOptions = 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.textRepeatAsHeaderRow} className={isRepeat === null ? 'disabled' : ''}> <ListItem title={_t.textRepeatAsHeaderRow} className={isRepeat === null ? 'disabled' : ''}>
<Toggle checked={isRepeat} onChange={() => {props.onOptionRepeat(!isRepeat)}}/> <Toggle checked={isRepeat} onChange={() => {props.onOptionRepeat(!isRepeat)}}/>
@ -88,7 +96,15 @@ const PageWrap = props => {
return ( return (
<Page> <Page>
<Navbar title={_t.textWrap} backLink={_t.textBack} /> <Navbar title={_t.textWrap} backLink={_t.textBack}>
{Device.phone &&
<NavRight>
<Link sheetClose='#edit-sheet'>
<Icon icon='icon-expand-down'/>
</Link>
</NavRight>
}
</Navbar>
<List> <List>
<ListItem title={_t.textInline} radio checked={wrapType === 'inline'} onChange={() => {props.onWrapType(c_tableWrap.TABLE_WRAP_NONE)}}> <ListItem title={_t.textInline} radio checked={wrapType === 'inline'} onChange={() => {props.onWrapType(c_tableWrap.TABLE_WRAP_NONE)}}>
{!isAndroid && <Icon slot="media" icon="icon-wrap-table-inline"></Icon>} {!isAndroid && <Icon slot="media" icon="icon-wrap-table-inline"></Icon>}
@ -211,7 +227,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)}}/>
@ -256,7 +280,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>
) )
@ -307,7 +339,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>
) )
@ -334,7 +374,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>
@ -448,6 +496,13 @@ const PageStyle = props => {
<Link key={"de-link-table-fill"} tabLink={"#edit-table-fill"}>{_t.textFill}</Link> <Link key={"de-link-table-fill"} tabLink={"#edit-table-fill"}>{_t.textFill}</Link>
<Link key={"de-link-table-border"} tabLink={"#edit-table-border"}>{_t.textBorder}</Link> <Link key={"de-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={"de-tab-table-style"} id={"edit-table-style"} className="page-content no-padding-top" tabActive={true}> <Tab key={"de-tab-table-style"} id={"edit-table-style"} className="page-content no-padding-top" tabActive={true}>

94
apps/documenteditor/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';
@ -29,11 +29,17 @@ const PageFonts = props => {
}); });
}; };
console.log(curFontName);
return ( return (
<Page> <Page>
<Navbar title={t('Edit.textFonts')} backLink={t('Edit.textBack')} /> <Navbar title={t('Edit.textFonts')} backLink={t('Edit.textBack')}>
{Device.phone &&
<NavRight>
<Link sheetClose='#edit-sheet'>
<Icon icon='icon-expand-down'/>
</Link>
</NavRight>
}
</Navbar>
<List> <List>
<ListItem title={t('Edit.textSize')}> <ListItem title={t('Edit.textSize')}>
{!isAndroid && <div slot='after-start'>{displaySize}</div>} {!isAndroid && <div slot='after-start'>{displaySize}</div>}
@ -94,7 +100,15 @@ const PageAdditionalFormatting = props => {
} }
return( return(
<Page> <Page>
<Navbar title={t('Edit.textAdditional')} backLink={t('Edit.textBack')} /> <Navbar title={t('Edit.textAdditional')} backLink={t('Edit.textBack')}>
{Device.phone &&
<NavRight>
<Link sheetClose='#edit-sheet'>
<Icon icon='icon-expand-down'/>
</Link>
</NavRight>
}
</Navbar>
<List> <List>
<ListItem title={t('Edit.textStrikethrough')} radio checked={isStrikeout} onClick={() => {props.onAdditionalStrikethrough('strikeout', !isStrikeout)}}/> <ListItem title={t('Edit.textStrikethrough')} radio checked={isStrikeout} onClick={() => {props.onAdditionalStrikethrough('strikeout', !isStrikeout)}}/>
<ListItem title={t('Edit.textDoubleStrikethrough')} radio checked={isDStrikeout} onClick={() => {props.onAdditionalStrikethrough('dbStrikeout', !isDStrikeout)}}/> <ListItem title={t('Edit.textDoubleStrikethrough')} radio checked={isDStrikeout} onClick={() => {props.onAdditionalStrikethrough('dbStrikeout', !isDStrikeout)}}/>
@ -144,7 +158,15 @@ const PageBullets = props => {
return( return(
<Page className='bullets dataview'> <Page className='bullets dataview'>
<Navbar title={t('Edit.textBullets')} backLink={t('Edit.textBack')} /> <Navbar title={t('Edit.textBullets')} backLink={t('Edit.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) => (
@ -189,7 +211,15 @@ const PageNumbers = props => {
const typeNumbers = storeTextSettings.typeNumbers; const typeNumbers = storeTextSettings.typeNumbers;
return( return(
<Page className='numbers dataview'> <Page className='numbers dataview'>
<Navbar title={t('Edit.textNumbers')} backLink={t('Edit.textBack')} /> <Navbar title={t('Edit.textNumbers')} backLink={t('Edit.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) => (
@ -220,7 +250,15 @@ const PageLineSpacing = props => {
const lineSpacing = storeTextSettings.lineSpacing; const lineSpacing = storeTextSettings.lineSpacing;
return( return(
<Page> <Page>
<Navbar title={t('Edit.textLineSpacing')} backLink={t('Edit.textBack')} /> <Navbar title={t('Edit.textLineSpacing')} backLink={t('Edit.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>
@ -249,7 +287,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>
) )
@ -274,7 +320,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>
<List> <List>
<ListItem className={'item-color-auto' + (textColor === 'auto' ? ' active' : '')} title={_t.textAutomatic} onClick={() => { <ListItem className={'item-color-auto' + (textColor === 'auto' ? ' active' : '')} title={_t.textAutomatic} onClick={() => {
props.onTextColorAuto(); props.onTextColorAuto();
@ -308,7 +362,15 @@ const PageCustomBackColor = 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={backgroundColor} onAddNewColor={onAddNewColor}/> <CustomColorPicker currentColor={backgroundColor} onAddNewColor={onAddNewColor}/>
</Page> </Page>
) )
@ -333,7 +395,15 @@ const PageBackgroundColor = props => {
}; };
return( return(
<Page> <Page>
<Navbar title={_t.textHighlightColor} backLink={_t.textBack} /> <Navbar title={_t.textHighlightColor} backLink={_t.textBack}>
{Device.phone &&
<NavRight>
<Link sheetClose='#edit-sheet'>
<Icon icon='icon-expand-down'/>
</Link>
</NavRight>
}
</Navbar>
<ThemeColorPalette changeColor={changeColor} curColor={backgroundColor} customColors={customColors} transparent={true}/> <ThemeColorPalette changeColor={changeColor} curColor={backgroundColor} customColors={customColors} transparent={true}/>
<List> <List>
<ListItem title={_t.textAddCustomColor} link={'/edit-text-custom-back-color/'} routeProps={{ <ListItem title={_t.textAddCustomColor} link={'/edit-text-custom-back-color/'} routeProps={{