Message

src/components/user/message.vue

@@ -0,0 +1,51 @@
+<template>
+  <q-item>
+    <q-item-section avatar top>
+      <q-icon v-if="message.icon" :name="message.icon || 'mdi-message-text-outline'" size="34px" />
+      <q-avatar v-else-if="message.avatar" size="34px">
+        <img :src="message.avatar" />
+      </q-avatar>
+      <q-icon v-else name="mdi-message-text-outline" size="34px" />
+    </q-item-section>
+
+    <q-item-section top>
+      <q-item-label lines="1">
+        <div class="text-grey-7 cursor-pointer">{{ message.from }}</div>
+        <div class="cursor-pointer text-weight-medium">{{ message.subject }}</div>
+      </q-item-label>
+      <q-item-label class="text-body2" lines="1">
+        {{ message.text }}
+      </q-item-label>
+    </q-item-section>
+
+    <q-item-section top side>
+      <div class="text-grey-7 q-gutter-xs">
+        <q-btn size="sm" flat dense round icon="delete" />
+        <q-btn size="sm" flat dense round icon="done" />
+        <!--<q-btn size="12px" flat dense round icon="more_vert" />-->
+      </div>
+      <div class="text-grey-7 q-gutter-xs">
+        {{ message.date }}
+      </div>
+    </q-item-section>
+  </q-item>
+</template>
+<script>
+export default {
+  name: 'Message',
+  components: {},
+  props: {
+    message: {
+      type: Object,
+      default: null
+    }
+  },
+  data: function() {
+    return {};
+  },
+  computed: {},
+  watch: {},
+  methods: {}
+};
+</script>
+<style lang="scss"></style>

src/components/user/messages.vue

@@ -1,12 +1,15 @@
 <template>
   <div class="q-pa-md" style="max-width: 700px">
     <q-bar class="bg-none">
-      TODO Messages - message component, list
+      Messages
       <q-space />
       <q-btn dense flat round icon="close" @click="onClose" />
     </q-bar>
 
-    <q-list style="width: 600px">
+    <q-list style="width: 600px" separator>
+      <message v-for="message in messagesList" v-bind:key="message.id" :message="message"></message>
+
+      <!--
       <q-item>
         <q-item-section avatar top>
           <q-icon name="account_tree" color="black" size="34px" />
@@ -33,7 +36,6 @@
           <div class="text-grey-8 q-gutter-xs">
             <q-btn class="gt-xs" size="12px" flat dense round icon="delete" />
             <q-btn class="gt-xs" size="12px" flat dense round icon="done" />
-            <!--<q-btn size="12px" flat dense round icon="more_vert" />-->
           </div>
         </q-item-section>
       </q-item>
@@ -66,31 +68,56 @@
           <div class="text-grey-8 q-gutter-xs">
             <q-btn class="gt-xs" size="12px" flat dense round icon="delete" />
             <q-btn class="gt-xs" size="12px" flat dense round icon="done" />
-            <!--<q-btn size="12px" flat dense round icon="more_vert" />-->
           </div>
         </q-item-section>
       </q-item>
+      -->
     </q-list>
   </div>
 </template>
 <script>
+import Message from './message.vue';
 export default {
   name: 'Messages',
-  components: {},
+  components: { Message },
   props: {},
   data() {
     return {
-      check1: true,
-      check2: false,
-      check3: false,
-
-      notif1: true,
-      notif2: true,
-      notif3: false,
-
-      volume: 6,
-      brightness: 3,
-      mic: 8
+      messagesList: [
+        {
+          id: '1',
+          from: 'Slack',
+          subject: 'Current Job result: SUCCESS',
+          text: 'service-pipeline-branches/master:65e1b0d6-21f0-498d-9510-5a2acc49b06b',
+          icon: 'mdi-slack',
+          date: '4/23/20'
+        },
+        {
+          id: '2',
+          from: 'GitHub',
+          subject: 'github-actions pushed to slanatech/dashblocks-template ',
+          text: '62e7e60 Deploying to gh-pages from @e393152',
+          icon: 'mdi-github',
+          date: '4/23/20'
+        },
+        {
+          id: '3',
+          from: 'Leela Dunlap',
+          subject: 'Dashblocks Material Admin Template',
+          text: 'Dashblocks enables easily creating sophisticated interactive dashboards simply by declaring dashboard structure as json or javascript object',
+          avatar: 'images/avatars/female/1.png',
+          date: '4/23/20'
+        },
+        {
+          id: '4',
+          from: 'Keeley Milner',
+          subject: 'Dashblocks Charts',
+          text: 'Dashblocks uses popular charting libraries: d3, Chart.js, Dygraphs, Plotly.js.',
+          avatar: 'images/avatars/male/1.png',
+          date: '4/23/20'
+        },
+        { id: '5', from: 'Leela Dunlap', subject: 'Re: Dashblocks Charts', text: 'Awesome!', avatar: 'images/avatars/female/1.png', date: '4/23/20' }
+      ]
     };
   },
   computed: {},