Enhanced the 'Add Host' dialog to provide two different IP address fi…

…elds
ndriqimlahu · May 16, 2024 · 0951a87 · 0951a87
1 parent 30bc01e
commit 0951a87
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 3 deletions.
diff --git a/wasm/index.html b/wasm/index.html
@@ -257,10 +257,19 @@ <h5 id="wasmSpinnerMessage"></h5>
   <div id="addHostDialogOverlay" class="dialog-overlay">
     <dialog id="addHostDialog" class="mdl-dialog">
       <h3 id="addHostDialogTitle" class="mdl-dialog__title">Add Host</h3>
-      <div class="mdl-dialog__content">
+      <div id="ipAddressInputField" class="mdl-dialog__content">
         <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
-          <input type="text" id="enterHostIpAddress" class="mdl-textfield__input" maxlength="15" pattern="[0-9.]*">
-          <label class="mdl-textfield__label" for="enterHostIpAddress">IP Address of Host PC</label>
+          <label class="mdl-textfield__label" for="ipAddressTextInput">IP address of host PC</label>
+          <input type="text" id="ipAddressTextInput" class="mdl-textfield__input" maxlength="15" pattern="[0-9.]*" placeholder="Enter the IP address...">
+        </div>
+      </div>
+      <div id="ipAddressSelectFields" class="mdl-dialog__content">
+        <div class="select-option-field select-option-field-floating-label">
+          <label class="mdl-textfield__label">IP address of host PC</label>
+          <select id="ipAddressField1" name="ipAddressField1" class="ip-address-select-field" tabindex="-1"></select>
+          <select id="ipAddressField2" name="ipAddressField2" class="ip-address-select-field" tabindex="-1"></select>
+          <select id="ipAddressField3" name="ipAddressField3" class="ip-address-select-field" tabindex="-1"></select>
+          <select id="ipAddressField4" name="ipAddressField4" class="ip-address-select-field" tabindex="-1"></select>
         </div>
       </div>
       <div class="mdl-dialog__actions">

diff --git a/wasm/static/css/style.css b/wasm/static/css/style.css
@@ -309,6 +309,48 @@ body {
     margin-top: 10px;
     margin-bottom: 10px;
 }
+#ipAddressInputField {
+    display: block;
+    margin: 15px 0 15px 0;
+}
+#ipAddressInputField .mdl-textfield__label {
+    top: -5px;
+}
+#ipAddressTextInput {
+    font-size: 18px;
+}
+#ipAddressSelectFields {
+    display: none;
+    margin: 15px 0 15px 0;
+}
+#ipAddressSelectFields .mdl-textfield__label {
+    top: -8px;
+}
+.select-option-field {
+    position: relative;
+    display: inline-block;
+    box-sizing: border-box;
+    width: 460px;
+    max-width: 112%;
+    margin: 0;
+    padding: 20px 0;
+    font-size: 16px;
+}
+.select-option-field-floating-label .mdl-textfield__label {
+    color: #00a3c6;
+    font-size: 18px;
+}
+.ip-address-select-field {
+    width: 112px;
+    height: 32px;
+    border-radius: 4px;
+    font-size: 18px;
+    cursor: pointer;
+}
+.ip-address-select-field.hovered, .ip-address-select-field:hover {
+    color: #fff;
+    background-color: #7E818F;
+}
 #pairButton, #showAppsButton {
     margin: 3px;
 }