Adds new font. Adds scrollboar notification

amir20 · Nov 18, 2018 · df2834f · df2834f
1 parent 2ecfefb
commit df2834f
Show file tree

Hide file tree

Showing 4 changed files with 102 additions and 27 deletions.
diff --git a/assets/App.vue b/assets/App.vue
@@ -1,5 +1,5 @@
 <template lang="html">
-    <router-view></router-view>
+  <router-view></router-view>
 </template>
 
 <script>
@@ -8,8 +8,12 @@ export default {
 };
 </script>
 
-<style lang="css">
+<style>
 .section.is-fullwidth {
   padding: 0 !important;
 }
+
+body {
+  font-family: "Roboto", sans-serif;
+}
 </style>
diff --git a/assets/components/ScrollbarNotification.vue b/assets/components/ScrollbarNotification.vue
@@ -0,0 +1,69 @@
+<template lang="html">
+  <transition name="fade">
+    <button
+      class="button scroll-notification"
+      :class="hasNew ? 'is-warning' : 'is-primary'"
+      @click="scrollToBottom"
+      v-show="visible"
+    >
+      <span class="icon large"> <i class="fas fa-chevron-down"></i> </span>
+    </button>
+  </transition>
+</template>
+
+<script>
+export default {
+  props: ["messages"],
+  data() {
+    return {
+      visible: false,
+      hasNew: false
+    };
+  },
+  mounted() {
+    document.addEventListener("scroll", this.onScroll, { passive: true });
+    setTimeout(() => this.scrollToBottom(), 500);
+  },
+  beforeDestroy() {
+    document.removeEventListener("scroll", this.onScroll);
+  },
+  methods: {
+    scrollToBottom() {
+      this.visible = false;
+      window.scrollTo(0, document.body.scrollHeight);
+    },
+    onScroll() {
+      const scrollBottom = document.documentElement.scrollHeight - document.documentElement.clientHeight;
+      const diff = Math.abs(document.documentElement.scrollTop - scrollBottom);
+      this.visible = diff > 50;
+      if (!this.visible) {
+        this.hasNew = false;
+      }
+    }
+  },
+  watch: {
+    messages(newValue, oldValue) {
+      if (this.visible) {
+        this.hasNew = true;
+      } else {
+        this.scrollToBottom();
+      }
+    }
+  }
+};
+</script>
+<style scoped>
+.scroll-notification {
+  position: fixed;
+  right: 40px;
+  bottom: 30px;
+}
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.15s ease-in;
+}
+.fade-enter,
+.fade-leave-to {
+  opacity: 0;
+}
+</style>
diff --git a/assets/index.html b/assets/index.html
@@ -1,19 +1,16 @@
 <!DOCTYPE html>
 <html>
+    <head>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <title>Dozzle</title>
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css" />
+        <link href="https://fonts.googleapis.com/css?family=Roboto|Roboto+Mono" rel="stylesheet">
+        <script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
+    </head>
 
-<head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title>Dozzle</title>
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css">
-    <script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
-</head>
-
-<body>
-    <section class="section is-fullwidth">
-        <div id="app"></div>
-    </section>
-    <script src="/main.js"></script>
-</body>
-
-</html>
+    <body>
+        <section class="section is-fullwidth"><div id="app"></div></section>
+        <script src="/main.js"></script>
+    </body>
+</html>
diff --git a/assets/pages/Container.vue b/assets/pages/Container.vue
@@ -1,13 +1,17 @@
 <template lang="html">
-  <ul ref="events" class="events">
-    <li v-for="item in messages" class="event" :key="item.key">
-      <span class="date">{{ item.dateRelative }}</span> <span class="text">{{ item.message }}</span>
-    </li>
-  </ul>
+  <div class="parent">
+    <ul ref="events" class="events">
+      <li v-for="item in messages" class="event" :key="item.key">
+        <span class="date">{{ item.dateRelative }}</span> <span class="text">{{ item.message }}</span>
+      </li>
+    </ul>
+    <scrollbar-notification :messages="messages"></scrollbar-notification>
+  </div>
 </template>
 
 <script>
 import { formatRelative } from "date-fns";
+import ScrollbarNotification from "../components/ScrollbarNotification";
 
 let ws = null;
 let nextId = 0;
@@ -27,6 +31,9 @@ const parseMessage = data => {
 export default {
   props: ["id"],
   name: "Container",
+  components: {
+    ScrollbarNotification
+  },
   data() {
     return {
       messages: []
@@ -43,8 +50,6 @@ export default {
     ws.onmessage = e => {
       const message = parseMessage(e.data);
       this.messages.push(message);
-
-      this.$nextTick(() => document.querySelector("li.event:last-child").scrollIntoView());
     };
   },
   beforeDestroy() {
@@ -59,11 +64,11 @@ export default {
   color: #ddd;
   background-color: #111;
   padding: 10px;
+  font-family: "Roboto Mono", monaco, monospace;
 }
 
 .event {
-  font-family: monaco, monospace;
-  font-size: 12px;
+  font-size: 14px;
   line-height: 16px;
   padding: 0 15px 0 30px;
   word-wrap: break-word;