gallery update

add "tag panel", not complete

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

@@ -119,10 +119,11 @@ var galleryAPI = function(){
 	this.loadImages = function(id){
 		//<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-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-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);
 		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>');
@@ -164,6 +165,13 @@ var galleryAPI = function(){
 		})
 		g.albumArea.find("#imgholder").append($addsign);
 
+
+		// tag
+		$('.bt-tag').click(function(){
+		  $('#tag_panel').animate({'right':0});
+		  return false;
+		});
+
 	}
 	this.loadTheater = function(id){
 		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>');
 		g.albumArea.find("#imgholder").load("theater?pic="+id,function(theater,response,xhr){
 			if(xhr.status == 404){
@@ -389,7 +397,7 @@ var galleryAPI = function(){
 		}
 		$("#filter").remove();
 		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-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);

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

@@ -383,7 +383,7 @@ body.fullscreen, .fullscreen #container, .fullscreen #container2, .fullscreen #m
 	text-indent: -999px;
 	background-position: -358px 0;
 	}
-
+/*
 .bt-add { background-position: 0 -106px;	}
 .bt-add:hover { background-position: 0 -296px; }
 .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:hover,  .bt-finish:hover { background-position: 0 -410px; }	
 .bt-save:active,  .bt-finish:active { background-position: 0 -600px; }
+*/
 .bt-finish { display: block; float: right; clear: both; }
 .bt-addnew {
 	margin: 0 auto;
@@ -422,6 +423,7 @@ body.fullscreen, .fullscreen #container, .fullscreen #container2, .fullscreen #m
 	right: 6px;
 	top: 6px;
 	}
+/*
 .bt-close:hover { background-position: -436px 0; }
 .bt-close:active { background-position: -514px 0; }
 .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:hover { background-position: -438px -72px; }
 .bt-languages:active { background-position: -477px -72px; }
+*/
 
 .inputui {
 	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;
 }
 
+/* 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_gallery {
 	margin-bottom: 30px;

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

@@ -61,11 +61,68 @@
         
     </div>
   </div> -->
+  
   <div class="rgbody">
     <div id="imgholder">
 
     </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="rgfn">
   <!--   <a href="" class="btn btn-primary pull-right"><i class="icon-plus icon-white"></i>新增</a> -->

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

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

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

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