Merge branch 'feature/mobile-apps-on-reactjs-fixes' into develop

This commit is contained in:
JuliaSvinareva 2021-05-13 18:09:03 +03:00
commit 861c60caff
18 changed files with 311 additions and 88 deletions

View file

@ -11,7 +11,7 @@ const ThemeColors = ({ themeColors, onColorClick, curColor }) => {
{row.map((effect, index) => { {row.map((effect, index) => {
return( return(
<a key={`tc-${rowIndex}-${index}`} <a key={`tc-${rowIndex}-${index}`}
className={((curColor && curColor.color === effect.color && curColor.effectValue === effect.effectValue) || (curColor && curColor === effect.color)) ? 'active' : ''} className={(curColor && curColor.color === effect.color && curColor.effectValue === effect.effectValue) ? 'active' : ''}
style={{ background: `#${effect.color}`}} style={{ background: `#${effect.color}`}}
onClick={() => {onColorClick(effect.color, effect.effectId, effect.effectValue)}} onClick={() => {onColorClick(effect.color, effect.effectId, effect.effectValue)}}
></a> ></a>

View file

@ -273,7 +273,7 @@ class SearchView extends Component {
{isIos ? <div className="searchbar-bg"></div> : null} {isIos ? <div className="searchbar-bg"></div> : null}
<div className="searchbar-inner"> <div className="searchbar-inner">
<div className="buttons-row searchbar-inner__left"> <div className="buttons-row searchbar-inner__left">
<a id="idx-btn-search-settings" className="link icon-only" onClick={this.onSettingsClick}> <a id="idx-btn-search-settings" className="link icon-only no-fastclick" onClick={this.onSettingsClick}>
<i className="icon icon-settings" /> <i className="icon icon-settings" />
</a> </a>
</div> </div>
@ -305,10 +305,10 @@ class SearchView extends Component {
) : null} ) : null}
</div> </div>
<div className="buttons-row"> <div className="buttons-row">
<a className={"link icon-only prev " + (searchQuery.trim().length ? "" : "disabled")} onClick={() => this.onSearchClick(SEARCH_BACKWARD)}> <a className={"link icon-only prev no-fastclick " + (searchQuery.trim().length ? "" : "disabled")} onClick={() => this.onSearchClick(SEARCH_BACKWARD)}>
<i className="icon icon-prev" /> <i className="icon icon-prev" />
</a> </a>
<a className={"link icon-only next " + (searchQuery.trim().length ? "" : "disabled")} onClick={() => this.onSearchClick(SEARCH_FORWARD)}> <a className={"link icon-only next no-fastclick " + (searchQuery.trim().length ? "" : "disabled")} onClick={() => this.onSearchClick(SEARCH_FORWARD)}>
<i className="icon icon-next" /> <i className="icon icon-next" />
</a> </a>
</div> </div>

View file

@ -127,7 +127,7 @@ const AddCommentDialog = inject("storeComments")(observer(props => {
}).open(); }).open();
}); });
return ( return (
<div id='add-comment-dialog'></div> <div id='add-comment-dialog' className="add-comment-dialog"></div>
); );
})); }));
@ -303,7 +303,7 @@ const EditCommentDialog = inject("storeComments")(observer(({storeComments, comm
}).open(); }).open();
}); });
return ( return (
<div id='edit-comment-dialog'></div> <div id='edit-comment-dialog' className="edit-comment-dialog"></div>
); );
})); }));
@ -428,7 +428,7 @@ const AddReplyDialog = inject("storeComments")(observer(({storeComments, userInf
}).open(); }).open();
}); });
return ( return (
<div id='add-reply-dialog'></div> <div id='add-reply-dialog' className="add-reply-dialog"></div>
); );
})); }));
@ -559,7 +559,7 @@ const EditReplyDialog = inject("storeComments")(observer(({storeComments, commen
}).open(); }).open();
}); });
return ( return (
<div id='edit-reply-dialog'></div> <div id='edit-reply-dialog' className="edit-reply-dialog"></div>
); );
})); }));

View file

@ -12,10 +12,13 @@
} }
.wrap-textarea { .wrap-textarea {
margin-top: 6px; margin-top: 6px;
.input {
height: 100%;
}
textarea { textarea {
font-size: 14px; font-size: 14px;
margin-top: 0; margin-top: 0;
min-height: 100px; height: 100%;
padding: 5px 0; padding: 5px 0;
} }
} }

