Skip to content

Commit 9488790

Browse files
sstistkoosstistkoo
committed
3
1 parent cb84c0b commit 9488790

4 files changed

Lines changed: 238 additions & 8 deletions

File tree

‎programovani/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -236,7 +236,7 @@ <h3>Konzole</h3>
236236
<script type="module" src="./src/core/app.js"></script>
237237
<script>
238238
// Cache buster - force reload on version change
239-
const APP_VERSION = '2.0.9-replace-function';
239+
const APP_VERSION = '2.1.0-components-padding';
240240
const lastVersion = localStorage.getItem('app_version');
241241

242242
if (lastVersion !== APP_VERSION) {

‎programovani/src/modules/menu/MenuPanel.js‎

Lines changed: 138 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -422,7 +422,144 @@ build/
422422
}
423423

424424
showComponents() {
425-
alert('Komponenty - Připravujeme! 🧩\n\nKnihovny často používaných HTML komponent (tlačítka, karty, formuláře...)');
425+
// Create modal for components library
426+
const modal = document.createElement('div');
427+
modal.className = 'modal-backdrop';
428+
modal.innerHTML = `
429+
<div class="modal-content components-panel">
430+
<div class="modal-header">
431+
<h3>🧩 Knihovna komponent</h3>
432+
<button class="modal-close" id="componentsClose">
433+
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
434+
<path d="M18 6L6 18M6 6l12 12"/>
435+
</svg>
436+
</button>
437+
</div>
438+
<div class="modal-body components-body">
439+
<div class="components-grid">
440+
<!-- Buttons -->
441+
<div class="component-card" data-component="button-primary">
442+
<div class="component-preview">
443+
<button style="padding: 10px 20px; background: #00d4aa; color: white; border: none; border-radius: 6px; cursor: pointer; font-weight: 500;">Primary Button</button>
444+
</div>
445+
<div class="component-info">
446+
<h4>Primary Button</h4>
447+
<p>Základní tlačítko</p>
448+
</div>
449+
</div>
450+
451+
<div class="component-card" data-component="button-secondary">
452+
<div class="component-preview">
453+
<button style="padding: 10px 20px; background: transparent; color: #00d4aa; border: 2px solid #00d4aa; border-radius: 6px; cursor: pointer; font-weight: 500;">Secondary Button</button>
454+
</div>
455+
<div class="component-info">
456+
<h4>Secondary Button</h4>
457+
<p>Sekundární tlačítko</p>
458+
</div>
459+
</div>
460+
461+
<!-- Card -->
462+
<div class="component-card" data-component="card">
463+
<div class="component-preview">
464+
<div style="background: #1a1a1d; border: 1px solid #2a2a2d; border-radius: 8px; padding: 20px; max-width: 250px;">
465+
<h3 style="margin: 0 0 10px 0; color: #e8e8ea;">Card Title</h3>
466+
<p style="margin: 0; color: #8a8a8f; font-size: 14px;">Card description text goes here.</p>
467+
</div>
468+
</div>
469+
<div class="component-info">
470+
<h4>Card</h4>
471+
<p>Kontejner s rámečkem</p>
472+
</div>
473+
</div>
474+
475+
<!-- Input -->
476+
<div class="component-card" data-component="input">
477+
<div class="component-preview">
478+
<input type="text" placeholder="Enter text..." style="padding: 10px 12px; background: #111113; border: 1px solid #2a2a2d; border-radius: 6px; color: #e8e8ea; width: 200px;">
479+
</div>
480+
<div class="component-info">
481+
<h4>Input Field</h4>
482+
<p>Textové pole</p>
483+
</div>
484+
</div>
485+
486+
<!-- Alert -->
487+
<div class="component-card" data-component="alert">
488+
<div class="component-preview">
489+
<div style="background: rgba(81, 207, 102, 0.1); border-left: 4px solid #51cf66; padding: 12px 16px; border-radius: 6px; max-width: 250px;">
490+
<p style="margin: 0; color: #51cf66; font-size: 14px;">✅ Success message</p>
491+
</div>
492+
</div>
493+
<div class="component-info">
494+
<h4>Alert Box</h4>
495+
<p>Oznamovací box</p>
496+
</div>
497+
</div>
498+
499+
<!-- Navigation -->
500+
<div class="component-card" data-component="nav">
501+
<div class="component-preview">
502+
<nav style="background: #111113; padding: 12px 20px; border-radius: 6px; display: flex; gap: 20px; max-width: 250px;">
503+
<a href="#" style="color: #00d4aa; text-decoration: none; font-weight: 500;">Home</a>
504+
<a href="#" style="color: #8a8a8f; text-decoration: none;">About</a>
505+
<a href="#" style="color: #8a8a8f; text-decoration: none;">Contact</a>
506+
</nav>
507+
</div>
508+
<div class="component-info">
509+
<h4>Navigation</h4>
510+
<p>Navigační menu</p>
511+
</div>
512+
</div>
513+
</div>
514+
</div>
515+
<div class="modal-footer">
516+
<small style="color: var(--text-muted);">Klikněte na komponentu pro vložení do editoru</small>
517+
</div>
518+
</div>
519+
`;
520+
521+
document.body.appendChild(modal);
522+
523+
// Component templates
524+
const components = {
525+
'button-primary': '<button class="btn-primary">Button</button>\n\n<style>\n.btn-primary {\n padding: 10px 20px;\n background: #00d4aa;\n color: white;\n border: none;\n border-radius: 6px;\n cursor: pointer;\n font-weight: 500;\n transition: background 0.2s;\n}\n.btn-primary:hover {\n background: #00a88a;\n}\n</style>',
526+
527+
'button-secondary': '<button class="btn-secondary">Button</button>\n\n<style>\n.btn-secondary {\n padding: 10px 20px;\n background: transparent;\n color: #00d4aa;\n border: 2px solid #00d4aa;\n border-radius: 6px;\n cursor: pointer;\n font-weight: 500;\n transition: all 0.2s;\n}\n.btn-secondary:hover {\n background: #00d4aa;\n color: white;\n}\n</style>',
528+
529+
'card': '<div class="card">\n <h3>Card Title</h3>\n <p>Card description text goes here.</p>\n</div>\n\n<style>\n.card {\n background: #1a1a1d;\n border: 1px solid #2a2a2d;\n border-radius: 8px;\n padding: 20px;\n max-width: 300px;\n}\n.card h3 {\n margin: 0 0 10px 0;\n color: #e8e8ea;\n}\n.card p {\n margin: 0;\n color: #8a8a8f;\n font-size: 14px;\n}\n</style>',
530+
531+
'input': '<input type="text" class="input-field" placeholder="Enter text...">\n\n<style>\n.input-field {\n padding: 10px 12px;\n background: #111113;\n border: 1px solid #2a2a2d;\n border-radius: 6px;\n color: #e8e8ea;\n font-size: 14px;\n width: 100%;\n transition: border-color 0.2s;\n}\n.input-field:focus {\n outline: none;\n border-color: #00d4aa;\n}\n</style>',
532+
533+
'alert': '<div class="alert alert-success">\n <p>✅ Success message</p>\n</div>\n\n<style>\n.alert {\n padding: 12px 16px;\n border-radius: 6px;\n border-left: 4px solid;\n margin: 10px 0;\n}\n.alert p {\n margin: 0;\n font-size: 14px;\n}\n.alert-success {\n background: rgba(81, 207, 102, 0.1);\n border-color: #51cf66;\n color: #51cf66;\n}\n</style>',
534+
535+
'nav': '<nav class="navbar">\n <a href="#">Home</a>\n <a href="#">About</a>\n <a href="#">Contact</a>\n</nav>\n\n<style>\n.navbar {\n background: #111113;\n padding: 12px 20px;\n border-radius: 6px;\n display: flex;\n gap: 20px;\n}\n.navbar a {\n color: #8a8a8f;\n text-decoration: none;\n transition: color 0.2s;\n}\n.navbar a:hover {\n color: #00d4aa;\n}\n</style>'
536+
};
537+
538+
// Close handler
539+
const closeModal = () => modal.remove();
540+
541+
modal.querySelector('#componentsClose').addEventListener('click', closeModal);
542+
modal.addEventListener('click', (e) => {
543+
if (e.target === modal) closeModal();
544+
});
545+
546+
// Component click handlers
547+
modal.querySelectorAll('.component-card').forEach(card => {
548+
card.addEventListener('click', () => {
549+
const componentId = card.dataset.component;
550+
const code = components[componentId];
551+
552+
if (code) {
553+
eventBus.emit('editor:insertText', { text: '\n' + code + '\n' });
554+
eventBus.emit('toast:show', {
555+
message: '✅ Komponenta vložena',
556+
type: 'success',
557+
duration: 2000
558+
});
559+
closeModal();
560+
}
561+
});
562+
});
426563
}
427564

