Filter style update

Scille · Jan 16, 2024 · 6349f08 · 6349f08
1 parent b46253e
commit 6349f08
Show file tree

Hide file tree

Showing 5 changed files with 102 additions and 65 deletions.
diff --git a/client/src/components/core/ms-dropdown/MsDropdown.vue b/client/src/components/core/ms-dropdown/MsDropdown.vue
@@ -109,16 +109,6 @@ function getIcon(): string {
   }
 }
 
-.option {
-  --background-hover: var(--parsec-color-light-primary-50);
-  --color-hover: var(--ion-color-tertiary);
-
-  &.selected {
-    color: var(--parsec-color-light-primary-700);
-    font-weight: bold;
-  }
-}
-
 .dropdown-container {
   // offset necessary to simulate border 3px on focus with outline (outline 2px + border 1px)
   --offset: 2px;

diff --git a/client/src/components/core/ms-sorter/MsSorter.vue b/client/src/components/core/ms-sorter/MsSorter.vue
@@ -5,7 +5,7 @@
     fill="clear"
     @click="openPopover($event)"
     id="select-popover-button"
-    class="filter-button button-medium"
+    class="filter-button button-small"
     :disabled="disabled"
   >
     <ion-icon
@@ -78,14 +78,12 @@ async function onDidDismissPopover(popover: any): Promise<void> {
 .filter-button {
   background: none;
   color: var(--parsec-color-light-primary-700);
-}
-.option {
-  --background-hover: var(--parsec-color-light-primary-50);
-  --color-hover: var(--ion-color-tertiary);
+  height: fit-content;
+  margin-right: 1rem;
+  --background-hover: var(--parsec-color-light-secondary-medium);
 
-  &.selected {
-    color: var(--parsec-color-light-primary-700);
-    font-weight: bold;
+  &::part(native) {
+    padding: 0.5rem;
   }
 }
 .ms-sorter-icon {

diff --git a/client/src/components/core/ms-sorter/MsSorterPopover.vue b/client/src/components/core/ms-sorter/MsSorterPopover.vue
@@ -1,11 +1,11 @@
 <!-- Parsec Cloud (https://parsec.cloud) Copyright (c) BUSL-1.1 2016-present Scille SAS -->
 
 <template>
-  <ion-list class="container">
+  <ion-list class="sorter-container">
     <ion-item
       v-if="sorterLabels"
       id="sort-order-button"
-      class="option body-small"
+      class="order-button body-sm"
       button
       @click="onOptionClick()"
     >
@@ -15,25 +15,27 @@
         slot="end"
       />
     </ion-item>
-    <ion-item
-      class="option body"
-      :class="{ selected: selectedOption?.key === option.key }"
-      :disabled="option.disabled"
-      button
-      lines="none"
-      v-for="option in options.set"
-      :key="option.key"
-      @click="onOptionClick(option)"
-    >
-      {{ option.label }}
-      <ion-icon
-        slot="end"
-        :icon="checkmark"
-        class="checked"
+    <div class="sorter-list">
+      <ion-item
+        class="sorter-list-item body"
         :class="{ selected: selectedOption?.key === option.key }"
-        v-if="selectedOption?.key === option.key"
-      />
-    </ion-item>
+        :disabled="option.disabled"
+        button
+        lines="none"
+        v-for="option in options.set"
+        :key="option.key"
+        @click="onOptionClick(option)"
+      >
+        <span class="body">{{ option.label }}</span>
+        <ion-icon
+          slot="end"
+          :icon="checkmark"
+          class="checked"
+          :class="{ selected: selectedOption?.key === option.key }"
+          v-if="selectedOption?.key === option.key"
+        />
+      </ion-item>
+    </div>
   </ion-list>
 </template>
 
@@ -68,38 +70,83 @@ function onOptionClick(option?: MsOption): void {
 </script>
 
 <style lang="scss" scoped>
-.option {
-  --background-hover: var(--parsec-color-light-primary-50);
-  --background-hover-opacity: 1;
+.sorter-container {
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+#sort-order-button {
+  --background: none;
   --color: var(--parsec-color-light-secondary-grey);
-  --color-hover: var(--parsec-color-light-primary-700);
+  --border-radius: var(--parsec-radius-4);
+  --padding-top: 0.375rem;
+  --padding-bottom: 0.375rem;
+  --padding-start: 0.75rem;
+  --padding-end: 0.75rem;
+  --inner-padding-end: 0;
+  padding: 0.25rem;
+  width: 100%;
+  margin-left: auto;
+  transition: transform 0.2s ease-in-out;
+  border-bottom: 1px solid var(--parsec-color-light-secondary-disabled);
+  cursor: pointer;
 
-  &.selected {
-    color: var(--parsec-color-light-primary-700);
+  &::part(native) {
+    width: auto;
+    margin-left: auto;
   }
-  .checked.selected {
-    color: var(--parsec-color-light-primary-700);
+
+  &:hover {
+    background: var(--parsec-color-light-secondary-background);
+    --background-hover: none;
+    --color-hover: var(--parsec-color-light-secondary-text);
+
+    ion-icon {
+      color: var(--parsec-color-light-secondary-text);
+    }
   }
 
   ion-icon {
-    margin-left: 1em;
+    color: var(--parsec-color-light-secondary-grey);
+    margin: 0;
+    padding-left: 0.375rem;
+    font-size: 1rem;
   }
 }
-#sort-order-button {
-  --background: var(--parsec-color-light-secondary-medium);
-  --color: var(--parsec-color-light-secondary-text);
-  --color-hover: var(--parsec-color-light-secondary-text);
-  --border-radius: 25px;
-  width: fit-content;
-  padding-right: 0.5rem;
-  margin-left: auto;
-  margin-bottom: 0.5rem;
-  --min-height: 2rem;
 
-  ion-icon {
-    margin: 0;
-    padding-left: 0.5rem;
-    font-size: 1.25rem;
+.sorter-list {
+  padding: 0.25rem;
+
+  &-item {
+    --background-hover: var(--parsec-color-light-secondary-medium);
+    --background-hover-opacity: 1;
+    --color: var(--parsec-color-light-secondary-grey);
+    --color-hover: var(--parsec-color-light-secondary-text);
+    --border-radius: var(--parsec-radius-4);
+    --padding-top: 0.25rem;
+    --padding-bottom: 0.25rem;
+    --padding-start: 0.75rem;
+    --padding-end: 0.75rem;
+    --inner-padding-end: 0;
+
+    &.selected {
+      color: var(--parsec-color-light-primary-700);
+      --background-hover: none;
+
+      span {
+        font-weight: 600;
+      }
+    }
+    .checked.selected {
+      color: var(--parsec-color-light-primary-700);
+    }
+
+    ion-icon {
+      margin: 0 0 0 1em;
+      font-size: 1.25rem;
+    }
   }
 }
 </style>
diff --git a/client/src/theme/components/popovers.scss b/client/src/theme/components/popovers.scss
@@ -51,6 +51,7 @@ ion-popover {
 .sorter-popover,
 .dropdown-popover {
   --width: fit-content;
+  --height: fit-content;
 }
 
 /* --- dropdown option popover --- */

diff --git a/client/tests/e2e/specs/test_home_page.ts b/client/tests/e2e/specs/test_home_page.ts
@@ -61,11 +61,12 @@ describe('Check organization list', () => {
     cy.get('@orgList').should('have.length', 5);
     // Change sort order
     cy.get('#organization-filter-select').contains('Organization').click();
-    cy.get('.option').should('have.length', 4);
-    cy.get('.option').eq(2).contains('User Name').click();
+    cy.get('.sorter-container').find('ion-item').as('item').should('have.length', 4);
+    cy.get('@item').should('have.length', 4);
+    cy.get('@item').eq(2).contains('User Name').click();
     cy.get('#organization-filter-select').contains('User Name').click();
-    cy.get('.option').should('have.length', 4);
-    cy.get('.option').first().contains('Ascending').click();
+    cy.get('@item').should('have.length', 4);
+    cy.get('@item').first().contains('Ascending').click();
     // Now sorted by user name desc
     cy.get('@orgList').first().contains('Malloryy McMalloryFace');
     cy.get('@orgList').last().contains('Alicey McAliceFace');