[Modern UI] Update Remote Desktop Settings dialog style (#7299)
Habetdin committed
Sep 26, 2025 at 19:29 UTC
c7d096a0e5b9de898a86c59cf2614ee7ba17614e
2 files changed
+132
-81
public/styles/style-bootstrap.css
+6
-13
@@ -622,10 +622,10 @@ body {
622
}
623
624
625
-#d7bitmapquality, #d7bitmapquality, #d7bitmapscaling, #d7framelimiter, #d7desktopmode, #d7rdpsize, #d7encoding {
626
- float: right;
627
- width: 200px;
628
- height: 20px;
625
+#d3upload, #d3localmode {
626
+ margin: 3px 0 3px 0;
627
+ display: flex;
628
+ justify-content: space-between;
629
}
630
631
#dialog7 h4 {
@@ -633,16 +633,9 @@ body {
633
border-bottom: 1px solid gray;
634
}
635
636
-#d7meshkvm div, #d7amtkvm div, #d7rdpkvm div, #d3upload, #d3localmode {
637
- margin: 3px 0 3px 0;
638
- display: flex;
639
- justify-content: space-between;
640
-}
641
-
642
-#d7otherset, #d7rdpflags {
636
+#d7otherset, #d7otherset2, #d7rdpflags {
637
border: 1px solid #666;
644
- width: 230px;
645
- height: 100px;
638
+ max-height: 180px;
639
overflow-y: scroll;
640
}
641
views/default3.handlebars
+126
-68
@@ -1776,21 +1776,20 @@
1776
<input id="d4LineBreakButton" class="btn btn-primary me-1 mb-1" type="button" value="Windows" onclick="d4ToggleLineBreak()" />
1777
<textarea id=d4editorarea autocomplete="off" style="height:calc(100vh - 286px);width:100%;overflow:scroll;resize:none;white-space:pre"></textarea>
1778
</div>
1779
- <div id=dialog7 style="">
1780
- <div class="dtab">
1781
- <button id="td7meshkvm" class="tablinks" onclick="changeDesktopSettingsTab(event, 'd7meshkvm')">Agent</button>
1782
- <button id="td7rdpkvm" class="tablinks" onclick="changeDesktopSettingsTab(event, 'd7rdpkvm')">RDP</button>
1783
- <button id="td7amtkvm" class="tablinks" onclick="changeDesktopSettingsTab(event, 'd7amtkvm')">Intel® AMT</button>
1779
+ <div id=dialog7 class="tab-content" style="">
1780
+ <div class="nav nav-pills mb-3">
1781
+ <button id="td7meshkvm" class="nav-link" onclick="changeDesktopSettingsTab(event, 'd7meshkvm')">Agent</button>
1782
+ <button id="td7rdpkvm" class="nav-link" onclick="changeDesktopSettingsTab(event, 'd7rdpkvm')">RDP</button>
1783
+ <button id="td7amtkvm" class="nav-link" onclick="changeDesktopSettingsTab(event, 'd7amtkvm')">Intel® AMT</button>
1784
</div>
1785
- <div id="d7meshkvm" class="tabcontent">
1785
+ <div id="d7meshkvm" class="tab-pane">
1786
<!--<h4>Agent Remote Desktop</h4>-->
1787
- <div style="margin-top:8px">
1788
- <div>Quality</div>
1789
- <select id="d7bitmapquality" dir="rtl"></select>
1787
+ <div class="form-floating mb-2">
1788
+ <select id="d7bitmapquality" class="form-select"></select>
1789
+ <label for="d7bitmapquality">Quality</label>
1790
</div>
1791
- <div>
1792
- <div>Scaling</div>
1793
- <select id="d7bitmapscaling" style="" dir="rtl">
1791
+ <div class="form-floating mb-2">
1792
+ <select id="d7bitmapscaling" class="form-select">
1793
<option selected=selected value=1024>100%</option>
1794
<option value=896>87.5%</option>
1795
<option value=768>75%</option>
@@ -1800,62 +1799,89 @@
1799
<option value=256>25%</option>
1800
<option value=128>12.5%</option>
1801
</select>
1802
+ <label for="d7bitmapscaling">Scaling</label>
1803
</div>
1804
- <div>
1805
- <div>Frame rate</div>
1806
- <select id="d7framelimiter" dir="rtl">
1804
+ <div class="form-floating mb-2">
1805
+ <select id="d7framelimiter" class="form-select">
1806
<option selected=selected value=50>Fast</option>
1807
<option value=100>Medium</option>
1808
<option value=400>Slow</option>
1809
<option value=1000>Very slow</option>
1810
</select>
1811
+ <label for="d7framelimiter">Frame rate</label>
1812
</div>
1813
- <div>
1814
- <div>Encoding</div>
1815
- <select id="d7encoding" dir="rtl">
1813
+ <div class="form-floating mb-2">
1814
+ <select id="d7encoding" class="form-select">
1815
<option value=1>JPEG</option>
1816
<option value=2>PNG</option>
1817
<option value=3>TIFF</option>
1818
<option selected=selected value=4>WEBP</option>
1819
</select>
1820
+ <label for="d7encoding">Encoding</label>
1821
</div>
1822
- <div id="d7desktopOtherSettings">
1823
- <div>Other Settings</div>
1824
- <div id="d7otherset2" style="display:block">
1825
- <label style="display:block"><input type="checkbox" id="d7deskSwapMouse" />Swap Mouse Buttons</label>
1826
- <label style="display:block"><input type="checkbox" id="d7deskrmw" />Reverse Mouse Wheel</label>
1827
- <label style="display:block"><input type="checkbox" id="d7deskRemoteKeyMap" />Use Remote Keyboard Map</label>
1828
- <label style="display:block" id="d7deskAutoClipboardLabel"><input type="checkbox" id="d7deskAutoClipboard" />Automatic Clipboard</label>
1829
- <label style="display:block" id="d7deskAutoLockLabel"><input type="checkbox" id="d7deskAutoLock" />Lock on Disconnect</label>
1822
+ <fieldset id="d7desktopOtherSettings">
1823
+ <legend>Other Settings</legend>
1824
+ <div id="d7otherset2" class="p-2">
1825
+ <div class="form-check">
1826
+ <input id="d7deskSwapMouse" class="form-check-input me-2" type="checkbox" />
1827
+ <label for="d7deskSwapMouse" class="form-check-label">Swap Mouse Buttons</label>
1828
+ </div>
1829
+ <div class="form-check">
1830
+ <input id="d7deskrmw" class="form-check-input me-2" type="checkbox" />
1831
+ <label for="d7deskrmw" class="form-check-label">Reverse Mouse Wheel</label>
1832
+ </div>
1833
+ <div class="form-check">
1834
+ <input id="d7deskRemoteKeyMap" class="form-check-input me-2" type="checkbox" />
1835
+ <label for="d7deskRemoteKeyMap" class="form-check-label">Use Remote Keyboard Map</label>
1836
+ </div>
1837
+ <div id="d7deskAutoClipboardLabel" class="form-check">
1838
+ <input id="d7deskAutoClipboard" class="form-check-input me-2" type="checkbox" />
1839
+ <label for="d7deskAutoClipboard" class="form-check-label">Automatic Clipboard</label>
1840
+ </div>
1841
+ <div id="d7deskAutoLockLabel" class="form-check">
1842
+ <input id="d7deskAutoLock" class="form-check-input me-2" type="checkbox" />
1843
+ <label for="d7deskAutoLock" class="form-check-label">Lock on Disconnect</label>
1844
+ </div>
1845
</div>
1831
- </div>
1846
+ </fieldset>
1847
</div>
1833
- <div id="d7amtkvm" class="tabcontent">
1848
+ <div id="d7amtkvm" class="tab-pane">
1849
<!--<h4>Intel® AMT Hardware KVM</h4>-->
1835
- <div style="margin-top:8px">
1836
- <div>Image Encoding</div>
1837
- <select id="d7desktopmode">
1850
+ <div class="form-floating mb-2">
1851
+ <select id="d7desktopmode" class="form-select">
1852
<option value="1">RLE8, Fastest</option>
1853
<option value="2">RLE16, Recommended</option>
1854
<option value="3">RAW8, Slow</option>
1855
<option value="4">RAW16, Very Slow</option>
1856
</select>
1857
+ <label for="d7desktopmode">Image Encoding</label>
1858
</div>
1844
- <div>
1845
- <div>Other Settings</div>
1846
- <div id="d7otherset" style="display:block">
1847
- <label style="display:block"><input type="checkbox" id="d7showfocus" />Show Focus Tool</label>
1848
- <label style="display:block"><input type="checkbox" id="d7showcursor" />Show Local Mouse Cursor</label>
1849
- <label style="display:block"><input type="checkbox" id="d7localKeyMap" />Local Keyboard Map</label>
1850
- <label style="display:block"><input type="checkbox" id="d7kvmrmw" />Reverse Mouse Wheel</label>
1859
+ <fieldset>
1860
+ <legend>Other Settings</legend>
1861
+ <div id="d7otherset" class="p-2">
1862
+ <div class="form-check">
1863
+ <input id="d7showfocus" class="form-check-input me-2" type="checkbox" />
1864
+ <label for="d7showfocus" class="form-check-label">Show Focus Tool</label>
1865
+ </div>
1866
+ <div class="form-check">
1867
+ <input id="d7showcursor" class="form-check-input me-2" type="checkbox" />
1868
+ <label for="d7showcursor" class="form-check-label">Show Local Mouse Cursor</label>
1869
+ </div>
1870
+ <div class="form-check">
1871
+ <input id="d7localKeyMap" class="form-check-input me-2" type="checkbox" />
1872
+ <label for="d7localKeyMap" class="form-check-label">Local Keyboard Map</label>
1873
+ </div>
1874
+ <div class="form-check">
1875
+ <input id="d7kvmrmw" class="form-check-input me-2" type="checkbox" />
1876
+ <label for="d7kvmrmw" class="form-check-label">Reverse Mouse Wheel</label>
1877
+ </div>
1878
</div>
1852
- </div>
1879
+ </fieldset>
1880
</div>
1854
- <div id="d7rdpkvm" class="tabcontent">
1881
+ <div id="d7rdpkvm" class="tab-pane">
1882
<!--<h4>Remote Desktop Protocol</h4>-->
1856
- <div style="margin-top:8px">
1857
- <div>Display Size</div>
1858
- <select id="d7rdpsize">
1883
+ <div class="form-floating mb-2">
1884
+ <select id="d7rdpsize" class="form-select">
1885
<option notransval=1 value="canvas">Canvas Size</option>
1886
<option notransval=1 value="browser">Browser Size</option>
1887
<option notransval=1 value="screen">Screen Size</option>
@@ -1867,23 +1893,57 @@
1893
<option notransval=1 value="1680x1050">1680x1050</option>
1894
<option notransval=1 value="1920x1080">1920x1080</option>
1895
</select>
1896
+ <label for="d7rdpsize">Display Size</label>
1897
</div>
1871
- <div>
1872
- <div>Options</div>
1873
- <div id="d7rdpflags" style="display:block">
1874
- <label style="display:block"><input type="checkbox" id="d7rdp1" />Disable Wallpaper</label>
1875
- <label style="display:block"><input type="checkbox" id="d7rdp2" />Disable Full Window Drag</label>
1876
- <label style="display:block"><input type="checkbox" id="d7rdp3" />Disable Menu Animations</label>
1877
- <label style="display:block"><input type="checkbox" id="d7rdp4" />Disable Theming</label>
1878
- <label style="display:block"><input type="checkbox" id="d7rdp6" />Disable Cursor Shadow</label>
1879
- <label style="display:block"><input type="checkbox" id="d7rdp7" />Disable Cursor Settings</label>
1880
- <label style="display:block"><input type="checkbox" id="d7rdp8" />Enable Font Smoothing</label>
1881
- <label style="display:block"><input type="checkbox" id="d7rdp9" />Enable Desktop Composision</label>
1882
- <label style="display:block"><input type="checkbox" id="d7rdpclip" />Automatic Clipboard</label>
1883
- <label style="display:block"><input type="checkbox" id="d7rdpsmb" />Swap Mouse Buttons</label>
1884
- <label style="display:block"><input type="checkbox" id="d7rdprmw" />Reverse Mouse Wheel</label>
1898
+ <fieldset>
1899
+ <legend>Options</legend>
1900
+ <div id="d7rdpflags" class="p-2">
1901
+ <div class="form-check">
1902
+ <input id="d7rdp1" class="form-check-input me-2" type="checkbox" />
1903
+ <label for="d7rdp1" class="form-check-label">Disable Wallpaper</label>
1904
+ </div>
1905
+ <div class="form-check">
1906
+ <input id="d7rdp2" class="form-check-input me-2" type="checkbox" />
1907
+ <label for="d7rdp2" class="form-check-label">Disable Full Window Drag</label>
1908
+ </div>
1909
+ <div class="form-check">
1910
+ <input id="d7rdp3" class="form-check-input me-2" type="checkbox" />
1911
+ <label for="d7rdp3" class="form-check-label">Disable Menu Animations</label>
1912
+ </div>
1913
+ <div class="form-check">
1914
+ <input id="d7rdp4" class="form-check-input me-2" type="checkbox" />
1915
+ <label for="d7rdp4" class="form-check-label">Disable Theming</label>
1916
+ </div>
1917
+ <div class="form-check">
1918
+ <input id="d7rdp6" class="form-check-input me-2" type="checkbox" />
1919
+ <label for="d7rdp6" class="form-check-label">Disable Cursor Shadow</label>
1920
+ </div>
1921
+ <div class="form-check">
1922
+ <input id="d7rdp7" class="form-check-input me-2" type="checkbox" />
1923
+ <label for="d7rdp7" class="form-check-label">Disable Cursor Settings</label>
1924
+ </div>
1925
+ <div class="form-check">
1926
+ <input id="d7rdp8" class="form-check-input me-2" type="checkbox" />
1927
+ <label for="d7rdp8" class="form-check-label">Enable Font Smoothing</label>
1928
+ </div>
1929
+ <div class="form-check">
1930
+ <input id="d7rdp9" class="form-check-input me-2" type="checkbox" />
1931
+ <label for="d7rdp9" class="form-check-label">Enable Desktop Composision</label>
1932
+ </div>
1933
+ <div class="form-check">
1934
+ <input id="d7rdpclip" class="form-check-input me-2" type="checkbox" />
1935
+ <label for="d7rdpclip" class="form-check-label">Automatic Clipboard</label>
1936
+ </div>
1937
+ <div class="form-check">
1938
+ <input id="d7rdpsmb" class="form-check-input me-2" type="checkbox" />
1939
+ <label for="d7rdpsmb" class="form-check-label">Swap Mouse Buttons</label>
1940
+ </div>
1941
+ <div class="form-check">
1942
+ <input id="d7rdprmw" class="form-check-input me-2" type="checkbox" />
1943
+ <label for="d7rdprmw" class="form-check-label">Reverse Mouse Wheel</label>
1944
+ </div>
1945
</div>
1886
- </div>
1946
+ </fieldset>
1947
</div>
1948
</div>
1949
</div>
@@ -10527,20 +10587,18 @@
10587
}
10588
10589
function changeDesktopSettingsTab(evt, tabname) {
10530
- // Declare all variables
10531
- var i, tabcontent, tablinks;
10590
+ var i, dialog, tabcontent, tablinks;
10591
+
10592
+ dialog = Q("dialog7");
10593
10533
- // Get all elements with class="tabcontent" and hide them
10534
- tabcontent = document.getElementsByClassName('tabcontent');
10535
- for (i = 0; i < tabcontent.length; i++) { tabcontent[i].style.display = 'none'; }
10594
+ tabcontent = dialog.getElementsByClassName('tab-pane');
10595
+ for (i = 0; i < tabcontent.length; i++) { tabcontent[i].className = tabcontent[i].className.replace(' active', ''); }
10596
10537
- // Get all elements with class="tablinks" and remove the class "active"
10538
- tablinks = document.getElementsByClassName('tablinks');
10597
+ tablinks = dialog.getElementsByClassName('nav-link');
10598
for (i = 0; i < tablinks.length; i++) { tablinks[i].className = tablinks[i].className.replace(' active', ''); }
10599
10541
- // Show the current tab, and add an "active" class to the button that opened the tab
10542
- document.getElementById(tabname).style.display = 'block';
10543
- if (evt != null) { evt.currentTarget.className += ' active'; } else { document.getElementById('t' + tabname).className += ' active'; }
10600
+ Q(tabname).className += ' active';
10601
+ Q('t' + tabname).className += ' active';
10602
}
10603
10604
function showDesktopSettingsChanged() {