feat: improved the variables visualization

css/accessible/design.css

@@ -75,4 +75,25 @@ footer h1 {
 
 .acessible-terminal .bash-title {
     border-radius: 10px 10px 0 0;
+}
+
+.variable-item {
+    border: solid 1px darkgray;
+    border-radius: 10px;
+}
+
+#htmlOlCommandsVariablesVariables {
+    list-style-type: none;
+}
+
+#htmlOlCommandsVariablesOperations {
+    list-style-type: none;
+}
+
+#main ol li {
+    margin-bottom: 3px;
+}
+
+#main ol li a{
+    text-decoration: none;
 }

js/accessibleUI/modules/variables/variables-schemes.js

@@ -2,6 +2,8 @@
 // Scheme for the variables list
 // *********************************************************************************
 
+import {variables} from "./variables";
+
 export const variableScheme = {
     hash: 'UUID for the variable',
     name: 'Variable name',
@@ -81,27 +83,30 @@ export function htmlVariableScheme () {
     }
 
     return `<li id="variable<variableId>Li">
-            <form id="variable<variableId>Form">
-              <div class="row">
-                <div class="col-2">
-                  <select name="tipo" class="form-control" title="tipo da variável" id="variable<variableId>Type" variable-id="<variableId>">
-                      ${variableTypesHtml}
-                  </select>
-                </div>
-                <div class="col-2">
-                  <input type="text" class="form-control" title="nome da variável" id="variable<variableId>Name" value="<variableName>" variable-id="<variableId>">
-                </div>
-                <div class="col-1 text-center my-auto" style="margin-bottom: 0px !important">
-                  <label for="variable<variableId>Value" tabindex="0" tile="recebe">recebe</label>
-                </div>
-                <div class="col-2">
-                  <input type="${variableTypes[0].htmlType}" class="form-control" id ="variable<variableId>Value" title="valor da variável" value="0" variable-id="<variableId>">
-                </div>
-                <div class="col-1">
-                  <button id="variable<variableId>Delete" type="button" class="btn btn-danger">Excluir</button>
-                </div>
-              </div>
-            </form> 
+                <form id="variable<variableId>Form">
+                    <div class="row p-2 w-100 variable-item" style="background-color: antiquewhite;">
+                        <!-- <div class="col-1 text-center my-auto">
+                           <h5>${variables.length}</h5>
+                        </div> -->
+                        <div class="col-3">
+                            <select name="tipo" class="form-control" title="tipo da variável" id="variable<variableId>Type" variable-id="<variableId>">
+                                ${variableTypesHtml}
+                            </select>
+                        </div>
+                        <div class="col-2">
+                            <input type="text" class="form-control" title="nome da variável" id="variable<variableId>Name" value="<variableName>" variable-id="<variableId>">
+                        </div>
+                        <div class="col-1 text-center my-auto" style="margin-bottom: 0px !important">
+                            <label for="variable<variableId>Value" tabindex="0" tile="recebe">recebe</label>
+                        </div>
+                        <div class="col-2">
+                            <input type="${variableTypes[0].htmlType}" class="form-control" id ="variable<variableId>Value" title="valor da variável" value="0" variable-id="<variableId>">
+                        </div>
+                        <div class="col-1 text-center my-auto">
+                            <a id="variable<variableId>Delete" href="javascript:void(0)" class="text-danger">X</a>
+                        </div>
+                    </div>
+                </form> 
           </li>`;
 }