Lea/web-apps
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

[DE mobile] Custom Color (table)

Browse source
This commit is contained in:
Julia Svinareva 2019-10-08 13:59:47 +03:00
parent bf25a21455
commit 098f8995b7
2 changed files with 92 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
apps/documenteditor/mobile/app/template/EditTable.template
View file

@ -450,4 +450,20 @@
<!--Color palette-->
</div>
</div>
</div>
<!-- Custom color view -->
<div id="edit-table-custom-color-view">
<div class="navbar">
<div class="navbar-inner" data-page="edit-table-custom-color">
<div class="left sliding"><a href="#" class="back link"><i class="icon icon-back"></i><% if (!android) { %><span><%= scope.textBack %></span><% } %></a></div>
<div class="center sliding"><%= scope.textCustomColor %></div>
<div class="right"><% if (phone) { %><a href="#" class="link icon-only close-picker"><i class="icon icon-expand-down"></i></a><% } %></div>
</div>
</div>
<div class="page" data-page="edit-table-custom-color">
<div class="page-content">
<!--Color HSB palette-->
</div>
</div>
</div>

77
apps/documenteditor/mobile/app/view/edit/EditTable.js
View file

@ -190,12 +190,31 @@ define([
},
showTableStyle: function () {
var me = this;
this.showPage('#edit-table-style', true);
this.paletteFillColor = new Common.UI.ThemeColorPalette({
el: $('#tab-table-fill'),
transparent: true
});
this.paletteFillColor.on('customcolor', function () {
me.showCustomFillColor();
});
var template = _.template(['<div class="list-block">',
'<ul>',
'<li>',
'<a id="edit-table-add-custom-color" class="item-link">',
'<div class="item-content">',
'<div class="item-inner">',
'<div class="item-title"><%= scope.textAddCustomColor %></div>',
'</div>',
'</div>',
'</a>',
'</li>',
'</ul>',
'</div>'].join(''));
$('#tab-table-fill').append(template({scope: this}));
$('#edit-table-add-custom-color').single('click', _.bind(this.showCustomFillColor, this));
this.fireEvent('page:show', [this, '#edit-table-style']);
},
@ -206,6 +225,24 @@ define([
this.paletteBorderColor = new Common.UI.ThemeColorPalette({
el: $('.page[data-page=edit-table-border-color] .page-content')
});
this.paletteBorderColor.on('customcolor', function () {
me.showCustomBorderColor();
});
var template = _.template(['<div class="list-block">',
'<ul>',
'<li>',
'<a id="edit-table-add-custom-border-color" class="item-link">',
'<div class="item-content">',
'<div class="item-inner">',
'<div class="item-title"><%= scope.textAddCustomColor %></div>',
'</div>',
'</div>',
'</a>',
'</li>',
'</ul>',
'</div>'].join(''));
$('.page[data-page=edit-table-border-color] .page-content').append(template({scope: this}));
$('#edit-table-add-custom-border-color').single('click', _.bind(this.showCustomBorderColor, this));
this.fireEvent('page:show', [this, '#edit-table-border-color-view']);
},
@ -218,6 +255,42 @@ define([
this.showPage('#edit-table-style-options-view');
},
showCustomFillColor: function () {
var me = this,
selector = '#edit-table-custom-color-view';
me.showPage(selector, true);
me.customColorPicker = new Common.UI.HsbColorPicker({
el: $('.page[data-page=edit-table-custom-color] .page-content'),
color: me.paletteFillColor.currentColor
});
me.customColorPicker.on('addcustomcolor', function (colorPicker, color) {
me.paletteFillColor.addNewDynamicColor(colorPicker, color);
DE.getController('EditContainer').rootView.router.back();
});
me.fireEvent('page:show', [me, selector]);
},
showCustomBorderColor: function() {
var me = this,
selector = '#edit-table-custom-color-view';
me.showPage(selector, true);
me.customBorderColorPicker = new Common.UI.HsbColorPicker({
el: $('.page[data-page=edit-table-custom-color] .page-content'),
color: me.paletteBorderColor.currentColor
});
me.customBorderColorPicker.on('addcustomcolor', function (colorPicker, color) {
me.paletteBorderColor.addNewDynamicColor(colorPicker, color);
me.paletteFillColor.updateDynamicColors();
me.paletteFillColor.select(me.paletteFillColor.currentColor);
DE.getController('EditContainer').rootView.router.back();
});
me.fireEvent('page:show', [me, selector]);
},
textRemoveTable: 'Remove Table',
textTableOptions: 'Table Options',
textStyle: 'Style',
@ -242,7 +315,9 @@ define([
textBandedRow: 'Banded Row',
textFirstColumn: 'First Column',
textLastColumn: 'Last Column',
textBandedColumn: 'Banded Column'
textBandedColumn: 'Banded Column',
textAddCustomColor: 'Add Custom Color',
textCustomColor: 'Custom Color'
}
})(), DE.Views.EditTable || {}))
});