gallery update

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

@@ -127,6 +127,7 @@ var galleryAPI = function(){
 			g.albumArea.find(".rghead .rgfn").html(headbtn);
 		})
 		
+		g.albumArea.addClass('o_gallery');
 		g.albumArea.find("#imgholder").empty();
 		// var $addsign = $('<div class="rgalbum"><a id="global_add" class="rgui bt-addnew" href="add" onclick="return false;">Add Album</a></div>');
 		// $addsign.find("a").click(function(){g.makeNewAlbum();})
@@ -156,14 +157,14 @@ var galleryAPI = function(){
 			$.each(categories,function(x,category){
 				$.each(category,function(i,album){
 					if(album.cover == "default")
-						var $img = $("<div class='rgalbum'><a title='"+album.description+"' href='?album="+album._id+"'><img src='../../../assets/gallery/default.jpg' width='120px' height='90px'/></a><span class='albumname'>"+album.name+"</span><br /><span class='tagnames'></span></div>");
+						var $img = $("<div class='rgalbum'><a title='"+album.description+"' href='?album="+album._id+"'><img src='../../../assets/gallery/default.jpg' width='120px' height='90px'/></a><span class='albumname'>"+album.name+"</span><span class='tagnames'></span></div>");
 					else
-						var $img = $("<div class='rgalbum'><a title='"+album.description+"' href='?album="+album._id+"'><img src='"+album.cover_path+"' width='120px' height='90px'/></a><span class='albumname'>"+album.name+"</span><br /><span class='tagnames'></span></div>");
+						var $img = $("<div class='rgalbum'><a title='"+album.description+"' href='?album="+album._id+"'><img src='"+album.cover_path+"' width='120px' height='90px'/></a><span class='albumname'>"+album.name+"</span><span class='tagnames'></span></div>");
 					var tag_string = "";
 					for(tag in album.tag_names){
-						tag_string+=album.tag_names[tag] + " ";
+						tag_string+= '<span class="tag_item">' + album.tag_names[tag] + '</span>';
 					}
-					$img.find("span.tagnames").text(tag_string);
+					$img.find(".tagnames").html(tag_string);
 					g.albumArea.find("#imgholder").append($img);
 				})
 			})
@@ -207,7 +208,7 @@ var galleryAPI = function(){
 					$("ul#gallery_tag_list li").slideDown();
 				}
 			})
