Skip to content

Commit acd3b90

Browse files
author
rvelices
committed
first sprite usage on picture page
git-svn-id: http://piwigo.org/svn/trunk@8066 68402e56-0260-453c-a942-63ccdbb3a9ee
1 parent 20a4572 commit acd3b90

7 files changed

Lines changed: 201 additions & 7 deletions

File tree

‎themes/default/iconset.css‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
.pwg-icon {
2+
display: block; text-indent: -99999px; overflow: hidden; background-repeat: no-repeat;
3+
width: 26px; height: 26px; background-image: url(sprite.png);
4+
}
5+
.pwg-button-text { display:none; }
6+
7+
a.pwg-state-default, a.pwg-state-default:visited, a.pwg-state-default:hover {
8+
text-decoration: none !important;
9+
}
10+
11+
.pwg-state-disabled .pwg-icon {
12+
opacity: .5;
13+
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";!
14+
filter: alpha(opacity=50);
15+
}
16+
17+
.pwg-button {
18+
display: inline-block;
19+
}
20+
21+
.pwg-icon-home {background-position: -26px 0}
22+
.pwg-icon-camera {background-position: -52px 0}
23+
.pwg-icon-calendar {background-position: -78px 0}
24+
.pwg-icon-save {background-position: -104px 0}
25+
26+
.pwg-icon-arrow-n {background-position: 0 -26px}
27+
.pwg-icon-arrow-e {background-position: -26px -26px}
28+
.pwg-icon-arrow-s {background-position: -52px -26px}
29+
.pwg-icon-arrow-w {background-position: -78px -26px}
30+
31+
.pwg-icon-arrowstop-n {background-position: 0 -52px}
32+
.pwg-icon-arrowstop-e {background-position: -26px -52px}
33+
.pwg-icon-arrowstop-s {background-position: -52px -52px}
34+
.pwg-icon-arrowstop-w {background-position: -78px -52px}
35+
36+
.pwg-icon-caddie {background-position: 0 -78px}
37+
.pwg-icon-caddie-add {background-position: -26px -78px}
38+
.pwg-icon-caddie-del {background-position: -52px -78px}
39+
.pwg-icon-favorite {background-position: -78px -78px}
40+
.pwg-icon-favorite-add {background-position: -104px -78px}
41+
.pwg-icon-favorite-del {background-position: -130px -78px}
42+
43+
.pwg-icon-camera-info {background-position: 0 -104px}
44+
45+
.pwg-icon-slideshow {background-position: 0 -130px}
46+
.pwg-icon-play {background-position: -26px -130px}
47+
.pwg-icon-pause {background-position: -52px -130px}
48+
49+
/*
50+
.pwg-icon-representative
51+
.pwg-icon-edit
52+
.pwg-icon-register
53+
.pwg-icon-lost-password
54+
.pwg-icon-cloud
55+
.pwg-icon-letters
56+
.pwg-icon-camera-calendar
57+
flat
58+
normal
59+
filter-plus
60+
filter-minus
61+
62+
.pwg-icon-stop
63+
64+
.pwg-icon-time
65+
.pwg-icon-time-plus
66+
.pwg-icon-time-minus
67+
.pwg-icon-repeat
68+
.pwg-icon-repeat-yes
69+
.pwg-icon-repeat-no
70+
*/
71+
72+
73+
A.pwg-button {
74+
border: 1px solid blue;
75+
}
76+
77+
.pwg-state-default:hover {
78+
border-color: green;
79+
}

‎themes/default/sprite.png‎

4.47 KB
Loading

‎themes/default/template/include/datepicker.inc.tpl‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,10 @@
44
{combine_script id='jquery.ui.datepicker' load='footer' require='jquery.ui' path='themes/default/js/ui/packed/ui.datepicker.packed.js'}
55
{combine_script id='datepicker.js' load='footer' require='jquery.ui.datepicker' path='themes/default/js/datepicker.js'}
66

7-
{assign var="datepicker_language" value="themes/default/js/ui/i18n/ui.datepicker-"|@cat:$lang_info.code|@cat:".js"}
7+
{assign var="datepicker_language" value="themes/default/js/ui/i18n/ui.datepicker-`$lang_info.code`.js"}
88

99
{if "PHPWG_ROOT_PATH"|@constant|@cat:$datepicker_language|@file_exists}
10-
{combine_script id="jquery.ui.datepicker-$lang_info.code" path=$datepicker_language}
10+
{combine_script id="jquery.ui.datepicker-$lang_info.code" load='footer' path=$datepicker_language}
1111
{/if}
1212

1313
{combine_css path="themes/default/js/ui/theme/ui.datepicker.css"}

