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 @@ ...@@ -13,7 +13,8 @@
<v-col cols="12" md="4" class="pa-3"> <v-col cols="12" md="4" class="pa-3">
<!-- Input Section --> <!-- Input Section -->
<div class="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-textarea
v-model="inputText" v-model="inputText"
@input="handleInput" @input="handleInput"
...@@ -23,61 +24,108 @@ ...@@ -23,61 +24,108 @@
></v-textarea> ></v-textarea>
<div class="button-group"> <div class="button-group">
<button @click="convertNow" class="convert-btn" :disabled="isProcessing"> <!-- <button @click="convertNow" class="convert-btn" :disabled="isProcessing">
{{ isProcessing ? 'Converting...' : 'Convert Now' }} {{ isProcessing ? 'Converting...' : 'Convert Now' }}
</button> </button> -->
<button @click="clearAll" class="clear-btn">Clear All</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> </div>
<!-- Status Indicator --> <!-- Status Indicator -->
<div class="status" :class="currentState"> <!-- <div class="status" :class="currentState">
<span v-if="currentState === 'typing'">Typing...</span> <span v-if="currentState === 'typing'">Typing...</span>
<span v-else-if="currentState === 'processing'">Converting...</span> <span v-else-if="currentState === 'processing'">Converting...</span>
<span v-else-if="currentState === 'ready'">Ready</span> <span v-else-if="currentState === 'ready'">Ready</span>
<span v-else-if="currentState === 'error'">Error occurred</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> </div>
</v-col> </v-col>
<v-col cols="12" md="8" class="pa-3"> <v-col cols="12" md="8" class="pa-3">
<!-- Output Section --> <!-- Output Section -->
<div class="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 --> <!-- Diagram Section -->
<div class="diagram-section"> <v-card class="diagram-section mb-4">
<div class="diagram-header"> <v-card-text class="pa-0">
<h4>Visual Diagram:</h4> <div class="diagram-header">
<!-- Diagram Controls --> <!-- <h4>Visual Diagram:</h4> -->
<div class="diagram-controls"> <v-card-subtitle class="text-subtitle-1 pa-0">Visual Diagram:</v-card-subtitle>
<div class="zoom-controls"> <!-- Diagram Controls -->
<label for="zoom-slider" class="zoom-label">Zoom:</label> <div class="diagram-controls">
<input <div class="zoom-controls">
id="zoom-slider" <label for="zoom-slider" class="zoom-label">Zoom:</label>
type="range" <!-- <input
v-model="zoomLevel" id="zoom-slider"
@input="updateZoom" type="range"
min="0.5" v-model="zoomLevel"
max="3" @input="updateZoom"
step="0.1" min="0.5"
class="zoom-slider" max="3"
/> step="0.1"
<span class="zoom-level">{{ Math.round(zoomLevel * 100) }}%</span> class="zoom-slider"
<button @click="resetZoom" class="zoom-btn reset-btn">Reset</button> /> -->
<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> </div>
<button @click="toggleFullscreen" class="fullscreen-btn" v-if="mermaidCode">
Fullscreen
</button>
</div> </div>
</div> <div class="mermaid-container" ref="mermaidContainerWrapper">
<div class="mermaid-container" ref="mermaidContainerWrapper"> <div v-if="mermaidCode" class="mermaid-diagram" ref="mermaidContainer" :style="{ transform: `scale(${zoomLevel})` }"></div>
<div v-if="mermaidCode" class="mermaid-diagram" ref="mermaidContainer" :style="{ transform: `scale(${zoomLevel})` }"></div> <div v-else class="placeholder">
<div v-else class="placeholder"> <p>Your Mermaid diagram will appear here</p>
<p>Your Mermaid diagram will appear here</p> </div>
</div> </div>
</div> </v-card-text>
</div> </v-card>
<!-- Fullscreen Modal --> <!-- Fullscreen Modal -->
<div v-if="isFullscreen" class="fullscreen-modal" @click="closeFullscreen"> <div v-if="isFullscreen" class="fullscreen-modal" @click="closeFullscreen">
...@@ -87,7 +135,7 @@ ...@@ -87,7 +135,7 @@
<div class="modal-controls"> <div class="modal-controls">
<div class="zoom-controls"> <div class="zoom-controls">
<label for="fullscreen-zoom-slider" class="zoom-label">Zoom:</label> <label for="fullscreen-zoom-slider" class="zoom-label">Zoom:</label>
<input <!-- <input
id="fullscreen-zoom-slider" id="fullscreen-zoom-slider"
type="range" type="range"
v-model="fullscreenZoomLevel" v-model="fullscreenZoomLevel"
...@@ -96,17 +144,47 @@ ...@@ -96,17 +144,47 @@
max="3" max="3"
step="0.1" step="0.1"
class="zoom-slider" 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> <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> </div>
<!-- Single Download Button --> <!-- Single Download Button -->
<button @click="downloadDiagram" class="download-btn" v-if="mermaidCode"> <!-- <button @click="downloadDiagram" class="download-btn" v-if="mermaidCode">
Download 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> </div>
<div class="modal-body" <div class="modal-body"
...@@ -128,12 +206,15 @@ ...@@ -128,12 +206,15 @@
</div> </div>
<!-- Generated Code Section (Now Second) --> <!-- Generated Code Section (Now Second) -->
<div v-if="mermaidCode" class="code-section"> <v-card v-if="mermaidCode" class="code-section">
<h4>Generated Mermaid Code:</h4> <v-card-text class="pa-0">
<div class="code-container"> <v-card-title class="text-subtitle-1 pa-3">Generated Mermaid Code:</v-card-title>
<pre><code>{{ mermaidCode }}</code></pre> <v-divider></v-divider>
</div> <div class="code-container">
</div> <pre><code>{{ mermaidCode }}</code></pre>
</div>
</v-card-text>
</v-card>
</div> </div>
</v-col> </v-col>
<!-- </div> --> <!-- </div> -->
...@@ -143,7 +224,7 @@ ...@@ -143,7 +224,7 @@
</template> </template>
<script setup> <script setup>
import { ref, onMounted, onUnmounted, nextTick } from 'vue' import { ref, onMounted, onUnmounted, nextTick, computed } from 'vue'
import mermaid from 'mermaid' import mermaid from 'mermaid'
import { isMermaidCode } from '../config/mermaidTypes.js' import { isMermaidCode } from '../config/mermaidTypes.js'
...@@ -268,7 +349,37 @@ ...@@ -268,7 +349,37 @@
if (mermaidContainer.value) mermaidContainer.value.innerHTML = '' if (mermaidContainer.value) mermaidContainer.value.innerHTML = ''
currentState.value = 'ready' 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 convertTextToMermaid = (text) => {
const trimmedText = text.trim() const trimmedText = text.trim()
...@@ -698,14 +809,14 @@ ...@@ -698,14 +809,14 @@
.zoom-slider { .zoom-slider {
width: 100px; width: 100px;
height: 8px; /* Slightly taller */ /* height: 8px; Slightly taller */
border-radius: 4px; /* border-radius: 4px; */
background: #dee2e6; /* Darker background */ /* background: #dee2e6; Darker background */
outline: none; /* outline: none; */
-webkit-appearance: none; /* -webkit-appearance: none; */
appearance: none; /* appearance: none; */
cursor: pointer; /* cursor: pointer; */
border: 1px solid #adb5bd; /* Darker border */ /* border: 1px solid #adb5bd; Darker border */
} }
/* Webkit browsers (Chrome, Safari, Edge) */ /* Webkit browsers (Chrome, Safari, Edge) */
...@@ -1019,14 +1130,14 @@ ...@@ -1019,14 +1130,14 @@
.modal-header .zoom-slider { .modal-header .zoom-slider {
width: 120px; /* Slightly wider for fullscreen */ width: 120px; /* Slightly wider for fullscreen */
height: 8px; /* height: 8px;
border-radius: 4px; border-radius: 4px;
background: #dee2e6; background: #dee2e6;
outline: none; outline: none;
-webkit-appearance: none; -webkit-appearance: none;
appearance: none; appearance: none;
cursor: pointer; cursor: pointer;
border: 1px solid #adb5bd; border: 1px solid #adb5bd; */
} }
/* Apply the same slider styling for fullscreen */ /* 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