428565
showTemplates() {

‎programovani/src/styles/components/editor.css‎

Lines changed: 25 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,10 @@
77
}
88

99
.line-numbers {
10-
padding: 12px 8px 12px 8px;
10+
padding-top: 12px;
11+
padding-bottom: 12px;
12+
padding-left: 8px;
13+
padding-right: 8px;
1114
background: var(--bg-secondary);
1215
color: var(--text-muted);
1316
font-family: 'JetBrains Mono', monospace;
@@ -20,11 +23,15 @@
2023
overflow: hidden;
2124
white-space: pre;
2225
border-right: 1px solid var(--border);
26+
box-sizing: border-box;
2327
}
2428

2529
.code-input {
2630
flex: 1;
27-
padding: 12px 12px 12px 12px;
31+
padding-top: 12px;
32+
padding-bottom: 12px;
33+
padding-left: 12px;
34+
padding-right: 12px;
2835
background: var(--bg-primary);
2936
color: var(--text-primary);
3037
font-family: 'JetBrains Mono', monospace;
@@ -68,13 +75,19 @@
6875
.line-numbers {
6976
font-size: 12px;
7077
line-height: 1.5;
71-
padding: 12px 6px 12px 6px;
78+
padding-top: 12px;
79+
padding-bottom: 12px;
80+
padding-left: 6px;
81+
padding-right: 6px;
7282
}
7383

7484
.code-input {
7585
font-size: 12px;
7686
line-height: 1.5;
77-
padding: 12px 12px 12px 12px;
87+
padding-top: 12px;
88+
padding-bottom: 12px;
89+
padding-left: 12px;
90+
padding-right: 12px;
7891
}
7992
}
8093

