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.

.gitignore

@@ -5,3 +5,4 @@ npm-debug.log
 test/unit/coverage
 test/e2e/reports
 selenium-debug.log
+.idea/

.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

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
+      }
     }
   }
 }

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>

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>

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">

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>

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;
+  }
 }

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}'>

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>

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>

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,

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>

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 () {