add css form VC

pandora_console/include/javascript/pandora_visual_console.js

@@ -561,10 +561,18 @@ function createVisualConsole(
           var id = props.id;
           var data = e.data;
 
-          // Content tiny.
-          var content = tinymce.get("tinyMCE_editor").getContent();
-          // Pass the content.
-          data.label = content;
+          if (
+            props.type != 20 &&
+            props.type != 3 &&
+            props.type != 9 &&
+            props.type != 15 &&
+            props.type != 16
+          ) {
+            // Content tiny.
+            var content = tinymce.get("tinyMCE_editor").getContent();
+            // Pass content to array data.
+            data.label = content;
+          }
 
           var taskId = "visual-console-item-update-" + id;
 
@@ -636,10 +644,10 @@ function createVisualConsole(
         $formElement.dialog({
           title: formContainer.title,
           modal: true,
-          resizable: true,
+          resizable: false,
           draggable: true,
-          height: 300,
-          width: 500,
+          height: 600,
+          width: 700,
           open: function() {
             tinymce.init({
               selector: "#tinyMCE_editor",
@@ -672,9 +680,7 @@ function createVisualConsole(
                 "bold,italic, |, justifyleft, justifycenter, justifyright, |, undo, redo, |, image, link, |, fontselect, forecolor, fontsizeselect, |,code",
               theme_advanced_buttons2: "",
               theme_advanced_buttons3: "",
-              theme_advanced_statusbar_location: "none",
-              width: "400",
-              height: "200"
+              theme_advanced_statusbar_location: "none"
             });
           },
           beforeClose: function() {
@@ -687,14 +693,19 @@ function createVisualConsole(
           buttons: [
             {
               text: "Cancel",
+              class:
+                "ui-widget ui-state-default ui-corner-all ui-button-text-only sub upd submit-cancel",
               click: function() {
                 $formElement.dialog("close");
               }
             },
             {
               text: "Update",
+              class:
+                "ui-widget ui-state-default ui-corner-all ui-button-text-only sub ok submit-next",
               click: function() {
-                console.log(formContainer);
+                // Trigered simulate button submit.
+                this.dispatchEvent(new Event("submit"));
               }
             }
           ]

pandora_console/include/rest-api/models/VisualConsole/Items/ColorCloud.php

@@ -74,31 +74,39 @@ final class ColorCloud extends Item
     {
         $return = parent::encode($data);
         $colorRanges = null;
+
+        $defaultColor = null;
+
+        if (isset($data['defaultColor']) === true) {
+            $defaultColor = static::extractDefaultColor($data);
+        }
+
         if (isset($data['colorRanges']) === true) {
-            $defaultColor = null;
-            if (isset($data['defaultColor']) === true) {
-                $defaultColor = static::extractDefaultColor($data);
-            }
-
             $colorRanges = static::encodeColorRanges($data);
+        }
 
-            if (empty($data['id']) === true) {
-                $return['label'] = json_encode(
-                    [
-                        'default_color' => $defaultColor,
-                        'color_ranges'  => $colorRanges,
-                    ]
-                );
-            } else {
-                $prevData = $this->toArray();
+        if (empty($data['id']) === true) {
+            $return['label'] = json_encode(
+                [
+                    'default_color' => $defaultColor,
+                    'color_ranges'  => $colorRanges,
+                ]
+            );
+        } else {
+            $prevData = $this->toArray();
+            $prevDataDefaultColor = static::extractDefaultColor(
+                ['defaultColor' => $prevData['defaultColor']]
+            );
+            $prevDataColorRanges = static::encodeColorRanges(
+                ['colorRanges' => $prevData['colorRanges']]
+            );
 
-                $return['label'] = json_encode(
-                    [
-                        'default_color' => ($defaultColor !== null) ? $defaultColor : $prevData['defaultColor'],
-                        'color_ranges'  => ($colorRanges !== null && (count($colorRanges) > 0)) ? $colorRanges : $prevData['colorRanges'],
-                    ]
-                );
-            }
+            $return['label'] = json_encode(
+                [
+                    'default_color' => ($defaultColor !== null) ? $defaultColor : $prevDataDefaultColor,
+                    'color_ranges'  => ($colorRanges !== null && (count($colorRanges) > 0)) ? $colorRanges : $prevDataColorRanges,
+                ]
+            );
         }
 
         return $return;

pandora_console/include/visual-console-client/vc.main.css

@@ -128,16 +128,6 @@
   background: rgb(212, 215, 218);
 }
 
-form.visual-console-item-edition > .input-groups {
-  margin-bottom: 50px;
-}
-
-form.visual-console-item-edition > input[type="submit"] {
-  position: absolute;
-  bottom: 5px;
-  right: 15px;
-}
-
 .show-elements {
   display: inline-block;
 }
@@ -146,6 +136,160 @@ form.visual-console-item-edition > input[type="submit"] {
   display: none;
 }
 
+/*Forms*/
+.div-input-group label {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: row;
+          flex-direction: row;
+  -ms-flex-wrap: wrap;
+      flex-wrap: wrap;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  font-size: 12pt;
+  font-family: "lato-bolder", "Open Sans", sans-serif;
+  font-weight: 600;
+  color: #343434;
+  margin-right: 10px;
+}
+.div-input-group label img {
+  margin-left: 4px;
+}
+
+.div-input-group input[type="text"],
+.div-input-group input[type="number"] {
+  height: 25px;
+  font-size: 10pt;
+  background-color: transparent;
+  border: none;
+  border-radius: 0;
+  border-bottom: 1px solid #ccc;
+  font-family: "lato-bolder", "Open Sans", sans-serif;
+  font-weight: lighter;
+  padding: 0px 0px 2px 0px;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  margin-right: 10px;
+}
+
+.div-input-group input[type="radio"] {
+  margin-right: 10px;
+  width: 17px;
+  height: 17px;
+}
+
+.div-input-group select {
+  font-family: "lato-bolder", "Open Sans", sans-serif;
+  font-weight: lighter;
+  font-size: 10pt;
+}
+
+.input-groups {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  -ms-flex-wrap: wrap;
+      flex-wrap: wrap;
+}
+
+.input-group {
+  width: 100%;
+  margin-bottom: 25px;
+  padding-left: 20px;
+}
+
+.div-ranges-input-group {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  -ms-flex-wrap: wrap;
+      flex-wrap: wrap;
+  -webkit-box-align: start;
+      -ms-flex-align: start;
+          align-items: start;
+}
+
+.div-ranges-input-group > div {
+  padding-left: 20px;
+  margin-top: 10px;
+}
+
+.div-input-group,
+.div-input-group div div {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: row;
+          flex-direction: row;
+  -ms-flex-wrap: wrap;
+      flex-wrap: wrap;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+}
+
+.div-input-group h3 {
+  text-transform: initial;
+  font-family: "lato-bolder", "Open Sans", sans-serif;
+  text-align: center;
+  font-style: italic;
+  text-decoration: underline;
+  margin: 0 auto;
+}
+
+.div-input-group div div a {
+  margin-left: 10px;
+}
+
+.div-input-group-autocomplete-agent {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  -ms-flex-wrap: wrap;
+      flex-wrap: wrap;
+  -webkit-box-align: start;
+      -ms-flex-align: start;
+          align-items: start;
+  -webkit-box-pack: justify;
+      -ms-flex-pack: justify;
+          justify-content: space-between;
+  height: 70px;
+}
+
+.div-input-group-inside {
+  padding-left: 20px;
+}
+
+.input-group-link-console {
+  height: 70px;
+}
+
+.show-elements > div.div-input-group-autocomplete-agent {
+  margin-left: 20px;
+}
+
+.img-vc-elements {
+  margin-left: 10px;
+}
+
 /* Styles for the solid icons */
 
 .fa {
@@ -307,4 +451,4 @@ form.visual-console-item-edition > input[type="submit"] {
 }
 
 
-/*# sourceMappingURL=vc.main.css.map*/
+/*# sourceMappingURL=vc.main.css.map*/

visual_console_client/src/Form.ts

@@ -219,16 +219,7 @@ export class FormContainer {
       }
     });
 
-    /*
-    // Add buttons.
-    const submitBtn = document.createElement("input");
-    submitBtn.className = "sub upd";
-    submitBtn.type = "submit";
-    submitBtn.value = type === "creation" ? t("Create") : t("Update");
-    */
-
     form.appendChild(formContent);
-    //form.appendChild(submitBtn);
 
     return form;
   }

visual_console_client/src/Item.ts

@@ -102,12 +102,19 @@ export interface ItemSelectionChangedEvent {
 // TODO: Document
 class LinkInputGroup extends InputGroup<Partial<ItemProps>> {
   protected createContent(): HTMLElement | HTMLElement[] {
+    const generalDiv = document.createElement("div");
+    generalDiv.className = "div-input-group";
+
     const linkLabel = document.createElement("label");
     linkLabel.textContent = t("Link enabled");
 
+    const linkInputLabel = document.createElement("label");
+    linkInputLabel.className = "p-switch";
+    linkInputLabel.htmlFor = "checkbox-link";
+
     const linkInputChkbx = document.createElement("input");
-    linkInputChkbx.id = "checkbox-switch";
-    linkInputChkbx.className = "checkbox-switch";
+    linkInputChkbx.id = "checkbox-link";
+    linkInputChkbx.className = "checkbox-link";
     linkInputChkbx.type = "checkbox";
     linkInputChkbx.name = "checkbox-enable-link";
     linkInputChkbx.value = "1";
@@ -119,26 +126,54 @@ class LinkInputGroup extends InputGroup<Partial<ItemProps>> {
       })
     );
 
-    const linkInputLabel = document.createElement("label");
-    linkInputLabel.className = "label-switch";
-    linkInputLabel.htmlFor = "checkbox-switch";
+    const spanInputLabel = document.createElement("span");
+    spanInputLabel.className = "p-slider";
 
-    linkLabel.appendChild(linkInputChkbx);
-    linkLabel.appendChild(linkInputLabel);
+    linkInputLabel.appendChild(linkInputChkbx);
+    linkInputLabel.appendChild(spanInputLabel);
 
-    return linkLabel;
+    generalDiv.appendChild(linkLabel);
+    generalDiv.appendChild(linkInputLabel);
+
+    return generalDiv;
+  }
+}
+
+// TODO: Document
+class AdvancedOptionsInputGroup extends InputGroup<Partial<ItemProps>> {
+  protected createContent(): HTMLElement | HTMLElement[] {
+    const generalDiv = document.createElement("div");
+    generalDiv.className = "div-input-group";
+
+    const h3 = document.createElement("h3");
+    h3.textContent = t("Advanced Options");
+
+    generalDiv.appendChild(h3);
+
+    return generalDiv;
   }
 }
 
 // TODO: Document
 class OnTopInputGroup extends InputGroup<Partial<ItemProps>> {
   protected createContent(): HTMLElement | HTMLElement[] {
+    const generalDiv = document.createElement("div");
+    generalDiv.className = "div-input-group";
+
     const onTopLabel = document.createElement("label");
     onTopLabel.textContent = t("Show on top");
 
+    onTopLabel.appendChild(
+      helpTip(
+        t(
+          "It allows the element to be superimposed to the rest of items of the visual console"
+        )
+      )
+    );
+
     const onTopInputChkbx = document.createElement("input");
-    onTopInputChkbx.id = "checkbox-switch";
-    onTopInputChkbx.className = "checkbox-switch";
+    onTopInputChkbx.id = "checkbox-on-top";
+    onTopInputChkbx.className = "checkbox-on-top";
     onTopInputChkbx.type = "checkbox";
     onTopInputChkbx.name = "checkbox-show-on-top";
     onTopInputChkbx.value = "1";
@@ -151,26 +186,27 @@ class OnTopInputGroup extends InputGroup<Partial<ItemProps>> {
     );
 
     const onTopInputLabel = document.createElement("label");
-    onTopInputLabel.className = "label-switch";
-    onTopInputLabel.htmlFor = "checkbox-switch";
+    onTopInputLabel.className = "p-switch";
+    onTopInputLabel.htmlFor = "checkbox-on-top";
 
-    onTopLabel.appendChild(
-      helpTip(
-        t(
-          "It allows the element to be superimposed to the rest of items of the visual console"
-        )
-      )
-    );
-    onTopLabel.appendChild(onTopInputChkbx);
-    onTopLabel.appendChild(onTopInputLabel);
+    const spanInputLabel = document.createElement("span");
+    spanInputLabel.className = "p-slider";
 
-    return onTopLabel;
+    onTopInputLabel.appendChild(onTopInputChkbx);
+    onTopInputLabel.appendChild(spanInputLabel);
+
+    generalDiv.appendChild(onTopLabel);
+    generalDiv.appendChild(onTopInputLabel);
+
+    return generalDiv;
   }
 }
 
 // TODO: Document
 class PositionInputGroup extends InputGroup<Partial<ItemProps>> {
   protected createContent(): HTMLElement | HTMLElement[] {
+    const generalDiv = document.createElement("div");
+    generalDiv.className = "div-input-group";
     const positionLabel = document.createElement("label");
     positionLabel.textContent = t("Position");
 
@@ -196,16 +232,19 @@ class PositionInputGroup extends InputGroup<Partial<ItemProps>> {
       })
     );
 
-    positionLabel.appendChild(positionInputX);
-    positionLabel.appendChild(positionInputY);
+    generalDiv.appendChild(positionLabel);
+    generalDiv.appendChild(positionInputX);
+    generalDiv.appendChild(positionInputY);
 
-    return positionLabel;
+    return generalDiv;
   }
 }
 
 // TODO: Document
 class SizeInputGroup extends InputGroup<Partial<ItemProps>> {
   protected createContent(): HTMLElement | HTMLElement[] {
+    const generalDiv = document.createElement("div");
+    generalDiv.className = "div-input-group";
     const sizeLabel = document.createElement("label");
     sizeLabel.textContent = t("Size");
 
@@ -242,16 +281,20 @@ class SizeInputGroup extends InputGroup<Partial<ItemProps>> {
         )
       )
     );
-    sizeLabel.appendChild(sizeInputWidth);
-    sizeLabel.appendChild(sizeInputHeight);
 
-    return sizeLabel;
+    generalDiv.appendChild(sizeLabel);
+    generalDiv.appendChild(sizeInputWidth);
+    generalDiv.appendChild(sizeInputHeight);
+
+    return generalDiv;
   }
 }
 
 // TODO: Document
 class LabelInputGroup extends InputGroup<Partial<ItemProps>> {
   protected createContent(): HTMLElement | HTMLElement[] {
+    const generalDiv = document.createElement("div");
+    generalDiv.className = "div-input-group";
     const label = document.createElement("label");
     label.textContent = t("Label");
 
@@ -265,9 +308,10 @@ class LabelInputGroup extends InputGroup<Partial<ItemProps>> {
       this.initialData.label ||
       ""}`;
 
-    label.appendChild(labelInput);
+    generalDiv.appendChild(label);
+    generalDiv.appendChild(labelInput);
 
-    return label;
+    return generalDiv;
   }
 }
 
@@ -278,6 +322,9 @@ class LabelInputGroup extends InputGroup<Partial<ItemProps>> {
  */
 class ParentInputGroup extends InputGroup<Partial<ItemProps>> {
   protected createContent(): HTMLElement | HTMLElement[] {
+    const generalDiv = document.createElement("div");
+    generalDiv.className = "div-input-group";
+
     const parentLabel = document.createElement("label");
     parentLabel.textContent = t("Parent");
 
@@ -310,9 +357,10 @@ class ParentInputGroup extends InputGroup<Partial<ItemProps>> {
         0}`;
     });
 
