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

[DE mobile] Custom Color

Browse source
This commit is contained in:
Julia Svinareva 2019-10-07 17:42:36 +03:00
parent 3f97b8af79
commit bf25a21455
11 changed files with 399 additions and 73 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -56,27 +56,21 @@ define([
color: '#000000'
},
template: _.template([
'<div class="custom-colors">',
'<div style="padding: 10px 15px; display: flex; justify-content: space-between; height: 30px;">',
'<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 { %>',
'<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 <% } %>">',
'<div class="custom-colors <% if (phone) { %> phone <% } %>">',
'<div class="color-picker-wheel">',
'<svg id="id-wheel" viewBox="0 0 300 300" width="300" height="300"><%=circlesColors%></svg>',
'<div class="color-picker-wheel-handle"></div>',
'<div class="color-picker-sb-spectrum" style="background-color: hsl(0, 100%, 50%)">',
'<div class="color-picker-sb-spectrum-handle"></div>',
'</div>',
'</div>',
'<div class="right-block">',
'<div class="color-hsb-preview">',
'<div class="new-color-hsb-preview" style=""></div>',
'<div class="current-color-hsb-preview" style=""></div>',
'</div>',
'<a href="#" class="button button-round" id="add-new-color"><i class="icon icon-plus" style="height: 30px;width: 30px;"></i></a>',
'</div>',
'</div>'
].join('')),
@ -117,6 +111,8 @@ define([
android: Common.SharedSettings.get('android')
}));
$('.current-color-hsb-preview').css({'background-color': '#' + me.currentColor});
this.afterRender();
return me;
@ -310,7 +306,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-hsb-preview').css({'background-color': this.currentColor});
$('.new-color-hsb-preview').css({'background-color': this.currentColor});
},
@ -324,7 +320,6 @@ define([
}
},
textCustomColors: 'Custom Colors',
textAddNewColor: 'Add new color'
textCustomColors: 'Custom Colors'
}, Common.UI.HsbColorPicker || {}));
});

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

