aboutsummaryrefslogtreecommitdiffstats
path: root/themes/default
diff options
context:
space:
mode:
authorrvelices <rv-github@modusoptimus.com>2010-12-10 06:21:15 +0000
committerrvelices <rv-github@modusoptimus.com>2010-12-10 06:21:15 +0000
commitacd3b90822cf9104307b76fbde980fec40245f51 (patch)
tree245372e8c7dc9f34b89a40480458927a32e74977 /themes/default
parent20a45721f56377711cc99369fc742aed20cd0911 (diff)
first sprite usage on picture page
git-svn-id: http://piwigo.org/svn/trunk@8066 68402e56-0260-453c-a942-63ccdbb3a9ee
Diffstat (limited to 'themes/default')
-rw-r--r--themes/default/iconset.css79
-rw-r--r--themes/default/sprite.pngbin0 -> 4574 bytes
-rw-r--r--themes/default/template/include/datepicker.inc.tpl4
-rw-r--r--themes/default/template/picture.tpl6
-rw-r--r--themes/default/template/picture_toolbar.tpl113
-rw-r--r--themes/default/template/slideshow.tpl2
-rw-r--r--themes/default/theme.css4
7 files changed, 201 insertions, 7 deletions
diff --git a/themes/default/iconset.css b/themes/default/iconset.css
new file mode 100644
index 000000000..1bcc7c810
--- /dev/null
+++ b/themes/default/iconset.css
@@ -0,0 +1,79 @@
+.pwg-icon {
+ display: block; text-indent: -99999px; overflow: hidden; background-repeat: no-repeat;
+ width: 26px; height: 26px; background-image: url(sprite.png);
+}
+.pwg-button-text { display:none; }
+
+a.pwg-state-default, a.pwg-state-default:visited, a.pwg-state-default:hover {
+ text-decoration: none !important;
+}
+
+.pwg-state-disabled .pwg-icon {
+ opacity: .5;
+ -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";!
+ filter: alpha(opacity=50);
+}
+
+.pwg-button {
+ display: inline-block;
+}
+
+.pwg-icon-home {background-position: -26px 0}
+.pwg-icon-camera {background-position: -52px 0}
+.pwg-icon-calendar {background-position: -78px 0}
+.pwg-icon-save {background-position: -104px 0}
+
+.pwg-icon-arrow-n {background-position: 0 -26px}
+.pwg-icon-arrow-e {background-position: -26px -26px}
+.pwg-icon-arrow-s {background-position: -52px -26px}
+.pwg-icon-arrow-w {background-position: -78px -26px}
+
+.pwg-icon-arrowstop-n {background-position: 0 -52px}
+.pwg-icon-arrowstop-e {background-position: -26px -52px}
+.pwg-icon-arrowstop-s {background-position: -52px -52px}
+.pwg-icon-arrowstop-w {background-position: -78px -52px}
+
+.pwg-icon-caddie {background-position: 0 -78px}
+.pwg-icon-caddie-add {background-position: -26px -78px}
+.pwg-icon-caddie-del {background-position: -52px -78px}
+.pwg-icon-favorite {background-position: -78px -78px}
+.pwg-icon-favorite-add {background-position: -104px -78px}
+.pwg-icon-favorite-del {background-position: -130px -78px}
+
+.pwg-icon-camera-info {background-position: 0 -104px}
+
+.pwg-icon-slideshow {background-position: 0 -130px}
+.pwg-icon-play {background-position: -26px -130px}
+.pwg-icon-pause {background-position: -52px -130px}
+
+/*
+.pwg-icon-representative
+.pwg-icon-edit
+.pwg-icon-register
+.pwg-icon-lost-password
+.pwg-icon-cloud
+.pwg-icon-letters
+.pwg-icon-camera-calendar
+flat
+normal
+filter-plus
+filter-minus
+
+.pwg-icon-stop
+
+.pwg-icon-time
+.pwg-icon-time-plus
+.pwg-icon-time-minus
+.pwg-icon-repeat
+.pwg-icon-repeat-yes
+.pwg-icon-repeat-no
+*/
+
+
+A.pwg-button {
+ border: 1px solid blue;
+}
+
+.pwg-state-default:hover {
+ border-color: green;
+}
diff --git a/themes/default/sprite.png b/themes/default/sprite.png
new file mode 100644
index 000000000..f29704b98
--- /dev/null
+++ b/themes/default/sprite.png
Binary files differ
diff --git a/themes/default/template/include/datepicker.inc.tpl b/themes/default/template/include/datepicker.inc.tpl
index 9308fd3ff..636b6b9cb 100644
--- a/themes/default/template/include/datepicker.inc.tpl
+++ b/themes/default/template/include/datepicker.inc.tpl
@@ -4,10 +4,10 @@
{combine_script id='jquery.ui.datepicker' load='footer' require='jquery.ui' path='themes/default/js/ui/packed/ui.datepicker.packed.js'}
{combine_script id='datepicker.js' load='footer' require='jquery.ui.datepicker' path='themes/default/js/datepicker.js'}
-{assign var="datepicker_language" value="themes/default/js/ui/i18n/ui.datepicker-"|@cat:$lang_info.code|@cat:".js"}
+{assign var="datepicker_language" value="themes/default/js/ui/i18n/ui.datepicker-`$lang_info.code`.js"}
{if "PHPWG_ROOT_PATH"|@constant|@cat:$datepicker_language|@file_exists}
-{combine_script id="jquery.ui.datepicker-$lang_info.code" path=$datepicker_language}
+{combine_script id="jquery.ui.datepicker-$lang_info.code" load='footer' path=$datepicker_language}
{/if}
{combine_css path="themes/default/js/ui/theme/ui.datepicker.css"}
diff --git a/themes/default/template/picture.tpl b/themes/default/template/picture.tpl
index 220790059..4739b88b3 100644
--- a/themes/default/template/picture.tpl
+++ b/themes/default/template/picture.tpl
@@ -82,6 +82,8 @@ y.callService(
{include file='picture_nav_buttons.tpl'|@get_extent:'picture_nav_buttons'}
</div> <!-- imageToolBar -->
+{include file='picture_toolbar.tpl'}
+
<div id="theImage">
{$ELEMENT_CONTENT}
@@ -216,10 +218,6 @@ y.callService(
_pwgRatingAutoQueue.push( {ldelim}rootUrl: '{$ROOT_URL|@escape:"javascript"}', image_id: {$current.id},
updateRateText: "{'Update your rating'|@translate|@escape:'javascript'}", updateRateElement: document.getElementById("updateRate"),
ratingSummaryText: "{'%.2f (rated %d times)'|@translate|@escape:'javascript'}", ratingSummaryElement: document.getElementById("ratingSummary") {rdelim} );
- /*(function () {ldelim}
- var s = document.createElement('script'); s.type = 'text/javascript'; s.async = true; s.src = '{$ROOT_URL}themes/default/js/rating.js';
- var s0 = document.getElementsByTagName('script')[0]; s0.parentNode.insertBefore(s, s0);
- })();*/
</script>
</div>
</form>
diff --git a/themes/default/template/picture_toolbar.tpl b/themes/default/template/picture_toolbar.tpl
new file mode 100644
index 000000000..23a7e0fed
--- /dev/null
+++ b/themes/default/template/picture_toolbar.tpl
@@ -0,0 +1,113 @@
+<div class="pictureToolBar">
+ <div class="actionButtons" style="float:left">
+{if isset($U_SLIDESHOW_START)}
+ <a href="{$U_SLIDESHOW_START}" title="{'slideshow'|@translate}" class="pwg-state-default pwg-button" rel="nofollow">
+ <span class="pwg-icon pwg-icon-slideshow">&nbsp;</span><span class="pwg-button-text">{'slideshow'|@translate}</span>
+ </a>
+{/if}
+{if isset($U_METADATA)}
+ <a href="{$U_METADATA}" title="{'Show file metadata'|@translate}" class="pwg-state-default pwg-button" rel="nofollow">
+ <span class="pwg-icon pwg-icon-camera-info">&nbsp;</span><span class="pwg-button-text">{'Show file metadata'|@translate}</span>
+ </a>
+{/if}
+{if isset($current.U_DOWNLOAD)}
+ <a href="{$current.U_DOWNLOAD}" title="{'download this file'|@translate}" class="pwg-state-default pwg-button" rel="nofollow">
+ <span class="pwg-icon pwg-icon-save">&nbsp;</span><span class="pwg-button-text">{'download'|@translate}</span>
+ </a>
+{/if}
+{if isset($PLUGIN_PICTURE_ACTIONS)}{$PLUGIN_PICTURE_ACTIONS}{/if}
+{if isset($favorite)}
+ <a href="{$favorite.U_FAVORITE}" title="{if $favorite.IS_FAVORITE}{'delete this image from your favorites'|@translate}{else}{'add this image to your favorites'|@translate}{/if}" class="pwg-state-default pwg-button" rel="novollow">
+ <span class="pwg-icon pwg-icon-favorite-{if $favorite.IS_FAVORITE}del{else}add{/if}">&nbsp;</span><span class="pwg-button-text">{'Favorites'|@translate}</span>
+ </a>
+{/if}
+{if isset($U_SET_AS_REPRESENTATIVE)}
+ <a href="{$U_SET_AS_REPRESENTATIVE}" title="{'set as category representative'|@translate}" class="pwg-state-default pwg-button" rel="nofollow">
+ <span class="pwg-icon pwg-icon-representative">&nbsp;</span><span class="pwg-button-text">{'representative'|@translate}</span>
+ </a>
+{/if}
+{if isset($U_ADMIN)}
+ <a href="{$U_ADMIN}" title="{'Modify information'|@translate}" class="pwg-state-default pwg-button" rel="nofollow">
+ <span class="pwg-icon pwg-icon-edit">&nbsp;</span><span class="pwg-button-text">{'edit'|@translate}</span>
+ </a>
+{/if}
+{if isset($U_CADDIE)}{*caddie management BEGIN*}
+<script type="text/javascript">
+{literal}function addToCadie(aElement, rootUrl, id)
+{
+if (aElement.disabled) return;
+aElement.disabled=true;
+var y = new PwgWS(rootUrl);
+
+y.callService(
+ "pwg.caddie.add", {image_id: id} ,
+ {
+ onFailure: function(num, text) { alert(num + " " + text); document.location=aElement.href; },
+ onSuccess: function(result) { aElement.disabled = false; }
+ }
+ );
+}{/literal}
+</script>
+ <a href="{$U_CADDIE}" onclick="addToCadie(this, '{$ROOT_URL|@escape:'javascript'}', {$current.id}); return false;" title="{'add to caddie'|@translate}" class="pwg-state-default pwg-button" rel="nofollow">
+ <span class="pwg-icon pwg-icon-caddie-add">&nbsp;</span><span class="pwg-button-text">{'caddie'|@translate}</span>
+ </a>
+{/if}{*caddie management END*}
+ </div>
+
+ <div class="navigationButtons" style="float:right">
+{if $DISPLAY_NAV_BUTTONS or isset($slideshow)}
+{if isset($first)}
+ <a href="{$first.U_IMG}" title="{'First'|@translate} : {$first.TITLE}" class="pwg-state-default pwg-button">
+ <span class="pwg-icon pwg-icon-arrowstop-w">&nbsp;</span><span class="pwg-button-text">{'First'|@translate}</span>
+ </a>
+{else}
+ <span class="pwg-state-disabled pwg-button">
+ <span class="pwg-icon pwg-icon-arrowstop-w">&nbsp;</span><span class="pwg-button-text">{'First'|@translate}</span>
+ </span>
+{/if}
+{if isset($previous)}
+ <a href="{$previous.U_IMG}" title="{'Previous'|@translate} : {$previous.TITLE}" class="pwg-state-default pwg-button">
+ <span class="pwg-icon pwg-icon-arrow-w">&nbsp;</span><span class="pwg-button-text">{'Previous'|@translate}</span>
+ </a>
+{else}
+ <span class="pwg-state-disabled pwg-button">
+ <span class="pwg-icon pwg-icon-arrow-w">&nbsp;</span><span class="pwg-button-text">{'Previous'|@translate}</span>
+ </span>
+{/if}
+{if isset($slideshow.U_START_PLAY)}
+ <a href="{$slideshow.U_START_PLAY}" title="{'Play of slideshow'|@translate}" class="pwg-state-default pwg-button">
+ <span class="pwg-icon pwg-icon-play">&nbsp;</span><span class="pwg-button-text">{'Play of slideshow'|@translate}</span>
+ </a>
+{/if}
+{if isset($slideshow.U_STOP_PLAY)}
+ <a href="{$slideshow.U_STOP_PLAY}" title="{'Pause of slideshow'|@translate}" class="pwg-state-default pwg-button">
+ <span class="pwg-icon pwg-icon-pause">&nbsp;</span><span class="pwg-button-text">{'Pause of slideshow'|@translate}</span>
+ </a>
+{/if}
+{if isset($U_UP) and !isset($slideshow)}
+ <a href="{$U_UP}" title="{'Thumbnails'|@translate}" class="pwg-state-default pwg-button">
+ <span class="pwg-icon pwg-icon-arrow-n">&nbsp;</span><span class="pwg-button-text">{'Thumbnails'|@translate}</span>
+ </a>
+{/if}
+{if isset($next)}
+ <a href="{$next.U_IMG}" title="{'Next'|@translate} : {$next.TITLE}" class="pwg-state-default pwg-button pwg-button-icon-right">
+ <span class="pwg-icon pwg-icon-arrow-e">&nbsp;</span><span class="pwg-button-text">{'Next'|@translate}</span>
+ </a>
+{else}
+ <span class="pwg-state-disabled pwg-button pwg-button-icon-right">
+ <span class="pwg-icon pwg-icon-arrow-e">&nbsp;</span><span class="pwg-button-text">{'Next'|@translate}</span>
+ </span>
+{/if}
+{if isset($last)}
+ <a href="{$last.U_IMG}" title="{'Last'|@translate} : {$last.TITLE}" class="pwg-state-default pwg-button pwg-button-icon-right">
+ <span class="pwg-icon pwg-icon-arrowstop-e"></span><span class="pwg-button-text">{'Last'|@translate}</span>
+ </a>
+{else}
+ <span class="pwg-state-disabled pwg-button pwg-button-icon-right">
+ <span class="pwg-icon pwg-icon-arrowstop-e">&nbsp;</span><span class="pwg-button-text">{'Last'|@translate}</span>
+ </span>
+{/if}
+{/if}
+ </div>
+</div>
+ \ No newline at end of file
diff --git a/themes/default/template/slideshow.tpl b/themes/default/template/slideshow.tpl
index a310935a2..03e5225bf 100644
--- a/themes/default/template/slideshow.tpl
+++ b/themes/default/template/slideshow.tpl
@@ -14,6 +14,8 @@
{include file='picture_nav_buttons.tpl'|@get_extent:'picture_nav_buttons'}
</div>
+{include file='picture_toolbar.tpl'}
+
<div id="theImage">
{$ELEMENT_CONTENT}
{if isset($COMMENT_IMG)}
diff --git a/themes/default/theme.css b/themes/default/theme.css
index 87c685684..e0cf02373 100644
--- a/themes/default/theme.css
+++ b/themes/default/theme.css
@@ -1,3 +1,4 @@
+@import "iconset.css";
/**
* Menubar
*/
@@ -816,4 +817,5 @@ LEGEND {
}
#piwigoAbout {width:600px;margin:0 auto;}
-#linkToPiwigo {text-align:center;} \ No newline at end of file
+#linkToPiwigo {text-align:center;}
+