refs #165 Show search results

src/renderer/components/TimelineSpace/Contents/Cards/User.vue

@@ -1,5 +1,5 @@
 <template>
-<div class="user" @click="openUser(user)">
+<div class="user" @click="openUser(user)" :style="theme">
   <div class="icon">
     <img :src="user.avatar" />
   </div>
@@ -15,9 +15,20 @@
 </template>
 
 <script>
+import { mapState } from 'vuex'
+
 export default {
   name: 'user',
   props: [ 'user' ],
+  computed: {
+    ...mapState({
+      theme: (state) => {
+        return {
+          '--theme-border-color': state.App.theme.border_color
+        }
+      }
+    })
+  },
   methods: {
     username (account) {
       if (account.display_name !== '') {
@@ -37,10 +48,12 @@ export default {
 
 <style lang="scss" scoped>
 .user {
+  --theme-border-color: #ebeef5;
+
   display: flex;
   box-sizing: border-box;
   padding: 4px 12px 8px;
-  border-bottom: 1px solid #ebeef5;
+  border-bottom: 1px solid var(--theme-border-color);
   cursor: pointer;
 
   .icon {

src/renderer/components/TimelineSpace/Contents/Search.vue

@@ -14,14 +14,19 @@
         <div class="clearfix"></div>
       </el-form>
     </div>
+    <div class="search-result">
+      <search-account></search-account>
+    </div>
   </div>
 </template>
 
 <script>
 import { mapState } from 'vuex'
+import SearchAccount from './Search/Account'
 
 export default {
   name: 'search',
+  components: { SearchAccount },
   data () {
     return {
       target: 'account',

src/renderer/components/TimelineSpace/Contents/Search/Account.vue

@@ -0,0 +1,25 @@
+<template>
+  <div id="search_account">
+    <template v-for="account in results">
+      <user :user="account"></user>
+    </template>
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+import User from '../Cards/User'
+
+export default {
+  name: 'search-account',
+  components: { User },
+  computed: {
+    ...mapState({
+      results: state => state.TimelineSpace.Contents.Search.Account.results
+    })
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+</style>