[DE mobile] Added table style settings
This commit is contained in:
JuliaSvinareva
parent
35fcb8ea37
commit
a7b2440afa
|
|
@ -61,6 +61,11 @@
|
|||
-webkit-transform: translate3d(0,0,0);
|
||||
transform: translate3d(0,0,0);
|
||||
}
|
||||
.table-presets {
|
||||
.button {
|
||||
min-width: 0;
|
||||
}
|
||||
}
|
||||
.button-fill .list-button {
|
||||
background-color: @themeColor;
|
||||
color: @white;
|
||||
|
|
|
|||
|
|
@ -160,3 +160,26 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Table styles
|
||||
|
||||
.table-styles {
|
||||
width: 100%;
|
||||
.row {
|
||||
padding: 0;
|
||||
&, li {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
li,
|
||||
.row div {
|
||||
margin: 0;
|
||||
padding: 1px;
|
||||
|
||||
img {
|
||||
width: 70px;
|
||||
height: 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -181,7 +181,14 @@
|
|||
"textBorder": "Border",
|
||||
"textEffects": "Effects",
|
||||
"textColor": "Color",
|
||||
"textOpacity": "Opacity"
|
||||
"textOpacity": "Opacity",
|
||||
"textStyleOptions": "Style Options",
|
||||
"textHeaderRow": "Header Row",
|
||||
"textTotalRow": "Total Row",
|
||||
"textBandedRow": "Banded Row",
|
||||
"textFirstColumn": "First Column",
|
||||
"textLastColumn": "Last Column",
|
||||
"textBandedColumn": "Banded Column"
|
||||
},
|
||||
"Add": {
|
||||
"textTable": "Table",
|
||||
|
|
|
|||
|
|
@ -150,6 +150,64 @@ class EditTableController extends Component {
|
|||
api.tblApply(properties);
|
||||
}
|
||||
}
|
||||
onStyleClick (type) {
|
||||
const api = Common.EditorApi.get();
|
||||
const properties = new Asc.CTableProp();
|
||||
properties.put_TableStyle(type.toString());
|
||||
api.tblApply(properties);
|
||||
}
|
||||
|
||||
onCheckTemplateChange (tableLook, type, isChecked) {
|
||||
const api = Common.EditorApi.get();
|
||||
const properties = new Asc.CTableProp();
|
||||
switch (type) {
|
||||
case 0:
|
||||
tableLook.put_FirstRow(isChecked);
|
||||
break;
|
||||
case 1:
|
||||
tableLook.put_LastRow(isChecked);
|
||||
break;
|
||||
case 2:
|
||||
tableLook.put_BandHor(isChecked);
|
||||
break;
|
||||
case 3:
|
||||
tableLook.put_FirstCol(isChecked);
|
||||
break;
|
||||
case 4:
|
||||
tableLook.put_LastCol(isChecked);
|
||||
break;
|
||||
case 5:
|
||||
tableLook.put_BandVer(isChecked);
|
||||
break;
|
||||
}
|
||||
properties.put_TableLook(tableLook);
|
||||
api.tblApply(properties);
|
||||
}
|
||||
|
||||
onFillColor (color) {
|
||||
const api = Common.EditorApi.get();
|
||||
const properties = new Asc.CTableProp();
|
||||
const background = new Asc.CBackground();
|
||||
properties.put_CellsBackground(background);
|
||||
if ('transparent' == color) {
|
||||
background.put_Value(1);
|
||||
} else {
|
||||
background.put_Value(0);
|
||||
background.put_Color(Common.Utils.ThemeColor.getRgbColor(color));
|
||||
}
|
||||
properties.put_CellSelect(true);
|
||||
api.tblApply(properties);
|
||||
}
|
||||
|
||||
onBorderTypeClick (cellBorders) {
|
||||
const api = Common.EditorApi.get();
|
||||
const properties = new Asc.CTableProp();
|
||||
const _cellBorders = !cellBorders ? new Asc.CBorders() : cellBorders;
|
||||
properties.put_CellBorders(_cellBorders);
|
||||
properties.put_CellSelect(true);
|
||||
api.tblApply(properties);
|
||||
}
|
||||
|
||||
render () {
|
||||
return (
|
||||
<EditTable onRemoveTable={this.onRemoveTable}
|
||||
|
|
@ -166,6 +224,10 @@ class EditTableController extends Component {
|
|||
onWrapAlign={this.onWrapAlign}
|
||||
onWrapMoveText={this.onWrapMoveText}
|
||||
onWrapDistance={this.onWrapDistance}
|
||||
onStyleClick={this.onStyleClick}
|
||||
onCheckTemplateChange={this.onCheckTemplateChange}
|
||||
onFillColor={this.onFillColor}
|
||||
onBorderTypeClick={this.onBorderTypeClick}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -232,6 +232,57 @@
|
|||
height: 22px;
|
||||
.encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M21,19h-6h-1h-1.6c-0.9,1.8-2.7,3-4.9,3s-4-1.2-4.9-3H1H0v-1v-3v-1v-3v-1V7V6V3V2h7h1h6h1h6h1v1v3v1v3v1v3v1v3v1H21z M1,18h1.2C2.1,17.5,2,17,2,16.5c0-0.5,0.1-1,0.2-1.5H1V18z M7,3H1v3h6V3z M7,7H1v3h6V7z M7.5,12C5,12,3,14,3,16.5S5,21,7.5,21s4.5-2,4.5-4.5S10,12,7.5,12z M14,3H8v3h6V3z M14,7H8v3h6V7z M14,15h-1.2c0.1,0.5,0.2,1,0.2,1.5c0,0.5-0.1,1-0.2,1.5H14V15z M21,3h-6v3h6V3z M21,7h-6v3h6V7z M21,15h-6v3h6V15z M9.6,19.3l-2.1-2.1l-2.1,2.1l-0.7-0.7l2.1-2.1l-2.1-2.1l0.7-0.7l2.1,2.1l2.1-2.1l0.7,0.7l-2.1,2.1l2.1,2.1L9.6,19.3z"/></g></svg>');
|
||||
}
|
||||
// Presets of table borders
|
||||
&.icon-table-borders-all {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
.encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 28 28" fill="@{themeColor}"><g><path d="M26.9,0H0V27H27V0H26.9ZM13,26H1V14H13V26Zm0-13H1V1H13V13ZM26,26H14V14H26V26Zm0-13H14V1H26V13Z"/></g></svg>');
|
||||
}
|
||||
&.icon-table-borders-none {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
.encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 28 28" fill="@{themeColor}"><g><path opacity="0.3" d="M26.9,0H0V27H27V0H26.9ZM13,26H1V14H13V26Zm0-13H1V1H13V13ZM26,26H14V14H26V26Zm0-13H14V1H26V13Z"/></g></svg>');
|
||||
}
|
||||
&.icon-table-borders-inner {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
.encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 28 28" fill="@{themeColor}"><g><polygon points="26 13 14 13 14 1 13 1 13 13 1 13 1 14 13 14 13 26 14 26 14 14 26 14 26 13"/><path opacity="0.3" d="M27,0H0V27H27V0ZM1,26V1H26V26H1Z"/></g></svg>');
|
||||
}
|
||||
&.icon-table-borders-outer {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
.encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 28 28" fill="@{themeColor}"><g><path d="M27,0H0V27H27V0ZM1,26V1H26V26H1Z"/></g></svg>');
|
||||
}
|
||||
&.icon-table-borders-left {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
.encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 28 28" fill="@{themeColor}"><g><path opacity="0.3" d="M27,0H0V27H27V0ZM1,26V1H26V26H1Z"/><rect width="1" height="27"/></g></svg>');
|
||||
}
|
||||
&.icon-table-borders-center {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
.encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 28 28" fill="@{themeColor}"><g><path opacity="0.3" d="M27,0H0V27H27V0ZM1,26V1H26V26H1Z"/><rect x="13" width="1" height="27"/></g></svg>');
|
||||
}
|
||||
&.icon-table-borders-right {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
.encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 28 28" fill="@{themeColor}"><g><path opacity="0.3" d="M27,0H0V27H27V0ZM1,26V1H26V26H1Z"/><rect x="26" width="1" height="27"/></g></svg>');
|
||||
}
|
||||
&.icon-table-borders-top {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
.encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 28 28" fill="@{themeColor}"><g><path opacity="0.3" d="M27,0H0V27H27V0ZM1,26V1H26V26H1Z"/><rect width="27" height="1"/></g></svg>');
|
||||
}
|
||||
&.icon-table-borders-middle {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
.encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 28 28" fill="@{themeColor}"><g><path opacity="0.3" d="M27,0H0V27H27V0ZM1,26V1H26V26H1Z"/><rect y="13" width="27" height="1"/></g></svg>');
|
||||
}
|
||||
&.icon-table-borders-bottom {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
.encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 28 28" fill="@{themeColor}"><g><path opacity="0.3" d="M27,0H0V27H27V0ZM1,26V1H26V26H1Z"/><rect y="26" width="27" height="1"/></g></svg>');
|
||||
}
|
||||
// Reorder
|
||||
&.icon-move-backward {
|
||||
width: 28px;
|
||||
|
|
|
|||
|
|
@ -242,6 +242,57 @@
|
|||
height: 22px;
|
||||
.encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M21,19h-6h-1h-1.6c-0.9,1.8-2.7,3-4.9,3s-4-1.2-4.9-3H1H0v-1v-3v-1v-3v-1V7V6V3V2h7h1h6h1h6h1v1v3v1v3v1v3v1v3v1H21z M1,18h1.2C2.1,17.5,2,17,2,16.5c0-0.5,0.1-1,0.2-1.5H1V18z M7,3H1v3h6V3z M7,7H1v3h6V7z M7.5,12C5,12,3,14,3,16.5S5,21,7.5,21s4.5-2,4.5-4.5S10,12,7.5,12z M14,3H8v3h6V3z M14,7H8v3h6V7z M14,15h-1.2c0.1,0.5,0.2,1,0.2,1.5c0,0.5-0.1,1-0.2,1.5H14V15z M21,3h-6v3h6V3z M21,7h-6v3h6V7z M21,15h-6v3h6V15z M9.6,19.3l-2.1-2.1l-2.1,2.1l-0.7-0.7l2.1-2.1l-2.1-2.1l0.7-0.7l2.1,2.1l2.1-2.1l0.7,0.7l-2.1,2.1l2.1,2.1L9.6,19.3z"/></g></svg>');
|
||||
}
|
||||
// Presets of table borders
|
||||
&.icon-table-borders-all {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
.encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 28 28" fill="@{themeColor}"><g><path d="M26.9,0H0V27H27V0H26.9ZM13,26H1V14H13V26Zm0-13H1V1H13V13ZM26,26H14V14H26V26Zm0-13H14V1H26V13Z"/></g></svg>');
|
||||
}
|
||||
&.icon-table-borders-none {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
.encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 28 28" fill="@{themeColor}"><g><path opacity="0.3" d="M26.9,0H0V27H27V0H26.9ZM13,26H1V14H13V26Zm0-13H1V1H13V13ZM26,26H14V14H26V26Zm0-13H14V1H26V13Z"/></g></svg>');
|
||||
}
|
||||
&.icon-table-borders-inner {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
.encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 28 28" fill="@{themeColor}"><g><polygon points="26 13 14 13 14 1 13 1 13 13 1 13 1 14 13 14 13 26 14 26 14 14 26 14 26 13"/><path opacity="0.3" d="M27,0H0V27H27V0ZM1,26V1H26V26H1Z"/></g></svg>');
|
||||
}
|
||||
&.icon-table-borders-outer {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
.encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 28 28" fill="@{themeColor}"><g><path d="M27,0H0V27H27V0ZM1,26V1H26V26H1Z"/></g></svg>');
|
||||
}
|
||||
&.icon-table-borders-left {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
.encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 28 28" fill="@{themeColor}"><g><path opacity="0.3" d="M27,0H0V27H27V0ZM1,26V1H26V26H1Z"/><rect width="1" height="27"/></g></svg>');
|
||||
}
|
||||
&.icon-table-borders-center {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
.encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 28 28" fill="@{themeColor}"><g><path opacity="0.3" d="M27,0H0V27H27V0ZM1,26V1H26V26H1Z"/><rect x="13" width="1" height="27"/></g></svg>');
|
||||
}
|
||||
&.icon-table-borders-right {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
.encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 28 28" fill="@{themeColor}"><g><path opacity="0.3" d="M27,0H0V27H27V0ZM1,26V1H26V26H1Z"/><rect x="26" width="1" height="27"/></g></svg>');
|
||||
}
|
||||
&.icon-table-borders-top {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
.encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 28 28" fill="@{themeColor}"><g><path opacity="0.3" d="M27,0H0V27H27V0ZM1,26V1H26V26H1Z"/><rect width="27" height="1"/></g></svg>');
|
||||
}
|
||||
&.icon-table-borders-middle {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
.encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 28 28" fill="@{themeColor}"><g><path opacity="0.3" d="M27,0H0V27H27V0ZM1,26V1H26V26H1Z"/><rect y="13" width="27" height="1"/></g></svg>');
|
||||
}
|
||||
&.icon-table-borders-bottom {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
.encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 28 28" fill="@{themeColor}"><g><path opacity="0.3" d="M27,0H0V27H27V0ZM1,26V1H26V26H1Z"/><rect y="26" width="27" height="1"/></g></svg>');
|
||||
}
|
||||
// Reorder
|
||||
&.icon-move-backward {
|
||||
width: 28px;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
import {action, observable, computed} from 'mobx';
|
||||
import {f7} from 'framework7-react';
|
||||
|
||||
export class storeTableSettings {
|
||||
@observable _templates = [];
|
||||
|
|
@ -7,7 +8,7 @@ export class storeTableSettings {
|
|||
}
|
||||
@computed get styles () {
|
||||
let styles = [];
|
||||
for (let template of templates) {
|
||||
for (let template of this._templates) {
|
||||
styles.push({
|
||||
imageUrl : template.asc_getImage(),
|
||||
templateId : template.asc_getId()
|
||||
|
|
@ -43,4 +44,116 @@ export class storeTableSettings {
|
|||
getWrapDistance (tableObject) {
|
||||
return tableObject.get_TablePaddings().get_Top();
|
||||
}
|
||||
|
||||
// Fill color
|
||||
getFillColor (tableObject) {
|
||||
const background = tableObject.get_CellsBackground();
|
||||
let fillColor = 'transparent';
|
||||
if (background) {
|
||||
if (background.get_Value()==0) {
|
||||
const color = background.get_Color();
|
||||
if (color) {
|
||||
if (color.get_type() == Asc.c_oAscColor.COLOR_TYPE_SCHEME) {
|
||||
fillColor = {color: Common.Utils.ThemeColor.getHexColor(color.get_r(), color.get_g(), color.get_b()), effectValue: color.get_value()};
|
||||
} else {
|
||||
fillColor = Common.Utils.ThemeColor.getHexColor(color.get_r(), color.get_g(), color.get_b());
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
return fillColor;
|
||||
}
|
||||
|
||||
// Border style
|
||||
@observable cellBorders;
|
||||
@observable cellBorderWidth = 0.5;
|
||||
@observable cellBorderWidth = 0.5;
|
||||
@observable cellBorderColor = '000000';
|
||||
|
||||
borderSizeTransform () {
|
||||
const _sizes = [0, 0.5, 1, 1.5, 2.25, 3, 4.5, 6];
|
||||
|
||||
return {
|
||||
sizeByIndex: function (index) {
|
||||
if (index < 1) return _sizes[0];
|
||||
if (index > _sizes.length - 1) return _sizes[_sizes.length - 1];
|
||||
return _sizes[index];
|
||||
},
|
||||
|
||||
indexSizeByValue: function (value) {
|
||||
let index = 0;
|
||||
_sizes.forEach((size, idx) => {
|
||||
if (Math.abs(size - value) < 0.25) {
|
||||
index = idx;
|
||||
}
|
||||
});
|
||||
return index;
|
||||
},
|
||||
|
||||
sizeByValue: function (value) {
|
||||
return _sizes[this.indexSizeByValue(value)];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
updateCellBorderWidth (value) {
|
||||
this.cellBorderWidth = value;
|
||||
}
|
||||
|
||||
updateCellBorderColor (value) {
|
||||
this.cellBorderColor = value;
|
||||
}
|
||||
|
||||
updateBordersStyle (border) {
|
||||
this.cellBorders = new Asc.CBorders();
|
||||
const visible = (border != '');
|
||||
|
||||
if (border.indexOf('l') > -1 || !visible) {
|
||||
if (this.cellBorders.get_Left()===null || this.cellBorders.get_Left()===undefined)
|
||||
this.cellBorders.put_Left(new Asc.asc_CTextBorder());
|
||||
this.updateBorderStyle (this.cellBorders.get_Left(), visible);
|
||||
}
|
||||
if (border.indexOf('t') > -1 || !visible) {
|
||||
if (this.cellBorders.get_Top()===null || this.cellBorders.get_Top()===undefined)
|
||||
this.cellBorders.put_Top(new Asc.asc_CTextBorder());
|
||||
this.updateBorderStyle (this.cellBorders.get_Top(), visible);
|
||||
}
|
||||
if (border.indexOf('r') > -1 || !visible) {
|
||||
if (this.cellBorders.get_Right()===null || this.cellBorders.get_Right()===undefined)
|
||||
this.cellBorders.put_Right(new Asc.asc_CTextBorder());
|
||||
this.updateBorderStyle (this.cellBorders.get_Right(), visible);
|
||||
}
|
||||
if (border.indexOf('b') > -1 || !visible) {
|
||||
if (this.cellBorders.get_Bottom()===null || this.cellBorders.get_Bottom()===undefined)
|
||||
this.cellBorders.put_Bottom(new Asc.asc_CTextBorder());
|
||||
this.updateBorderStyle (this.cellBorders.get_Bottom(), visible);
|
||||
}
|
||||
if (border.indexOf('c') > -1 || !visible) {
|
||||
if (this.cellBorders.get_InsideV()===null || this.cellBorders.get_InsideV()===undefined)
|
||||
this.cellBorders.put_InsideV(new Asc.asc_CTextBorder());
|
||||
this.updateBorderStyle (this.cellBorders.get_InsideV(), visible);
|
||||
}
|
||||
if (border.indexOf('m') > -1 || !visible) {
|
||||
if (this.cellBorders.get_InsideH()===null || this.cellBorders.get_InsideH()===undefined)
|
||||
this.cellBorders.put_InsideH(new Asc.asc_CTextBorder());
|
||||
this.updateBorderStyle (this.cellBorders.get_InsideH(), visible);
|
||||
}
|
||||
}
|
||||
|
||||
updateBorderStyle (border, visible) {
|
||||
if (!border) {
|
||||
border = new Asc.asc_CTextBorder();
|
||||
}
|
||||
if (visible && this.cellBorderWidth > 0){
|
||||
const size = parseFloat(this.cellBorderWidth);
|
||||
border.put_Value(1);
|
||||
border.put_Size(size * 25.4 / 72.0);
|
||||
const color = Common.Utils.ThemeColor.getRgbColor(this.cellBorderColor);
|
||||
border.put_Color(color);
|
||||
}
|
||||
else {
|
||||
border.put_Value(0);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -18,7 +18,7 @@ import {PageTextFonts, PageTextAddFormatting, PageTextBullets, PageTextNumbers,
|
|||
import {ParagraphAdvSettings, PageParagraphBackColor, PageParagraphCustomColor} from "./EditParagraph";
|
||||
import {PageShapeStyleNoFill, PageShapeStyle, PageShapeCustomFillColor, PageShapeBorderColor, PageShapeCustomBorderColor, PageWrap, PageReorder, PageReplace} from "./EditShape";
|
||||
import {PageImageReorder, PageImageReplace, PageImageWrap, PageLinkSettings} from "./EditImage";
|
||||
import {PageTableOptions, PageTableWrap, PageTableStyle} from "./EditTable";
|
||||
import {PageTableOptions, PageTableWrap, PageTableStyle, PageTableStyleOptions, PageTableCustomFillColor, PageTableBorderColor, PageTableCustomBorderColor} from "./EditTable";
|
||||
import {PageChartWrap, PageChartReorder} from "./EditChart";
|
||||
|
||||
const routes = [
|
||||
|
|
@ -135,6 +135,22 @@ const routes = [
|
|||
path: '/edit-table-style/',
|
||||
component: PageTableStyle,
|
||||
},
|
||||
{
|
||||
path: '/edit-table-style-options/',
|
||||
component: PageTableStyleOptions,
|
||||
},
|
||||
{
|
||||
path: '/edit-table-custom-fill-color/',
|
||||
component: PageTableCustomFillColor,
|
||||
},
|
||||
{
|
||||
path: '/edit-table-border-color/',
|
||||
component: PageTableBorderColor,
|
||||
},
|
||||
{
|
||||
path: '/edit-table-custom-border-color/',
|
||||
component: PageTableCustomBorderColor,
|
||||
},
|
||||
//Edit chart
|
||||
{
|
||||
path: '/edit-chart-wrap/',
|
||||
|
|
|
|||
|
|
@ -1,8 +1,9 @@
|
|||
import React, {Fragment, useState} from 'react';
|
||||
import {observer, inject} from "mobx-react";
|
||||
import {Page, Navbar, List, ListItem, ListButton, Row, BlockTitle, Range, Toggle, Icon} from 'framework7-react';
|
||||
import {Page, Navbar, List, ListItem, ListButton, Row, BlockTitle, Range, Toggle, Icon, Link, Tabs, Tab} 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";
|
||||
|
||||
const PageTableOptions = props => {
|
||||
const { t } = useTranslation();
|
||||
|
|
@ -134,11 +135,305 @@ const PageWrap = props => {
|
|||
)
|
||||
};
|
||||
|
||||
// Style
|
||||
|
||||
const StyleTemplates = inject("storeFocusObjects")(observer(({templates, onStyleClick, storeFocusObjects}) => {
|
||||
const styleId = storeFocusObjects.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);
|
||||
});
|
||||
|
||||
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>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)
|
||||
}));
|
||||
|
||||
const PageStyleOptions = props => {
|
||||
const { t } = useTranslation();
|
||||
const _t = t('Edit', {returnObjects: true});
|
||||
const tableLook = props.storeFocusObjects.tableObject.get_TableLook();
|
||||
const isFirstRow = tableLook.get_FirstRow();
|
||||
const isLastRow = tableLook.get_LastRow();
|
||||
const isBandHor = tableLook.get_BandHor();
|
||||
const isFirstCol = tableLook.get_FirstCol();
|
||||
const isLastCol = tableLook.get_LastCol();
|
||||
const isBandVer = tableLook.get_BandVer();
|
||||
return (
|
||||
<Page>
|
||||
<Navbar title={_t.textOptions} backLink={_t.textBack}/>
|
||||
<List>
|
||||
<ListItem title={_t.textHeaderRow}>
|
||||
<Toggle checked={isFirstRow} onToggleChange={() => {props.onCheckTemplateChange(tableLook, 0, !isFirstRow)}}/>
|
||||
</ListItem>
|
||||
<ListItem title={_t.textTotalRow}>
|
||||
<Toggle checked={isLastRow} onToggleChange={() => {props.onCheckTemplateChange(tableLook, 1, !isLastRow)}}/>
|
||||
</ListItem>
|
||||
<ListItem title={_t.textBandedRow}>
|
||||
<Toggle checked={isBandHor} onToggleChange={() => {props.onCheckTemplateChange(tableLook, 2, !isBandHor)}}/>
|
||||
</ListItem>
|
||||
</List>
|
||||
<List>
|
||||
<ListItem title={_t.textFirstColumn}>
|
||||
<Toggle checked={isFirstCol} onToggleChange={() => {props.onCheckTemplateChange(tableLook, 3, !isFirstCol)}}/>
|
||||
</ListItem>
|
||||
<ListItem title={_t.textLastColumn}>
|
||||
<Toggle checked={isLastCol} onToggleChange={() => {props.onCheckTemplateChange(tableLook, 4, !isLastCol)}}/>
|
||||
</ListItem>
|
||||
<ListItem title={_t.textBandedColumn}>
|
||||
<Toggle checked={isBandVer} onToggleChange={() => {props.onCheckTemplateChange(tableLook, 5, !isBandVer)}}/>
|
||||
</ListItem>
|
||||
</List>
|
||||
</Page>
|
||||
)
|
||||
};
|
||||
|
||||
const PageCustomFillColor = props => {
|
||||
const { t } = useTranslation();
|
||||
const _t = t('Edit', {returnObjects: true});
|
||||
const tableObject = props.storeFocusObjects.tableObject;
|
||||
let fillColor = props.storeTableSettings.getFillColor(tableObject);
|
||||
if (typeof fillColor === 'object') {
|
||||
fillColor = fillColor.color;
|
||||
}
|
||||
const onAddNewColor = (colors, color) => {
|
||||
props.storePalette.changeCustomColors(colors);
|
||||
props.onFillColor(color);
|
||||
props.f7router.back();
|
||||
};
|
||||
return(
|
||||
<Page>
|
||||
<Navbar title={_t.textCustomColor} backLink={_t.textBack} />
|
||||
<CustomColorPicker currentColor={fillColor} onAddNewColor={onAddNewColor}/>
|
||||
</Page>
|
||||
)
|
||||
};
|
||||
|
||||
const TabFillColor = inject("storeFocusObjects", "storeTableSettings", "storePalette")(observer(props => {
|
||||
const { t } = useTranslation();
|
||||
const _t = t('Edit', {returnObjects: true});
|
||||
const tableObject = props.storeFocusObjects.tableObject;
|
||||
const fillColor = props.storeTableSettings.getFillColor(tableObject);
|
||||
const customColors = props.storePalette.customColors;
|
||||
const changeColor = (color, effectId, effectValue) => {
|
||||
if (color !== 'empty') {
|
||||
if (effectId !==undefined ) {
|
||||
const newColor = {color: color, effectId: effectId, effectValue: effectValue};
|
||||
props.onFillColor(newColor);
|
||||
} else {
|
||||
props.onFillColor(color);
|
||||
}
|
||||
} else {
|
||||
// open custom color menu
|
||||
props.f7router.navigate('/edit-table-custom-fill-color/');
|
||||
}
|
||||
};
|
||||
return(
|
||||
<Fragment>
|
||||
<ThemeColorPalette changeColor={changeColor} curColor={fillColor} customColors={customColors} transparent={true}/>
|
||||
<List>
|
||||
<ListItem title={_t.textAddCustomColor} link={'/edit-table-custom-fill-color/'} routeProps={{
|
||||
onFillColor: props.onFillColor
|
||||
}}></ListItem>
|
||||
</List>
|
||||
</Fragment>
|
||||
)
|
||||
}));
|
||||
|
||||
const PageCustomBorderColor = props => {
|
||||
const { t } = useTranslation();
|
||||
const _t = t('Edit', {returnObjects: true});
|
||||
let borderColor = props.storeTableSettings.cellBorderColor;
|
||||
if (typeof borderColor === 'object') {
|
||||
borderColor = borderColor.color;
|
||||
}
|
||||
const onAddNewColor = (colors, color) => {
|
||||
props.storePalette.changeCustomColors(colors);
|
||||
props.storeTableSettings.updateCellBorderColor(color);
|
||||
props.f7router.back();
|
||||
};
|
||||
return(
|
||||
<Page>
|
||||
<Navbar title={_t.textCustomColor} backLink={_t.textBack} />
|
||||
<CustomColorPicker currentColor={borderColor} onAddNewColor={onAddNewColor}/>
|
||||
</Page>
|
||||
)
|
||||
};
|
||||
|
||||
const PageBorderColor = props => {
|
||||
const { t } = useTranslation();
|
||||
const _t = t('Edit', {returnObjects: true});
|
||||
const storeTableSettings = props.storeTableSettings;
|
||||
const borderColor = storeTableSettings.cellBorderColor;
|
||||
const customColors = props.storePalette.customColors;
|
||||
const changeColor = (color, effectId, effectValue) => {
|
||||
if (color !== 'empty') {
|
||||
if (effectId !==undefined ) {
|
||||
const newColor = {color: color, effectId: effectId, effectValue: effectValue};
|
||||
storeTableSettings.updateCellBorderColor(newColor);
|
||||
} else {
|
||||
storeTableSettings.updateCellBorderColor(color);
|
||||
}
|
||||
} else {
|
||||
// open custom color menu
|
||||
props.f7router.navigate('/edit-table-custom-border-color/');
|
||||
}
|
||||
};
|
||||
return(
|
||||
<Page>
|
||||
<Navbar title={_t.textColor} backLink={_t.textBack} />
|
||||
<ThemeColorPalette changeColor={changeColor} curColor={borderColor} customColors={customColors}/>
|
||||
<List>
|
||||
<ListItem title={_t.textAddCustomColor} link={'/edit-table-custom-border-color/'}></ListItem>
|
||||
</List>
|
||||
</Page>
|
||||
)
|
||||
};
|
||||
|
||||
const TabBorder = inject("storeFocusObjects", "storeTableSettings")(observer(props => {
|
||||
const { t } = useTranslation();
|
||||
const _t = t('Edit', {returnObjects: true});
|
||||
|
||||
const storeTableSettings = props.storeTableSettings;
|
||||
const borderSizeTransform = storeTableSettings.borderSizeTransform();
|
||||
const borderSize = storeTableSettings.cellBorderWidth;
|
||||
const displayBorderSize = borderSizeTransform.indexSizeByValue(borderSize);
|
||||
const displayTextBorderSize = borderSizeTransform.sizeByValue(borderSize);
|
||||
const [stateBorderSize, setBorderSize] = useState(displayBorderSize);
|
||||
const [stateTextBorderSize, setTextBorderSize] = useState(displayTextBorderSize);
|
||||
|
||||
const onBorderType = (type) => {
|
||||
storeTableSettings.updateBordersStyle(type);
|
||||
props.onBorderTypeClick(storeTableSettings.cellBorders);
|
||||
};
|
||||
|
||||
const borderColor = storeTableSettings.cellBorderColor;
|
||||
const displayBorderColor = borderColor !== 'transparent' ? `#${(typeof borderColor === "object" ? borderColor.color : borderColor)}` : borderColor;
|
||||
|
||||
return (
|
||||
<List>
|
||||
<ListItem>
|
||||
<div slot="root-start" className='inner-range-title'>{_t.textSize}</div>
|
||||
<div slot='inner' style={{width: '100%'}}>
|
||||
<Range min="0" max="7" step="1" value={stateBorderSize}
|
||||
onRangeChange={(value) => {
|
||||
setBorderSize(value);
|
||||
setTextBorderSize(borderSizeTransform.sizeByIndex(value));
|
||||
}}
|
||||
onRangeChanged={(value) => {storeTableSettings.updateCellBorderWidth(borderSizeTransform.sizeByIndex(value));}}
|
||||
></Range>
|
||||
</div>
|
||||
<div slot='inner-end' style={{minWidth: '60px', textAlign: 'right'}}>
|
||||
{stateTextBorderSize + ' ' + Common.Utils.Metric.getMetricName(Common.Utils.Metric.c_MetricUnits.pt)}
|
||||
</div>
|
||||
</ListItem>
|
||||
<ListItem title={_t.textColor} link='/edit-table-border-color/'>
|
||||
<span className="color-preview"
|
||||
slot="after"
|
||||
style={{ background: displayBorderColor}}
|
||||
></span>
|
||||
</ListItem>
|
||||
<ListItem className='buttons table-presets'>
|
||||
<Row>
|
||||
<a className={'item-link button'} onClick={() => {onBorderType("lrtbcm")}}>
|
||||
<Icon slot="media" icon="icon-table-borders-all"></Icon>
|
||||
</a>
|
||||
<a className={'item-link button'} onClick={() => {onBorderType("")}}>
|
||||
<Icon slot="media" icon="icon-table-borders-none"></Icon>
|
||||
</a>
|
||||
<a className={'item-link button'} onClick={() => {onBorderType("cm")}}>
|
||||
<Icon slot="media" icon="icon-table-borders-inner"></Icon>
|
||||
</a>
|
||||
<a className={'item-link button'} onClick={() => {onBorderType("lrtb")}}>
|
||||
<Icon slot="media" icon="icon-table-borders-outer"></Icon>
|
||||
</a>
|
||||
<a className={'item-link button'} onClick={() => {onBorderType("l")}}>
|
||||
<Icon slot="media" icon="icon icon-table-borders-left"></Icon>
|
||||
</a>
|
||||
</Row>
|
||||
</ListItem>
|
||||
<ListItem className='buttons table-presets'>
|
||||
<Row>
|
||||
<a className={'item-link button'} onClick={() => {onBorderType("c")}}>
|
||||
<Icon slot="media" icon="icon-table-borders-center"></Icon>
|
||||
</a>
|
||||
<a className={'item-link button'} onClick={() => {onBorderType("r")}}>
|
||||
<Icon slot="media" icon="icon-table-borders-right"></Icon>
|
||||
</a>
|
||||
<a className={'item-link button'} onClick={() => {onBorderType("t")}}>
|
||||
<Icon slot="media" icon="icon-table-borders-top"></Icon>
|
||||
</a>
|
||||
<a className={'item-link button'} onClick={() => {onBorderType("m")}}>
|
||||
<Icon slot="media" icon="icon-table-borders-middle"></Icon>
|
||||
</a>
|
||||
<a className={'item-link button'} onClick={() => {onBorderType("b")}}>
|
||||
<Icon slot="media" icon="icon-table-borders-bottom"></Icon>
|
||||
</a>
|
||||
</Row>
|
||||
</ListItem>
|
||||
</List>
|
||||
)
|
||||
}));
|
||||
|
||||
const PageStyle = props => {
|
||||
const { t } = useTranslation();
|
||||
const _t = t('Edit', {returnObjects: true});
|
||||
const storeTableSettings = props.storeTableSettings;
|
||||
const templates = storeTableSettings.styles;
|
||||
return (
|
||||
<Page>
|
||||
<Navbar backLink={_t.textBack}>
|
||||
<div className="tab-buttons tabbar">
|
||||
<Link key={"de-link-table-style"} tabLink={"#edit-table-style"} tabLinkActive={true}>{_t.textStyle}</Link>
|
||||
<Link key={"de-link-table-fill"} tabLink={"#edit-table-fill"}>{_t.textFill}</Link>
|
||||
<Link key={"de-link-table-border"} tabLink={"#edit-table-border"}>{_t.textBorder}</Link>
|
||||
</div>
|
||||
</Navbar>
|
||||
<Tabs animated>
|
||||
<Tab key={"de-tab-table-style"} id={"edit-table-style"} className="page-content no-padding-top" tabActive={true}>
|
||||
<List>
|
||||
<ListItem>
|
||||
<StyleTemplates templates={templates} onStyleClick={props.onStyleClick}/>
|
||||
</ListItem>
|
||||
</List>
|
||||
<List>
|
||||
<ListItem title={_t.textStyleOptions} link={'/edit-table-style-options/'} routeProps={{
|
||||
onCheckTemplateChange: props.onCheckTemplateChange
|
||||
}}/>
|
||||
</List>
|
||||
</Tab>
|
||||
<Tab key={"de-tab-table-fill"} id={"edit-table-fill"} className="page-content no-padding-top">
|
||||
<TabFillColor onFillColor={props.onFillColor}/>
|
||||
</Tab>
|
||||
<Tab key={"de-tab-table-border"} id={"edit-table-border"} className="page-content no-padding-top">
|
||||
<TabBorder onBorderTypeClick={props.onBorderTypeClick}/>
|
||||
</Tab>
|
||||
</Tabs>
|
||||
</Page>
|
||||
)
|
||||
};
|
||||
|
|
@ -183,7 +478,12 @@ const EditTable = props => {
|
|||
onOptionResize: props.onOptionResize,
|
||||
onOptionRepeat: props.onOptionRepeat
|
||||
}}></ListItem>
|
||||
<ListItem title={_t.textStyle} link='/edit-table-style/'></ListItem>
|
||||
<ListItem title={_t.textStyle} link='/edit-table-style/' routeProps={{
|
||||
onStyleClick: props.onStyleClick,
|
||||
onCheckTemplateChange: props.onCheckTemplateChange,
|
||||
onFillColor: props.onFillColor,
|
||||
onBorderTypeClick: props.onBorderTypeClick
|
||||
}}></ListItem>
|
||||
<ListItem title={_t.textWrap} link='/edit-table-wrap/' routeProps={{
|
||||
onWrapType: props.onWrapType,
|
||||
onWrapAlign: props.onWrapAlign,
|
||||
|
|
@ -197,10 +497,19 @@ const EditTable = props => {
|
|||
|
||||
const EditTableContainer = inject("storeFocusObjects")(observer(EditTable));
|
||||
const PageTableOptionsContainer = inject("storeFocusObjects","storeTableSettings")(observer(PageTableOptions));
|
||||
const PageWrapContainer = inject("storeFocusObjects","storeTableSettings")(observer(PageWrap));
|
||||
const PageStyleContainer = inject("storeFocusObjects","storeTableSettings")(observer(PageStyle));
|
||||
const PageTableWrap = inject("storeFocusObjects","storeTableSettings")(observer(PageWrap));
|
||||
const PageTableStyle = inject("storeFocusObjects","storeTableSettings")(observer(PageStyle));
|
||||
const PageTableStyleOptions = inject("storeFocusObjects","storeTableSettings")(observer(PageStyleOptions));
|
||||
const PageTableCustomFillColor = inject("storeFocusObjects","storeTableSettings", "storePalette")(observer(PageCustomFillColor));
|
||||
const PageTableBorderColor = inject("storeFocusObjects","storeTableSettings", "storePalette")(observer(PageBorderColor));
|
||||
const PageTableCustomBorderColor = inject("storeFocusObjects","storeTableSettings", "storePalette")(observer(PageCustomBorderColor));
|
||||
|
||||
|
||||
export {EditTableContainer as EditTable,
|
||||
PageTableOptionsContainer as PageTableOptions,
|
||||
PageWrapContainer as PageTableWrap,
|
||||
PageStyleContainer as PageTableStyle}
|
||||
PageTableWrap,
|
||||
PageTableStyle,
|
||||
PageTableStyleOptions,
|
||||
PageTableCustomFillColor,
|
||||
PageTableBorderColor,
|
||||
PageTableCustomBorderColor}
|
||||
Loading…
Reference in a new issue