IT4Change/Ocelot-Social
3
0
Fork 0
mirror of https://github.com/IT4Change/Ocelot-Social.git synced 2025-12-13 07:45:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

Simple Implementation In Stroybook Of SearchInput

Browse Source 
By the way, I added *~ to .gitignore, which are the backups of emacs editor.
See the Storybook of SearchInput.
Problems:
* I found no way to separate the heading of the search results from the first item. Do we have to write a complete new component for this?
* The incoming data must by sorted by type before passed to the component. I added keys searchType and firstType, to identify the type (post/user) (may be as a locale) and to know when I have to place the heading.
This commit is contained in:
Moriz Wahl 2019-11-17 00:01:44 +01:00
parent ee1bc67696
commit f9678a7512
1 changed files with 13 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
webapp/components/SearchInput/SearchInput.vue
View File

@ -37,7 +37,10 @@
@click.capture.native="isOpen = true"
>
<template slot="option" slot-scope="{ option }">
<ds-flex>
<ds-flex v-if="option.firstType" class="search-option-heading">
<ds-text>{{ option.searchType }}</ds-text>
</ds-flex>
<ds-flex v-if="option.searchType === 'Contributions'">
<ds-flex-item class="search-option-label">
<ds-text>{{ option.label | truncate(70) }}</ds-text>
</ds-flex-item>
@ -65,6 +68,11 @@
</ds-flex>
</ds-flex-item>
</ds-flex>
<ds-flex v-if="option.searchType === 'Users'">
<ds-flex-item class="search-option-label">
<ds-text>{{ option.label | truncate(70) }}</ds-text>
</ds-flex-item>
</ds-flex>
</template>
</ds-select>
</div>
@ -265,5 +273,9 @@ export default {
.control {
width: 100%;
}
.search-option-heading {
font-weight: bold;
margin-bottom: 1em;
}
}
</style>