Skip to content

GitLab

Commit 6d672f31 authored by Administrator's avatar Administrator
Browse files

Changed TextToMarkdown layout to same to TextToMermaid.

parent 1a530b08
Show whitespace changes
Inline Side-by-side
src/components/TextToMarkdown.vue
View file @ 6d672f31
......@@ -52,33 +52,45 @@
<!-- Output Section -->
<v-col cols="12" md="8" class="pa-3">
<h3>Markdown Preview</h3>
<!-- Output Section -->
<div elevation="2" class="output-section">
<!-- <h3>Markdown Preview</h3> -->
<v-card-title class="text-h6 pa-0 ma-2">Markdown Preview</v-card-title>
<!-- Preview Section -->
<div class="diagram-section">
<v-card-text>
<div class="diagram-header">
<h4>Visual Preview:</h4>
<!-- <h4>Visual Preview:</h4> -->
<v-card-subtitle class="text-subtitle-1 pa-0">Visual Preview:</v-card-subtitle>
<!-- Preview Controls -->
<div class="diagram-controls">
<div class="zoom-controls">
<label for="zoom-slider" class="zoom-label">Zoom:</label>
<input
<v-slider
id="zoom-slider"
type="range"
v-model="zoomLevel"
@input="updateZoom"
min="0.5"
max="3"
step="0.1"
: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="markdownCode">
<v-btn
@click="toggleFullscreen"
color="primary"
variant="flat"
v-if="markdownCode">
Fullscreen
</button>
</v-btn>
</div>
</div>
<div class="markdown-container" ref="markdownContainerWrapper">
......@@ -93,21 +105,7 @@
<p>Your Markdown preview will appear here</p>
</div>
</div>
</div>
<!-- Generated Markdown Section -->
<div class="code-section">
<div class="diagram-header">
<h4>Generated Markdown:</h4>
<div class="diagram-controls">
<button @click="copyToClipboard" class="copy-btn" :disabled="!markdownCode">
{{ copyButtonText }}
</button>
</div>
</div>
<div class="code-container">
<pre><code>{{ markdownCode || 'Your generated markdown will appear here...' }}</code></pre>
</div>
</v-card-text>
</div>
<!-- Fullscreen Modal -->
......@@ -118,26 +116,41 @@
<div class="modal-controls">
<div class="zoom-controls">
<label for="fullscreen-zoom-slider" class="zoom-label">Zoom:</label>
<input
<v-slider
id="fullscreen-zoom-slider"
type="range"
v-model="fullscreenZoomLevel"
@input="updateFullscreenZoom"
min="0.5"
max="3"
step="0.1"
: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>
<v-btn
@click="resetFullscreenZoom"
color="secondary"
variant="outlined"
>
Reset
</v-btn>
</div>
<!-- Single Download Button -->
<button @click="downloadPreview" class="download-btn" v-if="markdownCode">
<v-btn
@click="downloadPreview"
v-if="markdownCode"
color="primary"
variant="flat"
>
Download
</button>
</v-btn>
<button @click="closeFullscreen" class="close-btn">&times;</button>
<v-btn
@click="closeFullscreen"
icon
>
<v-icon>mdi-close</v-icon>
</v-btn>
</div>
</div>
<div
......@@ -170,8 +183,6 @@
</div>
</div>
</div>
<!-- Generated Markdown Section -->
</v-col>
</v-row>
</v-container>
......@@ -452,29 +463,17 @@ onUnmounted(() => {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
height: 100%;
}
.converter-container {
display: grid;
grid-template-columns: 1fr 1.5fr;
grid-template-rows: 1fr;
gap: 40px;
margin: 40px;
}
.input-section, .output-section {
background: #f8f9fa;
padding: 20px;
border-radius: 8px;
border: 1px solid #e9ecef;
}
.output-section {
/* background: #f8f9fa; */
padding: 20px;
background: #f8f9fa;
border-radius: 8px;
border: 1px solid #e9ecef;
max-width: 100%;
}
.text-input {
width: 100%;
max-width: 100%; /* Increased maximum width */
max-width: 100%;
padding: 12px;
border: 1px solid #ced4da;
border-radius: 4px;
......@@ -483,11 +482,13 @@ onUnmounted(() => {
resize: vertical;
box-sizing: border-box;
}
.button-group {
margin-top: 15px;
display: flex;
gap: 10px;
}
.convert-btn, .clear-btn {
padding: 10px 20px;
border: none;
......@@ -496,85 +497,47 @@ onUnmounted(() => {
font-weight: 500;
transition: background-color 0.2s;
}
.convert-btn {
background-color: #007bff;
color: white;
}
.convert-btn:disabled {
background-color: #6c757d;
cursor: not-allowed;
}
.clear-btn {
background-color: #6c757d;
color: white;
}
.clear-btn:hover {
background-color: #545b62;
}
.status {
margin-top: 10px;
font-size: 14px;
padding: 8px 12px;
border-radius: 4px;
font-weight: 500;
display: inline-block;
min-width: 100px;
text-align: center;
}
.status.typing {
background-color: #e2f0ff;
color: #007bff;
border: 1px solid #b8daff;
}
.status.processing {
background-color: #fff3cd;
color: #856404;
border: 1px solid #ffeaa7;
}
.status.ready {
background-color: #d4edda;
color: #155724;
border: 1px solid #c3e6cb;
}
.status.error {
background-color: #f8d7da;
color: #721c24;
border: 1px solid #f5c6cb;
}
/* Diagram Section (now first) */
/* Diagram Section */
.diagram-section {
background: #f8f9fa;
border-radius: 8px;
border: 1px solid #e9ecef;
margin-bottom: 20px; /* Add space between diagram and code */
margin-bottom: 20px;
}
/* Code Section (now second) */
/* Code Section */
.code-section {
background: #f8f9fa;
border-radius: 8px;
border: 1px solid #e9ecef;
overflow: hidden;
margin-bottom: 0; /* No bottom margin since it's last */
}
.code-section h4 {
margin: 0;
padding: 15px 20px;
background: #e9ecef;
color: #495057;
border-bottom: 1px solid #dee2e6;
margin-bottom: 0;
}
.code-container {
max-height: 300px; /* Limit height */
overflow-y: auto; /* Vertical scroll */
overflow-x: auto; /* Horizontal scroll for long lines */
max-height: 300px;
overflow-y: auto;
overflow-x: auto;
padding: 15px 20px;
}
......@@ -592,7 +555,7 @@ onUnmounted(() => {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 32px; /* Increased right/left padding */
padding: 15px 32px;
background: #e9ecef;
border-bottom: 1px solid #dee2e6;
max-width: 100%;
......@@ -610,8 +573,8 @@ onUnmounted(() => {
align-items: center;
gap: 15px;
flex-shrink: 0;
min-width: 320px; /* Ensure enough width for controls */
flex-wrap: nowrap; /* Prevent wrapping */
min-width: 320px;
flex-wrap: nowrap;
max-width: 100%;
overflow-x: auto;
}
......@@ -630,64 +593,9 @@ onUnmounted(() => {
white-space: nowrap;
}
/* Optimized slider styling - only width for Vuetify sliders */
.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 */
}
/* Webkit browsers (Chrome, Safari, Edge) */
.zoom-slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 18px;
height: 18px;
border-radius: 50%;
background: #007bff;
cursor: pointer;
border: 2px solid white;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
transition: background-color 0.2s;
}
.zoom-slider::-webkit-slider-thumb:hover {
background: #0056b3;
}
.zoom-slider::-webkit-slider-track {
height: 8px;
border-radius: 4px;
background: #dee2e6;
border: 1px solid #adb5bd;
}
/* Firefox */
.zoom-slider::-moz-range-thumb {
width: 18px;
height: 18px;
border-radius: 50%;
background: #007bff;
cursor: pointer;
border: 2px solid white;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
transition: background-color 0.2s;
}
.zoom-slider::-moz-range-thumb:hover {
background: #0056b3;
}
.zoom-slider::-moz-range-track {
height: 8px;
border-radius: 4px;
background: #dee2e6;
border: 1px solid #adb5bd;
}
.zoom-level {
......@@ -698,65 +606,6 @@ onUnmounted(() => {
font-size: 14px;
}
.reset-btn {
padding: 6px 12px;
background: #6c757d;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 12px;
transition: background-color 0.2s;
}
.reset-btn:hover {
background: #545b62;
}
.fullscreen-btn {
padding: 8px 16px;
background: #28a745;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 14px;
transition: background-color 0.2s;
}
.fullscreen-btn:hover {
background: #218838;
}
.fullscreen-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
/* Update mermaid container for zoom */
.markdown-container {
min-height: 100px; /* Very small minimum */
height: auto; /* Let content determine height */
max-height: 400px; /* Still limit maximum */
padding: 15px; /* Reduce padding */
background: white;
overflow: auto;
position: relative;
}
/* Target journey diagrams specifically */
.markdown-container:has(svg[data-diagram-type="journey"]) {
max-height: 350px; /* Smaller max for journey diagrams */
}
.markdown-preview {
text-align: left;
width: 100%;
max-width: 100%;
transform-origin: top center;
transition: transform 0.2s ease;
}
/* Custom scrollbar for code container */
.code-container::-webkit-scrollbar {
width: 8px;
......@@ -776,6 +625,7 @@ onUnmounted(() => {
.code-container::-webkit-scrollbar-thumb:hover {
background: #a8a8a8;
}
.placeholder {
display: flex;
align-items: center;
......@@ -784,6 +634,26 @@ onUnmounted(() => {
color: #6c757d;
font-style: italic;
}
/* Markdown container */
.markdown-container {
min-height: 100px;
height: auto;
max-height: 400px;
padding: 15px;
background: white;
overflow: auto;
position: relative;
}
.markdown-preview {
text-align: left;
width: 100%;
max-width: 100%;
transform-origin: top center;
transition: transform 0.2s ease;
}
/* Fullscreen Modal */
.fullscreen-modal {
position: fixed;
......@@ -815,8 +685,8 @@ onUnmounted(() => {
display: flex;
align-items: center;
gap: 20px;
flex: 1; /* Take available space */
justify-content: flex-end; /* Align to the right */
flex: 1;
justify-content: flex-end;
}
.modal-header {
......@@ -832,75 +702,50 @@ onUnmounted(() => {
.modal-header h3 {
margin: 0;
color: #495057;
flex-shrink: 0; /* Prevent title from shrinking */
flex-shrink: 0;
}
.modal-header .zoom-controls {
display: flex;
align-items: center;
gap: 10px;
flex-shrink: 0; /* Prevent zoom controls from shrinking */
}
/* Update close button positioning */
.close-btn {
background: #dc3545;
border: none;
font-size: 18px;
cursor: pointer;
color: white;
padding: 8px 12px;
width: auto;
height: auto;
display: flex;
align-items: center;
justify-content: center;
border-radius: 4px;
transition: background-color 0.2s;
position: static; /* Remove absolute positioning */
top: auto;
right: auto;
z-index: auto;
font-weight: bold;
flex-shrink: 0; /* Prevent close button from shrinking */
flex-shrink: 0;
}
.close-btn:hover {
background: #c82333;
color: white;
/* Optimized fullscreen slider styling - only width for Vuetify sliders */
.modal-header .zoom-slider {
width: 120px;
}
/* Ensure proper spacing */
.modal-header .reset-btn {
padding: 6px 12px;
background: #6c757d;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 12px;
transition: background-color 0.2s;
margin-right: 10px; /* Add space between reset and close */
.modal-header .zoom-label {
font-size: 14px;
color: #495057;
font-weight: 500;
white-space: nowrap;
}
.modal-header .reset-btn:hover {
background: #545b62;
.modal-header .zoom-level {
min-width: 50px;
text-align: center;
font-weight: 500;
color: #495057;
font-size: 14px;
}
/* Modal body for drag */
.modal-body {
flex: 1;
padding: 20px;
overflow: hidden; /* Hide overflow for drag */
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
position: relative;
user-select: none; /* Prevent text selection during drag */
user-select: none;
will-change: transform;
}
/* Optimize fullscreen diagram for smooth zoom */
/* Fullscreen preview */
.fullscreen-preview {
text-align: left;
width: 100%;
......@@ -919,342 +764,12 @@ onUnmounted(() => {
.fullscreen-preview-inner {
width: 100%;
height: 100%;
/* The transform is applied here via :style binding */
}
.fullscreen-preview:active {
cursor: grabbing;
}
.fullscreen-preview svg {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
pointer-events: none;
will-change: transform;
}
/* Add visual feedback for drag state */
.modal-body.dragging {
cursor: grabbing;
}
/* Optional: Add drag instructions */
.modal-header::after {
content: "Drag to pan • Scroll to zoom • Ctrl+Scroll for fine zoom";
font-size: 12px;
color: #6c757d;
margin-left: 20px;
font-style: italic;
}
/* Modal Controls Layout */
.modal-header .zoom-label {
font-size: 14px;
color: #495057;
font-weight: 500;
white-space: nowrap;
}
.modal-header .zoom-slider {
width: 120px; /* Slightly wider for fullscreen */
height: 8px;
border-radius: 4px;
background: #dee2e6;
outline: none;
-webkit-appearance: none;
appearance: none;
cursor: pointer;
border: 1px solid #adb5bd;
}
/* Apply the same slider styling for fullscreen */
.modal-header .zoom-slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 18px;
height: 18px;
border-radius: 50%;
background: #007bff;
cursor: pointer;
border: 2px solid white;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
transition: background-color 0.2s;
}
.modal-header .zoom-slider::-webkit-slider-thumb:hover {
background: #0056b3;
}
.modal-header .zoom-slider::-webkit-slider-track {
height: 8px;
border-radius: 4px;
background: #dee2e6;
border: 1px solid #adb5bd;
}
.modal-header .zoom-slider::-moz-range-thumb {
width: 18px;
height: 18px;
border-radius: 50%;
background: #007bff;
cursor: pointer;
border: 2px solid white;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
transition: background-color 0.2s;
}
.modal-header .zoom-slider::-moz-range-thumb:hover {
background: #0056b3;
}
.modal-header .zoom-slider::-moz-range-track {
height: 8px;
border-radius: 4px;
background: #dee2e6;
border: 1px solid #adb5bd;
}
.modal-header .zoom-level {
min-width: 50px;
text-align: center;
font-weight: 500;
color: #495057;
font-size: 14px;
}
.modal-header .reset-btn {
padding: 6px 12px;
background: #6c757d;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 12px;
transition: background-color 0.2s;
}
.modal-header .reset-btn:hover {
background: #545b62;
}
/* Keyboard shortcut hint */
.modal-header::after {
display: none;
}
/* Add smooth zoom transitions */
.fullscreen-preview {
text-align: left;
width: 100%;
height: 100%;
display: flex;
align-items: flex-start;
justify-content: flex-start;
transform-origin: center center;
transition: transform 0.1s ease; /* Smooth zoom and drag */
cursor: grab;
user-select: none;
}
/* Optional: Add zoom indicator */
.modal-body::before {
content: attr(data-zoom);
position: absolute;
top: 10px;
left: 10px;
background: rgba(0, 0, 0, 0.7);
color: white;
padding: 5px 10px;
border-radius: 4px;
font-size: 12px;
pointer-events: none;
opacity: 0;
transition: opacity 0.3s;
}
.modal-body.zooming::before {
opacity: 1;
}
/* Zoom indicator styles */
.zoom-indicator {
position: absolute;
background: rgba(0, 0, 0, 0.8);
color: white;
padding: 5px 10px;
border-radius: 4px;
font-size: 12px;
pointer-events: none;
z-index: 1000;
transition: opacity 0.3s;
opacity: 0;
}
/* Download button in fullscreen - same size as reset button */
.modal-header .download-btn {
padding: 6px 12px;
background: #007bff;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 12px;
transition: background-color 0.2s;
display: flex;
align-items: center;
justify-content: center;
width: auto;
height: auto;
font-weight: bold;
flex-shrink: 0;
/* Ensure same dimensions as reset button */
min-width: 80px; /* Slightly wider for "Download" text */
min-height: 32px;
position: relative; /* For dropdown positioning */
}
.modal-header .download-btn:hover {
background: #5a6268;
}
/* Button group for consistent sizing */
.modal-header .button-group {
display: flex;
align-items: center;
gap: 10px;
flex-shrink: 0;
}
.modal-header .button-group .download-btn,
.modal-header .button-group .reset-btn {
padding: 6px 12px;
background: #6c757d;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 12px;
transition: background-color 0.2s;
display: flex;
align-items: center;
justify-content: center;
width: 60px;
height: 32px;
font-weight: bold;
flex-shrink: 0;
}
.modal-header .button-group .download-btn:hover,
.modal-header .button-group .reset-btn:hover {
background: #5a6268;
}
/* Ensure reset button has same dimensions for consistency */
.modal-header .reset-btn {
padding: 6px 12px;
background: #6c757d;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 12px;
transition: background-color 0.2s;
min-width: 60px;
min-height: 32px;
font-weight: bold;
flex-shrink: 0;
}
.modal-header .reset-btn:hover {
background: #545b62;
}
/* Fullscreen button in normal window - same size as reset button */
.fullscreen-btn {
padding: 6px 12px;
background: #007bff;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 12px;
transition: background-color 0.2s;
display: flex;
align-items: center;
justify-content: center;
width: auto;
height: auto;
font-weight: bold;
flex-shrink: 0;
/* Ensure same dimensions as reset button */
min-width: 80px; /* Slightly wider for "Fullscreen" text */
min-height: 32px;
}
.fullscreen-btn:hover {
background: #0056b3;
}
/* Ensure reset button in normal window has consistent styling */
.reset-btn {
padding: 6px 12px;
background: #6c757d;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 12px;
transition: background-color 0.2s;
min-width: 60px;
min-height: 32px;
font-weight: bold;
flex-shrink: 0;
}
.reset-btn:hover {
background: #545b62;
}
/* Ensure zoom controls have consistent button styling */
.zoom-controls .zoom-btn {
padding: 6px 12px;
background: #6c757d;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 12px;
transition: background-color 0.2s;
min-width: 60px;
min-height: 32px;
font-weight: bold;
flex-shrink: 0;
}
.zoom-controls .zoom-btn:hover {
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;
}
} */
/* Markdown content styles */
.markdown-preview,
.fullscreen-preview {
......@@ -1370,14 +885,6 @@ onUnmounted(() => {
padding-left: 1.5em;
}
.markdown-preview ul,
.fullscreen-preview-inner ul,
.markdown-preview ol,
.fullscreen-preview-inner ol {
margin-left: 1.5em;
list-style-position: inside;
}
.markdown-preview pre,
.fullscreen-preview-inner pre {
background: #f4f4f4;
......
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