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

[SSE] Custom Color

Browse source
This commit is contained in:
Julia Svinareva 2019-10-10 13:54:38 +03:00
parent 99affc5cfd
commit 8558e8407a
10 changed files with 332 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -254,6 +254,7 @@ define([
},
showBorderColor: function () {
var me = this;
var selector = '#edit-chart-border-color-view';
this.showPage(selector, true);

9
apps/spreadsheeteditor/mobile/app/controller/edit/EditChart.js
View file

@ -204,10 +204,7 @@ define([
// Fill
var paletteFillColor = new Common.UI.ThemeColorPalette({
el: $('#tab-chart-fill'),
transparent: true
});
var paletteFillColor = this.getView('EditChart').paletteFillColor;
paletteFillColor.on('select', _.bind(me.onFillColor, me));
@ -533,9 +530,7 @@ define([
initBorderColorPage: function () {
var me = this,
palette = new Common.UI.ThemeColorPalette({
el: $('.page[data-page=edit-chart-border-color] .page-content')
});
palette = me.getView('EditChart').paletteBorderColor;
if (palette) {
palette.select(_borderInfo.color);

10
apps/spreadsheeteditor/mobile/app/controller/edit/EditShape.js
View file

@ -161,11 +161,7 @@ define([
// Fill
var paletteFillColor = new Common.UI.ThemeColorPalette({
el: $('#tab-shape-fill'),
transparent: true
});
var paletteFillColor = me.getView('EditShape').paletteFillColor;
paletteFillColor.on('select', _.bind(me.onFillColor, me));
var fill = shapeProperties.asc_getFill(),
@ -223,9 +219,7 @@ define([
initBorderColorPage: function () {
var me = this,
palette = new Common.UI.ThemeColorPalette({
el: $('.page[data-page=edit-shape-border-color-view] .page-content')
});
palette = me.getView('EditShape').paletteBorderColor;
if (palette) {
palette.select(_borderInfo.color);

4
apps/spreadsheeteditor/mobile/app/controller/edit/EditText.js
View file

@ -197,9 +197,7 @@ define([
initTextColorPage: function () {
var me = this,
color = me._sdkToThemeColor(_fontInfo.color),
palette = new Common.UI.ThemeColorPalette({
el: $('.page[data-page=edit-text-color] .page-content')
});
palette = me.getView('EditText').paletteTextColor;
if (palette) {
palette.select(color);

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

@ -623,4 +623,20 @@
</div>
</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>

16
apps/spreadsheeteditor/mobile/app/template/EditShape.template
View file

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

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

@ -117,3 +117,20 @@
</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>

107
apps/spreadsheeteditor/mobile/app/view/edit/EditChart.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';
@ -179,6 +180,8 @@ define([
}).join(', ');
$(selectorsDynamicPage).single('click', _.bind(this.onItemClick, this));
$('#chart-style').single('click', _.bind(this.showStyle, this));
$('#edit-chart-bordercolor').single('click', _.bind(this.showBorderColor, this));
$('.edit-chart-style.subnavbar.categories a').single('click', function () {
$('.page[data-page=edit-chart-style]').find('.list-block.inputs-list').removeClass('inputs-list');
@ -206,6 +209,104 @@ define([
}
},
showStyle: function () {
var me = this;
var page = '#edit-chart-style';
this.showPage(page, true);
this.paletteFillColor = new Common.UI.ThemeColorPalette({
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-fill-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-fill-color').single('click', _.bind(this.showCustomFillColor, this));
Common.Utils.addScrollIfNeed('.page[data-page=edit-chart-style]', '.page[data-page=edit-chart-style] .page-content');
this.fireEvent('page:show', [this, page]);
},
showCustomFillColor: function () {
var me = this,
selector = '#edit-chart-custom-color-view';
me.showPage(selector, true);
me.customFillColorPicker = new Common.UI.HsbColorPicker({
el: $('.page[data-page=edit-chart-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]);
},
showBorderColor: function () {
var me = this;
var selector = '#edit-chart-border-color-view';
this.showPage(selector, true);
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]);
},
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);
SSE.getController('EditContainer').rootView.router.back();
});
me.fireEvent('page:show', [me, selector]);
},
onItemClick: function (e) {
var $target = $(e.currentTarget),
page = $target.data('page');
@ -266,7 +367,9 @@ define([
textLabelPos: 'Label Position',
textAxisPosition: 'Axis Position',
textNone: 'None',
textGridlines: 'Gridlines'
textGridlines: 'Gridlines',
textAddCustomColor: 'Add Custom Color',
textCustomColor: 'Custom Color'
}
})(), SSE.Views.EditChart || {}))
});

124
apps/spreadsheeteditor/mobile/app/view/edit/EditShape.js
View file

@ -43,7 +43,9 @@ define([
'text!spreadsheeteditor/mobile/app/template/EditShape.template',
'jquery',
'underscore',
'backbone'
'backbone',
'common/mobile/lib/component/ThemeColorPalette',
'common/mobile/lib/component/HsbColorPicker'
], function (editTemplate, $, _, Backbone) {
'use strict';
@ -61,17 +63,18 @@ define([
initialize: function () {
Common.NotificationCenter.on('editcontainer:show', _.bind(this.initEvents, this));
Common.NotificationCenter.on('editcategory:show', _.bind(this.categoryShow, this));
this.on('page:show', _.bind(this.updateItemHandlers, this));
//this.on('page:show', _.bind(this.updateItemHandlers, this));
this.isShapeCanFill = true;
},
initEvents: function () {
var me = this;
me.updateItemHandlers();
$('.edit-shape-style .categories a').single('click', _.bind(me.showStyleCategory, me));
Common.Utils.addScrollIfNeed('#edit-shape .pages', '#edit-shape .page');
me.updateItemHandlers();
me.initControls();
},
@ -121,6 +124,8 @@ define([
Common.Utils.addScrollIfNeed('.page[data-page=edit-shape-border-color-view]', '.page[data-page=edit-shape-border-color-view] .page-content');
$(selectorsDynamicPage).single('click', _.bind(this.onItemClick, this));
$('#shape-style').single('click', _.bind(this.showStyle, this));
$('#edit-shape-bordercolor').single('click', _.bind(this.showBorderColor, this));
},
showPage: function (templateId, suspendEvent) {
@ -146,6 +151,111 @@ define([
}
},
showStyle: function () {
var me = this;
var page = '#edit-shape-style';
if (!this.isShapeCanFill) {
page = '#edit-shape-style-nofill';
}
this.showPage(page, true);
this.paletteFillColor = new Common.UI.ThemeColorPalette({
el: $('#tab-shape-fill'),
transparent: true
});
this.paletteFillColor.on('customcolor', function () {
me.showCustomFillColor();
});
var template = _.template(['<div class="list-block">',
'<ul>',
'<li>',
'<a id="edit-cell-add-custom-fill-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-shape-fill').append(template({scope: this}));
$('#edit-cell-add-custom-fill-color').single('click', _.bind(this.showCustomFillColor, this));
if (!this.isShapeCanFill)
this.showStyleCategory();
Common.Utils.addScrollIfNeed('.page[data-page=edit-shape-style]', '.page[data-page=edit-shape-style] .page-content');
this.fireEvent('page:show', [this, page]);
},
showCustomFillColor: function () {
var me = this,
selector = '#edit-shape-custom-color-view';
me.showPage(selector, true);
me.customFillColorPicker = new Common.UI.HsbColorPicker({
el: $('.page[data-page=edit-shape-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]);
},
showBorderColor: function () {
var me = this;
var selector = '#edit-shape-border-color-view';
this.showPage(selector, true);
this.paletteBorderColor = new Common.UI.ThemeColorPalette({
el: $('.page[data-page=edit-shape-border-color-view] .page-content')
});
this.paletteBorderColor.on('customcolor', function () {
me.showCustomBorderColor();
});
var template = _.template(['<div class="list-block">',
'<ul>',
'<li>',
'<a id="edit-shape-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-shape-border-color-view] .page-content').append(template({scope: this}));
$('#edit-shape-add-custom-border-color').single('click', _.bind(this.showCustomBorderColor, this));
this.fireEvent('page:show', [this, selector]);
},
showCustomBorderColor: function () {
var me = this,
selector = '#edit-shape-custom-color-view';
me.showPage(selector, true);
me.customBorderColorPicker = new Common.UI.HsbColorPicker({
el: $('.page[data-page=edit-shape-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);
SSE.getController('EditContainer').rootView.router.back();
});
me.fireEvent('page:show', [me, selector]);
},
showStyleCategory: function (e) {
// remove android specific style
$('.page[data-page=edit-shape-style] .list-block.inputs-list').removeClass('inputs-list');
@ -156,13 +266,9 @@ define([
page = $target.data('page');
if (page && page.length > 0 ) {
if (page == '#edit-shape-style' && !this.isShapeCanFill)
page = '#edit-shape-style-nofill';
this.showPage(page);
if (!this.isShapeCanFill)
this.showStyleCategory();
}
Common.Utils.addScrollIfNeed('.page[data-page=edit-shape-style]', '.page[data-page=edit-shape-style] .page-content');
@ -184,7 +290,9 @@ define([
textEffects: 'Effects',
textSize: 'Size',
textColor: 'Color',
textOpacity: 'Opacity'
textOpacity: 'Opacity',
textAddCustomColor: 'Add Custom Color',
textCustomColor: 'Custom Color'
}
})(), SSE.Views.EditShape || {}))
});

59
apps/spreadsheeteditor/mobile/app/view/edit/EditText.js
View file

@ -44,7 +44,9 @@ define([
'text!spreadsheeteditor/mobile/app/template/EditText.template',
'jquery',
'underscore',
'backbone'
'backbone',
'common/mobile/lib/component/ThemeColorPalette',
'common/mobile/lib/component/HsbColorPicker'
], function (editTemplate, $, _, Backbone) {
'use strict';
@ -62,7 +64,6 @@ define([
initialize: function () {
Common.NotificationCenter.on('editcontainer:show', _.bind(this.initEvents, this));
Common.NotificationCenter.on('fonts:load', _.bind(this.onApiFontsLoad, this));
this.on('page:show', _.bind(this.updateItemHandlers, this));
},
initEvents: function () {
@ -105,6 +106,7 @@ define([
}).join(', ');
$(selectorsDynamicPage).single('click', _.bind(this.onItemClick, this));
$('#font-color').single('click', _.bind(this.showFontColor, this));
},
showPage: function (templateId, suspendEvent) {
@ -130,6 +132,55 @@ define([
}
},
showFontColor: function () {
var me = this;
var page = '#edit-text-color';
this.showPage(page, true);
this.paletteTextColor = new Common.UI.ThemeColorPalette({
el: $('.page[data-page=edit-text-color] .page-content'),
transparent: true
});
this.paletteTextColor.on('customcolor', function () {
me.showCustomFillColor();
});
var template = _.template(['<div class="list-block">',
'<ul>',
'<li>',
'<a id="edit-text-add-custom-fill-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-text-add-custom-fill-color').single('click', _.bind(this.showCustomTextColor, this));
Common.Utils.addScrollIfNeed('.page[data-page=edit-text]', '.page[data-page=edit-text] .page-content');
this.fireEvent('page:show', [this, page]);
},
showCustomTextColor: function () {
var me = this,
selector = '#edit-text-custom-color-view';
me.showPage(selector, true);
me.customTextColorPicker = new Common.UI.HsbColorPicker({
el: $('.page[data-page=edit-text-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]);
},
renderFonts: function () {
var me = this,
$template = $(
@ -180,7 +231,9 @@ define([
textSize: 'Size',
textCharacterBold: 'B',
textCharacterItalic: 'I',
textCharacterUnderline: 'U'
textCharacterUnderline: 'U',
textAddCustomColor: 'Add Custom Color',
textCustomColor: 'Custom Color'
}
})(), SSE.Views.EditText || {}))
});