Timeline 更多細節

app/main.js

@@ -47,10 +47,11 @@ function registerAuthFlow({oauthToken, oauthTokenSecret}) {
 function initializeApp() {
   mainWin = new BrowserWindow({
     x: 100,
-    y: 20,
+    y: 30,
     width: 426,
     height: 817,
     minWidth: 360,
+    maxWidth: 560,
     titleBarStyle: 'hidden-inset'
   });
 
@@ -62,7 +63,6 @@ function initializeApp() {
     installExtension.default(installExtension.VUEJS_DEVTOOLS).then(() => {
       mainWin.openDevTools();
     });
-
   } else {
     mainWin.loadURL(`file://${path.join(__dirname, '../static/index.html')}`);
   }

src/app.js

@@ -5,7 +5,6 @@ import VueRouter from 'vue-router';
 import { webFrame } from 'electron';
 
 import App from './App.vue';
-
 import Timeline from './views/Timeline.vue';
 import PlurkDetail from './views/PlurkDetail.vue';
 import About from './views/About.vue';
@@ -22,7 +21,7 @@ const router = new VueRouter({
       path: '/',
       component: App,
       children: [
-        { path: '',  component: Timeline},
+        { path: '', component: Timeline },
         { path: '/plurks/:plurk_id', component: PlurkDetail },
         { path: '/about/:user_id', component: About }
       ]
@@ -32,5 +31,5 @@ const router = new VueRouter({
 
 new Vue({
   router,
-  el: '#app',
+  el: '#app'
 });

src/components/PlurkCard.vue

@@ -1,22 +1,38 @@
 <template>
-  <div class="plurk-card"  @dblclick="goToDetail" v-if="plurk && user">
-    <div class="timestamp" v-if="showTimestamp">
-      {{ timestamp }}
+  <div class="plurk-container">
+    <div class="posted-date" v-if="plurk.showPostedDate">
+      {{ postedDate }}
     </div>
-    <div class="reply-count" v-if="plurk.response_count > 0" :class="{unread: isUnread}" @click="goToDetail" >
-      {{ plurk.response_count }}
-    </div>
-    <div class="profile">
-      <a class="avatar" @click="goToAbout">
-        <img :src="avatarURL" alt="avatar">
-      </a>
-      <div class="name" @click="goToAbout">
-        {{ user.display_name }}
+    <div class="plurk-card"  @dblclick="goToDetail" v-if="plurk && user">
+      <div class="timestamp" v-if="showTimestamp">
+        {{ timestamp }}
+      </div>
+      <div class="reply-count" v-if="plurk.response_count > 0" :class="{unread: isUnread}" @click="goToDetail" >
+        {{ plurk.response_count }}
+      </div>
+      <div class="profile">
+        <a class="avatar" @click="goToAbout">
+          <img :src="avatarURL" alt="avatar">
+        </a>
+        <div class="name" @click="goToAbout">
+          {{ user.display_name }}
+        </div>
+        <qualifier :qualifierKey="plurk.qualifier" :text="plurk.qualifier_translated"/>
+      </div>
+      <div class="content" v-html="plurk.content" />
+      <div class="actions">
+        <div class="icon">
+          <i class="fa fa-heart" aria-hidden="true"></i>
+        </div>
+
+        <div class="icon">
+          <i class="fa fa-refresh" aria-hidden="true"></i>
+        </div>
+
+        <div class="icon">
+          <i class="fa fa-volume-off" aria-hidden="true"></i>
+        </div>
       </div>
-      <qualifier :qualifierKey="plurk.qualifier" :text="plurk.qualifier_translated"/>
-    </div>
-    <div class="content" v-html="plurk.content" />
-    <div class="actions">
     </div>
   </div>
 </template>
@@ -41,7 +57,11 @@ export default {
       type: Boolean,
       default: true
     },
-    userList: Object
+    userList: Object,
+    showPostedDate: {
+      type: Boolean,
+      default: false
+    }
   },
 
   data () {
@@ -71,6 +91,15 @@ export default {
       return this.postedAt && this.displayTimestamp;
     },
 
+    postedDate() {
+      const formatedDate = this.postedAt.format('YYYY-MM-DD');
+      if (moment().format('YYYY-MM-DD') === formatedDate) {
+        return 'Today';
+      } else {
+        return formatedDate;
+      }
+    },
+
     postedAt() {
       return moment.parseZone(this.plurk.posted);
     },
@@ -90,90 +119,120 @@ export default {
 }
 </script>
 
-<style lang="sass">
-.plurk-card {
-  position: relative;
-  background-color: white;
+<style lang="sass" scoped>
+.plurk-container {
   display: flex;
   flex-direction: column;
-  padding: .5em;
 
   &:not(:first-child) {
     margin: .5em 0;
   }
 
-  .reply-count {
-    position: absolute;
-    background-color: #cecece;
-    color: white;
-    cursor: pointer;
-
-    right: 0;
-    margin-top: -.5em;
-    min-width: 1.3em;
-    height: 1.3em;
+  .posted-date {
+    padding: 0 .5em;
     text-align: center;
-    padding: 0.1em 2px 0 2px;
-
-    &.unread {
-      background-color: #ff002b;
-    }
-  }
-
-  .timestamp {
-    font-size: .8em;
+    margin: 0 auto 5px;
+    font-size: 0.8em;
     color: #cecece;
-    text-align: center;
-    transform: rotate(90deg);
-    width: 3em;
-    right: 0;
-    margin-top: -1em;
-    margin-right: -3.1em;
     background-color: white;
-    border-radius: 5px;
-    position: absolute;
+    overflow: hidden;
+    border-radius: 7px;
   }
 
-  .profile {
+  .plurk-card {
+    position: relative;
+    background-color: white;
     display: flex;
-    flex-direction: row;
+    flex-direction: column;
+    padding: .5em;
 
-    .avatar {
-      width: 2.5em;
-      height: 2.5em;
-      border-radius: 50%;
-      overflow: hidden;
+    .reply-count {
+      position: absolute;
+      background-color: #cecece;
+      color: white;
       cursor: pointer;
 
-      img {
-        width: 100%;
-        height: 100%;
+      right: 0;
+      margin-top: -.5em;
+      min-width: 1.3em;
+      height: 1.3em;
+      text-align: center;
+      padding: 0.1em 2px 0 2px;
+
+      &.unread {
+        background-color: #ff002b;
       }
     }
 
-    .name {
-      height: 2em;
-      margin-top: 0.5em;
-      margin-left: .5em;
-      cursor: pointer;
+    .timestamp {
+      font-size: .8em;
+      color: #cecece;
+      text-align: center;
+      transform: rotate(90deg);
+      padding: 0 .2em;
+      right: 0;
+      margin-top: -1em;
+      margin-right: -2.5em;
+      background-color: white;
+      border-radius: 5px;
+      position: absolute;
     }
 
-  }
+    .profile {
+      display: flex;
+      flex-direction: row;
+
+      .avatar {
+        width: 2.5em;
+        height: 2.5em;
+        border-radius: 50%;
+        overflow: hidden;
+        cursor: pointer;
+
+        img {
+          width: 100%;
+          height: 100%;
+        }
+      }
 
-  .content {
-    margin-top: .5em;
-    font-size: 1em;
-    word-break: break-all;
-  }
+      .name {
+        height: 2em;
+        margin-top: 0.5em;
+        margin-left: .5em;
+        cursor: pointer;
+      }
 
-  a.ex_link.meta {
-    background-color: #f6f8fd;
-    display: flex;
-    border-style: solid;
-    border-color: #e5ebfa;
-    font-size: 0.9em;
-    padding: 2px 5px;
-    margin-bottom: 5px;
+    }
+
+    .content {
+      margin-top: .5em;
+      font-size: 1em;
+      word-break: break-all;
+    }
+
+    a.ex_link.meta {
+      background-color: #f6f8fd;
+      display: flex;
+      border-style: solid;
+      border-color: #e5ebfa;
+      font-size: 0.9em;
+      padding: 2px 5px;
+      margin-bottom: 5px;
+    }
+
+    .actions {
+      display: flex;
+      flex-direction: row;
+      justify-content: flex-start;
+      padding: 0.3em 0;
+      font-size: 1.2em;
+
+      .icon {
+        color: #c2c2c2;
+        margin-right: 1em;
+        cursor: pointer;
+      }
+    }
   }
 }
 </style>

src/components/PlurksContainer.vue

@@ -0,0 +1,44 @@
+<template>
+  <div class="plurks-container">
+    <time-baseline />
+    <plurk-card v-for="plurk in taggedPlurks" :plurk="plurk" :userList="userList" />
+  </div>
+</template>
+
+<script>
+import PlurkCard from '../components/PlurkCard.vue';
+import TimeBaseline from '../components/TimeBaseline.vue';
+
+import { postedDateTagger } from '../helpers/plurkHelper';
+
+export default {
+  name: 'PlurksContainer',
+
+  props: [
+    'plurks',
+    'userList'
+  ],
+
+  components: {
+    PlurkCard,
+    TimeBaseline
+  },
+
+  computed: {
+    taggedPlurks() {
+      return postedDateTagger(this.plurks);
+    }
+  }
+}
+</script>
+
+<style scoped>
+.plurks-container {
+  padding: 0em 1.5em 1em 0.5em;
+
+  overflow-y: scroll;
+  height: 100%;
+
+  background-color: #f5ede8;
+}
+</style>

src/components/Profile.vue

@@ -58,6 +58,7 @@ export default {
   flex-direction: column;
   position: relative;
   padding: 1.2em 1em;
+  min-height: 10em;
 
   // TODO: the color magic
   color: black;

src/helpers/plurkHelper.js

@@ -0,0 +1,22 @@
+import moment from 'moment';
+
+export function postedDateTagger(plurks) {
+  return plurks.map((plurk, index) => {
+    const previousPlurk = plurks[index - 1];
+
+    return {
+      ...plurk,
+      showPostedDate: !(previousPlurk && (formatDate(previousPlurk) === formatDate(plurk)))
+    };
+  });
+}
+
+export function formatDate(plurk) {
+  const formatedDate = moment.parseZone(plurk.posted).format('YYYY-MM-DD');
+
+  if (moment().format('YYYY-MM-DD') === formatedDate) {
+    return 'Today';
+  } else {
+    return formatedDate;
+  }
+}