add client header

Author: warm-coolguy

packages/clients/textLocator/src/addPlugins.ts

@@ -11,6 +11,7 @@ import Scale from '@polar/plugin-scale'
 import Toast from '@polar/plugin-toast'
 import Zoom from '@polar/plugin-zoom'
 
+import Header from './plugins/Header'
 import { searchCoastalGazetteer } from './search/coastalGazetteer'
 import { idRegister } from './services'
 
@@ -20,6 +21,10 @@ export const addPlugins = (core) => {
   setLayout(NineLayout)
 
   core.addPlugins([
+    Header({
+      displayComponent: true,
+      layoutTag: NineLayoutTag.TOP_LEFT,
+    }),
     IconMenu({
       displayComponent: true,
       // TODO fix, it's broken ...

packages/clients/textLocator/src/plugins/Header/Header.vue

@@ -0,0 +1,42 @@
+<template>
+  <h1 class="polar-plugin-header" lang="en">
+    {{ $t('common:plugins.textLocator.header.text') }}
+    &nbsp;
+    <v-icon x-small color="white">fa-scroll</v-icon>
+    <v-icon x-small color="white">fa-magnifying-glass</v-icon>
+  </h1>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+
+export default Vue.extend({
+  name: 'TextLocatorHeader',
+})
+</script>
+
+<style lang="scss" scoped>
+.polar-plugin-header {
+  position: fixed;
+  top: 0;
+  left: 0;
+
+  display: flex;
+
+  pointer-events: all;
+
+  color: #ffffff;
+  font-weight: initial;
+  font-size: 0.8rem;
+  background: #7d212b;
+  border-radius: 0 0 10px 0;
+  padding: 0.1em 2em 0.1em 0.5em;
+}
+</style>
+
+<style lang="scss">
+/* TODO decide if required */
+.polar-plugin-address-search-toolbar {
+  margin-top: 12px;
+}
+</style>

packages/clients/textLocator/src/plugins/Header/index.ts

@@ -0,0 +1,12 @@
+import Vue from 'vue'
+import { PluginOptions } from '@polar/lib-custom-types'
+import Header from './Header.vue'
+import language from './language'
+
+export default (options: PluginOptions) => (instance: Vue) =>
+  instance.$store.dispatch('addComponent', {
+    name: 'header',
+    plugin: Header,
+    language,
+    options,
+  })

packages/clients/textLocator/src/plugins/Header/language.ts

@@ -0,0 +1,31 @@
+import { LanguageOption } from '@polar/lib-custom-types'
+
+const lang: LanguageOption[] = [
+  {
+    type: 'de',
+    resources: {
+      plugins: {
+        textLocator: {
+          header: {
+            // remove lang="en" in component if this becomes german
+            text: 'TextLocator',
+          },
+        },
+      },
+    },
+  },
+  {
+    type: 'en',
+    resources: {
+      plugins: {
+        textLocator: {
+          header: {
+            text: 'TextLocator',
+          },
+        },
+      },
+    },
+  },
+]
+
+export default lang