-    parentLabel.appendChild(parentSelect);
+    generalDiv.appendChild(parentLabel);
+    generalDiv.appendChild(parentSelect);
 
-    return parentLabel;
+    return generalDiv;
   }
 }
 
@@ -323,9 +371,14 @@ class ParentInputGroup extends InputGroup<Partial<ItemProps>> {
  */
 class AclGroupInputGroup extends InputGroup<Partial<ItemProps>> {
   protected createContent(): HTMLElement | HTMLElement[] {
+    const generalDiv = document.createElement("div");
+    generalDiv.className = "div-input-group";
+
     const aclGroupLabel = document.createElement("label");
     aclGroupLabel.textContent = t("Restrict access to group");
 
+    generalDiv.appendChild(aclGroupLabel);
+
     const spinner = fontAwesomeIcon(faCircleNotch, t("Spinner"), {
       size: "small",
       spin: true
@@ -369,20 +422,25 @@ class AclGroupInputGroup extends InputGroup<Partial<ItemProps>> {
           this.initialData.aclGroupId ||
           0}`;
 
-        aclGroupLabel.appendChild(aclGroupSelect);
+        generalDiv.appendChild(aclGroupSelect);
       }
     });
 
-    return aclGroupLabel;
+    return generalDiv;
   }
 }
 
 // TODO: Document
 class CacheExpirationInputGroup extends InputGroup<Partial<ItemProps>> {
   protected createContent(): HTMLElement | HTMLElement[] {
+    const generalDiv = document.createElement("div");
+    generalDiv.className = "div-input-group";
+
     const periodLabel = document.createElement("label");
     periodLabel.textContent = t("Cache expiration");
 
+    generalDiv.appendChild(periodLabel);
+
     const periodControl = periodSelector(
       this.currentData.cacheExpiration || this.initialData.cacheExpiration || 0,
       { text: t("No cache"), value: 0 },
@@ -398,9 +456,9 @@ class CacheExpirationInputGroup extends InputGroup<Partial<ItemProps>> {
       value => this.updateData({ cacheExpiration: value })
     );
 
-    periodLabel.appendChild(periodControl);
+    generalDiv.appendChild(periodControl);
 
-    return periodLabel;
+    return generalDiv;
   }
 }
 
@@ -415,7 +473,9 @@ export class LinkConsoleInputGroup extends InputGroup<
   protected createContent(): HTMLElement | HTMLElement[] {
     // Create div container.
     const container = document.createElement("div");
+    container.className = "div-input-group ";
     const lvcTypeContainer = document.createElement("div");
+    lvcTypeContainer.className = "div-input-group-inside";
 
     // Create Principal element label - select.
     const linkConsoleLabel = document.createElement("label");
@@ -527,12 +587,12 @@ export class LinkConsoleInputGroup extends InputGroup<
           );
         });
 
-        // Add principal select to label.
-        linkConsoleLabel.appendChild(linkConsoleSelect);
-
         // Add weight warning field.
         container.appendChild(linkConsoleLabel);
 
+        // Add principal select to label.
+        container.appendChild(linkConsoleSelect);
+
         // Add containerType to container.
         lvcTypeContainer.appendChild(
           this.getLinkedVisualConsoleTypeSelector(
@@ -542,8 +602,8 @@ export class LinkConsoleInputGroup extends InputGroup<
         container.appendChild(lvcTypeContainer);
       } else {
         // Add principal select to label.
-        linkConsoleLabel.appendChild(linkConsoleSelect);
         container.appendChild(linkConsoleLabel);
+        container.appendChild(linkConsoleSelect);
       }
     });
 
@@ -599,12 +659,12 @@ export class LinkConsoleInputGroup extends InputGroup<
 
     typeLinkConsoleSelect.value = value;
 
-    // Add select type link.
-    typeLinkConsoleLabel.appendChild(typeLinkConsoleSelect);
-
     // Add type link.
     containerType.appendChild(typeLinkConsoleLabel);
 
+    // Add select type link.
+    containerType.appendChild(typeLinkConsoleSelect);
+
     switch (value) {
       case "weight":
         // Add Chil container with weight.
@@ -709,12 +769,11 @@ export class LinkConsoleInputGroup extends InputGroup<
       })
     );
 
-    // Add input weight.
-    weightLabel.appendChild(weightInput);
-
     // Add label weight.
     containerChildType.appendChild(weightLabel);
 
+    // Add input weight.
+    containerChildType.appendChild(weightInput);
     return containerChildType;
   };
 
@@ -796,18 +855,18 @@ export class LinkConsoleInputGroup extends InputGroup<
       })
     );
 
-    // Add input weight warning.
-    warningWeightLabel.appendChild(warningWeightInput);
-
     // Add label warning field.
     containerChildType.appendChild(warningWeightLabel);
 
-    // Add input crital weight.
-    criticalWeightLabel.appendChild(criticalWeightInput);
+    // Add input weight warning.
+    containerChildType.appendChild(warningWeightInput);
 
     // Add label weight critical.
     containerChildType.appendChild(criticalWeightLabel);
 
+    // Add input crital weight.
+    containerChildType.appendChild(criticalWeightInput);
+
     return containerChildType;
   };
 }
@@ -829,10 +888,15 @@ export class ImageInputGroup extends InputGroup<
   }
 > {
   protected createContent(): HTMLElement | HTMLElement[] {
+    const generalDiv = document.createElement("div");
+    generalDiv.className = "div-input-group";
+
     const imageKey = this.initialData.imageKey;
     const imageLabel = document.createElement("label");
     imageLabel.textContent = t("Image");
 
+    generalDiv.appendChild(imageLabel);
+
     const divImage = document.createElement("div");
 
     // Create element Spinner.
@@ -840,7 +904,7 @@ export class ImageInputGroup extends InputGroup<
       size: "small",
       spin: true
     });
-    imageLabel.appendChild(spinner);
+    generalDiv.appendChild(spinner);
 
     // Init request
     this.requestData("image-console", {}, (error, data) => {
@@ -850,7 +914,7 @@ export class ImageInputGroup extends InputGroup<
       // Check errors.
       if (error) {
         // Add img error.
-        imageLabel.appendChild(
+        generalDiv.appendChild(
           fontAwesomeIcon(faExclamationCircle, t("Error"), {
             size: "small",
             color: "#e63c52"
@@ -885,16 +949,16 @@ export class ImageInputGroup extends InputGroup<
 
         labelSelect.value = valueImage;
 
-        imageLabel.appendChild(labelSelect);
+        generalDiv.appendChild(labelSelect);
 
         if (valueImage != null) {
           const imageItem = data.find(item => item.name === valueImage);
-          imageLabel.appendChild(this.getImage(imageItem, divImage));
+          generalDiv.appendChild(this.getImage(imageItem, divImage));
         }
       }
     });
 
-    return imageLabel;
+    return generalDiv;
   }
 
   private getImage(
@@ -952,9 +1016,17 @@ export class AgentModuleInputGroup extends InputGroup<
   Partial<ItemProps & WithModuleProps>
 > {
   protected createContent(): HTMLElement | HTMLElement[] {
+    const generalDivAutocomplete = document.createElement("div");
+    generalDivAutocomplete.className = "div-input-group-autocomplete-agent";
+
+    const generalDiv = document.createElement("div");
+    generalDiv.className = "div-input-group";
+
     const agentLabel = document.createElement("label");
     agentLabel.textContent = t("Agent");
 
+    generalDiv.appendChild(agentLabel);
+
     const agentInput = document.createElement("input");
     agentInput.type = "text";
     agentInput.required = true;
@@ -1026,7 +1098,7 @@ export class AgentModuleInputGroup extends InputGroup<
         ? `${item.agentAlias} - ${item.agentAddress}`
         : item.agentAlias;
 
-      agentLabel.appendChild(this.agentModuleInput(item));
+      generalDivAutocomplete.appendChild(this.agentModuleInput(item));
 
       return `${selectedItem || ""}`;
     };
@@ -1035,7 +1107,7 @@ export class AgentModuleInputGroup extends InputGroup<
       ? `${this.initialData.agentAlias} - ${this.initialData.agentAddress}`
       : this.initialData.agentAlias;
 
-    agentLabel.appendChild(
+    generalDiv.appendChild(
       autocompleteInput(
         notEmptyStringOr(initialAutocompleteInput, null),
         handleDataRequested,
@@ -1044,9 +1116,11 @@ export class AgentModuleInputGroup extends InputGroup<
       )
     );
 
+    generalDivAutocomplete.appendChild(generalDiv);
+
     const initialAgentId = parseIntOr(this.initialData.agentId, null);
     if (initialAgentId !== null) {
-      agentLabel.appendChild(
+      generalDivAutocomplete.appendChild(
         this.agentModuleInput({
           agentId: initialAgentId,
           agentName: notEmptyStringOr(this.initialData.agentName, null),
@@ -1062,7 +1136,7 @@ export class AgentModuleInputGroup extends InputGroup<
       );
     }
 
-    return agentLabel;
+    return generalDivAutocomplete;
   }
 
   private agentModuleInput(item: AgentAutocompleteData): HTMLElement {
@@ -1074,10 +1148,15 @@ export class AgentModuleInputGroup extends InputGroup<
       deleteAgentModuleItem.remove();
     }
 
+    const generalDiv = document.createElement("div");
+    generalDiv.id = "select-autocomplete-agent-module";
+    generalDiv.className = "div-input-group";
+
     const agentModuleLabel = document.createElement("label");
-    agentModuleLabel.id = "select-autocomplete-agent-module";
     agentModuleLabel.textContent = t("Module");
 
+    generalDiv.appendChild(agentModuleLabel);
+
     // Create element Spinner.
     const spinner = fontAwesomeIcon(faCircleNotch, t("Spinner"), {
       size: "small",
@@ -1122,11 +1201,11 @@ export class AgentModuleInputGroup extends InputGroup<
           this.initialData.moduleId ||
           0}`;
 
-        agentModuleLabel.appendChild(agentModuleSelect);
+        generalDiv.appendChild(agentModuleSelect);
       }
     });
 
-    return agentModuleLabel;
+    return generalDiv;
   }
 }
 
