Merge branch 'rewrite-vue' of github:cutls/TheDesk into rewrite-vue

src/components/Timeline/Column.vue

@@ -1,7 +1,9 @@
 <template>
   <div class="timeline">
     <div class="header">
+      <TimnelineIcon :tlType="type" iconSize="70"  class="tl-icon" />
       <div class="tl-name">{{name}}</div>
+      <div class="tl-type">{{type}}</div>
     </div>
     <div class="toot-box">
       <Toot v-for="[id,status] in statuses" :key="id" :status="status" :pref-static="pref.static"/>
@@ -14,6 +16,7 @@ import { ipcRenderer } from "electron"
 import { Component, Prop, Vue } from "vue-property-decorator"
 import { Status } from "megalodon"
 
+import TimnelineIcon from '@/components/Timeline/TimelineIcon.vue'
 import Toot from '@/components/Timeline/Toot.vue'
 
 import "@/extensions/map-sortbyvalue" // Add sortByValue function to Map prototype
@@ -27,7 +30,8 @@ type Statuses = Map<number, Status>
 
 @Component({
   components: {
-    Toot
+    Toot,
+    TimnelineIcon
   }
 })
 export default class Column extends Vue {
@@ -135,10 +139,25 @@ export default class Column extends Vue {
 
   .header {
     top: 0;
+    padding:10px;
     background-color: var(--header);
     filter: brightness(110%);
-
+    display: grid;
+    column-gap: 0.5em;
+    row-gap: 0.3em;
+    grid-template-columns: 70px 1fr 1fr;
+    grid-template-areas:
+    "icon name type"
+    "icon spacer spacer";
+    .tl-icon {
+      grid-area: icon;
+    }
     .tl-name {
+      grid-area: name;
+      height: 60px;
+    }
+    .tl-type {
+      grid-area: type;
       height: 60px;
     }
   }

src/components/Timeline/TimelineIcon.vue

@@ -0,0 +1,40 @@
+<template>
+    <span>
+        <HomeIcon :size="iconSize" v-if="tlType === 'home'"/>
+        <LocalIcon :size="iconSize" v-if="tlType === 'local'"/>
+        <NotifyIcon :size="iconSize" v-if="tlType === 'notify'"/>
+        <DMIcon :size="iconSize" v-if="tlType === 'dm'"/>
+        <FederatedIcon :size="iconSize" v-if="tlType === 'federated'"/>
+        <IntegratedIcon :size="iconSize" v-if="tlType === 'integrated'"/>
+        <LocalPlusIcon :size="iconSize" v-if="tlType === 'localPlus'"/>
+    </span>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue } from "vue-property-decorator"
+
+import HomeIcon from 'vue-material-design-icons/Home.vue'
+import LocalIcon from 'vue-material-design-icons/Account.vue'
+import NotifyIcon from 'vue-material-design-icons/Bell.vue'
+import DMIcon from 'vue-material-design-icons/Email.vue'
+import FederatedIcon from 'vue-material-design-icons/Earth.vue'
+import IntegratedIcon from 'vue-material-design-icons/SourceMerge.vue'
+import LocalPlusIcon from 'vue-material-design-icons/CallMerge.vue'
+
+
+@Component({
+  components: {
+    HomeIcon,
+    LocalIcon,
+    NotifyIcon,
+    DMIcon,
+    FederatedIcon,
+    IntegratedIcon,
+    LocalPlusIcon
+  }
+})
+export default class TimnelineIcon extends Vue {
+  @Prop() public tlType!: string
+  @Prop() public iconSize!: number
+}
+</script>

src/components/Timeline/Toot.vue

@@ -25,8 +25,10 @@
       <template v-else-if="status.card.html" v-html="status.card.html"></template>
     </div>
     <div class="toot-visibility">
-      <!--公開TLなので常にPublic-->
+      <PublicIcon :size="13" v-if="status.visibility === 'public'"/>
-      <PublicIcon :size="13"/>
+      <UnlistedIcon :size="13" v-if="status.visibility === 'unlisted'"/>
+      <PrivateIcon :size="13" v-if="status.visibility === 'private'"/>
+      <DirectIcon :size="13" v-if="status.visibility === 'direct'"/>
     </div>
     <div class="toot-action">
       <!--ここは公開TLなのでふぁぼ等はなし-->
@@ -49,6 +51,9 @@ import ChangeToAlt from 'vue-material-design-icons/ChevronDown.vue'
 import ChangeToNormal from 'vue-material-design-icons/ChevronUp.vue'
 import MoreIcon from 'vue-material-design-icons/DotsVertical.vue'
 import PublicIcon from 'vue-material-design-icons/Earth.vue'
+import UnlistedIcon from 'vue-material-design-icons/LockOpen.vue'
+import PrivateIcon from 'vue-material-design-icons/Lock.vue'
+import DirectIcon from 'vue-material-design-icons/Email.vue'
 
 interface Preferences {
   static?: boolean
@@ -83,6 +88,9 @@ interface MediaMeta {
     ChangeToNormal,
     MoreIcon,
     PublicIcon,
+    UnlistedIcon,
+    PrivateIcon,
+    DirectIcon
   }
 })
 export default class Toot extends Vue {