Feat(ui): Viewport size switcher to test responsive/mobile view (Impl…

…ements #482) (#1447)
rnwood · Apr 28, 2024 · 8d6dd1a · 8d6dd1a
1 parent 1ef2ac4
commit 8d6dd1a
Show file tree

Hide file tree

Showing 6 changed files with 91 additions and 293 deletions.
diff --git a/Rnwood.Smtp4dev/ClientApp/package-lock.json b/Rnwood.Smtp4dev/ClientApp/package-lock.json
diff --git a/Rnwood.Smtp4dev/ClientApp/package.json b/Rnwood.Smtp4dev/ClientApp/package.json
@@ -32,6 +32,7 @@
     "brace": "^0.11.1",
     "core-js": "^3.36.1",
     "cross-env": "^7.0.3",
+    "device-sizes": "^1.2.3",
     "element-plus": "^2.7.0",
     "eslint": "^8.57.0",
     "eslint-plugin-vue": "^9",

diff --git a/Rnwood.Smtp4dev/ClientApp/src/components/messageviewhtml.vue b/Rnwood.Smtp4dev/ClientApp/src/components/messageviewhtml.vue
@@ -1,26 +1,72 @@
 <template>
 
     <div class="hfillpanel" v-loading="!html">
+
+        <div class="toolbar">
+            <el-select style="flex: 1 0 200px;" v-model="selectedViewportSizeName" filterable @change="viewportRotate=false">
+                <el-option v-for="item in availableViewportSizes"
+                           :key="item.name"
+                           :label="item.name"
+                           :value="item.name" />
+
+                <template #prefix>
+                    <el-icon><Monitor /></el-icon>
+                </template>
+
+            </el-select>
+
+            <el-switch v-model="viewportRotate" v-if="!selectedViewportSize.fill" active-text="Rotate" size="medium" />
+
+            <el-select style="flex: 0 0 100px;" v-model="selectedZoomLevelName">
+                <el-option v-for="item in availableZoomLevels"
+                           :key="item.name"
+                           :label="item.name"
+                           :value="item.name" />
+
+                <template #prefix>
+                    <el-icon><ZoomOut /></el-icon>
+                </template>
+
+            </el-select>
+
+        </div>
+
         <el-alert v-if="error" type="error">
             {{error.message}}
 
             <el-button v-on:click="loadMessage">Retry</el-button>
         </el-alert>
         <el-alert v-if="wasSanitized" type="warning">
-            Message HTML was sanizited for display. <el-button type="danger" size="small" v-on:click="disableSanitization">Disable (DANGER!)</el-button>
+            Message HTML was sanitized for display. <el-button type="danger" size="small" v-on:click="disableSanitization">Disable (DANGER!)</el-button>
         </el-alert>
 
-        <iframe class="fill" @load="onHtmlFrameLoaded" ref="htmlframe"></iframe>
+        <div class="fill" style="display: flex; flex-direction: column;">
+            <iframe :style="htmlFrameStyles" @load="onHtmlFrameLoaded" ref="htmlframe"></iframe>
+        </div>
     </div>
 </template>
 <script lang="ts">
     import { Component, Vue, Prop, Watch, toNative } from 'vue-facing-decorator'
-    
+
     import MessagesController from "../ApiClient/MessagesController";
     import ServerController from "../ApiClient/ServerController";
     import Message from "../ApiClient/Message";
     import * as srcDoc from 'srcdoc-polyfill';
     import sanitizeHtml from 'sanitize-html';
+    import { deviceSizes, Brand } from 'device-sizes'
+
+    type ViewPortSize = {
+        name: string
+        fill?: boolean
+        height?: number,
+        width?: number
+    }
+
+
+    type ZoomLevel = {
+        name: string,
+        scale: number
+    }
 
     @Component
     class MessageViewHtml extends Vue {
@@ -31,6 +77,39 @@
         sanitizedHtml: string | null = null;
         wasSanitized: boolean = false;
 
+        availableViewportSizes: ViewPortSize[] = [{ name: "Normal", fill: true }].concat(Object.values(deviceSizes).map(d => ({
+            name: `${Brand[d.brand]} ${d.name} (${d.size}")`, fill: false, width: d.width / d.scale, height: d.height / d.scale
+        })));
+        selectedViewportSizeName = "Normal";
+        viewportRotate = false;
+
+        availableZoomLevels: ZoomLevel[] = [{ name: "150%", scale: 1.5 },{ name: "125%", scale: 1.25 },{ name: "100%", scale: 1 }, { name: "75%", scale: 0.75 }, { name: "50%", scale: 0.5 }]
+        selectedZoomLevelName = "100%";
+
+        get selectedViewportSize(): ViewPortSize {
+            return this.availableViewportSizes.find(s => s.name == this.selectedViewportSizeName) ?? this.availableViewportSizes[0];
+        }
+
+        get selectedZoomLevel(): ZoomLevel {
+            return this.availableZoomLevels.find(s => s.name == this.selectedZoomLevelName) ?? this.availableZoomLevels[0];
+        }
+
+        get htmlFrameStyles() {
+            const height = this.viewportRotate ? this.selectedViewportSize.width : this.selectedViewportSize.height;
+            const width = this.viewportRotate ? this.selectedViewportSize.height : this.selectedViewportSize.width;
+
+            return {
+                border: (this.selectedViewportSize.fill ? '0' : '5px solid black'),
+                'align-self': (this.selectedViewportSize.fill ? 'stretch' : 'center'),
+                'flex-grow': `${this.selectedViewportSize.fill ? 1 : 0}`,
+                'flex-shrink': 0,
+                'height': `${(height ?? 0) * this.selectedZoomLevel.scale}px`,
+                width: (this.selectedViewportSize.fill ? '100%' : ((width ?? 0) * this.selectedZoomLevel.scale) + 'px'),
+                'transform-origin': "top left",
+                transform: `scale(${this.selectedZoomLevel.scale})`
+            };
+        }
+
 
         error: Error | null = null;
         loading = false;
@@ -100,7 +179,6 @@
         }
 
         async created() {
-
             this.loadMessage();
         }
 

diff --git a/Rnwood.Smtp4dev/ClientApp/src/css/site.css b/Rnwood.Smtp4dev/ClientApp/src/css/site.css
@@ -167,6 +167,7 @@ pre.source code {
 
 .toolbar {
     display: flex;
+    flex: 0 0 content;
     flex-wrap: wrap;
     column-gap: 6px;
     row-gap: 6px;