GNOME.org
 

Re: new HTML style

On Fri, 2005-08-05 at 15:11 -0400, Benjamin Kahn wrote:
> <xkahn> jimmac: yikes!
> <xkahn> jimmac: Your test has a bad default case.  (No styles)
> <xkahn> for the f-spot stuff.
> <xkahn> Also, once styled, the hide style/show style button has like a 2
> pixel target for clicking.
> <xkahn> very frustrating.

Alrighty, the stylesheets & .js should be fixed. Thanks for spotting
Ben.

cheers

-- 
Jakub Steiner <jimmac ximian com>

Index: icons/Makefile.am
===================================================================
RCS file: /cvs/gnome/f-spot/icons/Makefile.am,v
retrieving revision 1.13
diff -u -p -r1.13 Makefile.am
--- icons/Makefile.am	5 Aug 2005 04:32:23 -0000	1.13
+++ icons/Makefile.am	5 Aug 2005 20:46:59 -0000
@@ -18,6 +18,7 @@ noinst_DATA =					\
 	f-spot-stock_near.png			\
 	f-spot-stock_far.png			\
 	f-spot-question-mark.png		\
+	f-spot.js			\
 	f-spot-simple.css			\
 	f-spot-simple-white.css
 
Index: icons/f-spot-simple-white.css
===================================================================
RCS file: /cvs/gnome/f-spot/icons/f-spot-simple-white.css,v
retrieving revision 1.1
diff -u -p -r1.1 f-spot-simple-white.css
--- icons/f-spot-simple-white.css	24 Feb 2005 20:53:52 -0000	1.1
+++ icons/f-spot-simple-white.css	5 Aug 2005 20:46:59 -0000
@@ -2,10 +2,11 @@ body { 
   font-family: luxi sans, trebuchet ms, sans-serif;
   color: #999;
   margin: 12px;
+  font-size: 11pt;
 }
 
 .navi { 
-//  background: #f9f9f9;
+  /* background: #f9f9f9; */
   border: 1px solid #eee;
   padding: 6px;
   margin-left: auto;
@@ -21,13 +22,12 @@ body { 
   padding-right: 6px;
 }
 
-.navi #title { 
+#title { 
   color: Goldenrod;
   font-weight: bold;
+  font-size: 14pt;
   float: left;
-  margin: 0;
-  padding: 0;
-  margin-left: 3px;
+  margin: 4px;
 }
 
 div.navipage { 
@@ -87,14 +87,30 @@ div.photo div { 
   margin-top: 6px;
   font-size: 18px;
   font-family: Luxi Serif, Georgia, Helvetica;
-//  font-style: italic;
+  /* font-style: italic; */
 }
 
-div.footer { 
+div.footer  { 
   font-size: 10px;
-  position: absolute;
+  position: fixed;
   bottom: 12px;
-  text-align: center;
-  left: 0px;
-  right: 0px;
  }
+
+div#gallery_description {
+  text-align: center;
+}
+
+div#styleboxcontainer {
+	position: fixed;
+	bottom: 0px;
+	right: 8px;
+	font-size: 10px;
+	margin: 4px;
+	padding: 4px;
+}
+
+#stylebox ul {
+	list-style-type: none;
+	padding-left: 0px;
+}
+
Index: icons/f-spot-simple.css
===================================================================
RCS file: icons/f-spot-simple.css
diff -N icons/f-spot-simple.css
--- /dev/null	1 Jan 1970 00:00:00 -0000
+++ icons/f-spot-simple.css	5 Aug 2005 20:46:59 -0000
@@ -0,0 +1,191 @@
+/* 
+
+Default F-Spot HTML Gallery Stylesheet 
+Jakub 'jimmac' Steiner <jimmac novell com>
+
+*/
+
+body { 
+  font-family: luxi sans, trebuchet ms, sans-serif;
+  color: #888;
+  margin: 12px;
+	background-color: #3c3c3c;
+}
+
+.header {
+/*	position: relative; */
+	width: 100%;
+	margin-bottom: 20px;
+	padding: 0px;
+  border-bottom: 1px dotted #888;
+  font-size: 12px;
+}
+
+#title { 
+  color: #bbb;
+  font-weight: bold;
+  margin: 0;
+  padding: 0;
+  margin-left: 3px;
+	font-size: large;
+	letter-spacing: .5em;
+}
+
+div.navi {
+	float: right;
+	text-align: right;
+	margin-top: 3px;
+}
+
+div.navilabel {
+	padding: 3px 10px 0px 0px;
+}
+
+div.navi div {
+	float: left;
+	margin: 2px;
+}
+
+/* image pages navigation */
+div.navi a {
+	display: block;
+	width: 80px;
+	height: 17px;
+	-moz-border-radius: 3px;
+	border: 1px solid #444;
+	text-align: center;
+	padding-top: 3px;
+}
+
+div#index a {
+	background: transparent url("index.png") top left no-repeat;
+}
+
+div#prev a {
+	background: transparent url("prev.png") top left no-repeat;
+}
+
+div#next a {
+	background: transparent url("next.png") top left no-repeat;
+}
+
+div#index a:hover, div#prev a:hover, div#next a:hover {
+	text-decoration: none;
+  background-color: #c49200;
+	color: #333;
+}
+
+/* index page navigation */
+div.navi div.navipage a, div.navi div.navipage-current a {
+	display: block;
+	width: 20px;
+	height: 17px;
+	-moz-border-radius: 3px;
+	border: 1px solid #444;
+	text-align: center;
+	padding-top: 3px;
+}
+
+.navipage a:hover, .navipage-current a:hover {
+  text-decoration: none;
+  background-color: #c49200;
+	color: #333;
+}
+
+.navipage-current a {
+	background-color: #666;
+}
+
+a { 
+  text-decoration: none;
+  color: #c49200;
+}
+
+a:hover { 
+  text-decoration: underline;
+  color: #da1;
+}
+
+div.container1 {
+	width: 630px;
+	margin: auto;
+}
+
+div.photo {
+  text-align: center;
+  vertical-align: middle;
+  margin-top: 5%;
+}
+
+div.thumbs  {
+	clear: both;
+  padding: 6px;
+  text-align: center;
+}
+
+div.thumbs a {
+	margin: 6px;
+	display: block;
+	float: left;
+	width: 140px;
+	height: 140px;
+  border: 1px solid #727272;
+	background-color: #282828;
+	-moz-border-radius: 5px;
+}
+
+div.thumbs img { 
+  padding: 4px;
+  margin: 24px 3px;
+	border: 0px;
+}
+
+div#gallery_description {
+	clear: both;
+	padding: 10px 12px 0px 12px;
+}
+
+div.photo img { 
+  padding: 16px;
+  border: 1px solid #555;
+	-moz-border-radius: 7px;
+	background-color: #333;
+	margin: 20px;
+}
+
+div.thumbs a:hover {
+	background-color: #222;
+  border: 2px solid #c49200;
+	margin: 5px;
+}
+
+div.photo div { 
+  text-align: center;
+  margin-top: 6px;
+  font-size: 18px;
+  font-family: Luxi Serif, Georgia, Helvetica;
+//  font-style: italic;
+}
+
+div.footer { 
+	clear: both;
+	padding: 20px 10px 0px 10px;
+  font-size: 10px;
+	width: 640px;
+	margin: auto;
+ }
+
+div#styleboxcontainer {
+	position: fixed;
+	bottom: 0px;
+	right: 8px;
+	font-size: 10px;
+	margin: 4px;
+	padding: 4px;
+}
+
+#stylebox ul {
+	list-style-type: none;
+	padding-left: 0px;
+}
+
Index: icons/f-spot.js
===================================================================
RCS file: icons/f-spot.js
diff -N icons/f-spot.js
--- /dev/null	1 Jan 1970 00:00:00 -0000
+++ icons/f-spot.js	5 Aug 2005 20:46:59 -0000
@@ -0,0 +1,92 @@
+function setActiveStyleSheet(title) {
+   var i, a, main;
+   for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
+     if(a.getAttribute("rel").indexOf("style") != -1
+        && a.getAttribute("title")) {
+       a.disabled = true;
+       if(a.getAttribute("title") == title) a.disabled = false;
+     }
+   }
+   if (title!="") {
+      setCookie("theme", title);
+   }
+}
+
+function getInactiveStyleSheet() {
+  var i, a;
+  for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
+    if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title") && a.disabled) return a.getAttribute("title");
+  }
+  return null;
+}
+
+
+function setCookie(name, value, expires, path, domain, secure)
+{
+    document.cookie= name + "=" + escape(value) +
+        ((expires) ? "; expires=" + expires.toGMTString() : "") +
+        ((path) ? "; path=" + path : "") +
+        ((domain) ? "; domain=" + domain : "") +
+        ((secure) ? "; secure" : "");
+}
+
+function getCookie(name)
+{
+    var dc = document.cookie;
+    var prefix = name + "=";
+    var begin = dc.indexOf("; " + prefix);
+    if (begin == -1)
+    {
+        begin = dc.indexOf(prefix);
+        if (begin != 0) return null;
+    }
+    else
+    {
+        begin += 2;
+    }
+    var end = document.cookie.indexOf(";", begin);
+    if (end == -1)
+    {
+        end = dc.length;
+    }
+    return unescape(dc.substring(begin + prefix.length, end));
+}
+
+function deleteCookie(name, path, domain)
+{
+    if (getCookie(name))
+    {
+        document.cookie = name + "=" + 
+            ((path) ? "; path=" + path : "") +
+            ((domain) ? "; domain=" + domain : "") +
+            "; expires=Thu, 01-Jan-70 00:00:01 GMT";
+    }
+}
+
+
+function checkForTheme() {
+   var theme = getCookie('theme');
+
+   //alert(theme);   
+   if (theme) {
+      setActiveStyleSheet(theme);
+   }
+}
+
+// to hide and show the styles
+// inspired by www.wikipedia.org
+function toggle_stylebox() {
+    var stylebox = document.getElementById('stylebox');
+    var showlink=document.getElementById('showlink');
+    var hidelink=document.getElementById('hidelink');
+    if(stylebox.style.display == 'none') {
+	stylebox_was = stylebox.style.display; 
+	stylebox.style.display = '';
+	hidelink.style.display='';
+	showlink.style.display='none';
+    } else {
+	stylebox.style.display = stylebox_was;
+	hidelink.style.display='none';
+	showlink.style.display='';
+    }
+}
Index: src/FolderExport.cs
===================================================================
RCS file: /cvs/gnome/f-spot/src/FolderExport.cs,v
retrieving revision 1.13
diff -u -p -r1.13 FolderExport.cs
--- src/FolderExport.cs	5 Aug 2005 05:50:39 -0000	1.13
+++ src/FolderExport.cs	5 Aug 2005 20:47:00 -0000
@@ -533,8 +533,9 @@ namespace FSpot {
 	{
 		int current;
 		int perpage = 16;
-		//string stylesheet = "f-spot-simple-white.css";
 		string stylesheet = "f-spot-simple.css";
+		string altstylesheet = "f-spot-simple-white.css";
+		string javascript = "f-spot.js";
 		
 		public HtmlGallery (IPhotoCollection selection, string path, string name) : base (selection, path, name) 
 		{ 
@@ -570,6 +571,30 @@ namespace FSpot {
 				fs.Write (buffer, 0,  n);						    
 			
 			fs.Close ();
+			/* quick and stupid solution
+			   this should have been iterated over an array of stylesheets, really
+			*/
+			s = assembly.GetManifestResourceStream (altstylesheet);
+			fs = System.IO.File.Open (SubdirPath ("style", altstylesheet), System.IO.FileMode.Create);
+
+			buffer = new byte [8192];
+			n = 0;
+			while ((n = s.Read (buffer, 0, buffer.Length)) != 0)
+				fs.Write (buffer, 0,  n);						    
+			
+			fs.Close ();
+			/* Javascript for persistant style change */
+			MakeDir (SubdirPath ("script"));
+		  s = assembly.GetManifestResourceStream (javascript);
+			fs = System.IO.File.Open (SubdirPath ("script", javascript), System.IO.FileMode.Create);
+
+			buffer = new byte [8192];
+			n = 0;
+			while ((n = s.Read (buffer, 0, buffer.Length)) != 0)
+				fs.Write (buffer, 0,  n);						    
+			
+			fs.Close ();
+	
 		}
 		
 		public int PageCount {
@@ -624,6 +649,7 @@ namespace FSpot {
 			
 			WriteHeader (writer);
 			
+			writer.AddAttribute ("onload", "checkForTheme()");
 			writer.RenderBeginTag ("body");
 
 			writer.AddAttribute ("class", "container1");
@@ -671,7 +697,39 @@ namespace FSpot {
 
 			writer.RenderEndTag ();
 			
-			writer.RenderEndTag (); //container1
+		  //Style Selection Box
+			writer.AddAttribute ("id", "styleboxcontainer");
+			writer.RenderBeginTag ("div");
+			writer.AddAttribute ("id", "stylebox");
+			writer.AddAttribute ("style", "display: none;");
+			writer.RenderBeginTag ("div");
+			writer.RenderBeginTag("ul");
+			writer.RenderBeginTag("li");
+			writer.AddAttribute ("href", "#");
+			writer.AddAttribute ("title", "Dark");
+			writer.AddAttribute ("onclick", "setActiveStyleSheet('Dark')");
+			writer.RenderBeginTag("a");
+			writer.Write ("Dark");
+			writer.RenderEndTag (); //a
+			writer.RenderEndTag (); //li
+			writer.RenderBeginTag("li");
+			writer.AddAttribute ("href", "#");
+			writer.AddAttribute ("title", "Light");
+			writer.AddAttribute ("onclick", "setActiveStyleSheet('Light')");
+			writer.RenderBeginTag("a");
+			writer.Write ("Light");
+			writer.RenderEndTag (); //a
+			writer.RenderEndTag (); //li
+			writer.RenderEndTag (); //ul
+			writer.RenderEndTag (); //div stylebox
+			writer.RenderBeginTag ("div");
+			writer.Write ("<span class=\"style_toggle\">"); 
+			writer.Write ("<a href=\"javascript:toggle_stylebox()\">");
+			writer.Write ("<span id=\"showlink\">Show Styles</span><span id=\"hidelink\" ");
+			writer.Write ("style=\"display:none;\">Hide Styles</span></a></span>\n");
+			writer.RenderEndTag (); //div toggle
+			writer.RenderEndTag (); //div styleboxcontainer
+			writer.RenderEndTag (); //container1	
 
 			WriteFooter (writer);
 			
@@ -701,12 +759,19 @@ namespace FSpot {
 			writer.RenderBeginTag ("title");
 			writer.Write (gallery_name);
 			writer.RenderEndTag ();
-			
-			writer.AddAttribute ("type", "text/css");
-			writer.AddAttribute ("media", "screen");
-			writer.RenderBeginTag ("style");
-			writer.Write (String.Format ("@import url( {0} );",  "style/" + stylesheet));
-			writer.RenderEndTag ();
+
+			writer.Write ("<link type=\"text/css\" rel=\"stylesheet\" href=\"");
+			writer.Write (String.Format ("{0}", "style/" + stylesheet));
+			writer.Write ("\" title=\"Dark\" media=\"screen\" />\n");
+
+			writer.Write ("<link type=\"text/css\" rel=\"prefetch ") ;
+			writer.Write ("alternate stylesheet\" href=\"");
+			writer.Write (String.Format ("{0}", "style/" + altstylesheet));
+			writer.Write ("\" title=\"Light\" media=\"screen\" />\n");
+
+			writer.Write ("<script src=\"script/" + javascript + "\"");
+			writer.Write (" type=\"text/javascript\"></script>\n");
+
 			writer.RenderEndTag ();
 		}
 		
@@ -737,8 +802,11 @@ namespace FSpot {
 			writer.RenderBeginTag ("html");
 			WriteHeader (writer);
 			
+			writer.AddAttribute ("onload", "checkForTheme()");
 			writer.RenderBeginTag ("body");
+			
 
+			
 			writer.AddAttribute ("class", "container1");
 			writer.RenderBeginTag ("div");
 
@@ -796,7 +864,39 @@ namespace FSpot {
 			writer.RenderBeginTag ("div");
 			writer.Write (description);
 			writer.RenderEndTag (); //description
-
+			
+      //Style Selection Box
+			writer.AddAttribute ("id", "styleboxcontainer");
+			writer.RenderBeginTag ("div");
+			writer.AddAttribute ("id", "stylebox");
+			writer.AddAttribute ("style", "display: none;");
+			writer.RenderBeginTag ("div");
+			writer.RenderBeginTag("ul");
+			writer.RenderBeginTag("li");
+			writer.AddAttribute ("href", "#");
+			writer.AddAttribute ("title", "Dark");
+			writer.AddAttribute ("onclick", "setActiveStyleSheet('Dark')");
+			writer.RenderBeginTag("a");
+			writer.Write ("Dark");
+			writer.RenderEndTag (); //a
+			writer.RenderEndTag (); //li
+			writer.RenderBeginTag("li");
+			writer.AddAttribute ("href", "#");
+			writer.AddAttribute ("title", "Light");
+			writer.AddAttribute ("onclick", "setActiveStyleSheet('Light')");
+			writer.RenderBeginTag("a");
+			writer.Write ("Light");
+			writer.RenderEndTag (); //a
+			writer.RenderEndTag (); //li
+			writer.RenderEndTag (); //ul
+			writer.RenderEndTag (); //div stylebox
+			writer.RenderBeginTag ("div");
+			writer.Write ("<span class=\"style_toggle\">"); 
+			writer.Write ("<a href=\"javascript:toggle_stylebox()\">");
+			writer.Write ("<span id=\"showlink\">Show Styles</span><span id=\"hidelink\" ");
+			writer.Write ("style=\"display:none;\">Hide Styles</span></a></span>\n");
+			writer.RenderEndTag (); //div toggle
+			writer.RenderEndTag (); //div styleboxcontainer
 			writer.RenderEndTag (); //container1
 
 			WriteFooter (writer);
Index: src/Makefile.am
===================================================================
RCS file: /cvs/gnome/f-spot/src/Makefile.am,v
retrieving revision 1.36
diff -u -p -r1.36 Makefile.am
--- src/Makefile.am	5 Aug 2005 04:32:23 -0000	1.36
+++ src/Makefile.am	5 Aug 2005 20:47:01 -0000
@@ -129,6 +129,7 @@ RESOURCES =										\
 	-resource:$(top_srcdir)/icons/f-spot-fullscreen.png,f-spot-fullscreen.png	\
 	-resource:$(top_srcdir)/icons/f-spot-simple-white.css,f-spot-simple-white.css	\
 	-resource:$(top_srcdir)/icons/f-spot-simple.css,f-spot-simple.css	\
+	-resource:$(top_srcdir)/icons/f-spot.js,f-spot.js	\
 	-resource:$(srcdir)/f-spot.glade,f-spot.glade
 
 fspotlibdir = $(libdir)/f-spot
[Date Prev][Date Next]   [Thread Prev][Thread Next]   [Thread Index] [Date Index] [Author Index]