Skip to content

Commit 549b6e0

Browse files
author
rvelices
committed
css sprites - almost done - still to implement nice colors and hover effect for clear and sylvia
git-svn-id: http://piwigo.org/svn/trunk@8119 68402e56-0260-453c-a942-63ccdbb3a9ee
1 parent 7626e48 commit 549b6e0

12 files changed

Lines changed: 186 additions & 290 deletions

File tree

‎template-extension/distributed/samples/my-picture.tpl‎

Lines changed: 50 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -33,47 +33,65 @@
3333

3434
{if !empty($PLUGIN_PICTURE_BEFORE)}{$PLUGIN_PICTURE_BEFORE}{/if}
3535
<div id="imageToolBar">
36-
<div class="randomButtons">
37-
{if isset($U_SLIDESHOW_START) }
38-
<a href="{$U_SLIDESHOW_START}" title="{'slideshow'|@translate}" rel="nofollow"><img src="{$ROOT_URL}{$themeconf.icon_dir}/start_slideshow.png" class="button" alt="{'slideshow'|@translate}"></a>
39-
{/if}
40-
{if isset($U_SLIDESHOW_STOP) }
41-
<a href="{$U_SLIDESHOW_STOP}" title="{'stop the slideshow'|@translate}" rel="nofollow"><img src="{$ROOT_URL}{$themeconf.icon_dir}/stop_slideshow.png" class="button" alt="{'stop the slideshow'|@translate}"></a>
42-
{/if}
43-
<a href="{$U_METADATA}" title="{'Show file metadata'|@translate}" rel="nofollow"><img src="{$ROOT_URL}{$themeconf.icon_dir}/metadata.png" class="button" alt="metadata"></a>
44-
{if isset($current.U_DOWNLOAD) }
45-
<a href="{$current.U_DOWNLOAD}" title="{'download'|@translate}"><img src="{$ROOT_URL}{$themeconf.icon_dir}/save.png" class="button" alt="{'download'|@translate}"></a>
46-
{/if}
47-
{if isset($PLUGIN_PICTURE_ACTIONS)}{$PLUGIN_PICTURE_ACTIONS}{/if}
48-
{if isset($favorite) }
49-
<a href="{$favorite.U_FAVORITE}" title="{$favorite.FAVORITE_HINT}"><img src="{$favorite.FAVORITE_IMG}" class="button" alt="favorite" title="{$favorite.FAVORITE_HINT}"></a>
50-
{/if}
51-
{if !empty($U_SET_AS_REPRESENTATIVE) }
52-
<a href="{$U_SET_AS_REPRESENTATIVE}" title="{'representative'|@translate}"><img src="{$ROOT_URL}{$themeconf.icon_dir}/representative.png" class="button" alt="{'representative'|@translate}"></a>
53-
{/if}
54-
{if isset($U_ADMIN) }
55-
<a href="{$U_ADMIN}" title="{'edit'|@translate}"><img src="{$ROOT_URL}{$themeconf.icon_dir}/preferences.png" class="button" alt="{'edit'|@translate}"></a>
56-
{/if}
57-
{if isset($U_CADDIE) }{*caddie management BEGIN*}
36+
<div class="actionButtons">
37+
{if isset($U_SLIDESHOW_START)}
38+
<a href="{$U_SLIDESHOW_START}" title="{'slideshow'|@translate}" class="pwg-state-default pwg-button" rel="nofollow">
39+
<span class="pwg-icon pwg-icon-slideshow">&nbsp;</span><span class="pwg-button-text">{'slideshow'|@translate}</span>
40+
</a>
41+
{/if}
42+
{if isset($U_SLIDESHOW_STOP)}
43+
<a href="{$U_SLIDESHOW_STOP}" title="{'stop the slideshow'|@translate}" class="pwg-state-default pwg-button" rel="nofollow">
44+
<span class="pwg-icon pwg-icon-slideshow">&nbsp;</span><span class="pwg-button-text">{'stop the slideshow'|@translate}</span>
45+
</a>
46+
{/if}
47+
{if isset($U_METADATA)}
48+
<a href="{$U_METADATA}" title="{'Show file metadata'|@translate}" class="pwg-state-default pwg-button" rel="nofollow">
49+
<span class="pwg-icon pwg-icon-camera-info">&nbsp;</span><span class="pwg-button-text">{'Show file metadata'|@translate}</span>
50+
</a>
51+
{/if}
52+
{if isset($current.U_DOWNLOAD)}
53+
<a href="{$current.U_DOWNLOAD}" title="{'download this file'|@translate}" class="pwg-state-default pwg-button" rel="nofollow">
54+
<span class="pwg-icon pwg-icon-save">&nbsp;</span><span class="pwg-button-text">{'download'|@translate}</span>
55+
</a>
56+
{/if}
57+
{if isset($PLUGIN_PICTURE_ACTIONS)}{$PLUGIN_PICTURE_ACTIONS}{/if}
58+
{if isset($favorite)}
59+
<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="nofollow">
60+
<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>
61+
</a>
62+
{/if}
63+
{if isset($U_SET_AS_REPRESENTATIVE)}
64+
<a href="{$U_SET_AS_REPRESENTATIVE}" title="{'set as category representative'|@translate}" class="pwg-state-default pwg-button" rel="nofollow">
65+
<span class="pwg-icon pwg-icon-representative">&nbsp;</span><span class="pwg-button-text">{'representative'|@translate}</span>
66+
</a>
67+
{/if}
68+
{if isset($U_ADMIN)}
69+
<a href="{$U_ADMIN}" title="{'Modify information'|@translate}" class="pwg-state-default pwg-button" rel="nofollow">
70+
<span class="pwg-icon pwg-icon-edit">&nbsp;</span><span class="pwg-button-text">{'edit'|@translate}</span>
71+
</a>
72+
{/if}
73+
{if isset($U_CADDIE)}{*caddie management BEGIN*}
5874
<script type="text/javascript">
5975
{literal}function addToCadie(aElement, rootUrl, id)
6076
{
6177
if (aElement.disabled) return;
62-
aElement.disabled=true;
78+
aElement.disabled=true;
6379
var y = new PwgWS(rootUrl);
6480
6581
y.callService(
66-
"pwg.caddie.add", {image_id: id} ,
67-
{
68-
onFailure: function(num, text) { alert(num + " " + text); document.location=aElement.href; },
69-
onSuccess: function(result) { aElement.disabled = false; }
70-
}
71-
);
82+
"pwg.caddie.add", {image_id: id} ,
83+
{
84+
onFailure: function(num, text) { alert(num + " " + text); document.location=aElement.href; },
85+
onSuccess: function(result) { aElement.disabled = false; }
86+
}
87+
);
7288
}{/literal}
7389
</script>
74-
<a href="{$U_CADDIE}" onclick="addToCadie(this, '{$ROOT_URL|@escape:'javascript'}', {$current.id}); return false;" title="{'caddie'|@translate}"><img src="{$ROOT_URL}{$themeconf.icon_dir}/caddie_add.png" class="button" alt="{'caddie'|@translate}"></a>
75-
{/if}{*caddie management END*}
76-
</div>
90+
<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">
91+
<span class="pwg-icon pwg-icon-caddie-add">&nbsp;</span><span class="pwg-button-text">{'caddie'|@translate}</span>
92+
</a>
93+
{/if}{*caddie management END*}
94+
</div>
7795
{include file='picture_nav_buttons.tpl'|@get_extent:'picture_nav_buttons'}
7896
</div> <!-- imageToolBar -->
7997

