[doc] Update drawings in rofi-theme

This commit is contained in:
Dave Davenport 2022-04-06 00:04:30 +02:00
parent 88a1d1cbf7
commit 62ebde525f
2 changed files with 175 additions and 168 deletions

View File

@ -753,16 +753,24 @@ When no unit is specified, pixels are assumed.
.PP
Indicate a place on the window/monitor.
.PP
.RS
.nf
┌─────────────┬─────────────┬─────────────┐
│ north west │ north │ north east │
├─────────────┼─────────────┼─────────────┤
│ west │ center │ east │
├─────────────┼─────────────┼─────────────┤
│ south west │ south │ south east │
└─────────────┴─────────────┴─────────────┘
.fi
.RE
.RS
.IP \(bu 2
Format: \fB\fC(center|east|north|west|south|north east|north west|south west|south east)\fR
\fB\fC
north west | north | north east
-------------|-------------|------------
west | center | east
-------------|-------------|------------
south west | south | south east
\fR
.RE
@ -1364,42 +1372,42 @@ The current layout of \fBrofi\fP is structured as follows:
.RS
.nf
|------------------------------------------------------------------------------------|
| window {BOX:vertical} |
| |-------------------------------------------------------------------------------| |
| | mainbox {BOX:vertical} | |
| | |---------------------------------------------------------------------------| | |
| | | inputbar {BOX:horizontal} | | |
| | | |---------| |-| |---------------------------------|---| |---| |---| |---| | | |
| | | | prompt | |:| | entry |#fr| | / | |#ns| |ci | | | |
| | | |---------| |_| |---------------------------------|---| |---| |---| |---| | | |
| | |---------------------------------------------------------------------------| | |
| | | |
| | |---------------------------------------------------------------------------| | |
| | | message | | |
| | | |-----------------------------------------------------------------------| | | |
| | | | textbox | | | |
| | | |-----------------------------------------------------------------------| | | |
| | |---------------------------------------------------------------------------| | |
| | | |
| | |-----------------------------------------------------------------------------| |
| | | listview | |
| | | |------------------------------------------------------------------------] | |
| | | | element | | |
| | | | |-----------------| |------------------------------------------------] | | |
| | | | |element-icon | |element-text | | | |
| | | | |-----------------| |------------------------------------------------| | | |
| | | |------------------------------------------------------------------------] | |
| | |-----------------------------------------------------------------------------| |
| | | |
| | |---------------------------------------------------------------------------| | |
| | | mode-switcher {BOX:horizontal} | | |
| | | |---------------| |---------------| |--------------| |---------------| | | |
| | | | Button | | Button | | Button | | Button | | | |
| | | |---------------| |---------------| |--------------| |---------------| | | |
| | |---------------------------------------------------------------------------| | |
| |-------------------------------------------------------------------------------| |
|------------------------------------------------------------------------------------|
┌────────────────────────────────────────────────────────────────────────────────────┐
│ window {BOX:vertical} │
│ ┌───────────────────────────────────────────────────────────────────────────────┐ │
│ │ mainbox {BOX:vertical} │ │
│ │ ┌───────────────────────────────────────────────────────────────────────────┐ │ │
│ │ │ inputbar {BOX:horizontal} │ │ │
│ │ │ ┌─────────┐ ┌─┐ ┌───────────────────────────────┐ ┌───┐ ┌───┐ ┌───┐ ┌───┐ │ │ │
│ │ │ │ prompt │ │:│ │ entry │ │#fr│ │ / │ │#ns│ │ci │ │ │ │
│ │ │ └─────────┘ └─┘ └───────────────────────────────┘ └───┘ └───┘ └───┘ └───┘ │ │ │
│ │ └───────────────────────────────────────────────────────────────────────────┘ │ │
│ │ │ │
│ │ ┌───────────────────────────────────────────────────────────────────────────┐ │ │
│ │ │ message │ │ │
│ │ │ ┌───────────────────────────────────────────────────────────────────────┐ │ │ │
│ │ │ │ textbox │ │ │ │
│ │ │ └───────────────────────────────────────────────────────────────────────┘ │ │ │
│ │ └───────────────────────────────────────────────────────────────────────────┘ │ │
│ │ │ │
│ │ ┌───────────────────────────────────────────────────────────────────────────┐ │ │
│ │ │ listview │ │ │
│ │ │ ┌─────────────────────────────────────────────────────────────────────┐ │ │ │
│ │ │ │ element │ │ │ │
│ │ │ │ ┌─────────────────┐ ┌─────────────────────────────────────────────┐ │ │ │ │
│ │ │ │ │element─icon │ │element─text │ │ │ │ │
│ │ │ │ └─────────────────┘ └─────────────────────────────────────────────┘ │ │ │ │
│ │ │ └─────────────────────────────────────────────────────────────────────┘ │ │ │
│ │ └───────────────────────────────────────────────────────────────────────────┘ │ │
│ │ │ │
│ │ ┌───────────────────────────────────────────────────────────────────────────┐ │ │
│ │ │ mode─switcher {BOX:horizontal} │ │ │
│ │ │ ┌───────────────┐ ┌───────────────┐ ┌──────────────┐ ┌───────────────┐ │ │ │
│ │ │ │ Button │ │ Button │ │ Button │ │ Button │ │ │ │
│ │ │ └───────────────┘ └───────────────┘ └──────────────┘ └───────────────┘ │ │ │
│ │ └───────────────────────────────────────────────────────────────────────────┘ │ │
│ └───────────────────────────────────────────────────────────────────────────────┘ │
└────────────────────────────────────────────────────────────────────────────────────┘
@ -1426,16 +1434,15 @@ ns is the num-rows
.RS
.nf
|-----------------------------------------------------------------------------------|
| window {BOX:vertical} |
| |------------------------------------------------------------------------------| |
| | error-message {BOX:vertical} | |
| | |-------------------------------------------------------------------------| | |
| | | textbox | | |
| | |-------------------------------------------------------------------------| | |
| |------------------------------------------------------------------------------| |
|-----------------------------------------------------------------------------------|
┌──────────────────────────────────────────────────────────────────────────────────┐
│ window {BOX:vertical} │
│ ┌─────────────────────────────────────────────────────────────────────────────┐ │
│ │ error─message {BOX:vertical} │ │
│ │ ┌────────────────────────────────────────────────────────────────────────┐ │ │
│ │ │ textbox │ │ │
│ │ └────────────────────────────────────────────────────────────────────────┘ │ │
│ └─────────────────────────────────────────────────────────────────────────────┘ │
└──────────────────────────────────────────────────────────────────────────────────┘
.fi
@ -1631,18 +1638,18 @@ Just like CSS, \fBrofi\fP uses the box model for each widget.
.RS
.nf
|-------------------------------------------------------------------|
| margin |
| |-------------------------------------------------------------| |
| | border | |
| | |---------------------------------------------------------| | |
| | | padding | | |
| | | |-----------------------------------------------------| | | |
| | | | content | | | |
| | | |-----------------------------------------------------| | | |
| | |---------------------------------------------------------| | |
| |-------------------------------------------------------------| |
|-------------------------------------------------------------------|
┌──────────────────────────────────────────────────────────────────┐
│ margin │
│ ┌────────────────────────────────────────────────────────────┐ │
│ │ border │ │
│ │ ┌────────────────────────────────────────────────────────┐ │ │
│ │ │ padding │ │ │
│ │ │ ┌────────────────────────────────────────────────────┐ │ │ │
│ │ │ │ content │ │ │ │
│ │ │ └────────────────────────────────────────────────────┘ │ │ │
│ │ └────────────────────────────────────────────────────────┘ │ │
│ └────────────────────────────────────────────────────────────┘ │
└──────────────────────────────────────────────────────────────────┘
.fi
.RE
@ -1681,15 +1688,15 @@ This property sets the distance between the packed widgets (both horizontally an
.RS
.nf
|---------------------------------------|
| |--------| s |--------| s |-------| |
| | child | p | child | p | child | |
| | | a | | a | | |
| | | c | | c | | |
| | | i | | i | | |
| | | n | | n | | |
| |--------| g |--------| g |-------| |
|---------------------------------------|
┌───────────────────────────────────────┐
│ ┌────────┐ s ┌────────┐ s ┌────────┐ │
│ │ child │ p │ child │ p │ child │ │
│ │ │ a │ │ a │ │ │
│ │ │ c │ │ c │ │ │
│ │ │ i │ │ i │ │ │
│ │ │ n │ │ n │ │ │
│ └────────┘ g └────────┘ g └────────┘ │
└───────────────────────────────────────┘
.fi
.RE
@ -1702,15 +1709,15 @@ More dynamic spacing can be achieved by adding dummy widgets, for example to mak
.RS
.nf
|----------------------------------------------------|
| |---------------| |--------| |---------------| |
| | dummy | | child | | dummy | |
| | expand: true; | | | | expand: true; | |
| | | | | | | |
| | | | | | | |
| | | | | | | |
| |---------------| |--------| |---------------| |
|----------------------------------------------------|
┌────────────────────────────────────────────────────┐
│ ┌───────────────┐ ┌────────┐ ┌───────────────┐ │
│ │ dummy │ │ child │ │ dummy │ │
│ │ expand: true; │ │ │ │ expand: true; │ │
│ │ │ │ │ │ │ │
│ │ │ │ │ │ │ │
│ │ │ │ │ │ │ │
│ └───────────────┘ └────────┘ └───────────────┘ │
└────────────────────────────────────────────────────┘
.fi
.RE

View File

@ -465,17 +465,18 @@ style property.
Indicate a place on the window/monitor.
```
┌─────────────┬─────────────┬─────────────┐
│ north west │ north │ north east │
├─────────────┼─────────────┼─────────────┤
│ west │ center │ east │
├─────────────┼─────────────┼─────────────┤
│ south west │ south │ south east │
└─────────────┴─────────────┴─────────────┘
```
* Format: `(center|east|north|west|south|north east|north west|south west|south east)`
```
north west | north | north east
-------------|-------------|------------
west | center | east
-------------|-------------|------------
south west | south | south east
```
## Visibility
It is possible to hide widgets:
@ -850,42 +851,42 @@ The box can be vertical or horizontal. This is loosely inspired by [GTK](http://
The current layout of **rofi** is structured as follows:
```
|------------------------------------------------------------------------------------|
| window {BOX:vertical} |
| |-------------------------------------------------------------------------------| |
| | mainbox {BOX:vertical} | |
| | |---------------------------------------------------------------------------| | |
| | | inputbar {BOX:horizontal} | | |
| | | |---------| |-| |---------------------------------|---| |---| |---| |---| | | |
| | | | prompt | |:| | entry |#fr| | / | |#ns| |ci | | | |
| | | |---------| |_| |---------------------------------|---| |---| |---| |---| | | |
| | |---------------------------------------------------------------------------| | |
| | | |
| | |---------------------------------------------------------------------------| | |
| | | message | | |
| | | |-----------------------------------------------------------------------| | | |
| | | | textbox | | | |
| | | |-----------------------------------------------------------------------| | | |
| | |---------------------------------------------------------------------------| | |
| | | |
| | |-----------------------------------------------------------------------------| |
| | | listview | |
| | | |------------------------------------------------------------------------] | |
| | | | element | | |
| | | | |-----------------| |------------------------------------------------] | | |
| | | | |element-icon | |element-text | | | |
| | | | |-----------------| |------------------------------------------------| | | |
| | | |------------------------------------------------------------------------] | |
| | |-----------------------------------------------------------------------------| |
| | | |
| | |---------------------------------------------------------------------------| | |
| | | mode-switcher {BOX:horizontal} | | |
| | | |---------------| |---------------| |--------------| |---------------| | | |
| | | | Button | | Button | | Button | | Button | | | |
| | | |---------------| |---------------| |--------------| |---------------| | | |
| | |---------------------------------------------------------------------------| | |
| |-------------------------------------------------------------------------------| |
|------------------------------------------------------------------------------------|
┌────────────────────────────────────────────────────────────────────────────────────┐
│ window {BOX:vertical} │
│ ┌───────────────────────────────────────────────────────────────────────────────┐ │
│ │ mainbox {BOX:vertical} │ │
│ │ ┌───────────────────────────────────────────────────────────────────────────┐ │ │
│ │ │ inputbar {BOX:horizontal} │ │ │
│ │ │ ┌─────────┐ ┌─┐ ┌───────────────────────────────┐ ┌───┐ ┌───┐ ┌───┐ ┌───┐ │ │ │
│ │ │ │ prompt │ │:│ │ entry │ │#fr│ │ / │ │#ns│ │ci │ │ │ │
│ │ │ └─────────┘ └─┘ └───────────────────────────────┘ └───┘ └───┘ └───┘ └───┘ │ │ │
│ │ └───────────────────────────────────────────────────────────────────────────┘ │ │
│ │ │ │
│ │ ┌───────────────────────────────────────────────────────────────────────────┐ │ │
│ │ │ message │ │ │
│ │ │ ┌───────────────────────────────────────────────────────────────────────┐ │ │ │
│ │ │ │ textbox │ │ │ │
│ │ │ └───────────────────────────────────────────────────────────────────────┘ │ │ │
│ │ └───────────────────────────────────────────────────────────────────────────┘ │ │
│ │ │ │
│ │ ┌───────────────────────────────────────────────────────────────────────────┐ │ │
│ │ │ listview │ │ │
│ │ │ ┌─────────────────────────────────────────────────────────────────────┐ │ │ │
│ │ │ │ element │ │ │ │
│ │ │ │ ┌─────────────────┐ ┌─────────────────────────────────────────────┐ │ │ │ │
│ │ │ │ │element─icon │ │element─text │ │ │ │ │
│ │ │ │ └─────────────────┘ └─────────────────────────────────────────────┘ │ │ │ │
│ │ │ └─────────────────────────────────────────────────────────────────────┘ │ │ │
│ │ └───────────────────────────────────────────────────────────────────────────┘ │ │
│ │ │ │
│ │ ┌───────────────────────────────────────────────────────────────────────────┐ │ │
│ │ │ mode─switcher {BOX:horizontal} │ │ │
│ │ │ ┌───────────────┐ ┌───────────────┐ ┌──────────────┐ ┌───────────────┐ │ │ │
│ │ │ │ Button │ │ Button │ │ Button │ │ Button │ │ │ │
│ │ │ └───────────────┘ └───────────────┘ └──────────────┘ └───────────────┘ │ │ │
│ │ └───────────────────────────────────────────────────────────────────────────┘ │ │
│ └───────────────────────────────────────────────────────────────────────────────┘ │
└────────────────────────────────────────────────────────────────────────────────────┘
```
@ -896,16 +897,15 @@ The current layout of **rofi** is structured as follows:
### Error message structure
```
|-----------------------------------------------------------------------------------|
| window {BOX:vertical} |
| |------------------------------------------------------------------------------| |
| | error-message {BOX:vertical} | |
| | |-------------------------------------------------------------------------| | |
| | | textbox | | |
| | |-------------------------------------------------------------------------| | |
| |------------------------------------------------------------------------------| |
|-----------------------------------------------------------------------------------|
┌──────────────────────────────────────────────────────────────────────────────────┐
│ window {BOX:vertical} │
│ ┌─────────────────────────────────────────────────────────────────────────────┐ │
│ │ error─message {BOX:vertical} │ │
│ │ ┌────────────────────────────────────────────────────────────────────────┐ │ │
│ │ │ textbox │ │ │
│ │ └────────────────────────────────────────────────────────────────────────┘ │ │
│ └─────────────────────────────────────────────────────────────────────────────┘ │
└──────────────────────────────────────────────────────────────────────────────────┘
```
@ -1049,18 +1049,18 @@ element selected {
Just like CSS, **rofi** uses the box model for each widget.
```
|-------------------------------------------------------------------|
| margin |
| |-------------------------------------------------------------| |
| | border | |
| | |---------------------------------------------------------| | |
| | | padding | | |
| | | |-----------------------------------------------------| | | |
| | | | content | | | |
| | | |-----------------------------------------------------| | | |
| | |---------------------------------------------------------| | |
| |-------------------------------------------------------------| |
|-------------------------------------------------------------------|
┌──────────────────────────────────────────────────────────────────┐
│ margin │
│ ┌────────────────────────────────────────────────────────────┐ │
│ │ border │ │
│ │ ┌────────────────────────────────────────────────────────┐ │ │
│ │ │ padding │ │ │
│ │ │ ┌────────────────────────────────────────────────────┐ │ │ │
│ │ │ │ content │ │ │ │
│ │ │ └────────────────────────────────────────────────────┘ │ │ │
│ │ └────────────────────────────────────────────────────────┘ │ │
│ └────────────────────────────────────────────────────────────┘ │
└──────────────────────────────────────────────────────────────────┘
```
Explanation of the different parts:
@ -1084,15 +1084,15 @@ Widgets that can pack more then one child widget (currently box and listview) ha
This property sets the distance between the packed widgets (both horizontally and vertically).
```
|---------------------------------------|
| |--------| s |--------| s |-------| |
| | child | p | child | p | child | |
| | | a | | a | | |
| | | c | | c | | |
| | | i | | i | | |
| | | n | | n | | |
| |--------| g |--------| g |-------| |
|---------------------------------------|
┌───────────────────────────────────────┐
│ ┌────────┐ s ┌────────┐ s ┌────────┐ │
│ │ child │ p │ child │ p │ child │ │
│ │ │ a │ │ a │ │ │
│ │ │ c │ │ c │ │ │
│ │ │ i │ │ i │ │ │
│ │ │ n │ │ n │ │ │
│ └────────┘ g └────────┘ g └────────┘ │
└───────────────────────────────────────┘
```
### Advanced box packing
@ -1100,15 +1100,15 @@ This property sets the distance between the packed widgets (both horizontally an
More dynamic spacing can be achieved by adding dummy widgets, for example to make one widget centered:
```
|----------------------------------------------------|
| |---------------| |--------| |---------------| |
| | dummy | | child | | dummy | |
| | expand: true; | | | | expand: true; | |
| | | | | | | |
| | | | | | | |
| | | | | | | |
| |---------------| |--------| |---------------| |
|----------------------------------------------------|
┌────────────────────────────────────────────────────┐
│ ┌───────────────┐ ┌────────┐ ┌───────────────┐ │
│ │ dummy │ │ child │ │ dummy │ │
│ │ expand: true; │ │ │ │ expand: true; │ │
│ │ │ │ │ │ │ │
│ │ │ │ │ │ │ │
│ │ │ │ │ │ │ │
│ └───────────────┘ └────────┘ └───────────────┘ │
└────────────────────────────────────────────────────┘
```
If both dummy widgets are set to expand, `child` will be centered. Depending on the `expand` flag of child the