Merge branch 'develop' into xj9/pleroma-fe-feature/even-better-nsfw-image-loading

src/components/conversation/conversation.js

@@ -47,6 +47,13 @@ const conversation = {
           .then((status) => this.$store.dispatch('addNewStatuses', { statuses: [status] }))
           .then(() => this.fetchConversation())
       }
+    },
+    focused: function (id) {
+      if (this.statusoid.retweeted_status) {
+        return (id === this.statusoid.retweeted_status.id)
+      } else {
+        return (id === this.statusoid.id)
+      }
     }
   }
 }

src/components/conversation/conversation.vue

@@ -2,13 +2,13 @@
   <div class="timeline panel panel-default base00-background">
     <div class="panel-heading base01-background base04">
       Conversation
-      <div v-if="collapsable">
+      <span v-if="collapsable" style="float:right;">
         <small><a href="#" @click.prevent="$emit('toggleExpanded')">Collapse</a></small>
-      </div>
+      </span>
     </div>
     <div class="panel-body">
       <div class="timeline">
-        <status v-for="status in conversation" :key="status.id" v-bind:statusoid="status":expandable='false'></status>
+        <status v-for="status in conversation" :key="status.id" v-bind:statusoid="status":expandable='false':focused="focused(status.id)"></status>
       </div>
     </div>
   </div>

src/components/login_form/login_form.js

@@ -1,15 +1,21 @@
 const LoginForm = {
   data: () => ({
-    user: {}
+    user: {},
+    authError: false
   }),
   computed: {
     loggingIn () { return this.$store.state.users.loggingIn }
   },
   methods: {
     submit () {
-      this.$store.dispatch('loginUser', this.user).then(() => {
-        this.$router.push('/main/friends')
-      })
+      this.$store.dispatch('loginUser', this.user).then(
+        () => { this.$router.push('/main/friends')}, 
+        (error) => {
+          this.authError = error
+          this.user.username = ''
+          this.user.password = ''
+        }
+      )
     }
   }
 }

src/components/login_form/login_form.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="login panel panel-default base00-background">
     <!-- Default panel contents -->
-    <div class="panel-heading base01-background">
+    <div class="panel-heading base01-background base04">
       Log in
     </div>
     <div class="panel-body">
@@ -17,6 +17,9 @@
         <div class='form-group'>
           <button :disabled="loggingIn" type='submit' class='btn btn-default base05 base01-background'>Submit</button>
         </div>
+        <div v-if="authError" class='form-group'>
+          <div class='error base05'>{{authError}}</div>
+        </div>
       </form>
     </div>
   </div>
@@ -39,6 +42,14 @@
     margin-top: 1.0em;
     min-height: 28px;
   }
+
+  .error {
+    border-radius: 5px;
+    text-align: center;
+    background-color: rgba(255, 48, 16, 0.65);
+    min-height: 28px;
+    line-height: 28px;
+  }
 }
 
 </style>

src/components/notifications/notifications.scss

@@ -6,13 +6,26 @@
     // 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.6em;
+      right: 0.7em;
     }
   }
 
+  .unseen-count {
+    display: inline-block;
+    background-color: rgba(255, 16, 8, 0.8);
+    text-shadow: 0px 0px 3px rgba(0, 0, 0, 0.5);
+    min-width: 1.3em;
+    border-radius: 1.3em;
+    margin: 0 0.2em 0 -0.4em;
+    color: white;
+    font-size: 0.9em;
+    text-align: center;
+    line-height: 1.3em;
+  }
+
   .notification {
     // Will have to use pixels here to ensure consistent distance with
     // pad alone and pad + border, browsers bad at rounding this with em,
@@ -64,7 +77,7 @@
   }
 
   .unseen {
-    border-left: 4px solid rgba(255, 48, 16, 0.65);
+    border-left: 4px solid rgba(255, 16, 8, 0.75);
     padding-left: 6px;
   }
 }

src/components/notifications/notifications.vue

@@ -2,8 +2,9 @@
   <div class="notifications">
     <div class="panel panel-default base00-background">
       <div class="panel-heading base01-background base04">
