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

[PE mobile] Custom Color

Browse source
This commit is contained in:
Julia Svinareva 2019-10-11 15:55:06 +03:00
parent 8558e8407a
commit 909077f97c
10 changed files with 403 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -302,3 +302,19 @@
</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/presentationeditor/mobile/app/template/EditShape.template
View file

@ -379,3 +379,19 @@
</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>

16
apps/presentationeditor/mobile/app/template/EditSlide.template
View file

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

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

@ -473,3 +473,19 @@
</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>

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

@ -407,3 +407,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>

83
apps/presentationeditor/mobile/app/view/edit/EditChart.js
View file

@ -45,7 +45,9 @@ define([
'text!presentationeditor/mobile/app/template/EditChart.template',
'jquery',
'underscore',
'backbone'
'backbone',
'common/mobile/lib/component/ThemeColorPalette',
'common/mobile/lib/component/HsbColorPicker'
], function (editTemplate, $, _, Backbone) {
'use strict';
@ -220,6 +222,7 @@ define([
},
showStyle: function () {
var me = this;
var selector = '#edit-chart-style';
this.showPage(selector, true);
@ -227,16 +230,52 @@ 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]);
},
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);
PE.getController('EditContainer').rootView.router.back();
});
me.fireEvent('page:show', [me, selector]);
},
showReorder: function () {
this.showPage('#edit-chart-reorder');
Common.Utils.addScrollIfNeed('.page.chart-reorder', '.page.chart-reorder .page-content');
},
showBorderColor: function () {
var me = this;
var selector = '#edit-chart-border-color-view';
this.showPage(selector, true);
@ -244,9 +283,47 @@ define([
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);
PE.getController('EditContainer').rootView.router.back();
});
me.fireEvent('page:show', [me, selector]);
},
showAlign: function () {
this.showPage('#edit-chart-align');
Common.Utils.addScrollIfNeed('.page.chart-align', '.page.chart-align .page-content');
@ -273,7 +350,9 @@ define([
textAlignBottom: 'Align Bottom',
textAlignMiddle: 'Align Middle',
txtDistribHor: 'Distribute Horizontally',
txtDistribVert: 'Distribute Vertically'
txtDistribVert: 'Distribute Vertically',
textAddCustomColor: 'Add Custom Color',
textCustomColor: 'Custom Color'
}
})(), PE.Views.EditChart || {}))
});

82
apps/presentationeditor/mobile/app/view/edit/EditShape.js
View file

@ -44,7 +44,9 @@ define([
'text!presentationeditor/mobile/app/template/EditShape.template',
'jquery',
'underscore',
'backbone'
'backbone',
'common/mobile/lib/component/ThemeColorPalette',
'common/mobile/lib/component/HsbColorPicker'
], function (editTemplate, $, _, Backbone) {
'use strict';
@ -144,6 +146,7 @@ define([
},
showStyle: function () {
var me = this;
var selector = this.isShapeCanFill ? '#edit-shape-style' : '#edit-shape-style-nofill';
this.showPage(selector, true);
@ -154,11 +157,46 @@ define([
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-shape-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-shape-fill').append(template({scope: this}));
$('#edit-shape-add-custom-color').single('click', _.bind(this.showCustomFillColor, this));
Common.Utils.addScrollIfNeed('.page[data-page=edit-shape-style]', '.page[data-page=edit-shape-style] .page-content');
this.fireEvent('page:show', [this, selector]);
},
showCustomFillColor: function () {
var me = this,
selector = '#edit-shape-custom-color-view';
me.showPage(selector, true);
me.customColorPicker = new Common.UI.HsbColorPicker({
el: $('.page[data-page=edit-shape-custom-color] .page-content'),
color: me.paletteFillColor.currentColor
});
me.customColorPicker.on('addcustomcolor', function (colorPicker, color) {
me.paletteFillColor.addNewDynamicColor(colorPicker, color);
PE.getController('EditContainer').rootView.router.back();
});
me.fireEvent('page:show', [me, selector]);
},
showReplace: function () {
this.showPage('#edit-shape-replace');
Common.Utils.addScrollIfNeed('.page.shape-replace', '.page.shape-replace .page-content');
@ -175,16 +213,54 @@ define([
},
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] .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] .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);
PE.getController('EditContainer').rootView.router.back();
});
me.fireEvent('page:show', [me, selector]);
},
textStyle: 'Style',
textReplace: 'Replace',
textReorder: 'Reorder',
@ -208,7 +284,9 @@ define([
textAlignBottom: 'Align Bottom',
textAlignMiddle: 'Align Middle',
txtDistribHor: 'Distribute Horizontally',
txtDistribVert: 'Distribute Vertically'
txtDistribVert: 'Distribute Vertically',
textAddCustomColor: 'Add Custom Color',
textCustomColor: 'Custom Color'
}
})(), PE.Views.EditShape || {}))
});

44
apps/presentationeditor/mobile/app/view/edit/EditSlide.js
View file

@ -44,7 +44,9 @@ define([
'text!presentationeditor/mobile/app/template/EditSlide.template',
'jquery',
'underscore',
'backbone'
'backbone',
'common/mobile/lib/component/ThemeColorPalette',
'common/mobile/lib/component/HsbColorPicker'
], function (editTemplate, $, _, Backbone) {
'use strict';
@ -173,16 +175,52 @@ define([
},
showStyle: function () {
var me = this;
this.showPage('#edit-slide-style', true);
this.paletteFillColor = new Common.UI.ThemeColorPalette({
el: $('.page[data-page=edit-slide-style] .page-content'),
transparent: true
});
this.paletteFillColor.on('customcolor', function () {
me.showCustomSlideColor();
});
var template = _.template(['<div class="list-block">',
'<ul>',
'<li>',
'<a id="edit-slide-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-slide-style] .page-content').append(template({scope: this}));
$('#edit-slide-add-custom-color').single('click', _.bind(this.showCustomSlideColor, this));
this.fireEvent('page:show', [this, '#edit-slide-style']);
},
showCustomSlideColor: function () {
var me = this,
selector = '#edit-slide-custom-color-view';
me.showPage(selector, true);
me.customColorPicker = new Common.UI.HsbColorPicker({
el: $('.page[data-page=edit-slide-custom-color] .page-content'),
color: me.paletteFillColor.currentColor
});
me.customColorPicker.on('addcustomcolor', function (colorPicker, color) {
me.paletteFillColor.addNewDynamicColor(colorPicker, color);
PE.getController('EditContainer').rootView.router.back();
});
me.fireEvent('page:show', [me, selector]);
},
showLayout: function () {
this.showPage('#edit-slide-layout', true);
@ -397,7 +435,9 @@ define([
textZoomRotate: 'Zoom and Rotate',
textStartOnClick: 'Start On Click',
textDelay: 'Delay',
textApplyAll: 'Apply to All Slides'
textApplyAll: 'Apply to All Slides',
textAddCustomColor: 'Add Custom Color',
textCustomColor: 'Custom Color'
}
})(), PE.Views.EditSlide || {}))
});

81
apps/presentationeditor/mobile/app/view/edit/EditTable.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';
@ -193,26 +194,100 @@ 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']);
},
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);
PE.getController('EditContainer').rootView.router.back();
});
me.fireEvent('page:show', [me, selector]);
},
showBorderColor: function () {
var me = this;
this.showPage('#edit-table-border-color-view', true);
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']);
},
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);
PE.getController('EditContainer').rootView.router.back();
});
me.fireEvent('page:show', [me, selector]);
},
showTableStyleOptions: function () {
this.showPage('#edit-table-style-options-view');
},
@ -257,7 +332,9 @@ define([
textAlignBottom: 'Align Bottom',
textAlignMiddle: 'Align Middle',
txtDistribHor: 'Distribute Horizontally',
txtDistribVert: 'Distribute Vertically'
txtDistribVert: 'Distribute Vertically',
textAddCustomColor: 'Add Custom Color',
textCustomColor: 'Custom Color'
}
})(), PE.Views.EditTable || {}))
});

43
apps/presentationeditor/mobile/app/view/edit/EditText.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';
@ -196,16 +197,52 @@ define([
},
showFontColor: function () {
var me = this;
this.showPage('#edit-text-color', true);
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);
PE.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');
@ -249,7 +286,9 @@ define([
textCharacterBold: 'B',
textCharacterItalic: 'I',
textCharacterUnderline: 'U',
textCharacterStrikethrough: 'S'
textCharacterStrikethrough: 'S',
textAddCustomColor: 'Add Custom Color',
textCustomColor: 'Custom Color'
}
})(), PE.Views.EditText || {}))
});