[Doc] Add documentation with example about position.

This commit is contained in:
Dave Davenport 2021-08-23 22:19:30 +02:00
parent ad60bf5acf
commit 9c7f9b71c3
3 changed files with 309 additions and 0 deletions

View File

@ -0,0 +1,241 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="150.71399mm"
height="69.147636mm"
viewBox="0 0 150.71399 69.147635"
version="1.1"
id="svg8"
inkscape:version="0.92.1 r"
sodipodi:docname="anchors.svg">
<defs
id="defs2" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="1.8246591"
inkscape:cx="302.5802"
inkscape:cy="62.615586"
inkscape:document-units="mm"
inkscape:current-layer="layer1"
showgrid="true"
inkscape:window-width="1886"
inkscape:window-height="1006"
inkscape:window-x="15"
inkscape:window-y="57"
inkscape:window-maximized="0"
fit-margin-top="0"
fit-margin-left="0"
fit-margin-right="0"
fit-margin-bottom="0"
scale-x="0.99999998">
<inkscape:grid
type="xygrid"
id="grid3682"
originx="16.324069"
originy="-137.50508" />
</sodipodi:namedview>
<metadata
id="metadata5">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(16.324071,-90.347289)">
<rect
id="rect3680"
width="113.59723"
height="53.512745"
x="3.4443808"
y="98.826805"
style="fill:none;stroke:#000000;stroke-width:1.24190378;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
<text
xml:space="preserve"
style="font-style:normal;font-weight:normal;font-size:6.57174015px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.16429351"
x="49.48209"
y="122.17239"
id="text4491"><tspan
sodipodi:role="line"
id="tspan4489"
x="49.48209"
y="122.17239"
style="stroke-width:0.16429351">center</tspan></text>
<text
xml:space="preserve"
style="font-style:normal;font-weight:normal;font-size:6.57174015px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.16429351"
x="51.163532"
y="159.22668"
id="text4491-3"><tspan
sodipodi:role="line"
id="tspan4489-6"
x="51.163532"
y="159.22668"
style="stroke-width:0.16429351">south</tspan></text>
<text
xml:space="preserve"
style="font-style:normal;font-weight:normal;font-size:6.57174015px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.16429351"
x="120.4699"
y="127.84382"
id="text4491-7"><tspan
sodipodi:role="line"
id="tspan4489-5"
x="120.4699"
y="127.84382"
style="stroke-width:0.16429351">east</tspan></text>
<g
id="g4539"
transform="matrix(0.62095187,0,0,0.62095187,-8.1591307,61.340986)">
<text
id="text4491-35"
y="107.09821"
x="-13.593488"
style="font-style:normal;font-weight:normal;font-size:10.58333302px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.26458332"
xml:space="preserve"><tspan
style="stroke-width:0.26458332"
y="107.09821"
x="-13.593488"
id="tspan4489-62"
sodipodi:role="line">west</tspan></text>
</g>
<text
xml:space="preserve"
style="font-style:normal;font-weight:normal;font-size:6.57174015px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.16429351"
x="-16.920919"
y="95.340271"
id="text4491-9"><tspan
sodipodi:role="line"
id="tspan4489-1"
x="-16.920919"
y="95.340271"
style="stroke-width:0.16429351">northwest</tspan></text>
<text
xml:space="preserve"
style="font-style:normal;font-weight:normal;font-size:6.57174015px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.16429351"
x="102.82118"
y="95.340271"
id="text4491-9-2"><tspan
sodipodi:role="line"
id="tspan4489-1-7"
x="102.82118"
y="95.340271"
style="stroke-width:0.16429351">northeast</tspan></text>
<text
xml:space="preserve"
style="font-style:normal;font-weight:normal;font-size:6.57174015px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.16429351"
x="-16.680254"
y="159.22668"
id="text4491-9-0"><tspan
sodipodi:role="line"
id="tspan4489-1-9"
x="-16.680254"
y="159.22668"
style="stroke-width:0.16429351">southwest</tspan></text>
<text
xml:space="preserve"
style="font-style:normal;font-weight:normal;font-size:6.57174015px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.16429351"
x="102.1024"
y="159.22668"
id="text4491-9-2-3"><tspan
sodipodi:role="line"
id="tspan4489-1-7-6"
x="102.1024"
y="159.22668"
style="stroke-width:0.16429351">southeast</tspan></text>
<rect
style="fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:1.24190378;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="rect4601"
width="5.7502732"
height="4.1073375"
x="0.38413191"
y="97.014793" />
<rect
style="fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:1.24190378;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="rect4601-0"
width="5.7502732"
height="4.107338"
x="57.367859"
y="97.014793" />
<rect
style="fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:1.24190378;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="rect4601-6"
width="5.7502732"
height="4.107338"
x="113.74665"
y="97.014793" />
<rect
style="fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:1.24190378;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="rect4601-2"
width="5.7502732"
height="4.107338"
x="0.8770141"
y="149.75291" />
<rect
style="fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:1.24190378;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="rect4601-0-6"
width="5.7502732"
height="4.107338"
x="57.367859"
y="149.75291" />
<rect
style="fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:1.24190378;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="rect4601-6-1"
width="5.7502732"
height="4.107338"
x="114.23956"
y="149.75291" />
<rect
style="fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:1.24190378;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="rect4601-02"
width="5.7502732"
height="4.107338"
x="0.21978256"
y="123.52951" />
<rect
style="fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:1.24190378;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="rect4601-6-3"
width="5.7502732"
height="4.107338"
x="113.5826"
y="123.52951" />
<rect
style="fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:1.24190378;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="rect4601-0-7"
width="5.7502732"
height="4.107338"
x="57.367859"
y="124.12322" />
<text
xml:space="preserve"
style="font-style:normal;font-weight:normal;font-size:6.57174015px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.16429351"
x="51.204075"
y="95.340271"
id="text4491-5"><tspan
sodipodi:role="line"
id="tspan4489-9"
x="51.204075"
y="95.340271"
style="stroke-width:0.16429351">north</tspan></text>
</g>
</svg>

