gallery update

vendor/built_in_modules/gallery/app/assets/javascripts/galleryAPI.js.erb

@@ -168,10 +168,21 @@ var galleryAPI = function(){
 
 		// tag
 		$('.bt-tag').click(function(){
-		  $('#tag_panel').animate({'right':0});
+			var $tag_panel = $('#tag_panel'),
+				tag_panel_position = 0;
+
+			if( $tag_panel.css('right') == '0px' ){
+				tag_panel_position = -200;
+			}
+			$tag_panel.animate({'right':tag_panel_position}, 300);
+
+			g.albumArea
+				.delay(200)
+				.animate({'margin-right':tag_panel_position+200},300);
 			return false;
 		});
 
+
 	}
 	this.loadTheater = function(id){
 		var imageArray;
@@ -321,6 +332,7 @@ var galleryAPI = function(){
 
 		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 head2 = $('<a class="bt-tag btn btn-primary pull-right" title="<%= I18n.t("gallery.photo_tag") %>" href="" ><i class="icon-tag icon-white"></i><%= I18n.t("gallery.photo_tag") %></a>');
 		g.albumArea.find("#imgholder").load("theater?pic="+id,function(theater,response,xhr){
 			if(xhr.status == 404){
 				$(this).text("<%= I18n.t('gallery.pic_not_found') %>.");
@@ -332,10 +344,27 @@ var galleryAPI = function(){
 			head.attr("href","orbit_gallery?album="+albumid);
 			head1.attr("href","orbit_gallery?edit="+albumid);
 			g.albumArea.find(".rghead .rgfn").html(head);
-			g.albumArea.find(".rghead .rgfn").append(head1);
+			g.albumArea.find(".rghead .rgfn").append(head1,head2);
 			picHeight = $(window).height() - ($("#orbit-bar").outerHeight() + $("#orbit_gallery .rghead").outerHeight());
 			preparestage(albumid);
-		})
+
+
+			// tag
+			$('.bt-tag').click(function(){
+				var $tag_panel = $('#tag_panel'),
+					tag_panel_position = 0;
+
+				if( $tag_panel.css('right') == '0px' ){
+					tag_panel_position = -200;
+				}
+				$tag_panel.animate({'right':tag_panel_position}, 300);
+
+				g.albumArea
+					.delay(200)
+					.animate({'margin-right':tag_panel_position+200},300);
+				return false;
+			});
+			});
 	}
 
 	this.editAlbum = function(id){

vendor/built_in_modules/gallery/app/assets/stylesheets/gallery.css

@@ -59,12 +59,12 @@ body.fullscreen, .fullscreen #container, .fullscreen #container2, .fullscreen #m
 	
 	}
 .rgfn { overflow: hidden; padding: 4px 10px; }
-.rgalbum, .rgphoto { float: left; margin: 0 16px 24px 0; }
+.rgalbum, .rgphoto { float: left; margin: 0 0 24px 0; }
-.rgalbum { width: 134px; height: 169px; text-align: center; position: relative; margin-bottom: 12px; }
+.rgalbum {
+	width: 150px;
+	margin-bottom: 12px;
+}
 .rgalbum img {		
-	background: transparent 0 0 url(../../../assets/gallery/albumframe.png) no-repeat;
-	padding: 7px 7px 8px 7px;
-		
 	transition: all, 0.5s ease;
 	-webkit-transition: all, 0.5s ease;
 	-moz-transition: all 0.5s ease;
@@ -96,38 +96,14 @@ body.fullscreen, .fullscreen #container, .fullscreen #container2, .fullscreen #m
 	border-color: #666;
 	}
 .rgalbum .albumname {
-	display: block;
-	margin: 4px;
-	padding: 2px 0;
-	font-size: 13px;
-	height: 52px;
-	overflow: hidden;
-	cursor: default;
 	
 	transition: background 0.3s ease;
 	-webkit-transition: background 0.3s ease;
 	-moz-transition: background 0.3s ease;
 	-ms-transition: background 0.3s ease;
 	}
-.rgalbum .albumname:hover {
-	position: absolute;
-	width: 126px;
-	height: auto;
-	min-height: 52px;
-	z-index: 999;
-	overflow: auto;
-	background: #fff;
-	
-	box-shadow: 0 0 6px #ddd;
-	-webkit-box-shadow: 0 0 6px #ddd;
-	-moz-box-shadow: 0 0 6px #ddd;
-	-ms-box-shadow: 0 0 6px #ddd;
-	}
 .rgalbum a:hover img { 
 	opacity: 0.85;
-	-webkit-opacity: 0.85;
-	-moz-opacity: 0.85;
-	-ms-opacity: 0.85;
 	}
 
 .rgp .rgtitle { margin: 0 0 10px 0; }
@@ -166,14 +142,14 @@ body.fullscreen, .fullscreen #container, .fullscreen #container2, .fullscreen #m
 	overflow: hidden;
 	background: #333;
 	clear: both;
-	z-index: 99;
+	/*z-index: 99;*/
 	min-height: 250px;
 
 	transition: all 0.3s ease;
 	-webkit-transition: all 0.3s ease;
 	-moz-transition: all 0.3s ease;
 	}
-.rslide.fullscreen { position: fixed; }
+.rslide.fullscreen { position: fixed; z-index: 99; }
 .rslideinside {
 	/*
 	position: absolute;
@@ -235,7 +211,7 @@ body.fullscreen, .fullscreen #container, .fullscreen #container2, .fullscreen #m
 	height: 30px;
 	background: #000 left top url(../../../assets/gallery/slidetitlebg.png) repeat-x;
 	background: rgba(0,0,0,0.9) left top url(../../../assets/gallery/slidetitlebg.png) repeat-x;
-	z-index: 999;
+	/*z-index: 999;*/
 	}
 .slidectrl a {
 	display: block;
@@ -477,6 +453,8 @@ body.fullscreen, .fullscreen #container, .fullscreen #container2, .fullscreen #m
 
 .w380 { width: 380px; }
 
+#imgholder { overflow: hidden; }
+
 /* upload panel */
 #upload_panel_holder {
 	display: none;

vendor/built_in_modules/gallery/config/locales/en.yml

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

vendor/built_in_modules/gallery/config/locales/zh_tw.yml

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