Introduced a new 'IP address field mode' setting to change the field …

…mode when entering the IP address
ndriqimlahu · May 16, 2024 · 77a0ba3 · 77a0ba3
1 parent c80a926
commit 77a0ba3
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 8 deletions.
diff --git a/wasm/index.html b/wasm/index.html
@@ -128,6 +128,18 @@ <h2 class="host-title mdl-card__title-text">Add Host</h2>
             </div>
           </div>
           <div id="hostSettings" class="settings-options">
+            <div class="setting-option">
+              <label>IP address field mode:</label>
+              <span class="mdl-list__item-text-body">
+                - Recommended for devices that have issues with the TV keyboard when entering the IP address.
+              </span>
+              <div id="ipAddressFieldModeMenu">
+                <label id="ipAddressFieldModeBtn" class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="ipAddressFieldModeSwitch">
+                  <input type="checkbox" id="ipAddressFieldModeSwitch" class="mdl-switch__input" onchange="handleIpAddressFieldMode()">
+                  <span class="mdl-switch__label">Change the field mode when entering the IP address of host PC</span>
+                </label>
+              </div>
+            </div>
             <div class="setting-option">
               <label>Optimize game settings:</label>
               <div id="optimizeGamesMenu">

diff --git a/wasm/static/css/style.css b/wasm/static/css/style.css
@@ -450,9 +450,9 @@ body {
     font-size: 1.4em;
     text-indent: 36px;
 }
-#selectResolution, #selectFramerate, #selectBitrate,
-#optimizeGamesBtn, #externalAudioBtn, #removeAllHostsBtn,
-#selectCodec, #framePacingBtn, #audioSyncBtn, #restartAppBtn, #exitAppBtn {
+#selectResolution, #selectFramerate, #selectBitrate, #ipAddressFieldModeBtn,
+#optimizeGamesBtn, #externalAudioBtn, #removeAllHostsBtn, #selectCodec,
+#framePacingBtn, #audioSyncBtn, #restartAppBtn, #exitAppBtn {
     color: #ececec;
     background-color: #404354;
     width: 100%;
@@ -541,7 +541,7 @@ body {
     margin: 0 46px 2px 25em;
 	float: right;
 }
-#settingsBtn, #supportBtn, #goBackBtn, #optimizeGamesBtn, #externalAudioBtn,
+#settingsBtn, #supportBtn, #goBackBtn, #ipAddressFieldModeBtn, #optimizeGamesBtn, #externalAudioBtn,
 #removeAllHostsBtn, #framePacingBtn, #audioSyncBtn, #restartAppBtn, #exitAppBtn {
     background-color: #404354;
     border-radius: 6px;
@@ -576,10 +576,11 @@ body {
 #settingsBtn:hover, #settingsBtn:focus, #supportBtn:hover, #supportBtn:focus, #goBackBtn:hover, #goBackBtn:focus,
 #restoreDefaultsBtn:hover, #restoreDefaultsBtn:focus, #quitRunningAppBtn:hover, #quitRunningAppBtn:focus,
 #selectResolution:hover, #selectResolution:focus, #selectFramerate:hover, #selectFramerate:focus,
-#selectBitrate:hover, #selectBitrate:focus, #optimizeGamesBtn:hover, #optimizeGamesBtn:focus,
-#externalAudioBtn:hover, #externalAudioBtn:focus, #removeAllHostsBtn:hover, #removeAllHostsBtn:focus,
-#selectCodec:hover, #selectCodec:focus, #framePacingBtn:hover, #framePacingBtn:focus, #audioSyncBtn:hover, #audioSyncBtn:focus,
-#systemInfoBtn:hover, #systemInfoBtn:focus, #restartAppBtn:hover, #restartAppBtn:focus, #exitAppBtn:hover, #exitAppBtn:focus {
+#selectBitrate:hover, #selectBitrate:focus, #ipAddressFieldModeBtn:hover, #ipAddressFieldModeBtn:focus,
+#optimizeGamesBtn:hover, #optimizeGamesBtn:focus, #externalAudioBtn:hover, #externalAudioBtn:focus, 
+#removeAllHostsBtn:hover, #removeAllHostsBtn:focus, #selectCodec:hover, #selectCodec:focus,
+#framePacingBtn:hover, #framePacingBtn:focus, #audioSyncBtn:hover, #audioSyncBtn:focus, #systemInfoBtn:hover, #systemInfoBtn:focus,
+#restartAppBtn:hover, #restartAppBtn:focus, #exitAppBtn:hover, #exitAppBtn:focus {
     background-color: #404354;
     box-shadow: 0 0 2px 4px rgba(0, 163, 198, 1);
 }