zedfrigg/ironbar
1
0
Fork 0
mirror of https://github.com/Zedfrigg/ironbar.git synced 2025-07-01 18:51:04 +02:00
Code Activity

docs(wiki): update screenshots and examples

Browse source
This commit is contained in:
Jake Stanger 2023-02-01 21:53:07 +00:00
parent 51d2c2279f
commit 7b23e61e7d
No known key found for this signature in database
GPG key ID: C51FC8F9CB0BEA61
18 changed files with 555 additions and 549 deletions
Download patch file Download diff file Expand all files Collapse all files

202
docs/examples/Config.md
View file

@ -1,202 +1,10 @@
The below config shows a module of each type being used.
The configs linked below show a module of each type being used.
The Corn format makes heavy use of variables
to show how module configs can be easily referenced to improve readability
and reduce config length when using multiple bars.
<details>
<summary>JSON</summary>
```json
{
"start": [
{
"all_monitors": false,
"name_map": {
"1": "ﭮ",
"2": "",
"3": "",
"Code": "",
"Games": ""
},
"type": "workspaces"
},
{
"favorites": [
"firefox",
"discord",
"Steam"
],
"icon_theme": "Paper",
"show_icons": true,
"show_names": false,
"type": "launcher"
}
],
"end": [
{
"music_dir": "/home/jake/Music",
"type": "mpd"
},
{
"host": "chloe:6600",
"type": "mpd"
},
{
"path": "/home/jake/bin/phone-battery",
"type": "script"
},
{
"format": [
"{cpu-percent}% ",
"{memory-percent}% "
],
"type": "sys-info"
},
{
"type": "clock"
}
]
}
```
</details>
<details>
<summary>TOML</summary>
```toml
[[start]]
all_monitors = false
type = 'workspaces'
[start.name_map]
1 = 'ﭮ'
2 = ''
3 = ''
Code = ''
Games = ''
[[start]]
icon_theme = 'Paper'
show_icons = true
show_names = false
type = 'launcher'
favorites = [
'firefox',
'discord',
'Steam',
]
[[end]]
music_dir = '/home/jake/Music'
type = 'mpd'
[[end]]
host = 'chloe:6600'
type = 'mpd'
[[end]]
path = '/home/jake/bin/phone-battery'
type = 'script'
[[end]]
type = 'sys-info'
format = [
'{cpu-percent}% ',
'{memory-percent}% ',
]
[[end]]
type = 'clock'
```
</details>
<details>
<summary>YAML</summary>
```yaml
---
start:
- all_monitors: false
name_map:
"1": ﭮ
"2": 
"3": 
Code: 
Games: 
type: workspaces
- favorites:
- firefox
- discord
- Steam
icon_theme: Paper
show_icons: true
show_names: false
type: launcher
end:
- music_dir: /home/jake/Music
type: mpd
- host: "chloe:6600"
type: mpd
- path: /home/jake/bin/phone-battery
type: script
- format:
- "{cpu-percent}% "
- "{memory-percent}% "
type: sys-info
- type: clock
```
</details>
<details>
<summary>Corn</summary>
```corn
let {
$workspaces = {
type = "workspaces"
all_monitors = false
name_map = {
1 = "ﭮ"
2 = ""
3 = ""
Games = ""
Code = ""
}
}
$launcher = {
type = "launcher"
favorites = ["firefox" "discord" "Steam"]
show_names = false
show_icons = true
icon_theme = "Paper"
}
$mpd_local = { type = "mpd" music_dir = "/home/jake/Music" }
$mpd_server = { type = "mpd" host = "chloe:6600" }
$sys_info = {
type = "sys-info"
format = ["{cpu-percent}% " "{memory-percent}% "]
}
$tray = { type = "tray" }
$clock = { type = "clock" }
$phone_battery = {
type = "script"
path = "/home/jake/bin/phone-battery"
}
$start = [ $workspaces $launcher ]
$end = [ $mpd_local $mpd_server $phone_battery $sys_info $clock ]
}
in {
start = $start
end = $end
}
```
</details>
- [JSON](https://github.com/JakeStanger/ironbar/blob/master/examples/config.json)
- [TOML](https://github.com/JakeStanger/ironbar/blob/master/examples/config.toml)
- [YAML](https://github.com/JakeStanger/ironbar/blob/master/examples/config.yaml)
- [Corn](https://github.com/JakeStanger/ironbar/blob/master/examples/config.corn)

142
docs/examples/Stylesheet.md
View file

@ -1,142 +0,0 @@
The below example is a full stylesheet for all modules:
```css
* {
/* a nerd font is required to be installed for icons */
font-family: Noto Sans Nerd Font, sans-serif;
font-size: 16px;
border: none;
}
#bar {
border-top: 1px solid #424242;
}
.container {
background-color: #2d2d2d;
}
.container#end > * + * {
margin-left: 20px;
}
.popup {
background-color: #2d2d2d;
border: 1px solid #424242;
}
#workspaces .item {
color: white;
background-color: #2d2d2d;
border-radius: 0;
}
#workspaces .item.focused {
box-shadow: inset 0 -3px;
background-color: #1c1c1c;
}
#workspaces *:not(.focused):hover {
box-shadow: inset 0 -3px;
}
#launcher .item {
border-radius: 0;
background-color: #2d2d2d;
margin-right: 4px;
}
#launcher .item:not(.focused):hover {
background-color: #1c1c1c;
}
#launcher .open {
border-bottom: 2px solid #6699cc;
}
#launcher .focused {
color: white;
background-color: black;
border-bottom: 4px solid #6699cc;
}
#launcher .urgent {
color: white;
background-color: #8f0a0a;
}
#script {
color: white;
}
#sysinfo {
color: white;
}
#tray .item {
background-color: #2d2d2d;
}
#mpd {
background-color: #2d2d2d;
color: white;
}
#popup-mpd {
color: white;
padding: 1em;
}
#popup-mpd #album-art {
margin-right: 1em;
}
#popup-mpd #title .icon, #popup-mpd #title .label {
font-size: 1.7em;
}
#popup-mpd #controls * {
border-radius: 0;
background-color: #2d2d2d;
color: white;
}
#popup-mpd #controls *:disabled {
color: #424242;
}
#clock {
color: white;
background-color: #2d2d2d;
font-weight: bold;
}
#popup-clock {
padding: 1em;
}
#popup-clock #calendar-clock {
color: white;
font-size: 2.5em;
padding-bottom: 0.1em;
}
#popup-clock #calendar {
background-color: #2d2d2d;
color: white;
}
#popup-clock #calendar .header {
padding-top: 1em;
border-top: 1px solid #424242;
font-size: 1.5em;
}
#popup-clock #calendar:selected {
background-color: #6699cc;
}
#focused {
color: white;
}
```

73
docs/examples/custom/Power-Menu.md
View file

@ -1,6 +1,6 @@
Creates a button on the bar, which opens a popup. The popup contains a header, shutdown button, restart button, and uptime.
![A screenshot of the custom power menu module open, with some other modules present on the bar](../../_imgs/custom-power-menu.png)
![A screenshot of the custom power menu module open, with some other modules present on the bar](https://f.jstanger.dev/github/ironbar/custom-power-menu.png)
## Configuration
@ -16,9 +16,9 @@ Creates a button on the bar, which opens a popup. The popup contains a header, s
{
"bar": [
{
"on_click": "popup:toggle",
"label": "",
"name": "power-btn",
"on_click": "popup:toggle",
"type": "button"
}
],
@ -38,26 +38,27 @@ Creates a button on the bar, which opens a popup. The popup contains a header, s
"widgets": [
{
"class": "power-btn",
"on_click": "!shutdown now",
"label": "<span font-size='40pt'></span>",
"on_click": "!shutdown now",
"type": "button"
},
{
"class": "power-btn",
"on_click": "!reboot",
"label": "<span font-size='40pt'></span>",
"on_click": "!reboot",
"type": "button"
}
]
},
{
"label": "Up: {{30000:uptime -p | cut -d ' ' -f2-}}",
"label": "Uptime: {{30000:uptime -p | cut -d ' ' -f2-}}",
"name": "uptime",
"type": "label"
}
]
}
],
"tooltip": "Up: {{30000:uptime -p | cut -d ' ' -f2-}}",
"type": "custom"
}
]
@ -75,12 +76,13 @@ type = 'clock'
[[end]]
class = 'power-menu'
tooltip = '''Up: {{30000:uptime -p | cut -d ' ' -f2-}}'''
type = 'custom'
[[end.bar]]
on_click = 'popup:toggle'
label = ''
name = 'power-btn'
on_click = 'popup:toggle'
type = 'button'
[[end.popup]]
@ -97,18 +99,18 @@ type = 'box'
[[end.popup.widgets.widgets]]
class = 'power-btn'
on_click = '!shutdown now'
label = '''<span font-size='40pt'></span>'''
on_click = '!shutdown now'
type = 'button'
[[end.popup.widgets.widgets]]
class = 'power-btn'
on_click = '!reboot'
label = '''<span font-size='40pt'></span>'''
on_click = '!reboot'
type = 'button'
[[end.popup.widgets]]
label = '''Up: {{30000:uptime -p | cut -d ' ' -f2-}}'''
label = '''Uptime: {{30000:uptime -p | cut -d ' ' -f2-}}'''
name = 'uptime'
type = 'label'
```
@ -121,10 +123,11 @@ type = 'label'
```yaml
end:
- type: clock
- bar:
- on_click: popup:toggle
label: 
- label: 
name: power-btn
on_click: popup:toggle
type: button
class: power-menu
popup:
@ -137,16 +140,17 @@ end:
- type: box
widgets:
- class: power-btn
on_click: '!shutdown now'
label: <span font-size='40pt'></span>
on_click: '!shutdown now'
type: button
- class: power-btn
on_click: '!reboot'
label: <span font-size='40pt'></span>
on_click: '!reboot'
type: button
- label: 'Up: {{30000:uptime -p | cut -d '' '' -f2-}}'
- label: 'Uptime: {{30000:uptime -p | cut -d '' '' -f2-}}'
name: uptime
type: label
tooltip: 'Up: {{30000:uptime -p | cut -d '' '' -f2-}}'
type: custom
```
@ -157,30 +161,37 @@ end:
```corn
let {
$button = { type = "button" name="power-btn" label = "" on_click = "popup:toggle" }
$popup = {
type = "box"
orientation = "vertical"
widgets = [
{ type = "label" name = "header" label = "Power menu" }
{
type = "box"
widgets = [
{ type = "button" class="power-btn" label = "<span font-size='40pt'></span>" on_click = "!shutdown now" }
{ type = "button" class="power-btn" label = "<span font-size='40pt'></span>" on_click = "!reboot" }
]
}
{ type = "label" name = "uptime" label = "Uptime: {{30000:uptime -p | cut -d ' ' -f2-}}" }
]
}
$power_menu = {
type = "custom"
class = "power-menu"
bar = [ { type = "button" name="power-btn" label = "" on_click = "popup:toggle" } ]
bar = [ $button ]
popup = [ $popup ]
popup = [ {
type = "box"
orientation = "vertical"
widgets = [
{ type = "label" name = "header" label = "Power menu" }
{
type = "box"
widgets = [
{ type = "button" class="power-btn" label = "<span font-size='40pt'></span>" on_click = "!shutdown now" }
{ type = "button" class="power-btn" label = "<span font-size='40pt'></span>" on_click = "!reboot" }
]
}
{ type = "label" name = "uptime" label = "Up: {{30000:uptime -p | cut -d ' ' -f2-}}" }
]
} ]
tooltip = "Up: {{30000:uptime -p | cut -d ' ' -f2-}}"
}
$clock = { type = "clock" }
} in {
end = [ $power_menu ]
end = [ $power_menu $clock ]
}
```
</details>