-        Notifications ({{unseenCount}})
-        <button @click.prevent="markAsSeen" class="base05 base02-background">Read!</button>
+        <span class="unseen-count" v-if="unseenCount">{{unseenCount}}</span>
+        Notifications
+        <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}'>

src/components/status/status.js

@@ -8,7 +8,8 @@ import UserCardContent from '../user_card_content/user_card_content.vue'
 const Status = {
   props: [
     'statusoid',
-    'expandable'
+    'expandable',
+    'focused'
   ],
   data: () => ({
     replying: false,
@@ -30,7 +31,8 @@ const Status = {
     loggedIn () {
       return !!this.$store.state.users.currentUser
     },
-    muted () { return !this.unmuted && this.status.user.muted }
+    muted () { return !this.unmuted && this.status.user.muted },
+    isReply () { return !!this.status.in_reply_to_status_id }
   },
   components: {
     Attachment,

src/components/status/status.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="status-el base00-background" v-if="!status.deleted" v-bind:class="{ 'expanded-status': !expandable }">
+  <div class="status-el base00-background" v-if="!status.deleted" v-bind:class="[{ 'expanded-status': !expandable }, { 'base01-background': focused }]">
     <template v-if="muted">
       <div class="media status container muted">
         <small><router-link :to="{ name: 'user-profile', params: { id: status.user.id } }">{{status.user.screen_name}}</router-link></small>
@@ -34,6 +34,13 @@
                   {{status.in_reply_to_screen_name}}
                 </router-link>
               </small>
+              <template v-if="isReply">
+                  <small>
+                      <router-link :to="{ name: 'conversation', params: { id: status.in_reply_to_status_id } }">
+                          <i class="icon-reply"></i>
+                      </router-link>
+                  </small>
+              </template>
               -
               <small>
                 <router-link :to="{ name: 'conversation', params: { id: status.id } }">

src/components/status_or_conversation/status_or_conversation.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <conversation v-if="expanded" @toggleExpanded="toggleExpanded" :collapsable="true" :statusoid="statusoid"></conversation>
-    <status v-if="!expanded" @toggleExpanded="toggleExpanded" :expandable="true" :statusoid="statusoid"></status>
+    <status v-if="!expanded" @toggleExpanded="toggleExpanded" :expandable="true" :statusoid="statusoid" :focused="false"></status>
   </div>
 </template>
 

src/components/timeline/timeline.vue

@@ -1,23 +1,26 @@
 <template>
   <div class="timeline panel panel-default">
-    <div class="panel-heading base01-background base04">{{title}}</div>
+    <div class="panel-heading timeline-heading base01-background base04">
+      <div class="title">
+        {{title}}
+      </div>
+      <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="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>
     <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>
+          <div class="base01-background base05-border new-status-notification text-center">Load older statuses.</div>
         </a>
+          <div class="base01-background base05-border new-status-notification text-center" v-else>...</div>
       </div>
     </div>
   </div>
@@ -25,14 +28,42 @@
 <script src="./timeline.js"></script>
 
 <style lang="scss">
- .new-status-notification {
-   border-style: solid;
-   border-width: 1px 0 1px 0;
-   font-size: 1.1em;
 
-   p {
-     margin: 0px;
-     padding: 10px;
-   }
- }
+  .timeline {
+    .timeline-heading {
+      position: relative;
+      display: flex;
+    }
+    .title {
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      max-width: 70%;
+    }
+    .loadmore-button {
+      position: absolute;
+      right: 0.6em;
+      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;
+    }
+  }
+
+
+  .new-status-notification {
+    position:relative;
+    margin-top: -1px;
+    font-size: 1.1em;
+    border-width: 1px 0 0 0;
+    border-style: solid;
+    border-radius: 0 0 10px 10px;
+    padding: 10px;
+    z-index: 1;
+  }
 </style>

src/components/user_card_content/user_card_content.vue

@@ -104,6 +104,11 @@
 .profile-panel-background {
   background-size: cover;
   border-radius: 10px;
+
+  .panel-heading {
+    padding: 0.6em 0em;
+    text-align: center;
+  }
 }
 
 .profile-panel-body {