Skip to content

Commit c043229

Browse files
skerbisskerbis
committed
Theme-Editor: Schriftgrößen und Button-Style (Outline) implementiert, white-space nowrap für Buttons
1 parent 70f18c3 commit c043229

File tree

3 files changed

+81
-5
lines changed

3 files changed

+81
-5
lines changed

‎fragments/ConsentManager/theme_editor.php‎

Lines changed: 35 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -143,6 +143,33 @@ class="btn <?= $themeBase === $key ? 'btn-primary' : 'btn-default' ?>">
143143
</div>
144144
</section>
145145

146+
<!-- Schriftgrößen -->
147+
<section class="rex-page-section">
148+
<div class="panel panel-default">
149+
<header class="panel-heading">
150+
<div class="panel-title"><i class="rex-icon fa-text-height"></i> Schriftgrößen</div>
151+
</header>
152+
<div class="panel-body">
153+
<div class="row">
154+
<div class="col-md-6">
155+
<div class="form-group">
156+
<label for="font_size">Allgemeine Schriftgröße: <span id="font_size_value"><?= rex_escape($colors['font_size'] ?? '') ?><?= !empty($colors['font_size']) ? 'px' : 'Standard' ?></span></label>
157+
<input type="range" class="form-control" id="font_size" name="font_size" min="12" max="22" value="<?= rex_escape($colors['font_size'] ?? '16') ?>">
158+
<small class="help-block">Basis-Schriftgröße für die Consent-Box (12-22px, Standard je nach Theme-Typ)</small>
159+
</div>
160+
</div>
161+
<div class="col-md-6">
162+
<div class="form-group">
163+
<label for="button_font_size">Button-Schriftgröße: <span id="button_font_size_value"><?= rex_escape($colors['button_font_size'] ?? '15') ?>px</span></label>
164+
<input type="range" class="form-control" id="button_font_size" name="button_font_size" min="12" max="20" value="<?= rex_escape($colors['button_font_size'] ?? '15') ?>">
165+
<small class="help-block">Schriftgröße für die Buttons (12-20px)</small>
166+
</div>
167+
</div>
168+
</div>
169+
</div>
170+
</div>
171+
</section>
172+
146173
<!-- Details-Bereich -->
147174
<section class="rex-page-section">
148175
<div class="panel panel-default">
@@ -804,8 +831,14 @@ function initThemeEditor() {
804831
const valueSpan = document.getElementById(this.id + '_value');
805832
if (valueSpan) {
806833
const isOpacity = this.id.includes('opacity');
807-
const unit = isOpacity ? '%' : 'px';
808-
valueSpan.textContent = this.value + unit;
834+
const isFontSize = this.id === 'font_size';
835+
let unit = isOpacity ? '%' : 'px';
836+
// Für allgemeine Schriftgröße: Wenn Standard-Bereich, zeige "Standard"
837+
if (isFontSize && this.value === '') {
838+
valueSpan.textContent = 'Standard';
839+
} else {
840+
valueSpan.textContent = this.value + unit;
841+
}
809842
}
810843
updateButtonPreviews();
811844
updateDetailsTogglePreview();

‎lib/Theme.php‎

Lines changed: 22 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -264,6 +264,14 @@ public static function generateA11yThemeScss(string $base, string $name, string
264264
$buttonRadius = ($colors['button_radius'] ?? '4') . 'px';
265265
$buttonBorderWidth = ($colors['button_border_width'] ?? '2') . 'px';
266266
$buttonBorderColor = $colors['button_border_color'] ?? $colors['button_bg'];
267+
$buttonStyle = $colors['button_style'] ?? 'filled';
268+
269+
// Schriftgröße (benutzerdefiniert oder Standard je nach Theme-Typ)
270+
$customFontSize = $colors['font_size'] ?? null;
271+
if ($customFontSize && '' !== $customFontSize) {
272+
$fontSize = $customFontSize . 'px';
273+
}
274+
$buttonFontSize = $colors['button_font_size'] ?? '15';
267275

268276
// Details-Toggle Button (anzeigen/ausblenden)
269277
$detailsLink = $colors['details_link'] ?? $colors['link'] ?? '#0066cc';
@@ -324,6 +332,16 @@ public static function generateA11yThemeScss(string $base, string $name, string
324332
default => '',
325333
};
326334

335+
// Button-Style CSS (filled vs outline)
336+
if ('outline' === $buttonStyle) {
337+
$buttonBackgroundCss = 'transparent';
338+
$buttonTextCss = '\$button-bg';
339+
} else {
340+
// filled (default)
341+
$buttonBackgroundCss = '\$button-bg';
342+
$buttonTextCss = '\$button-text';
343+
}
344+
327345
// Additional CSS for specific themes
328346
$additionalCss = '';
329347
if ($isFluid) {
@@ -645,12 +663,12 @@ public static function generateA11yThemeScss(string $base, string $name, string
645663
button.consent_manager-accept-all,
646664
button.consent_manager-accept-none {
647665
transition: 0.2s ease all !important;
648-
background: \$button-bg !important;
666+
background: $buttonBackgroundCss !important;
649667
border: \$button-border-width solid \$button-border-color !important;
650-
color: \$button-text !important;
668+
color: $buttonTextCss !important;
651669
padding: $buttonPadding !important;
652670
border-radius: \$button-radius !important;
653-
font-size: 15px !important;
671+
font-size: {$buttonFontSize}px !important;
654672
font-weight: 600 !important;
655673
text-align: center !important;
656674
display: block !important;
@@ -659,6 +677,7 @@ public static function generateA11yThemeScss(string $base, string $name, string
659677
margin-bottom: 0.75em !important;
660678
cursor: pointer !important;
661679
line-height: 1.4 !important;
680+
white-space: nowrap !important;
662681
}
663682
664683
button.consent_manager-save-selection:hover,

‎pages/theme_editor.php‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,9 @@
5353
'overlay_opacity' => '75',
5454
'border_radius' => '4',
5555
'border_width' => '3',
56+
// Schriftgrößen
57+
'font_size' => '16',
58+
'button_font_size' => '15',
5659
// Button-Styles
5760
'button_style' => 'filled',
5861
'button_radius' => '4',
@@ -88,6 +91,9 @@
8891
'overlay_opacity' => '75',
8992
'border_radius' => '4',
9093
'border_width' => '2',
94+
// Schriftgrößen
95+
'font_size' => '15',
96+
'button_font_size' => '14',
9197
// Button-Styles
9298
'button_style' => 'filled',
9399
'button_radius' => '4',
@@ -122,6 +128,9 @@
122128
'overlay_opacity' => '60',
123129
'border_radius' => '0',
124130
'border_width' => '0',
131+
// Schriftgrößen
132+
'font_size' => '15',
133+
'button_font_size' => '14',
125134
'button_style' => 'filled',
126135
'button_radius' => '6',
127136
'button_border_width' => '0',
@@ -154,6 +163,9 @@
154163
'overlay_opacity' => '70',
155164
'border_radius' => '0',
156165
'border_width' => '0',
166+
// Schriftgrößen
167+
'font_size' => '15',
168+
'button_font_size' => '14',
157169
'button_style' => 'filled',
158170
'button_radius' => '4',
159171
'button_border_width' => '0',
@@ -186,6 +198,9 @@
186198
'overlay_opacity' => '40',
187199
'border_radius' => '12',
188200
'border_width' => '1',
201+
// Schriftgrößen
202+
'font_size' => '14',
203+
'button_font_size' => '13',
189204
'button_style' => 'filled',
190205
'button_radius' => '8',
191206
'button_border_width' => '0',
@@ -221,6 +236,9 @@
221236
'overlay_opacity' => '50',
222237
'border_radius' => '16',
223238
'border_width' => '1',
239+
// Schriftgrößen
240+
'font_size' => '',
241+
'button_font_size' => '14',
224242
'button_style' => 'filled',
225243
'button_radius' => '12',
226244
'button_border_width' => '0',
@@ -256,6 +274,9 @@
256274
'overlay_opacity' => '60',
257275
'border_radius' => '16',
258276
'border_width' => '1',
277+
// Schriftgrößen
278+
'font_size' => '',
279+
'button_font_size' => '14',
259280
'button_style' => 'filled',
260281
'button_radius' => '12',
261282
'button_border_width' => '0',
@@ -297,6 +318,9 @@
297318
'overlay_opacity' => rex_request::post('overlay_opacity', 'string', $defaultColors[$themeBase]['overlay_opacity']),
298319
'border_radius' => rex_request::post('border_radius', 'string', $defaultColors[$themeBase]['border_radius']),
299320
'border_width' => rex_request::post('border_width', 'string', $defaultColors[$themeBase]['border_width']),
321+
// Schriftgrößen
322+
'font_size' => rex_request::post('font_size', 'string', $defaultColors[$themeBase]['font_size'] ?? ''),
323+
'button_font_size' => rex_request::post('button_font_size', 'string', $defaultColors[$themeBase]['button_font_size'] ?? '15'),
300324
// Button-Styles
301325
'button_style' => rex_request::post('button_style', 'string', $defaultColors[$themeBase]['button_style']),
302326
'button_radius' => rex_request::post('button_radius', 'string', $defaultColors[$themeBase]['button_radius']),

0 commit comments

Comments
 (0)