Add icon to toot for visibility & detail action

Add material design icons package for vue component

package-lock.json

@@ -12758,6 +12758,11 @@
         "vue-style-loader": "^4.1.0"
       }
     },
+    "vue-material-design-icons": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/vue-material-design-icons/-/vue-material-design-icons-3.2.0.tgz",
+      "integrity": "sha512-7+VDoSC5bvXXCS3TK/aMShVsVLjJiOoKuyJPCqJOcrM7V/Uv5Nlk4C9ZXSmsuys8aoYRnfC6JmMTw6ZZl2jjlw=="
+    },
     "vue-property-decorator": {
       "version": "8.1.0",
       "resolved": "https://registry.npmjs.org/vue-property-decorator/-/vue-property-decorator-8.1.0.tgz",

package.json

@@ -23,6 +23,7 @@
     "megalodon": "^0.6.3",
     "nedb": "^1.8.0",
     "vue": "^2.6.6",
+    "vue-material-design-icons": "^3.2.0",
     "vue-property-decorator": "^8.0.0"
   },
   "devDependencies": {

src/components/Timeline/Toot.vue

@@ -1,42 +1,71 @@
 <template>
   <div class="toot" :data-status-id="status.id">
-    <div class="tootAvatar">
+    <div class="toot-avatar">
       <!--ここは公開TLなので@clickでユーザー情報表示はない-->
       <img :src="pref.static ? status.account.avatar_static : status.account.avatar">
     </div>
-    <div class="tootUser">
+    <div class="toot-user">
       {{status.account.display_name}}
       <small>@{{status.account.acct}}</small>
     </div>
-    <div class="tootContent" v-html="status.content"></div>
+    <div class="toot-content" v-html="status.content"></div>
-    <div class="tootMedia" v-if="status.media_attachments">
+    <div class="toot-media" v-if="status.media_attachments">
-      <div v-for="(media,mediaId) in status.media_attachments" :key="mediaId" class="tootImg">
+      <div v-for="(media,mediaId) in status.media_attachments" :key="mediaId" class="media-item">
-        <img :src="media.preview_url" @click="showImage(media.url, media.type)">
+        <img
+          v-if="media.type === 'image'"
+          :src="media.preview_url"
+          @click="showImage(media.url, media.type)"
+        >
       </div>
     </div>
-    <div class="tootCard" v-if="status.card">
+    <div class="toot-card" v-if="status.card">
       <template v-if="status.card.description">{{status.card.title}} - {{status.card.description}}</template>
       <template v-else-if="status.card.html" v-html="status.card.html"></template>
     </div>
-    <div class="tootAction">
+    <div class="toot-visibility">
+      <!--公開TLなので常にPublic-->
+      <PublicIcon :size="13"/>
+    </div>
+    <div class="toot-action">
       <!--ここは公開TLなのでふぁぼ等はなし-->
     </div>
+    <div class="toot-subaction">
+      <!--公開TLなので展開はひとまず非表示-->
+      <span class="more-action" v-if="false" @click="isMoreAction = !isMoreAction">
+        <ChangeToNormal :size="16" v-if="isMoreAction"/>
+        <ChangeToAlt :size="16" v-else/>
+      </span>
+      <MoreIcon :size="16"/>
+    </div>
   </div>
 </template>
 
 <script lang="ts">
 import { Component, Prop, Vue } from 'vue-property-decorator'
 import { Status } from 'megalodon'
+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'
 
 interface Preferences {
   static?: boolean
 }
 
-@Component
+@Component({
+  components: {
+    ChangeToAlt,
+    ChangeToNormal,
+    MoreIcon,
+    PublicIcon,
+  }
+})
 export default class Toot extends Vue {
   @Prop() public status!: Status
   @Prop() public prefStatic?: boolean
 
+  public isMoreAction: boolean = false
+
   get pref(): Preferences {
     return {
       static: this.prefStatic
@@ -53,28 +82,46 @@ export default class Toot extends Vue {
 .toot {
   text-align: left;
   display: grid;
-  grid-template-columns: 43px 2fr 1fr;
+  grid-template-columns: 2.7em 2fr 1fr;
-  grid-template-areas: "avatar user user" "avatar content content" "avatar media media" "avatar card card" "avatar action action";
+  grid-template-areas:
-  .tootAvatar {
+    "avatar user    date"
+    "avatar content content"
+    "avatar media   media"
+    "avatar card    card"
+    "vis    action  subaction";
+  .avatar {
     grid-area: avatar;
+    height: 2.7em;
     img {
       width: 100%;
+      height: 100%;
     }
   }
-  .tootUser {
+  .toot-user {
     grid-area: user;
   }
-  .tootContent {
+  .toot-content {
     grid-area: content;
+    /deep/ p {
+      margin: 0;
+    }
   }
-  .tootMedia {
+  .toot-media {
     grid-area: media;
   }
-  .tootCard {
+  .toot-card {
     grid-area: card;
   }
-  .tootAction {
+  .toot-visibility {
-    grid-area: card;
+    grid-area: vis;
+    text-align: center;
+  }
+  .toot-action {
+    grid-area: action;
+  }
+  .toot-subaction {
+    grid-area: subaction;
+    text-align: right;
   }
 }
 </style>