Add button in Theme settings to toggle Homescreen animation

This is a work around to help reduce high cpu usage in CSS animations
regarding bug TC-1899.

Change-Id: I3753cd44af90a688b4d3589f8c0a7abe43f57890
Signed-off-by: Jimmy Huang <jimmy.huang@intel.com>

diff --git a/css/car/components/settings/css/settings.css b/css/car/components/settings/css/settings.css
index d3f9e90..8e79f73 100644 (file)
--- a/css/car/components/settings/css/settings.css
+++ b/css/car/components/settings/css/settings.css
@@ -100,6 +100,10 @@
        width: 200px;
 }
 
+.subPanelToggleButtonExtraWide {
+       width: 300px;
+}
+
 .buttonsArea {
        width: 680px;
        margin-top: 20px;

diff --git a/css/car/components/settings/js/themes.js b/css/car/components/settings/js/themes.js
index ca422ef..f28ae68 100644 (file)
--- a/css/car/components/settings/js/themes.js
+++ b/css/car/components/settings/js/themes.js
@@ -17,6 +17,8 @@
  */
 var Themes = function() {
        "use strict";
+       var self = this;
+
        /**
         * Marks a given user theme as selected.
         *
@@ -29,6 +31,13 @@ var Themes = function() {
                }
        };
 
+       this.toggleAnimation = function() {
+               var animation = Configuration.get("animationEnabled");
+               Configuration.set("animationEnabled", !animation);
+               animation = Configuration.get("animationEnabled");
+               self.animationEnabled(animation);
+       }
+
        this.init();
 };
 
@@ -81,6 +90,21 @@ Themes.prototype.show = function() {
                        themeList += templateName;
                        themeList += '\', foreach: Settings.Theme.themes }"></div>';
                        $(themeList).appendTo($('.' + themesContent));
+
+                       var animation = Configuration.get("animationEnabled");
+                       if (animation === undefined) {
+                               animation = true;
+                       }
+                       Configuration.set("animationEnabled", animation);
+                       self.animationEnabled(animation);
+
+                       var button = "";
+                       button = '<div id="animationButton" class="toggleButton subPanelToggleButton subPanelToggleButtonExtraWide" data-bind="click: Settings.Theme.toggleAnimation">';
+                       button += '<div class="bgColorThemeTransparent boxShadowInset toggleButtonBackground"></div>';
+                       button += '<div class="fontColorNormal fontSizeMedium fontWeightBold toggleButtonText" data-bind="text: Settings.Theme.animationEnabled() ? \'TURN OFF ANIMATION\' : \'TURN ON ANIMATION\'"></div>';
+                       button += '</div>';
+                       $(button).appendTo($('.tabsTopSubPanel'));
+
                        ko.applyBindings(window.Settings);
                }
        };
@@ -112,4 +136,14 @@ Themes.prototype.loadThemes = function(successCallback) {
                        }
                });
        }
+
+/**
+ * Indicates if animation is enabled
+ *
+ * @property animationEnabled
+ * @public
+ * @type ko.observable
+ * @default true
+ */
+Themes.prototype.animationEnabled = ko.observable(true);
 };
\ No newline at end of file

diff --git a/packaging/modello-common.changes b/packaging/modello-common.changes
index 4d89464..012eb4c 100644 (file)
--- a/packaging/modello-common.changes
+++ b/packaging/modello-common.changes
@@ -1,3 +1,6 @@
+* Wed Jan 07 2015 Jimmy Huang <jimmy.huang@intel.com> accepted/tizen/ivi/20141217.011338-1-g18f9718
+- Add button in Theme settings to toggle Homescreen animation
+
 * Tue Dec 16 2014 Brian Jones <brian.j.jones@intel.com> accepted/tizen/ivi/20141216.021121-1-g82ba2df
 - Adding new fonts to Modello that work with xwalk