Merge branch 'feature/restructure-timelines' into 'develop'

Unify notice timelines to make changes easier.

See merge request !36

.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/friends_timeline/friends_timeline.vue

@@ -1,10 +1,5 @@
 <template>
-  <div class="timeline panel panel-default">
+  <Timeline :title="'Friends'" v-bind:timeline="timeline" v-bind:timeline-name="'friends'"/>
-    <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>
 </template>
 
 <script src="./friends_timeline.js"></script>

src/components/mentions/mentions.vue

@@ -1,10 +1,5 @@
 <template>
-  <div class="timeline panel panel-default">
+  <Timeline :title="'Mentions'" v-bind:timeline="timeline" v-bind:timeline-name="'mentions'"/>
-    <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>
 </template>
 
 <script src="./mentions.js"></script>

src/components/public_and_external_timeline/public_and_external_timeline.vue

@@ -1,10 +1,5 @@
 <template>
-  <div class="timeline panel panel-default">
+  <Timeline :title="'THE WHOLE KNOWN NETWORK'"v-bind:timeline="timeline" v-bind:timeline-name="'publicAndExternal'"/>
-    <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>
 </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">
+  <Timeline :title="'Public Timeline'" v-bind:timeline="timeline" v-bind:timeline-name="'public'"/>
-    <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>
 </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,20 +1,25 @@
 <template>
-  <div class="timeline">
+  <div class="timeline panel panel-default">
-    <a href="#" v-on:click.prevent='showNewStatuses()' v-if="timeline.newStatusCount > 0">
+    <div class="panel-heading base01-background base04">{{title}}</div>
-      <div class="base01-background base05-border new-status-notification">
+    <div class="panel-body">
-        <p class="text-center" >
+      <div class="timeline">
-          {{timeline.newStatusCount}} new statuses
+        <a href="#" v-on:click.prevent='showNewStatuses()' v-if="timeline.newStatusCount > 0">
-        </p>
+          <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>
+    </div>
-    <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>
 </template>
 <script src="./timeline.js"></script>