‎themes/dark/images/s26_outline_ffff80.png‎

1.99 KB
Loading

‎themes/dark/images/s26_outline_ffffff.png‎

1.99 KB
Loading

‎themes/dark/theme.css‎

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ INPUT.rateButtonSelected /* <= why IE doesn't inherit this ? */ {
66
}
77

88
H2, #menubar DT {
9-
color: #fff48e;
9+
color: #ffff80;
1010
}
1111

1212

@@ -67,9 +67,17 @@ UL.thumbnails SPAN.wrap2:hover,
6767
/* links */
6868
A, INPUT.rateButton {
6969
color: #fff;
70-
border: 0;
7170
}
7271

7372
A:hover {
74-
color: #FFF48E;
75-
}
73+
color: #ffff80;
74+
}
75+
76+
.pwg-icon {
77+
background-image: url(images/s26_outline_ffffff.png);
78+
}
79+
80+
A:hover .pwg-icon {
81+
background-image: url(images/s26_outline_ffff80.png);
82+
}
83+

‎themes/default/icon/category_children.png‎

-1.52 KB
Binary file not shown.

‎themes/default/icon/category_representant_random.png‎

-3.1 KB
Binary file not shown.

‎themes/default/iconset.css‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -65,11 +65,9 @@ A.pwg-state-default, A.pwg-state-default:visited, A.pwg-state-default:hover {
6565
.pwg-icon-repeat-play {background-position: -156px -130px}
6666
.pwg-icon-repeat-stop {background-position: -182px -130px}
6767

68+
.pwg-icon-map {background-position: 0 -156px}
6869

69-
A.pwg-button {
70-
border: 1px solid blue;
71-
}
7270

73-
.pwg-state-default:hover {
74-
border-color: green;
71+
A.pwg-state-default:hover {
72+
border: 0 !important; /*don't add bottom border on hover*/
7573
}

‎themes/default/template/picture.tpl‎

Lines changed: 47 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
21
{* Example of resizeable *}
32
{*
43
{include file='include/autosize.inc.tpl'}
@@ -38,51 +37,63 @@
3837
</div>
3938

4039
<div id="imageToolBar">
41-
<div class="randomButtons">
42-
{if isset($U_SLIDESHOW_START) }
43-
<a href="{$U_SLIDESHOW_START}" title="{'slideshow'|@translate}" rel="nofollow"><img src="{$ROOT_URL}{$themeconf.icon_dir}/start_slideshow.png" class="button" alt="{'slideshow'|@translate}"></a>
44-
{/if}
45-
{if isset($U_METADATA) }
46-
<a href="{$U_METADATA}" title="{'Show file metadata'|@translate}" rel="nofollow"><img src="{$ROOT_URL}{$themeconf.icon_dir}/metadata.png" class="button" alt="metadata"></a>
47-
{/if}
48-
{if isset($current.U_DOWNLOAD) }
49-
<a href="{$current.U_DOWNLOAD}" title="{'download this file'|@translate}"><img src="{$ROOT_URL}{$themeconf.icon_dir}/save.png" class="button" alt="{'download'|@translate}"></a>
50-
{/if}
51-
{if isset($PLUGIN_PICTURE_ACTIONS)}{$PLUGIN_PICTURE_ACTIONS}{/if}
52-
{if isset($favorite) }
53-
<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}"><img src="{$ROOT_URL}{$themeconf.icon_dir}/{if $favorite.IS_FAVORITE}del_favorite{else}favorite{/if}.png" class="button" alt="favorite" title="{if $favorite.IS_FAVORITE}{'delete this image from your favorites'|@translate}{else}{'add this image to your favorites'|@translate}{/if}"></a>
54-
{/if}
55-
{if !empty($U_SET_AS_REPRESENTATIVE) }
56-
<a href="{$U_SET_AS_REPRESENTATIVE}" title="{'set as album representative'|@translate}"><img src="{$ROOT_URL}{$themeconf.icon_dir}/representative.png" class="button" alt="{'representative'|@translate}"></a>
57-
{/if}
58-
{if isset($U_ADMIN) }
59-
<a href="{$U_ADMIN}" title="{'Modify information'|@translate}"><img src="{$ROOT_URL}{$themeconf.icon_dir}/preferences.png" class="button" alt="{'edit'|@translate}"></a>
60-
{/if}
61-
{if isset($U_CADDIE) }{*caddie management BEGIN*}
62-
{combine_script id='core.scripts' load='async' path='themes/default/js/scripts.js'}
40+
<div class="actionButtons">
41+
{if isset($U_SLIDESHOW_START)}
42+
<a href="{$U_SLIDESHOW_START}" title="{'slideshow'|@translate}" class="pwg-state-default pwg-button" rel="nofollow">
43+
<span class="pwg-icon pwg-icon-slideshow">&nbsp;</span><span class="pwg-button-text">{'slideshow'|@translate}</span>
44+
</a>
45+
{/if}
46+
{if isset($U_METADATA)}
47+
<a href="{$U_METADATA}" title="{'Show file metadata'|@translate}" class="pwg-state-default pwg-button" rel="nofollow">
48+
<span class="pwg-icon pwg-icon-camera-info">&nbsp;</span><span class="pwg-button-text">{'Show file metadata'|@translate}</span>
49+
</a>
50+
{/if}
51+
{if isset($current.U_DOWNLOAD)}
52+
<a href="{$current.U_DOWNLOAD}" title="{'download this file'|@translate}" class="pwg-state-default pwg-button" rel="nofollow">
53+
<span class="pwg-icon pwg-icon-save">&nbsp;</span><span class="pwg-button-text">{'download'|@translate}</span>
54+
</a>
55+
{/if}
56+
{if isset($PLUGIN_PICTURE_ACTIONS)}{$PLUGIN_PICTURE_ACTIONS}{/if}
57+
{if isset($favorite)}
58+
<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="nofollow">
59+
<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>
60+
</a>
61+
{/if}
62+
{if isset($U_SET_AS_REPRESENTATIVE)}
63+
<a href="{$U_SET_AS_REPRESENTATIVE}" title="{'set as category representative'|@translate}" class="pwg-state-default pwg-button" rel="nofollow">
64+
<span class="pwg-icon pwg-icon-representative">&nbsp;</span><span class="pwg-button-text">{'representative'|@translate}</span>
65+
</a>
66+
{/if}
67+
{if isset($U_ADMIN)}
68+
<a href="{$U_ADMIN}" title="{'Modify information'|@translate}" class="pwg-state-default pwg-button" rel="nofollow">
69+
<span class="pwg-icon pwg-icon-edit">&nbsp;</span><span class="pwg-button-text">{'edit'|@translate}</span>
70+
</a>
71+
{/if}
72+
{if isset($U_CADDIE)}{*caddie management BEGIN*}
6373
<script type="text/javascript">
6474
{literal}function addToCadie(aElement, rootUrl, id)
6575
{
6676
if (aElement.disabled) return;
67-
aElement.disabled=true;
77+
aElement.disabled=true;
6878
var y = new PwgWS(rootUrl);
6979
7080
y.callService(
71-
"pwg.caddie.add", {image_id: id} ,
72-
{
73-
onFailure: function(num, text) { alert(num + " " + text); document.location=aElement.href; },
74-
onSuccess: function(result) { aElement.disabled = false; }
75-
}
76-
);
81+
"pwg.caddie.add", {image_id: id} ,
82+
{
83+
onFailure: function(num, text) { alert(num + " " + text); document.location=aElement.href; },
84+
onSuccess: function(result) { aElement.disabled = false; }
85+
}
86+
);
7787
}{/literal}
7888
</script>
79-
<a href="{$U_CADDIE}" onclick="addToCadie(this, '{$ROOT_URL|@escape:'javascript'}', {$current.id}); return false;" title="{'add to caddie'|@translate}"><img src="{$ROOT_URL}{$themeconf.icon_dir}/caddie_add.png" class="button" alt="{'caddie'|@translate}"></a>
80-
{/if}{*caddie management END*}
81-
</div>
82-
{include file='picture_nav_buttons.tpl'|@get_extent:'picture_nav_buttons'}
83-
</div> <!-- imageToolBar -->
89+
<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">
90+
<span class="pwg-icon pwg-icon-caddie-add">&nbsp;</span><span class="pwg-button-text">{'caddie'|@translate}</span>
91+
</a>
92+
{/if}{*caddie management END*}
93+
</div>
8494
85-
{include file='picture_toolbar.tpl'}
95+
{include file='picture_nav_buttons.tpl'|@get_extent:'picture_nav_buttons'}
96+
</div> <!-- imageToolBar -->
8697
8798
<div id="theImage">
8899
{$ELEMENT_CONTENT}

0 commit comments

Comments
 (0)