@@ -2178,21 +2257,23 @@ abstract class VisualConsoleItem<Props extends ItemProps> {
     return new FormContainer(
       this.titleItem(this.props.type),
       [
-        new LabelInputGroup("label", this.props),
-        new PositionInputGroup("position", this.props),
         new SizeInputGroup("size", this.props),
+        new LabelInputGroup("label", this.props),
         new LinkInputGroup("link", this.props),
         new OnTopInputGroup("show-on-top", this.props),
+        new AdvancedOptionsInputGroup("advanced-options", this.props),
+        new PositionInputGroup("position", this.props),
         new ParentInputGroup("parent", this.props),
         new AclGroupInputGroup("acl-group", this.props),
         new CacheExpirationInputGroup("cache-expiration", this.props)
       ],
       [
-        "label",
-        "position",
         "size",
+        "label",
         "link",
         "show-on-top",
+        "advanced-options",
+        "position",
         "parent",
         "acl-group",
         "cache-expiration"
@@ -2207,21 +2288,23 @@ abstract class VisualConsoleItem<Props extends ItemProps> {
     return new FormContainer(
       t("Item"),
       [
-        new LabelInputGroup("label", props),
-        new PositionInputGroup("position", props),
         new SizeInputGroup("size", props),
+        new LabelInputGroup("label", props),
         new LinkInputGroup("link", props),
         new OnTopInputGroup("show-on-top", props),
+        new AdvancedOptionsInputGroup("advanced-options", props),
+        new PositionInputGroup("position", props),
         new ParentInputGroup("parent", props),
         new AclGroupInputGroup("acl-group", props),
         new CacheExpirationInputGroup("cache-expiration", props)
       ],
       [
-        "label",
-        "position",
         "size",
+        "label",
         "link",
         "show-on-top",
+        "advanced-options",
+        "position",
         "parent",
         "acl-group",
         "cache-expiration"

visual_console_client/src/items/ColorCloud.ts

@@ -66,8 +66,13 @@ export function colorCloudPropsDecoder(
  */
 class ColorInputGroup extends InputGroup<Partial<ColorCloudProps>> {
   protected createContent(): HTMLElement | HTMLElement[] {
-    const ColorLabel = document.createElement("label");
-    ColorLabel.textContent = t("Default color");
+    const generalDiv = document.createElement("div");
+    generalDiv.className = "div-input-group";
+
+    const colorLabel = document.createElement("label");
+    colorLabel.textContent = t("Default color");
+
+    generalDiv.appendChild(colorLabel);
 
     const ColorInput = document.createElement("input");
     ColorInput.type = "color";
@@ -83,9 +88,9 @@ class ColorInputGroup extends InputGroup<Partial<ColorCloudProps>> {
       });
     });
 
-    ColorLabel.appendChild(ColorInput);
+    generalDiv.appendChild(ColorInput);
 
-    return ColorLabel;
+    return generalDiv;
   }
 }
 
@@ -94,12 +99,18 @@ type ColorRange = ColorRanges[0];
 
 class RangesInputGroup extends InputGroup<Partial<ColorCloudProps>> {
   protected createContent(): HTMLElement | HTMLElement[] {
+    const generalDiv = document.createElement("div");
+    generalDiv.className = "div-input-group div-ranges-input-group";
+
     const rangesLabel = this.createLabel("Ranges");
+
+    generalDiv.appendChild(rangesLabel);
+
     const rangesControlsContainer = document.createElement("div");
     const createdRangesContainer = document.createElement("div");
 
-    rangesControlsContainer.appendChild(createdRangesContainer);
-    rangesLabel.appendChild(rangesControlsContainer);
+    generalDiv.appendChild(createdRangesContainer);
+    generalDiv.appendChild(rangesControlsContainer);
 
     const colorRanges =
       this.currentData.colorRanges || this.initialData.colorRanges || [];
@@ -159,7 +170,7 @@ class RangesInputGroup extends InputGroup<Partial<ColorCloudProps>> {
       this.initialRangeContainer(handleCreate)
     );
 
-    return rangesLabel;
+    return generalDiv;
   }
 
   private initialRangeContainer(onCreate: (range: ColorRange) => void) {
@@ -217,7 +228,10 @@ class RangesInputGroup extends InputGroup<Partial<ColorCloudProps>> {
     // Button delete.
     const createBtn = document.createElement("a");
     createBtn.appendChild(
-      fontAwesomeIcon(faPlusCircle, t("Create color range"))
+      fontAwesomeIcon(faPlusCircle, t("Create color range"), {
+        size: "small",
+        color: "#565656"
+      })
     );
 
     const handleCreate = () => {
@@ -294,7 +308,12 @@ class RangesInputGroup extends InputGroup<Partial<ColorCloudProps>> {
 
     // Button delete.
     const deleteBtn = document.createElement("a");
-    deleteBtn.appendChild(fontAwesomeIcon(faTrashAlt, t("Delete color range")));
+    deleteBtn.appendChild(
+      fontAwesomeIcon(faTrashAlt, t("Delete color range"), {
+        size: "small",
+        color: "#565656"
+      })
+    );
     deleteBtn.addEventListener("click", onDelete);
 
     rangesContainer.appendChild(deleteBtn);
@@ -409,15 +428,19 @@ export default class ColorCloud extends Item<ColorCloudProps> {
    */
   public getFormContainer(): FormContainer {
     const formContainer = super.getFormContainer();
+    formContainer.removeInputGroup("label");
     formContainer.addInputGroup(
-      new AgentModuleInputGroup("agent-autocomplete", this.props)
+      new AgentModuleInputGroup("agent-autocomplete", this.props),
+      0
+    );
+
+    formContainer.addInputGroup(
+      new ColorInputGroup("color-cloud", this.props),
+      3
     );
     formContainer.addInputGroup(
-      new LinkConsoleInputGroup("link-console", this.props)
-    );
-    formContainer.addInputGroup(new ColorInputGroup("color-cloud", this.props));
-    formContainer.addInputGroup(
-      new RangesInputGroup("ranges-cloud", this.props)
+      new RangesInputGroup("ranges-cloud", this.props),
+      4
     );
 
     return formContainer;

visual_console_client/src/items/ModuleGraph.ts

@@ -106,9 +106,14 @@ export function moduleGraphPropsDecoder(
  */
 class BackgroundTypeInputGroup extends InputGroup<Partial<ModuleGraphProps>> {
   protected createContent(): HTMLElement | HTMLElement[] {
+    const generalDiv = document.createElement("div");
+    generalDiv.className = "div-input-group";
+
     const backgroundTypeLabel = document.createElement("label");
     backgroundTypeLabel.textContent = t("Background color");
 
+    generalDiv.appendChild(backgroundTypeLabel);
+
     const options: {
       value: ModuleGraphProps["backgroundType"];
       text: string;
@@ -141,9 +146,9 @@ class BackgroundTypeInputGroup extends InputGroup<Partial<ModuleGraphProps>> {
       });
     });
 
-    backgroundTypeLabel.appendChild(backgroundTypeSelect);
+    generalDiv.appendChild(backgroundTypeSelect);
 
-    return backgroundTypeLabel;
+    return generalDiv;
   }
 }
 
@@ -154,6 +159,7 @@ class BackgroundTypeInputGroup extends InputGroup<Partial<ModuleGraphProps>> {
 class ChooseTypeInputGroup extends InputGroup<Partial<ModuleGraphProps>> {
   protected createContent(): HTMLElement | HTMLElement[] {
     const divContainer = document.createElement("div");
+    divContainer.className = "div-input-group";
     const radioButtonModuleLabel = document.createElement("label");
     radioButtonModuleLabel.textContent = t("Module Graph");
 
@@ -222,9 +228,17 @@ class ChooseTypeInputGroup extends InputGroup<Partial<ModuleGraphProps>> {
  */
 class CustomGraphInputGroup extends InputGroup<Partial<ModuleGraphProps>> {
   protected createContent(): HTMLElement | HTMLElement[] {
+    const containerGeneralDiv = document.createElement("div");
+    containerGeneralDiv.className = "div-input-group-autocomplete-agent";
+
+    const generalDiv = document.createElement("div");
+    generalDiv.className = "div-input-group";
+
     const customGraphLabel = document.createElement("label");
     customGraphLabel.textContent = t("Custom graph");
 
+    generalDiv.appendChild(customGraphLabel);
+
     const spinner = fontAwesomeIcon(faCircleNotch, t("Spinner"), {
       size: "small",
       spin: true
@@ -278,11 +292,13 @@ class CustomGraphInputGroup extends InputGroup<Partial<ModuleGraphProps>> {
           }
         });
 
-        customGraphLabel.appendChild(customGraphSelect);
+        generalDiv.appendChild(customGraphSelect);
       }
     });
 
-    return customGraphLabel;
+    containerGeneralDiv.appendChild(generalDiv);
+
+    return containerGeneralDiv;
   }
 }
 
@@ -293,9 +309,14 @@ class CustomGraphInputGroup extends InputGroup<Partial<ModuleGraphProps>> {
  */
 class GraphTypeInputGroup extends InputGroup<Partial<ModuleGraphProps>> {
   protected createContent(): HTMLElement | HTMLElement[] {
+    const generalDiv = document.createElement("div");
+    generalDiv.className = "div-input-group";
+
     const graphTypeLabel = document.createElement("label");
     graphTypeLabel.textContent = t("Graph Type");
 
+    generalDiv.appendChild(graphTypeLabel);
+
     const options: {
       value: ModuleGraphProps["graphType"];
       text: string;
@@ -323,18 +344,23 @@ class GraphTypeInputGroup extends InputGroup<Partial<ModuleGraphProps>> {
       });
     });
 
-    graphTypeLabel.appendChild(graphTypeSelect);
+    generalDiv.appendChild(graphTypeSelect);
 
-    return graphTypeLabel;
+    return generalDiv;
   }
 }
 
 // TODO: Document
 class PeriodInputGroup extends InputGroup<Partial<ModuleGraphProps>> {
   protected createContent(): HTMLElement | HTMLElement[] {
+    const generalDiv = document.createElement("div");
+    generalDiv.className = "div-input-group";
+
     const periodLabel = document.createElement("label");
     periodLabel.textContent = t("Period");
 
+    generalDiv.appendChild(periodLabel);
+
     const periodControl = periodSelector(
       this.currentData.period || this.initialData.period || 300,
       null,
@@ -355,9 +381,9 @@ class PeriodInputGroup extends InputGroup<Partial<ModuleGraphProps>> {
       value => this.updateData({ period: value })
     );
 
-    periodLabel.appendChild(periodControl);
+    generalDiv.appendChild(periodControl);
 
-    return periodLabel;
+    return generalDiv;
   }
 }
 
@@ -432,19 +458,12 @@ export default class ModuleGraph extends Item<ModuleGraphProps> {
   public getFormContainer(): FormContainer {
     const formContainer = super.getFormContainer();
     formContainer.addInputGroup(
-      new BackgroundTypeInputGroup("background-type", this.props)
+      new BackgroundTypeInputGroup("background-type", this.props),
+      3
     );
     formContainer.addInputGroup(
-      new GraphTypeInputGroup("graph-type", this.props)
-    );
-    formContainer.addInputGroup(
-      new PeriodInputGroup("period-graph", this.props)
-    );
-    formContainer.addInputGroup(
-      new LinkConsoleInputGroup("link-console", this.props)
-    );
-    formContainer.addInputGroup(
-      new ChooseTypeInputGroup("show-type-graph", this.props)
+      new ChooseTypeInputGroup("show-type-graph", this.props),
+      4
     );
 
     const displayAgent = this.props.customGraphId
@@ -458,13 +477,27 @@ export default class ModuleGraph extends Item<ModuleGraphProps> {
       new AgentModuleInputGroup(
         `agent-autocomplete ${displayAgent}`,
         this.props
-      )
+      ),
+      5
     );
     formContainer.addInputGroup(
       new CustomGraphInputGroup(
         `custom-graph-list ${displayCustom}`,
         this.props
-      )
+      ),
+      6
+    );
+    formContainer.addInputGroup(
+      new GraphTypeInputGroup("graph-type", this.props),
+      7
+    );
+    formContainer.addInputGroup(
+      new PeriodInputGroup("period-graph", this.props),
+      8
+    );
+    formContainer.addInputGroup(
+      new LinkConsoleInputGroup("link-console", this.props),
+      16
     );
     return formContainer;
   }

visual_console_client/src/items/Percentile.ts

@@ -17,7 +17,8 @@ import Item, {
   ItemType,
   ItemProps,
   itemBasePropsDecoder,
-  LinkConsoleInputGroup
+  LinkConsoleInputGroup,
+  AgentModuleInputGroup
 } from "../Item";
 import { InputGroup, FormContainer } from "../Form";
 
@@ -113,9 +114,14 @@ export function percentilePropsDecoder(
  */
 class DiameterInputGroup extends InputGroup<Partial<PercentileProps>> {
   protected createContent(): HTMLElement | HTMLElement[] {
+    const generalDiv = document.createElement("div");
+    generalDiv.className = "div-input-group";
+
     const diameterLabel = document.createElement("label");
     diameterLabel.textContent = t("Diameter");
 
+    generalDiv.appendChild(diameterLabel);
+
     const diameterInput = document.createElement("input");
     diameterInput.type = "number";
     diameterInput.required = true;
@@ -128,9 +134,9 @@ class DiameterInputGroup extends InputGroup<Partial<PercentileProps>> {
       });
     });
 
-    diameterLabel.appendChild(diameterInput);
+    generalDiv.appendChild(diameterInput);
 
-    return diameterLabel;
+    return generalDiv;
   }
 }
 
@@ -141,9 +147,14 @@ class DiameterInputGroup extends InputGroup<Partial<PercentileProps>> {
  */
 class MinValueInputGroup extends InputGroup<Partial<PercentileProps>> {
   protected createContent(): HTMLElement | HTMLElement[] {
+    const generalDiv = document.createElement("div");
+    generalDiv.className = "div-input-group";
+
     const minValueLabel = document.createElement("label");
     minValueLabel.textContent = t("Min Value");
 
+    generalDiv.appendChild(minValueLabel);
+
     const minValueInput = document.createElement("input");
     minValueInput.type = "number";
     minValueInput.required = true;
@@ -158,9 +169,9 @@ class MinValueInputGroup extends InputGroup<Partial<PercentileProps>> {
       });
     });
 
-    minValueLabel.appendChild(minValueInput);
+    generalDiv.appendChild(minValueInput);
 
-    return minValueLabel;
+    return generalDiv;
   }
 }
 
@@ -171,9 +182,14 @@ class MinValueInputGroup extends InputGroup<Partial<PercentileProps>> {
  */
 class MaxValueInputGroup extends InputGroup<Partial<PercentileProps>> {
   protected createContent(): HTMLElement | HTMLElement[] {
+    const generalDiv = document.createElement("div");
+    generalDiv.className = "div-input-group";
+
     const maxValueLabel = document.createElement("label");
     maxValueLabel.textContent = t("Max Value");
 
+    generalDiv.appendChild(maxValueLabel);
+
     const maxValueInput = document.createElement("input");
     maxValueInput.type = "number";
     maxValueInput.required = true;
@@ -188,9 +204,9 @@ class MaxValueInputGroup extends InputGroup<Partial<PercentileProps>> {
       });
     });
 
-    maxValueLabel.appendChild(maxValueInput);
+    generalDiv.appendChild(maxValueInput);
 
-    return maxValueLabel;
+    return generalDiv;
   }
 }
 
@@ -203,9 +219,14 @@ class MaxValueInputGroup extends InputGroup<Partial<PercentileProps>> {
  */
 class TypePercentileInputGroup extends InputGroup<Partial<PercentileProps>> {
   protected createContent(): HTMLElement | HTMLElement[] {
+    const generalDiv = document.createElement("div");
+    generalDiv.className = "div-input-group";
+
     const typeLabel = document.createElement("label");
     typeLabel.textContent = t("Type");
 
+    generalDiv.appendChild(typeLabel);
+
     const options: {
       value: PercentileProps["percentileType"];
       text: string;
@@ -245,9 +266,9 @@ class TypePercentileInputGroup extends InputGroup<Partial<PercentileProps>> {
       });
     });
 
-    typeLabel.appendChild(typeSelect);
+    generalDiv.appendChild(typeSelect);
 
-    return typeLabel;
+    return generalDiv;
   }
 }
 
@@ -259,9 +280,14 @@ class TypePercentileInputGroup extends InputGroup<Partial<PercentileProps>> {
  */
 class ValueToShowInputGroup extends InputGroup<Partial<PercentileProps>> {
   protected createContent(): HTMLElement | HTMLElement[] {
+    const generalDiv = document.createElement("div");
+    generalDiv.className = "div-input-group";
+
     const valueToShowLabel = document.createElement("label");
     valueToShowLabel.textContent = t("Value to show");
 
+    generalDiv.appendChild(valueToShowLabel);
+
     const options: { value: PercentileProps["valueType"]; text: string }[] = [
       { value: "percent", text: t("Percent") },
       { value: "value", text: t("Value") }
@@ -285,9 +311,9 @@ class ValueToShowInputGroup extends InputGroup<Partial<PercentileProps>> {
       });
     });
 
-    valueToShowLabel.appendChild(valueToShowInput);
+    generalDiv.appendChild(valueToShowInput);
 
-    return valueToShowLabel;
+    return generalDiv;
   }
 }
 
@@ -298,9 +324,14 @@ class ValueToShowInputGroup extends InputGroup<Partial<PercentileProps>> {
  */
 class ElementColorInputGroup extends InputGroup<Partial<PercentileProps>> {
   protected createContent(): HTMLElement | HTMLElement[] {
+    const generalDiv = document.createElement("div");
+    generalDiv.className = "div-input-group";
+
     const elementColorLabel = document.createElement("label");
     elementColorLabel.textContent = t("Element color");
 
+    generalDiv.appendChild(elementColorLabel);
+
     const elementColorInput = document.createElement("input");
     elementColorInput.type = "color";
     elementColorInput.required = true;
@@ -314,9 +345,9 @@ class ElementColorInputGroup extends InputGroup<Partial<PercentileProps>> {
       });
     });
 
-    elementColorLabel.appendChild(elementColorInput);
+    generalDiv.appendChild(elementColorInput);
 
-    return elementColorLabel;
+    return generalDiv;
   }
 }
 
