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

[SSE] Custom Color (Edit Cell)

Browse source
This commit is contained in:
Julia Svinareva 2019-10-09 14:24:26 +03:00
parent ebad13534a
commit 99affc5cfd
4 changed files with 142 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
apps/common/mobile/lib/component/HsbColorPicker.js
View file

@ -84,6 +84,9 @@ define([
if (!me.currentColor) {
me.currentColor = me.options.color;
}
if (me.currentColor === 'transparent') {
me.currentColor = 'ffffff';
}
var colorRgb = me.colorHexToRgb(me.currentColor);
me.currentHsl = me.colorRgbToHsl(colorRgb[0],colorRgb[1],colorRgb[2]);
me.currentHsb = me.colorHslToHsb(me.currentHsl[0],me.currentHsl[1],me.currentHsl[2]);

8
apps/spreadsheeteditor/mobile/app/controller/edit/EditCell.js
View file

@ -215,11 +215,9 @@ define([
},
initBorderColorPage: function () {
var me = this,
palette = new Common.UI.ThemeColorPalette({
el: $('.page[data-page=edit-border-color] .page-content')
});
var me = this;
me.getView('EditCell').showBorderColorPage();
var palette = me.getView('EditCell').paletteBorderColor;
if (palette) {
palette.select(_borderInfo.color);
palette.on('select', _.bind(function (palette, color) {

17
apps/spreadsheeteditor/mobile/app/template/EditCell.template
View file

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

121
apps/spreadsheeteditor/mobile/app/view/edit/EditCell.js
View file

@ -45,7 +45,8 @@ define([
'jquery',
'underscore',
'backbone',
'common/mobile/lib/component/ThemeColorPalette'
'common/mobile/lib/component/ThemeColorPalette',
'common/mobile/lib/component/HsbColorPicker'
], function (editTemplate, $, _, Backbone) {
'use strict';
@ -234,28 +235,142 @@ define([
},
showTextColor: function () {
var me = this;
this.showPage('#edit-text-color', true);
this.paletteTextColor = new Common.UI.ThemeColorPalette({
el: $('.page[data-page=edit-text-color] .page-content')
});
this.paletteTextColor.on('customcolor', function () {
me.showCustomTextColor();
});
var template = _.template(['<div class="list-block">',
'<ul>',
'<li>',
'<a id="edit-cell-add-custom-text-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-color] .page-content').append(template({scope: this}));
$('#edit-cell-add-custom-text-color').single('click', _.bind(this.showCustomTextColor, this));
Common.Utils.addScrollIfNeed('.page[data-page=edit-text-color]', '.page[data-page=edit-text-color] .page-content');
this.fireEvent('page:show', [this, '#edit-text-color']);
},
showCustomTextColor: function () {
var me = this,
selector = '#edit-cell-custom-color-view';
me.showPage(selector, true);
me.customTextColorPicker = new Common.UI.HsbColorPicker({
el: $('.page[data-page=edit-cell-custom-color] .page-content'),
color: me.paletteTextColor.currentColor
});
me.customTextColorPicker.on('addcustomcolor', function (colorPicker, color) {
me.paletteTextColor.addNewDynamicColor(colorPicker, color);
SSE.getController('EditContainer').rootView.router.back();
});
me.fireEvent('page:show', [me, selector]);
},
showFillColor: function () {
var me = this;
this.showPage('#edit-fill-color', true);
this.paletteFillColor = new Common.UI.ThemeColorPalette({
el: $('.page[data-page=edit-fill-color] .page-content'),
transparent: true
});
this.paletteFillColor.on('customcolor', function () {
me.showCustomFillColor();
});
var template = _.template(['<div class="list-block">',
'<ul>',
'<li>',
'<a id="edit-cell-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-fill-color] .page-content').append(template({scope: this}));
$('#edit-cell-add-custom-color').single('click', _.bind(this.showCustomFillColor, this));
Common.Utils.addScrollIfNeed('.page[data-page=edit-fill-color]', '.page[data-page=edit-fill-color] .page-content');
this.fireEvent('page:show', [this, '#edit-fill-color']);
},
showCustomFillColor: function () {
var me = this,
selector = '#edit-cell-custom-color-view';
me.showPage(selector, true);
me.customFillColorPicker = new Common.UI.HsbColorPicker({
el: $('.page[data-page=edit-cell-custom-color] .page-content'),
color: me.paletteFillColor.currentColor
});
me.customFillColorPicker.on('addcustomcolor', function (colorPicker, color) {
me.paletteFillColor.addNewDynamicColor(colorPicker, color);
SSE.getController('EditContainer').rootView.router.back();
});
me.fireEvent('page:show', [me, selector]);
},
showBorderColorPage: function () {
var me = this;
this.paletteBorderColor = new Common.UI.ThemeColorPalette({
el: $('.page[data-page=edit-border-color] .page-content')
});
this.paletteBorderColor.on('customcolor', function () {
me.showCustomBorderColor();
});
var template = _.template(['<div class="list-block">',
'<ul>',
'<li>',
'<a id="edit-cell-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-border-color] .page-content').append(template({scope: this}));
$('#edit-cell-add-custom-border-color').single('click', _.bind(this.showCustomBorderColor, this));
},
showCustomBorderColor: function () {
var me = this,
selector = '#edit-cell-custom-color-view';
me.showPage(selector, true);
me.customBorderColorPicker = new Common.UI.HsbColorPicker({
el: $('.page[data-page=edit-cell-custom-color] .page-content'),
color: me.paletteBorderColor.currentColor
});
me.customBorderColorPicker.on('addcustomcolor', function (colorPicker, color) {
me.paletteBorderColor.addNewDynamicColor(colorPicker, color);
SSE.getController('EditContainer').rootView.router.back();
});
me.fireEvent('page:show', [me, selector]);
},
textBack: 'Back',
textFonts: 'Fonts',
textTextColor: 'Text Color',
@ -305,7 +420,9 @@ define([
textYen: 'Yen',
textCharacterBold: 'B',
textCharacterItalic: 'I',
textCharacterUnderline: 'U'
textCharacterUnderline: 'U',
textAddCustomColor: 'Add Custom Color',
textCustomColor: 'Custom Color'
}
})(), SSE.Views.EditCell || {}))
});