feat: collapse desktop header in scrolling #288

lauramargar · 2023-06-07T10:39:26Z

Motivation and context

Provide the user a better visualization with more space for the results.
We have created a new component (desktop-sub-header) where we add all the elements that we want to be hidden (related-tags, desktop-toolbar and selected-filters). We have also created the animation that we separated into 2 files, collapse-heigth-animation.scss and is-scrolling-up.mixin.ts.

Type of change

Bug fix (non-breaking change that fixes an issue)
New feature (non-breaking change that adds functionality)
Breaking change (fix or feature that causes existing functionality to not work as expected)
Change requires a documentation update

What is the destination branch of this PR?

Main
Other. Specify:

How has this been tested?

When you scroll over the result list, the related tags, toolbar and selected filters should hide.

Replace DesktopHeaderFullPredictive with DesktopHeaderFloatingPredictive in desktop and RelatedTagsFullPredictive with RelatedTagsFloatedPredictive in desktop-sub-header if you want to test this feature with the floating empathize.

jenkins-empathy · 2023-06-07T11:28:51Z

PR #288 preview deployed in https://x.test.empathy.co/preview/288/index.html

CachedaCodes · 2023-06-08T06:59:07Z

src/components/desktop/desktop.vue

@@ -90,7 +100,9 @@
      NoResultsMessage: () => import('../search').then(m => m.NoResultsMessage),
      SelectedFilters: () => import('../search').then(m => m.SelectedFilters),
      SpellcheckMessage: () => import('../search').then(m => m.SpellcheckMessage)
-    }
+    },
+


Remove blank space

CachedaCodes · 2023-06-08T06:59:45Z

src/components/desktop/desktop-sub-header.vue

+
+<script lang="ts">
+  import { defineComponent } from 'vue';
+  //import RelatedTagsFloatedPredictive from './related-tags-floated-predictive.vue';


Remove comment

CachedaCodes · 2023-06-08T06:59:53Z

src/components/desktop/desktop-sub-header.vue

