Show ALPN order

Co-Authored-By: Alireza Ahmadi <[email protected]>

web/assets/css/custom.css

@@ -262,6 +262,7 @@ body {
 .ant-card-dark .ant-collapse-content,
 .ant-card-dark .ant-calendar,
 .ant-card-dark .ant-table-placeholder,
+.ant-card-dark .ant-select-selection__choice,
 .ant-card-dark .ant-input-group-addon {
     color: hsla(0,0%,100%,.65);
     background-color: #262f3d;

web/assets/js/model/xray.js

@@ -78,9 +78,9 @@ const UTLS_FINGERPRINT = {
 };
 
 const ALPN_OPTION = {
-    HTTP1: "http/1.1",
-    H2: "h2",
     H3: "h3",
+    H2: "h2",
+    HTTP1: "http/1.1",
 };
 
 const SNIFFING_OPTION = {

web/html/xui/form/tls_settings.html

@@ -80,9 +80,13 @@
         </a-select>
     </a-form-item>
     <a-form-item label="Alpn">
-        <a-checkbox-group v-model="inbound.stream.tls.alpn" style="width:200px">
-            <a-checkbox v-for="key,value in ALPN_OPTION" :value="key">[[ value ]]</a-checkbox>
-        </a-checkbox-group>
+        <a-select
+            mode="multiple"
+            style="width: 250px"
+            :dropdown-class-name="themeSwitcher.darkCardClass"
+            v-model="inbound.stream.tls.alpn">
+            <a-select-option v-for="alpn in ALPN_OPTION" :value="alpn">[[ alpn ]]</a-select-option>
+        </a-select>
     </a-form-item>
     <br>
     <a-form-item label="Allow insecure">