add new node components

2021-06-10 13:21:26 +02:00
parent 9c67a871e2
commit 659a16c29c
7 changed files with 619 additions and 0 deletions
@@ -0,0 +1,92 @@
+<template>
+  <div
+    class="node-view-header-prod" :class="'node-view-header-' + mode"
+  >
+    <div class="d-flex w-100">
+      <h4 class="mr-auto">
+        <div class="node-view-header-type">
+          {{ $t('variants.' + node.variant) }} {{ mode === 'card' ? $t('from') : '' }}
+        </div>
+
+        <div v-if="mode === 'card'" class="node-view-header-parent">
+          <!-- FIXME display parent title and authors -->
+          {{ parent }}
+        </div>
+      </h4>
+
+      <button-close v-if="mode === 'view'" @click="onClose()" />
+    </div>
+  </div>
+</template>
+
+<script>
+import { trim, toCommaList } from '@/helpers/common'
+
+export default {
+  name: 'NodeViewHeaderProd',
+
+  props: {
+    node: { type: Object, required: true },
+    mode: { type: String, required: true }
+  },
+
+  computed: {
+    parent () {
+      if (!this.node || !this.node.parents) return
+      return this.node.parents.find(parent => parent.variant === 'depart')
+    }
+  },
+
+  methods: {
+    trim,
+    toCommaList,
+
+    onClose () {
+      this.$store.dispatch('CLOSE_NODE', this.node.id)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.node-view-header {
+  &-prod {
+    font: {
+      family: $font-family-base;
+      font-weight: $font-weight-bold;
+      size: inherit;
+      line-height: inherit;
+    }
+
+    @each $color, $value in $theme-colors {
+      .node-view-#{$color} & {
+        color: darken($value, 32%);
+      }
+    }
+  }
+
+  &-parent {
+    font-family: $font-family-text;
+  }
+
+  &-card {
+    h4 {
+      font-size: 0.8rem;
+
+      @include media-breakpoint-up(sm) {
+        font-size: 1.25rem;
+      }
+    }
+  }
+
+  &-view {
+    h4 {
+      font-size: 1rem;
+
+      @include media-breakpoint-up(sm) {
+        font-size: 1.4525rem;
+      }
+    }
+  }
+}
+</style>