Used select dropdown instead of radio input for subscription type

Closes #1485.
altair-graphql · Mar 22, 2021 · c1c6e8d · c1c6e8d
1 parent e0b4505
commit c1c6e8d
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 8 deletions.
diff --git a/...air-app/src/app/components/subscription-url-dialog/subscription-url-dialog.component.html b/...air-app/src/app/components/subscription-url-dialog/subscription-url-dialog.component.html
@@ -18,15 +18,21 @@
       <div class="app-dialog-section">
         <input type="url" class="dialog-input" [value]="subscriptionUrl" (input)="subscriptionUrlInput($event)" placeholder="ws://example.com/subscriptions" />
       </div>
-      <div class="subscription-provider__list">
-        <nz-radio-group [ngModel]="selectedSubscriptionProviderId" (ngModelChange)="updateSubscriptionProviderId($event)">
-          <label
+      <div class="subscription-params-section">
+        <div class="subscription-params-title">{{ 'SUBSCRIPTION_TYPE_TITLE' | translate }}</div>
+        <nz-select
+          class="dialog-select"
+          [ngModel]="selectedSubscriptionProviderId"
+          (ngModelChange)="updateSubscriptionProviderId($event)"
+        >
+          <nz-option
             *ngFor="let provider of subscriptionProviders; trackBy:trackById"
-            nz-radio
             [nzValue]="provider.id"
-          >{{ provider.copyTag | translate }}</label>
-        </nz-radio-group>
+            [nzLabel]="provider.copyTag | translate"
+          ></nz-option>
+        </nz-select>
       </div>
+
       <div class="subscription-params-section">
         <div class="subscription-params-title">{{ 'SUBSCRIPTION_CONNECTION_PARAMS_TEXT' | translate }}</div>
         <div class="subscription-params-editor-wrapper">

diff --git a/packages/altair-app/src/assets/i18n/default.json b/packages/altair-app/src/assets/i18n/default.json
@@ -60,6 +60,7 @@
   "SUBSCRIPTION_URL_TEXT": "Subscription URL",
   "SET_SUBSCRIPTION_URL_TEXT": "Enter the subscription URL for your server below",
   "SUBSCRIPTION_CONNECTION_PARAMS_TEXT": "Connection Parameters (in JSON)",
+  "SUBSCRIPTION_TYPE_TITLE": "Subscription type",
   "SUBSCRIPTION_PROVIDER_WEBSOCKET": "Websocket",
   "SUBSCRIPTION_PROVIDER_APP_SYNC": "AWS AppSync",
   "SUBSCRIPTION_PROVIDER_ACTION_CABLE": "Rails ActionCable",

diff --git a/packages/altair-app/src/scss/_ant-overrides.scss b/packages/altair-app/src/scss/_ant-overrides.scss
@@ -172,6 +172,16 @@
   color: var(--primary-color);
 }
 
+.ant-select:not(.ant-select-customize-input) .ant-select-selector {
+  background: var(--theme-bg-color);
+  border-color: var(--theme-border-color);
+}
+
+.ant-select-focused:not(.ant-select-disabled).ant-select:not(.ant-select-customize-input) .ant-select-selector,
+.ant-select:not(.ant-select-disabled):hover .ant-select-selector {
+  border-color: var(--primary-color);
+}
+
 .ant-radio-wrapper {
   color: var(--theme-font-color);
 }

diff --git a/packages/altair-app/src/scss/components/_dialog.scss b/packages/altair-app/src/scss/components/_dialog.scss
@@ -55,6 +55,9 @@
     color: var(--black-color);
   }
 }
+.dialog-select {
+  border-bottom: 0;
+}
 
 .dialog-textarea {
   width: 100%;

diff --git a/packages/altair-app/src/scss/components/_subscriptions.scss b/packages/altair-app/src/scss/components/_subscriptions.scss
@@ -1,9 +1,10 @@
-.subscription-provider__list {
-  margin-bottom: 10px;
+.subscription-params-section {
+  margin-bottom: 20px;
 }
 
 .subscription-params-title {
   text-transform: uppercase;
   font-size: fontsize(12);
   font-weight: bold;
+  margin-bottom: 5px;
 }