+  export default defineComponent({
+    components: {
+      DesktopToolbar,
+      //RelatedTagsFloatedPredictive,


Remove comment

CachedaCodes · 2023-06-08T08:19:35Z

src/components/collapse-heigth-animation.scss

Make this a wrapper Vue component (not like the the animations components we have in X, but one that applies the classes with a prop)

CachedaCodes · 2023-06-08T08:22:48Z

src/components/desktop/desktop-sub-header.vue

+  >
+    <div class="x-layout__sub-header-content">
+      <DesktopSearchboxAlign class="x-layout-container">
+        <RelatedTagsFullPredictive />


This way if we have to change the type of predictive we use we'll have to change it in two places, change the components structure so it's only one place (maybe with a prop to make things easier, something like this flowchart)

jenkins-empathy · 2023-06-08T10:44:04Z

PR #288 preview deployed in https://x.test.empathy.co/preview/288/index.html

jenkins-empathy · 2023-06-08T12:57:48Z

PR #288 preview deployed in https://x.test.empathy.co/preview/288/index.html

jenkins-empathy · 2023-06-09T07:32:32Z

PR #288 preview deployed in https://x.test.empathy.co/preview/288/index.html

jenkins-empathy · 2023-06-09T07:49:10Z

PR #288 preview deployed in https://x.test.empathy.co/preview/288/index.html

jenkins-empathy · 2023-06-12T14:18:06Z

PR #288 preview deployed in https://x.test.empathy.co/preview/288/index.html

CachedaCodes · 2023-06-08T13:11:23Z

src/components/collapse-heigth-animation.vue

@@ -0,0 +1,44 @@
+<template>
+  <div
+    class="x-collapse"


collapse is too generic, change to collapse-height

CachedaCodes · 2023-06-13T07:31:57Z

src/components/desktop/desktop-sub-header.vue

+    },
+    mixins: [IsScrollingUp],
+    props: {
+      hasScrolled: {


This prop is not being used

CachedaCodes · 2023-06-13T07:35:13Z

src/components/desktop/desktop-top-section.vue

+    <div>
+      <DesktopHeaderFullPredictive />
+    </div>


This wrapping is not needed

Suggested change

<div>

<DesktopHeaderFullPredictive />

</div>

<DesktopHeaderFullPredictive />

CachedaCodes · 2023-06-13T07:37:05Z

src/components/collapse-heigth-animation.vue

Rename to collapse-height-animation

CachedaCodes · 2023-06-13T07:42:52Z

src/components/desktop/desktop-sub-header.vue

+  <CollapseHeigthAnimation
+    class="x-layout-max-width-md desktop:x-layout-min-margin-32 large:x-layout-max-width-lg large:x-layout-min-margin-48"
+    :isExtended="hasScrolled"
+  >
+    <div class="x-layout__sub-header-content">
+      <DesktopSearchboxAlign>
+        <div class="x-layout-item" :class="{ 'x-grid x-grid-cols-6': !isFullPredictive }">
+          <LocationProvider location="predictive_layer">
+            <RelatedTags v-if="$x.relatedTags.length > 0" class="x-pb-24" />
+          </LocationProvider>
+        </div>
+      </DesktopSearchboxAlign>
+
+      <div v-if="!$x.redirections.length && hasSearched">
+        <DesktopToolbar />
+      </div>
+      <div v-if="$x.totalResults > 0 && hasSearched && $x.selectedFilters.length">
+        <SelectedFilters class="x-py-16" />
+      </div>
+    </div>
+  </CollapseHeigthAnimation>


Use the MaxDesktopWidthItem component instead of the CSS classes.
Also x-layout__sub-header-content is not needed anymore.

Suggested change

<CollapseHeigthAnimation

class="x-layout-max-width-md desktop:x-layout-min-margin-32 large:x-layout-max-width-lg large:x-layout-min-margin-48"

:isExtended="hasScrolled"

>

<div class="x-layout__sub-header-content">

<DesktopSearchboxAlign>

<div class="x-layout-item" :class="{ 'x-grid x-grid-cols-6': !isFullPredictive }">

<LocationProvider location="predictive_layer">

<RelatedTags v-if="$x.relatedTags.length > 0" class="x-pb-24" />

</LocationProvider>

</div>

</DesktopSearchboxAlign>

<div v-if="!$x.redirections.length && hasSearched">

<DesktopToolbar />

</div>

<div v-if="$x.totalResults > 0 && hasSearched && $x.selectedFilters.length">

<SelectedFilters class="x-py-16" />

</div>

</div>

</CollapseHeigthAnimation>

<CollapseHeigthAnimation :isExtended="hasScrolled">

<MaxDesktopWidthItem>

<DesktopSearchboxAlign>

<div class="x-layout-item" :class="{ 'x-grid x-grid-cols-6': !isFullPredictive }">

<LocationProvider location="predictive_layer">

<RelatedTags v-if="$x.relatedTags.length > 0" class="x-pb-24" />

</LocationProvider>

</div>

</DesktopSearchboxAlign>

<div v-if="!$x.redirections.length && hasSearched">

<DesktopToolbar />

</div>

<div v-if="$x.totalResults > 0 && hasSearched && $x.selectedFilters.length">

<SelectedFilters class="x-py-16" />

</div>

</MaxDesktopWidthItem>

</CollapseHeigthAnimation>

CachedaCodes · 2023-06-13T08:32:00Z

src/components/is-scrolling-up.mixin.ts

+  @XOn('UserChangedScrollDirection')
+  scrollDirectionChanged(direction: ScrollDirection): void {
+    this.stopsScrollDown = direction === 'UP';
+  }


This will listen to any scroll direction change managed by the scroll module. We should be concerned only by changes on the main scroll. Change the implementation to using the state of the main scroll only.

Suggested change

@XOn('UserChangedScrollDirection')

scrollDirectionChanged(direction: ScrollDirection): void {

this.stopsScrollDown = direction === 'UP';

}

@State('scroll', 'data')

public scrollPositionsMap!: Dictionary<ScrollComponentState>;

protected get mainScrollPosition(): number {

return this.scrollPositionsMap['main-scroll']?.position;

}

CachedaCodes · 2023-06-13T08:34:16Z

src/components/is-scrolling-up.mixin.ts

+    if (this.stopsScrollDown || position < this.scrollOffset) {
+      this.isScrollingUp = true;
+    } else if (!this.stopsScrollDown && position > this.scrollOffset) {
+      this.isScrollingUp = false;
+    }


Use the main scroll state and apply the changes to the property of isScrollingUp.

Suggested change

if (this.stopsScrollDown || position < this.scrollOffset) {

this.isScrollingUp = true;

} else if (!this.stopsScrollDown && position > this.scrollOffset) {

this.isScrollingUp = false;

}

const isScrollingUp = this.scrollPositionsMap['main-scroll']?.direction === 'UP';

if (isScrollingUp || this.mainScrollPosition < this.scrollOffset) {

this. hasScrolledPastThreshold = false;

} else if (!isScrollingUp && this.mainScrollPosition > this.scrollOffset) {

this. hasScrolledPastThreshold = true;

}```

CachedaCodes · 2023-06-13T08:35:23Z

src/components/is-scrolling-up.mixin.ts

+  @XOn(['UserScrolled'])
+  scrollLength(position: number): void {


Convert to watcher and rename function

Suggested change

@XOn(['UserScrolled'])

scrollLength(position: number): void {

@Watch('mainScrollPosition', { deep: true })

updateHasScrolledPastThreshold(): void {

CachedaCodes · 2023-06-13T08:36:56Z

src/components/is-scrolling-up.mixin.ts

+  protected get hasScrolled(): boolean {
+    return this.isScrollingUp;


Update naming

Suggested change

protected get hasScrolled(): boolean {

return this.isScrollingUp;

protected get hasScrolled(): boolean {

return this.hasScrolledPastThreshold;

CachedaCodes · 2023-06-13T08:37:42Z

src/components/is-scrolling-up.mixin.ts

Rename mixing name to something like has-scroll-past-threshold

jenkins-empathy · 2023-06-13T11:04:42Z

PR #288 preview deployed in https://x.test.empathy.co/preview/288/index.html

jenkins-empathy · 2023-06-13T12:01:37Z

PR #288 preview deployed in https://x.test.empathy.co/preview/288/index.html

jenkins-empathy · 2023-06-13T13:06:41Z

PR #288 preview deployed in https://x.test.empathy.co/preview/288/index.html

lauramargar added 3 commits June 6, 2023 15:14

collapse subheader with full and floated predictive

237a28c

fix RTs import

422ee48

separate animation from components

165c911

lauramargar requested a review from a team as a code owner June 7, 2023 10:39

fix related tags import

75d3c55

CachedaCodes suggested changes Jun 8, 2023

View reviewed changes

lauramargar added 2 commits June 8, 2023 12:18

fix PR comments

9b8272f

fix imports

5e7ef7b

change props names

23d9f5f

remove related tags components

7204240

remove related tags components

906a385

bugfix end scroll

49aceb7

CachedaCodes suggested changes Jun 13, 2023

View reviewed changes

lauramargar added 2 commits June 13, 2023 12:07

fix PR comments

4c01590

fix PR comments

e339b58

CachedaCodes added 2 commits June 13, 2023 13:54

Remove x-layout__sub-header-content class

1362b8f

Remove unused prop

a592e81

chore: refactor hasScrolledPastThreshold mixin

2a568b2

CachedaCodes approved these changes Jun 13, 2023

View reviewed changes

CachedaCodes merged commit 979ff84 into main Jun 13, 2023

CachedaCodes deleted the feature/EMP-1003-as-a-shopper-i-want-the-desktop-header-to-collapse-in-scrolling branch June 13, 2023 13:18

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: collapse desktop header in scrolling #288

feat: collapse desktop header in scrolling #288

lauramargar commented Jun 7, 2023

jenkins-empathy bot commented Jun 7, 2023

CachedaCodes Jun 8, 2023

CachedaCodes Jun 8, 2023

CachedaCodes Jun 8, 2023

CachedaCodes Jun 8, 2023

CachedaCodes Jun 8, 2023

jenkins-empathy bot commented Jun 8, 2023

jenkins-empathy bot commented Jun 8, 2023

jenkins-empathy bot commented Jun 9, 2023

jenkins-empathy bot commented Jun 9, 2023

jenkins-empathy bot commented Jun 12, 2023

CachedaCodes Jun 8, 2023

CachedaCodes Jun 13, 2023

CachedaCodes Jun 13, 2023

CachedaCodes Jun 13, 2023

CachedaCodes Jun 13, 2023

CachedaCodes Jun 13, 2023

CachedaCodes Jun 13, 2023

CachedaCodes Jun 13, 2023

CachedaCodes Jun 13, 2023

CachedaCodes Jun 13, 2023

jenkins-empathy bot commented Jun 13, 2023

jenkins-empathy bot commented Jun 13, 2023

jenkins-empathy bot commented Jun 13, 2023

-  @XOn('UserChangedScrollDirection')
-  scrollDirectionChanged(direction: ScrollDirection): void {
-    this.stopsScrollDown = direction === 'UP';
-  }
+  @State('scroll', 'data')
+  public scrollPositionsMap!: Dictionary<ScrollComponentState>;
+  protected get mainScrollPosition(): number {
+    return this.scrollPositionsMap['main-scroll']?.position;
+  }

-    if (this.stopsScrollDown || position < this.scrollOffset) {
-      this.isScrollingUp = true;
-    } else if (!this.stopsScrollDown && position > this.scrollOffset) {
-      this.isScrollingUp = false;
-    }
+   const isScrollingUp = this.scrollPositionsMap['main-scroll']?.direction === 'UP';
+    if (isScrollingUp || this.mainScrollPosition < this.scrollOffset) {
+      this. hasScrolledPastThreshold = false;
+    } else if (!isScrollingUp && this.mainScrollPosition > this.scrollOffset) {
+      this. hasScrolledPastThreshold = true;
+    }```

		@XOn(['UserScrolled'])
		scrollLength(position: number): void {

		protected get hasScrolled(): boolean {
		return this.isScrollingUp;

feat: collapse desktop header in scrolling #288

feat: collapse desktop header in scrolling #288

Conversation

lauramargar commented Jun 7, 2023

Motivation and context

Type of change

What is the destination branch of this PR?

How has this been tested?

jenkins-empathy bot commented Jun 7, 2023

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jenkins-empathy bot commented Jun 8, 2023

jenkins-empathy bot commented Jun 8, 2023

jenkins-empathy bot commented Jun 9, 2023

jenkins-empathy bot commented Jun 9, 2023

jenkins-empathy bot commented Jun 12, 2023

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jenkins-empathy bot commented Jun 13, 2023

jenkins-empathy bot commented Jun 13, 2023

jenkins-empathy bot commented Jun 13, 2023