@@ -327,9 +358,14 @@ class ElementColorInputGroup extends InputGroup<Partial<PercentileProps>> {
  */
 class ValueColorInputGroup extends InputGroup<Partial<PercentileProps>> {
   protected createContent(): HTMLElement | HTMLElement[] {
+    const generalDiv = document.createElement("div");
+    generalDiv.className = "div-input-group";
+
     const valueColorLabel = document.createElement("label");
     valueColorLabel.textContent = t("Value color");
 
+    generalDiv.appendChild(valueColorLabel);
+
     const valueColorInput = document.createElement("input");
     valueColorInput.type = "color";
     valueColorInput.required = true;
@@ -343,9 +379,9 @@ class ValueColorInputGroup extends InputGroup<Partial<PercentileProps>> {
       });
     });
 
-    valueColorLabel.appendChild(valueColorInput);
+    generalDiv.appendChild(valueColorInput);
 
-    return valueColorLabel;
+    return generalDiv;
   }
 }
 
@@ -356,9 +392,14 @@ class ValueColorInputGroup extends InputGroup<Partial<PercentileProps>> {
  */
 class LabelPercentileInputGroup extends InputGroup<Partial<PercentileProps>> {
   protected createContent(): HTMLElement | HTMLElement[] {
+    const generalDiv = document.createElement("div");
+    generalDiv.className = "div-input-group";
+
     const labelPercentileLabel = document.createElement("label");
     labelPercentileLabel.textContent = t("Label");
 
+    generalDiv.appendChild(labelPercentileLabel);
+
     const labelPercentileInput = document.createElement("input");
     labelPercentileInput.type = "text";
     labelPercentileInput.required = true;
@@ -373,9 +414,9 @@ class LabelPercentileInputGroup extends InputGroup<Partial<PercentileProps>> {
       });
     });
 
