gallery update

add "tag panel", not complete
This commit is contained in:
devin 2012-08-09 18:09:36 +08:00 committed by chris
parent faf2d914b6
commit 1731c4bcf7
5 changed files with 148 additions and 4 deletions

View File

@ -119,10 +119,11 @@ var galleryAPI = function(){
this.loadImages = function(id){ this.loadImages = function(id){
//<iframe id="upload_panel" width="100%" scrolling="no" height="300" frameborder="0" src="upload_panel.html?id=16"> //<iframe id="upload_panel" width="100%" scrolling="no" height="300" frameborder="0" src="upload_panel.html?id=16">
var headarea = '<a class="bt-back btn btn-primary pull-right" title="<%= I18n.t("gallery.back_to_albums") %>" href="orbit_gallery"><i class="icon-arrow-left icon-white"></i><%= I18n.t("gallery.back_to_albums") %></a> '; var headarea = '<a class="bt-back btn pull-left" title="<%= I18n.t("gallery.back_to_albums") %>" href="orbit_gallery"><i class="icon-arrow-left icon-black"></i><%= I18n.t("gallery.back_to_albums") %></a> ';
headarea+='<a class="bt-add btn btn-primary pull-right" title="<%= I18n.t("gallery.add_images") %>" href="images" onclick="return false;"><i class="icon-plus icon-white"></i><%= I18n.t("gallery.add_images") %></a> '; headarea+='<a class="bt-add btn btn-primary pull-right" title="<%= I18n.t("gallery.add_images") %>" href="images" onclick="return false;"><i class="icon-plus icon-white"></i><%= I18n.t("gallery.add_images") %></a> ';
headarea+='<a class="bt-del btn btn-primary pull-right" title="<%= I18n.t("gallery.del_album") %>" href="delete" onclick="return false;"><i class="icon-trash icon-white"></i><%= I18n.t("gallery.del_album") %></a> '; headarea+='<a class="bt-del btn btn-primary pull-right" title="<%= I18n.t("gallery.del_album") %>" href="delete" onclick="return false;"><i class="icon-trash icon-white"></i><%= I18n.t("gallery.del_album") %></a> ';
headarea+='<a class="bt-edit btn btn-primary pull-right" title="<%= I18n.t("gallery.edit") %>" href="orbit_gallery?edit='+id+'" ><i class="icon-pencil icon-white"></i><%= I18n.t("gallery.edit") %></a>'; headarea+='<a class="bt-edit btn btn-primary pull-right" title="<%= I18n.t("gallery.edit") %>" href="orbit_gallery?edit='+id+'" ><i class="icon-pencil icon-white"></i><%= I18n.t("gallery.edit") %></a>';
headarea+='<a class="bt-tag btn btn-primary pull-right" title="<%= I18n.t("gallery.album_tag") %>" href="" ><i class="icon-tag icon-white"></i><%= I18n.t("gallery.album_tag") %></a>';
headarea = $(headarea); headarea = $(headarea);
var uploadpanel = $('<div id="upload_panel_holder"><div class="rgfn"><a class="bt-cls btn btn-primary pull-right" title="Close" href="" onclick="return false;"><i class="icon-remove icon-white"></i>Close Panel</a></div></div>'); var uploadpanel = $('<div id="upload_panel_holder"><div class="rgfn"><a class="bt-cls btn btn-primary pull-right" title="Close" href="" onclick="return false;"><i class="icon-remove icon-white"></i>Close Panel</a></div></div>');
var frame = $('<iframe id="upload_panel" width="100%" scrolling="no" height="200" frameborder="0" src="upload_panel"></iframe>'); var frame = $('<iframe id="upload_panel" width="100%" scrolling="no" height="200" frameborder="0" src="upload_panel"></iframe>');
@ -164,6 +165,13 @@ var galleryAPI = function(){
}) })
g.albumArea.find("#imgholder").append($addsign); g.albumArea.find("#imgholder").append($addsign);
// tag
$('.bt-tag').click(function(){
$('#tag_panel').animate({'right':0});
return false;
});
} }
this.loadTheater = function(id){ this.loadTheater = function(id){
var imageArray; var imageArray;
@ -311,7 +319,7 @@ var galleryAPI = function(){
}) })
} }
var head = $('<a href="" class="bt-back btn btn-primary pull-right" title="<%= I18n.t("gallery.back_to_photos") %>"><i class="icon-arrow-left icon-white"></i><%= I18n.t("gallery.back_to_photos") %></a></div>'); var head = $('<a href="" class="bt-back btn pull-left" title="<%= I18n.t("gallery.back_to_photos") %>"><i class="icon-arrow-left icon-black"></i><%= I18n.t("gallery.back_to_photos") %></a></div>');
var head1 = $('<a class="bt-edit btn btn-primary pull-right" title="<%= I18n.t("gallery.edit") %>" href="" ><i class="icon-pencil icon-white"></i><%= I18n.t("gallery.edit") %></a>'); var head1 = $('<a class="bt-edit btn btn-primary pull-right" title="<%= I18n.t("gallery.edit") %>" href="" ><i class="icon-pencil icon-white"></i><%= I18n.t("gallery.edit") %></a>');
g.albumArea.find("#imgholder").load("theater?pic="+id,function(theater,response,xhr){ g.albumArea.find("#imgholder").load("theater?pic="+id,function(theater,response,xhr){
if(xhr.status == 404){ if(xhr.status == 404){
@ -389,7 +397,7 @@ var galleryAPI = function(){
} }
$("#filter").remove(); $("#filter").remove();
g.albumArea.css("margin-top",""); g.albumArea.css("margin-top","");
var head ='<a href="orbit_gallery?album='+id+'" class="bt-back btn btn-primary pull-right" title="<%= I18n.t("gallery.back_to_photos") %>"><i class="icon-arrow-left icon-white"></i><%= I18n.t("gallery.back_to_photos") %></a></div>'; var head ='<a href="orbit_gallery?album='+id+'" class="bt-back btn pull-left" title="<%= I18n.t("gallery.back_to_photos") %>"><i class="icon-arrow-left icon-black"></i><%= I18n.t("gallery.back_to_photos") %></a></div>';
head+='<a class="bt-del bt-delete btn btn-primary pull-right" onclick="return false;" style="display:none;" title="<%= I18n.t("gallery.delete_selected") %>" href=""><i class="icon-trash icon-white"></i><%= I18n.t("gallery.delete_selected") %></a>'; head+='<a class="bt-del bt-delete btn btn-primary pull-right" onclick="return false;" style="display:none;" title="<%= I18n.t("gallery.delete_selected") %>" href=""><i class="icon-trash icon-white"></i><%= I18n.t("gallery.delete_selected") %></a>';
head+='<a class="bt-save btn btn-primary pull-right" onclick="return false;" style="display:none;" title="Save" href=""><i class="icon-ok icon-white"></i>Save</a>'; head+='<a class="bt-save btn btn-primary pull-right" onclick="return false;" style="display:none;" title="Save" href=""><i class="icon-ok icon-white"></i>Save</a>';
g.albumArea.find(".rghead .rgfn").html(head); g.albumArea.find(".rghead .rgfn").html(head);

View File

@ -383,7 +383,7 @@ body.fullscreen, .fullscreen #container, .fullscreen #container2, .fullscreen #m
text-indent: -999px; text-indent: -999px;
background-position: -358px 0; background-position: -358px 0;
} }
/*
.bt-add { background-position: 0 -106px; } .bt-add { background-position: 0 -106px; }
.bt-add:hover { background-position: 0 -296px; } .bt-add:hover { background-position: 0 -296px; }
.bt-add:active { background-position: 0 -486px; } .bt-add:active { background-position: 0 -486px; }
@ -399,6 +399,7 @@ body.fullscreen, .fullscreen #container, .fullscreen #container2, .fullscreen #m
.bt-save, .bt-finish { background-position: 0 -220px; } .bt-save, .bt-finish { background-position: 0 -220px; }
.bt-save:hover, .bt-finish:hover { background-position: 0 -410px; } .bt-save:hover, .bt-finish:hover { background-position: 0 -410px; }
.bt-save:active, .bt-finish:active { background-position: 0 -600px; } .bt-save:active, .bt-finish:active { background-position: 0 -600px; }
*/
.bt-finish { display: block; float: right; clear: both; } .bt-finish { display: block; float: right; clear: both; }
.bt-addnew { .bt-addnew {
margin: 0 auto; margin: 0 auto;
@ -422,6 +423,7 @@ body.fullscreen, .fullscreen #container, .fullscreen #container2, .fullscreen #m
right: 6px; right: 6px;
top: 6px; top: 6px;
} }
/*
.bt-close:hover { background-position: -436px 0; } .bt-close:hover { background-position: -436px 0; }
.bt-close:active { background-position: -514px 0; } .bt-close:active { background-position: -514px 0; }
.bt-cls { background-position: 0 -790px; } .bt-cls { background-position: 0 -790px; }
@ -441,6 +443,7 @@ body.fullscreen, .fullscreen #container, .fullscreen #container2, .fullscreen #m
.bt-languages { background-position: -398px -72px; width: 32px; position: relative; } .bt-languages { background-position: -398px -72px; width: 32px; position: relative; }
.bt-languages:hover { background-position: -438px -72px; } .bt-languages:hover { background-position: -438px -72px; }
.bt-languages:active { background-position: -477px -72px; } .bt-languages:active { background-position: -477px -72px; }
*/
.inputui { .inputui {
background: transparent 0 0 url(../../../assets/gallery/inputui.png) no-repeat; background: transparent 0 0 url(../../../assets/gallery/inputui.png) no-repeat;
@ -486,6 +489,80 @@ body.fullscreen, .fullscreen #container, .fullscreen #container2, .fullscreen #m
background-color: #ddd; background-color: #ddd;
} }
/* tag panel */
#tag_panel {
position: fixed;
right: -200px;
top: 31px;
width: 200px;
min-height: 100px;
border-left: solid 1px #ccc;
background-color: #fff;
}
#tag_panel .scrollbar {
right: 0px;
top: 0px;
width: 9px;
}
#tag_panel .viewport {
height: 100%;
}
.tag_list {
margin: 0;
padding: 0;
}
.tag_list li {
padding: 4px 6px;
border-top: solid 1px #f6f6f6;
}
.tag_list li:first-child {
border: 0;
}
.tag_list li:hover {
background-color: #08c;
}
.tag_list li:hover label {
color: #fff;
}
.tag_list input[type=checkbox], .tag_list label {
display: inline-block;
vertical-align: middle;
text-transform: capitalize;
margin: 0;
}
.tag_list label {
padding: 0 6px;
}
.tag_search {
position: absolute;
left: -1px;
bottom: -32px;
width: 200px;
height: 32px;
background-color: #f5f5f5;
border-left: solid 1px #ccc;
border-top: solid 1px #ddd;
}
.tag_search input[type=text] {
box-shadow: none;
width: 170px;
height: 25px;
line-height: 25px;
padding: 3px 6px 3px 24px;
border-top: solid 1px #fff;
}
.tag_search input[type=text]:focus {
background-color: #fff;
}
.tag_search .icon-search {
position: absolute;
left: 6px;
top: 50%;
margin-top: -7px;
}
/* orbit style implementation */ /* orbit style implementation */
#orbit_gallery { #orbit_gallery {
margin-bottom: 30px; margin-bottom: 30px;