@@ -83,12 +96,18 @@
8396
.line-numbers {
8497
font-size: 11px;
8598
line-height: 1.5;
86-
padding: 10px 4px 10px 4px;
99+
padding-top: 10px;
100+
padding-bottom: 10px;
101+
padding-left: 4px;
102+
padding-right: 4px;
87103
}
88104

89105
.code-input {
90106
font-size: 11px;
91107
line-height: 1.5;
92-
padding: 10px 10px 10px 10px;
108+
padding-top: 10px;
109+
padding-bottom: 10px;
110+
padding-left: 10px;
111+
padding-right: 10px;
93112
}
94113
}

‎programovani/src/styles/components/modal.css‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -187,7 +187,81 @@
187187
max-width: 90%;
188188
}
189189
}
190+
/* Components Panel Styles */
191+
.components-panel {
192+
min-width: 700px;
193+
max-width: 900px;
194+
max-height: 80vh;
195+
background: var(--bg-elevated);
196+
border: 1px solid var(--border);
197+
border-radius: 12px;
198+
padding: 0;
199+
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
200+
display: flex;
201+
flex-direction: column;
202+
}
203+
204+
.components-panel .modal-body {
205+
flex: 1;
206+
overflow-y: auto;
207+
padding: 20px;
208+
}
209+
210+
.components-grid {
211+
display: grid;
212+
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
213+
gap: 16px;
214+
}
215+
216+
.component-card {
217+
background: var(--bg-secondary);
218+
border: 1px solid var(--border);
219+
border-radius: 8px;
220+
padding: 16px;
221+
cursor: pointer;
222+
transition: all 0.2s ease;
223+
}
190224

225+
.component-card:hover {
226+
border-color: var(--accent);
227+
box-shadow: 0 4px 12px var(--accent-glow);
228+
transform: translateY(-2px);
229+
}
230+
231+
.component-preview {
232+
background: var(--bg-primary);
233+
border-radius: 6px;
234+
padding: 20px;
235+
margin-bottom: 12px;
236+
min-height: 80px;
237+
display: flex;
238+
align-items: center;
239+
justify-content: center;
240+
}
241+
242+
.component-info h4 {
243+
margin: 0 0 4px 0;
244+
font-size: 14px;
245+
font-weight: 600;
246+
color: var(--text-primary);
247+
}
248+
249+
.component-info p {
250+
margin: 0;
251+
font-size: 12px;
252+
color: var(--text-muted);
253+
}
254+
255+
@media (max-width: 768px) {
256+
.components-panel {
257+
min-width: 95%;
258+
max-width: 95%;
259+
}
260+
261+
.components-grid {
262+
grid-template-columns: 1fr;
263+
}
264+
}
191265
.modal-overlay.open {
192266
opacity: 1;
193267
}

0 commit comments

Comments
 (0)