Re: new HTML style
- From: Jakub Steiner <jimmac ximian com>
- To: Larry Ewing <lewing novell com>
- Cc: f-spot-list gnome org
- Subject: Re: new HTML style
- Date: Fri, 05 Aug 2005 20:45:32 +0200
On Thu, 2005-08-04 at 23:12 -0500, Larry Ewing wrote:
> This is really nice Jakub, can you fix up the white style so that it
> works with the generated html as well?
Hi Larry,
this fixes the light stylesheet for the new HTML changes. Additionally,
it implements a javascript style toggling that uses cookies to store the
preference during session.
I'd appreciate if you could clean it up a bit, since my cut'n'paste C#
can be scary. It would be nice if we
* used a separate subdir for stylesheets and javascript and stop
abusing icons/
* had stylesheets in an array and iterate over it to copy them
over during export. We may want to ship more than the two we
have now.
Preview at http://jimmac.musichall.cz/stuff/private/Testing%20F-Spot/
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 18:39:40 -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 18:39:41 -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,10 +87,10 @@ 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;
bottom: 12px;
@@ -98,3 +98,22 @@ div.footer {
left: 0px;
right: 0px;
}
+
+div#gallery_description {
+ text-align: center;
+}
+
+div#styleboxcontainer {
+ position: absolute;
+ 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 18:39:41 -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: absolute;
+ 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 18:39:41 -0000
@@ -0,0 +1,95 @@
+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=="undefined") {
+ var theme = "none";
+ } else {
+ 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 18:39:42 -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 18:39:42 -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]
