From 015bf78dd9b17a1eac11119e38d8e83be8d791ae Mon Sep 17 00:00:00 2001
From: shpuld <shpuld@gmail.com>
Date: Sun, 26 Feb 2017 22:36:54 +0200
Subject: Heading text floats left, initial attempt at load more in the right
 side of the heading.

---
 src/components/timeline/timeline.vue | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

(limited to 'src/components/timeline/timeline.vue')

diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue
index 45886f6c..078d954c 100644
--- a/src/components/timeline/timeline.vue
+++ b/src/components/timeline/timeline.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="timeline">
     <a href="#" v-on:click.prevent='showNewStatuses()' v-if="timeline.newStatusCount > 0">
-      <div class="base01-background base05-border new-status-notification">
+      <div class="base00-background base05-border new-status-notification">
         <p class="text-center" >
           {{timeline.newStatusCount}} new statuses
         </p>
@@ -22,12 +22,18 @@
 <style lang="scss">
  .new-status-notification {
    border-style: solid;
-   border-width: 1px 0 1px 0;
+   float: right;
+   border-width: 1px 1px 0px 1px;
+   border-radius: 5px 5px 0 0;
    font-size: 1.1em;
+   margin-top: -2.08em;
+   margin-right: 0.8em;
+   max-width: 200px;
+   max-height: 2em;
 
    p {
      margin: 0px;
-     padding: 10px;
+     padding: 0.6em;
    }
  }
 </style>
-- 
cgit v1.2.3-70-g09d2


From a4c58aab13db901197ec20ef2bc8b79578141b92 Mon Sep 17 00:00:00 2001
From: Roger Braun <roger@rogerbraun.net>
Date: Wed, 1 Mar 2017 20:36:37 +0100
Subject: Unify notice timelines to make changes easier.

---
 .../friends_timeline/friends_timeline.vue          |  7 +----
 src/components/mentions/mentions.vue               |  7 +----
 .../public_and_external_timeline.vue               |  7 +----
 src/components/public_timeline/public_timeline.vue |  7 +----
 src/components/timeline/timeline.js                |  3 +-
 src/components/timeline/timeline.vue               | 35 ++++++++++++----------
 6 files changed, 26 insertions(+), 40 deletions(-)

(limited to 'src/components/timeline/timeline.vue')

diff --git a/src/components/friends_timeline/friends_timeline.vue b/src/components/friends_timeline/friends_timeline.vue
index afe5cc89..3bf3b543 100644
--- a/src/components/friends_timeline/friends_timeline.vue
+++ b/src/components/friends_timeline/friends_timeline.vue
@@ -1,10 +1,5 @@
 <template>
-  <div class="timeline panel panel-default">
-    <div class="panel-heading base01-background base04">Friends Timeline</div>
-    <div class="panel-body">
-      <Timeline v-bind:timeline="timeline" v-bind:timeline-name="'friends'"/>
-    </div>
-  </div>
+  <Timeline :title="'Friends'" v-bind:timeline="timeline" v-bind:timeline-name="'friends'"/>
 </template>
 
 <script src="./friends_timeline.js"></script>
diff --git a/src/components/mentions/mentions.vue b/src/components/mentions/mentions.vue
index 59f00241..7af402ce 100644
--- a/src/components/mentions/mentions.vue
+++ b/src/components/mentions/mentions.vue
@@ -1,10 +1,5 @@
 <template>
-  <div class="timeline panel panel-default">
-    <div class="panel-heading base01-background base04">Mentions</div>
-    <div class="panel-body">
-      <Timeline v-bind:timeline="timeline" v-bind:timeline-name="'mentions'"/>
-    </div>
-  </div>
+  <Timeline :title="'Mentions'" v-bind:timeline="timeline" v-bind:timeline-name="'mentions'"/>
 </template>
 
 <script src="./mentions.js"></script>
diff --git a/src/components/public_and_external_timeline/public_and_external_timeline.vue b/src/components/public_and_external_timeline/public_and_external_timeline.vue
index bda51153..fd696938 100644
--- a/src/components/public_and_external_timeline/public_and_external_timeline.vue
+++ b/src/components/public_and_external_timeline/public_and_external_timeline.vue
@@ -1,10 +1,5 @@
 <template>
