[DE mobile] Custom Color (text)

apps/documenteditor/mobile/app/template/EditText.template

@@ -408,3 +408,19 @@
         </div>
     </div>
 </div>
+
+<!-- Custom color view -->
+<div id="edit-text-custom-color-view">
+    <div class="navbar">
+        <div class="navbar-inner" data-page="edit-text-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="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>
+    </div>
+    <div class="page" data-page="edit-text-custom-color">
+        <div class="page-content">
+            <!--Color HSB palette-->
+        </div>
+    </div>
+</div>

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

@@ -200,11 +200,46 @@ define([
                 this.paletteTextColor = new Common.UI.ThemeColorPalette({
                     el: $('.page[data-page=edit-text-font-color] .page-content')
                 });
+                this.paletteTextColor.on('customcolor', function () {
+                    me.showCustomFontColor();
+                });
+                var template = _.template(['<div class="list-block">',
+                    '<ul>',
+                    '<li>',
+                    '<a id="edit-text-add-custom-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-text-font-color] .page-content').append(template({scope: this}));
+                $('#edit-text-add-custom-color').single('click', _.bind(this.showCustomFontColor, this));
 
                 Common.Utils.addScrollIfNeed('.page[data-page=edit-text-font-color]', '.page[data-page=edit-text-font-color] .page-content');
                 this.fireEvent('page:show', [this, '#edit-text-color']);
             },
 
+            showCustomFontColor: function () {
+                var me = this,
+                    selector = '#edit-text-custom-color-view';
+                me.showPage(selector, true);
+
+                me.customColorPicker = new Common.UI.HsbColorPicker({
+                    el: $('.page[data-page=edit-text-custom-color] .page-content'),
+                    color: me.paletteTextColor.currentColor
+                });
+                me.customColorPicker.on('addcustomcolor', function (colorPicker, color) {
+                    me.paletteTextColor.addNewDynamicColor(colorPicker, color);
+                    DE.getController('EditContainer').rootView.router.back();
+                });
+
+                me.fireEvent('page:show', [me, selector]);
+            },
+
             showBackgroundColor: function () {
                 this.showPage('#edit-text-background', true);
 
@@ -212,11 +247,46 @@ define([
                     el: $('.page[data-page=edit-text-font-background] .page-content'),
                     transparent: true
                 });
+                this.paletteBackgroundColor.on('customcolor', function () {
+                    me.showCustomBackgroundColor();
+                });
+                var template = _.template(['<div class="list-block">',
+                    '<ul>',
+                    '<li>',
+                    '<a id="edit-text-add-custom-background-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-text-font-background] .page-content').append(template({scope: this}));
+                $('#edit-text-add-custom-background-color').single('click', _.bind(this.showCustomBackgroundColor, this));
 
                 Common.Utils.addScrollIfNeed('.page[data-page=edit-text-font-background]', '.page[data-page=edit-text-font-background] .page-content');
                 this.fireEvent('page:show', [this, '#edit-text-background']);
             },
 
+            showCustomBackgroundColor: function () {
+                var me = this,
+                    selector = '#edit-text-custom-color-view';
+                me.showPage(selector, true);
+
+                me.customBackgroundColorPicker = new Common.UI.HsbColorPicker({
+                    el: $('.page[data-page=edit-text-custom-color] .page-content'),
+                    color: me.paletteBackgroundColor.currentColor
+                });
+                me.customBackgroundColorPicker.on('addcustomcolor', function (colorPicker, color) {
+                    me.paletteBackgroundColor.addNewDynamicColor(colorPicker, color);
+                    DE.getController('EditContainer').rootView.router.back();
+                });
+
+                me.fireEvent('page:show', [me, selector]);
+            },
+
             showAdditional: function () {
                 this.showPage('#edit-text-additional');
                 Common.Utils.addScrollIfNeed('.page[data-page=edit-text-additional]', '.page[data-page=edit-text-additional] .page-content');
@@ -259,7 +329,9 @@ define([
             textCharacterBold: 'B',
             textCharacterItalic: 'I',
             textCharacterUnderline: 'U',
-            textCharacterStrikethrough: 'S'
+            textCharacterStrikethrough: 'S',
+            textAddCustomColor: 'Add Custom Color',
+            textCustomColor: 'Custom Color'
         }
     })(), DE.Views.EditText || {}))
 });