Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: Create a contextual help to support the user in the different d…
…ataset views (#1913) * add dataset options components * remove unused components * set sidebar items by task * remove old component * refactor sidebar * styles and modal refactor * add help info for explain * update pagination copy * lint and update test * remove icon and title * update test * refactor and clean code after review * update docs link * update snapshot
- Loading branch information
Showing
27 changed files
with
362 additions
and
344 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
62 changes: 62 additions & 0 deletions
62
frontend/components/commons/header/dataset-options/DatasetOptionHelpInfo.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,62 @@ | ||
| <template> | ||
| <div> | ||
| <base-button | ||
| title="Info" | ||
| class="dataset-option__button" | ||
| :class="buttonClass" | ||
| @click="showHelpInfo()" | ||
| > | ||
| <svgicon name="support" width="18" height="18" />Help</base-button | ||
| > | ||
| <component | ||
| :visible="visible" | ||
| @on-close="close()" | ||
| :is="currentTaskHelpInfo" | ||
| /> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script> | ||
| export default { | ||
| props: { | ||
| task: { | ||
| type: String, | ||
| required: true, | ||
| }, | ||
| }, | ||
| data() { | ||
| return { | ||
| visible: false, | ||
| }; | ||
| }, | ||
| computed: { | ||
| currentTaskHelpInfo() { | ||
| return `${this.task}HelpInfo`; | ||
| }, | ||
| buttonClass() { | ||
| return this.visible ? "--active" : null; | ||
| }, | ||
| }, | ||
| methods: { | ||
| showHelpInfo() { | ||
| this.visible = !this.visible; | ||
| }, | ||
| close() { | ||
| this.visible = false; | ||
| }, | ||
| }, | ||
| }; | ||
| </script> | ||
|
|
||
| <style lang="scss" scoped> | ||
| .dataset-option { | ||
| &__button { | ||
| padding: 0; | ||
| color: $primary-color; | ||
| &:hover, | ||
| &.--active { | ||
| color: darken($primary-color, 10%); | ||
| } | ||
| } | ||
| } | ||
| </style> |
41 changes: 41 additions & 0 deletions
41
frontend/components/commons/header/dataset-options/DatasetOptions.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,41 @@ | ||
| <template> | ||
| <div class="dataset-options"> | ||
| <dataset-option-help-info | ||
| class="dataset-options__item" | ||
| v-if="availableHelpInfo" | ||
| :task="task" | ||
| /> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script> | ||
| export default { | ||
| props: { | ||
| dataset: { | ||
| type: Object, | ||
| required: true, | ||
| }, | ||
| }, | ||
| computed: { | ||
| availableHelpInfo() { | ||
| return this.dataset.results.records.some((record) => record.explanation); | ||
| }, | ||
| task() { | ||
| return this.dataset.task; | ||
| }, | ||
| }, | ||
| }; | ||
| </script> | ||
|
|
||
| <style lang="scss" scoped> | ||
| .dataset-options { | ||
| display: flex; | ||
| align-items: center; | ||
| gap: $base-space; | ||
| margin-left: auto; | ||
| &__item { | ||
| display: flex; | ||
| align-items: center; | ||
| } | ||
| } | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.