-  <div class="timeline panel panel-default">
-    <div class="panel-heading base01-background base04">THE WHOLE KNOWN NETWORK</div>
-    <div class="panel-body">
-      <Timeline v-bind:timeline="timeline" v-bind:timeline-name="'publicAndExternal'"/>
-    </div>
-  </div>
+  <Timeline :title="'THE WHOLE KNOWN NETWORK'"v-bind:timeline="timeline" v-bind:timeline-name="'publicAndExternal'"/>
 </template>
 
 <script src="./public_and_external_timeline.js"></script>
diff --git a/src/components/public_timeline/public_timeline.vue b/src/components/public_timeline/public_timeline.vue
index d05695b2..bd6a23ed 100644
--- a/src/components/public_timeline/public_timeline.vue
+++ b/src/components/public_timeline/public_timeline.vue
@@ -1,10 +1,5 @@
 <template>
-  <div class="timeline panel panel-default">
-    <div class="panel-heading base01-background base04">Public Timeline</div>
-    <div class="panel-body">
-      <Timeline v-bind:timeline="timeline" v-bind:timeline-name="'public'"/>
-    </div>
-  </div>
+  <Timeline :title="'Public Timeline'" v-bind:timeline="timeline" v-bind:timeline-name="'public'"/>
 </template>
 
 <script src="./public_timeline.js"></script>
