From 88e68081553d87449a32f421c429a147aed18387 Mon Sep 17 00:00:00 2001
From: Eliot Berriot <contact@eliotberriot.com>
Date: Fri, 2 Mar 2018 00:14:23 +0100
Subject: [PATCH] Activity components for timeline

---
 front/src/components/activity/Like.vue   | 35 ++++++++++++++++++++++++
 front/src/components/activity/Listen.vue | 35 ++++++++++++++++++++++++
 2 files changed, 70 insertions(+)
 create mode 100644 front/src/components/activity/Like.vue
 create mode 100644 front/src/components/activity/Listen.vue

diff --git a/front/src/components/activity/Like.vue b/front/src/components/activity/Like.vue
new file mode 100644
index 000000000..ffb831278
--- /dev/null
+++ b/front/src/components/activity/Like.vue
@@ -0,0 +1,35 @@
+<template>
+  <div class="event">
+   <div class="label">
+     <i class="pink heart icon"></i>
+   </div>
+   <div class="content">
+     <div class="summary">
+       <slot name="user"></slot>
+       favorited a track
+       <slot name="date"></slot>
+     </div>
+     <div class="extra text">
+       <router-link :to="{name: 'library.tracks.detail', params: {id: event.object.local_id }}">{{ event.object.name }}</router-link>
+        <template v-if="event.object.album">from album {{ event.object.album }}, by <em>{{ event.object.artist }}</em>
+        </template>
+        <template v-else>, by <em>{{ event.object.artist }}</em>
+        </template>
+
+      </div>
+   </div>
+ </div>
+
+</template>
+
+<script>
+
+export default {
+  props: ['event']
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped lang="scss">
+
+</style>
diff --git a/front/src/components/activity/Listen.vue b/front/src/components/activity/Listen.vue
new file mode 100644
index 000000000..7c8ee8a69
--- /dev/null
+++ b/front/src/components/activity/Listen.vue
@@ -0,0 +1,35 @@
+<template>
+  <div class="event">
+   <div class="label">
+     <i class="orange sound icon"></i>
+   </div>
+   <div class="content">
+     <div class="summary">
+       <slot name="user"></slot>
+       listened to a track
+       <slot name="date"></slot>
+     </div>
+     <div class="extra text">
+       <router-link :to="{name: 'library.tracks.detail', params: {id: event.object.local_id }}">{{ event.object.name }}</router-link>
+        <template v-if="event.object.album">from album {{ event.object.album }}, by <em>{{ event.object.artist }}</em>
+        </template>
+        <template v-else>, by <em>{{ event.object.artist }}</em>
+        </template>
+
+      </div>
+   </div>
+ </div>
+
+</template>
+
+<script>
+
+export default {
+  props: ['event']
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped lang="scss">
+
+</style>