coulomb/markitect-main
2
0
Fork 0
Code Issues 60 Pull Requests Actions 1 Projects 12 Releases 1 Wiki Activity

feat: implement systematic CSS naming convention for editor elements
Some checks failed
Test Suite / unit-tests (3.11) (push) Has been cancelled
Details
Test Suite / unit-tests (3.12) (push) Has been cancelled
Details
Test Suite / integration-tests (push) Has been cancelled
Details
Test Suite / e2e-tests (push) Has been cancelled
Details
Test Suite / performance-tests (push) Has been cancelled
Details
Test Suite / code-quality (push) Has been cancelled
Details
Test Suite / security-scan (push) Has been cancelled
Details
Test Suite / test-summary (push) Has been cancelled
Details

Browse Source 
Naming Convention: SCOPE-COMPONENT-ELEMENT-SUBELEMENT
- ui = User Interface (editor controls, panels, buttons)
- dc = Document Content (typography, layout)
- md = Mode (light/dark color schemes)
- br = Branding (accent colors, corporate styling)

New CSS Classes:
- ui-edit-floater-panel (main floating control panel)
- ui-edit-floater-header (panel header area)
- ui-edit-floater-actions (button container)
- ui-edit-floater-status (status display)
- ui-edit-button (all action buttons)
- ui-edit-button-accept (save/accept buttons)
- ui-edit-button-cancel (cancel buttons)
- ui-edit-button-reset (reset buttons)
- ui-edit-section-frame (editable section borders)
- ui-edit-textarea-main (text editing areas)

Updated Theme CSS:
- All UI themes now target systematic class names
- Granular control over specific button types
- Consistent theming across all editor components
- Better separation of concerns (panel vs buttons vs textareas)

Benefits:
- Easy theme targeting with predictable class names
- Scalable for future UI components
- Clear hierarchy and naming consistency
- Maintainable and extensible architecture

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Bernd Worsch
2025-10-27 23:00:42 +01:00
parent dd0c9e3180
commit 3e16793615
1 changed files with 42 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
markitect/clean_document_manager.py
View File

@@ -301,33 +301,46 @@ class CleanDocumentManager:
ui_css = ""
if props.get('editor_panel_bg'):
ui_css = f"""
.markitect-edit-mode #markitect-global-controls {{
.markitect-edit-mode .ui-edit-floater-panel {{
background: {props['editor_panel_bg']};
border: 1px solid {props.get('editor_panel_border', '#dee2e6')};
box-shadow: 0 4px 12px {props.get('editor_shadow', 'rgba(0,0,0,0.1)')};
color: {props.get('editor_text_color', '#212529')};
}}
.markitect-edit-mode .control-btn {{
.markitect-edit-mode .ui-edit-floater-header {{
color: {props.get('editor_text_color', '#212529')};
}}
.markitect-edit-mode .ui-edit-button {{
background: {props.get('editor_button_bg', '#ffffff')};
color: {props.get('editor_text_color', '#212529')};
border: 1px solid {props.get('editor_panel_border', '#dee2e6')};
}}
.markitect-edit-mode .control-btn:hover {{
.markitect-edit-mode .ui-edit-button:hover {{
background: {props.get('editor_button_hover', '#e9ecef')};
}}
.markitect-edit-mode .control-btn:active,
.markitect-edit-mode .control-btn.active {{
.markitect-edit-mode .ui-edit-button:active,
.markitect-edit-mode .ui-edit-button.active {{
background: {props.get('editor_button_active', '#dee2e6')};
}}
.markitect-edit-mode .markitect-section-editable {{
.markitect-edit-mode .ui-edit-button-accept {{
background: {props.get('editor_button_bg', '#4caf50')};
}}
.markitect-edit-mode .ui-edit-button-cancel {{
background: {props.get('editor_button_bg', '#f44336')};
}}
.markitect-edit-mode .ui-edit-button-reset {{
background: {props.get('editor_button_bg', '#ff9800')};
}}
.markitect-edit-mode .ui-edit-section-frame {{
border: 2px solid {props.get('editor_focus_color', '#0066cc')};
box-shadow: 0 0 0 3px {props.get('editor_focus_color', '#0066cc')}33;
}}
.markitect-edit-mode textarea {{
.markitect-edit-mode .ui-edit-textarea {{
border: 1px solid {props.get('editor_panel_border', '#dee2e6')};
color: {props.get('editor_text_color', '#212529')};
background: {props.get('editor_button_bg', '#ffffff')};
}}
.markitect-edit-mode textarea:focus {{
.markitect-edit-mode .ui-edit-textarea:focus {{
border-color: {props.get('editor_focus_color', '#0066cc')};
box-shadow: 0 0 0 2px {props.get('editor_focus_color', '#0066cc')}33;
}}"""
@@ -1021,7 +1034,7 @@ class DOMRenderer {
return;
}
const sectionElement = event.target.closest('.markitect-section-editable');
const sectionElement = event.target.closest('.ui-edit-section');
if (!sectionElement) return;
const sectionId = sectionElement.getAttribute('data-section-id');
@@ -1057,6 +1070,7 @@ class DOMRenderer {
`;
const textarea = document.createElement('textarea');
textarea.className = 'ui-edit-textarea ui-edit-textarea-main';
textarea.value = content;
textarea.style.cssText = `
flex: 1;
@@ -1085,6 +1099,16 @@ class DOMRenderer {
const createButton = (text, color, handler) => {
const btn = document.createElement('button');
btn.textContent = text;
// Add CSS classes based on button type
btn.className = 'ui-edit-button';
if (text.includes('Accept')) {
btn.className += ' ui-edit-button-accept';
} else if (text.includes('Cancel')) {
btn.className += ' ui-edit-button-cancel';
} else if (text.includes('Reset')) {
btn.className += ' ui-edit-button-reset';
}
btn.style.cssText = `
padding: 8px 12px;
border: none;
@@ -1145,7 +1169,7 @@ class DOMRenderer {
}
setupSectionElement(element) {
element.className = 'markitect-section-editable';
element.className = 'ui-edit-section ui-edit-section-frame';
element.style.cssText = `
margin: 16px 0;
padding: 12px;
@@ -1327,16 +1351,17 @@ class MarkitectCleanEditor {
addGlobalControls() {
// Create floating control panel
const panel = document.createElement('div');
panel.id = 'markitect-global-controls';
panel.id = 'ui-edit-floater';
panel.className = 'ui-edit-floater-panel';
panel.innerHTML = `
<div class="control-header">
<div class="ui-edit-floater-header">
<h3>📝 Editor</h3>
<div class="control-status" id="editor-status">Ready</div>
<div class="ui-edit-floater-status" id="editor-status">Ready</div>
</div>
<div class="control-actions">
<button id="save-document" class="control-btn primary">💾 Save Document</button>
<button id="reset-all" class="control-btn warning">🔄 Reset All</button>
<button id="show-status" class="control-btn secondary">📊 Show Status</button>
<div class="ui-edit-floater-actions">
<button id="save-document" class="ui-edit-button ui-edit-button-accept">💾 Save Document</button>
<button id="reset-all" class="ui-edit-button ui-edit-button-reset">🔄 Reset All</button>
<button id="show-status" class="ui-edit-button ui-edit-button-secondary">📊 Show Status</button>
</div>
`;