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

Created Folder For SearchInput And Changed Paths

Browse Source
This commit is contained in:
Moriz Wahl 2019-11-16 20:59:51 +01:00
parent 79596ab375
commit 6b68e18be6
1 changed files with 195 additions and 253 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -37,25 +37,7 @@
@click.capture.native="isOpen = true" @click.capture.native="isOpen = true"
> >
<template slot="option" slot-scope="{ option }"> <template slot="option" slot-scope="{ option }">
<ds-flex v-if="option.heading" class="search-option-heading"> <ds-flex>
<ds-flex-item>
<ds-heading soft size="h5">{{ option.heading }}</ds-heading>
</ds-flex-item>
</ds-flex>
<ds-flex v-else-if="option.searchType === 'Users'">
<ds-flex-item class="search-option">
<ds-avatar class="avatar" name="option.name" image="option.avatar" />
<div>
<ds-text class="userinfo">
<b class="username">{{ option.label | truncate(70) }}</b>
</ds-text>
</div>
<ds-text align="left" size="small" color="soft">
@{{ option.slug | truncate(70) }}
</ds-text>
</ds-flex-item>
</ds-flex>
<ds-flex v-else>
<ds-flex-item class="search-option-label"> <ds-flex-item class="search-option-label">
<ds-text>{{ option.label | truncate(70) }}</ds-text> <ds-text>{{ option.label | truncate(70) }}</ds-text>
</ds-flex-item> </ds-flex-item>
@ -76,8 +58,7 @@
<ds-flex-item> <ds-flex-item>
<ds-text size="small" color="softer" align="right"> <ds-text size="small" color="softer" align="right">
{{ option.author.name | truncate(32) }} - {{ option.author.name | truncate(32) }} -
{{ option.createdAt }} {{ option.createdAt | dateTime('dd.MM.yyyy') }}
<!-- removed | dateTime('dd.MM.yyyy') -->
</ds-text> </ds-text>
</ds-flex-item> </ds-flex-item>
</ds-flex> </ds-flex>
@ -91,9 +72,9 @@
</template> </template>
<script> <script>
import { isEmpty } from 'lodash' import { isEmpty } from 'lodash'
export default { export default {
name: 'SearchInput', name: 'SearchInput',
props: { props: {
id: { id: {
@ -155,7 +136,6 @@
}, },
onSelect(item) { onSelect(item) {
this.isOpen = false this.isOpen = false
console.log('onSelect', item)
this.$emit('select', item) this.$emit('select', item)
this.$nextTick(() => { this.$nextTick(() => {
this.searchValue = this.lastSearchTerm this.searchValue = this.lastSearchTerm
@ -183,7 +163,7 @@
} }
}, },
/** /**
* TODO: on enter we should go to a dedicated search page!? * TODO: on enter we should go to a dedicated seach page!?
*/ */
onEnter(e) { onEnter(e) {
// this.isOpen = false // this.isOpen = false
@ -202,11 +182,11 @@
this.searchValue = '' this.searchValue = ''
}, },
}, },
} }
</script> </script>
<style lang="scss"> <style lang="scss">
.search { .search {
display: flex; display: flex;
align-self: center; align-self: center;
width: 100%; width: 100%;
@ -284,43 +264,5 @@
.control { .control {
width: 100%; width: 100%;
} }
.search-option-heading { }
font-weight: bold;
cursor: default;
background-color:white;
padding: 0;
}
.avatar {
display: inline-block;
float: left;
margin-right: 4px;
height: 100%;
vertical-align: middle;
}
.userinfo {
display: flex;
align-items: center;
> .ds-text {
display: flex;
align-items: center;
margin-left: $space-xx-small;
}
}
.user {
white-space: nowrap;
position: relative;
display: flex;
align-items: center;
&:hover,
&.active {
z-index: 999;
}
}
.username {
color: #17b53f;
}
}
</style> </style>