Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add Selected Filters in myHistory #332

Merged
merged 23 commits into from
Nov 3, 2023
Merged
Show file tree
Hide file tree
Changes from 16 commits
Commits
Show all changes
23 commits
Select commit Hold shift + click to select a range
292bb01
feat: selected Filters in myHistory
annacv Oct 16, 2023
beb1b80
feat: selected Filters in myHistory
annacv Oct 16, 2023
b2691a9
feat: add line-clamp tailwind plugin
annacv Oct 16, 2023
31011fb
feat: use line-clamp in my history filters
annacv Oct 16, 2023
4015125
feat: add translations
annacv Oct 17, 2023
c43179b
feat: create my-history-filters component
annacv Oct 17, 2023
b583f93
feat: wip showing 2 opt
annacv Oct 17, 2023
7a5e686
chore: update branch
annacv Oct 25, 2023
a2e2555
feat: apply design with line-clamp
annacv Oct 25, 2023
e401ad2
chore: rm unnecessary div
annacv Oct 26, 2023
81c1cd4
feat: st if condition inside custom-my-history
annacv Oct 26, 2023
cceca35
feat: rm unneded component, rm unneded class
annacv Oct 26, 2023
0afd27a
chore: add forgotten if
annacv Oct 26, 2023
59a7de0
fix: rm ?? operator from template
annacv Oct 26, 2023
ed69591
style(my-history): fix show num of filters, fix underline on hover
annacv Oct 26, 2023
d029328
style(my-history): add filters in empathize history queries and fix p…
lauramargar Oct 31, 2023
cc1700f
feat(my-history): create new component for history query filters
lauramargar Nov 2, 2023
856c819
feat(my-history): remove line-clamp dependency
lauramargar Nov 2, 2023
9627342
Merge remote-tracking branch 'origin/main' into feature/EMP-2293-Add-…
lauramargar Nov 2, 2023
6dfe40f
Merge remote-tracking branch 'origin/main' into feature/EMP-2293-Add-…
lauramargar Nov 2, 2023
b78ef52
feat(my-history): fix pr comments
lauramargar Nov 2, 2023
ffc4441
feat(my-history): change history query filters' prop
lauramargar Nov 2, 2023
94aec1e
feat(my-history): underline only the query
lauramargar Nov 2, 2023
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
174 changes: 149 additions & 25 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

3 changes: 2 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -32,10 +32,11 @@
"@empathyco/x-adapter": "^8.0.0-alpha.34",
"@empathyco/x-adapter-platform": "^1.0.0-alpha.88",
"@empathyco/x-archetype-utils": "^1.0.0-alpha.4",
"@empathyco/x-components": "^3.0.0-alpha.422",
"@empathyco/x-components": "^3.0.1-alpha.1",
"@empathyco/x-deep-merge": "^1.3.0-alpha.34",
"@empathyco/x-types": "^10.0.0-alpha.75",
"@empathyco/x-utils": "^1.0.0-alpha.23",
"@tailwindcss/line-clamp": "^0.4.4",
"tslib": "~2.4.1",
"vue": "~2.7.14",
"vue-class-component": "~7.2.6",
Expand Down
20 changes: 18 additions & 2 deletions src/components/my-history/custom-my-history.vue
Original file line number Diff line number Diff line change
Expand Up @@ -20,8 +20,24 @@
>
<HistoryIcon class="max-desktop:x-icon-lg" />

<div class="x-flex x-flex-col x-gap-2">
<p>{{ suggestion.query }}</p>
<div class="x-group x-flex x-flex-col x-gap-2">
<p class="group-hover:x-underline">{{ suggestion.query }}</p>
<div
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is a pretty big chunk that is duplicated here and in the empathize, moving it to it's own component might be a good idea.

v-if="suggestion.selectedFilters && suggestion.selectedFilters.length"
class="x-text1-sm x-flex x-gap-8 x-text-lead-50"
>
<div class="x-line-clamp-1">
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You're still using line clamp instead of truncate.
Also, this should have a width of 320px aprox.

<span
v-for="filter in suggestion.selectedFilters"
:key="filter.id"
class="x-pr-8"
>
{{ filter.label }}
</span>
</div>
<span>({{ suggestion.selectedFilters.length }})</span>
</div>

<p class="x-text1 x-text1-sm x-text-neutral-75">
{{ formatTime(suggestion.timestamp) }}
<template v-if="suggestion.totalResults !== undefined">
Expand Down
26 changes: 25 additions & 1 deletion src/components/predictive-layer/full-width-predictive.vue
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,31 @@
>
<template #default="{ query }">
<HistoryIcon class="x-icon-md" />
<Highlight :text="suggestion.query" :highlight="query" />
<div class="x-group x-flex x-flex-col x-gap-2">
<Highlight
:text="suggestion.query"
:highlight="query"
class="group-hover:x-underline"
/>
<div
v-if="
suggestion.selectedFilters &&
suggestion.selectedFilters.length
"
class="x-text1-sm x-flex x-text-lead-50"
>
<div class="x-line-clamp-1">
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Change this line clamp with truncate

<span
v-for="filter in suggestion.selectedFilters"
:key="filter.id"
class="x-pr-8"
>
{{ filter.label }}
</span>
</div>
<span>({{ suggestion.selectedFilters.length }})</span>
</div>
</div>
</template>

<template #remove-button-content>
Expand Down
3 changes: 3 additions & 0 deletions src/tailwind/plugin-options.js
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,9 @@ module.exports = {
paddingTop: theme('spacing.24'),
paddingBottom: theme('spacing.24')
}
},
'.history-query.suggestion-group:hover': {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This removes the hover decorations to all HQ, including the ones in the empathize.
You can deactivate the text decoration in the history query with tailwind.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is still here and it's not needed

textDecoration: 'none'
}
})
};
2 changes: 1 addition & 1 deletion tailwind.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -10,5 +10,5 @@ module.exports = {
],
prefix: 'x-',
important: true,
plugins: [xTailwindPlugin(options)]
plugins: [xTailwindPlugin(options), require('@tailwindcss/line-clamp')]
};
Loading