[PE mobile] Custom Color

apps/presentationeditor/mobile/app/template/EditChart.template

@@ -302,3 +302,19 @@
         </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/presentationeditor/mobile/app/template/EditShape.template

@@ -379,3 +379,19 @@
         </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/presentationeditor/mobile/app/template/EditSlide.template

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

apps/presentationeditor/mobile/app/template/EditTable.template

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

apps/presentationeditor/mobile/app/template/EditText.template

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

@@ -45,7 +45,9 @@ define([
     'text!presentationeditor/mobile/app/template/EditChart.template',
     'jquery',
     'underscore',
-    'backbone'
+    'backbone',
+    'common/mobile/lib/component/ThemeColorPalette',
+    'common/mobile/lib/component/HsbColorPicker'
 ], function (editTemplate, $, _, Backbone) {
     'use strict';
 
@@ -220,6 +222,7 @@ define([
             },
 
             showStyle: function () {
+                var me = this;
                 var selector = '#edit-chart-style';
                 this.showPage(selector, true);
 
@@ -227,16 +230,52 @@ define([
                     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-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-color').single('click', _.bind(this.showCustomFillColor, this));
 
                 this.fireEvent('page:show', [this, selector]);
             },
 
+            showCustomFillColor: function () {
+                var me = this,
+                    selector = '#edit-chart-custom-color-view';
+                me.showPage(selector, true);
+
+                me.customColorPicker = new Common.UI.HsbColorPicker({
+                    el: $('.page[data-page=edit-chart-custom-color] .page-content'),
+                    color: me.paletteFillColor.currentColor
+                });
+                me.customColorPicker.on('addcustomcolor', function (colorPicker, color) {
+                    me.paletteFillColor.addNewDynamicColor(colorPicker, color);
+                    PE.getController('EditContainer').rootView.router.back();
+                });
+
+                me.fireEvent('page:show', [me, selector]);
+            },
+
             showReorder: function () {
                 this.showPage('#edit-chart-reorder');
                 Common.Utils.addScrollIfNeed('.page.chart-reorder', '.page.chart-reorder .page-content');
             },
 
             showBorderColor: function () {
+                var me = this;
                 var selector = '#edit-chart-border-color-view';
                 this.showPage(selector, true);
 
@@ -244,9 +283,47 @@ define([
                     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);
+                    PE.getController('EditContainer').rootView.router.back();
+                });
+
+                me.fireEvent('page:show', [me, selector]);
+            },
+
             showAlign: function () {
                 this.showPage('#edit-chart-align');
                 Common.Utils.addScrollIfNeed('.page.chart-align', '.page.chart-align .page-content');
@@ -273,7 +350,9 @@ define([
             textAlignBottom:   'Align Bottom',
             textAlignMiddle:   'Align Middle',
             txtDistribHor:     'Distribute Horizontally',
-            txtDistribVert:    'Distribute Vertically'
+            txtDistribVert:    'Distribute Vertically',
+            textAddCustomColor: 'Add Custom Color',
+            textCustomColor: 'Custom Color'
         }
     })(), PE.Views.EditChart || {}))
 });

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

