Updated with icons, latest js and css for desktop

app/assets/javascripts/desktop/orbitdesktopAPI.js

@@ -8,32 +8,37 @@ var orbitDesktopAPI = function(){
 		//msg (string) : message to display
 		//type (string : success, imp, alert
 		//time (int) : duration for notification in seconds
-		var $notify = $("#orbitnote");
-		var img, n_height;
+		var $notify = $('#orbitnote'),
+			ani_method = { direction: 'up',easing: 'easeInOutQuint' },
+			img, n_height;
 		if(!type)type="";
 		switch(type){
 			case "alert":
-			img = "note_alert.png";
+				img = "exclamation-sign";
 			break;
 			case "imp":
-			img = "note_imp.png";
+				img = "warning-sign";
 			break;
 			case "success":
-			img = "note_success.png";
+				img = "ok";
 			break;
 			default:
-			img = "note_alert.png";
+				img = "exclamation-sign";
 			break;
 		}
-		$notify.find("img#note_img").attr("src",o.notifyImgPath+img);
-		$notify.find(".note_message").html(msg);
-		n_height = $notify.outerHeight();
-		if(!time)time=5000; else time=time*1000;
-		$notify
-			.css({'top':-n_height, 'display':'block', 'opacity':0})
-			.animate({top:0,opacity:1},200)
+		if( !time || time > 20) time = 5000; else time = time*1000;
+
+		var sign = '<div class="note_type"><span class="sign icon-'+ img +'"></span></div>',
+			message = '<div class="note_message">'+ msg +'</div>',
+			item = '<div class="note_holder admbg">'+ sign + message +'</div>';
+
+		$(item)
+			.prependTo($notify)
+			.stop(1,1)
+			.toggle('slide', ani_method, 300)
 			.delay(time)
-			.animate({top:-n_height,opacity:0},200);
+			.toggle('slide', ani_method, 800);
+		$notify.find('.note_holder:hidden').remove();
 	};
 	this.executeFunc = function(func,callbackFn){
 		//takes 2 arguments 
@@ -67,7 +72,7 @@ var orbitDesktopAPI = function(){
 	this.changeWallpaper = function(wallpaper){
 		//takes 1 parameter
 		//wallpaper (string): takes wallpaper and sets the wallpaper
-		$("img#thmbackground").attr("src",o.wallpaperPath+wallpaper);
+		$("#thmbackground").attr("src",o.wallpaperPath+wallpaper);
 		o.saveWallpaper(wallpaper);
 	};
 	this.confirm = function(settings,callbackfn){
@@ -111,29 +116,35 @@ var orbitDesktopAPI = function(){
 		})
 		return tempArray;
 	};
-	this.appWindow = function(settings,callbackfn){
+	this.appWindow = function(options,callbackfn){
 		//takes set of arguments as array and gives callback
 		//settings.method (string) : like open and close 
 		//settings.title (string) : the window title
 		//settings.extUrl (boolean) : true for opening external url else false
 		//settings.appid (string) : appid.. user can use this appid to open or close or refresh the window
 		//settings.url (string) : it is the url if you want to force external url to open in appwindow... you have to pass extURL in appid if you want to open externalurl
-		if(typeof settings == "undefined")settings = {};
+		var settings = {
+			method : "open",
+			extUrl : true,
+			title : "New Window"
+		}
+		$.extend(settings,options);
 		if(!settings.appid){
 			o.notify("Invalid AppID.","imp",3);
 			return;
 		}
-		if(!settings.method)settings.method = "open";
-		if(!settings.extUrl)settings.extUrl = true;
+		var isWindow = ($("div.app_frame[data-app="+settings.appid+"]").length > 0 ? $("div.app_frame[data-app="+settings.appid+"]") : null);
+		if(isWindow){
+			o.minimizeBarManager.maximize(isWindow);
+			return;
+		}
 		if(settings.method == 'open'){
 			var appurl = "http://www.rulingcom.com";
 			o.windowcounter++;
-			if(!settings.title)settings.title = "New Window "+o.windowcounter;
 			if(settings.extUrl){
 				if(settings.url){
 					
 					if(settings.url.substr(0,4)!="http")settings.url = "http://"+settings.url;
-					console.log(settings.url)
 					var urlregex = new RegExp("^(http:\/\/www.|https:\/\/www.|ftp:\/\/www.|www.){1}([0-9A-Za-z]+\.)");
 					if(urlregex.test(settings.url))
 						appurl = settings.url;
@@ -147,20 +158,34 @@ var orbitDesktopAPI = function(){
 					return;
 				}
 			}
-			var whtml =$('<div id="app_frame_'+o.windowcounter+'" class="thmc2 app_frame" data-app="'+settings.appid+'"><div id="content"><div id="header" class="hh3"><div class="dtitle hh3 hp" style="text-transform:capitalize;"><span class="thmtxth">'+settings.title+'</span></div><span class="icon-remove hh3 hp thmtxt"></span></div><div id="holder_'+o.windowcounter+'" class="app_holder"><iframe src="'+appurl+'" frameborder="0" scrolling="auto"></iframe><div class="clear"></div></div></div></div>');
+			var whtml =$('<div id="app_frame_'+o.windowcounter+'" class="thmc2 app_frame" data-app="'+settings.appid+'" data-title="'+ settings.title +'"><div class="app_frame_header"><div class="dtitle hh2 hp"><span class="thmtxth">'+settings.title+'</span></div><span class="icon-remove hh2 hp thmtxt"></span><span class="icon-minus hh2 hp thmtxt"></span></div><div id="holder_'+o.windowcounter+'" class="app_holder clear"><iframe src="'+appurl+'" frameborder="0" scrolling="auto"></iframe></div></div>');
 			$(o.contentHolder).append(whtml);
-			var parentwindow = $(o.contentHolder).find("div#app_frame_"+o.windowcounter);
+			var parentwindow = $(o.contentHolder).find("#app_frame_"+o.windowcounter);
 			var app_holder_height = parentwindow.height() - 72;
 			var app_holder_width = parentwindow.width();
 			parentwindow.find("iframe").attr({"height":app_holder_height,"width":app_holder_width});
-			parentwindow.find("div.app_holder").height(app_holder_height);
-			parentwindow.find("span.icon-remove").click(function(){
-				parentwindow.remove();
+			parentwindow.find(".app_holder").height(app_holder_height);
+			parentwindow.find(".icon-remove").click(function(){
+				o.appWindow.close(parentwindow);
+			});
+			parentwindow.find(".icon-minus").click(function(){
+				o.appWindow.minimize(parentwindow);
 			})
+
 		}
+
+		this.appWindow.close = function(win){
+			win.remove();
+		}
+
+		this.appWindow.minimize = function(win){
+			o.minimizeBarManager.minimize(win)
+		}
+
 		if(typeof callbackfn=="function"){
-			callbackfn.call(this);
+			callbackfn.call(this,parentwindow);
 		}
+		return parentwindow;
 	};
 	this.toolPopup = function(settings){
 		if(settings == "destroy"){

app/assets/javascripts/orbitdesktopAPI.js

@@ -0,0 +1,236 @@
+// JavaScript Document
+//Harry Bomrah
+var orbitDesktopAPI = function(){
+	o = this;
+	this.windowcounter = 0;
+	this.notify = function(msg,type,time){
+		//takes 3 arguments
+		//msg (string) : message to display
+		//type (string : success, imp, alert
+		//time (int) : duration for notification in seconds
+		var $notify = $('#orbitnote'),
+			ani_method = { direction: 'up',easing: 'easeInOutQuint' },
+			img, n_height;
+		if(!type)type="";
+		switch(type){
+			case "alert":
+				img = "exclamation-sign";
+			break;
+			case "imp":
+				img = "warning-sign";
+			break;
+			case "success":
+				img = "ok";
+			break;
+			default:
+				img = "exclamation-sign";
+			break;
+		}
+		if( !time || time > 20) time = 5000; else time = time*1000;
+
+		var sign = '<div class="note_type"><span class="sign icon-'+ img +'"></span></div>',
+			message = '<div class="note_message">'+ msg +'</div>',
+			item = '<div class="note_holder admbg">'+ sign + message +'</div>';
+
+		$(item)
+			.prependTo($notify)
+			.stop(1,1)
+			.toggle('slide', ani_method, 300)
+			.delay(time)
+			.toggle('slide', ani_method, 800);
+		$notify.find('.note_holder:hidden').remove();
+	};
+	this.executeFunc = function(func,callbackFn){
+		//takes 2 arguments 
+		//func (object Function) : the function which has to be executed 
+		//callbackFn (object function) : the function for callback
+		func.call(this);
+		if(callbackFn){
+			callbackFn.call(this,func);
+		}
+	};
+	this.sortJSON = function(field, reverse, primer){
+		//takes 3 arguments
+		//field (string): it is the field on which sorting has to be done
+		//reverse (boolean): this is for asc or desc
+		//primer (method): for example pass parseInt for converting the field attribute in integer
+	   var key = function (x) {return primer ? primer(x[field]) : x[field]};
+	   return function (a,b) {
+	       var A = key(a), B = key(b);
+	       return ((A < B) ? -1 : (A > B) ? +1 : 0) * [-1,1][+!!reverse];                  
+	   }
+	};
+	this.rgb2hex = function(rgb) {
+		// takes 1 parameter
+		// rgb (string) : pass rgb string to convert 
+	    rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
+	    var hex = function(x) {
+	        return ("0" + parseInt(x).toString(16)).slice(-2);
+	    }
+	    return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
+	};
+	this.changeWallpaper = function(wallpaper){
+		//takes 1 parameter
+		//wallpaper (string): takes wallpaper and sets the wallpaper
+		$("#thmbackground").attr("src",o.wallpaperPath+wallpaper);
+		o.saveWallpaper(wallpaper);
+	};
+	this.confirm = function(settings,callbackfn){
+		//takes set of arguments in array
+		//settings.buttons (array string) : name of buttons to be displayed
+		//settings.highlighted  (integer) : takes either 1 or 2.. will highlight the button which is passed
+		//settings.message (string) : takes a string and message to be displayed on the confirmbox
+		//callbackfn (object function) : function to callback
+
+		if(!settings.buttons)settings.buttons=["Ok","Cancel"];
+		if(settings.highlighted!=1 && settings.highlighted!=2)settings.highlighted=2;
+		if(!settings.message)settings.message = "Are you sure?"
+		var $confirm = $("#orbitdiag");
+		$confirm.find(".diag_action a").removeClass("thmc1 thmtxt").addClass("admbg admtxt");
+		$confirm.find(".diag_message").text(settings.message);
+		if(settings.highlighted == 1)
+			$confirm.find("#diag_confirm").removeClass("admbg admtxt").addClass("thmc1 thmtxt");
+		if(settings.highlighted == 2)
+			$confirm.find("#diag_cancel").removeClass("admbg admtxt").addClass("thmc1 thmtxt");
+		$confirm.find("#diag_confirm").text(settings.buttons[0]).one("click",function(){
+			$confirm.stop(1,1).fadeOut();
+			$confirm.find(".diag_action a").unbind();
+			if(typeof callbackfn=="function")
+				callbackfn.call(this,true);
+		});
+		$confirm.find("#diag_cancel").text(settings.buttons[1]).one("click",function(){
+			$confirm.stop(1,1).fadeOut();
+			$confirm.find(".diag_action a").unbind();
+			if(typeof callbackfn=="function")
+				callbackfn.call(this,false);
+		});
+		$confirm.stop(1,1).fadeIn();
+	};
+	this.getArrayfromJson = function(tjson,key){
+		// returns array and takes json object and key
+		//json (json object) : json object from which the key has to be extracted
+		// key (string) : key which has to be extracted 
+		var tempArray = new Array;
+		$.each(tjson,function(i,val){
+			tempArray.push(val[key]);
+		})
+		return tempArray;
+	};
+	this.appWindow = function(options,callbackfn){
+		//takes set of arguments as array and gives callback
+		//settings.method (string) : like open and close 
+		//settings.title (string) : the window title
+		//settings.extUrl (boolean) : true for opening external url else false
+		//settings.appid (string) : appid.. user can use this appid to open or close or refresh the window
+		//settings.url (string) : it is the url if you want to force external url to open in appwindow... you have to pass extURL in appid if you want to open externalurl
+		var settings = {
+			method : "open",
+			extUrl : true,
+			title : "New Window"
+		}
+		$.extend(settings,options);
+		if(!settings.appid){
+			o.notify("Invalid AppID.","imp",3);
+			return;
+		}
+		var isWindow = ($("div.app_frame[data-app="+settings.appid+"]").length > 0 ? $("div.app_frame[data-app="+settings.appid+"]") : null);
+		if(isWindow){
+			o.minimizeBarManager.maximize(isWindow);
+			return;
+		}
+		if(settings.method == 'open'){
+			var appurl = "http://www.rulingcom.com";
+			o.windowcounter++;
+			if(settings.extUrl){
+				if(settings.url){
+					
+					if(settings.url.substr(0,4)!="http")settings.url = "http://"+settings.url;
+					var urlregex = new RegExp("^(http:\/\/www.|https:\/\/www.|ftp:\/\/www.|www.){1}([0-9A-Za-z]+\.)");
+					if(urlregex.test(settings.url))
+						appurl = settings.url;
+					else{
+						o.notify("Invalid URL","alert",3);
+						return;
+					}
+				}
+				else{
+					o.notify("Invalid URL","alert",3);
+					return;
+				}
+			}
+			var whtml =$('<div id="app_frame_'+o.windowcounter+'" class="thmc2 app_frame" data-app="'+settings.appid+'" data-title="'+ settings.title +'"><div class="app_frame_header"><div class="dtitle hh2 hp"><span class="thmtxth">'+settings.title+'</span></div><span class="icon-remove hh2 hp thmtxt"></span><span class="icon-minus hh2 hp thmtxt"></span></div><div id="holder_'+o.windowcounter+'" class="app_holder clear"><iframe src="'+appurl+'" frameborder="0" scrolling="auto"></iframe></div></div>');
+			$(o.contentHolder).append(whtml);
+			var parentwindow = $(o.contentHolder).find("#app_frame_"+o.windowcounter);
+			var app_holder_height = parentwindow.height() - 72;
+			var app_holder_width = parentwindow.width();
+			parentwindow.find("iframe").attr({"height":app_holder_height,"width":app_holder_width});
+			parentwindow.find(".app_holder").height(app_holder_height);
+			parentwindow.find(".icon-remove").click(function(){
+				o.appWindow.close(parentwindow);
+			});
+			parentwindow.find(".icon-minus").click(function(){
+				o.appWindow.minimize(parentwindow);
+			})
+
+		}
+
+		this.appWindow.close = function(win){
+			win.remove();
+		}
+
+		this.appWindow.minimize = function(win){
+			o.minimizeBarManager.minimize(win)
+		}
+
+		if(typeof callbackfn=="function"){
+			callbackfn.call(this,parentwindow);
+		}
+		return parentwindow;
+	};
+	this.toolPopup = function(settings){
+		if(settings == "destroy"){
+			$(".desktop_toolpopup").hide("fold",function(){
+				$(this).remove();
+				$(this).parent().css("position","");
+			})
+			return;
+		}
+		if(settings.parent){
+			if(settings.parent.find("div.desktop_toolpopup").length == 0){
+				settings.height = (!settings.height ? "50px" : settings.height);
+				settings.width = (!settings.width ? "150px" : settings.width);
+				settings.html = (!settings.html ?  "" : settings.html);
+
+				//Events
+				settings.onClose = (!settings.onClose ?  function(){} : settings.onClose);
+				settings.beforeOpen = (!settings.beforeOpen ?  function(){} : settings.beforeOpen);
+				settings.onOpen = (!settings.onOpen ?  function(){} : settings.onOpen);
+				settings.beforeClose = (!settings.beforeClose ?  function(){} : settings.beforeClose);
+				//Events end
+
+				var leftpos = settings.parent.outerWidth();
+				var toolpopup = $("<div class='desktop_toolpopup' style='height:"+settings.height+";width:"+settings.width+"; left:"+leftpos+"px;'>"+settings.html+"</div>");
+				settings.parent.css("position","relative");
+				settings.parent.prepend(toolpopup);
+				toolpopup.click(function(event){
+					event.stopPropagation();
+				});
+				settings.beforeOpen.call(this);
+				toolpopup.show("fold",function(){
+					settings.onOpen.call(this);
+					$(document).unbind("click");
+					$(document).one("click",function(e){
+						settings.beforeClose.call(this);
+						toolpopup.hide("fold",function(){
+							toolpopup.remove();
+							settings.parent.css("position","");
+							settings.onClose.call(this);
+						});						
+					})
+				});				
+			}
+		}
+	};
+};
+orbitDesktopAPI.prototype.notifyImgPath = "temp";
+orbitDesktopAPI.prototype.wallpaperPath = "temp";

app/assets/stylesheets/desktop/desktop-main.css

@@ -72,6 +72,12 @@ a:focus {
   content: '';
   clear: both; }
 
+.valign:before {
+  content: '';
+  height: 100%;
+  display: inline-block;
+  vertical-align: middle; }
+
 .o-loading {
   font-size: 13px; }
   .fullsize .o-loading {
@@ -80,14 +86,17 @@ a:focus {
     font-size: 20px; }
 
 #thmbackground {
-  min-height: 100%;
-  min-width: 980px;
   width: 100%;
-  height: auto;
+  height: 100%;
   position: fixed;
   top: 0;
   left: 0;
-  z-index: -1; }
+  z-index: -1;
+  background-repeat: no-repeat;
+  -webkit-background-size: cover;
+  -moz-background-size: cover;
+  -o-background-size: cover;
+  background-size: cover; }
 
 #bgover {
   position: fixed;
@@ -121,13 +130,14 @@ a:focus {
   background-color: #fff; }
 
 .admbg2 {
-  background-color: #ddd; }
+  background-color: #dddddd; }
 
 .admtxt {
   color: #666; }
 
-.admtxt:hover {
-  color: #666; }
+a.admtxt.admbg2:hover {
+  color: #fff;
+  background-color: #aaaaaa; }
 
 .hfn {
   font-size: 15px;
@@ -147,6 +157,15 @@ a:focus {
 .ini_input:focus {
   outline: none; }
 
+.text_ofl {
+  overflow: hidden; }
+  .text_ofl span {
+    display: inline-block;
+    width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    -o-text-overflow: ellipsis; }
+
 /* - Opacity */
 .op00 {
   opacity: 0; }
@@ -238,7 +257,15 @@ a:focus {
 .element {
   margin: 0 12px 12px 0;
   float: left;
-  position: relative; }
+  position: relative;
+  cursor: pointer;
+  -webkit-transition: all 0.2s ease;
+  -moz-transition: all 0.2s ease;
+  transition: all 0.2s ease; }
+  .element:active {
+    -webkit-transform: scale(0.92);
+    -moz-transform: scale(0.92);
+    transform: scale(0.92); }
 
 .group {
   float: left;
@@ -246,12 +273,14 @@ a:focus {
 
 /* desktop layout */
 #container {
-  padding: 48px 0 0 156px; }
+  padding: 48px 0 0 156px;
+  min-width: 800px; }
 
 #header {
   padding: 0 0 12px 0;
-  min-width: 800px;
-  height: 72px; }
+  height: 72px;
+  position: relative;
+  z-index: 2; }
 
 #side {
   width: 60px;
@@ -260,12 +289,13 @@ a:focus {
   margin-right: 96px;
   top: 120px;
   left: 0;
-  z-index: 11; }
+  z-index: 13; }
 
 #holder {
   height: 516px;
   width: auto;
-  position: relative; }
+  position: relative;
+  z-index: 1; }
 
 #rwidget {
   height: 516px; }
@@ -338,37 +368,59 @@ a:focus {
 
 /* panel */
 #panel_l {
-  background-color: #f0f0f0;
+  background-color: #f7f7f7;
   float: left; }
 
 #panel_r {
+  background-color: #fff;
   margin-left: 252px;
-  position: relative; }
+  position: relative;
+  width: auto; }
 
 /* Desktop Notification */
 #orbitnote {
   position: fixed;
   top: 0;
   left: 50%;
-  margin-left: -206px;
+  margin-left: -200px;
   z-index: 99999;
   width: 400px;
-  padding: 0 6px 6px 6px;
-  background-color: #000;
-  background-color: rgba(0, 0, 0, 0.6); }
+  -webkit-transition: height 2s ease;
+  -moz-transition: height 2s ease;
+  transition: height 2s ease; }
   #orbitnote .note_holder {
-    background-color: #f3f3f3;
-    border: solid 1px white;
-    border-top: none;
     overflow: hidden;
-    padding: 24px 24px; }
+    padding: 36px;
+    border: solid 2px #dddddd;
+    border-top: 0;
+    display: none; }
     #orbitnote .note_holder .note_type {
-      float: left; }
-      #orbitnote .note_holder .note_type img {
-        display: block; }
+      display: inline-block;
+      vertical-align: middle;
+      width: 60px;
+      height: 60px;
+      color: #fff; }
+      #orbitnote .note_holder .note_type .sign {
+        display: block;
+        font-size: 40px;
+        width: 40px;
+        height: 40px;
+        padding: 10px;
+        border-radius: 30px;
+        text-align: center; }
+        #orbitnote .note_holder .note_type .sign.icon-ok {
+          background-color: #5BB75B; }
+        #orbitnote .note_holder .note_type .sign.icon-exclamation-sign {
+          background-color: #DA4F49; }
+        #orbitnote .note_holder .note_type .sign.icon-warning-sign {
+          background-color: #FAA732; }
     #orbitnote .note_holder .note_message {
       color: #333;
