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

[DE mobile] Custom Color (chart)

Browse source
This commit is contained in:
Julia Svinareva 2019-10-08 14:42:21 +03:00
parent d3a039f6b0
commit a78b320247
2 changed files with 91 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -371,4 +371,20 @@
<!--Color palette-->
</div>
</div>
</div>
<!-- Custom color view -->
<div id="edit-chart-custom-color-view">
<div class="navbar">
<div class="navbar-inner" data-page="edit-chart-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-chart-custom-color">
<div class="page-content">
<!--Color HSB palette-->
</div>
</div>
</div>

76
apps/documenteditor/mobile/app/view/edit/EditChart.js
View file

@ -220,6 +220,24 @@ define([
el: $('#tab-chart-fill'),
transparent: true
});
this.paletteFillColor.on('customcolor', function () {
me.showCustomFillColor();
});
var template = _.template(['<div class="list-block">',
'<ul>',
'<li>',
'<a id="edit-chart-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-chart-fill').append(template({scope: this}));
$('#edit-chart-add-custom-color').single('click', _.bind(this.showCustomFillColor, this));
this.fireEvent('page:show', [this, selector]);
@ -242,10 +260,64 @@ define([
this.paletteBorderColor = new Common.UI.ThemeColorPalette({
el: $('.page[data-page=edit-chart-border-color] .page-content')
});
this.paletteBorderColor.on('customcolor', function () {
me.showCustomBorderColor();
});
var template = _.template(['<div class="list-block">',
'<ul>',
'<li>',
'<a id="edit-chart-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-chart-border-color] .page-content').append(template({scope: this}));
$('#edit-chart-add-custom-border-color').single('click', _.bind(this.showCustomBorderColor, this));
this.fireEvent('page:show', [this, selector]);
},
showCustomFillColor: function() {
var me = this,
selector = '#edit-chart-custom-color-view';
me.showPage(selector, true);
me.customColorPicker = new Common.UI.HsbColorPicker({
el: $('.page[data-page=edit-chart-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-chart-custom-color-view';
me.showPage(selector, true);
me.customBorderColorPicker = new Common.UI.HsbColorPicker({
el: $('.page[data-page=edit-chart-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]);
},
textStyle: 'Style',
textWrap: 'Wrap',
textReorder: 'Reorder',
@ -270,7 +342,9 @@ define([
textFill: 'Fill',
textBorder: 'Border',
textSize: 'Size',
textColor: 'Color'
textColor: 'Color',
textAddCustomColor: 'Add Custom Color',
textCustomColor: 'Custom Color'
}
})(), DE.Views.EditChart || {}))
});