Commit a3165088 authored by Julia Radzhabova's avatar Julia Radzhabova

[SSE] В правую панель добавлены настройки для форматированных таблиц.

parent ca1cb546
......@@ -59,7 +59,6 @@ define([
this._locked = false;
this._originalLook = new CTablePropLook();
var fullwidth = 218;
this._originalProps = null;
this.CellBorders = {};
this.CellColor = {Value: 1, Color: 'transparent'}; // value=1 - цвет определен - прозрачный или другой, value=0 - цвет не определен, рисуем прозрачным
......
......@@ -45,7 +45,8 @@ define([
this._settings[Common.Utils.documentSettingsType.Image] = {panelId: "id-image-settings", panel: rightMenu.imageSettings, btn: rightMenu.btnImage, hidden: 1, locked: false};
this._settings[Common.Utils.documentSettingsType.Shape] = {panelId: "id-shape-settings", panel: rightMenu.shapeSettings, btn: rightMenu.btnShape, hidden: 1, locked: false};
this._settings[Common.Utils.documentSettingsType.TextArt] = {panelId: "id-textart-settings", panel: rightMenu.textartSettings, btn: rightMenu.btnTextArt, hidden: 1, locked: false};
this._settings[Common.Utils.documentSettingsType.Chart] = {panelId: "id-chart-settings", panel: rightMenu.chartSettings, btn: rightMenu.btnChart, hidden: 1, locked: false};
this._settings[Common.Utils.documentSettingsType.Chart] = {panelId: "id-chart-settings", panel: rightMenu.chartSettings, btn: rightMenu.btnChart, hidden: 1, locked: false};
this._settings[Common.Utils.documentSettingsType.Table] = {panelId: "id-table-settings", panel: rightMenu.tableSettings, btn: rightMenu.btnTable, hidden: 1, locked: false};
},
setApi: function(api) {
......@@ -71,18 +72,19 @@ define([
onSelectionChanged: function(info) {
var SelectedObjects = [],
selectType = info.asc_getFlags().asc_getSelectionType();
selectType = info.asc_getFlags().asc_getSelectionType(),
filterInfo = info.asc_getAutoFilterInfo();
if (selectType == c_oAscSelectionType.RangeImage || selectType == c_oAscSelectionType.RangeShape ||
selectType == c_oAscSelectionType.RangeChart || selectType == c_oAscSelectionType.RangeChartText || selectType == c_oAscSelectionType.RangeShapeText) {
SelectedObjects = this.api.asc_getGraphicObjectProps();
}
if (SelectedObjects.length<=0 && !this.rightmenu.minimizedMode) {
if (SelectedObjects.length<=0 && !(filterInfo && filterInfo.asc_getTableName()!==null) && !this.rightmenu.minimizedMode) {
this.rightmenu.clearSelection();
}
this.onFocusObject(SelectedObjects);
this.onFocusObject(SelectedObjects, filterInfo);
var need_disable = info.asc_getLocked(),
me = this;
......@@ -95,7 +97,7 @@ define([
}
},
onFocusObject: function(SelectedObjects) {
onFocusObject: function(SelectedObjects, filterInfo) {
if (!this.editMode)
return;
......@@ -133,6 +135,12 @@ define([
this._settings[settingsType].locked = value.asc_getLocked();
}
if (filterInfo && filterInfo.asc_getTableName()!==null) {
settingsType = Common.Utils.documentSettingsType.Table;
this._settings[settingsType].props = filterInfo;
this._settings[settingsType].hidden = 0;
}
var lastactive = -1, currentactive, priorityactive = -1;
for (i=0; i<this._settings.length; ++i) {
var pnl = this._settings[i];
......
<div id="view-right-menu" class="tool-menu right">
<div class="right-panel">
<div id="id-table-settings" class="settings-panel">
</div>
<div id="id-shape-settings" class="settings-panel">
</div>
<div id="id-image-settings" class="settings-panel">
......@@ -13,6 +15,7 @@
</div>
<div class="tool-menu-btns">
<div class="ct-btn-category arrow-left" />
<button id="id-right-menu-table" class="btn btn-category arrow-left" content-target="id-table-settings"><span class="btn-icon img-toolbarmenu btn-menu-table">&nbsp;</span></button>
<button id="id-right-menu-shape" class="btn btn-category arrow-left" content-target="id-shape-settings"><span class="btn-icon img-toolbarmenu btn-menu-shape">&nbsp;</span></button>
<button id="id-right-menu-image" class="btn btn-category arrow-left" content-target="id-image-settings"><span class="btn-icon img-toolbarmenu btn-menu-image">&nbsp;</span></button>
<button id="id-right-menu-chart" class="btn btn-category arrow-left" content-target="id-chart-settings"><span class="btn-icon img-toolbarmenu btn-menu-chart">&nbsp;</span></button>
......
<table cols="2">
<tr>
<td width="50%">
<label class="header"><%= scope.textRows %></label>
</td>
<td width="50%">
<label class="header"><%= scope.textColumns %></label>
</td>
</tr>
<tr>
<td class="padding-small">
<div id="table-checkbox-header"></div>
</td>
<td class="padding-small">
<div id="table-checkbox-first"></div>
</td>
</tr>
<tr>
<td class="padding-small">
<div id="table-checkbox-total"></div>
</td>
<td class="padding-small">
<div id="table-checkbox-last"></div>
</td>
</tr>
<tr>
<td class="padding-small">
<div id="table-checkbox-banded"></div>
</td>
<td class="padding-small">
<div id="table-checkbox-col-banded"></div>
</td>
</tr>
<tr>
<td colspan=2 class="padding-small">
<div id="table-checkbox-filter"></div>
</td>
</tr>
<tr>
<td colspan=2>
<label class="header"><%= scope.textTemplate %></label>
</td>
</tr>
<tr>
<td colspan=2 class="padding-small">
<div class="" id="table-combo-template" style="width: 100%; height: 64px;"></div>
</td>
</tr>
<tr>
<td class="padding-small" colspan=2>
<div class="separator horizontal"></div>
</td>
</tr>
<tr>
<td colspan=2>
<label class="header"><%= scope.textTableName %></label>
</td>
</tr>
<tr>
<td colspan=2 class="padding-small">
<div id="table-txt-name" class="input-row" style="width: 100%;"/>
</td>
</tr>
<tr>
<td class="padding-small" colspan=2>
<label class="header" style="margin-top: 3px;"><%= scope.textResize %></label>
<button type="button" class="btn btn-text-default" id="table-btn-select-data" style="display: inline-block; float:right; min-width: 100px;"><%= scope.textSelectData %></button>
</td>
</tr>
<tr>
<td class="padding-small" colspan=2>
<div class="separator horizontal"></div>
</td>
</tr>
<tr>
<td class="padding-small" colspan=2>
<label class="header" style="margin-top: 3px;"><%= scope.textEdit %></label>
<div id="table-btn-edit" style="display: inline-block; float:right;"></div>
</td>
</tr>
<tr class="finish-cell"></tr>
</table>
\ No newline at end of file
......@@ -22,6 +22,7 @@ define([
'spreadsheeteditor/main/app/view/ChartSettings',
'spreadsheeteditor/main/app/view/ShapeSettings',
'spreadsheeteditor/main/app/view/TextArtSettings',
'spreadsheeteditor/main/app/view/TableSettings',
'common/main/lib/component/Scroller'
], function (menuTemplate, $, _, Backbone) {
'use strict';
......@@ -76,12 +77,21 @@ define([
toggleGroup: 'tabpanelbtnsGroup'
});
this.btnTable = new Common.UI.Button({
hint: this.txtTableSettings,
asctype: Common.Utils.documentSettingsType.Table,
enableToggle: true,
disabled: true,
toggleGroup: 'tabpanelbtnsGroup'
});
this._settings = [];
this._settings[Common.Utils.documentSettingsType.Paragraph] = {panel: "id-paragraph-settings", btn: this.btnText};
this._settings[Common.Utils.documentSettingsType.Image] = {panel: "id-image-settings", btn: this.btnImage};
this._settings[Common.Utils.documentSettingsType.Shape] = {panel: "id-shape-settings", btn: this.btnShape};
this._settings[Common.Utils.documentSettingsType.Chart] = {panel: "id-chart-settings", btn: this.btnChart};
this._settings[Common.Utils.documentSettingsType.TextArt] = {panel: "id-textart-settings", btn: this.btnTextArt};
this._settings[Common.Utils.documentSettingsType.Table] = {panel: "id-table-settings", btn: this.btnTable};
return this;
},
......@@ -102,18 +112,21 @@ define([
this.btnChart.el = $('#id-right-menu-chart'); this.btnChart.render();
this.btnShape.el = $('#id-right-menu-shape'); this.btnShape.render();
this.btnTextArt.el = $('#id-right-menu-textart'); this.btnTextArt.render();
this.btnTable.el = $('#id-right-menu-table'); this.btnTable.render();
this.btnText.on('click', _.bind(this.onBtnMenuClick, this));
this.btnImage.on('click', _.bind(this.onBtnMenuClick, this));
this.btnChart.on('click', _.bind(this.onBtnMenuClick, this));
this.btnShape.on('click', _.bind(this.onBtnMenuClick, this));
this.btnTextArt.on('click', _.bind(this.onBtnMenuClick, this));
this.btnTable.on('click', _.bind(this.onBtnMenuClick, this));
this.paragraphSettings = new SSE.Views.ParagraphSettings();
this.imageSettings = new SSE.Views.ImageSettings();
this.chartSettings = new SSE.Views.ChartSettings();
this.shapeSettings = new SSE.Views.ShapeSettings();
this.textartSettings = new SSE.Views.TextArtSettings();
this.tableSettings = new SSE.Views.TableSettings();
if (_.isUndefined(this.scroller)) {
this.scroller = new Common.UI.Scroller({
......@@ -135,6 +148,7 @@ define([
this.chartSettings.setApi(api);
this.shapeSettings.setApi(api);
this.textartSettings.setApi(api);
this.tableSettings.setApi(api);
},
setMode: function(mode) {
......@@ -197,6 +211,7 @@ define([
this.shapeSettings.disableControls(disabled);
this.imageSettings.disableControls(disabled);
this.chartSettings.disableControls(disabled);
this.tableSettings.disableControls(disabled);
} else {
var cmp = $("#" + id);
if (disabled !== cmp.hasClass('disabled')) {
......@@ -224,6 +239,7 @@ define([
txtImageSettings: 'Image Settings',
txtShapeSettings: 'Shape Settings',
txtTextArtSettings: 'Text Art Settings',
txtChartSettings: 'Chart Settings'
txtChartSettings: 'Chart Settings',
txtTableSettings: 'Table Settings'
}, SSE.Views.RightMenu || {}));
});
\ No newline at end of file
/**
* TableSettings.js
*
* Created by Julia Radzhabova on 3/28/16
* Copyright (c) 2016 Ascensio System SIA. All rights reserved.
*
*/
define([
'text!spreadsheeteditor/main/app/template/TableSettings.template',
'jquery',
'underscore',
'backbone',
'common/main/lib/component/Button',
'common/main/lib/component/CheckBox',
'common/main/lib/component/ComboDataView',
'spreadsheeteditor/main/app/view/TableOptionsDialog'
], function (menuTemplate, $, _, Backbone) {
'use strict';
SSE.Views.TableSettings = Backbone.View.extend(_.extend({
el: '#id-table-settings',
// Compile our stats template
template: _.template(menuTemplate),
// Delegated events for creating new items, and clearing completed ones.
events: {
},
options: {
alias: 'TableSettings'
},
initialize: function () {
var me = this;
this._state = {
TemplateName: '',
CheckHeader: false,
CheckTotal: false,
CheckBanded: false,
CheckFirst: false,
CheckLast: false,
CheckColBanded: false,
CheckFilter: false,
DisabledControls: false
};
this.lockedControls = [];
this._locked = false;
// this._originalLook = new CTablePropLook();
this._originalProps = null;
this._noApply = false;
this.render();
this.chHeader = new Common.UI.CheckBox({
el: $('#table-checkbox-header'),
labelText: this.textHeader
});
this.lockedControls.push(this.chHeader);
this.chTotal = new Common.UI.CheckBox({
el: $('#table-checkbox-total'),
labelText: this.textTotal
});
this.lockedControls.push(this.chTotal);
this.chBanded = new Common.UI.CheckBox({
el: $('#table-checkbox-banded'),
labelText: this.textBanded
});
this.lockedControls.push(this.chBanded);
this.chFirst = new Common.UI.CheckBox({
el: $('#table-checkbox-first'),
labelText: this.textFirst
});
this.lockedControls.push(this.chFirst);
this.chLast = new Common.UI.CheckBox({
el: $('#table-checkbox-last'),
labelText: this.textLast
});
this.lockedControls.push(this.chLast);
this.chColBanded = new Common.UI.CheckBox({
el: $('#table-checkbox-col-banded'),
labelText: this.textBanded
});
this.lockedControls.push(this.chColBanded);
this.chFilter = new Common.UI.CheckBox({
el: $('#table-checkbox-filter'),
labelText: this.textFilter
});
this.lockedControls.push(this.chFilter);
this.chHeader.on('change', _.bind(this.onCheckTemplateChange, this, 0));
this.chTotal.on('change', _.bind(this.onCheckTemplateChange, this, 1));
this.chBanded.on('change', _.bind(this.onCheckTemplateChange, this, 2));
this.chFirst.on('change', _.bind(this.onCheckTemplateChange, this, 3));
this.chLast.on('change', _.bind(this.onCheckTemplateChange, this, 4));
this.chColBanded.on('change', _.bind(this.onCheckTemplateChange, this, 5));
this.chFilter.on('change', _.bind(this.onCheckFilterChange, this));
this.cmbTableTemplate = new Common.UI.ComboDataView({
itemWidth: 70,
itemHeight: 50,
menuMaxHeight: 300,
enableKeyEvents: true,
cls: 'combo-template'
});
this.cmbTableTemplate.render($('#table-combo-template'));
this.cmbTableTemplate.openButton.menu.cmpEl.css({
'min-width': 175,
'max-width': 175
});
this.cmbTableTemplate.on('click', _.bind(this.onTableTemplateSelect, this));
this.cmbTableTemplate.openButton.menu.on('show:after', function () {
me.cmbTableTemplate.menuPicker.scroller.update({alwaysVisibleY: true});
});
this.lockedControls.push(this.cmbTableTemplate);
this.txtTableName = new Common.UI.InputField({
el : $('#table-txt-name'),
name : 'name',
style : 'width: 100%;',
allowBlank : false,
blankError : this.txtEmpty
});
this.lockedControls.push(this.txtTableName);
this.btnSelectData = new Common.UI.Button({
el: $('#table-btn-select-data')
});
this.btnSelectData.on('click', _.bind(this.onSelectData, this));
this.btnEdit = new Common.UI.Button({
cls: 'btn-icon-default',
iconCls: 'btn-edit-table',
menu : new Common.UI.Menu({
menuAlign: 'tr-br',
items: [
{ caption: this.selectRowText, value: 0 },
{ caption: this.selectColumnText, value: 1 },
{ caption: this.selectCellText, value: 2 },
{ caption: this.selectTableText, value: 3 },
{ caption: '--' },
{ caption: this.insertRowAboveText, value: 4 },
{ caption: this.insertRowBelowText, value: 5 },
{ caption: this.insertColumnLeftText, value: 6 },
{ caption: this.insertColumnRightText, value: 7 },
{ caption: '--' },
{ caption: this.deleteRowText, value: 8 },
{ caption: this.deleteColumnText, value: 9 },
{ caption: this.deleteTableText, value: 10 }
]
})
});
this.btnEdit.render( $('#table-btn-edit')) ;
this.btnEdit.menu.on('show:after', _.bind( function(){
if (this.api) {
// this.mnuMerge.setDisabled(!this.api.CheckBeforeMergeCells());
// this.mnuSplit.setDisabled(!this.api.CheckBeforeSplitCells());
}
}, this));
this.btnEdit.menu.on('item:click', _.bind(this.onEditClick, this));
this.lockedControls.push(this.btnEdit);
},
onCheckTemplateChange: function(type, field, newValue, oldValue, eOpts) {
if (this.api) {
var properties = new CTableProp();
var look = (this._originalLook) ? this._originalLook : new CTablePropLook();
switch (type) {
case 0:
look.put_FirstRow(field.getValue()=='checked');
break;
case 1:
look.put_LastRow(field.getValue()=='checked');
break;
case 2:
look.put_BandHor(field.getValue()=='checked');
break;
case 3:
look.put_FirstCol(field.getValue()=='checked');
break;
case 4:
look.put_LastCol(field.getValue()=='checked');
break;
case 5:
look.put_BandVer(field.getValue()=='checked');
break;
}
properties.put_TableLook(look);
this.api.tblApply(properties);
}
Common.NotificationCenter.trigger('edit:complete', this);
},
onCheckFilterChange: function(field, newValue, oldValue, eOpts) {
Common.NotificationCenter.trigger('edit:complete', this);
},
onTableTemplateSelect: function(combo, record){
if (this.api && !this._noApply) {
if (this._state.TemplateName)
this.api.asc_changeAutoFilter(this._state.TemplateName, c_oAscChangeFilterOptions.style, record.get('name'));
}
Common.NotificationCenter.trigger('edit:complete', this);
},
onEditClick: function(menu, item, e) {
if (this.api) {
switch (item.value) {
case 0: this.api.selectRow(); break;
case 1: this.api.selectColumn(); break;
case 2: this.api.selectCell(); break;
case 3: this.api.selectTable(); break;
case 4: this.api.addRowAbove(); break;
case 5: this.api.addRowBelow(); break;
case 6: this.api.addColumnLeft(); break;
case 7: this.api.addColumnRight(); break;
case 8: this.api.remRow(); break;
case 9: this.api.remColumn(); break;
case 10: this.api.remTable(); break;
}
}
Common.NotificationCenter.trigger('edit:complete', this);
},
render: function () {
var el = $(this.el);
el.html(this.template({
scope: this
}));
},
setApi: function(o) {
this.api = o;
if (o) {
this.api.asc_registerCallback('asc_onInitTablePictures', _.bind(this.onApiInitTableTemplates, this));
}
return this;
},
ChangeSettings: function(props) {
this.disableControls(this._locked);
if (props )//filterInfo
{
this._originalProps = props;
//for table-template
var value = props.asc_getTableStyleName();
if (this._state.TemplateName!==value || this._isTemplatesChanged) {
this.cmbTableTemplate.suspendEvents();
var rec = this.cmbTableTemplate.menuPicker.store.findWhere({
name: value
});
this.cmbTableTemplate.menuPicker.selectRecord(rec);
this.cmbTableTemplate.resumeEvents();
if (this._isTemplatesChanged) {
if (rec)
this.cmbTableTemplate.fillComboView(this.cmbTableTemplate.menuPicker.getSelectedRec(),true);
else
this.cmbTableTemplate.fillComboView(this.cmbTableTemplate.menuPicker.store.at(0), true);
}
this._state.TemplateName=value;
}
this._isTemplatesChanged = false;
/*
var look = props.get_TableLook();
if (look) {
value = look.get_FirstRow();
if (this._state.CheckHeader!==value) {
this.chHeader.setValue(value, true);
this._state.CheckHeader=value;
this._originalLook.put_FirstRow(value);
}
value = look.get_LastRow();
if (this._state.CheckTotal!==value) {
this.chTotal.setValue(value, true);
this._state.CheckTotal=value;
this._originalLook.put_LastRow(value);
}
value = look.get_BandHor();
if (this._state.CheckBanded!==value) {
this.chBanded.setValue(value, true);
this._state.CheckBanded=value;
this._originalLook.put_BandHor(value);
}
value = look.get_FirstCol();
if (this._state.CheckFirst!==value) {
this.chFirst.setValue(value, true);
this._state.CheckFirst=value;
this._originalLook.put_FirstCol(value);
}
value = look.get_LastCol();
if (this._state.CheckLast!==value) {
this.chLast.setValue(value, true);
this._state.CheckLast=value;
this._originalLook.put_LastCol(value);
}
value = look.get_BandVer();
if (this._state.CheckColBanded!==value) {
this.chColBanded.setValue(value, true);
this._state.CheckColBanded=value;
this._originalLook.put_BandVer(value);
}
}
*/
}
},
onApiInitTableTemplates: function(Templates){
var self = this;
this._isTemplatesChanged = true;
var count = self.cmbTableTemplate.menuPicker.store.length;
if (count>0 && count==Templates.length) {
var data = self.cmbTableTemplate.menuPicker.store.models;
_.each(Templates, function(template, index){
data[index].set('imageUrl', template.asc_getImage());
});
} else {
self.cmbTableTemplate.menuPicker.store.reset([]);
var arr = [];
_.each(Templates, function(template){
arr.push({
id : Common.UI.getId(),
name : template.asc_getName(),
caption : template.asc_getDisplayName(),
type : template.asc_getType(),
imageUrl : template.asc_getImage(),
allowSelected : true,
selected : false
});
});
self.cmbTableTemplate.menuPicker.store.add(arr);
}
},
onSelectData: function() {
return;
var me = this;
if (me.api) {
var handlerDlg = function(dlg, result) {
if (result == 'ok') {
me.api.asc_setSelectionDialogMode(c_oAscSelectionDialogType.None);
if (me._state.tablename)
me.api.asc_changeAutoFilter(me._state.tablename, c_oAscChangeFilterOptions.style, fmtname);
}
Common.NotificationCenter.trigger('edit:complete', me.toolbar);
};
var win = new SSE.Views.TableOptionsDialog({
handler: handlerDlg
});
win.show();
win.setSettings({
api : me.api
});
}
},
setLocked: function (locked) {
this._locked = locked;
},
disableControls: function(disable) {
if (this._state.DisabledControls!==disable) {
this._state.DisabledControls = disable;
_.each(this.lockedControls, function(item) {
item.setDisabled(disable);
});
}
},
textEdit: 'Rows & Columns',
selectRowText : 'Select Row',
selectColumnText : 'Select Column',
selectCellText : 'Select Cell',
selectTableText : 'Select Table',
insertRowAboveText : 'Insert Row Above',
insertRowBelowText : 'Insert Row Below',
insertColumnLeftText : 'Insert Column Left',
insertColumnRightText : 'Insert Column Right',
deleteRowText : 'Delete Row',
deleteColumnText : 'Delete Column',
deleteTableText : 'Delete Table',
textOK : 'OK',
textCancel : 'Cancel',
textTemplate : 'Select From Template',
textRows : 'Rows',
textColumns : 'Columns',
textHeader : 'Header',
textTotal : 'Total',
textBanded : 'Banded',
textFirst : 'First',
textLast : 'Last',
textEmptyTemplate : 'No templates',
textFilter : 'Filter button',
textTableName : 'Table Name',
textResize : 'Resize table',
textSelectData : 'Select Data'
}, SSE.Views.TableSettings || {}));
});
\ No newline at end of file
......@@ -696,6 +696,7 @@
"SSE.Views.RightMenu.txtParagraphSettings": "Text Settings",
"SSE.Views.RightMenu.txtSettings": "Common Settings",
"SSE.Views.RightMenu.txtShapeSettings": "Shape Settings",
"SSE.Views.RightMenu.txtTableSettings": "Table Settings",
"SSE.Views.RightMenu.txtTextArtSettings": "Text Art Settings",
"SSE.Views.SetValueDialog.cancelButtonText": "Cancel",
"SSE.Views.SetValueDialog.okButtonText": "OK",
......
......@@ -20,6 +20,9 @@
/*menuTextArt*/
.toolbar-btn-icon(btn-menu-textart, 66, @toolbar-icon-size);
/*menuTable*/
.toolbar-btn-icon(btn-menu-table, 34, @toolbar-icon-size);
}
}
......@@ -79,12 +82,19 @@
}
}
.btn-edit-table,
.btn-change-shape {
.background-ximage('@{app-image-path}/right-panels/rowscols_icon.png', '@{app-image-path}/right-panels/rowscols_icon@2x.png', 84px);
margin-right: 2px !important;
margin-bottom: 1px !important;
}
.btn-edit-table {background-position: 0 0;}
button.over .btn-edit-table {background-position: -28px 0;}
.btn-group.open .btn-edit-table,
button.active .btn-edit-table,
button:active .btn-edit-table {background-position: -56px 0;}
.btn-change-shape {background-position: 0 -16px;}
button.over .btn-change-shape {background-position: -28px -16px;}
.btn-group.open .btn-change-shape,
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment