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

[DE mobile] Custom Color (shape fill, border color)

Browse source
This commit is contained in:
Julia Svinareva 2019-10-07 10:15:35 +03:00
parent 7b11701a7b
commit 3f97b8af79
11 changed files with 48 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -58,7 +58,7 @@ define([
template: _.template([
'<div class="custom-colors">',
'<div style="padding: 10px 15px; display: flex; justify-content: space-between; height: 30px;">',
'<div class="color-preview" style=""></div>',
'<div class="color-hsb-preview" style=""></div>',
'<% if (android) { %>',
'<a href="#" class="button button-fill button-raised" id="add-new-color" style="margin-left: 20px;line-height: 30px;width: 100%;height: 30px;"><%= scope.textAddNewColor %></a>',
'<% } else { %>',
@ -310,7 +310,7 @@ define([
}
var color = this.colorHslToRgb(this.currentHsl[0], this.currentHsl[1], this.currentHsl[2]);
this.currentColor = this.colorRgbToHex(color[0], color[1], color[2]);
$('.color-preview').css({'background-color': this.currentColor});
$('.color-hsb-preview').css({'background-color': this.currentColor});
},

6
apps/common/mobile/lib/component/ThemeColorPalette.js
View file

@ -226,13 +226,9 @@ define([
},
saveDynamicColor: function(color) {
this.isDynamicColors = false;
var key_name = 'asc.'+Common.localStorage.getId()+'.colors.custom';
var colors = Common.localStorage.getItem(key_name);
colors = colors ? colors.split(',') : [];
if (colors.length > 0) {
this.isDynamicColors = true;
}
if (colors.push(color) > this.options.dynamiccolors) colors.shift();
this.dynamicColors = colors;
Common.localStorage.setItem(key_name, colors.join().toUpperCase());
@ -251,7 +247,7 @@ define([
templateColors += '<a data-color="empty" style="background-color: #ffffff;"></a>';
}
}
$('.dynamic-colors .item-inner').html(_.template(templateColors));
$(this.el).find('.dynamic-colors .item-inner').html(_.template(templateColors));
$(this.el).find('.color-palette .dynamic-colors a').on('click', _.bind(this.onColorClick, this));
},

2
apps/common/mobile/resources/less/ios/_color-palette.less
View file

@ -43,7 +43,7 @@
}
.custom-colors {
.color-preview {
.color-hsb-preview {
width: 75px;
border: 1px solid rgba(0, 0, 0, 0.3);
}

2
apps/common/mobile/resources/less/material/_color-palette.less
View file

@ -48,7 +48,7 @@
}
.custom-colors {
.color-preview {
.color-hsb-preview {
width: 75px;
border: 1px solid rgba(0, 0, 0, 0.3);
}

40
apps/documenteditor/mobile/app/view/edit/EditShape.js
View file

@ -157,7 +157,7 @@ define([
transparent: true
});
this.paletteFillColor.on('customcolor', function () {
me.showCustomColor();
me.showCustomFillColor();
});
var template = _.template(['<div class="list-block">',
'<ul>',
@ -173,7 +173,7 @@ define([
'</ul>',
'</div>'].join(''));
$('#tab-shape-fill').append(template({scope: this}));
$('#edit-shape-add-custom-color').single('click', _.bind(this.showCustomColor, this));
$('#edit-shape-add-custom-color').single('click', _.bind(this.showCustomFillColor, this));
Common.Utils.addScrollIfNeed('.page.shape-style', '.page.shape-style .page-content');
this.fireEvent('page:show', [this, selector]);
},
@ -200,11 +200,29 @@ define([
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]);
},
showCustomColor: function() {
showCustomFillColor: function() {
var me = this,
selector = '#edit-shape-custom-color-view';
me.showPage(selector, true);
@ -220,6 +238,22 @@ define([
me.fireEvent('page:show', [me, 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.fireEvent('page:show', [me, selector]);
},
textStyle: 'Style',
textWrap: 'Wrap',
textReplace: 'Replace',

2
apps/documenteditor/mobile/resources/css/app-ios.css
View file

@ -6222,7 +6222,7 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after
.color-palette .dynamic-colors .item-inner {
overflow: visible;
}
.custom-colors .color-preview {
.custom-colors .color-hsb-preview {
width: 75px;
border: 1px solid rgba(0, 0, 0, 0.3);
}

2
apps/documenteditor/mobile/resources/css/app-material.css
View file

@ -5816,7 +5816,7 @@ html.phone .document-menu .list-block .item-link {
.color-palette.list-block:last-child li:last-child a {
border-radius: 0;
}
.custom-colors .color-preview {
.custom-colors .color-hsb-preview {
width: 75px;
border: 1px solid rgba(0, 0, 0, 0.3);
}

2
apps/presentationeditor/mobile/resources/css/app-ios.css
View file

@ -6222,7 +6222,7 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after
.color-palette .dynamic-colors .item-inner {
overflow: visible;
}
.custom-colors .color-preview {
.custom-colors .color-hsb-preview {
width: 75px;
border: 1px solid rgba(0, 0, 0, 0.3);
}

2
apps/presentationeditor/mobile/resources/css/app-material.css
View file

@ -5816,7 +5816,7 @@ html.phone .document-menu .list-block .item-link {
.color-palette.list-block:last-child li:last-child a {
border-radius: 0;
}
.custom-colors .color-preview {
.custom-colors .color-hsb-preview {
width: 75px;
border: 1px solid rgba(0, 0, 0, 0.3);
}

2
apps/spreadsheeteditor/mobile/resources/css/app-ios.css
View file

@ -6222,7 +6222,7 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after
.color-palette .dynamic-colors .item-inner {
overflow: visible;
}
.custom-colors .color-preview {
.custom-colors .color-hsb-preview {
width: 75px;
border: 1px solid rgba(0, 0, 0, 0.3);
}

2
apps/spreadsheeteditor/mobile/resources/css/app-material.css
View file

@ -5826,7 +5826,7 @@ html.phone .document-menu .list-block .item-link {
.color-palette.list-block:last-child li:last-child a {
border-radius: 0;
}
.custom-colors .color-preview {
.custom-colors .color-hsb-preview {
width: 75px;
border: 1px solid rgba(0, 0, 0, 0.3);
}