-			g.albumArea.find("#tag_panel button.bt-save").click(function(){
+			g.albumArea.find("#tag_panel .bt-save").click(function(){
 				g.saveTags(id,g.loadArea);
 			})
 			g.albumArea.find(".rghead .rgfn a.bt-add").click(function(){
@@ -233,6 +234,7 @@ var galleryAPI = function(){
 			}
 		}
 		
+		g.albumArea.addClass('o_album');
 		g.albumArea.find(".rghead .rgfn").append(uploadpanel);
 		g.albumArea.find("#imgholder").empty();
 		$("#filter").remove();
@@ -242,7 +244,7 @@ var galleryAPI = function(){
 		$.getJSON("get_images",{aid:id},function(album){
 			$.each(album.images,function(i,image){
 				var thumb = image.file.thumb.url;
-				var $img = $("<div class='rgalbum'><a title='"+image.description+"' href='?theater="+image._id+"'><img src='"+thumb+"'/></a></div>");
+				var $img = $("<div class='rgphoto'><a title='"+image.description+"' href='?theater="+image._id+"'><img src='"+thumb+"'/></a></div>");
 				g.albumArea.find("#imgholder").append($img);
 			})
 			g.tagList.find("input").attr("checked",false);
@@ -312,7 +314,7 @@ var galleryAPI = function(){
 					$("ul#gallery_tag_list li").slideDown();
 				}
 			})
-			g.albumArea.find("#tag_panel button.bt-save").click(function(){
+			g.albumArea.find("#tag_panel .bt-save").click(function(){
 				g.saveTags(imageArray[imagecount]._id,g.loadArea);
 			})
 			$(".slidectrl a.togglelist").click(function(){
@@ -537,7 +539,7 @@ var galleryAPI = function(){
 					$("ul#gallery_tag_list li").slideDown();
 				}
 			})
-			g.albumArea.find("#tag_panel button.bt-save").click(function(){
+			g.albumArea.find("#tag_panel .bt-save").click(function(){
 				g.saveTags(imageArray[imagecount]._id,g.loadArea);
 			})
 			var tempval;
@@ -573,6 +575,7 @@ var galleryAPI = function(){
 			})
 		}
 		$("#filter").remove();
+		g.albumArea.addClass('o_album_edit');
 		g.albumArea.css("margin-top","");
 		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>';

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

@@ -1,16 +1,3 @@
-/*html { background: #eee; }
-body {
-	background: #fff;
-	width: 600px;
-	margin: 0 auto 20px auto;
-	padding: 20px 20px 0 20px;
-	border: solid 4px #ddd;
-	border-top: none;
-	}
-body.fullscreen, .fullscreen #container, .fullscreen #container2, .fullscreen #main1, .fullscreen #main2, .fullscreen #main, .fullscreen #content, .fullscreen #content2 { position: static; }
-*/
-	
-
 .rg, .rgp {
 	transition: all 0.3s ease;
 	-webkit-transition: all 0.3s ease;
@@ -18,11 +5,7 @@ body.fullscreen, .fullscreen #container, .fullscreen #container2, .fullscreen #m
 }
 .rg input, .rgp input, .rg textarea, .rgp textarea { 
 	resize: none;
-	border: none;
-	outline: none;
-	background: transparent;
 	margin: 0;
-	padding: 0;
 	display: block;
 	font-size: 13px;
 	}
@@ -38,9 +21,7 @@ body.fullscreen, .fullscreen #container, .fullscreen #container2, .fullscreen #m
 .rgmask { background: #000; width: 100%; position: fixed; top: 0; left: 0; }
 
 .rgui { 
-	background: transparent 0 0 url(../../../assets/gallery/rgui.png) no-repeat;
 	display: inline-block;
-	overflow: hidden;
 	cursor: pointer;
 	}
 .rghead,  .rgbody { overflow: hidden; }
@@ -59,10 +40,13 @@ body.fullscreen, .fullscreen #container, .fullscreen #container2, .fullscreen #m
 	
 	}
 .rgfn { overflow: hidden; padding: 4px 10px; }
-.rgalbum, .rgphoto { float: left; margin: 0 0 24px 0; }
+.rgalbum, .rgphoto { float: left; margin: 0 10px 24px 0; }
 .rgalbum {
-	width: 150px;
+	padding: 16px;
-	margin-bottom: 12px;
+	margin: 0;
+	border-right: solid 1px #ccc;
+	border-bottom: solid 1px #ccc;
+	height: 180px;
 }
 .rgalbum img {		
 	transition: all, 0.5s ease;
@@ -70,23 +54,9 @@ body.fullscreen, .fullscreen #container, .fullscreen #container2, .fullscreen #m
 	-moz-transition: all 0.5s ease;
 	-ms-transition: all, 0.5s ease;
 	}
-.rgphoto { width: 128px; }
+.rgphoto {  }
 .rgphoto img, .rgphoto_edit img { 
 	display: block;	
-	padding: 3px;
-	border: solid 1px #BFBFBF;
-	background: #fff;
-	
-	border-radius: 3px;
-	-webkit-border-radius: 3px;
-	-moz-border-radius: 3px;
-	-ms-border-radius: 3px;
-	
-	box-shadow: 0 1px 0 rgba(0,0,0,0.1);
-	-webkit-box-shadow: 0 1px 0 rgba(0,0,0,0.1);
-	-moz-box-shadow: 0 1px 0 rgba(0,0,0,0.1);
-	-ms-box-shadow: 0 1px 0 rgba(0,0,0,0.1);
-	
 	transition: all, 0.3s ease;
 	-webkit-transition: all, 0.3s ease;
 	-moz-transition: all, 0.3s ease;
@@ -96,7 +66,9 @@ body.fullscreen, .fullscreen #container, .fullscreen #container2, .fullscreen #m
 	border-color: #666;
 	}
 .rgalbum .albumname {
-	
+	font-size: 15px;
+	padding: 6px 0;
+	display: block;
 	transition: background 0.3s ease;
 	-webkit-transition: background 0.3s ease;
 	-moz-transition: background 0.3s ease;
@@ -110,13 +82,24 @@ body.fullscreen, .fullscreen #container, .fullscreen #container2, .fullscreen #m
 
 /* Photo Edit */
 .albumname_edit label, .albumname_edit .rginput, .rgphoto_edit img, .rgphoto_edit .rginput { float: left; }
-.rgphoto_edit, .albumname_edit { clear: both; overflow: hidden; }
+.rgphoto_edit, .albumname_edit {
-.albumname_edit label { width: 128px; margin: 0 10px 0 0; text-align: right; padding: 0; line-height: 24px; }
+	clear: both;
+	overflow: hidden;
+	margin-bottom: 10px;
+	border-bottom: solid 1px #fcfcfc;
+}
+.albumname_edit label { 
+	width: 120px;
+	margin: 0 10px 0 0;
+	text-align: right;
+	padding: 0;
+	line-height: 24px;
+}
 .albumname_edit .rginput {  }
-.rgphoto_edit img { margin-right: 10px; }
+.rgphoto_edit img { margin: 0 10px 10px 0; }
 .rgphoto_edit .rginput { margin-right: 10px; }
-.rgphoto_edit .edit_fn {  }
+.rgphoto_edit .edit_fn { float: left; margin-bottom: 10px; }
-.rgphoto_edit .edit_fn .bt-dels { margin-right: 4px; }
+.rgphoto_edit .edit_fn .bt-dels { }
 
 /* Delete List */
 .rglist { overflow: hidden; padding: 10px 0; }
@@ -343,22 +326,16 @@ body.fullscreen, .fullscreen #container, .fullscreen #container2, .fullscreen #m
 	}
 .rgbt span { 
 	padding: 0 12px 0 8px;
-	background: transparent right -106px url(../../../assets/gallery/rgui.png) no-repeat;
 	display: inline-block;
 	line-height: 30px;
 	height: 32px;
 	font-size: 14px;
 	}
-.rgbt:hover span { background-position: right -296px; }
-.rgbt:active span { background-position: right -486px; line-height: 31px; }
 
 .rgbtsg {
-	padding: 0;
+	padding: 6px;
-	width: 30px;
-	height: 32px;
-	text-indent: -999px;
-	background-position: -358px 0;
 	}
+.rgphoto_edit .rgbtsg.active { display: inline-block; }
 /*
 .bt-add { background-position: 0 -106px;	}
 .bt-add:hover { background-position: 0 -296px; }
@@ -381,11 +358,8 @@ body.fullscreen, .fullscreen #container, .fullscreen #container2, .fullscreen #m
 	margin: 0 auto;
 	width: 98px;
 	height: 100px;
-	text-indent: -9999px;
 	display: block;
 	}
-.bt-addnew:hover { background-position: -106px 0; }
-.bt-addnew:active { background-position: -212px 0; }
 .bt-next{ 
 	background-position: 0 -258px;
 	display: block;
@@ -422,12 +396,9 @@ body.fullscreen, .fullscreen #container, .fullscreen #container2, .fullscreen #m
 */
 
 .inputui {
-	background: transparent 0 0 url(../../../assets/gallery/inputui.png) no-repeat;
-	padding: 0 0 0 4px;
 	margin: 0 0 8px 0;
 	}
 .inputui span {
-	background: transparent 0 0 url(../../../assets/gallery/inputui.png) no-repeat;
 	padding: 0 4px 0 0;
 	display: block;
 	}
@@ -435,23 +406,23 @@ body.fullscreen, .fullscreen #container, .fullscreen #container2, .fullscreen #m
 .rginput input, .rginput textarea { color: #999; }
 .rginput.focus input, .rginput.focus textarea { color: #333; }
 
-.rgih26 { width: 208px; background-position: 0 0; }
+.rgih26 { width: 208px; }
-.rgih26 span { background-position: right 0; height: 26px; }
+.rgih26 span {  }
-.rgih26 input { width: 100%; line-height: 26px; height: 26px; }
+.rgih26 input { width: 376px; }
-.rgih26.focus { background-position: 0 -34px; }
+.rgih26.focus {  }
-.rgih26.focus span { background-position: right -34px; }
+.rgih26.focus span {  }
-.rgih68 { width: 396px; background-position: 0 -68px; }
+.rgih68 { width: 396px; }
-.rgih68 span { background-position: right -68px; padding: 3px 4px 3px 0; }
+.rgih68 span { padding: 3px 4px 3px 0; }
 .rgih68 textarea { width: 392px; height: 62px; }
-.rgih68.focus { background-position: 0 -144px; }
+.rgih68.focus {  }
-.rgih68.focus span { background-position: right -144px; }
+.rgih68.focus span {  }
-.rgih98 { width: 396px; background-position: 0 -220px; }
+.rgih98 { width: 396px; }
-.rgih98 span { background-position: right -220px; padding: 3px 4px 3px 0; }
+.rgih98 span {  }
-.rgih98 textarea { width: 376px; height: 92px; }
+.rgih98 textarea { width: 376px; height: 80px; }
-.rgih98.focus { background-position: 0 -326px; }
+.rgih98.focus {  }
-.rgih98.focus span { background-position: right -326px; }
+.rgih98.focus span {  }
 
-.w380 { width: 380px; }
+.w380 { width: 386px; }
 
 #imgholder { overflow: hidden; }
 
@@ -539,6 +510,9 @@ body.fullscreen, .fullscreen #container, .fullscreen #container2, .fullscreen #m
 	top: 50%;
 	margin-top: -7px;
 }
+#tag_panel .bt-save {
+
+}
 
 
 /* orbit style implementation */
@@ -556,8 +530,12 @@ body.fullscreen, .fullscreen #container, .fullscreen #container2, .fullscreen #m
 	display: block;
 }
 #orbit_gallery .btn { margin: 0; }
+#orbit_gallery .btn i { margin-right: 4px; }
 #orbit_gallery .rgfn .btn {
 	margin-left: 8px;
 }
-#orbit_gallery .rgfn i { margin-right: 4px; }
 #orbit_gallery .form-actions { background-color: whiteSmoke; }
+
+.o_album .rgbody {
+	margin: 10px 8px;
+}

vendor/built_in_modules/gallery/app/views/panel/gallery/back_end/orbit_galleries/edit_album.html.erb

@@ -1,17 +1,12 @@
-<%=
+<ul class="breadcrumb">
-# for tab effect, please check
+	<li><span>Home</span><span class="divider">/</span></li>
-# /Users/ally/orbit/vendor/built_in_modules/announcement/app/views/panel/announcement/back_end/bulletins/_form.html.erb
+	<li><span><%= t('admin.orbit_gallery') %></span><span class="divider">/</span></li>
-# from line 129
+	<li class="text-blue"><%= t('gallery.edit') %></li>
-%>
+</ul>
 <ul class="nav nav-tabs">
-	<% i = 0 %>
+	<%# @site_valid_locales.each_with_index do |locale, i| %>
-	<% @site_valid_locales.each do |locale| %>
+	<% @site_valid_locales.each_with_index do |locale, i| %>
-		<% if i == 0 %>
+    <li <%= ( i == 0 ) ? " class='active'" : '' %>><a data-toggle="tab" href=".<%= locale %>"><%= I18nVariable.from_locale(locale) %></a></li>
-	  	 	 <li class="active"><a data-toggle="tab" href=".<%= locale %>"><%= locale %></a></li>
-	   	<% else %>
-	   	 	 <li><a data-toggle="tab" href=".<%= locale %>"><%= locale %></a></li>
-	   	<% end %>
-	   <% i = 1 %>
 	<% end %>
 </ul>
 <form id="edit_album">
@@ -25,26 +20,24 @@
 	<% end %>
 	<% i = 1 %>
 		<div class="albumname_edit">
-			<label for="">Album Name:</label>
+			<label for=""><%= t("gallery.album_name") %></label>
-			<div class="inputui rginput rgih26 w380"><span><input type="text" name="edit_album[name][<%= locale %>]" value="<%= @album_name[locale] %>" class="txtchange" /></span></div>
+			<div class="inputui rginput rgih26 w380"><input type="text" name="edit_album[name][<%= locale %>]" value="<%= @album_name[locale] %>" class="txtchange" /></div>
 		</div>
 		<div class='description_loader'>
 			<% @images.each do |image| %>
 			<div class="rgphoto_edit">
 				<a href="orbit_gallery?theater=<%= image.id %>"><img src="<%= image.file.thumb.url %>"></a>
 				<div class="inputui rginput rgih98 w380">
-					<span>
 					<textarea  name="edit[description][<%= locale %>]" class="txtchange" for="<%= image.id%>"><%= image.description_translations[locale] %></textarea>
-					</span>
 				</div>
 				<div class="edit_fn">
-					<a class="rgui rgbt rgbtsg bt-dels" onclick="return false;" title="Delete" href="<%= image.id %>">Delete</a>
-						<a class="rgui rgbt rgbtsg bt-tag" onclick="return false;" title="Tag" href="<%= image.id %>">Tag</a>
 					<% if image.id.to_s == @cover %>
-						<a class="rgui rgbt rgbtsg bt-cover setcover" onclick="return false;" title="Set Cover" href="<%= image.id %>">Set Cover</a>
+						<a class="btn btn-primary rgbtsg bt-cover setcover active" onclick="return false;" title="Cover" href="<%= image.id %>"><span class="icon-star icon-white"></span></a>
 					<% else %>
-						<a class="rgui rgbt rgbtsg bt-cover" onclick="return false;" title="Set Cover" href="<%= image.id %>">Set Cover</a>
+						<a class="btn rgbtsg bt-cover" onclick="return false;" title="Set Cover" href="<%= image.id %>"><span class="icon-star-empty"></span></a>
 					<% end %>
+					<a class="btn rgbtsg bt-tag" onclick="return false;" title="Tags" href="<%= image.id %>"><span class="icon-tags"></span></a>
+					<a class="btn rgbtsg bt-dels" onclick="return false;" title="Delete" href="<%= image.id %>"><span class="icon-trash"></span></a>
 				</div>
 			</div>
 			<% end %>

vendor/built_in_modules/gallery/app/views/panel/gallery/back_end/orbit_galleries/index.html.erb

@@ -92,7 +92,7 @@
         </ul>
       </div>
     </div>
-    <button class='bt-save' style="position:absolute; bottom: 0;">Save</button>
+    <a class="btn bt-save" style="position:absolute; bottom: 0;"><i class="icon-ok"></i><%= I18n.t("gallery.save") %></a>
     <div class="tag_search"><div class="icon-search"></div><input type="text" value="<%= t('gallery.search_tags') %>" onblur="if(this.value=='')this.value='<%= t('gallery.search_tags') %>';" onfocus="if(this.value=='<%= t("gallery.search_tags") %>')this.value='';" id="tag_search_box"></div>
   </div>
   <% end %>

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

@@ -28,4 +28,3 @@ en:
     cate_auth: Category Authorization
     cancel: Cancel
     search_tags: Search Tags
-

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

@@ -15,14 +15,16 @@ zh_tw:
     chinese: 中文
     album_desc: 相簿描述
     add_album: 新增相簿
-    back_to_photos: 回到照片列表
+    back_to_photos: 回到照片
-    back_to_albums: 回到相簿列表
+    back_to_albums: 回到相簿
     add_images: 新增照片
     del_album: 刪除相簿
     edit: 編輯
-    delete_selected: 刪除已選擇項目
+    delete_selected: 刪除選擇項目
-    del_album?:  "刪除這本相簿嗎?"
+    del_album?:  "要刪除這本相簿嗎？"
-    album_not_found: "相簿不存在"
+    album_not_found: 找不到此相簿
-    pic_not_found: "照片不存在"
+    pic_not_found: 找不到該照片
-    search_tags: 搜索標籤
+    save: 儲存
-
+    cate_auth: 類別權限
+    cancel: 取消
+    search_tags: 搜尋標籤