Release 2.0.3

Bumps [@babel/plugin-transform-runtime](https://github.com/babel/babel/tree/HEAD/packages/babel-plugin-transform-runtime) from 7.10.3 to 7.10.4.
- [Release notes](https://github.com/babel/babel/releases)
- [Changelog](https://github.com/babel/babel/blob/main/CHANGELOG.md)
- [Commits](https://github.com/babel/babel/commits/v7.10.4/packages/babel-plugin-transform-runtime)

Signed-off-by: dependabot-preview[bot] <support@dependabot.com>

assets/App.vue

@@ -8,7 +8,7 @@
       </pane>
       <pane min-size="10">
         <splitpanes>
-          <pane class="has-min-height">
+          <pane class="has-min-height router-view">
             <search></search>
             <router-view></router-view>
           </pane>
@@ -83,7 +83,7 @@ export default {
       document.documentElement.classList.add("has-custom-scrollbars");
     }
     if (this.hasLightTheme) {
-      document.documentElement.classList.add("has-light-theme");
+      document.documentElement.setAttribute("data-theme", "light");
     }
     this.menuWidth = this.settings.menuWidth;
   },
@@ -97,11 +97,11 @@ export default {
     },
     hasLightTheme(newValue, oldValue) {
       if (newValue) {
-        document.documentElement.classList.add("has-light-theme");
+        document.documentElement.setAttribute("data-theme", "light");
       } else {
-        document.documentElement.classList.remove("has-light-theme");
+        document.documentElement.removeAttribute("data-theme");
       }
-    }
+    },
   },
   computed: {
     ...mapState(["activeContainers", "isMobile", "settings"]),
@@ -132,9 +132,15 @@ export default {
 <style scoped lang="scss">
 ::v-deep .splitpanes--vertical > .splitpanes__splitter {
   min-width: 3px;
-  background: #666;
+  background: var(--border-color);
   &:hover {
-    background: rgb(255, 221, 87);
+    background: var(--border-hover-color);
+  }
+}
+
+@media screen and (max-width: 768px) {
+  .router-view {
+    padding-top: 75px;
   }
 }
 
@@ -159,18 +165,6 @@ export default {
     &:hover {
       left: -25px;
     }
-
-    html.has-light-theme & {
-      background-color: #7d7d68;
-    }
-  }
-}
-</style>
-<style lang="scss">
-html.has-light-theme .splitpanes--vertical > .splitpanes__splitter {
-  background: #DCDCDC;
-  &:hover {
-    background: #d8f0ca;
   }
 }
 </style>

assets/__snapshots__/App.spec.js.snap

@@ -25,7 +25,7 @@ exports[`<App /> renders correctly 1`] = `
         pushotherpanes="true"
       >
         <pane-stub
-          class="has-min-height"
+          class="has-min-height router-view"
           maxsize="100"
           minsize="0"
         >

assets/components/ContainerTitle.vue

@@ -26,5 +26,18 @@ export default {
   background: rgba(0, 0, 0, 0.1);
   font-weight: bold;
   font-family: monospace;
+
+  button.delete {
+    background-color: var(--scheme-main-ter);
+    opacity: 0.6;
+    &:after,
+    &:before {
+      background-color: var(--body-color);
+    }
+
+    &:hover {
+      opacity: 1;
+    }
+  }
 }
 </style>

assets/components/LogViewer.vue

@@ -92,8 +92,8 @@ export default {
   background-color: #262626;
   color: #258ccd;
 
-  html.has-light-theme & {
-    background-color: #F0F0F0;
+  [data-theme="light"] & {
+    background-color: #f0f0f0;
     color: #009900;
     padding-left: 5px;
     padding-right: 5px;
@@ -110,8 +110,8 @@ li.event {
 
 ::v-deep mark {
   border-radius: 2px;
-  background-color: #ffdd57;
-  animation: pops 0.2s ease-out;
+  background-color: var(--secondary-color);
+  animation: pops 200ms ease-out;
   display: inline-block;
 }
 

assets/components/MobileMenu.vue

@@ -2,13 +2,15 @@
   <aside>
     <a
       role="button"
-      class="navbar-burger burger is-white is-hidden-tablet is-pulled-right"
+      class="navbar-burger burger is-hidden-tablet is-pulled-right"
       @click="showNav = !showNav"
       :class="{ 'is-active': showNav }"
     >
       <span></span> <span></span> <span></span>
     </a>
-    <h1 class="title has-text-warning is-marginless">Dozzle</h1>
+    <svg class="logo">
+      <use href="#logo"></use>
+    </svg>
     <p class="menu-label is-hidden-mobile" :class="{ 'is-active': showNav }">Containers</p>
     <ul class="menu-list is-hidden-mobile" :class="{ 'is-active': showNav }">
       <li v-for="item in visibleContainers" :key="item.id">
@@ -54,7 +56,7 @@ aside {
   top: 0;
   left: 0;
   right: 0;
-  background: #222;
+  background: var(--scheme-main-ter);
   z-index: 2;
   max-height: 100vh;
   overflow: auto;
@@ -68,8 +70,12 @@ aside {
     overflow: hidden;
   }
 
-  .burger.is-white {
-    color: #fff;
+  .title {
+    text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2);
+  }
+
+  .burger {
+    color: var(--body-color);
   }
 
   .is-hidden-mobile.is-active {
@@ -79,5 +85,11 @@ aside {
   .navbar-burger {
     height: 2.35rem;
   }
+
+  .logo {
+    width: 82px;
+    height: 36px;
+    fill: var(--logo-color);
+  }
 }
 </style>

assets/components/ScrollProgress.vue

@@ -0,0 +1,96 @@
+<template>
+  <div class="scroll-progress">
+    <svg width="100" height="100" viewBox="0 0 100 100">
+      <circle r="44" cx="50" cy="50" :style="{ '--progress': scrollProgress }" />
+    </svg>
+    <div class="percent columns is-vcentered is-centered has-text-weight-light">
+      <span class="column is-narrow is-paddingless is-size-2">
+        {{ Math.ceil(scrollProgress * 100) }}
+      </span>
+      <span class="column is-narrow is-paddingless">
+        %
+      </span>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapState } from "vuex";
+import throttle from "lodash.throttle";
+
+export default {
+  name: "ScrollProgress",
+  data() {
+    return {
+      scrollProgress: 0,
+      animation: { cancel: () => {} },
+      parentElement: document,
+    };
+  },
+  created() {
+    this.onScrollThrottled = throttle(this.onScroll, 150);
+  },
+  mounted() {
+    this.attachEvents();
+    this.$once("hook:beforeDestroy", this.detachEvents);
+  },
+  watch: {
+    activeContainers() {
+      this.detachEvents();
+      this.attachEvents();
+    },
+  },
+  computed: {
+    ...mapState(["activeContainers"]),
+  },
+  methods: {
+    attachEvents() {
+      this.parentElement = this.$el.closest("[data-scrolling]") || document;
+      this.parentElement.addEventListener("scroll", this.onScrollThrottled);
+    },
+    detachEvents() {
+      this.parentElement.removeEventListener("scroll", this.onScrollThrottled);
+    },
+    onScroll() {
+      const p = this.parentElement == document ? document.documentElement : this.parentElement;
+      this.scrollProgress = p.scrollTop / (p.scrollHeight - p.clientHeight);
+      this.animation.cancel();
+      this.animation = this.$el.animate(
+        { opacity: [1, 0] },
+        {
+          duration: 500,
+          delay: 2000,
+          fill: "both",
+          easing: "ease-out",
+        }
+      );
+    },
+  },
+};
+</script>
+<style scoped lang="scss">
+.scroll-progress {
+  display: inline-block;
+  position: relative;
+  circle {
+    fill: var(--scheme-main-ter);
+    fill-opacity: 0.8;
+    transition: stroke-dashoffset 250ms ease-out;
+    transform: rotate(-90deg);
+    transform-origin: 50% 50%;
+    stroke: var(--primary-color);
+    stroke-dashoffset: calc(276.32px - var(--progress) * 276.32px);
+    stroke-dasharray: 276.32px 276.32px;
+    stroke-width: 3;
+    will-change: stroke-dashoffset;
+  }
+
+  .percent {
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+  }
+}
+</style>

assets/components/ScrollableView.vue

@@ -4,17 +4,16 @@
       <slot name="header"></slot>
     </header>
     <main ref="content" :data-scrolling="scrollable">
+      <div class="scrollbar-progress is-hidden-mobile">
+        <scroll-progress v-show="paused"></scroll-progress>
+      </div>
       <slot></slot>
       <div ref="scrollObserver"></div>
     </main>
-    <div class="scroll-bar-notification">
+
+    <div class="scrollbar-notification">
       <transition name="fade">
-        <button
-          class="button"
-          :class="hasMore ? 'is-warning' : 'is-primary'"
-          @click="scrollToBottom('instant')"
-          v-show="paused"
-        >
+        <button class="button" :class="hasMore ? 'has-more' : ''" @click="scrollToBottom('instant')" v-show="paused">
           <icon name="download"></icon>
         </button>
       </transition>
@@ -24,6 +23,7 @@
 
 <script>
 import Icon from "./Icon";
+import ScrollProgress from "./ScrollProgress";
 
 export default {
   props: {
@@ -34,6 +34,7 @@ export default {
   },
   components: {
     Icon,
+    ScrollProgress,
   },
   name: "ScrollableView",
   data() {
@@ -85,12 +86,50 @@ section {
     scroll-snap-type: y proximity;
   }
 
-  .scroll-bar-notification {
+  .scrollbar-progress {
+    text-align: right;
+    margin-right: 110px;
+    .scroll-progress {
+      position: fixed;
+      top: 60px;
+      z-index: 2;
+    }
+  }
+
+  .scrollbar-notification {
     text-align: right;
     margin-right: 65px;
     button {
       position: fixed;
       bottom: 30px;
+      background-color: var(--secondary-color);
+      transition: background-color 1s ease-out;
+      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+      border: none !important;
+
+      &.has-more {
+        background-color: var(--primary-color);
+        animation-name: bounce;
+        animation-duration: 1000ms;
+        animation-fill-mode: both;
+        color: #fff;
+      }
+    }
+  }
+
+  @keyframes bounce {
+    0%,
+    20%,
+    50%,
+    80%,
+    100% {
+      transform: translateY(0);
+    }
+    40% {
+      transform: translateY(-30px);
+    }
+    60% {
+      transform: translateY(-15px);
     }
   }
 

assets/components/Search.vue

@@ -75,17 +75,26 @@ export default {
   width: 350px;
   position: fixed;
   padding: 10px;
-  background: rgba(50, 50, 50, 0.9);
+  background: var(--scheme-main-ter);
   top: 0;
   right: 0;
   border-radius: 0 0 0 5px;
   z-index: 10;
-}
-.delete {
-  margin-left: 1em;
-}
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
 
-.icon {
-  padding: 10px 3px;
+  .delete {
+    margin-left: 1em;
+  }
+
+  .icon {
+    padding: 10px 3px;
+  }
+
+  .input {
+    color: var(--body-color);
+    &::placeholder {
+      color: var(--border-color);
+    }
+  }
 }
 </style>

assets/components/SideMenu.vue

@@ -1,10 +1,12 @@
 <template>
   <aside>
     <div class="columns is-marginless">
-      <div class="column">
-        <h1 class="title has-text-warning is-marginless">Dozzle</h1>
+      <div class="column is-paddingless">
+        <svg class="logo">
+          <use href="#logo"></use>
+        </svg>
       </div>
-      <div class="column is-narrow has-text-right is-hidden-mobile">
+      <div class="column is-narrow has-text-right x">
         <router-link
           :to="{ name: 'settings' }"
           active-class="is-active"
@@ -79,66 +81,29 @@ aside {
     overflow: hidden;
   }
 
-  .burger.is-white {
-    color: #fff;
-  }
-
   .is-hidden-mobile.is-active {
     display: block !important;
   }
 }
 
-h1.title {
-  font-family: "Gafata", sans-serif;
-
-  html.has-light-theme & {
-    text-shadow: 1px 0px #ffdd57;
-
-    &.has-text-warning {
-      color: #ffcc00;
-    }
-  }
-}
-
-html.has-light-theme {
-  .menu-label {
-    color: #595959;
-  }
-
-  .menu-list a {
-    color: #444;
-
-    &:hover {
-      background-color: #eee8e7;
-    }
-    &.is-active {
-      background-color: #d8f0ca;
-      border-color: #d8f0ca;
-    }
-  }
-
-  .button {
-    &:active,
-    &.is-active {
-      color: #ffdd57;
-    }
-  }
-}
-
 li.exited a {
   color: #777;
 }
 
+.logo {
+  width: 122px;
+  height: 54px;
+  fill: var(--logo-color);
+}
+
 .will-append-container.icon {
   transition: transform 0.2s ease-out;
   &.is-active {
     pointer-events: none;
-    color: #00d1b2;
+    color: var(--primary-color);
   }
   .router-link-exact-active & {
     visibility: hidden;
   }
 }
-
-
 </style>

assets/pages/Index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="hero is-fullheight is-dark">
+  <div class="hero is-fullheight">
     <div class="hero-body">
       <div class="container has-text-centered">
         <h1 class="title">Please choose a container from the list to view the logs</h1>
@@ -14,17 +14,3 @@ export default {
   name: "Default",
 };
 </script>
-<style scoped>
-.hero.is-dark {
-  color: #ddd;
-  background-color: #111;
-
-  html.has-light-theme & {
-    background-color: #F8F8F8;
-
-    .title {
-      color: #555;
-    }
-  }
-}
-</style>

assets/pages/Settings.vue

@@ -118,23 +118,26 @@ export default {
   },
   computed: {
     ...mapState(["settings"]),
-    ...["search", "size", "smallerScrollbars", "showTimestamp", "showAllContainers", "lightTheme"].reduce((map, name) => {
-      map[name] = {
-        get() {
-          return this.settings[name];
-        },
-        set(value) {
-          this.updateSetting({ [name]: value });
-        },
-      };
-      return map;
-    }, {}),
+    ...["search", "size", "smallerScrollbars", "showTimestamp", "showAllContainers", "lightTheme"].reduce(
+      (map, name) => {
+        map[name] = {
+          get() {
+            return this.settings[name];
+          },
+          set(value) {
+            this.updateSetting({ [name]: value });
+          },
+        };
+        return map;
+      },
+      {}
+    ),
   },
 };
 </script>
 <style lang="scss" scoped>
 .title {
-  color: #eee;
+  color: var(--title-color);
 }
 
 a.next-release {
@@ -151,20 +154,9 @@ a.next-release {
 }
 
 .has-underline {
-  border-bottom: 1px solid #fff;
+  border-bottom: 1px solid var(--title-color);
   padding: 1em 0px;
   margin-bottom: 1em;
-
-  html.has-light-theme & {
-    border-bottom: 1px solid #DCDCDC;
-  }
-}
-
-html.has-light-theme .title {
-  &.is-4,
-  &.is-6 {
-    color: #555;
-  }
 }
 
 .item {
@@ -174,10 +166,5 @@ html.has-light-theme .title {
 code {
   border-radius: 4px;
   background-color: #444;
-
-  html.has-light-theme & {
-    background-color: #999;
-    color: #FFF;
-  }
 }
 </style>

assets/pages/__snapshots__/Index.spec.js.snap

@@ -2,7 +2,7 @@
 
 exports[`<Index /> renders correctly 1`] = `
 <div
-  class="hero is-fullheight is-dark"
+  class="hero is-fullheight"
 >
   <div
     class="hero-body"

assets/styles.scss

@@ -1,7 +1,22 @@
 @charset "utf-8";
+@import "~bulma/sass/utilities/initial-variables.sass";
 
-$menu-item-active-background-color: hsl(171, 100%, 41%);
-$menu-item-color: hsl(0, 6%, 87%);
+$body-family: "Roboto", sans-serif;
+$body-background-color: var(--body-background-color);
+$body-color: var(--body-color);
+
+$scheme-main: var(--scheme-main);
+$scheme-main-bis: var(--scheme-main-bis);
+$scheme-main-ter: var(--scheme-main-ter);
+
+$border: var(--border-color);
+$border-hover: var(--border-hover-color);
+
+$menu-item-active-background-color: var(--menu-item-active-background-color);
+$menu-item-color: var(--menu-item-color);
+$menu-item-hover-background-color: var(--menu-item-hover-background-color);
+
+$title-color: var(--title-color);
 
 @import "~bulma";
 @import "../node_modules/splitpanes/dist/splitpanes.css";
@@ -9,24 +24,53 @@ $menu-item-color: hsl(0, 6%, 87%);
 @import "~buefy/src/scss/components/_dropdown";
 @import "~buefy/src/scss/components/_switch";
 
+html {
+  --scheme-main: #{$black};
+  --scheme-main-bis: #{$black-bis};
+  --scheme-main-ter: #{$black-ter};
+
+  --border-color: #{$grey-darker};
+  --border-hover-color: var(--secondary-color);
+  --logo-color: var(--secondary-color);
+
+  --primary-color: #{$turquoise};
+  --secondary-color: #{$yellow};
+
+  --body-background-color: #{$black-bis};
+  --body-color: #{$grey-lighter};
+
+  --menu-item-active-background-color: var(--primary-color);
+  --menu-item-color: hsl(0, 6%, 87%);
+  --menu-item-hover-background-color: #{$white-ter};
+
+  --title-color: #{$grey-lightest};
+}
+
+[data-theme="light"] {
+  --scheme-main: #{$white};
+  --scheme-main-bis: #{$white-bis};
+  --scheme-main-ter: #{$white-ter};
+
+  --border-color: #{$grey-lighter};
+  --border-hover-color: var(--secondary-color);
+  --logo-color: #{$grey-darker};
+
+  --primary-color: #{$turquoise};
+  --secondary-color: #d8f0ca;
+
+  --body-background-color: #{$white-bis};
+  --body-color: #{$grey-darker};
+
+  --menu-item-color: #{$grey-dark};
+  --menu-item-hover-background-color: #eee8e7;
+
+  --title-color: #{$grey-dark};
+}
+
 html {
   overflow-x: unset;
   overflow-y: unset;
   scroll-snap-type: y proximity;
-  background-color: #111;
-
-  &.has-light-theme {
-    background-color: #F8F8F8;
-  }
-}
-
-body {
-  font-family: "Roboto", sans-serif;
-  color: #ddd;
-
-  html.has-light-theme & {
-    color: #333;
-  }
 }
 
 html.has-custom-scrollbars {
@@ -64,7 +108,7 @@ html.has-custom-scrollbars {
   color: #fff;
   border-color: transparent;
   &:hover {
-    border-color: rgb(255, 221, 87) !important;
+    border-color: var(--border-hover-color) !important;
     background: rgba(0, 0, 0, 0.8) !important;
     color: #fff !important;
   }
@@ -74,11 +118,4 @@ html.has-custom-scrollbars {
     color: unset;
     border-color: transparent;
   }
-
-  html.has-light-theme & {
-    &:hover {
-      background: #7d7d68 !important;
-      border-color: #7d7d68 !important;
-    }
-  }
 }

integration/.dockerignore

@@ -0,0 +1 @@
+node_modules

integration/yarn.lock

@@ -3137,9 +3137,9 @@ punycode@^2.1.0, punycode@^2.1.1:
   integrity sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==
 
 puppeteer@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/puppeteer/-/puppeteer-4.0.0.tgz#96d647c3546119f8e670493bcebf9ddb044a2367"
-  integrity sha512-yNshT0M5DWfZ8DQoduZuGYpcwqXxKOZdgt5G0IF5VEKbydaDbWP/f5pQRfzQ4e+a4w0Rge3uzcogHeUPQM8nCA==
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/puppeteer/-/puppeteer-4.0.1.tgz#ebc2ee61157ed1aa25be3843fda97807df1d51f5"
+  integrity sha512-LIiSWTRqpTnnm3R2yAoMBx1inSeKwVZy66RFSkgSTDINzheJZPd5z5mMbPM0FkvwWAZ27a+69j5nZf+Fpyhn3Q==
   dependencies:
     debug "^4.1.0"
     extract-zip "^2.0.0"

package.json

@@ -1,6 +1,6 @@
 {
  "name": "dozzle",
- "version": "1.29.0",
+ "version": "2.0.3",
  "description": "Realtime log viewer for docker containers. ",
  "scripts": {
   "prestart": "yarn clean",
@@ -29,31 +29,32 @@
   "buefy": "^0.8.20",
   "bulma": "^0.9.0",
   "date-fns": "^2.14.0",
-  "dompurify": "^2.0.11",
+  "dompurify": "^2.0.12",
   "hotkeys-js": "^3.8.1",
   "lodash.debounce": "^4.0.8",
+  "lodash.throttle": "^4.1.1",
   "semver": "^7.3.2",
   "splitpanes": "^2.2.1",
   "store": "^2.0.12",
   "vue": "^2.6.11",
   "vue-meta": "^2.4.0",
   "vue-router": "^3.3.4",
-  "vuex": "^3.4.0"
+  "vuex": "^3.5.1"
  },
  "devDependencies": {
-  "@babel/core": "^7.10.3",
-  "@babel/plugin-transform-runtime": "^7.10.3",
+  "@babel/core": "^7.10.4",
+  "@babel/plugin-transform-runtime": "^7.10.4",
   "@vue/component-compiler-utils": "^3.1.2",
   "@vue/test-utils": "^1.0.3",
   "babel-core": "^7.0.0-bridge.0",
-  "babel-jest": "^26.0.1",
+  "babel-jest": "^26.1.0",
   "babel-preset-env": "^1.7.0",
-  "caniuse-lite": "^1.0.30001087",
+  "caniuse-lite": "^1.0.30001090",
   "css-loader": "^3.6.0",
   "eventsourcemock": "^2.0.0",
   "html-webpack-plugin": "^4.3.0",
   "husky": "^4.2.5",
-  "jest": "^26.0.1",
+  "jest": "^26.1.0",
   "jest-serializer-vue": "^2.0.2",
   "lint-staged": "^10.2.11",
   "mini-css-extract-plugin": "^0.9.0",
@@ -62,12 +63,12 @@
   "postcss-import": "^12.0.1",
   "postcss-loader": "^3.0.0",
   "prettier": "^2.0.5",
-  "release-it": "^13.6.3",
+  "release-it": "^13.6.4",
   "sass": "^1.26.9",
   "sass-loader": "^8.0.2",
   "vue-hot-reload-api": "^2.3.4",
   "vue-jest": "^3.0.5",
-  "vue-loader": "^15.9.2",
+  "vue-loader": "^15.9.3",
   "vue-style-loader": "^4.1.2",
   "vue-template-compiler": "^2.6.11",
   "webpack": "^4.43.0",