From 7f67007a124928ecad1567bf4670bb44f7718a04 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=B6rn-Michael=20Miehe?=
 <40151420+ldericher@users.noreply.github.com>
Date: Mon, 12 Sep 2022 13:01:58 +0000
Subject: [PATCH] TickerBar component

---
 ui/src/App.vue                  |  4 +++
 ui/src/components/TickerBar.vue | 60 +++++++++++++++++++++++++++++++++
 2 files changed, 64 insertions(+)
 create mode 100644 ui/src/components/TickerBar.vue

diff --git a/ui/src/App.vue b/ui/src/App.vue
index c9a6e0a..e22c14a 100644
--- a/ui/src/App.vue
+++ b/ui/src/App.vue
@@ -6,6 +6,7 @@
       </TitleBar>
       <HelloWorld />
     </v-main>
+    <TickerBar :content="ticker_html" />
   </v-app>
 </template>
 
@@ -13,15 +14,18 @@
 import { Component, Vue } from "vue-property-decorator";
 import HelloWorld from "./components/HelloWorld.vue";
 import TitleBar from "./components/TitleBar.vue";
+import TickerBar from "./components/TickerBar.vue";
 
 @Component({
   components: {
     HelloWorld,
     TitleBar,
+    TickerBar,
   },
 })
 export default class App extends Vue {
   private title_html = "<h1>changeme</h1>";
+  private ticker_html = "<p>changeme</p>";
 }
 </script>
 
diff --git a/ui/src/components/TickerBar.vue b/ui/src/components/TickerBar.vue
new file mode 100644
index 0000000..2d0a8e5
--- /dev/null
+++ b/ui/src/components/TickerBar.vue
@@ -0,0 +1,60 @@
+<template>
+  <v-footer color="primary" dark>
+    <span
+      class="text-h6"
+      :style="{ 'animation-duration': marqueeDuration }"
+      ref="slotWrapper"
+    >
+      <div v-html="content" />
+    </span>
+  </v-footer>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue } from "vue-property-decorator";
+
+@Component
+export default class TickerBar extends Vue {
+  @Prop()
+  public content!: string;
+
+  get marqueeDuration(): string {
+    // 10 seconds + another second per 7 chars
+    let dv = this.content ? Math.round(this.content.length / 7) : 0;
+    return 10 + dv + "s";
+  }
+}
+</script>
+
+<style lang="scss">
+@keyframes marquee {
+  0% {
+    transform: translate(0, 0);
+  }
+  100% {
+    transform: translate(-100%, 0);
+  }
+}
+
+.v-footer {
+  white-space: nowrap;
+  overflow: hidden;
+
+  > span {
+    display: inline-block;
+    padding-left: 100%;
+    text-indent: 0;
+    animation: marquee 30s linear infinite;
+
+    &:hover {
+      animation-play-state: paused;
+    }
+  }
+}
+</style>
+
+<style>
+.v-footer p {
+  margin: 0;
+}
+</style>
\ No newline at end of file