[DE mobile] Custom Color

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

@@ -56,26 +56,20 @@ define([
             color: '#000000'
         },
         template: _.template([
-            '<div class="custom-colors">',
+            '<div class="custom-colors <% if (phone) { %> phone <% } %>">',
-                '<div style="padding: 10px 15px; display: flex; justify-content: space-between; height: 30px;">',
+                '<div class="color-picker-wheel">',
-                    '<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 <% } %>">',
                     '<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 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',
+        textCustomColors: 'Custom Colors'
-        textAddNewColor: 'Add new color'
     }, Common.UI.HsbColorPicker || {}));
 });

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

@@ -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;
+    width: 72px;
-    border: 1px solid rgba(0, 0, 0, 0.3);
+    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%;

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

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

apps/documenteditor/mobile/app/template/EditShape.template

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

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

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

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

@@ -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;
+  width: 72px;
-  border: 1px solid rgba(0, 0, 0, 0.3);
+  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%;

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

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

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

@@ -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;
+  width: 72px;
-  border: 1px solid rgba(0, 0, 0, 0.3);
+  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%;

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

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

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

@@ -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;
+  width: 72px;
-  border: 1px solid rgba(0, 0, 0, 0.3);
+  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%;

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

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