-    labelPercentileLabel.appendChild(labelPercentileInput);
+    generalDiv.appendChild(labelPercentileInput);
 
-    return labelPercentileLabel;
+    return generalDiv;
   }
 }
 
@@ -572,34 +613,48 @@ export default class Percentile extends Item<PercentileProps> {
     const formContainer = super.getFormContainer();
     // Delete items groups.
     formContainer.removeInputGroup("size");
-    // TODO: Remove inputGroup label this item.
-    //formContainer.removeInputGroup("label");
+    formContainer.removeInputGroup("label");
 
     // Add new items gropus.
-    formContainer.addInputGroup(new DiameterInputGroup("diameter", this.props));
     formContainer.addInputGroup(
-      new MinValueInputGroup("min-value", this.props)
+      new AgentModuleInputGroup("agent-autocomplete", this.props),
+      1
     );
     formContainer.addInputGroup(
-      new MaxValueInputGroup("max-value", this.props)
+      new DiameterInputGroup("diameter", this.props),
+      2
     );
     formContainer.addInputGroup(
-      new TypePercentileInputGroup("type", this.props)
+      new MinValueInputGroup("min-value", this.props),
+      3
     );
     formContainer.addInputGroup(
-      new ValueToShowInputGroup("value-to-show", this.props)
+      new MaxValueInputGroup("max-value", this.props),
+      4
     );
     formContainer.addInputGroup(
-      new ElementColorInputGroup("element-color", this.props)
+      new TypePercentileInputGroup("type-percentil", this.props),
+      5
     );
     formContainer.addInputGroup(
-      new ValueColorInputGroup("value-color", this.props)
+      new ValueToShowInputGroup("value-to-show", this.props),
+      6
     );
     formContainer.addInputGroup(
-      new LabelPercentileInputGroup("label-percentile", this.props)
+      new ElementColorInputGroup("element-color", this.props),
+      7
     );
     formContainer.addInputGroup(
-      new LinkConsoleInputGroup("link-console", this.props)
+      new ValueColorInputGroup("value-color", this.props),
+      8
+    );
+    formContainer.addInputGroup(
+      new LabelPercentileInputGroup("label-percentile", this.props),
+      9
+    );
+    formContainer.addInputGroup(
+      new LinkConsoleInputGroup("link-console", this.props),
+      16
     );
     return formContainer;
   }

