add figure as predefined module

2020-08-20 14:48:09 +02:00
parent 4abe35d422
commit 6191bebe7f
4 changed files with 109 additions and 6 deletions
@@ -0,0 +1,104 @@
+<template>
+  <figure class="ui-module-preview-figure" :class="{'has-image': imageSource != null}">
+    <img v-if="imageSource" :src="imageSource" class="-image" />
+    <figcaption>
+      <article class="-text" v-if="text" v-html="text"></article>
+      <article class="-subline" v-if="subline" v-html="subline"></article>
+    </figcaption>
+  </figure>
+</template>
+
+<script>
+  import MediaApi from 'zero/resources/media.js'
+
+
+  export default {
+    name: 'uiModulePreviewFigure',
+
+    props: {
+      text: {
+        type: String
+      },
+      subline: {
+        type: String
+      },
+      image: {
+        type: String
+      }
+    },
+
+    data: () => ({
+      imageSource: null
+    }),
+
+    watch: {
+      image(val)
+      {
+        this.loadImageSource();
+      }
+    },
+
+    mounted()
+    {
+      this.loadImageSource();
+    },
+
+    methods: {
+
+      loadImageSource()
+      {
+        if (!this.image)
+        {
+          this.imageSource = null;
+          return;
+        }
+
+        this.imageSource = MediaApi.getImageSource(this.image);
+      }
+    }
+  }
+</script>
+
+<style lang="scss">
+  .ui-module-preview-figure
+  {
+    font-size: var(--font-size);
+    line-height: 1.5;
+    margin: 0;
+    padding: 0;
+
+    &.has-image
+    {
+      display: grid;
+      grid-template-columns: auto 1fr;
+      grid-gap: 20px;
+      align-items: center;
+    }
+
+    .-text
+    {
+
+    }
+
+    .-subline
+    {
+      color: var(--color-fg-dim);
+      font-size: var(--font-size-s);
+    }
+
+    .-text, .-subline
+    {
+      overflow: hidden;
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: 4;
+      display: -webkit-box;
+    }
+
+    .-image
+    {
+      border-radius: var(--radius);
+      max-width: 64px;
+      max-height: 64px;
+    }
+  }
+</style>
@@ -7,7 +7,7 @@

 <script>
  export default {
-    name: 'uiModulePreviewText',
+    name: 'uiModulePreviewHeadline',

    props: {
      text: {