Show ALPN order #483

web/assets/css/custom.css

@@ -240,6 +240,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

@@ -71,9 +71,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

@@ -94,12 +94,16 @@
             </td>
         </tr>
         <tr>
-            <td>Alpn</td>
+            <td>ALPN</td>
             <td>
                 <a-form-item>
-                    <a-checkbox-group v-model="inbound.stream.tls.alpn">
-                        <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>
             </td>
         </tr>