visual_console_client/src/items/StaticGraph.ts

@@ -82,9 +82,14 @@ export function staticGraphPropsDecoder(
  */
 class ShowLastValueInputGroup extends InputGroup<Partial<StaticGraphProps>> {
   protected createContent(): HTMLElement | HTMLElement[] {
+    const generalDiv = document.createElement("div");
+    generalDiv.className = "div-input-group";
+
     const showLastValueLabel = document.createElement("label");
     showLastValueLabel.textContent = t("Show Last Value");
 
+    generalDiv.appendChild(showLastValueLabel);
+
     const options: {
       value: StaticGraphProps["showLastValueTooltip"];
       text: string;
@@ -120,9 +125,9 @@ class ShowLastValueInputGroup extends InputGroup<Partial<StaticGraphProps>> {
       });
     });
 
-    showLastValueLabel.appendChild(showLastValueSelect);
+    generalDiv.appendChild(showLastValueSelect);
 
-    return showLastValueLabel;
+    return generalDiv;
   }
 }
 
@@ -173,16 +178,20 @@ export default class StaticGraph extends Item<StaticGraphProps> {
         ...this.props,
         imageKey: "imageSrc",
         showStatusImg: true
-      })
+      }),
+      3
     );
     formContainer.addInputGroup(
-      new LinkConsoleInputGroup("link-console", this.props)
+      new AgentModuleInputGroup("agent-autocomplete", this.props),
+      4
     );
     formContainer.addInputGroup(
-      new ShowLastValueInputGroup("show-last-value", this.props)
+      new ShowLastValueInputGroup("show-last-value", this.props),
+      5
     );
     formContainer.addInputGroup(
-      new AgentModuleInputGroup("agent-autocomplete", this.props)
+      new LinkConsoleInputGroup("link-console", this.props),
+      13
     );
     return formContainer;
   }

