From 718745a8f40061e8287543714b26d83aa37c55b5 Mon Sep 17 00:00:00 2001
From: Agriya Dev5 <agriya.dev5@agriya.in>
Date: Tue, 17 Nov 2020 14:05:57 +0530
Subject: [PATCH] #se-input elem_class input modified to se-input

---
 src/editor/index.html | 11 +----------
 src/editor/svgedit.js |  3 ++-
 2 files changed, 3 insertions(+), 11 deletions(-)

diff --git a/src/editor/index.html b/src/editor/index.html
index a5ee50f1..e732c170 100644
--- a/src/editor/index.html
+++ b/src/editor/index.html
@@ -147,17 +147,8 @@
             <se-button id="tool_reorient" title="Reorient path" src="./images/reorient.svg"></se-button>
             <se-button id="tool_make_link" title="Make (hyper)link" src="./images/globe_link.png"></se-button>
             <div class="tool_sep"></div>
-            <!-- <label id="idLabel" title="Identify the element">
-              <span>id:</span>
-              <input id="elem_id" class="attr_changer" data-attr="id" size="10" type="text" />
-            </label> -->
-
             <se-input id="elem_id" data-attr="id" inputsize="70%" type="text" label="id:"></se-input> 
-            
-            <label id="classLabel" title="Element class">
-              <span>class:</span>
-              <input id="elem_class" class="attr_changer" data-attr="class" size="10" type="text" />
-            </label>
+            <se-input id="elem_class" data-attr="class" inputsize="70%" type="text" label="class:"></se-input> 
           </div>
           <label id="tool_angle" title="Change rotation angle" class="toolset">
             <span id="angleLabel" class="icon_label"></span>
diff --git a/src/editor/svgedit.js b/src/editor/svgedit.js
index 3b54d0a0..cffd30e2 100644
--- a/src/editor/svgedit.js
+++ b/src/editor/svgedit.js
@@ -1889,7 +1889,7 @@ editor.init = () => {
       $('#group_opacity').val(opacPerc);
       $('#opac_slider').slider('option', 'value', opacPerc);
       $id('elem_id').value = selectedElement.id;
-      $('#elem_class').val(selectedElement.getAttribute('class'));
+      $id('elem_class').value = (selectedElement.getAttribute('class') !== null) ? selectedElement.getAttribute('class') : '';
     }
 
     updateToolButtonState();
@@ -4900,6 +4900,7 @@ editor.init = () => {
     // register actions for bottom panel
     $id('zoom').addEventListener('change', (e) => changeZoom(Number(e.target.value)));
     $id('elem_id').addEventListener('change', (e) => attrChanger(e));
+    $id('elem_class').addEventListener('change', (e) => attrChanger(e));
 
     // register actions for layer toolbar
     $id('layer_new').addEventListener('click', newLayer);