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

[DE mobile] Custom Color (text)

Browse source
This commit is contained in:
Julia Svinareva 2019-10-08 16:52:37 +03:00
parent a78b320247
commit ebad13534a
2 changed files with 89 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -408,3 +408,19 @@
</div>
</div>
</div>
<!-- Custom color view -->
<div id="edit-text-custom-color-view">
<div class="navbar">
<div class="navbar-inner" data-page="edit-text-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-text-custom-color">
<div class="page-content">
<!--Color HSB palette-->
</div>
</div>
</div>

74
apps/documenteditor/mobile/app/view/edit/EditText.js
View file

@ -200,11 +200,46 @@ define([
this.paletteTextColor = new Common.UI.ThemeColorPalette({
el: $('.page[data-page=edit-text-font-color] .page-content')
});
this.paletteTextColor.on('customcolor', function () {
me.showCustomFontColor();
});
var template = _.template(['<div class="list-block">',
'<ul>',
'<li>',
'<a id="edit-text-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(''));
$('.page[data-page=edit-text-font-color] .page-content').append(template({scope: this}));
$('#edit-text-add-custom-color').single('click', _.bind(this.showCustomFontColor, this));
Common.Utils.addScrollIfNeed('.page[data-page=edit-text-font-color]', '.page[data-page=edit-text-font-color] .page-content');
this.fireEvent('page:show', [this, '#edit-text-color']);
},
showCustomFontColor: function () {
var me = this,
selector = '#edit-text-custom-color-view';
me.showPage(selector, true);
me.customColorPicker = new Common.UI.HsbColorPicker({
el: $('.page[data-page=edit-text-custom-color] .page-content'),
color: me.paletteTextColor.currentColor
});
me.customColorPicker.on('addcustomcolor', function (colorPicker, color) {
me.paletteTextColor.addNewDynamicColor(colorPicker, color);
DE.getController('EditContainer').rootView.router.back();
});
me.fireEvent('page:show', [me, selector]);
},
showBackgroundColor: function () {
this.showPage('#edit-text-background', true);
@ -212,11 +247,46 @@ define([
el: $('.page[data-page=edit-text-font-background] .page-content'),
transparent: true
});
this.paletteBackgroundColor.on('customcolor', function () {
me.showCustomBackgroundColor();
});
var template = _.template(['<div class="list-block">',
'<ul>',
'<li>',
'<a id="edit-text-add-custom-background-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-text-font-background] .page-content').append(template({scope: this}));
$('#edit-text-add-custom-background-color').single('click', _.bind(this.showCustomBackgroundColor, this));
Common.Utils.addScrollIfNeed('.page[data-page=edit-text-font-background]', '.page[data-page=edit-text-font-background] .page-content');
this.fireEvent('page:show', [this, '#edit-text-background']);
},
showCustomBackgroundColor: function () {
var me = this,
selector = '#edit-text-custom-color-view';
me.showPage(selector, true);
me.customBackgroundColorPicker = new Common.UI.HsbColorPicker({
el: $('.page[data-page=edit-text-custom-color] .page-content'),
color: me.paletteBackgroundColor.currentColor
});
me.customBackgroundColorPicker.on('addcustomcolor', function (colorPicker, color) {
me.paletteBackgroundColor.addNewDynamicColor(colorPicker, color);
DE.getController('EditContainer').rootView.router.back();
});
me.fireEvent('page:show', [me, selector]);
},
showAdditional: function () {
this.showPage('#edit-text-additional');
Common.Utils.addScrollIfNeed('.page[data-page=edit-text-additional]', '.page[data-page=edit-text-additional] .page-content');
@ -259,7 +329,9 @@ define([
textCharacterBold: 'B',
textCharacterItalic: 'I',
textCharacterUnderline: 'U',
textCharacterStrikethrough: 'S'
textCharacterStrikethrough: 'S',
textAddCustomColor: 'Add Custom Color',
textCustomColor: 'Custom Color'
}
})(), DE.Views.EditText || {}))
});