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

[Common mobile] Custom Color

Browse source
This commit is contained in:
Julia Svinareva 2019-10-04 15:12:57 +03:00
parent cf14768482
commit 7b11701a7b
11 changed files with 73 additions and 55 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -57,19 +57,19 @@ define([
},
template: _.template([
'<div class="custom-colors">',
'<div class="list-block" style="margin-bottom: 10px;">',
'<ul>',
'<li>',
'<a id="add-new-color" class="item-link">',
'<div class="item-content">',
'<div class="item-inner">',
'<div class="item-title"><%= scope.textAddNewColor %></div>',
'<div class="item-after"><div class="color-preview"></div></div>',
'</div>',
'</div>',
'</a>',
'</li>',
'<ul>',
'<div style="padding: 10px 15px; display: flex; justify-content: space-between; height: 30px;">',
'<div class="color-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 { %>',
'<div class="list-block" style="width: 100%;margin: 0 0 0 20px;">',
'<ul>',
'<li>',
'<a href="#" class="list-button item-link" id="add-new-color" style="line-height: 28px;"><%= scope.textAddNewColor %></a>',
'</li>',
'</ul>',
'</div>',
'<% } %>',
'</div>',
'<div class="color-picker-wheel <% if (phone) { %> phone <% } %>">',
'<svg id="id-wheel" viewBox="0 0 300 300" width="300" height="300"><%=circlesColors%></svg>',
@ -113,7 +113,8 @@ define([
(me.$el || $(me.el)).html(me.template({
circlesColors: circles,
scope: me,
phone: Common.SharedSettings.get('phone')
phone: Common.SharedSettings.get('phone'),
android: Common.SharedSettings.get('android')
}));
this.afterRender();

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

@ -97,7 +97,6 @@ define([
'</div>',
'</div>',
'</li>',
'<% if (dynamicColors.length > 0) {%>',
'<li class="dynamic-colors">',
'<div style="padding: 15px 0 0 15px;"><%= me.textCustomColors %></div>',
'<div class="item-content">',
@ -113,7 +112,6 @@ define([
'</div>',
'</div>',
'</li>',
'<% } %>',
'</ul>',
'</div>'
].join('')),
@ -191,6 +189,8 @@ define([
me.currentColor = {color: color, effectId: effectId};
}
me.trigger('select', me, me.currentColor);
} else {
me.fireEvent('customcolor', me);
}
},
@ -198,10 +198,6 @@ define([
var me = this,
el = $(me.el);
if (color == me.currentColor) {
return;
}
me.currentColor = color;
me.clearSelection();
@ -218,8 +214,9 @@ define([
}
if (/^[a-fA-F0-9]{6}|transparent$/.test(color) || _.indexOf(Common.Utils.ThemeColor.getStandartColors(), color) > -1 || _.indexOf(this.dynamicColors, color) > -1) {
el.find('.color-palette a[data-color=' + color + ']').addClass('active');
el.find('.color-palette a[data-color=' + color + ']').first().addClass('active');
}
}
},
@ -245,16 +242,6 @@ define([
var me = this;
var dynamicColors = Common.localStorage.getItem('asc.'+Common.localStorage.getId()+'.colors.custom');
dynamicColors = dynamicColors ? dynamicColors.toLowerCase().split(',') : [];
if (!this.isDynamicColors) {
var template = _.template(['<li class="dynamic-colors">',
'<div style="padding: 15px 0 0 15px;">' + me.textCustomColors + '</div>',
'<div class="item-content">',
'<div class="item-inner">',
'</div>',
'</div>',
'</li>'].join(''));
$(this.el).find('.color-palette ul').append(template);
}
var templateColors = '';
_.each(dynamicColors, function(color) {
templateColors += '<a data-color="' + color + '" style="background:#' + color + '"></a>';

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

@ -43,9 +43,15 @@
}
.custom-colors {
.item-link .item-inner {
background-image: none;
padding-right: 15px;
.color-preview {
width: 75px;
border: 1px solid rgba(0, 0, 0, 0.3);
}
.list-block ul:before, .list-block ul:after {
content: none;
}
.list-block ul li {
border: 1px solid rgba(0, 0, 0, 0.3);
}
.color-picker-wheel {
position: relative;

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

@ -48,9 +48,9 @@
}
.custom-colors {
.item-link .item-inner {
background-image: none;
padding-right: 15px;
.color-preview {
width: 75px;
border: 1px solid rgba(0, 0, 0, 0.3);
}
.color-picker-wheel {
position: relative;

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

@ -156,6 +156,9 @@ define([
el: $('#tab-shape-fill'),
transparent: true
});
this.paletteFillColor.on('customcolor', function () {
me.showCustomColor();
});
var template = _.template(['<div class="list-block">',
'<ul>',
'<li>',

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

@ -6222,9 +6222,16 @@ 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 .item-link .item-inner {
background-image: none;
padding-right: 15px;
.custom-colors .color-preview {
width: 75px;
border: 1px solid rgba(0, 0, 0, 0.3);
}
.custom-colors .list-block ul:before,
.custom-colors .list-block ul:after {
content: none;
}
.custom-colors .list-block ul li {
border: 1px solid rgba(0, 0, 0, 0.3);
}
.custom-colors .color-picker-wheel {
position: relative;

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

@ -5816,9 +5816,9 @@ html.phone .document-menu .list-block .item-link {
.color-palette.list-block:last-child li:last-child a {
border-radius: 0;
}
.custom-colors .item-link .item-inner {
background-image: none;
padding-right: 15px;
.custom-colors .color-preview {
width: 75px;
border: 1px solid rgba(0, 0, 0, 0.3);
}
.custom-colors .color-picker-wheel {
position: relative;

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

@ -6222,9 +6222,16 @@ 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 .item-link .item-inner {
background-image: none;
padding-right: 15px;
.custom-colors .color-preview {
width: 75px;
border: 1px solid rgba(0, 0, 0, 0.3);
}
.custom-colors .list-block ul:before,
.custom-colors .list-block ul:after {
content: none;
}
.custom-colors .list-block ul li {
border: 1px solid rgba(0, 0, 0, 0.3);
}
.custom-colors .color-picker-wheel {
position: relative;

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

@ -5816,9 +5816,9 @@ html.phone .document-menu .list-block .item-link {
.color-palette.list-block:last-child li:last-child a {
border-radius: 0;
}
.custom-colors .item-link .item-inner {
background-image: none;
padding-right: 15px;
.custom-colors .color-preview {
width: 75px;
border: 1px solid rgba(0, 0, 0, 0.3);
}
.custom-colors .color-picker-wheel {
position: relative;

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

@ -6222,9 +6222,16 @@ 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 .item-link .item-inner {
background-image: none;
padding-right: 15px;
.custom-colors .color-preview {
width: 75px;
border: 1px solid rgba(0, 0, 0, 0.3);
}
.custom-colors .list-block ul:before,
.custom-colors .list-block ul:after {
content: none;
}
.custom-colors .list-block ul li {
border: 1px solid rgba(0, 0, 0, 0.3);
}
.custom-colors .color-picker-wheel {
position: relative;

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

@ -5826,9 +5826,9 @@ html.phone .document-menu .list-block .item-link {
.color-palette.list-block:last-child li:last-child a {
border-radius: 0;
}
.custom-colors .item-link .item-inner {
background-image: none;
padding-right: 15px;
.custom-colors .color-preview {
width: 75px;
border: 1px solid rgba(0, 0, 0, 0.3);
}
.custom-colors .color-picker-wheel {
position: relative;