apps setting view

app/assets/Archive/javascripts/orbitdesktop.js

@@ -820,45 +820,57 @@ var orbitDesktop = function(dom){
   this.initializeAppManager = function(target,url,cache){   //this is application search ie is app manager initialization
     var searchArray,allApps;
     var bindHandlers = function(){ // bind handler for app manager page
-      var gn = $('.g_col').length,
+      // var gn = $('.g_col').length,
-          gw = $('.g_col').outerWidth(true);
+      //     gw = $('.g_col').outerWidth(true);
-      $("#app_manager #group_wrapper").css("width",gn*gw);
+      // $("#app_manager #group_wrapper").css("width",gn*gw);
       // $("div#app_manager .group_search").css("width",$(window).width()-200);
       //for textbox search
-      $("#app_manager #searchbox").focus(function(){$(this).val("");}).keyup(function(e){
+      var $elements = $("#app_manager .element"),
-        if($(this).val()){    
+          $result = $("#app_manager .search_result");
-          $("#app_manager .search_result").empty();
+      $("#app_manager #searchbox")
-          $("#app_manager #seperator").hide();
+        .focus(function(){
-          $("#app_manager .element").hide("fold","fast");
+          $(this).val("");
+        })
+        .keyup(function(e){
+          if($(this).val()){    
+            $result.empty();
+            $elements.hide();
 
-          searchArray = $("#app_manager .element:containsi("+$(this).val()+")");
+            searchArray = $elements.filter(":containsi("+$(this).val()+")");
-          if(searchArray.length > 0){
+            if(searchArray.length > 0){
-            // searchArray.each(function(){
+              // searchArray.each(function(){
-            //   $(this).hide("fold","fast");
+              //   $(this).hide("fold","fast");
-            // })
+              // })
-            // $("#app_manager #seperator").show();
+              // $("#app_manager #seperator").show();
-            var i = 0;
+              var i = 0;
-            var $column;
+              var $column;
-            searchArray.each(function(){
+              searchArray.each(function(){
-              i++;
+                i++;
-              if(i == 1){
+                if(i == 1){
-                $column = $("<div style='width:120px; float:left;'></div>");
+                  $column = $('<div class="g_col g_col_w1"></div>');
+                }
+                var $newelement = $('<div class="element w1 h1 hp vp thmc2">'+$(this).html()+'</div>');
+                $column.append($newelement);
+                if(i == 4){
+                  $result.append($column);
+                  i = 0;
+                }
+              })
+              if(i != 0){
+                $result.append($column);
               }
-              var $newelement = $('<div class="search element w1 h1 hp vp thmc2" data-category="desktop">'+$(this).html()+'</div>');
+            } else {
-              $column.append($newelement);
+              $result.text("No Result Found.");
-              if(i == 4){
-                $("#app_manager .search_result").append($column);
-                i = 0;
-              }
-            })
-            if(i != 0){
-              $("#app_manager .search_result").append($column);
             }
-          }else{
+
-            $("#app_manager .search_result").text("No Result Found.");
+          } else {
+            $result.empty();
+            $elements.show();
           }
-        }else{  $("#app_manager .search_result").empty(); $("#app_manager .element").show("fold","fast");}
+        })
-      }).blur(function(){if($(this).val()=="")$(this).val("Search");});
+        .blur(function(){
+          if($(this).val()=="") $(this).val("Search");
+        });
 
       //for Alphabet sorting
       $("#app_manager #alphabet_sort_btn").click(function(){
@@ -888,6 +900,7 @@ var orbitDesktop = function(dom){
         return false;
       });
       o.appname_substr('#group_wrapper .element');
+      o.simple_switch();
     }
     var loadApps = function(){ //this load apps for sorting and searching 
       $.getJSON("/desktop/getapplist",{desktopid:o.desktopId},function(appss){
@@ -1561,6 +1574,33 @@ var orbitDesktop = function(dom){
       });
     });
   };
+  this.simple_switch = function(){
+    $('.s_switch').each(function(){
+      var $switcher = $(this).find('.s_switch_switcher'),
+          $checkbox = $(this).find('input[type=checkbox]'),
+          $status = $(this).find('.s_switch_status'),
+          toggle = '<span class="s_switch_toggle"></span>',
+          status_on = $status.attr('status-on'),
+          status_off = $status.attr('status-off'),
+          ini, set;
+      ini = ($switcher.hasClass('admbg2')) ? null : $switcher.addClass('admbg2');
+      ini = ($switcher.find('.s_switch_toggle').length < 1) ? $checkbox.after(toggle) : null;
+      set = ($checkbox.is(':checked')) ? $status.text(status_on) : $status.text(status_off);
+      $checkbox.change(function(){
+        var v = $(this).attr('checked');
+        switch (v) {
+          case 'checked':
+            $switcher.switchClass('admbg2','thmc2');
+            $status.text(status_on);
+          break;
+          case undefined:
+            $switcher.switchClass('thmc2','admbg2');
+            $status.text(status_off);
+          break;
+        }
+      });
+    });
+  };
   this.single_select = function(){
     // single select
     $('.ssl .ssl_item').each(function(){

app/assets/Archive/stylesheets/desktop/desktop-component.css

@@ -50,6 +50,14 @@
     width: 384px; }
   .s_grid_row .s_grid_12 {
     width: 420px; }
+  .s_grid_row .s_grid_13 {
+    width: 456px; }
+  .s_grid_row .s_grid_14 {
+    width: 492px; }
+  .s_grid_row .s_grid_15 {
+    width: 528px; }
+  .s_grid_row .s_grid_16 {
+    width: 564px; }
   .s_grid_row:last-child {
     margin-bottom: 0; }
   .s_grid_row .s_grid_h_1 {
@@ -216,6 +224,7 @@
   .s_form .s_table thead th {
     border-bottom: solid 1px #eeeeee; }
 
+/* simple select */
 .s_select_g {
   padding: 4px 8px;
   -webkit-box-sizing: border-box;
@@ -273,6 +282,45 @@
     font-size: 9px;
     -webkit-text-size-adjust: none; }
 
+/* simple switch */
+.s_switch {
+  overflow: hidden; }
+  .s_switch .s_switch_status {
+    font-size: 1.5em;
+    line-height: 20px;
+    height: 20px;
+    float: left;
+    margin-right: 60px; }
+  .s_switch .s_switch_switcher {
+    display: block;
+    float: right;
+    position: relative;
+    width: 48px;
+    height: 20px;
+    overflow: hidden; }
+    .s_switch .s_switch_switcher input[type=checkbox] {
+      width: 144px;
+      height: 20px;
+      margin: 0;
+      position: absolute;
+      top: 0;
+      left: -96px; }
+      .s_switch .s_switch_switcher input[type=checkbox] + .s_switch_toggle {
+        display: block;
+        position: absolute;
+        left: -2px;
+        top: -2px;
+        width: 16px;
+        height: 20px;
+        background-color: #000;
+        border: solid 2px white;
+        cursor: pointer;
+        -webkit-transition: left 0.3s ease;
+        -moz-transition: left 0.3s ease;
+        transition: left 0.3s ease; }
+      .s_switch .s_switch_switcher input[type=checkbox]:checked + .s_switch_toggle {
+        left: 32px; }
+
 /* tool bar */
 .toolbar {
   background-color: #f0f0f0;

app/assets/Archive/stylesheets/desktop/desktop-component.scss

@@ -19,9 +19,11 @@
 			margin-left: 0;
 		}
 	}
-	// fixed width column
+	// fixed width column with 12px gutter
-	// full width 420px
+	// 276px width for 8 columns
-	@for $i from 1 through 12 {
+	// 420px width for 12 columns
+	// 564px width for 16 columns
+	@for $i from 1 through 16 {
 		.s_grid_#{$i} {
 			width: 36px * $i - 12px;
 		}
@@ -38,6 +40,7 @@
 			height: 44px * $j - 12px;
 		}
 	}
+
 }
 
 /* simple dropdown menu */
@@ -202,7 +205,7 @@
 	}
 }
 
-
+/* simple select */
 .s_select_g {
 	padding: 4px 8px;
 	// border: solid 1px $gray;
@@ -266,6 +269,52 @@
 	}
 }
 
+/* simple switch */
+.s_switch {
+	overflow: hidden;
+
+	.s_switch_status {
+		font-size: 1.5em;
+		line-height: 20px;
+		height: 20px;
+		float: left;
+		margin-right: 60px;
+	}
+	.s_switch_switcher {
+		display: block;
+		float: right;
+		position: relative;
+		width: 48px;
+		height: 20px;
+		overflow: hidden;
+
+		input[type=checkbox] {
+			width: 144px;
+			height: 20px;
+			margin: 0;
+			position: absolute;
+			top: 0;
+			left: -96px;
+
+			+ .s_switch_toggle {
+				display: block;
+				position: absolute;
+				left: -2px;
+				top: -2px;
+				width: 16px;
+				height: 20px;
+				background-color: #000;
+				border: solid 2px #fff;
+				cursor: pointer;
+				@include transition-type(left,0.3);
+			}
+			&:checked  + .s_switch_toggle {
+				left: 32px;
+			}
+		}
+	}
+}
+
 /* tool bar */
 .toolbar {
 	background-color: #f0f0f0;

app/assets/Archive/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 {
@@ -581,6 +587,8 @@ a.admtxt.admbg2:hover {
   margin-top: 12px;
   overflow: hidden;
   border-top: solid 1px #eeeeee; }
+  .s_action .setting_btn {
+    margin-left: 12px; }
 
 .setting_btn {
   display: block;
@@ -590,28 +598,62 @@ a.admtxt.admbg2:hover {
   text-align: center;
   border: 0; }
 
-.group_search {
+/* Apps Manager */
+#app_info {
   float: left;
+  width: 420px;
+  height: 516px;
   margin-right: 36px; }
+  #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; }
 
 .search_result {
-  float: left;
+  overflow: hidden; }
-  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 */ }
 
 .grp {
   height: 528px;

app/assets/Archive/stylesheets/desktop/desktop-main.scss

@@ -68,6 +68,12 @@ a:focus { outline: none; }
 	content: '';
 	clear: both;
 }
+.valign:before {
+	content: '';
+	height: 100%;
+	display: inline-block;
+	vertical-align: middle;
+}
 .o-loading {
 	font-size: 13px;
 	// font-weight: normal;
@@ -490,11 +496,6 @@ a.admtxt.admbg2:hover {
 	-moz-transform: scale(0.92);
 	transform: scale(0.92);
 }
-// .app.gs_w:active {
-// 	-webkit-transform: scale(0.9);
-// 	-moz-transform: scale(0.9);
-// 	transform: scale(0.9);
-// }
 
 /* header drop menu */
 .sdm_mdr .sdm_o { top: 36px; }
@@ -577,6 +578,10 @@ a.admtxt.admbg2:hover {
 	overflow: hidden;
 	border-top: solid 1px #eee;
 	// background-color: #fff;
+
+	.setting_btn {
+		margin-left: 12px;
+	}
 }
 .setting_btn {
 	display: block;
@@ -588,21 +593,54 @@ a.admtxt.admbg2:hover {
 	border: 0;
 }
 
-
+/* Apps Manager */
-.group_search{
+#app_info {
 	float: left;
+	width: 420px;
+	height: 516px;
 	margin-right: 36px;
 
+	.app_info_header {
+		height: 120px;
+		margin: -12px -12px 12px -12px;
+		position: relative;
+		background-color: lighten($gray, 10%);
+		@include box-sizing;
+		
+		> * {
+			height: 100%;
+		}
+		.app_info_icon {
+			display: block;
+			margin: 0 auto;
+			margin-top: 30px;
+			@include box-sizing;
+		}
+		.app_info_name {
+			display: inline-block;
+			vertical-align: middle;
+			font-size: 2em;
+			width: 300px;
+			word-wrap: break-word;
+		}
+		.panel_close {
+			position: absolute;
+			right: 12px;
+			top: 12px;
+			font-size: 20px;
+		}
+	}
+	.app_info_list {
+		line-height: 1.5em;
+		overflow: hidden;
+
+		label {
+			color: darken($gray, 20%);
+		}
+	}
 }
 .search_result{
-	float: left;
+	overflow: hidden;
-	margin-right: 24px;
-	max-width: 340px;
-}
-.g_sep {
-	width: 12px;
-	border-left: solid 1px #fff;
-	@include box-sizing;
 }
 
 

app/views/desktop/app_manager.html.erb

@@ -13,17 +13,52 @@
 	
 	<div id="holder">
 		<div id="group_wrapper" class="overview" content-layout="simple">
-			<div class="search_result" style="min-width:120px;">
+			<div id="app_info" class="admbg vp hp">
-				
+				<div class="app_info_header s_grid_row hp">
-			</div>
+					<div class="s_grid s_grid_3">
-	<!-- <div class="group g_sep op03" id='seperator' style="height: 516px;display:none;"></div> -->
+						<img class="app_info_icon" src="/assets/icons/wikibooks.png" alt="">
-			<div class="group_search" id="app_list">
+					</div>
-			<!--<div class="element w1 h1 hp vp thmc2" data-category="desktop">
+					<div class="s_grid s_grid_9 valign">
-					<span class="tile thmc2"></span>
+						<h2 class="app_info_name">Clock</h2>
-					<a href="" class="appicon"><img src="" alt=""></a>
+						<a href="" class="panel_close icon-remove"></a>
-					<h1 class="appname thmtxt">O-Music</h1>
+					</div>
-				</div>-->
+				</div>
+				<ul class="app_info_list">
+					<li class="s_grid_row">
+						<label class="s_grid s_grid_3">Activation</label>
+						<div class="s_grid s_grid_9 s_switch">
+							<div class="s_switch_status" status-on="On" status-off="Off"></div>
+							<label class="s_switch_switcher">
+								<input type="checkbox">
+							</label>
+						</div>
+					</li>
+					<li class="s_grid_row">
+						<label class="s_grid s_grid_3">Description</label>
+						<div class="s_grid s_grid_9">
+							Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+						</div>
+					</li>
+					<li class="s_grid_row">
+						<label class="s_grid s_grid_3">Version</label>
+						<div class="s_grid s_grid_9">3.0</div>
+					</li>
+					<li class="s_grid_row">
+						<label class="s_grid s_grid_3">Last Update</label>
+						<div class="s_grid s_grid_9">Sep 2, 2013</div>
+					</li>
+					<li class="s_grid_row">
+						<label class="s_grid s_grid_3">Author</label>
+						<div class="s_grid s_grid_9">Takayuki Miyoshi</div>
+					</li>
+				</ul>
+				<div class="s_action">
+					<a href="" id="" class="setting_btn admbg2 admtxt w1 hh1 hp" onclick="return false;">Remove</a>
+					<a href="" id="" class="setting_btn thmc1 thmtxt w1 hh1 hp" onclick="return false;">Setting</a>
+				</div>
 			</div>
+			<div class="search_result"></div>
+			<div id="app_list"></div>
 			<div class="clear"></div>
 		</div>
 	</div>