@@ -44,7 +44,9 @@ define([
     'text!presentationeditor/mobile/app/template/EditShape.template',
     'jquery',
     'underscore',
-    'backbone'
+    'backbone',
+    'common/mobile/lib/component/ThemeColorPalette',
+    'common/mobile/lib/component/HsbColorPicker'
 ], function (editTemplate, $, _, Backbone) {
     'use strict';
 
@@ -144,6 +146,7 @@ define([
             },
 
             showStyle: function () {
+                var me = this;
                 var selector = this.isShapeCanFill ? '#edit-shape-style' : '#edit-shape-style-nofill';
                 this.showPage(selector, true);
 
@@ -154,11 +157,46 @@ define([
                     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-shape-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(''));
+                $('#tab-shape-fill').append(template({scope: this}));
+                $('#edit-shape-add-custom-color').single('click', _.bind(this.showCustomFillColor, this));
 
                 Common.Utils.addScrollIfNeed('.page[data-page=edit-shape-style]', '.page[data-page=edit-shape-style] .page-content');
                 this.fireEvent('page:show', [this, selector]);
             },
 
+            showCustomFillColor: function () {
+                var me = this,
+                    selector = '#edit-shape-custom-color-view';
+                me.showPage(selector, true);
+
+                me.customColorPicker = new Common.UI.HsbColorPicker({
+                    el: $('.page[data-page=edit-shape-custom-color] .page-content'),
+                    color: me.paletteFillColor.currentColor
+                });
+                me.customColorPicker.on('addcustomcolor', function (colorPicker, color) {
+                    me.paletteFillColor.addNewDynamicColor(colorPicker, color);
+                    PE.getController('EditContainer').rootView.router.back();
+                });
+
+                me.fireEvent('page:show', [me, selector]);
+            },
+
             showReplace: function () {
                 this.showPage('#edit-shape-replace');
                 Common.Utils.addScrollIfNeed('.page.shape-replace', '.page.shape-replace .page-content');
@@ -175,16 +213,54 @@ define([
             },
 
             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] .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]);
             },
 
+            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);
+                    PE.getController('EditContainer').rootView.router.back();
+                });
+
+                me.fireEvent('page:show', [me, selector]);
+            },
+
             textStyle: 'Style',
             textReplace: 'Replace',
             textReorder: 'Reorder',
@@ -208,7 +284,9 @@ define([
             textAlignBottom:   'Align Bottom',
             textAlignMiddle:   'Align Middle',
             txtDistribHor:     'Distribute Horizontally',
-            txtDistribVert:    'Distribute Vertically'
+            txtDistribVert:    'Distribute Vertically',
+            textAddCustomColor: 'Add Custom Color',
+            textCustomColor: 'Custom Color'
         }
     })(), PE.Views.EditShape || {}))
 });

apps/presentationeditor/mobile/app/view/edit/EditSlide.js

@@ -44,7 +44,9 @@ define([
     'text!presentationeditor/mobile/app/template/EditSlide.template',
     'jquery',
     'underscore',
-    'backbone'
+    'backbone',
+    'common/mobile/lib/component/ThemeColorPalette',
+    'common/mobile/lib/component/HsbColorPicker'
 ], function (editTemplate, $, _, Backbone) {
     'use strict';
 
@@ -173,16 +175,52 @@ define([
             },
 
             showStyle: function () {
+                var me = this;
                 this.showPage('#edit-slide-style', true);
 
                 this.paletteFillColor = new Common.UI.ThemeColorPalette({
                     el: $('.page[data-page=edit-slide-style] .page-content'),
                     transparent: true
                 });
+                this.paletteFillColor.on('customcolor', function () {
+                    me.showCustomSlideColor();
+                });
+                var template = _.template(['<div class="list-block">',
+                    '<ul>',
+                    '<li>',
+                    '<a id="edit-slide-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-slide-style] .page-content').append(template({scope: this}));
+                $('#edit-slide-add-custom-color').single('click', _.bind(this.showCustomSlideColor, this));
 
                 this.fireEvent('page:show', [this, '#edit-slide-style']);
             },
 
+            showCustomSlideColor: function () {
+                var me = this,
+                    selector = '#edit-slide-custom-color-view';
+                me.showPage(selector, true);
+
+                me.customColorPicker = new Common.UI.HsbColorPicker({
+                    el: $('.page[data-page=edit-slide-custom-color] .page-content'),
+                    color: me.paletteFillColor.currentColor
+                });
+                me.customColorPicker.on('addcustomcolor', function (colorPicker, color) {
+                    me.paletteFillColor.addNewDynamicColor(colorPicker, color);
+                    PE.getController('EditContainer').rootView.router.back();
+                });
+
+                me.fireEvent('page:show', [me, selector]);
+            },
+
             showLayout: function () {
                 this.showPage('#edit-slide-layout', true);
 
@@ -397,7 +435,9 @@ define([
             textZoomRotate: 'Zoom and Rotate',
             textStartOnClick: 'Start On Click',
             textDelay: 'Delay',
-            textApplyAll: 'Apply to All Slides'
+            textApplyAll: 'Apply to All Slides',
+            textAddCustomColor: 'Add Custom Color',
+            textCustomColor: 'Custom Color'
         }
     })(), PE.Views.EditSlide || {}))
 });