‎themes/default/template/picture.tpl‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -82,6 +82,8 @@ y.callService(
8282
{include file='picture_nav_buttons.tpl'|@get_extent:'picture_nav_buttons'}
8383
</div> <!-- imageToolBar -->
8484
85+
{include file='picture_toolbar.tpl'}
86+
8587
<div id="theImage">
8688
{$ELEMENT_CONTENT}
8789
@@ -216,10 +218,6 @@ y.callService(
216218
_pwgRatingAutoQueue.push( {ldelim}rootUrl: '{$ROOT_URL|@escape:"javascript"}', image_id: {$current.id},
217219
updateRateText: "{'Update your rating'|@translate|@escape:'javascript'}", updateRateElement: document.getElementById("updateRate"),
218220
ratingSummaryText: "{'%.2f (rated %d times)'|@translate|@escape:'javascript'}", ratingSummaryElement: document.getElementById("ratingSummary") {rdelim} );
219-
/*(function () {ldelim}
220-
var s = document.createElement('script'); s.type = 'text/javascript'; s.async = true; s.src = '{$ROOT_URL}themes/default/js/rating.js';
221-
var s0 = document.getElementsByTagName('script')[0]; s0.parentNode.insertBefore(s, s0);
222-
})();*/
223221
</script>
224222
</div>
225223
</form>

‎themes/default/template/picture_toolbar.tpl‎

Lines changed: 113 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
<div class="pictureToolBar">
2+
<div class="actionButtons" style="float:left">
3+
{if isset($U_SLIDESHOW_START)}
4+
<a href="{$U_SLIDESHOW_START}" title="{'slideshow'|@translate}" class="pwg-state-default pwg-button" rel="nofollow">
5+
<span class="pwg-icon pwg-icon-slideshow">&nbsp;</span><span class="pwg-button-text">{'slideshow'|@translate}</span>
6+
</a>
7+
{/if}
8+
{if isset($U_METADATA)}
9+
<a href="{$U_METADATA}" title="{'Show file metadata'|@translate}" class="pwg-state-default pwg-button" rel="nofollow">
10+
<span class="pwg-icon pwg-icon-camera-info">&nbsp;</span><span class="pwg-button-text">{'Show file metadata'|@translate}</span>
11+
</a>
12+
{/if}
13+
{if isset($current.U_DOWNLOAD)}
14+
<a href="{$current.U_DOWNLOAD}" title="{'download this file'|@translate}" class="pwg-state-default pwg-button" rel="nofollow">
15+
<span class="pwg-icon pwg-icon-save">&nbsp;</span><span class="pwg-button-text">{'download'|@translate}</span>
16+
</a>
17+
{/if}
18+
{if isset($PLUGIN_PICTURE_ACTIONS)}{$PLUGIN_PICTURE_ACTIONS}{/if}
19+
{if isset($favorite)}
20+
<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">
21+
<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>
22+
</a>
23+
{/if}
24+
{if isset($U_SET_AS_REPRESENTATIVE)}
25+
<a href="{$U_SET_AS_REPRESENTATIVE}" title="{'set as category representative'|@translate}" class="pwg-state-default pwg-button" rel="nofollow">
26+
<span class="pwg-icon pwg-icon-representative">&nbsp;</span><span class="pwg-button-text">{'representative'|@translate}</span>
27+
</a>
28+
{/if}
29+
{if isset($U_ADMIN)}
30+
<a href="{$U_ADMIN}" title="{'Modify information'|@translate}" class="pwg-state-default pwg-button" rel="nofollow">
31+
<span class="pwg-icon pwg-icon-edit">&nbsp;</span><span class="pwg-button-text">{'edit'|@translate}</span>
32+
</a>
33+
{/if}
34+
{if isset($U_CADDIE)}{*caddie management BEGIN*}
35+
<script type="text/javascript">
36+
{literal}function addToCadie(aElement, rootUrl, id)
37+
{
38+
if (aElement.disabled) return;
39+
aElement.disabled=true;
40+
var y = new PwgWS(rootUrl);
41+
42+
y.callService(
43+
"pwg.caddie.add", {image_id: id} ,
44+
{
45+
onFailure: function(num, text) { alert(num + " " + text); document.location=aElement.href; },
46+
onSuccess: function(result) { aElement.disabled = false; }
47+
}
48+
);
49+
}{/literal}
50+
</script>
51+
<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">
52+
<span class="pwg-icon pwg-icon-caddie-add">&nbsp;</span><span class="pwg-button-text">{'caddie'|@translate}</span>
53+
</a>
54+
{/if}{*caddie management END*}
55+
</div>
56+
57+
<div class="navigationButtons" style="float:right">
58+
{if $DISPLAY_NAV_BUTTONS or isset($slideshow)}
59+
{if isset($first)}
60+
<a href="{$first.U_IMG}" title="{'First'|@translate} : {$first.TITLE}" class="pwg-state-default pwg-button">
61+
<span class="pwg-icon pwg-icon-arrowstop-w">&nbsp;</span><span class="pwg-button-text">{'First'|@translate}</span>
62+
</a>
63+
{else}
64+
<span class="pwg-state-disabled pwg-button">
65+
<span class="pwg-icon pwg-icon-arrowstop-w">&nbsp;</span><span class="pwg-button-text">{'First'|@translate}</span>
66+
</span>
67+
{/if}
68+
{if isset($previous)}
69+
<a href="{$previous.U_IMG}" title="{'Previous'|@translate} : {$previous.TITLE}" class="pwg-state-default pwg-button">
70+
<span class="pwg-icon pwg-icon-arrow-w">&nbsp;</span><span class="pwg-button-text">{'Previous'|@translate}</span>
71+
</a>
72+
{else}
73+
<span class="pwg-state-disabled pwg-button">
74+
<span class="pwg-icon pwg-icon-arrow-w">&nbsp;</span><span class="pwg-button-text">{'Previous'|@translate}</span>
75+
</span>
76+
{/if}
77+
{if isset($slideshow.U_START_PLAY)}
78+
<a href="{$slideshow.U_START_PLAY}" title="{'Play of slideshow'|@translate}" class="pwg-state-default pwg-button">
79+
<span class="pwg-icon pwg-icon-play">&nbsp;</span><span class="pwg-button-text">{'Play of slideshow'|@translate}</span>
80+
</a>
81+
{/if}
82+
{if isset($slideshow.U_STOP_PLAY)}
83+
<a href="{$slideshow.U_STOP_PLAY}" title="{'Pause of slideshow'|@translate}" class="pwg-state-default pwg-button">
84+
<span class="pwg-icon pwg-icon-pause">&nbsp;</span><span class="pwg-button-text">{'Pause of slideshow'|@translate}</span>
85+
</a>
86+
{/if}
87+
{if isset($U_UP) and !isset($slideshow)}
88+
<a href="{$U_UP}" title="{'Thumbnails'|@translate}" class="pwg-state-default pwg-button">
89+
<span class="pwg-icon pwg-icon-arrow-n">&nbsp;</span><span class="pwg-button-text">{'Thumbnails'|@translate}</span>
90+
</a>
91+
{/if}
92+
{if isset($next)}
93+
<a href="{$next.U_IMG}" title="{'Next'|@translate} : {$next.TITLE}" class="pwg-state-default pwg-button pwg-button-icon-right">
94+
<span class="pwg-icon pwg-icon-arrow-e">&nbsp;</span><span class="pwg-button-text">{'Next'|@translate}</span>
95+
</a>
96+
{else}
97+
<span class="pwg-state-disabled pwg-button pwg-button-icon-right">
98+
<span class="pwg-icon pwg-icon-arrow-e">&nbsp;</span><span class="pwg-button-text">{'Next'|@translate}</span>
99+
</span>
100+
{/if}
101+
{if isset($last)}
102+
<a href="{$last.U_IMG}" title="{'Last'|@translate} : {$last.TITLE}" class="pwg-state-default pwg-button pwg-button-icon-right">
103+
<span class="pwg-icon pwg-icon-arrowstop-e"></span><span class="pwg-button-text">{'Last'|@translate}</span>
104+
</a>
105+
{else}
106+
<span class="pwg-state-disabled pwg-button pwg-button-icon-right">
107+
<span class="pwg-icon pwg-icon-arrowstop-e">&nbsp;</span><span class="pwg-button-text">{'Last'|@translate}</span>
108+
</span>
109+
{/if}
110+
{/if}
111+
</div>
112+
</div>
113+

‎themes/default/template/slideshow.tpl‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,8 @@
1414
{include file='picture_nav_buttons.tpl'|@get_extent:'picture_nav_buttons'}
1515
</div>
1616

17+
{include file='picture_toolbar.tpl'}
18+
1719
<div id="theImage">
1820
{$ELEMENT_CONTENT}
1921
{if isset($COMMENT_IMG)}

‎themes/default/theme.css‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
@import "iconset.css";
12
/**
23
* Menubar
34
*/
@@ -816,4 +817,5 @@ LEGEND {
816817
}
817818

818819
#piwigoAbout {width:600px;margin:0 auto;}
819-
#linkToPiwigo {text-align:center;}
820+
#linkToPiwigo {text-align:center;}
821+

0 commit comments

Comments
 (0)