Merge pull request #578 from sarthak-g/sarthak-buttonselect

Fixed #575 (Improvement of text palette)
llaske · Jan 26, 2020 · 3e39598 · 3e39598
2 parents 87fdbc2 + 696607c
commit 3e39598
Showing 1 changed file with 34 additions and 0 deletions.
diff --git a/activities/Fototoon.activity/js/toon.js b/activities/Fototoon.activity/js/toon.js
@@ -573,17 +573,21 @@ define(["easel","sugar-web/datastore","sugar-web/env","webL10n","humane"], funct
                 var bold = box.getSelectedGlobe().getTextViewer().toggleBold();
                 if (bold) {
                     editor.style.fontWeight = 'bold';
+                    document.getElementById("text-set-bold").style.backgroundColor = "grey";
                 } else {
                     editor.style.fontWeight = 'normal';
+                    document.getElementById("text-set-bold").style.backgroundColor = "";
                 };
             });
 
             this._textpalette.italicTextBtn.addEventListener('click', function(e) {
                 var italic = box.getSelectedGlobe().getTextViewer().toggleItalic();
                 if (italic) {
                     editor.style.fontStyle = 'italic';
+                    document.getElementById("text-set-italic").style.backgroundColor = "grey";
                 } else {
                     editor.style.fontStyle = 'normal';
+                    document.getElementById("text-set-italic").style.backgroundColor = "";
                 };
             });
 
@@ -837,6 +841,19 @@ define(["easel","sugar-web/datastore","sugar-web/env","webL10n","humane"], funct
         };
 
         this.setColor = function(color) {
+            let color_class = document.getElementsByClassName("color-picker");
+            for(let index=0; index<=9; index++)
+            {
+                if(color_class[index].value == this._color)
+                {
+                    color_class[index].style.border = "2px solid white";
+                }
+                if(color_class[index].value == color)
+                {
+                    color_class[index].style.border = "5px solid #696969";
+                }
+
+            }
             this._color = color;
             this.update();
             return this._color;
@@ -875,15 +892,32 @@ define(["easel","sugar-web/datastore","sugar-web/env","webL10n","humane"], funct
             // (used when a globe is selected)
             editor.style.fontSize = this._size + 'px';
             editor.style.color = this._color;
+            let color_class = document.getElementsByClassName("color-picker");
+            for(let index=0; index<=9; index++)
+            {
+                if(color_class[index].value == this._color)
+                {
+                    color_class[index].style.border = "5px solid #696969";
+                }
+                else
+                {
+                    color_class[index].style.border = "2px solid white";
+                }
+
+            }
             if (this._italic) {
                 editor.style.fontStyle = 'italic';
+                document.getElementById("text-set-italic").style.backgroundColor = "grey";
             } else {
                 editor.style.fontStyle = 'normal';
+                document.getElementById("text-set-italic").style.backgroundColor = "";
             };
             if (this._bold) {
                 editor.style.fontWeight = 'bold';
+                document.getElementById("text-set-bold").style.backgroundColor = "grey";
             } else {
                 editor.style.fontWeight = 'normal';
+                document.getElementById("text-set-bold").style.backgroundColor = "";
             };
         };