@ -43,9 +43,50 @@
}
.custom-colors {
display: flex;
justify-content: space-around;
align-items: center;
margin: 15px;
&.phone {
max-width: 300px;
margin: 0 auto;
margin-top: 4px;
.button-round {
margin-top: 20px;
}
}
.right-block {
margin-left: 20px;
}
.button-round {
height: 72px;
width: 72px;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
border-radius: 100px;
background-color: #ffffff;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
border-color: transparent;
margin-top: 25px;
&.active-state {
background-color: rgba(0, 0, 0, 0.1);
}
}
.color-hsb-preview {
width: 75px;
border: 1px solid rgba(0, 0, 0, 0.3);
width: 72px;
height: 72px;
border-radius: 100px;
overflow: hidden;
}
.new-color-hsb-preview {
width: 100%;
height: 36px;
}
.current-color-hsb-preview {
width: 100%;
height: 36px;
}
.list-block ul:before, .list-block ul:after {
content: none;
@ -59,11 +100,6 @@
max-width: 100%;
height: auto;
font-size: 0;
margin-left: auto;
margin-right: auto;
&.phone {
width: 210px;
}
svg {
width: 100%;

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

@ -48,8 +48,55 @@
}
.custom-colors {
display: flex;
justify-content: space-around;
align-items: center;
margin: 15px;
&.phone {
max-width: 300px;
margin: 0 auto;
margin-top: 4px;
.button-round {
margin-top: 20px;
}
}
.right-block {
margin-left: 20px;
}
.button-round {
height: 72px;
width: 72px;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
border-radius: 100px;
background-color: @themeColor;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
border-color: transparent;
margin-top: 25px;
&.active-state {
background-color: rgba(0, 0, 0, 0.1);
}
}
.color-hsb-preview {
width: 75px;
width: 72px;
height: 72px;
border-radius: 100px;
overflow: hidden;
}
.new-color-hsb-preview {
width: 100%;
height: 36px;
}
.current-color-hsb-preview {
width: 100%;
height: 36px;
}
.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 {
@ -58,11 +105,6 @@
max-width: 100%;
height: auto;
font-size: 0;
margin-left: auto;
margin-right: auto;
&.phone {
width: 210px;
}
svg {
width: 100%;

2
apps/documenteditor/mobile/app/template/EditShape.template
View file

@ -454,7 +454,7 @@
<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="left sliding back-fill"><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>

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

@ -233,6 +233,7 @@ define([
});
me.customColorPicker.on('addcustomcolor', function (colorPicker, color) {
me.paletteFillColor.addNewDynamicColor(colorPicker, color);
DE.getController('EditContainer').rootView.router.back();
});
me.fireEvent('page:show', [me, selector]);
@ -249,6 +250,9 @@ define([
});
me.customBorderColorPicker.on('addcustomcolor', function (colorPicker, color) {
me.paletteBorderColor.addNewDynamicColor(colorPicker, color);
me.paletteFillColor.updateDynamicColors();
me.paletteFillColor.select(me.paletteFillColor.currentColor);
DE.getController('EditContainer').rootView.router.back();
});
me.fireEvent('page:show', [me, selector]);

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

@ -6222,9 +6222,52 @@ 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 {
display: flex;
justify-content: space-around;
align-items: center;
margin: 15px;
}
.custom-colors.phone {
max-width: 300px;
margin: 0 auto;
margin-top: 4px;
}
.custom-colors.phone .button-round {
margin-top: 20px;
}
.custom-colors .right-block {
margin-left: 20px;
}
.custom-colors .button-round {
height: 72px;
width: 72px;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
border-radius: 100px;
background-color: #ffffff;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
border-color: transparent;
margin-top: 25px;
}
.custom-colors .button-round.active-state {
background-color: rgba(0, 0, 0, 0.1);
}
.custom-colors .color-hsb-preview {
width: 75px;
border: 1px solid rgba(0, 0, 0, 0.3);
width: 72px;
height: 72px;
border-radius: 100px;
overflow: hidden;
}
.custom-colors .new-color-hsb-preview {
width: 100%;
height: 36px;
}
.custom-colors .current-color-hsb-preview {
width: 100%;
height: 36px;
}
.custom-colors .list-block ul:before,
.custom-colors .list-block ul:after {
@ -6239,11 +6282,6 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after
max-width: 100%;
height: auto;
font-size: 0;
margin-left: auto;
margin-right: auto;
}
.custom-colors .color-picker-wheel.phone {
width: 210px;
}
.custom-colors .color-picker-wheel svg {
width: 100%;

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

@ -5816,8 +5816,58 @@ html.phone .document-menu .list-block .item-link {
.color-palette.list-block:last-child li:last-child a {
border-radius: 0;
}
.custom-colors {
display: flex;
justify-content: space-around;
align-items: center;
margin: 15px;
}
.custom-colors.phone {
max-width: 300px;
margin: 0 auto;
margin-top: 4px;
}
.custom-colors.phone .button-round {
margin-top: 20px;
}
.custom-colors .right-block {
margin-left: 20px;
}
.custom-colors .button-round {
height: 72px;
width: 72px;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
border-radius: 100px;
background-color: #446995;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
border-color: transparent;
margin-top: 25px;
}
.custom-colors .button-round.active-state {
background-color: rgba(0, 0, 0, 0.1);
}
.custom-colors .color-hsb-preview {
width: 75px;
width: 72px;
height: 72px;
border-radius: 100px;
overflow: hidden;
}
.custom-colors .new-color-hsb-preview {
width: 100%;
height: 36px;
}
.custom-colors .current-color-hsb-preview {
width: 100%;
height: 36px;
}
.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 {
@ -5826,11 +5876,6 @@ html.phone .document-menu .list-block .item-link {
max-width: 100%;
height: auto;
font-size: 0;
margin-left: auto;
margin-right: auto;
}
.custom-colors .color-picker-wheel.phone {
width: 210px;
}
.custom-colors .color-picker-wheel svg {
width: 100%;

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

@ -6222,9 +6222,52 @@ 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 {
display: flex;
justify-content: space-around;
align-items: center;
margin: 15px;
}
.custom-colors.phone {
max-width: 300px;
margin: 0 auto;
margin-top: 4px;
}
.custom-colors.phone .button-round {
margin-top: 20px;
}
.custom-colors .right-block {
margin-left: 20px;
}
.custom-colors .button-round {
height: 72px;
width: 72px;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
border-radius: 100px;
background-color: #ffffff;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
border-color: transparent;
margin-top: 25px;
}
.custom-colors .button-round.active-state {
background-color: rgba(0, 0, 0, 0.1);
}
.custom-colors .color-hsb-preview {
width: 75px;
border: 1px solid rgba(0, 0, 0, 0.3);
width: 72px;
height: 72px;
border-radius: 100px;
overflow: hidden;
}
.custom-colors .new-color-hsb-preview {
width: 100%;
height: 36px;
}
.custom-colors .current-color-hsb-preview {
width: 100%;
height: 36px;
}
.custom-colors .list-block ul:before,
.custom-colors .list-block ul:after {
@ -6239,11 +6282,6 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after
max-width: 100%;
height: auto;
font-size: 0;
margin-left: auto;
margin-right: auto;
}
.custom-colors .color-picker-wheel.phone {
width: 210px;
}
.custom-colors .color-picker-wheel svg {
width: 100%;

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

@ -5816,8 +5816,58 @@ html.phone .document-menu .list-block .item-link {
.color-palette.list-block:last-child li:last-child a {
border-radius: 0;
}
.custom-colors {
display: flex;
justify-content: space-around;
align-items: center;
margin: 15px;
}
.custom-colors.phone {
max-width: 300px;
margin: 0 auto;
margin-top: 4px;
}
.custom-colors.phone .button-round {
margin-top: 20px;
}
.custom-colors .right-block {
margin-left: 20px;
}
.custom-colors .button-round {
height: 72px;
width: 72px;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
border-radius: 100px;
background-color: #aa5252;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
border-color: transparent;
margin-top: 25px;
}
.custom-colors .button-round.active-state {
background-color: rgba(0, 0, 0, 0.1);
}
.custom-colors .color-hsb-preview {
width: 75px;
width: 72px;
height: 72px;
border-radius: 100px;
overflow: hidden;
}
.custom-colors .new-color-hsb-preview {
width: 100%;
height: 36px;
}
.custom-colors .current-color-hsb-preview {
width: 100%;
height: 36px;
}
.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 {
@ -5826,11 +5876,6 @@ html.phone .document-menu .list-block .item-link {
max-width: 100%;
height: auto;
font-size: 0;
margin-left: auto;
margin-right: auto;
}
.custom-colors .color-picker-wheel.phone {
width: 210px;
}
.custom-colors .color-picker-wheel svg {
width: 100%;

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

@ -6222,9 +6222,52 @@ 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 {
display: flex;
justify-content: space-around;
align-items: center;
margin: 15px;
}
.custom-colors.phone {
max-width: 300px;
margin: 0 auto;
margin-top: 4px;
}
.custom-colors.phone .button-round {
margin-top: 20px;
}
.custom-colors .right-block {
margin-left: 20px;
}
.custom-colors .button-round {
height: 72px;
width: 72px;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
border-radius: 100px;
background-color: #ffffff;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
border-color: transparent;
margin-top: 25px;
}
.custom-colors .button-round.active-state {
background-color: rgba(0, 0, 0, 0.1);
}
.custom-colors .color-hsb-preview {
width: 75px;
border: 1px solid rgba(0, 0, 0, 0.3);
width: 72px;
height: 72px;
border-radius: 100px;
overflow: hidden;
}
.custom-colors .new-color-hsb-preview {
width: 100%;
height: 36px;
}
.custom-colors .current-color-hsb-preview {
width: 100%;
height: 36px;
}
.custom-colors .list-block ul:before,
.custom-colors .list-block ul:after {
@ -6239,11 +6282,6 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after
max-width: 100%;
height: auto;
font-size: 0;
margin-left: auto;
margin-right: auto;
}
.custom-colors .color-picker-wheel.phone {
width: 210px;
}
.custom-colors .color-picker-wheel svg {
width: 100%;

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

@ -5826,8 +5826,58 @@ html.phone .document-menu .list-block .item-link {
.color-palette.list-block:last-child li:last-child a {
border-radius: 0;
}
.custom-colors {
display: flex;
justify-content: space-around;
align-items: center;
margin: 15px;
}
.custom-colors.phone {
max-width: 300px;
margin: 0 auto;
margin-top: 4px;
}
.custom-colors.phone .button-round {
margin-top: 20px;
}
.custom-colors .right-block {
margin-left: 20px;
}
.custom-colors .button-round {
height: 72px;
width: 72px;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
border-radius: 100px;
background-color: #40865c;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
border-color: transparent;
margin-top: 25px;
}
.custom-colors .button-round.active-state {
background-color: rgba(0, 0, 0, 0.1);
}
.custom-colors .color-hsb-preview {
width: 75px;
width: 72px;
height: 72px;
border-radius: 100px;
overflow: hidden;
}
.custom-colors .new-color-hsb-preview {
width: 100%;
height: 36px;
}
.custom-colors .current-color-hsb-preview {
width: 100%;
height: 36px;
}
.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 {
@ -5836,11 +5886,6 @@ html.phone .document-menu .list-block .item-link {
max-width: 100%;
height: auto;
font-size: 0;
margin-left: auto;
margin-right: auto;
}
.custom-colors .color-picker-wheel.phone {
width: 210px;
}
.custom-colors .color-picker-wheel svg {
width: 100%;