Skip to content

Commit fa52f37

Browse files
MarcinOrlowskiMarcinOrlowski
authored
[#38] Release 1.6.0 (#39)
2 parents b1729a4 + 4ed2aca commit fa52f37

File tree

8 files changed

+99
-43
lines changed

8 files changed

+99
-43
lines changed

‎.gitignore‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -62,3 +62,5 @@ node_modules/
6262
.local
6363

6464
composer.lock
65+
66+
.claude/

‎CHANGES.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,13 @@
11
# Changelog
22

3+
## 1.6.0 (TBD)
4+
5+
- [#035] Added customizable background colors for breathing stripes
6+
- [#033] Added close widget type to dismiss devbar
7+
38
## 1.5.2 (2025-12-12)
49

10+
- [#033] Added close widget type to dismiss devbar
511
- [#027] Devbar template now includes its own CSS for self-contained styling
612
- [#029] Normalized uses CSS styles in both views
713

‎README.md‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -88,6 +88,7 @@ Example configuration that produces devbar shown in the screenshot above:
8888
```yaml
8989
widgets:
9090
left:
91+
- type: close
9192
- icon: "fa-bug"
9293
text: "1.47"
9394
url: "https://github.com/<FOO>/issues?q=is%3Aissue%20state%3Aopen%20milestone%3A1.47"
@@ -122,6 +123,7 @@ widgets:
122123
123124
| Property | Type | Required | Description |
124125
|-------------|:--------:|:--------:|--------------------------------------------------------------------------------|
126+
| `type` | `string` | | Widget type: `link` (default) or `close` (dismisses devbar). |
125127
| `icon`* | `string` | | Optional icon to display. Can be Font Awesome class or emoji/text. |
126128
| `icon_type` | `string` | | Icon type: `fa` (Font Awesome, default) or `text` (emoji/plain text). |
127129
| `text`* | `string` | | Optional widget label to display alongside icon. |
@@ -206,6 +208,15 @@ Include the devbar template in your base layout:
206208

207209
## Customization
208210

211+
### Background Colors
212+
213+
Customize the breathing stripes background colors in your `.disco-devbar.yaml`:
214+
215+
```yaml
216+
bg_color_light: '#b71c1c'
217+
bg_color_dark: '#8e0000'
218+
```
219+
209220
### Custom CSS
210221

211222
The bundle includes default styling. To customize, override the CSS after importing bundle assets or

‎Resources/public/devbar.css‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
left: 0;
66
right: 0;
77
z-index: 1001; /* Higher than top-nav (1000) to ensure it's above */
8-
background: #8e0000;
8+
background: var(--bg-color-dark, #8e0000);
99
color: white;
1010
font-size: 15px;
1111
overflow: hidden;
@@ -17,10 +17,10 @@
1717
inset: 0;
1818
background: repeating-linear-gradient(
1919
45deg,
20-
#b71c1c,
21-
#b71c1c 10px,
22-
#8e0000 10px,
23-
#8e0000 20px
20+
var(--bg-color-light, #b71c1c),
21+
var(--bg-color-light, #b71c1c) 10px,
22+
var(--bg-color-dark, #8e0000) 10px,
23+
var(--bg-color-dark, #8e0000) 20px
2424
);
2525
animation: breathe 6s ease-in-out infinite;
2626
}
@@ -199,3 +199,4 @@ body:has(.disco-devbar) #flash-messages {
199199
body.page-login:has(.disco-devbar) #flash-messages {
200200
top: 40px; /* Height of DiscoDevBar */
201201
}
202+

‎Resources/views/devbar.html.twig‎

Lines changed: 49 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
crossorigin="anonymous"
1111
referrerpolicy="no-referrer" />
1212

13-
<div class="disco-devbar{% if banner_data.hasError %} disco-devbar-error{% endif %}">
13+
<div class="disco-devbar{% if banner_data.hasError %} disco-devbar-error{% endif %}" style="--bg-color-light: {{ banner_data.bgColorLight }}; --bg-color-dark: {{ banner_data.bgColorDark }}">
1414
<div class="disco-devbar-content">
1515
{% if banner_data.hasError %}
1616
<div class="disco-devbar-container-left">
@@ -30,47 +30,63 @@
3030
{% if not loop.first %}
3131
<span class="disco-devbar-separator">&middot;</span>
3232
{% endif %}
33-
<span class="disco-devbar-widget {% if widget.expand %}disco-devbar-widget-expand{% endif %}">
34-
<a href="{{ widget.url }}"
35-
class="disco-devbar-link"
36-
{% if widget.target %}target="{{ widget.target }}"{% endif %}
37-
{% if widget.title %}title="{{ widget.title }}"{% endif %}>
38-
<span class="disco-devbar-link-content">
39-
{% if widget.icon %}
40-
{% if widget.iconType.value == 'fa' %}
41-
<i class="fa-solid {{ widget.icon }}"></i>
42-
{% else %}
43-
{{ widget.icon }}
33+
{% if widget.type == 'close' %}
34+
<span class="disco-devbar-widget">
35+
<a href="#" class="disco-devbar-link" onclick="document.querySelector('.disco-devbar').remove(); return false;" title="Close DevBar">
36+
<span class="disco-devbar-link-content">✕</span>
37+
</a>
38+
</span>
39+
{% else %}
40+
<span class="disco-devbar-widget {% if widget.expand %}disco-devbar-widget-expand{% endif %}">
41+
<a href="{{ widget.url }}"
42+
class="disco-devbar-link"
43+
{% if widget.target %}target="{{ widget.target }}"{% endif %}
44+
{% if widget.title %}title="{{ widget.title }}"{% endif %}>
45+
<span class="disco-devbar-link-content">
46+
{% if widget.icon %}
47+
{% if widget.iconType.value == 'fa' %}
48+
<i class="fa-solid {{ widget.icon }}"></i>
49+
{% else %}
50+
{{ widget.icon }}
51+
{% endif %}
4452
{% endif %}
45-
{% endif %}
46-
{% if widget.text %}{{ widget.text }}{% endif %}
47-
</span>
48-
</a>
49-
</span>
53+
{% if widget.text %}{{ widget.text }}{% endif %}
54+
</span>
55+
</a>
56+
</span>
57+
{% endif %}
5058
{% endfor %}
5159
</div>
5260
<div class="disco-devbar-container-right {% if banner_data.rightExpand %}disco-devbar-container-expand{% endif %}">
5361
{% for widget in banner_data.right %}
5462
{% if not loop.first %}
5563
<span class="disco-devbar-separator">&middot;</span>
5664
{% endif %}
57-
<span class="disco-devbar-widget {% if widget.expand %}disco-devbar-widget-expand{% endif %}">
58-
<a href="{{ widget.url }}"
59-
class="disco-devbar-link"
60-
{% if widget.target %}target="{{ widget.target }}"{% endif %}
61-
{% if widget.title %}title="{{ widget.title }}"{% endif %}>
62-
<span class="disco-devbar-link-content">
63-
{% if widget.icon %}
64-
{% if widget.iconType.value == 'fa' %}
65-
<i class="fa-solid {{ widget.icon }}"></i>
66-
{% else %}
67-
{{ widget.icon }}
65+
{% if widget.type == 'close' %}
66+
<span class="disco-devbar-widget">
67+
<a href="#" class="disco-devbar-link" onclick="document.querySelector('.disco-devbar').remove(); return false;" title="Close DevBar">
68+
<span class="disco-devbar-link-content">✕</span>
69+
</a>
70+
</span>
71+
{% else %}
72+
<span class="disco-devbar-widget {% if widget.expand %}disco-devbar-widget-expand{% endif %}">
73+
<a href="{{ widget.url }}"
74+
class="disco-devbar-link"
75+
{% if widget.target %}target="{{ widget.target }}"{% endif %}
76+
{% if widget.title %}title="{{ widget.title }}"{% endif %}>
77+
<span class="disco-devbar-link-content">
78+
{% if widget.icon %}
79+
{% if widget.iconType.value == 'fa' %}
80+
<i class="fa-solid {{ widget.icon }}"></i>
81+
{% else %}
82+
{{ widget.icon }}
83+
{% endif %}
6884
{% endif %}
69-
{% endif %}
70-
{% if widget.text %}{{ widget.text }}{% endif %}
71-
</span>
72-
</a>
73-
</span>
85+
{% if widget.text %}{{ widget.text }}{% endif %}
86+
</span>
87+
</a>
88+
</span>
89+
{% endif %}
7490
{% endfor %}
7591
</div>
7692
{% endif %}

‎src/Dto/DiscoDevBarData.php‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,8 @@ class DiscoDevBarData
3232
* @param string|null $version Bundle version (null shows as N/A)
3333
* @param bool $fontAwesomeEnabled Whether to auto-include Font Awesome
3434
* @param string $fontAwesomeVersion Font Awesome version to use
35+
* @param string $bgColorLight Light stripe color for background gradient
36+
* @param string $bgColorDark Dark stripe color for background gradient
3537
*/
3638
public function __construct(
3739
public readonly array $left,
@@ -42,7 +44,9 @@ public function __construct(
4244
public readonly string $errorMessage = '',
4345
public readonly ?string $version = null,
4446
public readonly bool $fontAwesomeEnabled = false,
45-
public readonly string $fontAwesomeVersion = '6.5.1'
47+
public readonly string $fontAwesomeVersion = '6.5.1',
48+
public readonly string $bgColorLight = '#b71c1c',
49+
public readonly string $bgColorDark = '#8e0000'
4650
) {
4751
}
4852
}

‎src/Dto/Widget.php‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,8 @@ public function __construct(
2929
public readonly string $target,
3030
public readonly string $title,
3131
public readonly bool $expand,
32-
public readonly IconType $iconType = IconType::FONT_AWESOME
32+
public readonly IconType $iconType = IconType::FONT_AWESOME,
33+
public readonly string $type = 'link'
3334
) {
3435
}
3536

@@ -47,6 +48,7 @@ public static function fromArray(array $data): self
4748
$title = $data['title'] ?? '';
4849
$expand = $data['expand'] ?? false;
4950
$iconType = $data['icon_type'] ?? 'fa';
51+
$type = $data['type'] ?? 'link';
5052

5153
return new self(
5254
icon: \is_string($icon) ? $icon : '',
@@ -55,7 +57,8 @@ public static function fromArray(array $data): self
5557
target: \is_string($target) ? $target : '',
5658
title: \is_string($title) ? $title : '',
5759
expand: \is_bool($expand) ? $expand : false,
58-
iconType: IconType::tryFrom(\is_string($iconType) ? $iconType : 'fa') ?? IconType::FONT_AWESOME
60+
iconType: IconType::tryFrom(\is_string($iconType) ? $iconType : 'fa') ?? IconType::FONT_AWESOME,
61+
type: \is_string($type) ? $type : 'link'
5962
);
6063
}
6164
}

‎src/Service/DiscoDevBarService.php‎

Lines changed: 15 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,12 @@ class DiscoDevBarService
4141
*/
4242
private const DEFAULT_FONT_AWESOME_VERSION = '6.5.1';
4343

44+
/**
45+
* Default background colors for breathing stripes
46+
*/
47+
private const DEFAULT_BG_COLOR_LIGHT = '#b71c1c';
48+
private const DEFAULT_BG_COLOR_DARK = '#8e0000';
49+
4450
public function __construct(
4551
private readonly string $projectDir
4652
) {
@@ -63,7 +69,9 @@ public function getDiscoDevBarData(): DiscoDevBarData
6369
errorMessage: $errorMessage,
6470
version: $version,
6571
fontAwesomeEnabled: false,
66-
fontAwesomeVersion: self::DEFAULT_FONT_AWESOME_VERSION
72+
fontAwesomeVersion: self::DEFAULT_FONT_AWESOME_VERSION,
73+
bgColorLight: self::DEFAULT_BG_COLOR_LIGHT,
74+
bgColorDark: self::DEFAULT_BG_COLOR_DARK
6775
);
6876
}
6977

@@ -99,6 +107,9 @@ public function getDiscoDevBarData(): DiscoDevBarData
99107
$leftWidgets = $this->loadWidgets(\is_array($left) ? $left : []);
100108
$rightWidgets = $this->loadWidgets(\is_array($right) ? $right : []);
101109

110+
$bgColorLight = $config['bg_color_light'] ?? self::DEFAULT_BG_COLOR_LIGHT;
111+
$bgColorDark = $config['bg_color_dark'] ?? self::DEFAULT_BG_COLOR_DARK;
112+
102113
return new DiscoDevBarData(
103114
left: $leftWidgets,
104115
right: $rightWidgets,
@@ -108,7 +119,9 @@ public function getDiscoDevBarData(): DiscoDevBarData
108119
errorMessage: '',
109120
version: $version,
110121
fontAwesomeEnabled: \is_bool($fontAwesomeEnabled) ? $fontAwesomeEnabled : false,
111-
fontAwesomeVersion: $fontAwesomeVersion
122+
fontAwesomeVersion: $fontAwesomeVersion,
123+
bgColorLight: \is_string($bgColorLight) ? $bgColorLight : self::DEFAULT_BG_COLOR_LIGHT,
124+
bgColorDark: \is_string($bgColorDark) ? $bgColorDark : self::DEFAULT_BG_COLOR_DARK
112125
);
113126
}
114127

0 commit comments

Comments
 (0)