From d2436fb9e5f8f512914033a2df33c57545d277a6 Mon Sep 17 00:00:00 2001
From: Xiaofeng An <futureweb2020@yandex.com>
Date: Tue, 5 Feb 2019 15:43:56 -0500
Subject: [PATCH] move hint inside Timeline component

---
 .../public_timeline/public_timeline.js        |  3 +-
 .../public_timeline/public_timeline.vue       | 29 +-------
 src/components/timeline/timeline.js           |  3 +-
 src/components/timeline/timeline.vue          | 73 ++++++++++++-------
 4 files changed, 52 insertions(+), 56 deletions(-)

diff --git a/src/components/public_timeline/public_timeline.js b/src/components/public_timeline/public_timeline.js
index e54e49fa..9b866be8 100644
--- a/src/components/public_timeline/public_timeline.js
+++ b/src/components/public_timeline/public_timeline.js
@@ -4,8 +4,7 @@ const PublicTimeline = {
     Timeline
   },
   computed: {
-    timeline () { return this.$store.state.statuses.timelines.public },
-    currentUser () { return this.$store.state.users.currentUser }
+    timeline () { return this.$store.state.statuses.timelines.public }
   },
   created () {
     this.$store.dispatch('startFetching', 'public')
diff --git a/src/components/public_timeline/public_timeline.vue b/src/components/public_timeline/public_timeline.vue
index 7bbface6..85d42cca 100644
--- a/src/components/public_timeline/public_timeline.vue
+++ b/src/components/public_timeline/public_timeline.vue
@@ -1,32 +1,5 @@
 <template>
-  <div>
-    <div v-if="!currentUser" class="login-hint panel panel-default">
-      <div class="panel-body">
-        <router-link :to="{ name: 'login' }">
-          {{ $t("login.hint") }}
-        </router-link>
-      </div>
-    </div>
-    <Timeline :title="$t('nav.public_tl')" v-bind:timeline="timeline" v-bind:timeline-name="'public'"/>
-  </div>
+  <Timeline :title="$t('nav.public_tl')" v-bind:timeline="timeline" v-bind:timeline-name="'public'"/>
 </template>
 
 <script src="./public_timeline.js"></script>
-
-<style lang="scss">
-@import '../../_variables.scss';
-
-.login-hint {
-  text-align: center;
-  
-  @media all and (min-width: 801px) {
-    display: none;
-  }
-
-  a {
-    display: inline-block;
-    padding: 1em 0px;
-    width: 100%;
-  }
-}
-</style>
diff --git a/src/components/timeline/timeline.js b/src/components/timeline/timeline.js
index 85e0a055..2bbb05f3 100644
--- a/src/components/timeline/timeline.js
+++ b/src/components/timeline/timeline.js
@@ -39,7 +39,8 @@ const Timeline = {
         body: ['timeline-body'].concat(!this.embedded ? ['panel-body'] : []),
         footer: ['timeline-footer'].concat(!this.embedded ? ['panel-footer'] : [])
       }
-    }
+    },
+    currentUser () { return this.$store.state.users.currentUser }
   },
   components: {
     Status,
diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue
index e3eea3bd..74909f6d 100644
--- a/src/components/timeline/timeline.vue
+++ b/src/components/timeline/timeline.vue
@@ -1,33 +1,42 @@
 <template>
-  <div :class="classes.root">
-    <div :class="classes.header">
-      <div class="title">
-        {{title}}
-      </div>
-      <div @click.prevent class="loadmore-error alert error" v-if="timelineError">
-        {{$t('timeline.error_fetching')}}
-      </div>
-      <button @click.prevent="showNewStatuses" class="loadmore-button" v-if="timeline.newStatusCount > 0 && !timelineError">
-        {{$t('timeline.show_new')}}{{newStatusCountStr}}
-      </button>
-      <div @click.prevent class="loadmore-text faint" v-if="!timeline.newStatusCount > 0 && !timelineError">
-        {{$t('timeline.up_to_date')}}
+  <div>
+    <div v-if="!currentUser" class="login-hint panel panel-default">
+      <div class="panel-body">
+        <router-link :to="{ name: 'login' }">
+          {{ $t("login.hint") }}
+        </router-link>
       </div>
     </div>
-    <div :class="classes.body">
-      <div class="timeline">
-        <status-or-conversation v-for="status in timeline.visibleStatuses" :key="status.id" v-bind:statusoid="status" class="status-fadein"></status-or-conversation>
+    <div :class="classes.root">
+      <div :class="classes.header">
+        <div class="title">
+          {{title}}
+        </div>
+        <div @click.prevent class="loadmore-error alert error" v-if="timelineError">
+          {{$t('timeline.error_fetching')}}
+        </div>
+        <button @click.prevent="showNewStatuses" class="loadmore-button" v-if="timeline.newStatusCount > 0 && !timelineError">
+          {{$t('timeline.show_new')}}{{newStatusCountStr}}
+        </button>
+        <div @click.prevent class="loadmore-text faint" v-if="!timeline.newStatusCount > 0 && !timelineError">
+          {{$t('timeline.up_to_date')}}
+        </div>
       </div>
-    </div>
-    <div :class="classes.footer">
-      <div v-if="bottomedOut" class="new-status-notification text-center panel-footer faint">
-        {{$t('timeline.no_more_statuses')}}
+      <div :class="classes.body">
+        <div class="timeline">
+          <status-or-conversation v-for="status in timeline.visibleStatuses" :key="status.id" v-bind:statusoid="status" class="status-fadein"></status-or-conversation>
+        </div>
       </div>
-      <a v-else-if="!timeline.loading" href="#" v-on:click.prevent='fetchOlderStatuses()'>
-        <div class="new-status-notification text-center panel-footer">{{$t('timeline.load_older')}}</div>
-      </a>
-      <div v-else class="new-status-notification text-center panel-footer">
-        <i class="icon-spin3 animate-spin"/>
+      <div :class="classes.footer">
+        <div v-if="bottomedOut" class="new-status-notification text-center panel-footer faint">
+          {{$t('timeline.no_more_statuses')}}
+        </div>
+        <a v-else-if="!timeline.loading" href="#" v-on:click.prevent='fetchOlderStatuses()'>
+          <div class="new-status-notification text-center panel-footer">{{$t('timeline.load_older')}}</div>
+        </a>
+        <div v-else class="new-status-notification text-center panel-footer">
+          <i class="icon-spin3 animate-spin"/>
+        </div>
       </div>
     </div>
   </div>
@@ -56,4 +65,18 @@
   background-color: $fallback--fg;
   background-color: var(--panel, $fallback--fg);
 }
+
+.login-hint {
+  text-align: center;
+  
+  @media all and (min-width: 801px) {
+    display: none;
+  }
+
+  a {
+    display: inline-block;
+    padding: 1em 0px;
+    width: 100%;
+  }
+}
 </style>