add figure as predefined module

zero.Debug/Renderers/module.textwithimage.js

@@ -3,7 +3,7 @@
 
   // define a preview which is rendered in the overview
   preview: {
-    template: '<ui-module-preview-text :text="model.text" />'
+    template: '<ui-module-preview-figure :text="model.headline" :subline="model.text" :image="model.imageId" />'
   },
 
   fields: [

zero.Web.UI/App/components/modules/module-preview.vue

@@ -5,10 +5,10 @@
     <div v-if="!value.isActive" class="ui-module-item-disabled"></div>
     <!--<pre><code>{{value}}</code></pre>-->
     <div class="ui-module-item-actions">
-      <ui-icon-button v-if="!value.isActive" class="ui-module-item-disabled-icon" icon="fth-lock" title="Disabled" @click="value.isActive = true" />
-      <ui-dropdown v-else align="right">
+      <ui-dropdown align="right">
         <template v-slot:button>
-          <ui-icon-button icon="fth-more-horizontal" title="Actions" />
+          <ui-icon-button v-if="!value.isActive" class="ui-module-item-disabled-icon" icon="fth-lock" title="Disabled" />
+          <ui-icon-button v-else icon="fth-more-horizontal" title="Actions" />
         </template>
         <ui-dropdown-button label="Edit" icon="fth-edit-2" @click="$emit('edit', module, value)" />
         <ui-dropdown-button v-if="value.isActive" label="Disable" icon="fth-lock" @click="value.isActive = false" />
@@ -120,7 +120,6 @@
   {
     position: relative;
     z-index: 1;
-    background: var(--color-accent-error-bg);
 
     .ui-button-icon
     {

zero.Web.UI/App/components/modules/predefined/module-preview-figure.vue

@@ -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>

zero.Web.UI/App/components/modules/predefined/module-preview-headline.vue

@@ -7,7 +7,7 @@
 
 <script>
   export default {
-    name: 'uiModulePreviewText',
+    name: 'uiModulePreviewHeadline',
 
     props: {
       text: {