[PE mobile] Correct navbars
This commit is contained in:
parent
8461050b39
commit
c43062883b
|
@ -1,6 +1,6 @@
|
|||
import React, {Fragment, useState} from '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 {Device} from '../../../../../common/mobile/utils/device';
|
||||
import {CustomColorPicker, ThemeColorPalette} from "../../../../../common/mobile/lib/component/ThemeColorPalette.jsx";
|
||||
|
@ -24,7 +24,15 @@ const PageCustomFillColor = props => {
|
|||
|
||||
return (
|
||||
<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}/>
|
||||
</Page>
|
||||
)
|
||||
|
@ -84,7 +92,15 @@ const PageCustomBorderColor = props => {
|
|||
|
||||
return (
|
||||
<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}/>
|
||||
</Page>
|
||||
)
|
||||
|
@ -114,7 +130,15 @@ const PageBorderColor = props => {
|
|||
|
||||
return (
|
||||
<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}/>
|
||||
<List>
|
||||
<ListItem title={_t.textAddCustomColor} link={'/edit-chart-custom-border-color/'} routeProps={{
|
||||
|
@ -135,8 +159,6 @@ const PageStyle = props => {
|
|||
const styles = storeChartSettings.styles;
|
||||
const shapeObject = props.storeFocusObjects.shapeObject;
|
||||
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;
|
||||
|
||||
|
@ -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-border"} tabLink={"#edit-chart-border"}>{_t.textBorder}</Link>
|
||||
</div>
|
||||
{Device.phone &&
|
||||
<NavRight>
|
||||
<Link sheetClose='#edit-sheet'>
|
||||
<Icon icon='icon-expand-down'/>
|
||||
</Link>
|
||||
</NavRight>
|
||||
}
|
||||
</Navbar>
|
||||
<Tabs animated>
|
||||
<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 (
|
||||
<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>
|
||||
<ListItem title={_t.textBringToForeground} onClick={() => {props.onReorder('all-up')}} link='#' className='no-indicator'>
|
||||
<Icon slot="media" icon="icon-move-foreground"></Icon>
|
||||
|
@ -293,7 +330,15 @@ const PageAlign = props => {
|
|||
|
||||
return (
|
||||
<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>
|
||||
<ListItem title={_t.textAlignLeft} link='#' onClick={() => {props.onAlign('align-left')}} className='no-indicator'>
|
||||
<Icon slot="media" icon="icon-align-left"></Icon>
|
||||
|
@ -329,6 +374,7 @@ const PageAlign = props => {
|
|||
const EditChart = props => {
|
||||
const { t } = useTranslation();
|
||||
const _t = t('View.Edit', {returnObjects: true});
|
||||
|
||||
return (
|
||||
<Fragment>
|
||||
<List>
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
import React, {Fragment, useState} from '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 { useTranslation } from 'react-i18next';
|
||||
import {Device} from '../../../../../common/mobile/utils/device';
|
||||
|
@ -43,7 +43,15 @@ const PageReorder = props => {
|
|||
|
||||
return (
|
||||
<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>
|
||||
<ListItem title={_t.textBringToForeground} link='#' onClick={() => {props.onReorder('all-up')}} className='no-indicator'>
|
||||
<Icon slot="media" icon="icon-move-foreground"></Icon>
|
||||
|
@ -74,7 +82,15 @@ const PageAlign = props => {
|
|||
|
||||
return (
|
||||
<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>
|
||||
<ListItem title={_t.textAlignLeft} link='#' onClick={() => {props.onAlign('align-left')}} className='no-indicator'>
|
||||
<Icon slot="media" icon="icon-align-left"></Icon>
|
||||
|
@ -119,7 +135,15 @@ const PageReplace = props => {
|
|||
|
||||
return (
|
||||
<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>
|
||||
<ListItem title={_t.textPictureFromLibrary} onClick={() => {props.onReplaceByFile()}}>
|
||||
<Icon slot="media" icon="icon-link"></Icon>
|
||||
|
@ -152,7 +176,15 @@ const PageLinkSettings = props => {
|
|||
};
|
||||
return (
|
||||
<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>
|
||||
<List>
|
||||
<ListInput
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
import React, {useState, useEffect} from '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 {Device} from "../../../../../common/mobile/utils/device";
|
||||
|
||||
|
@ -17,7 +17,15 @@ const PageTypeLink = props => {
|
|||
|
||||
return (
|
||||
<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>
|
||||
<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>
|
||||
|
@ -62,7 +70,15 @@ const PageLinkTo = props => {
|
|||
|
||||
return (
|
||||
<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>
|
||||
<ListItem title={_t.textNextSlide} radio checked={stateTypeTo === 0} onClick={() => {changeTypeTo(0)}}></ListItem>
|
||||
<ListItem title={_t.textPreviousSlide} radio checked={stateTypeTo === 1} onClick={() => {changeTypeTo(1)}}></ListItem>
|
||||
|
@ -134,7 +150,15 @@ const PageLink = props => {
|
|||
|
||||
return (
|
||||
<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'>
|
||||
<ListItem link={'/edit-link-type/'} title={_t.textLinkType} after={textType} routeProps={{
|
||||
changeType,
|
||||
|
|
|
@ -48,17 +48,16 @@ const PageTheme = props => {
|
|||
const defaultThemes = arrayThemes[0];
|
||||
const docThemes = arrayThemes[1];
|
||||
|
||||
console.log(arrayThemes);
|
||||
|
||||
// console.log(slideThemeIndex);
|
||||
// console.log(arrayThemes);
|
||||
|
||||
return (
|
||||
<Page className="slide-theme">
|
||||
<Navbar title={_t.textTheme} backLink={_t.textBack}>
|
||||
<NavRight>
|
||||
<Link icon='icon-expand-down' sheetClose></Link>
|
||||
</NavRight>
|
||||
{Device.phone &&
|
||||
<NavRight>
|
||||
<Link sheetClose='#edit-sheet'>
|
||||
<Icon icon='icon-expand-down'/>
|
||||
</Link>
|
||||
</NavRight>
|
||||
}
|
||||
</Navbar>
|
||||
{arrayThemes.length ? (
|
||||
<List className="slide-theme__list">
|
||||
|
@ -99,15 +98,16 @@ const PageLayout = props => {
|
|||
const arrayLayouts = storeSlideSettings.arrayLayouts;
|
||||
const slideLayoutIndex = storeSlideSettings.slideLayoutIndex;
|
||||
|
||||
// console.log(slideLayoutIndex);
|
||||
// console.log(arrayLayouts);
|
||||
|
||||
return (
|
||||
<Page className="slide-layout">
|
||||
<Navbar title={_t.textLayout} backLink={_t.textBack}>
|
||||
<NavRight>
|
||||
<Link icon='icon-expand-down' sheetClose></Link>
|
||||
</NavRight>
|
||||
{Device.phone &&
|
||||
<NavRight>
|
||||
<Link sheetClose='#edit-sheet'>
|
||||
<Icon icon='icon-expand-down'/>
|
||||
</Link>
|
||||
</NavRight>
|
||||
}
|
||||
</Navbar>
|
||||
{arrayLayouts.length ? (
|
||||
<List className="slide-layout__list">
|
||||
|
@ -234,9 +234,13 @@ const PageTransition = props => {
|
|||
return (
|
||||
<Page className="slide-transition">
|
||||
<Navbar title={_t.textTransition} backLink={_t.textBack}>
|
||||
<NavRight>
|
||||
<Link icon='icon-expand-down' sheetClose></Link>
|
||||
</NavRight>
|
||||
{Device.phone &&
|
||||
<NavRight>
|
||||
<Link sheetClose='#edit-sheet'>
|
||||
<Icon icon='icon-expand-down'/>
|
||||
</Link>
|
||||
</NavRight>
|
||||
}
|
||||
</Navbar>
|
||||
<List>
|
||||
<ListItem link="/effect/" title={_t.textEffect} after={nameEffect} routeProps={{
|
||||
|
@ -322,7 +326,15 @@ const PageEffect = props => {
|
|||
|
||||
return (
|
||||
<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 ? (
|
||||
<List mediaList>
|
||||
{_arrEffect.map((elem, index) => {
|
||||
|
@ -354,9 +366,13 @@ const PageType= props => {
|
|||
return (
|
||||
<Page className="style-type">
|
||||
<Navbar title={_t.textType} backLink={_t.textBack}>
|
||||
<NavRight>
|
||||
<Link icon='icon-expand-down' sheetClose></Link>
|
||||
</NavRight>
|
||||
{Device.phone &&
|
||||
<NavRight>
|
||||
<Link sheetClose='#edit-sheet'>
|
||||
<Icon icon='icon-expand-down'/>
|
||||
</Link>
|
||||
</NavRight>
|
||||
}
|
||||
</Navbar>
|
||||
{_arrCurrentEffectTypes.length ? (
|
||||
<List mediaList>
|
||||
|
@ -406,9 +422,13 @@ const PageFillColor = props => {
|
|||
return (
|
||||
<Page>
|
||||
<Navbar title={_t.textFill} backLink={_t.textBack}>
|
||||
<NavRight>
|
||||
<Link icon='icon-expand-down' sheetClose></Link>
|
||||
</NavRight>
|
||||
{Device.phone &&
|
||||
<NavRight>
|
||||
<Link sheetClose='#edit-sheet'>
|
||||
<Icon icon='icon-expand-down'/>
|
||||
</Link>
|
||||
</NavRight>
|
||||
}
|
||||
</Navbar>
|
||||
<ThemeColorPalette changeColor={changeColor} curColor={fillColor} customColors={customColors} transparent={true} />
|
||||
<List>
|
||||
|
@ -439,7 +459,15 @@ const PageCustomFillColor = props => {
|
|||
|
||||
return (
|
||||
<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} />
|
||||
</Page>
|
||||
)
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
import React, {Fragment, useState} from '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 {Device} from '../../../../../common/mobile/utils/device';
|
||||
import {CustomColorPicker, ThemeColorPalette} from "../../../../../common/mobile/lib/component/ThemeColorPalette.jsx";
|
||||
|
@ -68,7 +68,15 @@ const PageStyleOptions = props => {
|
|||
|
||||
return (
|
||||
<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>
|
||||
<ListItem title={_t.textHeaderRow}>
|
||||
<Toggle checked={isFirstRow} onChange={() => {props.onCheckTemplateChange(tableLook, 0, !isFirstRow)}}/>
|
||||
|
@ -113,7 +121,15 @@ const PageCustomFillColor = props => {
|
|||
|
||||
return(
|
||||
<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}/>
|
||||
</Page>
|
||||
)
|
||||
|
@ -169,7 +185,15 @@ const PageCustomBorderColor = props => {
|
|||
|
||||
return (
|
||||
<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}/>
|
||||
</Page>
|
||||
)
|
||||
|
@ -198,7 +222,15 @@ const PageBorderColor = props => {
|
|||
|
||||
return (
|
||||
<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}/>
|
||||
<List>
|
||||
<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-border"} tabLink={"#edit-table-border"}>{_t.textBorder}</Link>
|
||||
</div>
|
||||
{Device.phone &&
|
||||
<NavRight>
|
||||
<Link sheetClose='#edit-sheet'>
|
||||
<Icon icon='icon-expand-down'/>
|
||||
</Link>
|
||||
</NavRight>
|
||||
}
|
||||
</Navbar>
|
||||
<Tabs animated>
|
||||
<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 (
|
||||
<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>
|
||||
<ListItem title={_t.textBringToForeground} link='#' onClick={() => {props.onReorder('all-up')}} className='no-indicator'>
|
||||
<Icon slot="media" icon="icon-move-foreground"></Icon>
|
||||
|
@ -373,7 +420,15 @@ const PageAlign = props => {
|
|||
|
||||
return (
|
||||
<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>
|
||||
<ListItem title={_t.textAlignLeft} link='#' onClick={() => {props.onAlign('align-left')}} className='no-indicator'>
|
||||
<Icon slot="media" icon="icon-align-left"></Icon>
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
import React, {Fragment, useState} from '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 {Device} from '../../../../../common/mobile/utils/device';
|
||||
import { ThemeColorPalette, CustomColorPicker } from '../../../../../common/mobile/lib/component/ThemeColorPalette.jsx';
|
||||
|
@ -201,7 +201,15 @@ const PageFonts = props => {
|
|||
|
||||
return (
|
||||
<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>
|
||||
<ListItem title={_t.textSize}>
|
||||
{!isAndroid && <div slot='after-start'>{displaySize}</div>}
|
||||
|
@ -267,7 +275,15 @@ const PageFontColor = props => {
|
|||
|
||||
return (
|
||||
<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}/>
|
||||
<List>
|
||||
<ListItem title={_t.textAddCustomColor} link={'/edit-text-custom-font-color/'} routeProps={{
|
||||
|
@ -297,7 +313,15 @@ const PageCustomFontColor = props => {
|
|||
};
|
||||
return(
|
||||
<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}/>
|
||||
</Page>
|
||||
)
|
||||
|
@ -334,7 +358,15 @@ const PageAdditionalFormatting = props => {
|
|||
|
||||
return (
|
||||
<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>
|
||||
<ListItem title={_t.textStrikethrough} radio checked={isStrikeout} onClick={() => {props.onAdditionalStrikethrough('strikethrough', !isStrikeout)}}/>
|
||||
<ListItem title={_t.textDoubleStrikethrough} radio checked={isDStrikeout} onClick={() => {props.onAdditionalStrikethrough('dbStrikethrough', !isDStrikeout)}}/>
|
||||
|
@ -391,7 +423,15 @@ const PageBullets = props => {
|
|||
|
||||
return (
|
||||
<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) => (
|
||||
<ul className="row" style={{listStyle: 'none'}} key={'bullets-' + index}>
|
||||
{bullets.map((bullet) => (
|
||||
|
@ -439,7 +479,15 @@ const PageNumbers = props => {
|
|||
|
||||
return (
|
||||
<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) => (
|
||||
<ul className="row" style={{listStyle: 'none'}} key={'numbers-' + index}>
|
||||
{numbers.map((number) => (
|
||||
|
@ -472,7 +520,15 @@ const PageLineSpacing = props => {
|
|||
|
||||
return (
|
||||
<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>
|
||||
<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>
|
||||
|
|
Loading…
Reference in a new issue