[Common mobile] Custom Color

apps/common/mobile/lib/component/HsbColorPicker.js

@@ -57,19 +57,19 @@ define([
         },
         template: _.template([
             '<div class="custom-colors">',
-                '<div class="list-block" style="margin-bottom: 10px;">',
+                '<div style="padding: 10px 15px; display: flex; justify-content: space-between; height: 30px;">',
-                    '<ul>',
+                    '<div class="color-preview" style=""></div>',
-                    '<li>',
+                    '<% if (android) { %>',
-                        '<a id="add-new-color" class="item-link">',
+                        '<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>',
-                            '<div class="item-content">',
+                    '<% } else { %>',
-                                '<div class="item-inner">',
+                        '<div class="list-block" style="width: 100%;margin: 0 0 0 20px;">',
-                                    '<div class="item-title"><%= scope.textAddNewColor %></div>',
+                        '<ul>',
-                                    '<div class="item-after"><div class="color-preview"></div></div>',
+                            '<li>',
-                                '</div>',
+                                '<a href="#" class="list-button item-link" id="add-new-color" style="line-height: 28px;"><%= scope.textAddNewColor %></a>',
-                            '</div>',
+                            '</li>',
-                        '</a>',
+                        '</ul>',
-                    '</li>',
+                        '</div>',
-                    '<ul>',
+                    '<% } %>',
                 '</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();

apps/common/mobile/lib/component/ThemeColorPalette.js

@@ -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>';

apps/common/mobile/resources/less/ios/_color-palette.less

@@ -43,9 +43,15 @@
 }
 
 .custom-colors {
-  .item-link .item-inner {
+  .color-preview {
-    background-image: none;
+    width: 75px;
-    padding-right: 15px;
+    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;

apps/common/mobile/resources/less/material/_color-palette.less

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

apps/documenteditor/mobile/app/view/edit/EditShape.js

@@ -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>',

apps/documenteditor/mobile/resources/css/app-ios.css

@@ -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 {
+.custom-colors .color-preview {
-  background-image: none;
+  width: 75px;
-  padding-right: 15px;
+  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;

apps/documenteditor/mobile/resources/css/app-material.css

@@ -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 {
+.custom-colors .color-preview {
-  background-image: none;
+  width: 75px;
-  padding-right: 15px;
+  border: 1px solid rgba(0, 0, 0, 0.3);
 }
 .custom-colors .color-picker-wheel {
   position: relative;

apps/presentationeditor/mobile/resources/css/app-ios.css

@@ -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 {
+.custom-colors .color-preview {
-  background-image: none;
+  width: 75px;
-  padding-right: 15px;
+  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;

apps/presentationeditor/mobile/resources/css/app-material.css

@@ -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 {
+.custom-colors .color-preview {
-  background-image: none;
+  width: 75px;
-  padding-right: 15px;
+  border: 1px solid rgba(0, 0, 0, 0.3);
 }
 .custom-colors .color-picker-wheel {
   position: relative;

apps/spreadsheeteditor/mobile/resources/css/app-ios.css

@@ -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 {
+.custom-colors .color-preview {
-  background-image: none;
+  width: 75px;
-  padding-right: 15px;
+  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;

apps/spreadsheeteditor/mobile/resources/css/app-material.css

@@ -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 {
+.custom-colors .color-preview {
-  background-image: none;
+  width: 75px;
-  padding-right: 15px;
+  border: 1px solid rgba(0, 0, 0, 0.3);
 }
 .custom-colors .color-picker-wheel {
   position: relative;