diff --git a/mkdocs/docs/guides/DynamicThemes/1.png b/mkdocs/docs/guides/DynamicThemes/1.png new file mode 100644 index 00000000..d219fa24 Binary files /dev/null and b/mkdocs/docs/guides/DynamicThemes/1.png differ diff --git a/mkdocs/docs/guides/DynamicThemes/2.png b/mkdocs/docs/guides/DynamicThemes/2.png new file mode 100644 index 00000000..dfbc8af9 Binary files /dev/null and b/mkdocs/docs/guides/DynamicThemes/2.png differ diff --git a/mkdocs/docs/guides/DynamicThemes/dynamic_themes.md b/mkdocs/docs/guides/DynamicThemes/dynamic_themes.md new file mode 100644 index 00000000..783f8ba5 --- /dev/null +++ b/mkdocs/docs/guides/DynamicThemes/dynamic_themes.md @@ -0,0 +1,204 @@ +# Dynamic Theme + +A new addition in rofi 1.7.5 that did not get a lot of attention is support for +the enabled keyword in the media statement and supporting environment values. +Or more practical, you can modify your theme based on environment variables. + +```css + +@media ( enabled: env(DO_X, false)) { + listview { + orientation: vertical; + } +} +``` + +You can now enable this part of the theme by running rofi with `DO_X` set. + +```bash +DO_X=true rofi -show combi +``` + +## Image browser example + +In the current release, there is a +[fullscreen_preview](https://github.com/davatorium/rofi/blob/next/themes/fullscreen-preview.rasi) +as an example. + +In this theme we are going to modify the filebrowser view with a preview widget that we can enable. + +Lets start with the basic theme. + +```css +* { + background-color: transparent; + text-color: white; +} + +window { + fullscreen: true; + background-color: black/80%; + padding: 4em; + children: [ wrap, listview-split]; + spacing: 1em; +} + + +/** We add an extra child to this if PREVIEW=true */ +listview-split { + orientation: horizontal; + spacing: 0.4em; + children: [listview]; +} + +wrap { + expand: false; + orientation: vertical; + children: [ inputbar, message ]; + background-image: linear-gradient(white/5%, white/40%); + border-color: lightblue; + border: 3px; + border-radius: 0.4em; +} + +icon-ib { + expand: false; + filename: "system-search"; + vertical-align: 0.5; + horizontal-align: 0.5; + size: 1em; +} +inputbar { + spacing: 0.4em; + padding: 0.4em; + children: [ icon-ib, entry ]; +} +entry { + placeholder: "Search"; + placeholder-color: grey; +} +message { + background-color: red/20%; + border-color: lightsalmon; + border: 3px 0px 0px 0px; + padding: 0.4em; + spacing: 0.4em; +} + +listview { + flow: horizontal; + fixed-columns: true; + columns: 7; + lines: 5; + spacing: 1.0em; +} + +element { + orientation: vertical; + padding: 0.1em; + + background-image: linear-gradient(white/5%, white/20%); + border-color: lightblue /15%; + border: 3px; + border-radius: 0.4em; + + children: [element-icon, element-text ]; +} +element-icon { + size: calc(((100% - 8em) / 7 )); + horizontal-align: 0.5; + vertical-align: 0.5; +} +element-text { + horizontal-align: 0.5; + vertical-align: 0.5; + padding: 0.2em; +} + +element selected { + background-image: linear-gradient(white/25%, white/10%); + border-color: lightblue; + border: 3px; + border-radius: 0.4em; +} + +``` + +When running this theme: +```bash +rofi -theme fullscreen-preview.rasi -show filebrowser +``` + +![Basic Theme](1.png) + +We already prepared the place where we are going to add a 2nd widget. +Now lets, at the end of the theme, add the extra element in a media block. + + +```css +@media ( enabled: env(PREVIEW, false)) { +``` +The variable is `PREVIEW`, if it is not set `false` is used. +Otherwise the content of `PREVIEW` is parsed. + +These will be merged into the theme on load: + +```css + +/** + * Launching rofi with environment PREVIEW set to true + * will split the screen and show a preview widget. + */ +@media ( enabled: env(PREVIEW, false)) { + // preview widget + icon-current-entry { + expand: true; + size: 80%; + } + // override the children of `listview-split` + listview-split { + children: [listview, icon-current-entry]; + } + // Reduce to 4 columns + listview { + columns: 4; + } + +} +``` + +Now if we run it: + +```bash +REVIEW=true rofi -theme fullscreen-preview.rasi -show filebrowser +``` + + +It looks like this: + +![Image preview](2.png) + +We can add more sections; for example for text only we hide the images: + +```css +@media ( enabled: env(NO_IMAGE, false)) { + listview { + columns: 1; + spacing: 0.4em; + } + element { + children: [ element-text ]; + } + element-text { + horizontal-align: 0.0; + } +} +``` + +## Wallpaper picker + +If you run latest git version, you can now easily make a wallpaper picker: + +```bash +PREVIEW=true rofi -theme fullscreen-preview.rasi -show filebrowser -filebrowser-command 'feh --bg-scale' -filebrowser-directory ~/Wallpapers/ +``` diff --git a/mkdocs/docs/index.md b/mkdocs/docs/index.md index 049267ad..b43e5e0c 100644 --- a/mkdocs/docs/index.md +++ b/mkdocs/docs/index.md @@ -33,3 +33,4 @@ The manpages are grouped on rofi version. * [Transparency](guides/Transparency/theme3-transparency) * [Positioning](guides/Positioning/theme3-positioning) * [Plugins](guides/Plugins/2017-04-19-rofi-140-sneak-preview-plugins.md) +* [Dynamic Theme](guides/DynamicThemes/dynamic_themes.md) diff --git a/mkdocs/mkdocs.yml b/mkdocs/mkdocs.yml index b5d43fcc..00b3505e 100644 --- a/mkdocs/mkdocs.yml +++ b/mkdocs/mkdocs.yml @@ -13,6 +13,7 @@ nav: - Transparency: guides/Transparency/theme3-transparency.markdown - Positioning: guides/Positioning/theme3-positioning.markdown - Plugins: guides/Plugins/2017-04-19-rofi-140-sneak-preview-plugins.md + - Dynamic Theme: guides/DynamicThemes/dynamic_themes.md - Current: - Rofi: current/rofi.1.markdown - Themes: current/rofi-theme.5.markdown diff --git a/themes/fullscreen-preview.rasi b/themes/fullscreen-preview.rasi index 920b7767..81c779ae 100644 --- a/themes/fullscreen-preview.rasi +++ b/themes/fullscreen-preview.rasi @@ -20,11 +20,6 @@ window { spacing: 1em; } -/** preview widget */ -icon-current-entry { - expand: true; - size: 80%; -} /** We add an extra child to this is PREVIEW=true */ listview-split { @@ -109,6 +104,11 @@ element selected { * will split the screen and show a preview widget. */ @media ( enabled: env(PREVIEW, false)) { + /** preview widget */ + icon-current-entry { + expand: true; + size: 80%; + } listview-split { children: [listview, icon-current-entry]; }