diff --git a/src/components/timeline/timeline.js b/src/components/timeline/timeline.js
index addd0255..b4e80fe1 100644
--- a/src/components/timeline/timeline.js
+++ b/src/components/timeline/timeline.js
@@ -5,7 +5,8 @@ import StatusOrConversation from '../status_or_conversation/status_or_conversati
 const Timeline = {
   props: [
     'timeline',
-    'timelineName'
+    'timelineName',
+    'title'
   ],
   components: {
     Status,
diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue
index 45886f6c..15ac5ff8 100644
--- a/src/components/timeline/timeline.vue
+++ b/src/components/timeline/timeline.vue
@@ -1,20 +1,25 @@
 <template>
-  <div class="timeline">
-    <a href="#" v-on:click.prevent='showNewStatuses()' v-if="timeline.newStatusCount > 0">
-      <div class="base01-background base05-border new-status-notification">
-        <p class="text-center" >
-          {{timeline.newStatusCount}} new statuses
-        </p>
+  <div class="timeline panel panel-default">
+    <div class="panel-heading base01-background base04">{{title}}</div>
+    <div class="panel-body">
+      <div class="timeline">
+        <a href="#" v-on:click.prevent='showNewStatuses()' v-if="timeline.newStatusCount > 0">
+          <div class="base01-background base05-border new-status-notification">
+            <p class="text-center" >
+              {{timeline.newStatusCount}} new statuses
+            </p>
+          </div>
+        </a>
+        <status-or-conversation v-for="status in timeline.visibleStatuses" :key="status.id" v-bind:statusoid="status"></status-or-conversation>
+        <a href="#" v-on:click.prevent='fetchOlderStatuses()' v-if="!timeline.loading">
+          <div class="base01-background base05-border new-status-notification">
+            <p class="text-center" >
+              Load older statuses.
+            </p>
+          </div>
+        </a>
       </div>
-    </a>
-    <status-or-conversation v-for="status in timeline.visibleStatuses" :key="status.id" v-bind:statusoid="status"></status-or-conversation>
-    <a href="#" v-on:click.prevent='fetchOlderStatuses()' v-if="!timeline.loading">
-      <div class="base01-background base05-border new-status-notification">
-        <p class="text-center" >
-          Load older statuses.
-        </p>
-      </div>
-    </a>
+    </div>
   </div>
 </template>
 <script src="./timeline.js"></script>
-- 
cgit v1.2.3-70-g09d2


From a4ebf44f242fd877506dcdadf035840168e16364 Mon Sep 17 00:00:00 2001
From: shpuld <shpuld@gmail.com>
Date: Mon, 6 Mar 2017 23:51:39 +0200
Subject: Fix overlapping styles in timeline and notifications that screwed up
 user-card.

---
 src/components/notifications/notifications.scss |  2 +-
 src/components/notifications/notifications.vue  |  2 +-
 src/components/timeline/timeline.vue            | 17 +++++++++--------
 3 files changed, 11 insertions(+), 10 deletions(-)

(limited to 'src/components/timeline/timeline.vue')

diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss
index 1378e730..8e3e0721 100644
--- a/src/components/notifications/notifications.scss
+++ b/src/components/notifications/notifications.scss
@@ -6,7 +6,7 @@
     // force the text to stay centered, while keeping
     // the button in the right side of the panel heading
     position: relative;
-    button {
+    .read-button {
       position: absolute;
       padding: 0.1em 0.3em 0.25em 0.3em;
       right: 0.7em;
diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue
index 180b86a1..e0dcb12d 100644
--- a/src/components/notifications/notifications.vue
+++ b/src/components/notifications/notifications.vue
@@ -3,7 +3,7 @@
     <div class="panel panel-default base00-background">
       <div class="panel-heading base01-background base04">
         Notifications ({{unseenCount}})
-        <button @click.prevent="markAsSeen" class="base06 base02-background">Read!</button>
+        <button @click.prevent="markAsSeen" class="base06 base02-background read-button">Read!</button>
       </div>
       <div class="panel-body">
         <div v-for="notification in visibleNotifications" class="notification" :class='{"unseen": !notification.seen}'>
diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue
index 8a302e18..11280a08 100644
--- a/src/components/timeline/timeline.vue
+++ b/src/components/timeline/timeline.vue
@@ -1,13 +1,13 @@
 <template>
   <div class="timeline panel panel-default">
-    <div class="panel-heading base01-background base04">
+    <div class="panel-heading timeline-heading base01-background base04">
       <div class="title">
         {{title}}
       </div>
-      <button @click.prevent="showNewStatuses" class="base06 base02-background" v-if="timeline.newStatusCount > 0">
+      <button @click.prevent="showNewStatuses" class="base06 base02-background loadmore-button" v-if="timeline.newStatusCount > 0">
         Show new ({{timeline.newStatusCount}})
       </button>
-      <button @click.prevent class="base04 base01-background no-press" v-if="!timeline.newStatusCount > 0">
+      <button @click.prevent class="base04 base01-background no-press loadmore-button" v-if="!timeline.newStatusCount > 0">
         Up-to-date
       </button>
     </div>
@@ -26,17 +26,18 @@
 
 <style lang="scss">
 
-  .timeline .panel-heading {
-    position: relative;
-    display: flex;
-
+  .timeline {
+    .timeline-heading {
+      position: relative;
+      display: flex;
+    }
     .title {
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
       max-width: 70%;
     }
-    button {
+    .loadmore-button {
       position: absolute;
       right: 0.6em;
       padding: 0.1em 0.3em 0.25em 0.3em;
-- 
cgit v1.2.3-70-g09d2


From 086dd832d3d2c8103e7d6f99d72d27bea97ce7b0 Mon Sep 17 00:00:00 2001
From: wakarimasen <wakarimasen@airmail.cc>
Date: Tue, 7 Mar 2017 17:27:12 +0100
Subject: Visual feedback on failure to fetch new statuses

---
 src/components/timeline/timeline.vue                   | 10 ++++++++--
 src/modules/statuses.js                                | 18 ++++++++++++++----
 .../timeline_fetcher/timeline_fetcher.service.js       | 11 +++++++++++
 3 files changed, 33 insertions(+), 6 deletions(-)

(limited to 'src/components/timeline/timeline.vue')

diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue
index 11280a08..ac074f3c 100644
--- a/src/components/timeline/timeline.vue
+++ b/src/components/timeline/timeline.vue
@@ -4,10 +4,13 @@
       <div class="title">
         {{title}}
       </div>
-      <button @click.prevent="showNewStatuses" class="base06 base02-background loadmore-button" v-if="timeline.newStatusCount > 0">
+      <button @click.prevent="showNewStatuses" class="base06 base02-background loadmore-button" v-if="timeline.newStatusCount > 0 && !timeline.error">
         Show new ({{timeline.newStatusCount}})
       </button>
-      <button @click.prevent class="base04 base01-background no-press loadmore-button" v-if="!timeline.newStatusCount > 0">
+      <button @click.prevent class="base06 error no-press loadmore-button" v-if="timeline.error">
+          Error fetching updates
+      </button>
+      <button @click.prevent class="base04 base01-background no-press loadmore-button" v-if="!timeline.newStatusCount > 0 && !timeline.error">
         Up-to-date
       </button>
     </div>
@@ -43,6 +46,9 @@
       padding: 0.1em 0.3em 0.25em 0.3em;
       min-width: 6em;
     }
+    .error {
+      background-color: rgba(255, 48, 16, 0.65);
+    }
     .no-press {
       opacity: 0.8;
       cursor: default;
diff --git a/src/modules/statuses.js b/src/modules/statuses.js
index 491d0024..b19109b2 100644
--- a/src/modules/statuses.js
+++ b/src/modules/statuses.js
@@ -15,7 +15,8 @@ export const defaultState = {
       newStatusCount: 0,
       maxId: 0,
       minVisibleId: 0,
-      loading: false
+      loading: false,
+      error: false
     },
     public: {
       statuses: [],
@@ -24,7 +25,8 @@ export const defaultState = {
       newStatusCount: 0,
       maxId: 0,
       minVisibleId: 0,
-      loading: false
+      loading: false,
+      error: false
     },
     publicAndExternal: {
       statuses: [],
@@ -33,7 +35,8 @@ export const defaultState = {
       newStatusCount: 0,
       maxId: 0,
       minVisibleId: 0,
-      loading: false
+      loading: false,
+      error: false
     },
     friends: {
       statuses: [],
@@ -42,7 +45,8 @@ export const defaultState = {
       newStatusCount: 0,
       maxId: 0,
       minVisibleId: 0,
-      loading: false
+      loading: false,
+      error: false
     }
   }
 }
@@ -280,6 +284,9 @@ export const mutations = {
     const newStatus = find(state.allStatuses, { id })
     newStatus.nsfw = nsfw
   },
+  setError (state, { timeline, value }) {
+    state.timelines[timeline].error = value
+  },
   markNotificationsAsSeen (state, notifications) {
     each(notifications, (notification) => {
       notification.seen = true
@@ -293,6 +300,9 @@ const statuses = {
     addNewStatuses ({ rootState, commit }, { statuses, showImmediately = false, timeline = false, noIdUpdate = false }) {
       commit('addNewStatuses', { statuses, showImmediately, timeline, noIdUpdate, user: rootState.users.currentUser })
     },
+    setError ({ rootState, commit }, { timeline, value }) {
+      commit('setError', { timeline, value })
+    },
     deleteStatus ({ rootState, commit }, status) {
       commit('setDeleted', { status })
       apiService.deleteStatus({ id: status.id, credentials: rootState.users.currentUser.credentials })
diff --git a/src/services/timeline_fetcher/timeline_fetcher.service.js b/src/services/timeline_fetcher/timeline_fetcher.service.js
index 37bbcd82..40f568c3 100644
--- a/src/services/timeline_fetcher/timeline_fetcher.service.js
+++ b/src/services/timeline_fetcher/timeline_fetcher.service.js
@@ -12,6 +12,15 @@ const update = ({store, statuses, timeline, showImmediately}) => {
   })
 }
 
+const setError = ({store, timeline, value}) => {
+  const ccTimeline = camelCase(timeline)
+
+  store.dispatch('setError', {
+    timeline: ccTimeline,
+    value
+  })
+}
+
 const fetchAndUpdate = ({store, credentials, timeline = 'friends', older = false, showImmediately = false}) => {
   const args = { timeline, credentials }
   const rootState = store.rootState || store.state
@@ -25,6 +34,8 @@ const fetchAndUpdate = ({store, credentials, timeline = 'friends', older = false
 
   return apiService.fetchTimeline(args)
     .then((statuses) => update({store, statuses, timeline, showImmediately}))
+    .then(() => setError({store, timeline, value: false}))
+    .catch(() => setError({store, timeline, value: true}))
 }
 
 const startFetching = ({ timeline = 'friends', credentials, store }) => {
-- 
cgit v1.2.3-70-g09d2