Merge pull request #1311 from appknox/FE-9-Homepage-UI-Revamp

Home Page UI Revamp
appknox · Feb 9, 2024 · abcd24b · abcd24b
2 parents b561e74 + 4f75dc0
commit abcd24b
Show file tree

Hide file tree

Showing 63 changed files with 1,838 additions and 1,520 deletions.
diff --git a/app/components/ak-select/before-option/index.hbs b/app/components/ak-select/before-option/index.hbs
@@ -0,0 +1,25 @@
+{{#if this.optionTitle}}
+  <AkTypography @variant='subtitle1' local-class='before-option-label'>
+    {{this.optionTitle}}
+  </AkTypography>
+{{/if}}
+
+{{#if @searchEnabled}}
+  <div local-class='before-option-search'>
+    <AkTextField
+      @placeholder={{@searchPlaceholder}}
+      @value={{@select.searchText}}
+      {{on 'input' this.handleInput}}
+      {{on 'focus' @onFocus}}
+      {{on 'blur' @onBlur}}
+      {{on 'keyup' this.handleKeydown}}
+      {{did-insert this.focusInput}}
+      {{will-destroy this.clearSearch}}
+      local-class='team-name-text-input'
+    >
+      <:leftAdornment>
+        <AkIcon @iconName='search' @color='textSecondary' />
+      </:leftAdornment>
+    </AkTextField>
+  </div>
+{{/if}}
diff --git a/app/components/ak-select/before-option/index.scss b/app/components/ak-select/before-option/index.scss
@@ -0,0 +1,23 @@
+.before-option-label {
+  height: 35px;
+  display: flex;
+  align-items: center;
+  padding-left: 1em !important;
+  border-bottom: 1px solid var(--ak-select-before-option-border-color);
+}
+
+.before-option-search {
+  border-bottom: 1px solid var(--ak-select-before-option-border-color);
+  :global(.ak-text-field-left-adornment) {
+    margin-left: 0.8em;
+  }
+
+  :global(.ak-text-input-outlined) {
+    border: 0;
+  }
+}
+
+.team-name-text-input {
+  height: 35px !important;
+  font-size: 0.857rem !important;
+}
diff --git a/app/components/ak-select/before-option/index.ts b/app/components/ak-select/before-option/index.ts
@@ -0,0 +1,61 @@
+import { action } from '@ember/object';
+import Component from '@glimmer/component';
+import { Select } from 'ember-power-select/components/power-select';
+import { later, scheduleOnce } from '@ember/runloop';
+import styles from './index.scss';
+
+interface AkSelectBeforeOptionArgs {
+  select: Select;
+  searchPlaceholder?: string;
+  searchEnabled?: boolean;
+  extra?: Record<string, unknown>;
+  autofocus?: boolean;
+  onBlur: (e: FocusEvent) => void;
+  onFocus: (e: FocusEvent) => void;
+  onInput: (e: InputEvent) => boolean;
+  onKeydown: (e: KeyboardEvent) => false | void;
+}
+
+export default class AkSelectBeforeOptionComponent extends Component<AkSelectBeforeOptionArgs> {
+  get optionTitle() {
+    return this.args.extra?.['optionTitle'];
+  }
+
+  @action
+  clearSearch(): void {
+    scheduleOnce('actions', this.args.select.actions, 'search', '');
+  }
+
+  @action
+  focusInput(el: HTMLElement) {
+    later(() => {
+      if (this.args.autofocus !== false) {
+        el.focus();
+      }
+    }, 0);
+  }
+
+  @action
+  handleKeydown(e: KeyboardEvent): false | void {
+    if (this.args.onKeydown(e) === false) {
+      return false;
+    }
+    if (e.keyCode === 13) {
+      this.args.select.actions.close(e);
+    }
+  }
+
+  @action
+  handleInput(event: Event): false | void {
+    const e = event as InputEvent;
+    if (this.args.onInput(e) === false) {
+      return false;
+    }
+  }
+}
+
+declare module '@glint/environment-ember-loose/registry' {
+  export default interface Registry {
+    'AkSelect::BeforeOption': typeof AkSelectBeforeOptionComponent;
+  }
+}
diff --git a/app/components/ak-select/index.hbs b/app/components/ak-select/index.hbs
@@ -20,7 +20,7 @@
     >
       <PowerSelect
         @triggerId={{this.labelId}}
-        @dropdownClass='{{this.classes.dropdown}}'
+        @dropdownClass='{{@dropdownClass}} {{this.classes.dropdown}}'
         @triggerClass='
           {{@triggerClass}}
           {{this.classes.trigger}} 
@@ -37,6 +37,14 @@
         @loadingMessage={{@loadingMessage}}
         @selectedItemComponent={{@selectedItemComponent}}
         @verticalPosition={{or @verticalPosition 'below'}}
+        @searchEnabled={{@searchEnabled}}
+        @searchPlaceholder={{@searchPlaceholder}}
+        @extra={{this.extra}}
+        @search={{@search}}
+        @beforeOptionsComponent={{or
+          @beforeOptionsComponent
+          'ak-select/before-option'
+        }}
         data-test-power-select
         as |option|
       >

diff --git a/app/components/ak-select/index.scss b/app/components/ak-select/index.scss
@@ -41,6 +41,15 @@
   border: 1px solid var(--ak-select-dropdown-border-color) !important;
   z-index: var(--ak-select-dropdown-zIndex) !important;
 
+  :global(.ember-power-select-search) {
+    border-bottom: 1px solid var(--ak-select-option-divider-color);
+
+    :global(.ember-power-select-search-input) {
+      padding: 0;
+      border: 0;
+    }
+  }
+
   :global(.ember-power-select-options) {
     padding: 0.5em 0;
 

diff --git a/app/components/ak-select/index.ts b/app/components/ak-select/index.ts
@@ -17,6 +17,7 @@ interface AkSelectNamedArgs<O> extends PowerSelectArgs {
   label?: string;
   helperText?: string;
   triggerClass?: string;
+  dropdownClass?: string;
   placeholder?: string;
   renderInPlace?: boolean;
   error?: string;
@@ -26,6 +27,13 @@ interface AkSelectNamedArgs<O> extends PowerSelectArgs {
   labelTypographyColor?: AkSelectLabelTypographyColor;
   verticalPosition?: 'above' | 'below' | 'auto';
   options: O[];
+  searchPlaceholder?: string;
+  searchEnabled?: boolean;
+  extra?: Record<string, unknown>;
+  optionTitle?: string;
+  onInput?: (term: string, select: Select, e: Event) => string | false | void;
+  onFocus?: (select: Select, event: FocusEvent) => void;
+  onBlur?: (select: Select, event: FocusEvent) => void;
 }
 
 export interface AkSelectSignature<O> {
@@ -43,6 +51,10 @@ export default class AkSelectComponent<O> extends Component<
     return this.args.labelId || `ak-select-${guidFor(this)}`;
   }
 
+  get extra() {
+    return { ...(this.args.extra || {}), optionTitle: this.args.optionTitle };
+  }
+
   get classes() {
     return {
       dropdown: styles['ak-select-dropdown'],

diff --git a/app/components/ak-svg/project-list-empty.hbs b/app/components/ak-svg/project-list-empty.hbs
@@ -0,0 +1,54 @@
+<svg
+  width='407'
+  height='168'
+  viewBox='0 0 407 168'
+  fill='none'
+  xmlns='http://www.w3.org/2000/svg'
+>
+  <path
+    fill-rule='evenodd'
+    clip-rule='evenodd'
+    d='M258.491 153H86.7924C79.4981 153 73.5849 147.09 73.5849 139.8C73.5849 132.51 79.4981 126.6 86.7924 126.6H13.2075C5.91322 126.6 0 120.69 0 113.4C0 106.11 5.91322 100.2 13.2075 100.2H88.6792C95.9736 100.2 101.887 94.2902 101.887 87C101.887 79.7098 95.9736 73.8 88.6792 73.8H41.5094C34.2151 73.8 28.3019 67.8902 28.3019 60.6C28.3019 53.3098 34.2151 47.4 41.5094 47.4H116.981C109.687 47.4 103.774 41.4902 103.774 34.2C103.774 26.9098 109.687 21 116.981 21H224.528C231.823 21 237.736 26.9098 237.736 34.2C237.736 41.4902 231.823 47.4 224.528 47.4H345.283C352.577 47.4 358.491 53.3098 358.491 60.6C358.491 67.8902 352.577 73.8 345.283 73.8H386.792C394.087 73.8 400 79.7098 400 87C400 94.2902 394.087 100.2 386.792 100.2H350.943C343.649 100.2 337.736 106.11 337.736 113.4C337.736 120.69 343.649 126.6 350.943 126.6H362.264C369.558 126.6 375.472 132.51 375.472 139.8C375.472 147.09 369.558 153 362.264 153H264.151C263.179 153 262.233 152.895 261.321 152.696C260.409 152.895 259.462 153 258.491 153Z'
+    fill='#FFF1EF'
+  />
+  <ellipse cx='394' cy='139.5' rx='13' ry='13.5' fill='#FFF1EF' />
+  <path
+    fill-rule='evenodd'
+    clip-rule='evenodd'
+    d='M181.041 112C180.893 113.043 180.817 114.11 180.817 115.194C180.817 127.693 190.973 137.825 203.5 137.825C216.027 137.825 226.183 127.693 226.183 115.194C226.183 114.11 226.107 113.043 225.959 112H281V162.342C281 165.467 278.461 168 275.329 168H131.671C128.539 168 126 165.467 126 162.342V112H181.041Z'
+    fill='white'
+  />
+  <path
+    fill-rule='evenodd'
+    clip-rule='evenodd'
+    d='M228.073 111.477C228.073 125.021 217.071 136 203.5 136C189.929 136 178.927 125.021 178.927 111.477C178.927 111.039 178.938 110.602 178.961 110.169H126L144.072 56.846C144.851 54.5472 147.012 53 149.443 53H257.557C259.988 53 262.149 54.5472 262.928 56.846L281 110.169H228.039C228.062 110.602 228.073 111.039 228.073 111.477Z'
+    fill='white'
+  />
+  <path
+    fill-rule='evenodd'
+    clip-rule='evenodd'
+    d='M224.481 113.209C224.481 123.652 215.088 134 203.5 134C191.912 134 182.519 123.652 182.519 113.209C182.519 112.87 182.529 110.652 182.548 110.318H143L158.43 72.9656C159.095 71.193 160.94 70 163.017 70H243.983C246.06 70 247.905 71.193 248.57 72.9656L264 110.318H224.452C224.471 110.652 224.481 112.87 224.481 113.209Z'
+    fill='#FFF1EF'
+  />
+  <path
+    fill-rule='evenodd'
+    clip-rule='evenodd'
+    d='M129 110.471V160.683C129 162.515 130.478 164 132.302 164H275.698C277.522 164 279 162.515 279 160.683V110.471L261.086 57.2546C260.632 55.907 259.374 55 257.958 55H150.042C148.626 55 147.368 55.907 146.914 57.2546L129 110.471Z'
+    stroke='#FF4D3F'
+    stroke-width='2.5'
+  />
+  <path
+    d='M152.957 110C160.356 110 168.34 110 176.91 110C180.437 110 180.437 112.449 180.437 113.714C180.437 126.022 190.767 136 203.509 136C216.251 136 226.581 126.022 226.581 113.714C226.581 112.449 226.581 110 230.107 110H277M139 110H143.56H139Z'
+    stroke='#FF4D3F'
+    stroke-width='2.5'
+    stroke-linecap='round'
+    stroke-linejoin='round'
+  />
+  <path
+    d='M251 10.2173L230.122 34M202.094 2V34V2ZM153 10.2173L173.879 34L153 10.2173Z'
+    stroke='#FF4D3F'
+    stroke-width='2.5'
+    stroke-linecap='round'
+    stroke-linejoin='round'
+  />
+</svg>
diff --git a/app/components/ak-text-field/index.hbs b/app/components/ak-text-field/index.hbs
@@ -22,6 +22,7 @@
       <div
         data-test-ak-text-field-left-adornment
         local-class='ak-text-field-left-adornment'
+        class='ak-text-field-left-adornment'
       >
         {{yield to='leftAdornment'}}
       </div>

diff --git a/app/components/file-compare/compare-list/index.hbs b/app/components/file-compare/compare-list/index.hbs
@@ -89,7 +89,7 @@
       {{else if this.hasFiles}}
         <div local-class='file-compare-list-file-overviews'>
           {{#each this.otherFilesInTheProject as |file|}}
-            <FileCompare::FileOverview
+            <FileOverview
               @file={{file}}
               @profileId={{file.profile.id}}
               @isSelectedFile={{eq file.id this.fileToCompare.id}}