[SSE] Custom Color

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

@@ -254,6 +254,7 @@ define([
             },
 
             showBorderColor: function () {
+                var me = this;
                 var selector = '#edit-chart-border-color-view';
                 this.showPage(selector, true);
 

apps/spreadsheeteditor/mobile/app/controller/edit/EditChart.js

@@ -204,10 +204,7 @@ define([
 
                 // Fill
 
-                var paletteFillColor = new Common.UI.ThemeColorPalette({
+                var paletteFillColor = this.getView('EditChart').paletteFillColor;
-                    el: $('#tab-chart-fill'),
-                    transparent: true
-                });
 
                 paletteFillColor.on('select', _.bind(me.onFillColor, me));
 
@@ -533,9 +530,7 @@ define([
 
             initBorderColorPage: function () {
                 var me = this,
-                    palette = new Common.UI.ThemeColorPalette({
+                    palette = me.getView('EditChart').paletteBorderColor;
-                        el: $('.page[data-page=edit-chart-border-color] .page-content')
-                    });
 
                 if (palette) {
                     palette.select(_borderInfo.color);

apps/spreadsheeteditor/mobile/app/controller/edit/EditShape.js

@@ -161,11 +161,7 @@ define([
 
                 // Fill
 
-                var paletteFillColor = new Common.UI.ThemeColorPalette({
+                var paletteFillColor = me.getView('EditShape').paletteFillColor;
-                    el: $('#tab-shape-fill'),
-                    transparent: true
-                });
-
                 paletteFillColor.on('select', _.bind(me.onFillColor, me));
 
                 var fill = shapeProperties.asc_getFill(),
@@ -223,9 +219,7 @@ define([
 
             initBorderColorPage: function () {
                 var me = this,
-                    palette = new Common.UI.ThemeColorPalette({
+                    palette = me.getView('EditShape').paletteBorderColor;
-                        el: $('.page[data-page=edit-shape-border-color-view] .page-content')
-                    });
 
                 if (palette) {
                     palette.select(_borderInfo.color);

apps/spreadsheeteditor/mobile/app/controller/edit/EditText.js

@@ -197,9 +197,7 @@ define([
             initTextColorPage: function () {
                 var me = this,
                     color = me._sdkToThemeColor(_fontInfo.color),
-                    palette = new Common.UI.ThemeColorPalette({
+                    palette = me.getView('EditText').paletteTextColor;
-                        el: $('.page[data-page=edit-text-color] .page-content')
-                    });
 
                 if (palette) {
                     palette.select(color);

apps/spreadsheeteditor/mobile/app/template/EditChart.template

@@ -623,4 +623,20 @@
             </div>
         </div>
     </div>
+</div>
+
+<!-- Custom color view -->
+<div id="edit-chart-custom-color-view">
+    <div class="navbar">
+        <div class="navbar-inner" data-page="edit-chart-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-chart-custom-color">
+        <div class="page-content">
+            <!--Color HSB palette-->
+        </div>
+    </div>
 </div>

apps/spreadsheeteditor/mobile/app/template/EditShape.template

@@ -266,4 +266,20 @@
             <!--Color palette-->
         </div>
     </div>
+</div>
+
+<!-- Custom color view -->
+<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="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-shape-custom-color">
+        <div class="page-content">
+            <!--Color HSB palette-->
+        </div>
+    </div>
 </div>

apps/spreadsheeteditor/mobile/app/template/EditText.template

@@ -117,3 +117,20 @@
         </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/spreadsheeteditor/mobile/app/view/edit/EditChart.js

@@ -45,7 +45,8 @@ define([
     'jquery',
     'underscore',
     'backbone',
-    'common/mobile/lib/component/ThemeColorPalette'
+    'common/mobile/lib/component/ThemeColorPalette',
+    'common/mobile/lib/component/HsbColorPicker'
 ], function (editTemplate, $, _, Backbone) {
     'use strict';
 
@@ -179,6 +180,8 @@ define([
                 }).join(', ');
 
                 $(selectorsDynamicPage).single('click', _.bind(this.onItemClick, this));
+                $('#chart-style').single('click', _.bind(this.showStyle, this));
+                $('#edit-chart-bordercolor').single('click', _.bind(this.showBorderColor, this));
 
                 $('.edit-chart-style.subnavbar.categories a').single('click', function () {
                     $('.page[data-page=edit-chart-style]').find('.list-block.inputs-list').removeClass('inputs-list');
@@ -206,6 +209,104 @@ define([
                 }
             },
 
+            showStyle: function () {
+                var me = this;
+                var page = '#edit-chart-style';
+                this.showPage(page, true);
+
+                this.paletteFillColor = new Common.UI.ThemeColorPalette({
+                    el: $('#tab-chart-fill'),
+                    transparent: true
+                });
+                this.paletteFillColor.on('customcolor', function () {
+                    me.showCustomFillColor();
+                });
+                var template = _.template(['<div class="list-block">',
+                    '<ul>',
+                    '<li>',
+                    '<a id="edit-chart-add-custom-fill-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(''));
+                $('#tab-chart-fill').append(template({scope: this}));
+                $('#edit-chart-add-custom-fill-color').single('click', _.bind(this.showCustomFillColor, this));
+
+                Common.Utils.addScrollIfNeed('.page[data-page=edit-chart-style]', '.page[data-page=edit-chart-style] .page-content');
+                this.fireEvent('page:show', [this, page]);
+            },
+
+            showCustomFillColor: function () {
+                var me = this,
+                    selector = '#edit-chart-custom-color-view';
+                me.showPage(selector, true);
+
+                me.customFillColorPicker = new Common.UI.HsbColorPicker({
+                    el: $('.page[data-page=edit-chart-custom-color] .page-content'),
+                    color: me.paletteFillColor.currentColor
+                });
+                me.customFillColorPicker.on('addcustomcolor', function (colorPicker, color) {
+                    me.paletteFillColor.addNewDynamicColor(colorPicker, color);
+                    SSE.getController('EditContainer').rootView.router.back();
+                });
+
+                me.fireEvent('page:show', [me, selector]);
+            },
+
+            showBorderColor: function () {
+                var me = this;
+                var selector = '#edit-chart-border-color-view';
+                this.showPage(selector, true);
+
+                this.paletteBorderColor = new Common.UI.ThemeColorPalette({
+                    el: $('.page[data-page=edit-chart-border-color] .page-content')
+                });
+                this.paletteBorderColor.on('customcolor', function () {
+                    me.showCustomBorderColor();
+                });
+                var template = _.template(['<div class="list-block">',
+                    '<ul>',
+                    '<li>',
+                    '<a id="edit-chart-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-chart-border-color] .page-content').append(template({scope: this}));
+                $('#edit-chart-add-custom-border-color').single('click', _.bind(this.showCustomBorderColor, this));
+
+                this.fireEvent('page:show', [this, selector]);
+            },
+
+            showCustomBorderColor: function () {
+                var me = this,
+                    selector = '#edit-chart-custom-color-view';
+                me.showPage(selector, true);
+
+                me.customBorderColorPicker = new Common.UI.HsbColorPicker({
+                    el: $('.page[data-page=edit-chart-custom-color] .page-content'),
+                    color: me.paletteBorderColor.currentColor
+                });
+                me.customBorderColorPicker.on('addcustomcolor', function (colorPicker, color) {
+                    me.paletteBorderColor.addNewDynamicColor(colorPicker, color);
+                    me.paletteFillColor.updateDynamicColors();
+                    me.paletteFillColor.select(me.paletteFillColor.currentColor);
+                    SSE.getController('EditContainer').rootView.router.back();
+                });
+
+                me.fireEvent('page:show', [me, selector]);
+            },
+
             onItemClick: function (e) {
                 var $target = $(e.currentTarget),
                     page = $target.data('page');
@@ -266,7 +367,9 @@ define([
             textLabelPos: 'Label Position',
             textAxisPosition: 'Axis Position',
             textNone: 'None',
-            textGridlines: 'Gridlines'
+            textGridlines: 'Gridlines',
+            textAddCustomColor: 'Add Custom Color',
+            textCustomColor: 'Custom Color'
         }
     })(), SSE.Views.EditChart || {}))
 });

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

@@ -43,7 +43,9 @@ define([
     'text!spreadsheeteditor/mobile/app/template/EditShape.template',
     'jquery',
     'underscore',
-    'backbone'
+    'backbone',
+    'common/mobile/lib/component/ThemeColorPalette',
+    'common/mobile/lib/component/HsbColorPicker'
 ], function (editTemplate, $, _, Backbone) {
     'use strict';
 
@@ -61,17 +63,18 @@ define([
             initialize: function () {
                 Common.NotificationCenter.on('editcontainer:show', _.bind(this.initEvents, this));
                 Common.NotificationCenter.on('editcategory:show',  _.bind(this.categoryShow, this));
-                this.on('page:show', _.bind(this.updateItemHandlers, this));
+                //this.on('page:show', _.bind(this.updateItemHandlers, this));
                 this.isShapeCanFill = true;
             },
 
             initEvents: function () {
                 var me = this;
 
+                me.updateItemHandlers();
+
                 $('.edit-shape-style .categories a').single('click', _.bind(me.showStyleCategory, me));
 
                 Common.Utils.addScrollIfNeed('#edit-shape .pages', '#edit-shape .page');
-                me.updateItemHandlers();
                 me.initControls();
             },
 
@@ -121,6 +124,8 @@ define([
 
                 Common.Utils.addScrollIfNeed('.page[data-page=edit-shape-border-color-view]', '.page[data-page=edit-shape-border-color-view] .page-content');
                 $(selectorsDynamicPage).single('click', _.bind(this.onItemClick, this));
+                $('#shape-style').single('click', _.bind(this.showStyle, this));
+                $('#edit-shape-bordercolor').single('click', _.bind(this.showBorderColor, this));
             },
 
             showPage: function (templateId, suspendEvent) {
@@ -146,6 +151,111 @@ define([
                 }
             },
 
+            showStyle: function () {
+                var me = this;
+                var page = '#edit-shape-style';
+                if (!this.isShapeCanFill) {
+                    page = '#edit-shape-style-nofill';
+                }
+                this.showPage(page, true);
+
+                this.paletteFillColor = new Common.UI.ThemeColorPalette({
+                    el: $('#tab-shape-fill'),
+                    transparent: true
+                });
+                this.paletteFillColor.on('customcolor', function () {
+                    me.showCustomFillColor();
+                });
+                var template = _.template(['<div class="list-block">',
+                    '<ul>',
+                    '<li>',
+                    '<a id="edit-cell-add-custom-fill-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(''));
+                $('#tab-shape-fill').append(template({scope: this}));
+                $('#edit-cell-add-custom-fill-color').single('click', _.bind(this.showCustomFillColor, this));
+
+                if (!this.isShapeCanFill)
+                    this.showStyleCategory();
+
+                Common.Utils.addScrollIfNeed('.page[data-page=edit-shape-style]', '.page[data-page=edit-shape-style] .page-content');
+                this.fireEvent('page:show', [this, page]);
+            },
+
+            showCustomFillColor: function () {
+                var me = this,
+                    selector = '#edit-shape-custom-color-view';
+                me.showPage(selector, true);
+
+                me.customFillColorPicker = new Common.UI.HsbColorPicker({
+                    el: $('.page[data-page=edit-shape-custom-color] .page-content'),
+                    color: me.paletteFillColor.currentColor
+                });
+                me.customFillColorPicker.on('addcustomcolor', function (colorPicker, color) {
+                    me.paletteFillColor.addNewDynamicColor(colorPicker, color);
+                    SSE.getController('EditContainer').rootView.router.back();
+                });
+
+                me.fireEvent('page:show', [me, selector]);
+            },
+
+            showBorderColor: function () {
+                var me = this;
+                var selector = '#edit-shape-border-color-view';
+                this.showPage(selector, true);
+
+                this.paletteBorderColor = new Common.UI.ThemeColorPalette({
+                    el: $('.page[data-page=edit-shape-border-color-view] .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-view] .page-content').append(template({scope: this}));
+                $('#edit-shape-add-custom-border-color').single('click', _.bind(this.showCustomBorderColor, this));
+
+                this.fireEvent('page:show', [this, 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.paletteFillColor.updateDynamicColors();
+                    me.paletteFillColor.select(me.paletteFillColor.currentColor);
+                    SSE.getController('EditContainer').rootView.router.back();
+                });
+
+                me.fireEvent('page:show', [me, selector]);
+            },
+
             showStyleCategory: function (e) {
                 // remove android specific style
                 $('.page[data-page=edit-shape-style] .list-block.inputs-list').removeClass('inputs-list');
@@ -156,13 +266,9 @@ define([
                     page = $target.data('page');
 
                 if (page && page.length > 0 ) {
-                    if (page == '#edit-shape-style' && !this.isShapeCanFill)
-                        page = '#edit-shape-style-nofill';
 
                     this.showPage(page);
 
-                    if (!this.isShapeCanFill)
-                        this.showStyleCategory();
                 }
 
                 Common.Utils.addScrollIfNeed('.page[data-page=edit-shape-style]', '.page[data-page=edit-shape-style] .page-content');
@@ -184,7 +290,9 @@ define([
             textEffects: 'Effects',
             textSize: 'Size',
             textColor: 'Color',
-            textOpacity: 'Opacity'
+            textOpacity: 'Opacity',
+            textAddCustomColor: 'Add Custom Color',
+            textCustomColor: 'Custom Color'
         }
     })(), SSE.Views.EditShape || {}))
 });

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

@@ -44,7 +44,9 @@ define([
     'text!spreadsheeteditor/mobile/app/template/EditText.template',
     'jquery',
     'underscore',
-    'backbone'
+    'backbone',
+    'common/mobile/lib/component/ThemeColorPalette',
+    'common/mobile/lib/component/HsbColorPicker'
 ], function (editTemplate, $, _, Backbone) {
     'use strict';
 
@@ -62,7 +64,6 @@ define([
             initialize: function () {
                 Common.NotificationCenter.on('editcontainer:show', _.bind(this.initEvents, this));
                 Common.NotificationCenter.on('fonts:load', _.bind(this.onApiFontsLoad, this));
-                this.on('page:show', _.bind(this.updateItemHandlers, this));
             },
 
             initEvents: function () {
@@ -105,6 +106,7 @@ define([
                 }).join(', ');
 
                 $(selectorsDynamicPage).single('click', _.bind(this.onItemClick, this));
+                $('#font-color').single('click', _.bind(this.showFontColor, this));
             },
 
             showPage: function (templateId, suspendEvent) {
@@ -130,6 +132,55 @@ define([
                 }
             },
 
+            showFontColor: function () {
+                var me = this;
+                var page = '#edit-text-color';
+                this.showPage(page, true);
+
+                this.paletteTextColor = new Common.UI.ThemeColorPalette({
+                    el: $('.page[data-page=edit-text-color] .page-content'),
+                    transparent: true
+                });
+                this.paletteTextColor.on('customcolor', function () {
+                    me.showCustomFillColor();
+                });
+                var template = _.template(['<div class="list-block">',
+                    '<ul>',
+                    '<li>',
+                    '<a id="edit-text-add-custom-fill-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-color] .page-content').append(template({scope: this}));
+                $('#edit-text-add-custom-fill-color').single('click', _.bind(this.showCustomTextColor, this));
+
+                Common.Utils.addScrollIfNeed('.page[data-page=edit-text]', '.page[data-page=edit-text] .page-content');
+                this.fireEvent('page:show', [this, page]);
+            },
+
+            showCustomTextColor: function () {
+                var me = this,
+                    selector = '#edit-text-custom-color-view';
+                me.showPage(selector, true);
+
+                me.customTextColorPicker = new Common.UI.HsbColorPicker({
+                    el: $('.page[data-page=edit-text-custom-color] .page-content'),
+                    color: me.paletteTextColor.currentColor
+                });
+                me.customTextColorPicker.on('addcustomcolor', function (colorPicker, color) {
+                    me.paletteTextColor.addNewDynamicColor(colorPicker, color);
+                    SSE.getController('EditContainer').rootView.router.back();
+                });
+
+                me.fireEvent('page:show', [me, selector]);
+            },
+
             renderFonts: function () {
                 var me = this,
                     $template = $(
@@ -180,7 +231,9 @@ define([
             textSize: 'Size',
             textCharacterBold: 'B',
             textCharacterItalic: 'I',
-            textCharacterUnderline: 'U'
+            textCharacterUnderline: 'U',
+            textAddCustomColor: 'Add Custom Color',
+            textCustomColor: 'Custom Color'
         }
     })(), SSE.Views.EditText || {}))
 });