-      margin: 10px 0 0 48px;
+      display: inline-block;
+      vertical-align: middle;
+      word-wrap: break-word;
+      width: 240px;
+      margin: 0 0 0 20px;
       font-size: 15px; }
 
 /* Desktop Dialogue */
@@ -378,7 +430,8 @@ a:focus {
   height: 100%;
   left: 0;
   top: 0;
-  z-index: 12; }
+  z-index: 12;
+  display: none; }
   #orbitdiag .tile {
     background-color: #000; }
   #orbitdiag .diag_holder {
@@ -435,7 +488,7 @@ a:focus {
   height: 60px;
   margin: 0 auto;
   position: relative; }
-  [data-sizex="1"] .appicon {
+  [data-sizex="1"] .appicon, .w1.h1 .appicon {
     margin-top: 24px; }
   #sections .appicon {
     width: 30px;
@@ -480,6 +533,11 @@ a:focus {
   cursor: move;
   overflow: hidden; }
 
+.gs_w.dragging {
+  -webkit-transform: scale(0.92);
+  -moz-transform: scale(0.92);
+  transform: scale(0.92); }
+
 /* header drop menu */
 .sdm_mdr .sdm_o {
   top: 36px; }
@@ -548,8 +606,9 @@ a:focus {
   padding: 24px 0;
   margin-top: 12px;
   overflow: hidden;
-  border-top: solid 1px #eeeeee;
-  background-color: #fff; }
+  border-top: solid 1px #eeeeee; }
+  .s_action .setting_btn {
+    margin-left: 12px; }
 
 .setting_btn {
   display: block;
@@ -559,28 +618,76 @@ a:focus {
   text-align: center;
   border: 0; }
 
-.group_search {
+/* Apps Manager */
+#app_info {
   float: left;
-  margin-right: 36px; }
+  width: 420px;
+  height: 516px;
+  margin-right: 36px;
+  display: none; }
+  #app_info .app_info_header {
+    height: 120px;
+    margin: -12px -12px 12px -12px;
+    position: relative;
+    background-color: #f7f7f7;
+    -webkit-box-sizing: border-box;
+    /* webkit */
+    -khtml-box-sizing: border-box;
+    /* konqueror */
+    -moz-box-sizing: border-box;
+    /* firefox */
+    -ms-box-sizing: border-box;
+    /* ie */
+    box-sizing: border-box;
+    /* css3 */ }
+    #app_info .app_info_header > * {
+      height: 100%; }
+    #app_info .app_info_header .app_info_icon {
+      display: block;
+      margin: 0 auto;
+      margin-top: 30px;
+      -webkit-box-sizing: border-box;
+      /* webkit */
+      -khtml-box-sizing: border-box;
+      /* konqueror */
+      -moz-box-sizing: border-box;
+      /* firefox */
+      -ms-box-sizing: border-box;
+      /* ie */
+      box-sizing: border-box;
+      /* css3 */ }
+    #app_info .app_info_header .app_info_name {
+      display: inline-block;
+      vertical-align: middle;
+      font-size: 2em;
+      width: 300px;
+      word-wrap: break-word; }
+    #app_info .app_info_header .panel_close {
+      position: absolute;
+      right: 12px;
+      top: 12px;
+      font-size: 20px; }
+  #app_info .app_info_list {
+    line-height: 1.5em;
+    overflow: hidden; }
+    #app_info .app_info_list label {
+      color: #aaaaaa; }
+
+#app_list {
+  float: left; }
+  #app_list .element > * {
+    cursor: pointer; }
 
 .search_result {
   float: left;
-  margin-right: 24px;
-  max-width: 340px; }
-
-.g_sep {
-  width: 12px;
-  border-left: solid 1px white;
-  -webkit-box-sizing: border-box;
-  /* webkit */
-  -khtml-box-sizing: border-box;
-  /* konqueror */
-  -moz-box-sizing: border-box;
-  /* firefox */
-  -ms-box-sizing: border-box;
-  /* ie */
-  box-sizing: border-box;
-  /* css3 */ }
+  overflow: hidden; }
+  .search_result .message {
+    font-size: 15px;
+    word-wrap: break-word; }
+    .search_result .message b {
+      font-size: 20px;
+      display: block;
+      margin-top: 12px; }
 
 .grp {
   height: 528px;
@@ -608,9 +715,10 @@ a:focus {
   overflow: hidden; }
 
 .list_t_title {
-  margin-bottom: 6px;
-  color: #333;
-  font-size: 15px; }
+  padding-bottom: 6px;
+  color: #000;
+  font-size: 15px;
+  line-height: 1.3em; }
 
 .list_t_des {
   line-height: 1.5em;
@@ -618,147 +726,28 @@ a:focus {
   margin-bottom: 4px;
   font-size: 13px; }
 
-.list_item_function a {
-  display: inline-block;
-  padding: 4px;
-  font-size: 11px;
-  -webkit-text-size-adjust: none; }
-
-/* Journal Papers */
-[page-name="journal_p_list"] .list_t_item .inner {
-  padding-left: 30px; }
-[page-name="journal_p_list"] .list_item_action {
-  font-size: 12px;
-  float: left;
-  margin-left: -30px; }
-  [page-name="journal_p_list"] .list_item_action a {
-    display: block;
-    width: 20px;
-    height: 20px;
-    line-height: 20px;
-    margin: 1px 1px 6px 1px; }
-  [page-name="journal_p_list"] .list_item_action .icon-star-empty {
-    color: #999;
-    font-size: 20px; }
-  [page-name="journal_p_list"] .list_item_action .icon-star {
-    color: #faa732;
-    font-size: 20px; }
-  [page-name="journal_p_list"] .list_item_action .icon-check-empty {
-    color: #999;
-    font-size: 20px; }
-  [page-name="journal_p_list"] .list_item_action .icon-check {
-    color: #333;
-    font-size: 20px; }
-[page-name="journal_p_list"] .file_view .list_t_des {
-  overflow: hidden; }
-[page-name="journal_p_list"] .file_view .file {
-  float: left;
-  width: 120px;
-  height: 50px;
-  padding: 6px;
-  margin: 1px;
-  position: relative;
-  -webkit-box-sizing: border-box;
-  /* webkit */
-  -khtml-box-sizing: border-box;
-  /* konqueror */
-  -moz-box-sizing: border-box;
-  /* firefox */
-  -ms-box-sizing: border-box;
-  /* ie */
-  box-sizing: border-box;
-  /* css3 */ }
-  [page-name="journal_p_list"] .file_view .file:hover {
-    background-color: #f7f7f7; }
-  [page-name="journal_p_list"] .file_view .file img {
-    width: 38px;
-    height: 38px;
-    position: absolute;
-    left: 6px;
-    top: 6px; }
-  [page-name="journal_p_list"] .file_view .file .filetitle {
-    display: block;
-    width: 100%;
-    height: 38px;
-    padding-left: 40px;
-    overflow: hidden;
-    -webkit-box-sizing: border-box;
-    /* webkit */
-    -khtml-box-sizing: border-box;
-    /* konqueror */
-    -moz-box-sizing: border-box;
-    /* firefox */
-    -ms-box-sizing: border-box;
-    /* ie */
-    box-sizing: border-box;
-    /* css3 */ }
-
-/* Journal Paper Add */
-#paper_add .s_grid_con {
-  float: left;
-  height: 456px;
-  margin-left: 12px;
-  padding-left: 12px;
-  border-left: solid 1px #eeeeee; }
-  #paper_add .s_grid_con:first-child {
-    margin-left: 0;
-    padding-left: 0;
-    border: none; }
-#paper_add .f_w {
-  width: 336px; }
-#paper_add label {
-  margin-right: 0; }
-
-/* Journal Journal list */
-[page-name="journal_p_journal"] .datalist_item .inner {
-  padding-left: 30px; }
-[page-name="journal_p_journal"] .list_item_action {
-  font-size: 12px;
-  float: left;
-  margin-left: -30px; }
-[page-name="journal_p_journal"] .list_item_action i {
-  color: #999;
-  font-size: 20px;
-  display: block;
-  width: 20px;
-  height: 20px;
-  line-height: 20px;
-  margin: 1px 1px 6px 1px; }
-[page-name="journal_p_journal"] .list_t_desc {
-  font-family: Arial, sans-serif;
-  font-size: 12px;
-  color: #999; }
-
-/* Journal Co-Author */
-[page-name="journal_p_coauthor"] .list_t_item {
-  height: 110px; }
-[page-name="journal_p_coauthor"] .list_item_function a {
-  display: inline-block;
-  padding: 4px;
-  font-family: Arial, sans-serif;
-  font-size: 11px;
-  -webkit-text-size-adjust: none; }
-[page-name="journal_p_coauthor"] .info {
-  font-family: Arial, sans-serif; }
-[page-name="journal_p_coauthor"] .info li {
-  margin-bottom: 8px;
-  color: #999; }
-[page-name="journal_p_coauthor"] .info .name {
-  font-size: 18px;
-  line-height: 24px;
-  color: #333; }
-
-/* Journal Co-Author Relationship*/
-[page-name="journal_p_coauthor_relation"] .edit_co_author_relation {
-  /*margin-left: -10px;*/ }
-[page-name="journal_p_coauthor_relation"] .form_space {
-  margin-bottom: 10px;
-  font-size: 18px;
-  font-family: Arial, sans-serif; }
-
-/* Journal New Co-Author */
-#new_co_author label {
-  margin-right: 0; }
+.list_item_function {
+  position: absolute;
+  right: 0;
+  bottom: -30px;
+  width: 100%;
+  height: 30px;
+  line-height: 30px;
+  text-align: right;
+  -webkit-transition: all 0.3s ease;
+  -moz-transition: all 0.3s ease;
+  transition: all 0.3s ease; }
+  .list_item_function a {
+    display: inline-block;
+    vertical-align: top;
+    margin-left: 4px;
+    padding: 0 6px;
+    font-size: 11px;
+    -webkit-text-size-adjust: none; }
+    .list_item_function a :first-child {
+      margin-left: 0; }
+  .datalist_item:hover .list_item_function {
+    bottom: 0; }
 
 /* App */
 .app_frame {
@@ -775,12 +764,20 @@ a:focus {
     background-color: #fff;
     position: absolute;
     width: 100%; }
-  .app_frame #header .icon-remove {
-    display: block;
-    float: right;
-    line-height: 60px;
-    font-size: 20px;
-    cursor: pointer; }
+  .app_frame .app_frame_header {
+    height: 72px; }
+    .app_frame .app_frame_header .icon-remove {
+      display: block;
+      float: right;
+      line-height: 60px;
+      font-size: 20px;
+      cursor: pointer; }
+     .app_frame .app_frame_header .icon-minus {
+      display: block;
+      float: right;
+      line-height: 60px;
+      font-size: 20px;
+      cursor: pointer; }
 
 /*Tooltip popup */
 .desktop_toolpopup {