[MKDocs] Add dynamic theme guide.

6 files changed, 211 insertions, 5 deletions

diff --git a/mkdocs/docs/guides/DynamicThemes/1.png b/mkdocs/docs/guides/DynamicThemes/1.png
new file mode 100644
index 00000000..d219fa24
--- /dev/null
+++ b/mkdocs/docs/guides/DynamicThemes/1.png
diff --git a/mkdocs/docs/guides/DynamicThemes/2.png b/mkdocs/docs/guides/DynamicThemes/2.png
new file mode 100644
index 00000000..dfbc8af9
--- /dev/null
+++ b/mkdocs/docs/guides/DynamicThemes/2.png
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];
   }