[Themes] add fullscreen theme with preview part.

6 files changed, 124 insertions, 0 deletions

diff --git a/Makefile.am b/Makefile.am
index 7c095269..1e3ce081 100644
--- a/Makefile.am
+++ b/Makefile.am
@@ -232,6 +232,7 @@ theme_DATA=\
 		   themes/fancy2.rasi\
 		   themes/iggy.rasi\
 		   themes/material.rasi\
+		   themes/fullscreen-preview.rasi\
 		   themes/iggy.jpg
 
 ##
diff --git a/meson.build b/meson.build
index a675029f..9415b999 100644
--- a/meson.build
+++ b/meson.build
@@ -312,6 +312,7 @@ install_data(
     'themes/iggy.rasi',
     'themes/material.rasi',
     'themes/iggy.jpg',
+    'themes/fullscreen-preview.rasi',
     install_dir: themedir
 )
 
diff --git a/mkdocs/docs/themes/capture.sh b/mkdocs/docs/themes/capture.sh
index a9933581..bb0be6bb 100755
--- a/mkdocs/docs/themes/capture.sh
+++ b/mkdocs/docs/themes/capture.sh
@@ -48,6 +48,7 @@ echo "Use \`rofi-theme-selector\` to select and use one of these themes." >> the
 Xvfb :1234 -screen 0 1920x1080x24 &
 XEPHYR_PID=$!
 export DISPLAY=:1234
+sleep 0.5;
 run_theme "default"
 for theme in ${THEMES}
 do
diff --git a/mkdocs/docs/themes/fullscreen-preview.png b/mkdocs/docs/themes/fullscreen-preview.png
new file mode 100644
index 00000000..d4201686
--- /dev/null
+++ b/mkdocs/docs/themes/fullscreen-preview.png
diff --git a/mkdocs/docs/themes/themes.md b/mkdocs/docs/themes/themes.md
index e0b1d585..72a3d734 100644
--- a/mkdocs/docs/themes/themes.md
+++ b/mkdocs/docs/themes/themes.md
@@ -53,6 +53,10 @@ Use `rofi-theme-selector` to select and use one of these themes.
 
 ![fancy](fancy.png)
 
+# [fullscreen-preview](https://github.com/davatorium/rofi/blob/next/themes/fullscreen-preview.rasi)
+
+![fullscreen-preview](fullscreen-preview.png)
+
 # [glue_pro_blue](https://github.com/davatorium/rofi/blob/next/themes/glue_pro_blue.rasi)
 
 ![glue_pro_blue](glue_pro_blue.png)
diff --git a/themes/fullscreen-preview.rasi b/themes/fullscreen-preview.rasi
new file mode 100644
index 00000000..2ed62ed8
--- /dev/null
+++ b/themes/fullscreen-preview.rasi
@@ -0,0 +1,117 @@
+/**
+ * ROFI Color Theme
+ *
+ * Fullscreen theme with switchable PREVIEW option.
+ * 
+ * User: Dave Davenport
+ * Copyright: Dave Davenport
+ */
+
+* {
+	background-color: transparent;
+	text-color:       white;
+}
+
+window {
+	fullscreen:       true;
+	background-color: black/80%;
+	padding:          4em;
+	children:         [ wrap, listview-split];
+	spacing:          1em;
+}
+
+/** preview widget */
+icon-current-entry {
+  expand:          true;
+  size:            80%;
+}
+
+/** We add an extra child to this is 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;
+}
+element-icon {
+	size: 8em;
+	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;
+}
+
+/**
+ * Launching rofi with environment PREVIEW set to true
+ * will split the screen and show a preview widget.
+ */
+@media ( enabled: env(PREVIEW, false)) {
+  listview-split {
+    children: [listview, icon-current-entry];
+  }
+  listview {
+  columns: 4;
+  }
+
+}