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

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

@@ -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});
 
         },
 

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

@@ -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));
         },
 

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

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

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

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

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

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

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

@@ -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);
 }

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

@@ -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);
 }

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

@@ -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);
 }

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

@@ -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);
 }

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

@@ -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);
 }

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

@@ -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);
 }