[themes] Use CSS3 drop-shadows.

This commit is contained in:
Solomon Peachy 2012-12-26 12:30:44 -05:00
parent ee58f52f5d
commit a8d9176a9f
6 changed files with 340 additions and 40 deletions

View File

@ -10,6 +10,7 @@ v2.38 (Unreleased)
[misc] Get rid of "IE7" compatibility library.
[themes] Use CSS3 to style radio buttons and checkboxes
[themes] Use CSS3 drop-shadows for images.
v2.37.1 (December 3, 2012)

View File

@ -755,3 +755,11 @@ hr {
background-color: #dddddd;
color: #dddddd;
}
.img-shadow {
margin: 2em 0 1em 2em !important;
}
.img-shadow img {
box-shadow: 5px 5px 5px #999;
}

View File

@ -17,34 +17,17 @@
// along with this program; if not, write to the Free Software
// Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA
function theme_display_photo($photo_url, $link_url) {
function theme_display_photo($photo_url, $link_url) {
global $theme;
$width = "100%";
$height = "100%";
print "<table cellpadding=\"0\" cellspacing=\"0\" border=\"0\">\n";
print "<tr>\n";
print "<td align=\"right\" valign=\"bottom\"><img height=\"7\" src=\"$theme/shadow.top.left.gif\" alt=\"\"/></td>\n";
print "<td align=\"center\" valign=\"bottom\"><img height=\"7\" src=\"$theme/shadow.top.gif\" width=\"$width\" alt=\"\"/></td>\n";
print "<td align=\"left\" valign=\"bottom\"><img height=\"7\" src=\"$theme/shadow.top.right.gif\" alt=\"\"/></td>\n";
print "</tr>\n";
print "<tr>\n";
print "<td align=\"right\" valign=\"middle\" background=\"$theme/shadow.left.gif\" width=\"7\" height=\"$height\"></td>\n";
print "<td align=\"center\" valign=\"middle\" nowrap=\"nowrap\">";
print "<div class=\"img-shadow\">";
if ($link_url == "")
print "<img src=\"$photo_url\" alt=\"\"/>";
print "<img src=\"$photo_url\" alt=\"\" border=\"0\" />";
else
print "<a class=\"nodecor\" href=\"$link_url\"><img src=\"$photo_url\" border=\"0\" alt=\"\"/></a>";
print "</td>\n";
print "<td align=\"left\" valign=\"middle\" background=\"$theme/shadow.right.gif\" width=\"7\" height=\"$height\"></td>\n";
print "</tr>\n";
print "<tr>\n";
print "<td align=\"right\" valign=\"top\"><img height=\"13\" src=\"$theme/shadow.bottom.left.gif\" alt=\"\"/></td>\n";
print "<td align=\"center\" valign=\"top\"><img height=\"13\" src=\"$theme/shadow.bottom.gif\" width=\"$width\" alt=\"\"/></td>\n";
print "<td align=\"left\" valign=\"top\"><img height=\"13\" src=\"$theme/shadow.bottom.right.gif\" alt=\"\"/></td>\n";
print "</tr>\n";
print "</table>\n";
print "</div>";
}
function theme_display_selectButton() {

View File

@ -0,0 +1,323 @@
<?php
// Copyright (C) 2002-2006 Balint Kis (balint-i-s.net)
// Copyright (C) 2005-2010 Solomon Peachy (pizza.org)
// This program is free software; you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by
// the Free Software Foundation; either version 3 of the License, or
// (at your option) any later version.
// This program is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU General Public License for more details.
// You should have received a copy of the GNU General Public License
// along with this program; if not, write to the Free Software
// Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA
function theme_display_photo($photo_url, $link_url) {
global $theme;
print "<div class=\"img-shadowb\">";
if ($link_url == "")
print "<img src=\"$photo_url\" alt=\"\" border=\"0\" />";
else
print "<a class=\"nodecor\" href=\"$link_url\"><img src=\"$photo_url\" border=\"0\" alt=\"\"/></a>";
print "</div>";
}
function theme_display_selectButton() {
global $theme;
global $strings;
global $photo_view;
$text = $strings['generic_select_toggle'];
$name = "select";
$type = "button";
$title = $text;
if ($photo_view == "slide") {
$extra = " onclick=\"javascript: toggleChecksSlide();\" ";
} else {
$extra = " onclick=\"javascript: toggleChecksList();\" ";
}
print "<button name=\"$name\" class=\"gfx\" type=\"$type\" title=\"$title\" $extra ><div class=\"gfx_button\"><img src=\"$theme/button.left.png\" alt=\"\"/><span id=\"selectButton\">$text</span><img src=\"$theme/button.right.png\" alt=\"\"/></div></button>";
}
function theme_display_navigator_box_top($index, $data, $width) {
global $theme;
print "<div class=\"navigator_box\">";
print "<table align=\"center\" class=\"box\" width=\"$width\">\n";
print "<tr>\n";
print "<td align=\"right\" valign=\"bottom\"><img src=\"$theme/navigator.left.corner.gif\" width=\"8\" height=\"25\" alt=\"\" /></td>\n";
print "<td align=\"center\" valign=\"middle\" width=\"$width\" height=\"25\" style=\"background-image:url($theme/navigator.top.gif)\">";
print "<table align=\"center\" cellpadding=\"0\" cellspacing=\"0\" border=\"0\">\n<tr>\n";
print "<td width=\"10\"><img src=\"$theme/navigator.left.gif\" alt=\"\"/></td>\n";
$current_index = 1;
foreach ($data as $item) {
if ($current_index == $index) {
$here = "class=\"navibar_a\" ";
} else {
$here = "class=\"navibar\" ";
}
print emit_td(emit_a($item['link'], $item['alt'], "title=\"$item[alt]\""), "$here width=\"10\"");
$current_index++;
}
print "<td width=\"10\"><img src=\"$theme/navigator.right.gif\" alt=\"\"/></td>\n";
print "</tr></table>\n";
print "</td>\n";
print "<td align=\"left\" valign=\"bottom\"><img src=\"$theme/navigator.right.corner.gif\" width=\"8\" height=\"25\" alt=\"\"/></td>\n";
print "</tr>\n";
print "<tr>\n";
print "<td align=\"right\" valign=\"middle\" width=\"8\" style=\"background-image:url($theme/box.left.gif)\"></td>\n";
print "<td align=\"center\" valign=\"middle\">\n";
}
function theme_display_navigator_box_bottom($width) {
global $theme;
print "</td>\n";
print "<td align=\"left\" valign=\"middle\" width=\"8\" style=\"background-image:url($theme/box.right.gif)\"></td>\n";
print "</tr>\n";
print "<tr>\n";
print "<td align=\"right\" valign=\"top\"><img src=\"$theme/box.bottom.left.gif\" width=\"8\" height=\"8\" alt=\"\"/></td>\n";
print "<td align=\"center\" valign=\"top\" width=\"$width\"><img src=\"$theme/box.bottom.gif\" width=\"$width\" height=\"8\" alt=\"\"/></td>\n";
print "<td align=\"left\" valign=\"top\"><img src=\"$theme/box.bottom.right.gif\" width=\"8\" height=\"8\" alt=\"\"/></td>\n";
print "</tr>\n";
print "</table>\n";
print "</div>";
}
function theme_display_slide($cell_counter, $checks, $content, $value) {
print "<div class=\"photo_slide_out\" id=\"slide_cb$cell_counter\" ". ($checks ? "onclick=\"checkChangeSlide('$cell_counter');\"" : "") .">";
print "<div class=\"photo_slide_in\">";
print $content;
if ($checks) {
print "<input class=\"slide_cb\" type=\"checkbox\" name=\"selection[]\" id=\"cb$cell_counter\" value=\"$value\"/>";
}
print "</div></div>";
}
function site_navigator($sub_menu) {
global $theme;
global $po_user;
global $strings;
global $site_url;
global $site_title;
$type = $po_user['type'];
print "<div class=\"navigator2\">";
if ($type >= PO_USER_TYPE_CLIENT) {
print "<ul>";
}
if ($type >= PO_USER_TYPE_CLIENT) {
if ($sub_menu == 5) {
$here = "class=\"menu_here\" ";
} else {
$here = "";
}
if ($type >= PO_USER_TYPE_USER) {
print "<li $here>".emit_a(generate_link('user', $po_user['username']), $strings['generic_my_folders'], $here)."</li>";
} else {
print "<li $here>".emit_a(generate_link('user', $po_user['username']), $strings['generic_my_albums'], $here)."</li>";
}
if ($sub_menu == 8) {
$here = "class=\"menu_here\" ";
} else {
$here = "";
}
print "<li $here><a $here href=\"my.datebook.php\" title=\"".$strings['generic_my_datebook']."\">".$strings['generic_my_datebook']."</a></li>";
}
if ($type >= PO_USER_TYPE_USER) {
if ($sub_menu == 6) {
$here = "class=\"menu_here\" ";
} else {
$here = "";
}
print "<li $here><a $here href=\"my.profile.php\" title=\"".$strings['generic_my_profile']."\">".$strings['generic_my_profile']."</a></li>";
}
if ($type >= PO_USER_TYPE_CLIENT) {
if ($sub_menu == 7) {
$here = "class=\"menu_here\" ";
} else {
$here = "";
}
print "<li $here><a $here href=\"my.settings.php\" title=\"".$strings['generic_my_settings']."\">".$strings['generic_my_settings']."</a></li>";
}
if ($type >= PO_USER_TYPE_USER) {
if ($sub_menu == 10) {
$here = "class=\"menu_here\" ";
} else {
$here = "";
}
print "<li $here><a $here href=\"my.tools.php\" title=\"".$strings['generic_my_tools']."\">".$strings['generic_my_tools']."</a></li>";
}
if ($type == PO_USER_TYPE_ADMIN) {
if ($sub_menu == 9) {
$here = "class=\"menu_here\" ";
} else {
$here = "";
}
print "<li $here><a $here href=\"admin.php\" title=\"".$strings['generic_admin']."\">".$strings['generic_admin']."</a></li>";
}
if ($type >= PO_USER_TYPE_CLIENT) {
print "</ul>";
}
print "</div>";
print "<div class=\"navigator3\">";
print "<ul>";
if ($sub_menu == 4) {
$here = "class=\"menu_here\" ";
} else {
$here = "";
}
print "<li $here><a $here href=\"help.php\" title=\"".$strings['generic_help']."\">".$strings['generic_help']."</a></li>";
if ($sub_menu == 3) {
$here = "class=\"menu_here\" ";
} else {
$here = "";
}
if ($type == PO_USER_TYPE_DISABLED) {
print "<li $here><a $here href=\"login.php\" title=\"".$strings['generic_login']."\">".$strings['generic_login']."</a></li>";
} else {
print "<li $here><a $here href=\"login.php\" title=\"".$strings['generic_logout']."\">".$strings['generic_logout']."</a></li>";
}
if ($sub_menu == 2) {
$here = "class=\"menu_here\" ";
} else {
$here = "";
}
print "<li $here><a $here href=\"search.php\" title=\"".$strings['generic_search']."\">".$strings['generic_search']."</a></li>";
if ($sub_menu == 1) {
$here = "class=\"menu_here\" ";
} else {
$here = "";
}
print "<li $here>".emit_a(generate_link('user', ''), $strings['generic_users'], " $here title=\"".$strings['generic_users']."\"")."</li>";
print "</ul>";
print "</div>\n";
}
$thm_elem['javascript'] = "<script language=\"JavaScript\" type=\"text/javascript\" src=\"$theme/checkbox.js\"></script>";
/* The theme elements */
$thm_elem['shortcut_icon'] = "<link rel=\"shortcut icon\" href=\"$theme/icon.jpg\" />\n";
$thm_elem['stylesheets'] = "<link rel=\"stylesheet\" type=\"text/css\" media=\"screen\" href=\"$theme/screen.css\" />\n<link rel=\"stylesheet\" type=\"text/css\" media=\"all\" href=\"$theme/jscalendar/theme.css\" title=\"win2k-cold-1\" />";
$thm_elem['site_logo'] = "<a class=\"nodecor\" href=\"$site_url\"><img src=\"$theme/logo.gif\" title=\"Click here to visit the $site_title Web Site\" alt=\"Photo Organizer Logo\"/></a>";
/* Buttons */
/* name
type = [ reset, button, submit ]
title
key
*/
function make_button($name, $type, $title, $key = FALSE, $text = FALSE, $extra = "") {
global $theme;
if ($text === FALSE) {
$text = $title;
}
$button = "<button name=\"$name\" class=\"gfx\" type=\"$type\" title=\"$title\" $extra ";
if ($key != FALSE)
$button .= " accesskey=\"$key\" ";
$button .= "><div class=\"gfx_button\"><img src=\"$theme/button.left.png\" alt=\"\"/>$text<img src=\"$theme/button.right.png\" alt=\"\"/></div></button>";
return $button;
}
function theme_generate_buttons() {
global $strings;
global $thm_elem;
global $theme;
global $po_options;
/* Submit buttons */
$thm_elem['button.search'] = make_button("search", "submit", $strings['generic_search'], "S");
$thm_elem['button.register'] = make_button("register", "submit", $strings['generic_register'], "S");
$thm_elem['button.save.changes'] = make_button("save_changes", "submit", $strings['generic_save_changes'], "S");
$thm_elem['button.confirm.delete'] = make_button("confirm_delete", "submit", $strings['generic_confirm_delete'], "S");
$thm_elem['button.confirm.subscription'] = make_button("confirm_subscription", "submit", $strings['generic_confirm_subscription'], "S");
$thm_elem['button.subscribe'] = make_button("subscribe", "submit", $strings['users_subscribe_prompt'], "S");
$thm_elem['button.make_client'] = make_button("make_client", "submit", $strings['users_make_client'], "S");
$thm_elem['button.login'] = make_button("login", "submit", $strings['generic_login'], "S");
$thm_elem['button.logout'] = make_button("logout", "submit", $strings['generic_logout'], "S");
$thm_elem['button.submit'] = make_button("submit", "submit", $strings['generic_submit'], "S");
$thm_elem['button.add'] = make_button("add", "submit", $strings['generic_add'], "S");
$thm_elem['button.add.photos'] = make_button("add_photos", "submit", $strings['generic_add_photos'], "S");
$thm_elem['button.add.duplicate'] = make_button("add_duplicate", "submit", $strings['generic_add_duplicate'], "S");
$thm_elem['button.add.manufacturer'] = make_button("add_manufacturer", "submit", $strings['generic_add_manufacturer'], "S");
/* Other buttons */
$thm_elem['button.go.to.f'] = make_button("go_to_f", "submit", $strings['generic_go_to_f']);
$thm_elem['button.go.to.a'] = make_button("go_to_a", "submit", $strings['generic_go_to_a']);
$thm_elem['button.link.to.a'] = make_button("link_to_a", "submit", $strings['generic_link_to_a']);
$thm_elem['button.move.to.a'] = make_button("move_to_a", "submit", $strings['generic_move_to_a']);
$thm_elem['button.move.to.f'] = make_button("move_to_f", "submit", $strings['generic_move_to_f']);
$thm_elem['button.set.thumb.f'] = make_button("thumb_f", "submit", $strings['generic_set_thumb_f']);
$thm_elem['button.set.thumb.a'] = make_button("thumb_a", "submit", $strings['generic_set_thumb_a']);
$thm_elem['button.print'] = make_button("print_req", "submit", $strings['generic_print']);
$thm_elem['button.export'] = make_button("export_req", "submit", $strings['generic_export']);
$thm_elem['button.add.to.spool'] = make_button("spool_req", "submit", $strings['generic_add_to_spool']);
$thm_elem['button.bulk.update'] = make_button("bulk_update_req", "submit", $strings['generic_bulk_update']);
$thm_elem['button.per.page'] = make_button("per_page_req", "submit", $strings['generic_per_page']);
$thm_elem['button.order.by'] = make_button("order_by_req", "submit", $strings['generic_order_by']);
$thm_elem['button.rotate'] = make_button("rotate_req", "submit", $strings['generic_rotate']);
$thm_elem['button.set.as.watermark'] = make_button("watermark_req", "submit", $strings['generic_set_as_watermark']);
$thm_elem['button.delete_s'] = make_button("delete_req", "submit", $strings['generic_delete']);
$thm_elem['button.empty.trash'] = make_button("empty_trash_req", "submit", $strings['generic_empty_trash']);
// These are special:
// 'button.clear' resets the form to its initial state.
// 'button.cancel' goes back to the referring page.
// 'button.back' goes back to the referring page. (used for info/no-op pages)
$thm_elem['button.clear'] = make_button("clear", "reset", $strings['generic_clear'], "C");
$thm_elem['button.cancel'] = make_button("cancel", "button", $strings['generic_cancel'], "C", FALSE, "onclick=\"javascript: history.go(-1);\"");
$thm_elem['button.back'] = make_button("back", "button", $strings['generic_back'], "C", FALSE, "onclick=\"javascript: history.go(-1);\"");
$thm_elem['button.back.2'] = make_button("back", "button", $strings['generic_back'], "C", FALSE, "onclick=\"javascript: history.go(-2);\"");
// These buttons need arguments
$thm_elem['button.list.view'] = make_button("list_view", "button", $strings['generic_list_view'], "V", FALSE, "onclick=\"javascript: location.href = '%s';\"");
$thm_elem['button.slide.view'] = make_button("slide_view", "button", $strings['generic_slide_view'], "V", FALSE, "onclick=\"javascript: location.href = '%s';\"");
$thm_elem['button.edit'] = make_button("edit", "button", $strings['generic_edit'], FALSE, FALSE, "onclick=\"javascript: location.href = '%s';\"");
$thm_elem['button.delete'] = make_button("delete", "button", $strings['generic_delete'], FALSE, FALSE, "onclick=\"javascript: location.href = '%s';\"");
// These are all special, because they're for navigation.
$thm_elem['button.option.a'] = "<a class=\"nodecor\" href=\"%s\" title=\"%s\"><img src=\"$theme/button.option.a.gif\" alt=\"*\"/></a>";
$thm_elem['button.option'] = "<a class=\"nodecor\" href=\"%s\" title=\"%s\"><img src=\"$theme/button.option.gif\" alt=\"O\"/></a>";
$thm_elem['button.first'] = "<a class=\"nodecor\" href=\"%s\" title=\"".$strings['generic_first']." %s\" accesskey=\"F\" ><img src=\"$theme/button.first.gif\" alt=\"&lt;|\"/></a>";
$thm_elem['button.previous'] = "<a class=\"nodecor\" href=\"%s\" title=\"".$strings['generic_previous']." %s\" accesskey=\"B\" ><img src=\"$theme/button.previous.gif\" alt=\"&lt;\" %s /></a>";
$thm_elem['button.previous2'] = "<a class=\"nodecor\" href=\"%s\" title=\"".$strings['generic_skip']." %s\" accesskey=\"B\" ><img src=\"$theme/button.previous2.gif\" alt=\"&lt;\" %s /></a>";
$thm_elem['button.next'] = "<a class=\"nodecor\" href=\"%s\" title=\"".$strings['generic_next']." %s\" accesskey=\"N\" ><img src=\"$theme/button.next.gif\" alt=\"&gt;\" %s /></a>";
$thm_elem['button.next2'] = "<a class=\"nodecor\" href=\"%s\" title=\"".$strings['generic_skip']." %s\" accesskey=\"N\" ><img src=\"$theme/button.next2.gif\" alt=\"&gt;\" %s /></a>";
$thm_elem['button.last'] = "<a class=\"nodecor\" href=\"%s\" title=\"".$strings['generic_last']." %s\" accesskey=\"L\" ><img src=\"$theme/button.last.gif\" alt=\"&gt;|\"/></a>";
/* Tooltip width max; equal to half the minimum page width */
$po_options['tooltip_width'] = 400;
}
$generate_i18n_data[] = "theme_generate_buttons";
?>

View File

@ -0,0 +1 @@
pizza@stuffed.shaftnet.org.28191:1353853745

View File

@ -776,22 +776,6 @@ hr {
margin: 2em 0 1em 2em !important;
}
/*
.img-shadow {
float:left;
background: url(shadowAlpha.png) no-repeat bottom right !important;
background: url(shadow.gif) no-repeat bottom right;
margin: 2em 0 1em 2em !important;
margin: 2em 0 1em 1em;
}
.img-shadow img {
display: block;
position: relative;
background: url(shadowAlpha.png) no-repeat bottom right !important;
background: url(shadow.gif) no-repeat bottom right;
margin: -6px 6px 6px -6px;
padding: 2px;
box-shadow: 5px 5px 5px #666;
}
*/