Skip to content

GitLab

Commit 75e8e1f0 authored by Clark Lin's avatar Clark Lin
Browse files

optimized layout for TextToMermaid.

parent a1d0ba42
Expand all Hide whitespace changes
Inline Side-by-side
package-lock.json
View file @ 75e8e1f0
This diff is collapsed.
package.json
View file @ 75e8e1f0
...@@ -15,12 +15,12 @@ ...@@ -15,12 +15,12 @@
"mermaid": "^11.9.0", "mermaid": "^11.9.0",
"svg2pdf.js": "^2.5.0", "svg2pdf.js": "^2.5.0",
"vite-plugin-vuetify": "^2.1.1", "vite-plugin-vuetify": "^2.1.1",
"vue": "^3.5.17", "vue": "^3.5.18",
"vue-router": "^4.5.1", "vue-router": "^4.5.1",
"vuetify": "^3.9.2" "vuetify": "^3.9.2"
}, },
"devDependencies": { "devDependencies": {
"@vitejs/plugin-vue": "^6.0.0", "@vitejs/plugin-vue": "^6.0.0",
"vite": "^7.0.4" "vite": "^7.0.6"
} }
} }
src/App.vue
View file @ 75e8e1f0
...@@ -21,7 +21,7 @@ import Sidebar from './components/Sidebar.vue' ...@@ -21,7 +21,7 @@ import Sidebar from './components/Sidebar.vue'
.main-content { .main-content {
flex: 1; flex: 1;
/* margin-left: 220px; */ /* margin-left: 220px; */
padding: 40px; padding: 0;
} }
* { * {
box-sizing: border-box; box-sizing: border-box;
......
src/components/TextToMermaid.vue
View file @ 75e8e1f0
<template> <template>
<div class="text-to-mermaid"> <!-- <div class="text-to-mermaid"> -->
<h1 class="page-title">Text to Mermaid Converter</h1> <v-container fluid class="text-to-mermaid">
<!-- <h1 class="page-title">Text to Mermaid Converter</h1> -->
<div class="converter-container"> <v-row>
<!-- Input Section --> <v-col cols="12">
<div class="input-section"> <h1 class="text-h4 text-center font-weight-bold mx-3 my-3">Text to Mermaid Converter</h1>
<h3>Input Text</h3> </v-col>
<textarea </v-row>
v-model="inputText" <v-divider :thickness="1" color="white" class="border-opacity-100"></v-divider>
@input="handleInput" <!-- <div class="converter-container"> -->
placeholder="Enter your text here to convert to Mermaid diagram..." <v-row class="mx-3 my-3">
class="text-input" <v-col cols="12" md="4" class="pa-3">
rows="10" <!-- Input Section -->
></textarea> <div class="input-section">
<h3>Input Text</h3>
<div class="button-group"> <v-textarea
<button @click="convertNow" class="convert-btn" :disabled="isProcessing"> v-model="inputText"
{{ isProcessing ? 'Converting...' : 'Convert Now' }} @input="handleInput"
</button> placeholder="Enter your text here to convert to Mermaid diagram..."
<button @click="clearAll" class="clear-btn">Clear All</button> class="text-input"
</div> rows="10"
></v-textarea>
<!-- Status Indicator -->
<div class="status" :class="currentState"> <div class="button-group">
<span v-if="currentState === 'typing'">Typing...</span> <button @click="convertNow" class="convert-btn" :disabled="isProcessing">
<span v-else-if="currentState === 'processing'">Converting...</span> {{ isProcessing ? 'Converting...' : 'Convert Now' }}
<span v-else-if="currentState === 'ready'">Ready</span> </button>
<span v-else-if="currentState === 'error'">Error occurred</span> <button @click="clearAll" class="clear-btn">Clear All</button>
</div>
</div>
<!-- Output Section -->
<div class="output-section">
<h3>Mermaid Diagram</h3>
<!-- Diagram Section -->
<div class="diagram-section">
<div class="diagram-header">
<h4>Visual Diagram:</h4>
<!-- Diagram Controls -->
<div class="diagram-controls">
<div class="zoom-controls">
<label for="zoom-slider" class="zoom-label">Zoom:</label>
<input
id="zoom-slider"
type="range"
v-model="zoomLevel"
@input="updateZoom"
min="0.5"
max="3"
step="0.1"
class="zoom-slider"
/>
<span class="zoom-level">{{ Math.round(zoomLevel * 100) }}%</span>
<button @click="resetZoom" class="zoom-btn reset-btn">Reset</button>
</div>
<button @click="toggleFullscreen" class="fullscreen-btn" v-if="mermaidCode">
Fullscreen
</button>
</div>
</div> </div>
<div class="mermaid-container" ref="mermaidContainerWrapper">
<div v-if="mermaidCode" class="mermaid-diagram" ref="mermaidContainer" :style="{ transform: `scale(${zoomLevel})` }"></div> <!-- Status Indicator -->
<div v-else class="placeholder"> <div class="status" :class="currentState">
<p>Your Mermaid diagram will appear here</p> <span v-if="currentState === 'typing'">Typing...</span>
</div> <span v-else-if="currentState === 'processing'">Converting...</span>
<span v-else-if="currentState === 'ready'">Ready</span>
<span v-else-if="currentState === 'error'">Error occurred</span>
</div> </div>
</div> </div>
</v-col>
<!-- Fullscreen Modal -->
<div v-if="isFullscreen" class="fullscreen-modal" @click="closeFullscreen"> <v-col cols="12" md="8" class="pa-3">
<div class="modal-content" @click.stop> <!-- Output Section -->
<div class="modal-header"> <div class="output-section">
<h3>Mermaid Diagram - Fullscreen View</h3> <h3>Mermaid Diagram</h3>
<div class="modal-controls">
<!-- Diagram Section -->
<div class="diagram-section">
<div class="diagram-header">
<h4>Visual Diagram:</h4>
<!-- Diagram Controls -->
<div class="diagram-controls">
<div class="zoom-controls"> <div class="zoom-controls">
<label for="fullscreen-zoom-slider" class="zoom-label">Zoom:</label> <label for="zoom-slider" class="zoom-label">Zoom:</label>
<input <input
id="fullscreen-zoom-slider" id="zoom-slider"
type="range" type="range"
v-model="fullscreenZoomLevel" v-model="zoomLevel"
@input="updateFullscreenZoom" @input="updateZoom"
min="0.5" min="0.5"
max="3" max="3"
step="0.1" step="0.1"
class="zoom-slider" class="zoom-slider"
/> />
<span class="zoom-level">{{ Math.round(fullscreenZoomLevel * 100) }}%</span> <span class="zoom-level">{{ Math.round(zoomLevel * 100) }}%</span>
<button @click="resetFullscreenZoom" class="zoom-btn reset-btn">Reset</button> <button @click="resetZoom" class="zoom-btn reset-btn">Reset</button>
</div> </div>
<!-- Single Download Button --> <button @click="toggleFullscreen" class="fullscreen-btn" v-if="mermaidCode">
<button @click="downloadDiagram" class="download-btn" v-if="mermaidCode"> Fullscreen
Download
</button> </button>
<button @click="closeFullscreen" class="close-btn">&times;</button>
</div> </div>
</div> </div>
<div class="modal-body" <div class="mermaid-container" ref="mermaidContainerWrapper">
@mousedown="startDrag" <div v-if="mermaidCode" class="mermaid-diagram" ref="mermaidContainer" :style="{ transform: `scale(${zoomLevel})` }"></div>
@mousemove="onDrag" <div v-else class="placeholder">
@mouseup="stopDrag" <p>Your Mermaid diagram will appear here</p>
@mouseleave="stopDrag" </div>
@wheel="onWheel" </div>
@contextmenu.prevent> <!-- Prevent right-click context menu --> </div>
<div class="fullscreen-diagram"
ref="fullscreenDiagram" <!-- Fullscreen Modal -->
:style="{ <div v-if="isFullscreen" class="fullscreen-modal" @click="closeFullscreen">
transform: `scale(${fullscreenZoomLevel}) translate(${dragOffset.x}px, ${dragOffset.y}px)`, <div class="modal-content" @click.stop>
cursor: isDragging ? 'grabbing' : 'grab' <div class="modal-header">
}"> <h3>Mermaid Diagram - Fullscreen View</h3>
<div class="modal-controls">
<div class="zoom-controls">
<label for="fullscreen-zoom-slider" class="zoom-label">Zoom:</label>
<input
id="fullscreen-zoom-slider"
type="range"
v-model="fullscreenZoomLevel"
@input="updateFullscreenZoom"
min="0.5"
max="3"
step="0.1"
class="zoom-slider"
/>
<span class="zoom-level">{{ Math.round(fullscreenZoomLevel * 100) }}%</span>
<button @click="resetFullscreenZoom" class="zoom-btn reset-btn">Reset</button>
</div>
<!-- Single Download Button -->
<button @click="downloadDiagram" class="download-btn" v-if="mermaidCode">
Download
</button>
<button @click="closeFullscreen" class="close-btn">&times;</button>
</div>
</div>
<div class="modal-body"
@mousedown="startDrag"
@mousemove="onDrag"
@mouseup="stopDrag"
@mouseleave="stopDrag"
@wheel="onWheel"
@contextmenu.prevent> <!-- Prevent right-click context menu -->
<div class="fullscreen-diagram"
ref="fullscreenDiagram"
:style="{
transform: `scale(${fullscreenZoomLevel}) translate(${dragOffset.x}px, ${dragOffset.y}px)`,
cursor: isDragging ? 'grabbing' : 'grab'
}">
</div>
</div> </div>
</div> </div>
</div> </div>
</div>
<!-- Generated Code Section (Now Second) --> <!-- Generated Code Section (Now Second) -->
<div v-if="mermaidCode" class="code-section"> <div v-if="mermaidCode" class="code-section">
<h4>Generated Mermaid Code:</h4> <h4>Generated Mermaid Code:</h4>
<div class="code-container"> <div class="code-container">
<pre><code>{{ mermaidCode }}</code></pre> <pre><code>{{ mermaidCode }}</code></pre>
</div>
</div> </div>
</div> </div>
</div> </v-col>
</div> <!-- </div> -->
</div> </v-row>
<!-- </div> -->
</v-container>
</template> </template>
<script setup> <script setup>
...@@ -524,20 +537,21 @@ ...@@ -524,20 +537,21 @@
<style scoped> <style scoped>
.text-to-mermaid { .text-to-mermaid {
/* max-width: 2400px; */ /* max-width: 2400px; */
display: grid; /* display: grid;
grid-template-rows: 1fr; grid-template-rows: 1fr; */
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
margin: 10px; /* margin: 10px; */
padding: 0; padding: 0;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
height: 100%;
} }
.converter-container { /* .converter-container {
display: grid; display: grid;
grid-template-columns: 1fr 1.5fr; grid-template-columns: 1fr 1.5fr;
grid-template-rows: 1fr; grid-template-rows: 1fr;
gap: 40px; gap: 40px;
margin: 40px; margin: 40px;
} } */
.input-section, .output-section { .input-section, .output-section {
background: #f8f9fa; background: #f8f9fa;
padding: 20px; padding: 20px;
...@@ -1283,23 +1297,6 @@ ...@@ -1283,23 +1297,6 @@
background: #545b62; background: #545b62;
} }
/* @media (max-width: 768px) {
.converter-container {
grid-template-columns: 1fr;
}
.button-group {
flex-direction: column;
}
}
@media (min-width: 1920px) {
.text-to-mermaid {
max-width: 2800px;
}
.converter-container {
gap: 80px;
}
} */
.page-title { .page-title {
font-size: 2.4rem; /* Larger, more prominent */ font-size: 2.4rem; /* Larger, more prominent */
font-weight: 700; /* Bold */ font-weight: 700; /* Bold */
......
src/style.css
View file @ 75e8e1f0
...@@ -60,6 +60,8 @@ button:focus-visible { ...@@ -60,6 +60,8 @@ button:focus-visible {
#app { #app {
/* max-width: 1280px; */ /* max-width: 1280px; */
width: 100%;
height: 100%;
margin: 0 auto; margin: 0 auto;
padding: 2rem; padding: 2rem;
text-align: center; text-align: center;
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment