add "dark" theme, work on themes
authorgc <gc>
Sat, 30 Jul 2005 16:19:48 +0000 (16:19 +0000)
committergc <gc>
Sat, 30 Jul 2005 16:19:48 +0000 (16:19 +0000)
15 files changed:
THEMES
bin/booh
bin/booh-backend
data/booh/themes/dark/back.gif [new file with mode: 0644]
data/booh/themes/dark/skeleton_image.html [new file with mode: 0644]
data/booh/themes/dark/skeleton_index.html [new file with mode: 0644]
data/booh/themes/dark/skeleton_thumbnails.html [new file with mode: 0644]
data/booh/themes/dark/video.png [new file with mode: 0644]
data/booh/themes/simple/metadata/parameters.rb
data/booh/themes/simple/metadata/screenshot-1.png
data/booh/themes/simple/metadata/screenshot-2.png
data/booh/themes/simple/metadata/screenshot-3.png
data/booh/themes/simple/skeleton_image.html
data/booh/themes/simple/skeleton_index.html
lib/booh/html-merges.rb

diff --git a/THEMES b/THEMES
index 23fbaf1..b11bdaa 100644 (file)
--- a/THEMES
+++ b/THEMES
@@ -1,13 +1,80 @@
-                Screenshots
+                   [[ Themes in booh ]]
+
+Each theme is made of:
+
+- one index.html skeleton, used for the "index" page, the page
+  showing the available subalbums (no such page in the generated
+  album, if you don't have any subalbum)
+
+- one thumbnails.html skeleton, used for the thumbnails page
+
+- one image.html skeleton, used for fullscreen images
+
+- any number of resource files these html pages depend on
+  (images, css..)
+
+- a metadata/parameters.rb file holding information about images
+  sizes that will fit the best the html pages layout
+
+- three metadata/screenshot-?.png files used to select theme in
+  the GUI
+
+
+                  [[ Skeleton files ]]
+
+The skeleton files contain keywords used in the backend to fill
+them up with images. There is no precise documentation about
+them, the best is to look at the `simple' theme and learn from it
+directly. Most of them are just a simple replace, and there are
+two special cases:
+
+- conditionals:
+
+    ~~iffoo?~~bar~~fi~~
+
+  indicates that if foo is true, put bar at this position, else
+  put nothing; there are a few existing conditions tested, have a
+  look in skeletons of the `simple' theme
+
+- loops:
+
+   ~~iterate1_open~~
+     foo
+     ~~image_iteration~~
+     bar
+   ~~iterate1_close~~
+
+   is used to put "foo" before each image (index and thumbnails
+   pages only), and bar after each image
+
+   It can be nested:
+
+   ~~iterate1_open~~
+      foo
+       ~~iterate2_open_max4~~
+         bar
+         ~~image_iteration~~
+         baz
+       ~~iterate2_close~~
+      qux
+   ~~iterate1_close~~
+
+   The character after "max" can be hardcoded, or can be "N" to
+   represent the configurable number of images per rows in the
+   thumbnails page. It indicates the amount of times iterate2
+   will be performed before another iterate1 is needed.
+
+
+                     [[ Screenshots ]]
 
 Each theme must export three screenshots, used to select theme in
 the GUI. First screenshot demonstrates the "index" page, second
-one the "thumbnails" page, and thirs one the "image" page.
+one the "thumbnails" page, and third one the "image" page.
 
-To keep a correct ratio between themes, to do your screenshot,
-first resize your browser so that the webpage will use a
-rectangular area of 800x600, and use appropriate images sizes
-(most probable "small"); then resize it to 192x144.
+To keep a correct ratio between themes, to do your screenshot, be
+sure to use the correct images sizes for your resolution; then
+take the screenshot, crop for 1.55 aspect ratio and resize to 192
+of width (thus 124 of height).
 
 It would be best if the screenshots would show the same contents,
 so just send me your theme if you create a new one and I'll do
index ca4b0b5..7c15c87 100755 (executable)
--- a/bin/booh
+++ b/bin/booh
@@ -2551,7 +2551,7 @@ def properties
         mark_document_as_dirty
         save_current_file
         call_backend("booh-backend --use-config '#{$filename}' --for-gui --verbose-level #{$verbose_level} " +
-                     "--thumbnails-per-row #{save_nperrow} --theme #{theme} --sizes #{save_limit_sizes.join(',')} " +
+                     "--thumbnails-per-row #{save_nperrow} --theme #{save_theme} --sizes #{save_limit_sizes.join(',')} " +
                      "#{save_opt432 ? '--optimize-for-32' : ''} #{additional_booh_options}",
                      utf8(_("Please wait while scanning source directory...")),
                      'full scan',
index a5d70e2..83539dc 100755 (executable)
@@ -211,7 +211,7 @@ warranty; not even for MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.") %
     if !$source && $xmldoc
         $source = from_utf8($xmldoc.root.attributes['source'])
         $dest = from_utf8($xmldoc.root.attributes['destination'])
-        $theme = $xmldoc.root.attributes['theme']
+        $theme ||= $xmldoc.root.attributes['theme']
         $limit_sizes ||= $xmldoc.root.attributes['limit-sizes']
         if $mode == 'use_config' || $mode =~ /^merge_config/
             $optimize_for_32 = !$xmldoc.root.attributes['optimize-for-32'].nil?
@@ -620,6 +620,31 @@ def walk_source_dir
 
         #- pass through if there are no images and videos
         if images.size == 0 && videos.size == 0
+            if !$forgui
+                #- cleanup old images/videos, especially if this directory contained images/videos previously.
+                themestuff = Dir.entries("#{$FPATH}/themes/#{$theme}").
+                                 find_all { |e| !%w(. .. skeleton_image.html skeleton_thumbnails.html skeleton_index.html metadata CVS).include?(e) }
+                rightful_images = []
+                if xmldir.attributes['thumbnails-caption']
+                    rightful_images << 'thumbnails-thumbnail.jpg'
+                end
+                xmldir.elements.each('dir') { |child|
+                    if child.attributes['deleted']
+                        next
+                    end
+                    subdir = make_dest_filename(from_utf8(File.basename(child.attributes['path'])))
+                    rightful_images << "thumbnails-#{subdir}.jpg"
+                }
+                to_del = Dir.entries(dest_dir).find_all { |e| !File.directory?("#{dest_dir}/#{e}") && !rightful_images.include?(e) } - themestuff
+                system("rm -f " + to_del.collect { |e| "#{dest_dir}/#{e}" }.join(' '))
+
+                #- copy any resource file that goes with the theme (css, images..)
+                themestuff.each { |entry|
+                    if !File.exists?("#{dest_dir}/#{entry}")
+                        psys("cp '#{$FPATH}/themes/#{$theme}/#{entry}' '#{dest_dir}'")
+                    end
+                }
+            end
             next
         end
 
diff --git a/data/booh/themes/dark/back.gif b/data/booh/themes/dark/back.gif
new file mode 100644 (file)
index 0000000..aa75197
Binary files /dev/null and b/data/booh/themes/dark/back.gif differ
diff --git a/data/booh/themes/dark/skeleton_image.html b/data/booh/themes/dark/skeleton_image.html
new file mode 100644 (file)
index 0000000..e35ae5b
--- /dev/null
@@ -0,0 +1,104 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+<head>
+    <title>~~title~~</title>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
+    <meta name="author" content="`Dark' theme - Guillaume Cottenceau">
+    ~~~image_head_code~~~
+    <style type="text/css" media="screen">
+    <!--
+body {
+        background-color: #000000;
+        background-image: url(back.gif);
+        background-repeat: repeat;
+        color: #AEAEAE;
+        font-family: "Bitstream Vera Sans", "Lucida Sans", Geneva, Arial, Helvetica, sans-serif;
+}
+
+a:link {
+        color: #8090A3;
+        text-decoration: none;
+}
+
+a:visited {
+        color: #7B7BA8;
+        text-decoration: none;
+}
+
+a:hover {
+        color: #8090A3;
+        text-decoration: underline;
+}
+
+input {
+        border: solid 1px;
+}
+
+.image {
+        border: solid 2px;
+        color: #586068;
+}
+
+input {
+        border: solid 1px;
+        color: #5B5B98;
+        background-color: #304149;
+}
+input:hover {
+        color: #7B7BA8;
+        background-color: #384951;
+}
+.disabled {
+        color: #4B4B78;
+        font-style: italic;
+}
+.disabled:hover {
+        color: #4B4B78;
+        background-color: #304149;
+}
+
+    -->
+    </style>
+</head>
+
+<body bgcolor="#FFFFFF" ~~~body_additions~~~>
+
+<table width="100%">
+<tr>
+    <td width="10%">&nbsp;</td>
+    <td width="1%">~~~button_first~~~</td>
+    <td width="3%">&nbsp;</td>
+    <td width="1%">~~~button_previous~~~</td>
+    <td align="center"><font size="-2">~~sizes~~ | ~~</font></td>
+    <td width="1%">~~~button_next~~~</td>
+    <td width="3%">&nbsp;</td>
+    <td width="1%">~~~button_last~~~</td>
+    <td width="10%">&nbsp;</td>
+</tr>
+</table>
+<table width="100%">
+<!-- <p id="dbg_text">&nbsp;</p> -->
+<tr>
+    <td align="center" colspan="9">
+        ~~~image~~~
+    </td>
+</tr>
+<tr>
+    <td align="center" colspan="9">
+        <font size="+1" ~~~caption_additions~~~>&nbsp;</font>
+        <font size="-2" ~~~image_counter_additions~~~>&nbsp;</font>
+    </td>
+</tr>
+
+~~~body_code~~~
+
+<tr>
+    <td colspan="9" align="center">
+        ~~~button_slideshow~~~
+        ~~~pause_slideshow~~~
+        <br/>
+        <font size="-1">~~previous_album~~ ~~ifprevious_album?~~|~~fi~~ ~~thumbnails~~ ~~ifnext_album?~~|~~fi~~ ~~next_album~~</font>
+</tr>
+</table>
+</html>
diff --git a/data/booh/themes/dark/skeleton_index.html b/data/booh/themes/dark/skeleton_index.html
new file mode 100644 (file)
index 0000000..2aaad6a
--- /dev/null
@@ -0,0 +1,65 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+<head>
+    <title>~~title~~</title>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
+    <meta name="author" content="`Dark' theme - Guillaume Cottenceau">
+    <style type="text/css" media="screen">
+    <!--
+body {
+        background-color: #000000;
+        background-image: url(back.gif);
+        background-repeat: repeat;
+        color: #AEAEAE;
+        font-family: "Bitstream Vera Sans", "Lucida Sans", Geneva, Arial, Helvetica, sans-serif;
+}
+
+a:link {
+        color: #8090A3;
+        text-decoration: none;
+}
+
+a:visited {
+        color: #7B7BA8;
+        text-decoration: none;
+}
+
+a:hover {
+        color: #8090A3;
+        text-decoration: underline;
+}
+
+input {
+        border: solid 1px;
+}
+
+.image {
+        border: solid 2px;
+        color: #586068;
+}
+    -->
+    </style>
+</head>
+
+<body bgcolor="#FFFFFF">
+
+~~ifnavigation?~~<p>~~navigation~~</p>~~fi~~
+
+<p align="center"><font size="+3">~~title~~</font></p>
+
+<table width="100%" cellpadding="10" border="0">
+~~iterate1_open~~
+<tr>
+    <td width="50%" align="right" valign="top">
+       ~~image_iteration~~
+    </td>
+    <td width="50%" align="left">
+       <p>~~caption_iteration~~</p>
+    </td>
+</tr>
+~~iterate1_close~~
+</table>
+
+</body>
+</html>
diff --git a/data/booh/themes/dark/skeleton_thumbnails.html b/data/booh/themes/dark/skeleton_thumbnails.html
new file mode 100644 (file)
index 0000000..c936a57
--- /dev/null
@@ -0,0 +1,73 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+<head>
+    <title>~~title~~</title>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
+    <meta name="author" content="`Dark' theme - Guillaume Cottenceau">
+    ~~~thumbnails_head_code~~~
+    <style type="text/css" media="screen">
+    <!--
+body {
+        background-color: #000000;
+        background-image: url(back.gif);
+        background-repeat: repeat;
+        color: #AEAEAE;
+        font-family: "Bitstream Vera Sans", "Lucida Sans", Geneva, Arial, Helvetica, sans-serif;
+}
+
+a:link {
+        color: #8090A3;
+        text-decoration: none;
+}
+
+a:visited {
+        color: #7B7BA8;
+        text-decoration: none;
+}
+
+a:hover {
+        color: #8090A3;
+        text-decoration: underline;
+}
+
+input {
+        border: solid 1px;
+}
+
+.image {
+        border: solid 2px;
+        color: #586068;
+}
+    -->
+    </style>
+</head>
+
+<body bgcolor="#FFFFFF">
+
+<p align="center">
+    <font size="+3">~~title~~</font>
+    <br/>
+    <font size="-2">~~sizes~~ | ~~</font>
+    <br/>
+    <br/>
+    ~~run_slideshow~~
+</p>
+
+<table width="100%">
+~~iterate1_open~~
+<tr>
+    ~~iterate2_open_maxN~~
+    <td align="center" valign="top">
+       ~~image_iteration~~
+       <p>~~ifvideo?~~<img src="video.png"/>~~fi~~ ~~caption_iteration~~</p>
+    </td>
+    ~~iterate2_close~~
+</tr>
+~~iterate1_close~~
+</table>
+
+<p align="center">~~previous_album~~ ~~ifprevious_album?~~|~~fi~~ ~~return_to_albums~~ ~~ifnext_album?~~|~~fi~~ ~~next_album~~</p>
+
+</body>
+</html>
diff --git a/data/booh/themes/dark/video.png b/data/booh/themes/dark/video.png
new file mode 100644 (file)
index 0000000..074cc97
Binary files /dev/null and b/data/booh/themes/dark/video.png differ
index 117eca3..4e67d3b 100644 (file)
@@ -63,7 +63,7 @@ $images_size = [
     }
 ]
 
-$allowed_N_values = [ 3, 4, 6, 8, 12 ]
+$allowed_N_values = [ 3, 4, 6, 8 ]
 $default_N = 4
 
 $albums_thumbnail_size = '300x225'
index d6a01ec..ac8970e 100644 (file)
Binary files a/data/booh/themes/simple/metadata/screenshot-1.png and b/data/booh/themes/simple/metadata/screenshot-1.png differ
index 942b4f0..b104e71 100644 (file)
Binary files a/data/booh/themes/simple/metadata/screenshot-2.png and b/data/booh/themes/simple/metadata/screenshot-2.png differ
index 84150c4..ef64740 100644 (file)
Binary files a/data/booh/themes/simple/metadata/screenshot-3.png and b/data/booh/themes/simple/metadata/screenshot-3.png differ
index 80af8e3..27b9e29 100644 (file)
@@ -29,13 +29,23 @@ a:hover {
         text-decoration: underline;
 }
 
-input {
+.image {
         border: solid 1px;
+        color: #000000;
 }
 
-.image {
+input {
         border: solid 1px;
-        color: #000000;
+        background-color: #DEDAD6;
+}
+input:hover {
+        background-color: #E8E8E8;
+}
+.disabled {
+        font-style: italic;
+}
+.disabled:hover {
+        background-color: #DEDAD6;
 }
     -->
     </style>
index 3df8302..f510f74 100644 (file)
@@ -4,6 +4,7 @@
 <head>
     <title>~~title~~</title>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
+    <meta name="author" content="`Simple' theme - Guillaume Cottenceau">
     <style type="text/css" media="screen">
     <!--
 body {
index 1fd1af7..1888cbb 100644 (file)
@@ -189,6 +189,7 @@ function init() {
     preload();
     if (images.length == 1) {
         document.getElementById("b_slideshow").disabled = true;
+        document.getElementById("b_slideshow").setAttribute("class", "disabled");
     }
 
     preferred_pause = get_cookie('booh-slideshow-pause-~~theme~~');
@@ -205,17 +206,25 @@ function update_sensibilities() {
     if (current == 0) {
         document.getElementById("b_first").disabled = true;
         document.getElementById("b_previous").disabled = true;
+        document.getElementById("b_first").setAttribute("class", "disabled");
+        document.getElementById("b_previous").setAttribute("class", "disabled");
     } else {
         document.getElementById("b_first").disabled = false;
         document.getElementById("b_previous").disabled = false;
+        document.getElementById("b_first").removeAttribute("class");
+        document.getElementById("b_previous").removeAttribute("class");
     }
 
     if (current == images.length - 1) {
         document.getElementById("b_next").disabled = true;
         document.getElementById("b_last").disabled = true;
+        document.getElementById("b_next").setAttribute("class", "disabled");
+        document.getElementById("b_last").setAttribute("class", "disabled");
     } else {
         document.getElementById("b_next").disabled = false;
         document.getElementById("b_last").disabled = false;
+        document.getElementById("b_next").removeAttribute("class");
+        document.getElementById("b_last").removeAttribute("class");
     }
 }