View file

@ -449,7 +449,8 @@
height: 72px; height: 72px;
border-radius: 100px; border-radius: 100px;
overflow: hidden; overflow: hidden;
border: 1px solid @gray; // border: 1px solid @gray;
border: 0;
.new-color-hsb-preview, .current-color-hsb-preview { .new-color-hsb-preview, .current-color-hsb-preview {
width: 100%; width: 100%;
height: 36px; height: 36px;
@ -465,7 +466,8 @@
border-radius: 100px; border-radius: 100px;
background-color: @white; background-color: @white;
box-shadow: 0 4px 4px rgba(0,0,0,.25); box-shadow: 0 4px 4px rgba(0,0,0,.25);
border-color: transparent; // border-color: transparent;
border: 0;
margin-top: 20px; margin-top: 20px;
} }
} }

View file

@ -1,4 +1,17 @@
.device-ios { .device-ios {
.wrap-comment {
height: calc(100% - 60px);
}
.add-comment-popup, .add-reply-popup, .add-comment-dialog, .add-reply-dialog {
.wrap-textarea {
height: calc(100% - 34px);
}
}
.edit-comment-popup, .edit-reply-popup, .edit-comment-dialog, .edit-reply-dialog {
.wrap-textarea {
height: calc(100% - 52px);
}
}
.comment-list { .comment-list {
.reply-item { .reply-item {
.item-inner:after { .item-inner:after {

View file

@ -1,4 +1,17 @@
.device-android { .device-android {
.wrap-comment {
height: calc(100% - 72px);
}
.add-comment-popup, .add-reply-popup, .add-comment-dialog, .add-reply-dialog {
.wrap-textarea {
height: calc(100% - 41px);
}
}
.edit-comment-popup, .edit-reply-popup, .edit-comment-dialog, .edit-reply-dialog {
.wrap-textarea {
height: calc(100% - 56px);
}
}
.wrap-comment, .comment-list, .reply-list { .wrap-comment, .comment-list, .reply-list {
.comment-header, .reply-header { .comment-header, .reply-header {
display: flex; display: flex;

View file

@ -168,14 +168,22 @@ export class storeTextSettings {
resetBackgroundColor (color) { resetBackgroundColor (color) {
let value; let value;
if (color.get_type() == Asc.c_oAscColor.COLOR_TYPE_SCHEME) {
value = { if(color) {
color: Common.Utils.ThemeColor.getHexColor(color.get_r(), color.get_g(), color.get_b()), if (color.get_auto()) {
effectValue: color.get_value() value = 'transparent'
} else {
if (color.get_type() == Asc.c_oAscColor.COLOR_TYPE_SCHEME) {
value = {
color: Common.Utils.ThemeColor.getHexColor(color.get_r(), color.get_g(), color.get_b()),
effectValue: color.get_value()
}
} else {
value = Common.Utils.ThemeColor.getHexColor(color.get_r(), color.get_g(), color.get_b());
}
} }
} else {
value = Common.Utils.ThemeColor.getHexColor(color.get_r(), color.get_g(), color.get_b());
} }
this.backgroundColor = value; this.backgroundColor = value;
} }
} }

View file

@ -122,6 +122,9 @@ const PageStyle = props => {
const chartProperties = props.storeFocusObjects.chartObject ? props.storeFocusObjects.chartObject.get_ChartProperties() : null; const chartProperties = props.storeFocusObjects.chartObject ? props.storeFocusObjects.chartObject.get_ChartProperties() : null;
const types = storeChartSettings.types; const types = storeChartSettings.types;
const curType = chartProperties ? chartProperties.getType() : null; const curType = chartProperties ? chartProperties.getType() : null;
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);
const styles = storeChartSettings.styles; const styles = storeChartSettings.styles;
@ -154,7 +157,7 @@ const PageStyle = props => {
<Navbar backLink={_t.textBack}> <Navbar backLink={_t.textBack}>
<div className="tab-buttons tabbar"> <div className="tab-buttons tabbar">
<Link key={"de-link-chart-type"} tabLink={"#edit-chart-type"} tabLinkActive={true}>{_t.textType}</Link> <Link key={"de-link-chart-type"} tabLink={"#edit-chart-type"} tabLinkActive={true}>{_t.textType}</Link>
<Link key={"de-link-chart-style"} tabLink={"#edit-chart-style"}>{_t.textStyle}</Link> {chartStyles ? <Link key={"de-link-chart-style"} tabLink={"#edit-chart-style"}>{_t.textStyle}</Link> : null}
<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>
@ -181,26 +184,28 @@ const PageStyle = props => {
})} })}
</div> </div>
</Tab> </Tab>
<Tab key={"de-tab-chart-style"} id={"edit-chart-style"} className="page-content no-padding-top dataview"> {chartStyles ?
<div className={'chart-styles'}> <Tab key={"de-tab-chart-style"} id={"edit-chart-style"} className="page-content no-padding-top dataview">
{styles ? styles.map((row, rowIndex) => { <div className={'chart-styles'}>
return ( {styles ? styles.map((row, rowIndex) => {
<ul className="row" key={`row-${rowIndex}`}> return (
{row.map((style, index)=>{ <ul className="row" key={`row-${rowIndex}`}>
return( {row.map((style, index)=>{
<li key={`${rowIndex}-${index}`} return(
onClick={()=>{props.onStyle(style.asc_getName())}}> <li key={`${rowIndex}-${index}`}
<img src={`${style.asc_getImage()}`}/> onClick={()=>{props.onStyle(style.asc_getName())}}>
</li> <img src={`${style.asc_getImage()}`}/>
) </li>
})} )
</ul> })}
) </ul>
}) : )
<div className={'text-content'}>{_t.textNoStyles}</div> }) :
} <div className={'text-content'}>{_t.textNoStyles}</div>
</div> }
</Tab> </div>
</Tab>
: null}
<Tab key={"de-tab-chart-fill"} id={"edit-chart-fill"} className="page-content no-padding-top"> <Tab key={"de-tab-chart-fill"} id={"edit-chart-fill"} className="page-content no-padding-top">
<PaletteFill onFillColor={props.onFillColor} f7router={props.f7router}/> <PaletteFill onFillColor={props.onFillColor} f7router={props.f7router}/>
</Tab> </Tab>
@ -372,6 +377,7 @@ const PageReorder = props => {
const EditChart = props => { const EditChart = props => {
const { t } = useTranslation(); const { t } = useTranslation();
const _t = t('Edit', {returnObjects: true}); const _t = t('Edit', {returnObjects: true});
return ( return (
<Fragment> <Fragment>
<List> <List>

View file

@ -170,7 +170,7 @@ const PageDocumentColorSchemes = props => {
{ {
allSchemes ? allSchemes.map((scheme, index) => { allSchemes ? allSchemes.map((scheme, index) => {
return ( return (
<ListItem radio={true} className="color-schemes-menu" key={index} title={scheme.get_name()} checked={stateScheme === index} <ListItem radio={true} className="color-schemes-menu no-fastclick" key={index} title={scheme.get_name()} checked={stateScheme === index}
onChange={() => { onChange={() => {
if(index !== curScheme) { if(index !== curScheme) {
setScheme(index); setScheme(index);

View file

@ -4,6 +4,7 @@ import {List, ListItem, ListButton, Icon, Row, Page, Navbar, BlockTitle, Toggle,
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import {Device} from '../../../../../common/mobile/utils/device'; import {Device} from '../../../../../common/mobile/utils/device';
import {CustomColorPicker, ThemeColorPalette} from "../../../../../common/mobile/lib/component/ThemeColorPalette.jsx"; import {CustomColorPicker, ThemeColorPalette} from "../../../../../common/mobile/lib/component/ThemeColorPalette.jsx";
import { f7 } from 'framework7-react';
const PageCustomFillColor = props => { const PageCustomFillColor = props => {
const { t } = useTranslation(); const { t } = useTranslation();
@ -133,6 +134,9 @@ const PageStyle = props => {
const curType = chartProperties ? chartProperties.getType() : null; const curType = chartProperties ? chartProperties.getType() : null;
const styles = storeChartSettings.styles; const styles = storeChartSettings.styles;
const shapeObject = props.storeFocusObjects.shapeObject; 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; let borderSize, borderType, borderColor;
@ -164,10 +168,10 @@ const PageStyle = props => {
<Page> <Page>
<Navbar backLink={_t.textBack}> <Navbar backLink={_t.textBack}>
<div className="tab-buttons tabbar"> <div className="tab-buttons tabbar">
<Link key={"pe-link-chart-type"} tabLink={"#edit-chart-type"} tabLinkActive={true}>{_t.textType}</Link> <Link key={"pe-link-chart-type"} tabLink={"#edit-chart-type"} tabLinkActive={true}>{_t.textType}</Link>
<Link key={"pe-link-chart-style"} tabLink={"#edit-chart-style"}>{_t.textStyle}</Link> {chartStyles ? <Link key={"pe-link-chart-style"} tabLink={"#edit-chart-style"}>{_t.textStyle}</Link> : null}
<Link key={"pe-link-chart-fill"} tabLink={"#edit-chart-fill"}>{_t.textFill}</Link> <Link key={"pe-link-chart-fill"} tabLink={"#edit-chart-fill"}>{_t.textFill}</Link>
<Link key={"pe-link-chart-border"} tabLink={"#edit-chart-border"}>{_t.textBorder}</Link> <Link key={"pe-link-chart-border"} tabLink={"#edit-chart-border"}>{_t.textBorder}</Link>
</div> </div>
</Navbar> </Navbar>
<Tabs animated> <Tabs animated>
@ -192,26 +196,28 @@ const PageStyle = props => {
})} })}
</div> </div>
</Tab> </Tab>
<Tab key={"pe-tab-chart-style"} id={"edit-chart-style"} className="page-content no-padding-top dataview"> {chartStyles ?
<div className={'chart-styles'}> <Tab key={"pe-tab-chart-style"} id={"edit-chart-style"} className="page-content no-padding-top dataview">
{styles ? styles.map((row, rowIndex) => { <div className={'chart-styles'}>
return ( {styles ? styles.map((row, rowIndex) => {
<ul className="row" key={`row-${rowIndex}`}> return (
{row.map((style, index)=>{ <ul className="row" key={`row-${rowIndex}`}>
return( {row.map((style, index)=>{
<li key={`${rowIndex}-${index}`} return(
onClick={()=>{props.onStyle(style.asc_getName())}}> <li key={`${rowIndex}-${index}`}
<img src={`${style.asc_getImage()}`}/> onClick={()=>{props.onStyle(style.asc_getName())}}>
</li> <img src={`${style.asc_getImage()}`}/>
) </li>
})} )
</ul> })}
) </ul>
}) : )
<div className={'text-content'}>{_t.textNoStyles}</div> }) :
} <div className={'text-content'}>{_t.textNoStyles}</div>
</div> }
</Tab> </div>
</Tab>
: null}
<Tab key={"pe-tab-chart-fill"} id={"edit-chart-fill"} className="page-content no-padding-top"> <Tab key={"pe-tab-chart-fill"} id={"edit-chart-fill"} className="page-content no-padding-top">
<PaletteFill onFillColor={props.onFillColor} f7router={props.f7router}/> <PaletteFill onFillColor={props.onFillColor} f7router={props.f7router}/>
</Tab> </Tab>

View file

@ -46,7 +46,7 @@ const PagePresentationColorSchemes = props => {
{ {
allSchemes ? allSchemes.map((scheme, index) => { allSchemes ? allSchemes.map((scheme, index) => {
return ( return (
<ListItem radio={true} className="color-schemes-menu" key={index} title={scheme.get_name()} checked={stateScheme === index} <ListItem radio={true} className="color-schemes-menu no-fastclick" key={index} title={scheme.get_name()} checked={stateScheme === index}
onChange={() => { onChange={() => {
if(index !== curScheme) { if(index !== curScheme) {
setScheme(index); setScheme(index);

View file

@ -59,7 +59,26 @@
"errorProcessSaveResult": "Saving is failed.", "errorProcessSaveResult": "Saving is failed.",
"criticalErrorTitle": "Error", "criticalErrorTitle": "Error",
"warnProcessRightsChange": "You have been denied the right to edit the file.", "warnProcessRightsChange": "You have been denied the right to edit the file.",
"errorAccessDeny": "You are trying to perform an action you do not have rights for.<br>Please contact your Document Server administrator." "errorAccessDeny": "You are trying to perform an action you do not have rights for.<br>Please contact your Document Server administrator.",
"confirmMoveCellRange": "The destination cell`s range can contain data. Continue the operation?",
"textOk": "Ok",
"confirmPutMergeRange": "The source data contains merged cells.<br>They will be unmerged before they are pasted into the table.",
"openTitleText": "Opening Document",
"saveTitleText": "Saving Document",
"loadFontsTitleText": "Loading Data",
"loadImagesTitleText": "Loading Images",
"loadFontTitleText": "Loading Data",
"loadImageTitleText": "Loading Image",
"downloadTitleText": "Downloading Document",
"printTitleText": "Printing Document",
"uploadImageTitleText": "Uploading Image",
"titleRecalcFormulas": "Calculating formulas...",
"textPleaseWait": "It`s working hard. Please wait...",
"savePreparingText": "Preparing to save",
"waitText": "Please, wait...",
"txtEditingMode": "Set editing mode...",
"loadingDocumentTitleText": "Loading spreadsheet"
} }
}, },
"LongActions": { "LongActions": {
@ -294,6 +313,7 @@
"textRotateTextDown": "Rotate Text Down", "textRotateTextDown": "Rotate Text Down",
"textNoBorder": "No Border", "textNoBorder": "No Border",
"textAllBorders": "All Borders", "textAllBorders": "All Borders",
"textOutsideBorders": "Outside Borders",
"textBottomBorder": "Bottom Border", "textBottomBorder": "Bottom Border",
"textTopBorder": "Top Border", "textTopBorder": "Top Border",
"textLeftBorder": "Left Border", "textLeftBorder": "Left Border",

View file

@ -35,6 +35,9 @@ class MainController extends Component {
window.editorType = 'sse'; window.editorType = 'sse';
this.LoadingDocument = -256; this.LoadingDocument = -256;
this.ApplyEditRights = -255;
this.InitApplication = -254;
this.isShowOpenDialog = false;
this._state = { this._state = {
licenseType: false, licenseType: false,
@ -295,6 +298,8 @@ class MainController extends Component {
this.api.asc_registerCallback('asc_onPrint', this.onPrint.bind(this)); this.api.asc_registerCallback('asc_onPrint', this.onPrint.bind(this));
this.api.asc_registerCallback('asc_onDocumentName', this.onDocumentName.bind(this)); this.api.asc_registerCallback('asc_onDocumentName', this.onDocumentName.bind(this));
this.api.asc_registerCallback('asc_onEndAction', this._onLongActionEnd.bind(this)); this.api.asc_registerCallback('asc_onEndAction', this._onLongActionEnd.bind(this));
// this.api.asc_registerCallback('asc_onStartAction', this.onLongActionBegin.bind(this));
this.api.asc_registerCallback('asc_onConfirmAction', this.onConfirmAction.bind(this));
EditorUIController.initCellInfo && EditorUIController.initCellInfo(this.props); EditorUIController.initCellInfo && EditorUIController.initCellInfo(this.props);
@ -321,6 +326,131 @@ class MainController extends Component {
} }
// onLongActionBegin(type, id) {
// let action = {id: id, type: type};
// this.setLongActionView(action);
// }
// setLongActionView(action) {
// const _t = this._t;
// let title = '';
// switch (action.id) {
// case Asc.c_oAscAsyncAction.Open:
// title = _t.openTitleText;
// break;
// case Asc.c_oAscAsyncAction.Save:
// title = _t.saveTitleText;
// break;
// case Asc.c_oAscAsyncAction.ForceSaveTimeout:
// break;
// case Asc.c_oAscAsyncAction.ForceSaveButton:
// break;
// case Asc.c_oAscAsyncAction.LoadDocumentFonts:
// title = _t.loadFontsTitleText;
// break;
// case Asc.c_oAscAsyncAction.LoadDocumentImages:
// title = _t.loadImagesTitleText;
// break;
// case Asc.c_oAscAsyncAction.LoadFont:
// title = _t.loadFontTitleText;
// break;
// case Asc.c_oAscAsyncAction.LoadImage:
// title = _t.loadImageTitleText;
// break;
// case Asc.c_oAscAsyncAction.DownloadAs:
// title = _t.downloadTitleText;
// break;
// case Asc.c_oAscAsyncAction.Print:
// title = _t.printTitleText;
// break;
// case Asc.c_oAscAsyncAction.UploadImage:
// title = _t.uploadImageTitleText;
// break;
// case Asc.c_oAscAsyncAction.Recalc:
// title = _t.titleRecalcFormulas;
// break;
// case Asc.c_oAscAsyncAction.SlowOperation:
// title = _t.textPleaseWait;
// break;
// case Asc.c_oAscAsyncAction['PrepareToSave']:
// title = _t.savePreparingText;
// break;
// case Asc.c_oAscAsyncAction['Waiting']:
// title = _t.waitText;
// break;
// case this.ApplyEditRights:
// title = _t.txtEditingMode;
// break;
// case this.LoadingDocument:
// title = _t.loadingDocumentTitleText;
// break;
// default:
// if (typeof action.id == 'string'){
// title = action.id;
// }
// break;
// }
// if (action.type == Asc.c_oAscAsyncActionType.BlockInteraction) {
// // !this.loadMask && (this.loadMask = new Common.UI.LoadMask({owner: $$('#viewport')}));
// // this.loadMask.setTitle(title);
// if (!this.isShowOpenDialog) {
// this.api.asc_enableKeyEvents(false);
// // this.loadMask.show();
// }
// }
// }
onConfirmAction(id, apiCallback) {
const _t = this._t;
if (id == Asc.c_oAscConfirm.ConfirmReplaceRange) {
f7.dialog.create({
title: _t.notcriticalErrorTitle,
text: _t.confirmMoveCellRange,
buttons: [
{text: _t.textYes,
onClick: () => {
if (apiCallback) apiCallback(true);
}},
{text: _t.textNo,
onClick: () => {
if (apiCallback) apiCallback(false);
}}
],
}).open();
} else if (id == Asc.c_oAscConfirm.ConfirmPutMergeRange) {
f7.dialog.create({
title: _t.notcriticalErrorTitle,
text: _t.confirmPutMergeRange,
buttons: [
{text: _t.textOk,
onClick: () => {
if (apiCallback) apiCallback();
}},
],
}).open();
}
}
_onLongActionEnd(type, id) { _onLongActionEnd(type, id) {
if ( type === Asc.c_oAscAsyncActionType.BlockInteraction && id == Asc.c_oAscAsyncAction.Open ) { if ( type === Asc.c_oAscAsyncActionType.BlockInteraction && id == Asc.c_oAscAsyncAction.Open ) {
Common.Gateway.internalMessage('documentReady', {}); Common.Gateway.internalMessage('documentReady', {});

View file

@ -29,6 +29,17 @@ class EditChartController extends Component {
this.onHorAxisTickMajor = this.onHorAxisTickMajor.bind(this); this.onHorAxisTickMajor = this.onHorAxisTickMajor.bind(this);
this.onHorAxisTickMinor = this.onHorAxisTickMinor.bind(this); this.onHorAxisTickMinor = this.onHorAxisTickMinor.bind(this);
this.onHorAxisLabelPos = this.onHorAxisLabelPos.bind(this); this.onHorAxisLabelPos = this.onHorAxisLabelPos.bind(this);
const type = props.storeFocusObjects.chartObject.get_ChartProperties().getType();
if (type==Asc.c_oAscChartTypeSettings.comboBarLine ||
type==Asc.c_oAscChartTypeSettings.comboBarLineSecondary ||
type==Asc.c_oAscChartTypeSettings.comboAreaBar ||
type==Asc.c_oAscChartTypeSettings.comboCustom) {
props.storeChartSettings.clearChartStyles();
} else {
const api = Common.EditorApi.get();
props.storeChartSettings.updateChartStyles(api.asc_getChartPreviews(type));
}
} }
closeModal() { closeModal() {

View file

@ -513,6 +513,12 @@ const PageBorderStyleCell = props => {
}}> }}>
<Icon slot="media" icon="icon-table-borders-all"></Icon> <Icon slot="media" icon="icon-table-borders-all"></Icon>
</ListItem> </ListItem>
<ListItem title={_t.textOutsideBorders} onClick={() => {
storeCellSettings.changeBorderStyle('outer');
props.onBorderStyle('outer', borderInfo);
}}>
<Icon slot="media" icon="icon-table-borders-outer"></Icon>
</ListItem>
<ListItem title={_t.textBottomBorder} onClick={() => { <ListItem title={_t.textBottomBorder} onClick={() => {
storeCellSettings.changeBorderStyle('2'); storeCellSettings.changeBorderStyle('2');
props.onBorderStyle('2', borderInfo); props.onBorderStyle('2', borderInfo);

View file

@ -137,6 +137,9 @@ const PageStyle = props => {
const styles = storeChartSettings.styles; const styles = storeChartSettings.styles;
const types = storeChartSettings.types; const types = storeChartSettings.types;
const curType = chartProperties && chartProperties.getType(); const curType = chartProperties && chartProperties.getType();
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);
// Init border size // Init border size
@ -171,7 +174,7 @@ const PageStyle = props => {
<Navbar backLink={_t.textBack}> <Navbar backLink={_t.textBack}>
<div className="tab-buttons tabbar"> <div className="tab-buttons tabbar">
<Link key={"sse-link-chart-type"} tabLink={"#edit-chart-type"} tabLinkActive={true}>{_t.textType}</Link> <Link key={"sse-link-chart-type"} tabLink={"#edit-chart-type"} tabLinkActive={true}>{_t.textType}</Link>
<Link key={"sse-link-chart-style"} tabLink={"#edit-chart-style"}>{_t.textStyle}</Link> {chartStyles ? <Link key={"sse-link-chart-style"} tabLink={"#edit-chart-style"}>{_t.textStyle}</Link> : null}
<Link key={"sse-link-chart-fill"} tabLink={"#edit-chart-fill"}>{_t.textFill}</Link> <Link key={"sse-link-chart-fill"} tabLink={"#edit-chart-fill"}>{_t.textFill}</Link>
<Link key={"sse-link-chart-border"} tabLink={"#edit-chart-border"}>{_t.textBorder}</Link> <Link key={"sse-link-chart-border"} tabLink={"#edit-chart-border"}>{_t.textBorder}</Link>
</div> </div>
@ -196,26 +199,28 @@ const PageStyle = props => {
})} })}
</div> </div>
</Tab> </Tab>
<Tab key={"sse-tab-chart-style"} id={"edit-chart-style"} className="page-content no-padding-top dataview"> {chartStyles ?
<div className={'chart-styles'}> <Tab key={"sse-tab-chart-style"} id={"edit-chart-style"} className="page-content no-padding-top dataview">
{styles ? styles.map((row, rowIndex) => { <div className={'chart-styles'}>
return ( {styles ? styles.map((row, rowIndex) => {
<ul className="row" key={`row-${rowIndex}`}> return (
{row.map((style, index)=>{ <ul className="row" key={`row-${rowIndex}`}>
return( {row.map((style, index)=>{
<li key={`${rowIndex}-${index}`} return(
onClick={() => {props.onStyle(style.asc_getName())}}> <li key={`${rowIndex}-${index}`}
<img src={`${style.asc_getImage()}`}/> onClick={() => {props.onStyle(style.asc_getName())}}>
</li> <img src={`${style.asc_getImage()}`}/>
) </li>
})} )
</ul> })}
) </ul>
}) : )
<div className={'text-content'}>{_t.textNoStyles}</div> }) :
} <div className={'text-content'}>{_t.textNoStyles}</div>
</div> }
</Tab> </div>
</Tab>
: null}
<Tab key={"sse-tab-chart-fill"} id={"edit-chart-fill"} className="page-content no-padding-top"> <Tab key={"sse-tab-chart-fill"} id={"edit-chart-fill"} className="page-content no-padding-top">
<PaletteFill onFillColor={props.onFillColor} f7router={props.f7router}/> <PaletteFill onFillColor={props.onFillColor} f7router={props.f7router}/>
</Tab> </Tab>

View file

@ -19,7 +19,7 @@ const PageSpreadsheetColorSchemes = props => {
{ {
allSchemes ? allSchemes.map((scheme, index) => { allSchemes ? allSchemes.map((scheme, index) => {
return ( return (
<ListItem radio={true} className="color-schemes-menu" key={index} title={scheme.get_name()} checked={stateScheme === index} <ListItem radio={true} className="color-schemes-menu no-fastclick" key={index} title={scheme.get_name()} checked={stateScheme === index}
onChange={() => { onChange={() => {
if(index !== curScheme) { if(index !== curScheme) {
setScheme(index); setScheme(index);