apps/presentationeditor/mobile/app/view/edit/EditTable.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';
 
@@ -193,26 +194,100 @@ define([
             },
 
             showTableStyle: function () {
+                var me = this;
                 this.showPage('#edit-table-style', true);
 
                 this.paletteFillColor = new Common.UI.ThemeColorPalette({
                     el: $('#tab-table-fill'),
                     transparent: true
                 });
+                this.paletteFillColor.on('customcolor', function () {
+                    me.showCustomFillColor();
+                });
+                var template = _.template(['<div class="list-block">',
+                    '<ul>',
+                    '<li>',
+                    '<a id="edit-table-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(''));
+                $('#tab-table-fill').append(template({scope: this}));
+                $('#edit-table-add-custom-color').single('click', _.bind(this.showCustomFillColor, this));
 
                 this.fireEvent('page:show', [this, '#edit-table-style']);
             },
 
+            showCustomFillColor: function () {
+                var me = this,
+                    selector = '#edit-table-custom-color-view';
+                me.showPage(selector, true);
+
+                me.customColorPicker = new Common.UI.HsbColorPicker({
+                    el: $('.page[data-page=edit-table-custom-color] .page-content'),
+                    color: me.paletteFillColor.currentColor
+                });
+                me.customColorPicker.on('addcustomcolor', function (colorPicker, color) {
+                    me.paletteFillColor.addNewDynamicColor(colorPicker, color);
+                    PE.getController('EditContainer').rootView.router.back();
+                });
+
+                me.fireEvent('page:show', [me, selector]);
+            },
+
             showBorderColor: function () {
+                var me = this;
                 this.showPage('#edit-table-border-color-view', true);
 
                 this.paletteBorderColor = new Common.UI.ThemeColorPalette({
                     el: $('.page[data-page=edit-table-border-color] .page-content')
                 });
+                this.paletteBorderColor.on('customcolor', function () {
+                    me.showCustomBorderColor();
+                });
+                var template = _.template(['<div class="list-block">',
+                    '<ul>',
+                    '<li>',
+                    '<a id="edit-table-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-table-border-color] .page-content').append(template({scope: this}));
+                $('#edit-table-add-custom-border-color').single('click', _.bind(this.showCustomBorderColor, this));
 
                 this.fireEvent('page:show', [this, '#edit-table-border-color-view']);
             },
 
+            showCustomBorderColor: function() {
+                var me = this,
+                    selector = '#edit-table-custom-color-view';
+                me.showPage(selector, true);
+
+                me.customBorderColorPicker = new Common.UI.HsbColorPicker({
+                    el: $('.page[data-page=edit-table-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);
+                    PE.getController('EditContainer').rootView.router.back();
+                });
+
+                me.fireEvent('page:show', [me, selector]);
+            },
+
             showTableStyleOptions: function () {
                 this.showPage('#edit-table-style-options-view');
             },
@@ -257,7 +332,9 @@ define([
             textAlignBottom:   'Align Bottom',
             textAlignMiddle:   'Align Middle',
             txtDistribHor:     'Distribute Horizontally',
-            txtDistribVert:    'Distribute Vertically'
+            txtDistribVert:    'Distribute Vertically',
+            textAddCustomColor: 'Add Custom Color',
+            textCustomColor: 'Custom Color'
         }
     })(), PE.Views.EditTable || {}))
 });

apps/presentationeditor/mobile/app/view/edit/EditText.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';
 
@@ -196,16 +197,52 @@ define([
             },
 
             showFontColor: function () {
+                var me = this;
                 this.showPage('#edit-text-color', true);
 
                 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);
+                    PE.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');
@@ -249,7 +286,9 @@ define([
             textCharacterBold: 'B',
             textCharacterItalic: 'I',
             textCharacterUnderline: 'U',
-            textCharacterStrikethrough: 'S'
+            textCharacterStrikethrough: 'S',
+            textAddCustomColor: 'Add Custom Color',
+            textCustomColor: 'Custom Color'
         }
     })(), PE.Views.EditText || {}))
 });