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

[rtl] Make theme color palette

Browse source
This commit is contained in:
JuliaSvinareva 2022-10-13 18:23:01 +03:00
parent aa629fb043
commit aebe1872f8
4 changed files with 76 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
apps/common/main/lib/component/ColorButton.js
View file

@ -91,7 +91,7 @@ define([
auto.push({
id: id + '-color-auto',
caption: (typeof options.auto == 'object') ? options.auto.caption || this.textAutoColor : this.textAutoColor,
template: _.template('<a tabindex="-1" type="menuitem"><span class="menu-item-icon color-auto" style="background-image: none; width: 12px; height: 12px; margin: 1px 7px 0 1px; background-color: #' + this.autocolor + ';"></span><%= caption %></a>')
template: _.template('<a tabindex="-1" type="menuitem"><span class="menu-item-icon color-auto" style="background-color: #' + this.autocolor + ';"></span><%= caption %></a>')
});
auto.push({caption: '--'});
}

16
apps/common/main/lib/component/ThemeColorPalette.js
View file

@ -64,11 +64,11 @@ define([
template :
_.template(
'<div style="padding: 4px 0 0 12px;">' +
'<div class="palette-inner">' +
'<% var me = this; var idx = 0; %>' +
'<% $(colors).each(function(num, item) { %>' +
'<% if (me.isBlankSeparator(item)) { %> <div class="palette-color-spacer" style="width:100%;height:8px;float:left;"></div>' +
'<% } else if (me.isSeparator(item)) { %> </div><div class="divider" style="width:100%;float:left;"></div><div style="padding: 12px;">' +
'<% if (me.isBlankSeparator(item)) { %> <div class="palette-color-spacer"></div>' +
'<% } else if (me.isSeparator(item)) { %> </div><div class="divider"></div><div style="padding: 12px;">' +
'<% } else if (me.isColor(item)) { %> ' +
'<a class="palette-color color-<%=item%>" style="background:#<%=item%>" idx="<%=idx++%>">' +
'<em><span style="background:#<%=item%>;" unselectable="on">&#160;</span></em>' +
@ -79,20 +79,20 @@ define([
'</a>' +
'<% } else if (me.isEffect(item)) { %>' +
'<% if (idx>0 && me.columns>0 && idx%me.columns===0) { %> ' +
'<div style="width:100%;height:0;float:left;"></div>' +
'<div class="color-divider"></div>' +
'<% } %>' +
'<a effectid="<%=item.effectId%>" effectvalue="<%=item.effectValue%>" class="palette-color-effect color-<%=item.color%>" style="background:#<%=item.color%>" idx="<%=idx++%>">' +
'<em><span style="background:#<%=item.color%>;" unselectable="on">&#160;</span></em>' +
'</a>' +
'<% } else if (me.isCaption(item)) { %>' +
'<div class="palette-color-caption" style="width:100%;float:left;font-size: 11px;"><%=item%></div>' +
'<div class="palette-color-caption"><%=item%></div>' +
'<% } %>' +
'<% }); %>' +
'</div>' +
'<% if (me.options.dynamiccolors!==undefined) { %>' +
'<div class="palette-color-dynamiccolors" style="padding: 4px 0 0 12px">' +
'<div class="palette-color-spacer" style="width:100%;height:8px;float:left;"></div>' +
'<div class="palette-color-caption" style="width:100%;float:left;font-size: 11px;"><%=me.textRecentColors%></div>' +
'<div class="palette-color-dynamiccolors">' +
'<div class="palette-color-spacer"></div>' +
'<div class="palette-color-caption"><%=me.textRecentColors%></div>' +
'<% for (var i=0; i<me.options.dynamiccolors; i++) { %>' +
'<a class="color-dynamic-<%=i%> dynamic-empty-color <%= me.emptyColorsClass %>" color="" idx="<%=idx++%>">' +
'<em><span unselectable="on">&#160;</span></em></a>' +

25
apps/common/main/resources/less/buttons.less
View file

@ -721,13 +721,26 @@
// for color button auto color
.dropdown-menu {
li > a.selected,
li > a:hover {
li > a {
span.color-auto {
outline: @scaled-one-px-value-ie solid @icon-normal-ie;
outline: @scaled-one-px-value solid @icon-normal;
border: @scaled-one-px-value-ie solid @background-normal-ie;
border: @scaled-one-px-value solid @background-normal;
background-image: none;
width: 12px;
height: 12px;
margin: 1px 7px 0 1px;
.rtl & {
margin: 1px 1px 0 7px;
}
}
&.selected,
&:hover {
span.color-auto {
outline: @scaled-one-px-value-ie solid @icon-normal-ie;
outline: @scaled-one-px-value solid @icon-normal;
border: @scaled-one-px-value-ie solid @background-normal-ie;
border: @scaled-one-px-value solid @background-normal;
}
}
}
}

48
apps/common/main/resources/less/theme-colorpalette.less
View file

@ -32,6 +32,10 @@
outline: 0 none;
cursor: pointer;
.rtl & {
float: right;
}
em span {
border: @scaled-one-px-value-ie solid @border-color-shading-ie;
border: @scaled-one-px-value solid @border-color-shading;
@ -65,5 +69,49 @@
border:solid @scaled-one-px-value @border-color-shading;
}
}
.palette-inner {
padding: 4px 0 0 12px;
.rtl & {
padding: 4px 12px 0 0;
}
}
.palette-color-caption {
width:100%;
float:left;
font-size: 11px;
.rtl & {
float: right;
text-align: right;
}
}
.palette-color-spacer {
width: 100%;
height: 8px;
float: left;
.rtl & {
float: right;
}
}
.palette-color-dynamiccolors {
padding: 4px 0 0 12px;
.rtl & {
padding: 4px 12px 0 0;
}
}
.divider {
width: 100%;
float: left;
}
.color-divider {
width:100%;
height:0;
float:left;
}
}