After

Width:  |  Height:  |  Size: 8.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 523 KiB

View File

@ -0,0 +1,68 @@
# Positioning Rofi on the monitor
In the current theme format you set these properties on the `window` widget.
The first, position, determines where **rofi** is placed on the monitor, the
second what point of the **rofi** window connects there. This sounds
complicated, but it ain't.
## position setting
The position setting determines the place of the window on the monitor.
The position setting supports the following values:
* north
* northeast
* northwest
* south
* southeast
* southwest
* east
* west
* center
This is depicted in the diagram below:
![positions](anchors.svg)
## anchor setting
The anchor sets what point of the **rofi** window is placed at the specified *position*.
The *anchor* settings supports the same values as the *position* setting.
If you want the middle of the **rofi** window to be always located at the center of the monitor set both *position* and
*anchor* to `center`.
If the **rofi** window resizes, its center will stay at the center.
If you set the *anchor* to `north` the top of the **rofi** window is at the center of the monitor, and the window will grow
down.
If you set the *anchor* and *position* to `south`, **rofi** is located at the bottom center and the window grows up.
> Note that if you set the *anchor* to `south` and the *position* to `north` the **rofi** window will be placed above
> the monitor and might not be visible.
> In another blog post we will explain how the dynamic sizing behaviour of **rofi** can be tweaked or disabled.
So the following theme setting will place the top of the **rofi** window in the center of the monitor:
```css
window {
position: center;
anchor: north;
}
```
As depicted here, RED is the position (center of screen), GREEN is the position on **rofi** window (north):
![positions](example-pos.png)
> Quick hint, if you want to quickly test out changes to the theme, without editing the file, run **rofi** like:
```bash
rofi -show run -theme-str "window { position: center; anchor: north;}"
```