Added: active lists in homepage

Modified action bar layout

Author: CircuitCoder

controller/frame.css

@@ -14,13 +14,17 @@
   height: 100px;
   border-top: 1px solid rgba(0,0,0,.12);
 
+  padding: 0 40px;
+
+  display: flex;
+  align-items: center;
+
   background: white;
 
   -webkit-user-select: none;
 }
 
 .title {
-  margin-left: 40px;
   font-size: 32px;
   height: 100%;
   line-height: 100px;
@@ -40,7 +44,6 @@
 }
 
 .actions {
-  margin-right: 40px;
   float: right;
 
   height: 100%;
@@ -161,7 +164,7 @@
 .counter-group {
   display: inline-flex;
   align-items: center;
-  margin-left: 20px;
+  flex: 1;
 }
 
 .counter-group .material-icons {

controller/index.html

@@ -28,6 +28,7 @@
         :search-input="searchInput"
         :alt-hold="altHold"
         :authorized="authorized"
+        :title="title"
 
         @navigate="navigate"
 
@@ -65,7 +66,6 @@
       <!-- So we are using one way binding -->
 
       <div class="action-bar">
-        <div class="title" @click="navigate('home')">{{ title }}</div>
         <div class="counter-group">
           <i class="material-icons">person</i>
           <div class="counter">
@@ -87,6 +87,9 @@
           </div>
         </div>
         <div class="actions">
+          <div class="action" @click="navigate('home')">
+            <i class="material-icons">home</i>
+          </div>
           <div class="action" @click="navigate('seats')">
             <i class="material-icons">event_seat</i>
           </div>

controller/views/home/home.html

@@ -1,10 +1,44 @@
 <div class="view">
-  <div class="view-title">主页</div>
+  <div class="view-title">{{ title }}</div>
   <div class="view-pagetitle clickable" @click="navigateTo('lists')">活跃发言名单</div>
   <div class="list inline">
     <div class="list-item clickable"
-      v-for="list of lists"
-      :class="{ bold: list.timerCurrent && list.timerCurrent.active }">
+      v-for="list of lists | filterBy activeList"
+      :class="{ bold: list.timerCurrent && list.timerCurrent.active }"
+      @click="viewList(list)">
+      <div class="list-item-indicator"></div>
+      <div class="list-item-content list-row">
+        <div class="list-name">
+          {{ list.name }}
+        </div>
+
+        <div class="list-speakers">
+          <div class="list-speakers-current" v-if="list.ptr < list.seats.length">{{ list.seats[list.ptr].name }}</div>
+          <div class="list-speakers-next" v-if="list.ptr < list.seats.length - 1">{{ list.seats[list.ptr + 1].name }}</div>
+        </div>
+
+        <template v-if="list.timerCurrent">
+          <div class="list-timer-icon">
+            <i class="material-icons">person</i>
+          </div>
+          <div class="timer-value-wrapper list-timer">
+            <timer class="timer-left" :time="list.timerCurrent.left"></timer>
+            <span class="timer-value-separator">/</span>
+            <timer class="timer-value" :time="list.timerCurrent.value"></timer>
+          </div>
+        </template>
+
+        <template v-if="list.timerTotal && list.timerTotal.value > 0">
+          <div class="list-timer-icon">
+            <i class="material-icons">access_time</i>
+          </div>
+          <div class="timer-value-wrapper list-timer">
+            <timer class="timer-left" :time="list.timerTotal.left"></timer>
+            <span class="timer-value-separator">/</span>
+            <timer class="timer-value" :time="list.timerTotal.value"></timer>
+          </div>
+        </template>
+      </div>
     </div>
     <div class="list-item empty-hint">无活跃发言名单</div>
   </div>

controller/views/home/home.js

@@ -3,7 +3,7 @@ const fs = require('fs');
 
 const HomeView = Vue.extend({
   template: fs.readFileSync(`${__dirname}/home.html`).toString('utf-8'),
-  props: ['timers', 'votes'],
+  props: ['timers', 'votes', 'lists', 'title'],
 
   methods: {
     navigateTo(dest) {
@@ -14,6 +14,10 @@ const HomeView = Vue.extend({
       return (list.timerCurrent && list.timerCurrent.active) || list.ptr < list.seats.length;
     },
 
+    viewList(list) {
+      this.$dispatch('view-list', list);
+    },
+
     activeStandaloneTimer(timer) {
       return timer.type === 'standalone' && timer.active;
     },