View File

@ -61,11 +61,68 @@
</div> </div>
</div> --> </div> -->
<div class="rgbody"> <div class="rgbody">
<div id="imgholder"> <div id="imgholder">
</div> </div>
</div> </div>
<!-- tag part -->
<div id="tag_panel" class="my_scroll">
<div class="scrollbar">
<div class="track">
<div class="thumb">
<div class="end"></div>
</div>
</div>
</div>
<div class="viewport">
<div class="overview">
<ul class="tag_list">
<li><input id="tag1" type="checkbox"><label for="tag1">animal</label></li>
<li><input id="tag2" type="checkbox"><label for="tag2">animal</label></li>
<li><input id="tag3" type="checkbox"><label for="tag3">animal</label></li>
<li><input id="tag4" type="checkbox"><label for="tag4">animal</label></li>
<li><input id="tag5" type="checkbox"><label for="tag5">animal</label></li>
<li><input id="tag6" type="checkbox"><label for="tag6">animal</label></li>
<li><input id="tag7" type="checkbox"><label for="tag7">animal</label></li>
<li><input id="tag8" type="checkbox"><label for="tag8">animal</label></li>
<li><input id="tag9" type="checkbox"><label for="tag9">animal</label></li>
<li><input id="tag10" type="checkbox"><label for="tag10">animal</label></li>
<li><input id="tag11" type="checkbox"><label for="tag11">animal</label></li>
<li><input id="tag12" type="checkbox"><label for="tag12">animal</label></li>
<li><input id="tag13" type="checkbox"><label for="tag13">animal</label></li>
<li><input id="tag14" type="checkbox"><label for="tag14">animal</label></li>
<li><input id="tag15" type="checkbox"><label for="tag15">animal</label></li>
<li><input id="tag16" type="checkbox"><label for="tag16">animal</label></li>
<li><input id="tag17" type="checkbox"><label for="tag17">animal</label></li>
<li><input id="tag18" type="checkbox"><label for="tag18">animal</label></li>
<li><input id="tag19" type="checkbox"><label for="tag19">animal</label></li>
<li><input id="tag20" type="checkbox"><label for="tag20">animal</label></li>
<li><input id="tag21" type="checkbox"><label for="tag21">animal</label></li>
</ul>
</div>
</div>
<div class="tag_search"><div class="icon-search"></div><input type="text" value="Search Tags"></div>
</div>
<script type="text/javascript">
var $tag_panel = $('#tag_panel');
orbit_bar_height = $('#orbit-bar').outerHeight();
action_panel_height = $('.form-actions').outerHeight();
window_height = $(window).height();
$tag_panel.height( window_height - orbit_bar_height - 90 );
$tag_panel.tinyscrollbar();
$(window).resize(function(){
$tag_panel.tinyscrollbar_update('relative');
$tag_panel.height( $(window).height() - orbit_bar_height - 90 );
});
</script>
<!-- tag end -->
<div class="form-actions form-fixed pagination-right rghead"> <div class="form-actions form-fixed pagination-right rghead">
<div class="rgfn"> <div class="rgfn">
<!-- <a href="" class="btn btn-primary pull-right"><i class="icon-plus icon-white"></i>新增</a> --> <!-- <a href="" class="btn btn-primary pull-right"><i class="icon-plus icon-white"></i>新增</a> -->

View File

@ -1,6 +1,7 @@
en: en:
gallery: gallery:
album_name: Album Name album_name: Album Name
album_tag: Album Tag
all: All all: All
select_category: "--Select a category--" select_category: "--Select a category--"
manage_categories: Manage Categories manage_categories: Manage Categories

View File

@ -1,6 +1,7 @@
zh_tw: zh_tw:
gallery: gallery:
album_name: 相簿名稱 album_name: 相簿名稱
album_tag: 相簿標籤
all: 全部 all: 全部
select_category: 選擇類別 select_category: 選擇類別
manage_categories: 類別管理 manage_categories: 類別管理