Polish the contact view UI.

Jigsaw-Code · Oct 6, 2023 · 3f98062 · 3f98062
1 parent 813fbba
commit 3f98062
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 7 deletions.
diff --git a/src/www/ui_components/app-root.js b/src/www/ui_components/app-root.js
@@ -65,6 +65,11 @@ export class AppRoot extends mixinBehaviors([AppLocalizeBehavior], PolymerElemen
       <style>
         :host {
           --app-toolbar-height: 40px;
+          --app-toolbar-gutter: 8px;
+          --app-toolbar-button-gutter: 12px;
+          --app-header-height: 56px;
+          --contact-view-gutter: calc(var(--app-toolbar-gutter) + var(--app-toolbar-button-gutter));
+          --contact-view-max-width: 400px;
           --light-green: #2fbea5;
           --medium-green: #009688;
           --dark-green: #263238;
@@ -77,13 +82,13 @@ export class AppRoot extends mixinBehaviors([AppLocalizeBehavior], PolymerElemen
         }
 
         app-header {
-          height: 56px;
+          height: var(--app-header-height);
         }
 
         app-toolbar {
           height: var(--app-toolbar-height);
           color: #fff;
-          padding: 8px;
+          padding: var(--app-toolbar-gutter);
           background: var(--dark-green);
           text-align: center;
           display: flex;
@@ -103,6 +108,7 @@ export class AppRoot extends mixinBehaviors([AppLocalizeBehavior], PolymerElemen
         app-toolbar paper-button {
           /* make the ink color (used for tap animations) actually visible */
           --paper-icon-button-ink-color: #eff;
+          padding: var(--app-toolbar-button-gutter);
         }
 
         #app-toolbar-left,

diff --git a/src/www/views/contact_view/index.ts b/src/www/views/contact_view/index.ts
@@ -45,9 +45,13 @@ export class ContactView extends LitElement {
   static styles = [
     css`
       :host {
+        color: var(--outline-text-color);
         display: block;
         font-family: var(--outline-font-family);
-        padding: var(--outline-gutter);
+        margin: 0 auto;
+        max-width: var(--contact-view-max-width);
+        padding: var(--contact-view-gutter, var(--outline-gutter));
+        width: 100%;
       }
 
       mwc-circular-progress {
@@ -57,11 +61,25 @@ export class ContactView extends LitElement {
         transform: translate(-50%, -50%);
       }
 
+      h1 {
+        font-size: 1rem;
+      }
+
       ol {
         list-style-type: none;
+        padding-inline-start: 0;
       }
 
       mwc-select {
+        /**
+         * The '<app-header-layout>' restricts the stacking context, which means
+         * the select dropdown will get stacked underneath the header.
+         * See https://github.com/PolymerElements/app-layout/issues/279. Setting
+         * a maximum height will make the dropdown small enough to not run into
+         * this issue.
+         */
+        --mdc-menu-max-height: 200px;
+        --mdc-menu-max-width: var(--contact-view-max-width);
         width: 100%;
       }
 
@@ -164,6 +182,11 @@ export class ContactView extends LitElement {
   reset() {
     this.isFormSubmitting = false;
     this.showIssueSelector = false;
+    this.openTicketSelectionOptions.forEach(element => {
+      if (!element.ref.value) return;
+      element.ref.value.checked = false;
+      element.ref.value.disabled = false;
+    });
     this.step = Step.ISSUE_WIZARD;
     this.formValues = {};
   }
@@ -198,7 +221,7 @@ export class ContactView extends LitElement {
   }
 
   private get renderIntroTemplate(): TemplateResult {
-    return html`<p>${this.localize('contact-view-intro')}</p>`;
+    return html`<h1 class="intro">${this.localize('contact-view-intro')}</h1>`;
   }
 
   private get renderForm(): TemplateResult | typeof nothing {
@@ -259,6 +282,7 @@ export class ContactView extends LitElement {
             .label=${this.localize('contact-view-issue')}
             outlined
             ?hidden=${!this.showIssueSelector}
+            ?fixedMenuPosition=${true}
             @selected="${this.selectIssue}"
           >
             ${ContactView.ISSUES[this.variant].map(value => {

diff --git a/src/www/views/contact_view/stories.ts b/src/www/views/contact_view/stories.ts
@@ -35,16 +35,18 @@ export default {
         defaultValue: AppType.CLIENT,
       },
     },
-    onSupportContacted: {action: 'SupportContacted'},
+    onSuccess: {action: 'success'},
+    onError: {action: 'error'},
   },
 };
 
-export const Example = ({variant, onSupportContacted}: {variant: AppType; onSupportContacted: Function}) =>
+export const Example = ({variant, onSuccess, onError}: {variant: AppType; onSuccess: Function; onError: Function}) =>
   html`
     <contact-view
       .localize=${localize}
       .variant=${variant}
       .errorReporter=${{report: console.log}}
-      @SupportContacted=${onSupportContacted}
+      @success=${onSuccess}
+      @error=${onError}
     ></contact-view>
   `;