visual_console_client/src/main.css

@@ -92,16 +92,6 @@
   background: rgb(212, 215, 218);
 }
 
-form.visual-console-item-edition > .input-groups {
-  margin-bottom: 50px;
-}
-
-form.visual-console-item-edition > input[type="submit"] {
-  position: absolute;
-  bottom: 5px;
-  right: 15px;
-}
-
 .show-elements {
   display: inline-block;
 }
@@ -109,3 +99,116 @@ form.visual-console-item-edition > input[type="submit"] {
 .hide-elements {
   display: none;
 }
+
+/*Forms*/
+.div-input-group label {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: center;
+  font-size: 12pt;
+  font-family: "lato-bolder", "Open Sans", sans-serif;
+  font-weight: 600;
+  color: #343434;
+  margin-right: 10px;
+}
+.div-input-group label img {
+  margin-left: 4px;
+}
+
+.div-input-group input[type="text"],
+.div-input-group input[type="number"] {
+  height: 25px;
+  font-size: 10pt;
+  background-color: transparent;
+  border: none;
+  border-radius: 0;
+  border-bottom: 1px solid #ccc;
+  font-family: "lato-bolder", "Open Sans", sans-serif;
+  font-weight: lighter;
+  padding: 0px 0px 2px 0px;
+  box-sizing: border-box;
+  margin-right: 10px;
+}
+
+.div-input-group input[type="radio"] {
+  margin-right: 10px;
+  width: 17px;
+  height: 17px;
+}
+
+.div-input-group select {
+  font-family: "lato-bolder", "Open Sans", sans-serif;
+  font-weight: lighter;
+  font-size: 10pt;
+}
+
+.input-groups {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+}
+
+.input-group {
+  width: 100%;
+  margin-bottom: 25px;
+  padding-left: 20px;
+}
+
+.div-ranges-input-group {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+  align-items: start;
+}
+
+.div-ranges-input-group > div {
+  padding-left: 20px;
+  margin-top: 10px;
+}
+
+.div-input-group,
+.div-input-group div div {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: center;
+}
+
+.div-input-group h3 {
+  text-transform: initial;
+  font-family: "lato-bolder", "Open Sans", sans-serif;
+  text-align: center;
+  font-style: italic;
+  text-decoration: underline;
+  margin: 0 auto;
+}
+
+.div-input-group div div a {
+  margin-left: 10px;
+}
+
+.div-input-group-autocomplete-agent {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+  align-items: start;
+  justify-content: space-between;
+  height: 70px;
+}
+
+.div-input-group-inside {
+  padding-left: 20px;
+}
+
+.input-group-link-console {
+  height: 70px;
+}
+
+.show-elements > div.div-input-group-autocomplete-agent {
+  margin-left: 20px;
+}
+
+.img-vc-elements {
+  margin-left: 10px;
+}