Merged from develop, made 'new notices' into a 'show new' button placed on the heading element, updated headings and buttons to be more consistent with new changes (log-in, notifications/read, conversation/collapse), changed bottom 'load older' block to not disappear on click to keep screen from scrolling and changed its styling more consistent with everything else.

14 files changed, 88 insertions, 71 deletions

diff --git a/.gitignore b/.gitignore
index bc9103de..faf39252 100644
--- a/.gitignore
+++ b/.gitignore
@@ -5,3 +5,4 @@ npm-debug.log
 test/unit/coverage
 test/e2e/reports
 selenium-debug.log
+.idea/
diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml
index 1d3cba05..c31d2d31 100644
--- a/.gitlab-ci.yml
+++ b/.gitlab-ci.yml
@@ -27,15 +27,20 @@ before_script:
 #  paths:
 #  - node_modules/
 
+stages:
+  - build
+  - test
+  - deploy
+
 test:
+  stage: test
   script:
-    - npm install -g yarn
     - yarn
     - npm run unit
 
 build:
+  stage: build
   script:
-    - npm install -g yarn
     - yarn
     - npm run build
   artifacts:
@@ -43,11 +48,11 @@ build:
     - dist/
 
 deploy:
+  stage: deploy
   environment: dev
   only:
     - develop
   script:
-    - npm install -g yarn
     - yarn
     - npm run build
     - scp -r dist/* pleroma@tenshi.heldscal.la:~/pleroma
diff --git a/src/components/attachment/attachment.js b/src/components/attachment/attachment.js
index f4f6aebf..c3f52f57 100644
--- a/src/components/attachment/attachment.js
+++ b/src/components/attachment/attachment.js
@@ -29,7 +29,11 @@ const Attachment = {
       }
     },
     toggleHidden () {
-      this.showHidden = !this.showHidden
+      let img = document.createElement('img')
+      img.src = this.attachment.url
+      img.onload = () => {
+        this.showHidden = !this.showHidden
+      }
     }
   }
 }
diff --git a/src/components/conversation/conversation.vue b/src/components/conversation/conversation.vue
index 9675e69f..a150ece3 100644
--- a/src/components/conversation/conversation.vue
+++ b/src/components/conversation/conversation.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="timeline panel panel-default base00-background">
-    <div class="panel-heading base01-background base04">
+    <div class="panel-heading base01-background base04" style="justify-content:space-between;">
       Conversation
       <div v-if="collapsable">
         <small><a href="#" @click.prevent="$emit('toggleExpanded')">Collapse</a></small>
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/login_form/login_form.vue b/src/components/login_form/login_form.vue
index c0ea4313..c0273bae 100644
--- a/src/components/login_form/login_form.vue
+++ b/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">
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/notifications/notifications.scss b/src/components/notifications/notifications.scss
index 5da6d495..1378e730 100644
--- a/src/components/notifications/notifications.scss
+++ b/src/components/notifications/notifications.scss
@@ -9,16 +9,16 @@
     button {
       position: absolute;
       padding: 0.1em 0.3em 0.25em 0.3em;
-      right: 0.6em;
+      right: 0.7em;
     }
   }
 
-  .unseen {
-    border-left: 4px solid rgba(255, 48, 16, 0.65);
-  }
-
   .notification {
-    padding: 0.4em 0 0 0.7em;
+    // Will have to use pixels here to ensure consistent distance with
+    // pad alone and pad + border, browsers bad at rounding this with em,
+    // they love to give a 1 pixel ghost offset with 0.7em vs 0.3em + 0.4em,
+    // which does not happen with 10px vs 4px + 6px.
+    padding: 0.4em 0 0 10px;
     display: flex;
     border-bottom: 1px solid silver;
 
@@ -62,4 +62,9 @@
       border: none
     }
   }
+
+  .unseen {
+    border-left: 4px solid rgba(255, 48, 16, 0.65);
+    padding-left: 6px;
+  }
 }
diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue
index 41c274aa..180b86a1 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="base05 base02-background">Read!</button>
+        <button @click.prevent="markAsSeen" class="base06 base02-background">Read!</button>
       </div>
       <div class="panel-body">
         <div v-for="notification in visibleNotifications" class="notification" :class='{"unseen": !notification.seen}'>
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 078d954c..8a302e18 100644
--- a/src/components/timeline/timeline.vue
+++ b/src/components/timeline/timeline.vue
@@ -1,39 +1,62 @@
 <template>
-  <div class="timeline">
-    <a href="#" v-on:click.prevent='showNewStatuses()' v-if="timeline.newStatusCount > 0">
-      <div class="base00-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">
+      <div class="title">
+        {{title}}
       </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>
+      <button @click.prevent="showNewStatuses" class="base06 base02-background" v-if="timeline.newStatusCount > 0">
+        Show new ({{timeline.newStatusCount}})
+      </button>
+      <button @click.prevent class="base04 base01-background no-press" v-if="!timeline.newStatusCount > 0">
+        Up-to-date
+      </button>
+    </div>
+    <div class="panel-body">
+      <div class="timeline">
+        <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 text-center">Load older statuses.</div>
+        </a>
+          <div class="base01-background base05-border new-status-notification text-center" v-else>...</div>
       </div>
-    </a>
+    </div>
   </div>
 </template>
 <script src="./timeline.js"></script>
 
 <style lang="scss">
- .new-status-notification {
-   border-style: solid;
-   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: 0.6em;
-   }
- }
+  .timeline .panel-heading {
+    position: relative;
+    display: flex;
+
+    .title {
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      max-width: 70%;
+    }
+    button {
+      position: absolute;
+      right: 0.6em;
+      padding: 0.1em 0.3em 0.25em 0.3em;
+      min-width: 6em;
+    }
+    .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>
diff --git a/src/components/user_card_content/user_card_content.vue b/src/components/user_card_content/user_card_content.vue
index aa9a15e1..3fa34773 100644
--- a/src/components/user_card_content/user_card_content.vue
+++ b/src/components/user_card_content/user_card_content.vue
@@ -63,15 +63,13 @@
       headingStyle () {
         let rgb = this.$store.state.config.colors['base00'].match(/\d+/g)
         return {
-          backgroundColor: 'rgb(' + Math.floor(rgb[0] * 0.53) + ', ' +
-                                    Math.floor(rgb[1] * 0.56) + ', ' +
-                                    Math.floor(rgb[2] * 0.59) + ')',
+          backgroundColor: `rgb(${Math.floor(rgb[0] * 0.53)}, ${Math.floor(rgb[1] * 0.56)}, ${Math.floor(rgb[2] * 0.59)})`,
           backgroundImage: `url(${this.user.cover_photo})`
         }
       },
       bodyStyle () {
         return {
-          background: 'linear-gradient(to bottom, rgba(0, 0, 0, 0), ' + this.$store.state.config.colors['base00'] + ' 80%)'
+          background: `linear-gradient(to bottom, rgba(0, 0, 0, 0), ${this.$store.state.config.colors['base00']} 80%)`
         }
       },
       isOtherUser () {