SaaS frontend update

2026-04-23 01:32:15 +00:00 · 2020-05-29 17:37:23 +02:00
parent 252b6fd0bf
commit 61a8849e2d
21 changed files with 1975 additions and 112 deletions
@@ -0,0 +1,83 @@
+ <template>
+     <div class="cell-image-thumbnail">
+         <div class="image" :class="imageSize" v-if="image">
+             <img :src="image" :alt="title">
+         </div>
+         <div class="info">
+             <b class="name" v-if="title">{{ title }}</b>
+             <span class="description" v-if="description">{{ description }}</span>
+         </div>
+     </div>
+</template>
+
+<script>
+    export default {
+        name:'DatatableCellImage',
+        props: ['image', 'title', 'description', 'image-size'],
+    }
+</script>
+
+<style lang="scss" scoped>
+    @import '@assets/vue-file-manager/_variables';
+    @import '@assets/vue-file-manager/_mixins';
+
+    .cell-image-thumbnail {
+        display: flex;
+        align-items: center;
+        cursor: pointer;
+
+        .image {
+            margin-right: 20px;
+            line-height: 0;
+
+            img {
+                line-height: 0;
+                width: 48px;
+                height: 48px;
+                border-radius: 8px;
+            }
+
+            &.small {
+                img {
+                    width: 32px;
+                    height: 32px;
+                }
+            }
+        }
+
+        .info {
+
+            .name, .description {
+                max-width: 150px;
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                display: block;
+            }
+
+            .name {
+                @include font-size(15);
+                line-height: 1;
+                color: $text;
+            }
+
+            .description {
+                color: $text-muted;
+                @include font-size(12);
+            }
+        }
+    }
+
+    @media (prefers-color-scheme: dark) {
+
+        .cell-image-thumbnail {
+
+            .info {
+
+                .description {
+                    color: $dark_mode_text_secondary;
+                }
+            }
+        }
+    }
+</style>