Skip to content

GitLab

Commit ca404669 authored by Clark Lin's avatar Clark Lin
Browse files

vutified most elements in TextToMermaid.vue

parent 75e8e1f0
Hide whitespace changes
Inline Side-by-side
src/components/TextToMermaid.vue
View file @ ca404669
......@@ -13,7 +13,8 @@
<v-col cols="12" md="4" class="pa-3">
<!-- Input Section -->
<div class="input-section">
<h3>Input Text</h3>
<!-- <h3>Input Text</h3> -->
<v-card-title class="text-h6 pa-0">Input Text</v-card-title>
<v-textarea
v-model="inputText"
@input="handleInput"
......@@ -23,61 +24,108 @@
></v-textarea>
<div class="button-group">
<button @click="convertNow" class="convert-btn" :disabled="isProcessing">
<!-- <button @click="convertNow" class="convert-btn" :disabled="isProcessing">
{{ isProcessing ? 'Converting...' : 'Convert Now' }}
</button>
<button @click="clearAll" class="clear-btn">Clear All</button>
</button> -->
<v-btn
@click="convertNow"
:loading="isProcessing"
:disabled="isProcessing"
color="primary"
variant="flat">
Convert Now
</v-btn>
<!-- <button @click="clearAll" class="clear-btn">Clear All</button> -->
<v-btn
@click="clearAll"
color="secondary"
variant="outlined">
Clear All
</v-btn>
</div>
<!-- Status Indicator -->
<div class="status" :class="currentState">
<!-- <div class="status" :class="currentState">
<span v-if="currentState === 'typing'">Typing...</span>
<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> -->
<v-alert :type="alertType"
:icon="alertIcon"
variant="tonal"
density="compact"
class="my-2">
{{ statusText }}
</v-alert>
</div>
</v-col>
<v-col cols="12" md="8" class="pa-3">
<!-- Output Section -->
<div class="output-section">
<h3>Mermaid Diagram</h3>
<!-- <h3>Mermaid Diagram</h3> -->
<v-card-title class="text-h6 pa-0">Mermaid Diagram</v-card-title>
<!-- 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>
<v-card class="diagram-section mb-4">
<v-card-text class="pa-0">
<div class="diagram-header">
<!-- <h4>Visual Diagram:</h4> -->
<v-card-subtitle class="text-subtitle-1 pa-0">Visual Diagram:</v-card-subtitle>
<!-- 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"
/> -->
<v-slider
id="zoom-slider"
v-model="zoomLevel"
:min="0.5"
:max="3"
:step="0.1"
hide-details
class="zoom-slider"
/>
<span class="zoom-level">{{ Math.round(zoomLevel * 100) }}%</span>
<!-- <button @click="resetZoom" class="zoom-btn reset-btn">Reset</button> -->
<v-btn
@click="resetZoom"
color="secondary"
variant="outlined">
Reset
</v-btn>
</div>
<!-- <button @click="toggleFullscreen" class="fullscreen-btn" v-if="mermaidCode">
Fullscreen
</button> -->
<v-btn
@click="toggleFullscreen"
color="primary"
variant="flat"
v-if="mermaidCode">
Fullscreen
</v-btn>
</div>
<button @click="toggleFullscreen" class="fullscreen-btn" v-if="mermaidCode">
Fullscreen
</button>
</div>
</div>
<div class="mermaid-container" ref="mermaidContainerWrapper">
<div v-if="mermaidCode" class="mermaid-diagram" ref="mermaidContainer" :style="{ transform: `scale(${zoomLevel})` }"></div>
<div v-else class="placeholder">
<p>Your Mermaid diagram will appear here</p>
<div class="mermaid-container" ref="mermaidContainerWrapper">
<div v-if="mermaidCode" class="mermaid-diagram" ref="mermaidContainer" :style="{ transform: `scale(${zoomLevel})` }"></div>
<div v-else class="placeholder">
<p>Your Mermaid diagram will appear here</p>
</div>
</div>
</div>
</div>
</v-card-text>
</v-card>
<!-- Fullscreen Modal -->
<div v-if="isFullscreen" class="fullscreen-modal" @click="closeFullscreen">
......@@ -87,7 +135,7 @@
<div class="modal-controls">
<div class="zoom-controls">
<label for="fullscreen-zoom-slider" class="zoom-label">Zoom:</label>
<input
<!-- <input
id="fullscreen-zoom-slider"
type="range"
v-model="fullscreenZoomLevel"
......@@ -96,17 +144,47 @@
max="3"
step="0.1"
class="zoom-slider"
/> -->
<v-slider
id="fullscreen-zoom-slider"
v-model="fullscreenZoomLevel"
:min="0.5"
:max="3"
:step="0.1"
hide-details
class="zoom-slider"
/>
<span class="zoom-level">{{ Math.round(fullscreenZoomLevel * 100) }}%</span>
<button @click="resetFullscreenZoom" class="zoom-btn reset-btn">Reset</button>
<!-- <button @click="resetFullscreenZoom" class="zoom-btn reset-btn">Reset</button> -->
<v-btn
@click="resetFullscreenZoom"
color="secondary"
variant="outlined"
>
Reset
</v-btn>
</div>
<!-- Single Download Button -->
<button @click="downloadDiagram" class="download-btn" v-if="mermaidCode">
<!-- <button @click="downloadDiagram" class="download-btn" v-if="mermaidCode">
Download
</button>
</button> -->
<v-btn
@click="downloadDiagram"
v-if="mermaidCode"
color="primary"
variant="flat"
>
Download
</v-btn>
<button @click="closeFullscreen" class="close-btn">&times;</button>
<!-- <button @click="closeFullscreen" class="close-btn">&times;</button> -->
<v-btn
@click="closeFullscreen"
icon
>
<v-icon>mdi-close</v-icon>
</v-btn>
</div>
</div>
<div class="modal-body"
......@@ -128,12 +206,15 @@
</div>
<!-- Generated Code Section (Now Second) -->
<div v-if="mermaidCode" class="code-section">
<h4>Generated Mermaid Code:</h4>
<div class="code-container">
<pre><code>{{ mermaidCode }}</code></pre>
</div>
</div>
<v-card v-if="mermaidCode" class="code-section">
<v-card-text class="pa-0">
<v-card-title class="text-subtitle-1 pa-3">Generated Mermaid Code:</v-card-title>
<v-divider></v-divider>
<div class="code-container">
<pre><code>{{ mermaidCode }}</code></pre>
</div>
</v-card-text>
</v-card>
</div>
</v-col>
<!-- </div> -->
......@@ -143,7 +224,7 @@
</template>
<script setup>
import { ref, onMounted, onUnmounted, nextTick } from 'vue'
import { ref, onMounted, onUnmounted, nextTick, computed } from 'vue'
import mermaid from 'mermaid'
import { isMermaidCode } from '../config/mermaidTypes.js'
......@@ -268,7 +349,37 @@
if (mermaidContainer.value) mermaidContainer.value.innerHTML = ''
currentState.value = 'ready'
}
const alertType = computed(() => {
switch (currentState.value) {
case 'error': return 'error'
case 'processing': return 'info'
case 'ready': return 'success'
case 'typing': return 'warning'
default: return 'info'
}
})
const alertIcon = computed(() => {
switch (currentState.value) {
case 'error': return 'mdi-alert-circle'
case 'processing': return 'mdi-progress-clock'
case 'ready': return 'mdi-check-circle'
case 'typing': return 'mdi-pencil'
default: return 'mdi-information'
}
})
const statusText = computed(() => {
switch (currentState.value) {
case 'typing': return 'Typing...'
case 'processing': return 'Converting...'
case 'ready': return 'Ready'
case 'error': return 'Error occurred'
default: return 'Ready'
}
})
const convertTextToMermaid = (text) => {
const trimmedText = text.trim()
......@@ -698,14 +809,14 @@
.zoom-slider {
width: 100px;
height: 8px; /* Slightly taller */
border-radius: 4px;
background: #dee2e6; /* Darker background */
outline: none;
-webkit-appearance: none;
appearance: none;
cursor: pointer;
border: 1px solid #adb5bd; /* Darker border */
/* height: 8px; Slightly taller */
/* border-radius: 4px; */
/* background: #dee2e6; Darker background */
/* outline: none; */
/* -webkit-appearance: none; */
/* appearance: none; */
/* cursor: pointer; */
/* border: 1px solid #adb5bd; Darker border */
}
/* Webkit browsers (Chrome, Safari, Edge) */
......@@ -1019,14 +1130,14 @@
.modal-header .zoom-slider {
width: 120px; /* Slightly wider for fullscreen */
height: 8px;
/* height: 8px;
border-radius: 4px;
background: #dee2e6;
outline: none;
-webkit-appearance: none;
appearance: none;
cursor: pointer;
border: 1px solid #adb5bd;
border: 1px solid #adb5bd; */
}
/* Apply the same slider styling for fullscreen */
......
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