Merge pull request #908 from ONLYOFFICE/feature/pr1-last-develop-changes
Feature/pr1 last develop changes
This commit is contained in:
commit
e35bc37b0b
apps
common/mobile
lib
resources/less
documenteditor/mobile/src
controller
view
presentationeditor/mobile/src
controller
view
spreadsheeteditor/mobile
locale
src
controller/add
view
|
@ -558,10 +558,20 @@ class ViewCommentsController extends Component {
|
|||
break;
|
||||
}
|
||||
}
|
||||
|
||||
showComment (comment) {
|
||||
const api = Common.EditorApi.get();
|
||||
|
||||
api.asc_selectComment(comment.uid);
|
||||
api.asc_showComment(comment.uid, false);
|
||||
}
|
||||
|
||||
|
||||
render() {
|
||||
return(
|
||||
<Fragment>
|
||||
{this.props.allComments && <ViewComments onCommentMenuClick={this.onCommentMenuClick} onResolveComment={this.onResolveComment} />}
|
||||
{this.props.allComments && <ViewComments onCommentMenuClick={this.onCommentMenuClick} onResolveComment={this.onResolveComment}
|
||||
showComment={this.showComment} />}
|
||||
{this.state.isOpenViewCurComments && <ViewCurrentComments opened={this.state.isOpenViewCurComments}
|
||||
closeCurComments={this.closeViewCurComments}
|
||||
onCommentMenuClick={this.onCommentMenuClick}
|
||||
|
|
|
@ -626,7 +626,7 @@ const pickLink = (message) => {
|
|||
}
|
||||
|
||||
// View comments
|
||||
const ViewComments = ({storeComments, storeAppOptions, onCommentMenuClick, onResolveComment}) => {
|
||||
const ViewComments = ({storeComments, storeAppOptions, onCommentMenuClick, onResolveComment, showComment}) => {
|
||||
const { t } = useTranslation();
|
||||
const _t = t('Common.Collaboration', {returnObjects: true});
|
||||
const isAndroid = Device.android;
|
||||
|
@ -657,7 +657,8 @@ const ViewComments = ({storeComments, storeAppOptions, onCommentMenuClick, onRes
|
|||
<List className='comment-list'>
|
||||
{sortComments.map((comment, indexComment) => {
|
||||
return (
|
||||
<ListItem key={`comment-${indexComment}`}>
|
||||
<ListItem key={`comment-${indexComment}`} onClick={e => {
|
||||
!e.target.closest('.comment-menu') && !e.target.closest('.reply-menu') ? showComment(comment) : null}}>
|
||||
<div slot='header' className='comment-header'>
|
||||
<div className='left'>
|
||||
{isAndroid && <div className='initials' style={{backgroundColor: `${comment.userColor ? comment.userColor : '#cfcfcf'}`}}>{comment.userInitials}</div>}
|
||||
|
|
|
@ -355,6 +355,10 @@
|
|||
color: red;
|
||||
}
|
||||
|
||||
.list-button {
|
||||
position: initial;
|
||||
}
|
||||
|
||||
.block-title {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
|
|
@ -103,7 +103,8 @@
|
|||
|
||||
.button-fill {
|
||||
color: @white;
|
||||
background-color: @themeColor;
|
||||
// background-color: @themeColor;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.button-raised {
|
||||
|
@ -116,14 +117,19 @@
|
|||
}
|
||||
|
||||
.buttons-list {
|
||||
li {
|
||||
margin: 20px 16px;
|
||||
color: @white;
|
||||
border-radius: 2px;
|
||||
text-transform: uppercase;
|
||||
height: 36px;
|
||||
min-height: 36px;
|
||||
font-size: 14px;
|
||||
ul {
|
||||
&::before, &::after {
|
||||
display: none;
|
||||
}
|
||||
li {
|
||||
margin: 20px 16px;
|
||||
color: @white;
|
||||
border-radius: 2px;
|
||||
text-transform: uppercase;
|
||||
height: 36px;
|
||||
min-height: 36px;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -142,7 +148,8 @@
|
|||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
border-radius: 2px;
|
||||
margin: 20px 16px;
|
||||
// margin: 20px 16px;
|
||||
margin: 0;
|
||||
}
|
||||
.button-raised .list-button {
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.24);
|
||||
|
|
|
@ -339,9 +339,9 @@
|
|||
|
||||
.buttons-list {
|
||||
ul {
|
||||
&::before, &::after {
|
||||
display: none;
|
||||
}
|
||||
// &::before, &::after {
|
||||
// display: none;
|
||||
// }
|
||||
li {
|
||||
border: 0;
|
||||
font-weight: normal;
|
||||
|
@ -505,6 +505,12 @@
|
|||
}
|
||||
}
|
||||
|
||||
#edit-table-style {
|
||||
.list ul ul {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Cell styles
|
||||
|
||||
.cell-styles-list {
|
||||
|
|
|
@ -25,6 +25,7 @@ class ContextMenu extends ContextMenuController {
|
|||
this.onApiHideComment = this.onApiHideComment.bind(this);
|
||||
this.onApiShowChange = this.onApiShowChange.bind(this);
|
||||
this.getUserName = this.getUserName.bind(this);
|
||||
this.ShowModal = this.ShowModal.bind(this);
|
||||
}
|
||||
|
||||
static closeContextMenu() {
|
||||
|
@ -43,9 +44,13 @@ class ContextMenu extends ContextMenuController {
|
|||
api.asc_unregisterCallback('asc_onShowComment', this.onApiShowComment);
|
||||
api.asc_unregisterCallback('asc_onHideComment', this.onApiHideComment);
|
||||
api.asc_unregisterCallback('asc_onShowRevisionsChange', this.onApiShowChange);
|
||||
Common.Notifications.off('showSplitModal', this.ShowModal);
|
||||
}
|
||||
|
||||
|
||||
ShowModal() {
|
||||
this.showSplitModal()
|
||||
}
|
||||
|
||||
onApiShowComment(comments) {
|
||||
this.isComments = comments && comments.length > 0;
|
||||
}
|
||||
|
@ -199,6 +204,7 @@ class ContextMenu extends ContextMenuController {
|
|||
api.asc_registerCallback('asc_onShowComment', this.onApiShowComment);
|
||||
api.asc_registerCallback('asc_onHideComment', this.onApiHideComment);
|
||||
api.asc_registerCallback('asc_onShowRevisionsChange', this.onApiShowChange);
|
||||
Common.Notifications.on('showSplitModal', this.ShowModal);
|
||||
}
|
||||
|
||||
initMenuItems() {
|
||||
|
|
|
@ -199,14 +199,18 @@ const ErrorController = inject('storeAppOptions')(({storeAppOptions, LoadingDocu
|
|||
Common.Gateway.reportWarning(id, config.msg);
|
||||
|
||||
config.title = _t.notcriticalErrorTitle;
|
||||
|
||||
config.callback = (btn) => {
|
||||
if (id === Asc.c_oAscError.ID.Warning && btn === 'ok' && (storeAppOptions.canDownload || storeAppOptions.canDownloadOrigin)) {
|
||||
api.asc_DownloadOrigin();
|
||||
} else if(id === Asc.c_oAscError.ID.SplitCellMaxRows ||
|
||||
Asc.c_oAscError.ID.SplitCellMaxCols ||
|
||||
Asc.c_oAscError.ID.SplitCellRowsDivider && btn === 'ok' && (storeAppOptions.canDownload || storeAppOptions.canDownloadOrigin)) {
|
||||
Common.Notifications.trigger('showSplitModal',true);
|
||||
}
|
||||
storeAppOptions.changeEditingRights(false);
|
||||
};
|
||||
}
|
||||
|
||||
f7.dialog.create({
|
||||
cssClass: 'error-dialog',
|
||||
title : config.title,
|
||||
|
|
|
@ -20,7 +20,7 @@ const PageLinkSettings = props => {
|
|||
>
|
||||
</ListInput>
|
||||
</List>
|
||||
<List>
|
||||
<List className="buttons-list">
|
||||
<ListButton className={'button-fill button-raised' + (stateValue.length < 1 ? ' disabled' : '')}
|
||||
title={_t.textInsertImage}
|
||||
onClick={() => {props.onInsertByUrl(stateValue)}}></ListButton>
|
||||
|
|
|
@ -39,7 +39,7 @@ const PageLink = props => {
|
|||
onChange={(event) => {setTip(event.target.value)}}
|
||||
></ListInput>
|
||||
</List>
|
||||
<List>
|
||||
<List className="buttons-list">
|
||||
<ListButton className={'button-fill button-raised' + (stateLink.length < 1 ? ' disabled' : '')} title={_t.textInsert} onClick={() => {
|
||||
props.onInsertLink(stateLink, stateDisplay, stateTip)
|
||||
}}></ListButton>
|
||||
|
|
|
@ -141,7 +141,7 @@ const PageFootnote = props => {
|
|||
)
|
||||
})}
|
||||
</List>
|
||||
<List>
|
||||
<List className="buttons-list">
|
||||
<ListButton className={'button-fill button-raised'} title={_t.textInsertFootnote} onClick={() => {
|
||||
props.onInsertFootnote(stateFormat, stateStartAt, stateLocation);
|
||||
}}></ListButton>
|
||||
|
|
|
@ -446,7 +446,7 @@ const EditChart = props => {
|
|||
onReorder: props.onReorder
|
||||
}}></ListItem>
|
||||
</List>
|
||||
<List>
|
||||
<List className="buttons-list">
|
||||
<ListButton title={_t.textRemoveChart} onClick={() => {props.onRemoveChart()}} className='button-red button-fill button-raised'/>
|
||||
</List>
|
||||
</Fragment>
|
||||
|
|
|
@ -38,7 +38,7 @@ const EditHyperlink = props => {
|
|||
onChange={(event) => {setTip(event.target.value)}}
|
||||
></ListInput>
|
||||
</List>
|
||||
<List>
|
||||
<List className="buttons-list">
|
||||
<ListButton className={'button-fill button-raised' + (stateLink.length < 1 ? ' disabled' : '')} title={_t.textEditLink} onClick={() => {
|
||||
props.onEditLink(stateLink, stateDisplay, stateTip)
|
||||
}}></ListButton>
|
||||
|
|
|
@ -156,7 +156,7 @@ const PageLinkSettings = props => {
|
|||
>
|
||||
</ListInput>
|
||||
</List>
|
||||
<List>
|
||||
<List className="buttons-list">
|
||||
<ListButton className={'button-fill button-raised' + (stateValue.length < 1 ? ' disabled' : '')} title={_t.textReplaceImage} onClick={() => {onReplace()}}></ListButton>
|
||||
</List>
|
||||
</Page>
|
||||
|
@ -236,6 +236,10 @@ const PageReorder = props => {
|
|||
const EditImage = props => {
|
||||
const { t } = useTranslation();
|
||||
const _t = t('Edit', {returnObjects: true});
|
||||
const storeFocusObjects = props.storeFocusObjects;
|
||||
const imageObject = storeFocusObjects.imageObject;
|
||||
const pluginGuid = imageObject.asc_getPluginGuid();
|
||||
|
||||
return (
|
||||
<Fragment>
|
||||
<List>
|
||||
|
@ -246,7 +250,7 @@ const EditImage = props => {
|
|||
onOverlap: props.onOverlap,
|
||||
onWrapDistance: props.onWrapDistance
|
||||
}}></ListItem>
|
||||
<ListItem title={_t.textReplace} link='/edit-image-replace/' routeProps={{
|
||||
<ListItem title={_t.textReplace} link='/edit-image-replace/' className={pluginGuid ? 'disabled' : ''} routeProps={{
|
||||
onReplaceByFile: props.onReplaceByFile,
|
||||
onReplaceByUrl: props.onReplaceByUrl
|
||||
}}></ListItem>
|
||||
|
@ -254,7 +258,7 @@ const EditImage = props => {
|
|||
onReorder: props.onReorder
|
||||
}}></ListItem>
|
||||
</List>
|
||||
<List>
|
||||
<List className="buttons-list">
|
||||
<ListButton className='button-fill button-raised' title={_t.textActualSize} onClick={() => {props.onDefaulSize()}}/>
|
||||
<ListButton className='button-red button-fill button-raised' title={_t.textRemoveImage} onClick={() => {props.onRemoveImage()}}/>
|
||||
</List>
|
||||
|
|
|
@ -507,6 +507,9 @@ const EditShape = props => {
|
|||
const storeShapeSettings = props.storeShapeSettings;
|
||||
const shapeObject = props.storeFocusObjects.shapeObject;
|
||||
const wrapType = storeShapeSettings.getWrapType(shapeObject);
|
||||
|
||||
let disableRemove = !!props.storeFocusObjects.paragraphObject;
|
||||
|
||||
return (
|
||||
<Fragment>
|
||||
<List>
|
||||
|
@ -536,8 +539,8 @@ const EditShape = props => {
|
|||
onReorder: props.onReorder
|
||||
}}></ListItem>
|
||||
</List>
|
||||
<List>
|
||||
<ListButton title={_t.textRemoveShape} onClick={() => {props.onRemoveShape()}} className='button-red button-fill button-raised'/>
|
||||
<List className="buttons-list">
|
||||
<ListButton title={_t.textRemoveShape} onClick={() => {props.onRemoveShape()}} className={`button-red button-fill button-raised${disableRemove ? ' disabled' : ''}`} />
|
||||
</List>
|
||||
</Fragment>
|
||||
)
|
||||
|
|
|
@ -173,40 +173,25 @@ const PageWrap = props => {
|
|||
|
||||
// Style
|
||||
|
||||
const StyleTemplates = inject("storeFocusObjects")(observer(({templates, onStyleClick, storeFocusObjects}) => {
|
||||
const StyleTemplates = inject("storeFocusObjects","storeTableSettings")(observer(({onStyleClick,storeTableSettings,storeFocusObjects}) => {
|
||||
const tableObject = storeFocusObjects.tableObject;
|
||||
const styleId = tableObject && tableObject.get_TableStyle();
|
||||
const [stateId, setId] = useState(styleId);
|
||||
|
||||
const widthContainer = document.querySelector(".page-content").clientWidth;
|
||||
const columns = parseInt((widthContainer - 47) / 70); // magic
|
||||
const styles = [];
|
||||
let row = -1;
|
||||
templates.forEach((style, index) => {
|
||||
if (0 == index % columns) {
|
||||
styles.push([]);
|
||||
row++
|
||||
}
|
||||
styles[row].push(style);
|
||||
});
|
||||
const styles = storeTableSettings.styles;
|
||||
|
||||
return (
|
||||
<div className="dataview table-styles">
|
||||
{styles.map((row, rowIndex) => {
|
||||
return (
|
||||
<div className="row" key={`row-${rowIndex}`}>
|
||||
{row.map((style, index)=>{
|
||||
return(
|
||||
<div key={`${rowIndex}-${index}`}
|
||||
className={style.templateId === stateId ? 'active' : ''}
|
||||
onClick={() => {onStyleClick(style.templateId); setId(style.templateId)}}>
|
||||
<img src={style.imageUrl} />
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
<ul className="row">
|
||||
{styles.map((style, index) => {
|
||||
return (
|
||||
<li key={index}
|
||||
className={style.templateId === stateId ? 'active' : ''}
|
||||
onClick={() => {onStyleClick(style.templateId); setId(style.templateId)}}>
|
||||
<img src={style.imageUrl}/>
|
||||
</li>
|
||||
)
|
||||
})}
|
||||
</ul>
|
||||
</div>
|
||||
)
|
||||
}));
|
||||
|
@ -560,7 +545,9 @@ const EditTable = props => {
|
|||
</a>
|
||||
</Row>
|
||||
</ListItem>
|
||||
<ListButton title={_t.textRemoveTable} onClick={() => {props.onRemoveTable()}} className='button-red button-fill button-raised'></ListButton>
|
||||
<List className="buttons-list">
|
||||
<ListButton title={_t.textRemoveTable} onClick={() => {props.onRemoveTable()}} className='button-red button-fill button-raised'></ListButton>
|
||||
</List>
|
||||
</List>
|
||||
<List>
|
||||
<ListItem title={_t.textTableOptions} link='/edit-table-options/' routeProps={{
|
||||
|
|
|
@ -18,8 +18,6 @@ const ErrorController = inject('storeAppOptions')(({storeAppOptions, LoadingDocu
|
|||
});
|
||||
|
||||
const onError = (id, level, errData) => {
|
||||
if (id === -82) return; // format error
|
||||
|
||||
if (id === Asc.c_oAscError.ID.LoadingScriptError) {
|
||||
f7.notification.create({
|
||||
title: _t.criticalErrorTitle,
|
||||
|
|
|
@ -20,7 +20,7 @@ const PageLinkSettings = props => {
|
|||
>
|
||||
</ListInput>
|
||||
</List>
|
||||
<List>
|
||||
<List className="buttons-list">
|
||||
<ListButton className={'button-fill button-raised' + (stateValue.length < 1 ? ' disabled' : '')}
|
||||
title={_t.textInsertImage}
|
||||
onClick={() => {props.onInsertByUrl(stateValue)}}></ListButton>
|
||||
|
|
|
@ -143,7 +143,7 @@ const PageLink = props => {
|
|||
/>
|
||||
</List>
|
||||
<List className="buttons-list">
|
||||
<ListItem title={_t.textInsert} href="#"
|
||||
<ListButton title={_t.textInsert}
|
||||
className={`button-fill button-raised${typeLink === 1 && link.length < 1 && ' disabled'}`}
|
||||
onClick={() => {
|
||||
props.onInsertLink(typeLink, (typeLink === 1 ?
|
||||
|
|
|
@ -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>
|
||||
|
@ -346,7 +392,7 @@ const EditChart = props => {
|
|||
onAlign: props.onAlign
|
||||
}}></ListItem>
|
||||
</List>
|
||||
<List>
|
||||
<List className="buttons-list">
|
||||
<ListButton title={_t.textRemoveChart} onClick={() => {props.onRemoveChart()}} className='button-red button-fill button-raised'/>
|
||||
</List>
|
||||
</Fragment>
|
||||
|
|
|
@ -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';
|
||||
|
@ -8,11 +8,14 @@ import {Device} from '../../../../../common/mobile/utils/device';
|
|||
const EditImage = props => {
|
||||
const { t } = useTranslation();
|
||||
const _t = t('View.Edit', {returnObjects: true});
|
||||
const storeFocusObjects = props.storeFocusObjects;
|
||||
const imageObject = storeFocusObjects.imageObject;
|
||||
const pluginGuid = imageObject.asc_getPluginGuid();
|
||||
|
||||
return (
|
||||
<Fragment>
|
||||
<List>
|
||||
<ListItem title={_t.textReplace} link="/edit-replace-image/" routeProps={{
|
||||
<ListItem title={_t.textReplace} link="/edit-replace-image/" className={pluginGuid ? 'disabled' : ''} routeProps={{
|
||||
onReplaceByFile: props.onReplaceByFile,
|
||||
onReplaceByUrl: props.onReplaceByUrl
|
||||
}}></ListItem>
|
||||
|
@ -24,8 +27,8 @@ const EditImage = props => {
|
|||
}}></ListItem>
|
||||
</List>
|
||||
<List className="buttons-list">
|
||||
<ListItem href="#" className="button button-raised button-fill" onClick={props.onDefaultSize}>{_t.textActualSize}</ListItem>
|
||||
<ListItem href="#" className="button button-raised button-red" onClick={props.onRemoveImage}>{_t.textRemoveImage}</ListItem>
|
||||
<ListButton className="button-fill button-raised" onClick={props.onDefaultSize}>{_t.textActualSize}</ListButton>
|
||||
<ListButton className="button-red button-fill button-raised" onClick={props.onRemoveImage}>{_t.textRemoveImage}</ListButton>
|
||||
</List>
|
||||
</Fragment>
|
||||
)
|
||||
|
@ -43,7 +46,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 +85,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 +138,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 +179,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,
|
||||
|
@ -171,7 +195,7 @@ const PageLink = props => {
|
|||
/>
|
||||
</List>
|
||||
<List className="buttons-list">
|
||||
<ListItem title={_t.textEditLink} href="#"
|
||||
<ListButton title={_t.textEditLink}
|
||||
className={`button-fill button-raised${typeLink === 1 && link.length < 1 && ' disabled'}`}
|
||||
onClick={() => {
|
||||
props.onEditLink(typeLink, (typeLink === 1 ?
|
||||
|
@ -179,8 +203,8 @@ const PageLink = props => {
|
|||
{linkTo: linkTo, numberTo: numberTo, display: stateDisplay, tip: screenTip, displayDisabled: displayDisabled}));
|
||||
}}
|
||||
/>
|
||||
<ListItem title={_t.textRemoveLink} href="#"
|
||||
className={`button-fill button-red`}
|
||||
<ListButton title={_t.textRemoveLink}
|
||||
className={`button-red button-fill button-raised`}
|
||||
onClick={() => {
|
||||
props.onRemoveLink()
|
||||
}}
|
||||
|
|
|
@ -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} from 'framework7-react';
|
||||
import {f7, Page, Navbar, List, ListItem, Row, BlockTitle, Link, Toggle, Icon, View, NavRight, ListItemCell, Range, Button, Segmented, Tab, Tabs, ListButton} 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';
|
||||
|
@ -12,6 +12,8 @@ const EditShape = props => {
|
|||
const shapeObject = storeFocusObjects.shapeObject;
|
||||
const canFill = shapeObject && shapeObject.get_CanFill();
|
||||
|
||||
let disableRemove = !!props.storeFocusObjects.paragraphObject;
|
||||
|
||||
return (
|
||||
<Fragment>
|
||||
<List>
|
||||
|
@ -39,7 +41,7 @@ const EditShape = props => {
|
|||
}}></ListItem>
|
||||
</List>
|
||||
<List className="buttons-list">
|
||||
<ListItem href="#" className="button button-raised button-red" onClick={props.onRemoveShape}>{_t.textRemoveShape}</ListItem>
|
||||
<ListButton className={`button-red button-fill button-raised${disableRemove ? ' disabled' : ''}`} onClick={props.onRemoveShape}>{_t.textRemoveShape}</ListButton>
|
||||
</List>
|
||||
</Fragment>
|
||||
)
|
||||
|
|
|
@ -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} from 'framework7-react';
|
||||
import {f7, Page, Navbar, List, ListItem, Row, BlockTitle, Link, Toggle, Icon, View, NavRight, ListItemCell, Range, Button, Segmented, ListButton} 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';
|
||||
|
@ -32,8 +32,8 @@ const EditSlide = props => {
|
|||
}}></ListItem>
|
||||
</List>
|
||||
<List className="buttons-list">
|
||||
<ListItem href="#" className="button button-raised button-fill" onClick={props.onDuplicateSlide}>{_t.textDuplicateSlide}</ListItem>
|
||||
<ListItem href="#" className="button button-raised button-red" onClick={props.onRemoveSlide}>{_t.textDeleteSlide}</ListItem>
|
||||
<ListButton className="button-fill button-raised" onClick={props.onDuplicateSlide}>{_t.textDuplicateSlide}</ListButton>
|
||||
<ListButton className="button-red button-fill button-raised" onClick={props.onRemoveSlide}>{_t.textDeleteSlide}</ListButton>
|
||||
</List>
|
||||
</Fragment>
|
||||
)
|
||||
|
@ -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,51 +1,36 @@
|
|||
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";
|
||||
|
||||
// Style
|
||||
|
||||
const StyleTemplates = inject("storeFocusObjects")(observer(({templates, onStyleClick, storeFocusObjects}) => {
|
||||
const StyleTemplates = inject("storeFocusObjects","storeTableSettings")(observer(({onStyleClick,storeTableSettings,storeFocusObjects}) => {
|
||||
const tableObject = storeFocusObjects.tableObject;
|
||||
const styleId = tableObject ? tableObject.get_TableStyle() : null;
|
||||
const [stateId, setId] = useState(styleId);
|
||||
|
||||
const widthContainer = document.querySelector(".page-content").clientWidth;
|
||||
const columns = parseInt((widthContainer - 47) / 70); // magic
|
||||
const styles = [];
|
||||
let row = -1;
|
||||
templates.forEach((style, index) => {
|
||||
if (0 == index % columns) {
|
||||
styles.push([]);
|
||||
row++
|
||||
}
|
||||
styles[row].push(style);
|
||||
});
|
||||
const styles = storeTableSettings.styles;
|
||||
|
||||
if (!tableObject && Device.phone) {
|
||||
$$('.sheet-modal.modal-in').length > 0 && f7.sheet.close();
|
||||
return null;
|
||||
}
|
||||
|
||||
|
||||
return (
|
||||
<div className="dataview table-styles">
|
||||
{styles.map((row, rowIndex) => {
|
||||
return (
|
||||
<div className="row" key={`row-${rowIndex}`}>
|
||||
{row.map((style, index)=>{
|
||||
return(
|
||||
<div key={`${rowIndex}-${index}`}
|
||||
className={style.templateId === stateId ? 'active' : ''}
|
||||
onClick={() => {onStyleClick(style.templateId); setId(style.templateId)}}>
|
||||
<img src={style.imageUrl} />
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
<ul className="row">
|
||||
{styles.map((style, index) => {
|
||||
return (
|
||||
<li key={index}
|
||||
className={style.templateId === stateId ? 'active' : ''}
|
||||
onClick={() => {onStyleClick(style.templateId); setId(style.templateId)}}>
|
||||
<img src={style.imageUrl}/>
|
||||
</li>
|
||||
)
|
||||
})}
|
||||
</ul>
|
||||
</div>
|
||||
)
|
||||
}));
|
||||
|
@ -68,7 +53,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 +106,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 +170,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 +207,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 +322,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 +366,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 +405,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>
|
||||
|
@ -446,7 +486,7 @@ const EditTable = props => {
|
|||
</Row>
|
||||
</ListItem>
|
||||
<List className="buttons-list">
|
||||
<ListItem href="#" title={_t.textRemoveTable} onClick={() => {props.onRemoveTable()}} className='button button-raised button-red'></ListItem>
|
||||
<ListButton title={_t.textRemoveTable} onClick={() => {props.onRemoveTable()}} className='button-red button-fill button-raised'></ListButton>
|
||||
</List>
|
||||
</List>
|
||||
<List>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -223,6 +223,8 @@
|
|||
"txtNotUrl": "This field should be a URL in the format \"http://www.example.com\"",
|
||||
"textEmptyImgUrl": "You need to specify image URL.",
|
||||
"notcriticalErrorTitle": "Warning",
|
||||
"errorStockChart": "Incorrect row order. To build a stock chart place the data on the sheet in the following order:<br> opening price, max price, min price, closing price.",
|
||||
"errorMaxRows": "ERROR! The maximum number of data series per chart is 255.",
|
||||
"textLink": "Link",
|
||||
"textAddLink": "Add Link",
|
||||
"textLinkType": "Link Type",
|
||||
|
|
|
@ -1,6 +1,7 @@
|
|||
import React, {Component} from 'react';
|
||||
import { f7 } from 'framework7-react';
|
||||
import {Device} from '../../../../../common/mobile/utils/device';
|
||||
import { withTranslation } from 'react-i18next';
|
||||
|
||||
import AddChart from '../../view/add/AddChart';
|
||||
|
||||
|
@ -20,10 +21,24 @@ class AddChartController extends Component {
|
|||
|
||||
onInsertChart (type) {
|
||||
const api = Common.EditorApi.get();
|
||||
const settings = api.asc_getChartObject();
|
||||
settings.changeType(type);
|
||||
api.asc_addChartDrawingObject(settings);
|
||||
this.closeModal();
|
||||
const { t } = this.props;
|
||||
const _t = t('View.Add', {returnObjects: true});
|
||||
const settings = api.asc_getChartObject(true);
|
||||
const info = api.asc_getCellInfo();
|
||||
const selType = info.asc_getSelectionType();
|
||||
const isChartEdit = (selType == Asc.c_oAscSelectionType.RangeChart || selType == Asc.c_oAscSelectionType.RangeChartText);
|
||||
|
||||
if (settings) {
|
||||
isChartEdit ? settings.changeType(type) : settings.putType(type);
|
||||
let range = settings.getRange(),
|
||||
isValid = !!range ? api.asc_checkDataRange(Asc.c_oAscSelectionDialogType.Chart, range, true, !settings.getInColumns(), settings.getType()) : Asc.c_oAscError.ID.No;
|
||||
if (isValid == Asc.c_oAscError.ID.No) {
|
||||
isChartEdit ? api.asc_editChartDrawingObject(settings) : api.asc_addChartDrawingObject(settings);
|
||||
this.closeModal();
|
||||
} else {
|
||||
f7.dialog.alert((isValid == Asc.c_oAscError.ID.StockChartError) ? _t.errorStockChart : ((isValid == Asc.c_oAscError.ID.MaxDataSeriesError) ? _t.errorMaxRows : _t.txtInvalidRange), _t.notcriticalErrorTitle);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
render () {
|
||||
|
@ -34,4 +49,6 @@ class AddChartController extends Component {
|
|||
}
|
||||
}
|
||||
|
||||
export default AddChartController;
|
||||
const AddChartControllerTranslated = withTranslation()(AddChartController);
|
||||
|
||||
export {AddChartControllerTranslated as AddChartController};
|
|
@ -5,7 +5,7 @@ import {f7} from 'framework7-react';
|
|||
import { observer, inject } from "mobx-react";
|
||||
import {Device} from '../../../../../common/mobile/utils/device';
|
||||
|
||||
import AddChartController from "../../controller/add/AddChart";
|
||||
import {AddChartController} from "../../controller/add/AddChart";
|
||||
import {AddFunctionController} from "../../controller/add/AddFunction";
|
||||
import {PageFunctionGroup, PageFunctionInfo} from "./AddFunction";
|
||||
import AddShapeController from "../../controller/add/AddShape";
|
||||
|
|
|
@ -36,7 +36,7 @@ const PageLinkSettings = props => {
|
|||
>
|
||||
</ListInput>
|
||||
</List>
|
||||
<List>
|
||||
<List className="buttons-list">
|
||||
<ListButton className={'button-fill button-raised' + (stateValue.length < 1 ? ' disabled' : '')}
|
||||
title={_t.textInsertImage}
|
||||
onClick={() => {props.onInsertByUrl(stateValue)}}></ListButton>
|
||||
|
|
|
@ -129,7 +129,7 @@ const AddLinkView = props => {
|
|||
className={isIos ? 'list-input-right' : ''}
|
||||
/>
|
||||
</List>
|
||||
<List>
|
||||
<List className="buttons-list">
|
||||
<ListButton title={_t.textInsert}
|
||||
className={`button-fill button-raised${(typeLink === 'ext' && link.length < 1 || typeLink === 'int' && range.length < 1) && ' disabled'}`}
|
||||
onClick={() => {props.onInsertLink(typeLink === 'ext' ?
|
||||
|
|
|
@ -1466,7 +1466,7 @@ const EditChart = props => {
|
|||
onReorder: props.onReorder
|
||||
}}></ListItem>
|
||||
</List>
|
||||
<List>
|
||||
<List className="buttons-list">
|
||||
<ListButton title={_t.textRemoveChart} onClick={() => {props.onRemoveChart()}} className='button-red button-fill button-raised'/>
|
||||
</List>
|
||||
</Fragment>
|
||||
|
|
|
@ -7,11 +7,14 @@ import {Device} from '../../../../../common/mobile/utils/device';
|
|||
const EditImage = props => {
|
||||
const { t } = useTranslation();
|
||||
const _t = t('View.Edit', {returnObjects: true});
|
||||
const storeFocusObjects = props.storeFocusObjects;
|
||||
const imageObject = storeFocusObjects.imageObject;
|
||||
const pluginGuid = imageObject.asc_getPluginGuid();
|
||||
|
||||
return (
|
||||
<Fragment>
|
||||
<List>
|
||||
<ListItem title={_t.textReplace} link="/edit-replace-image/" routeProps={{
|
||||
<ListItem title={_t.textReplace} link="/edit-replace-image/" className={pluginGuid ? 'disabled' : ''} routeProps={{
|
||||
onReplaceByFile: props.onReplaceByFile,
|
||||
onReplaceByUrl: props.onReplaceByUrl
|
||||
}}></ListItem>
|
||||
|
@ -20,8 +23,8 @@ const EditImage = props => {
|
|||
}}></ListItem>
|
||||
</List>
|
||||
<List className="buttons-list">
|
||||
<ListItem href="#" className="button button-raised button-fill" onClick={props.onDefaultSize}>{_t.textActualSize}</ListItem>
|
||||
<ListItem href="#" className="button button-raised button-red" onClick={props.onRemoveImage}>{_t.textRemoveImage}</ListItem>
|
||||
<ListButton className="button-fill button-raised" onClick={props.onDefaultSize}>{_t.textActualSize}</ListButton>
|
||||
<ListButton className="button-red button-fill button-raised" onClick={props.onRemoveImage}>{_t.textRemoveImage}</ListButton>
|
||||
</List>
|
||||
</Fragment>
|
||||
)
|
||||
|
|
|
@ -157,7 +157,7 @@ const EditLink = props => {
|
|||
className={isIos ? 'list-input-right' : ''}
|
||||
/>
|
||||
</List>
|
||||
<List>
|
||||
<List className="buttons-list">
|
||||
<ListButton title={_t.textEditLink}
|
||||
className={`button-fill button-raised${(typeLink === 'ext' && link.length < 1 || typeLink === 'int' || range.length < 1 || !curSheet.length) && ' disabled'}`}
|
||||
onClick={() => {props.onEditLink(typeLink === 1 ?
|
||||
|
@ -165,7 +165,7 @@ const EditLink = props => {
|
|||
{type: 2, url: range, sheet: curSheet, text: stateDisplayText, tooltip: screenTip})}}
|
||||
/>
|
||||
<ListButton title={_t.textRemoveLink}
|
||||
className={`button-fill button-red`}
|
||||
className={`button-red button-fill button-raised`}
|
||||
onClick={() => props.onRemoveLink()}
|
||||
/>
|
||||
</List>
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
import React, {Fragment, useState} from 'react';
|
||||
import {observer, inject} from "mobx-react";
|
||||
import {f7, Page, Navbar, NavRight, List, ListItem, Link, Icon, Range, Tab, Tabs} from 'framework7-react';
|
||||
import {f7, Page, Navbar, NavRight, List, ListItem, Link, Icon, Range, Tab, Tabs, ListButton} 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';
|
||||
|
@ -12,6 +12,8 @@ const EditShape = props => {
|
|||
const shapeObject = storeFocusObjects.shapeObject;
|
||||
const canFill = shapeObject && shapeObject.get_ShapeProperties().asc_getCanFill();
|
||||
|
||||
let disableRemove = storeFocusObjects.selections.indexOf('text') > -1;
|
||||
|
||||
return (
|
||||
<Fragment>
|
||||
<List>
|
||||
|
@ -36,7 +38,7 @@ const EditShape = props => {
|
|||
}}></ListItem>
|
||||
</List>
|
||||
<List className="buttons-list">
|
||||
<ListItem href="#" className="button button-raised button-red" onClick={props.onRemoveShape}>{_t.textRemoveShape}</ListItem>
|
||||
<ListButton className={`button-red button-fill button-raised${disableRemove ? ' disabled' : ''}`} onClick={props.onRemoveShape}>{_t.textRemoveShape}</ListButton>
|
||||
</List>
|
||||
</Fragment>
|
||||
)
|
||||
|
|
Loading…
Reference in a new issue