Add button to reset background color

[Issue]: Samsung#198 [Problem]: When background color is set once, it cannot return to default value. [Solution]: Create a button which reset to default style. Signed-off-by: Wojciech Szczepanski <w.szczepansk@samsung.com>
korneliakobiela · Sep 6, 2019 · c82d724 · c82d724
1 parent 4c2522b
commit c82d724
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 5 deletions.
diff --git a/design-editor/src/panel/property/attribute/attribute-element.js b/design-editor/src/panel/property/attribute/attribute-element.js
@@ -85,6 +85,7 @@ class Attribute extends DressElement {
         self._$selectedElement = null;
 
         self.events = {
+			'click #backgroundColorClear': 'resetToInitialBackgroundColorValue',
             'change #fileForBackground': 'onSetRelativePathForBackground',
             'click  #fileForBackgroundClear': 'onClearBackgroundImage',
             'change #cfFiles': 'onSelectImageForCoverFlow',
@@ -485,7 +486,45 @@ class Attribute extends DressElement {
                 self._initTabs(attribute, list);
             }
         });
-    }
+	}
+
+	/**
+     * Handler to click for reset background color button
+	 * Set background color value to default for element and input
+     * @param {Event} event
+     */
+	resetToInitialBackgroundColorValue() {
+		const activeDesignEditor = AppManager.getActiveDesignEditor();
+		// update style to set value of background color implemented by TAU
+		activeDesignEditor
+			.getModel()
+			.updateStyle(
+				this._selectedElementId,
+				'backgroundColor',
+				''
+			);
+		// set value implemented by TAU to input
+		this._updateAttributes(activeDesignEditor.getModel().getElement(this._selectedElementId), 'background');
+		// hide reset button
+		document.getElementById('backgroundColorClear').style.display = 'none';
+	}
+
+	/**
+     * Show/Hide reset background color button
+     * @param {string} id data-id of changed element
+     */
+	displayBackgroundColorResetButton(id) {
+		// get currently active widget
+		const changedElement = AppManager.getActiveDesignEditor()._getElementById(id).get(0),
+			resetBackgroundColorButton = document.getElementById('backgroundColorClear');
+		if (changedElement.style.backgroundColor) {
+			// display background reset button when background color exists in inline style of element
+			resetBackgroundColorButton.style.display = 'block';
+		} else {
+			// not display background reset button because background color doesn't exist in inline style of element
+			resetBackgroundColorButton.style.display = 'none';
+		}
+	}
 
     _applyBackgroundImageInfo(fileName) {
         console.log('_applyBackgroundImageInfo', fileName);
@@ -641,8 +680,11 @@ class Attribute extends DressElement {
                     model.updateAttribute(this._selectedElementId, type, value);
                 } else {
                     console.error('The value of the '+type+' is invalid!');
-                }
-            } else {
+				}
+			} else if (name === 'backgroundColor') {
+				model.updateStyle(this._selectedElementId, name, value);
+				this.displayBackgroundColorResetButton(this._selectedElementId);
+			} else {
                 model.updateStyle(this._selectedElementId, name, value);
             }
         }
@@ -842,7 +884,8 @@ class Attribute extends DressElement {
             case 'borderColor':
                 listElements[item].val(rgba2hex(value));
                 break;
-            case 'backgroundColor':
+			case 'backgroundColor':
+				this.displayBackgroundColorResetButton(el.id);
                 listElements[item].val(rgba2hex(value));
                 break;
             case 'backgroundImage':

diff --git a/design-editor/src/panel/property/attribute/templates/attribute-background.html b/design-editor/src/panel/property/attribute/templates/attribute-background.html
@@ -1,6 +1,7 @@
 <li>
     <span class="closet-attribute-common-label-long">color</span>
-    <input type="color" name="backgroundColor" class="closet-attribute-common-textbox">
+	<input type="color" name="backgroundColor" class="closet-attribute-common-textbox">
+	<button id="backgroundColorClear" class="btn" style="display:none;">Reset color</button>
 </li>
 <li id="backgroundImageChoose">
     <span class="closet-attribute-common-label-long">image</span>