joakim/insertr
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Unify all formatting buttons to use consistent three-layer architecture

Browse Source 
- Remove .insertr-default-style special styling (blue background, border, dot indicator)
- Make ALL buttons use .insertr-style-preview with unified appearance
- Maintain authentic style previews in isolated .insertr-style-sample layer
- Bold buttons show bold text, .brand buttons show green uppercase text, etc.
- Eliminate visual inconsistency between semantic and detected style buttons
- Simplify CSS by removing ~50 lines of duplicate button styling
- Provide consistent professional toolbar appearance across all formatting options
This commit is contained in:
Joakim
2025-09-21 22:31:42 +02:00
parent 479a537f21
commit b25663f76b
5 changed files with 8 additions and 299 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
lib/src/styles/insertr.css
View File

@@ -457,57 +457,7 @@ body:not(.insertr-edit-mode) .insertr-editing-hover::after {
transform: none;
}
/* Active state for default style buttons */
.insertr-style-btn.insertr-default-style.insertr-style-active {
background: var(--insertr-info);
border-color: var(--insertr-info);
color: white;
box-shadow: 0 2px 4px rgba(23, 162, 184, 0.3);
}
.insertr-style-btn.insertr-default-style.insertr-style-active .insertr-style-sample {
color: white;
}
/* Default formatting style buttons */
.insertr-style-btn.insertr-default-style {
border-color: var(--insertr-info);
background: rgba(23, 162, 184, 0.1);
position: relative;
}
.insertr-style-btn.insertr-default-style:hover {
border-color: var(--insertr-info);
background: rgba(23, 162, 184, 0.2);
transform: translateY(-1px);
box-shadow: 0 2px 4px rgba(23, 162, 184, 0.3);
}
.insertr-style-btn.insertr-default-style:active {
transform: translateY(0);
box-shadow: 0 1px 2px rgba(23, 162, 184, 0.2);
}
/* Default preview content styling */
.insertr-default-preview {
font-size: var(--insertr-font-size-sm);
font-weight: 500;
padding: var(--insertr-spacing-xs) var(--insertr-spacing-sm);
display: inline-block;
}
/* Small indicator for default styles */
.insertr-style-btn.insertr-default-style::after {
content: '';
position: absolute;
top: 2px;
right: 2px;
width: 6px;
height: 6px;
background: var(--insertr-info);
border-radius: 50%;
opacity: 0.7;
}
/* Editor components */
.insertr-simple-editor,

16
lib/src/ui/style-aware-editor.js
View File

@@ -639,12 +639,12 @@ export class StyleAwareEditor {
applyStyleButtonStyling(button, styleSample, styleInfo) {
if (!styleInfo) return;
// Apply styling based on whether this is a detected style or default
// ALL buttons use the same unified three-layer architecture
button.classList.add('insertr-style-preview');
// Apply appropriate preview styling to the isolated sample
if (styleInfo.isDefault) {
// Default style - apply semantic styling
button.classList.add('insertr-default-style');
// Add semantic styling for default elements
// Default semantic formatting - apply styling to sample
if (styleInfo.tagName === 'strong') {
styleSample.style.fontWeight = 'bold';
} else if (styleInfo.tagName === 'em') {
@@ -657,10 +657,7 @@ export class StyleAwareEditor {
// Add helpful description to title
button.title = `${styleInfo.name}: ${styleInfo.description || 'Default formatting option'}`;
} else if (styleInfo.element && styleInfo.classes && styleInfo.classes.length > 0) {
// Detected style - apply original classes to style sample
button.classList.add('insertr-style-preview');
// Add the detected classes to the style sample (isolated preview)
// Detected style - apply original classes to style sample (isolated preview)
styleInfo.classes.forEach(className => {
styleSample.classList.add(className);
});
@@ -668,7 +665,6 @@ export class StyleAwareEditor {
button.title = `Apply ${styleInfo.classes.join(' ')} styling`;
} else {
// No meaningful styles detected - use fallback
button.classList.add('insertr-style-preview');
styleSample.classList.add('insertr-fallback-style');
}
}