Connection page design

app/assets/javascripts/orbitdesktop.js

@@ -118,6 +118,7 @@ var orbitDesktop = function(dom){
 		$(window).resize(function(){
 			var ww = $(window).width();
 			$("img#thmbackground").attr({"width":ww});
+			$('.tinycanvas').tinyscrollbar_update();
 		});
 		var $widget_fn = $('.widget_fn'),$fn_des = $('.fn_des');
 		$widget_fn.hover(function(){
@@ -189,7 +190,6 @@ var orbitDesktop = function(dom){
 				.find('.scrollbar')
 				.delay(1500)
 				.addClass('op00', 500);
-
 			// simple dropdown menu
 			var $sdm = $('.sdm');
 
@@ -464,6 +464,7 @@ var orbitDesktop = function(dom){
 				.find('.scrollbar')
 				.delay(1500)
 				.addClass('op00', 500);
+
 			var $sdm = $('.sdm');
 
 			if( !$sdm.children('.sdm_o') ){
@@ -762,7 +763,19 @@ var orbitDesktop = function(dom){
 						if(usernm!="" && pwd!="")
 							saveaccount(usernm,pwd,type,what);
 							
-				})
+				});
+
+				var $conlist = $('.s_form'),
+					conlist_w = $conlist.length * $conlist.outerWidth(true) + ($conlist.length - 1) * 25;
+
+				$('#connection_setting').width(conlist_w);
+
+				$('.tinycanvas')
+					.tinyscrollbar({ axis: 'x'})
+					.find('.scrollbar')
+					.delay(1500)
+					.addClass('op00', 500);
+				
 			}
 			var saveaccount = function(usernm,pwd,type,what){
 					$.post("/desktop/save_account_info",{email:usernm,password:pwd,account:type,dowhat:what},function(result){

app/assets/stylesheets/desktopmain.css

@@ -386,7 +386,7 @@ a:focus { outline: none; }
 .tinycanvas .track { height: 100%; width: 6px; position: relative; }
 .tinycanvas .thumb { height: 6px; width: 6px; cursor: pointer; overflow: hidden; position: absolute; top: 0; }
 .tinycanvas .thumb .end { overflow: hidden; height: 6px; width: 6px; }
-.tinycanvas .disable{ display: none; }
+.tinycanvas .scrollbar.disable{ display: none; }
 
 /* Orbit Notification */
 #orbitnote {
@@ -447,20 +447,25 @@ a:focus { outline: none; }
 }
 .diag_btn:hover { outline: solid 2px #fff; }
 .s_form { font-size: 15px; }
-.s_form li { overflow: hidden; padding: 6px 0; margin-bottom: 12px; }
+.s_form li { overflow: hidden; padding: 6px; margin-bottom: 12px; }
 .s_form label {
 	font-size: 13px;
 	display: inline-block;
 	vertical-align: middle;
 	width: 100px;
 	margin-right: 24px;
+	color: #777;
 }
 .s_form input[type=text], .s_form input[type=password]{
 	outline: solid 3px #f6f6f6;
 	border: solid 1px #eee;
 	font-size: 18px;
+	font-family: Arial !important;
 	margin: 0;
 	padding: 6px;
+	transition: all 0.3s ease;
+	-webkit-transition: all 0.3s ease;
+	-moz-transition: all 0.3s ease;
 }
 .s_form input[type=text]:focus, .s_form input[type=password]:focus {
 	background-color: #333;
@@ -475,4 +480,40 @@ a:focus { outline: none; }
 }
 .g_col_w1 { width: 132px; }
 .g_col_w2 { width: 264px; }
-.ui-sortable-placeholder { background-color: rgba(0,0,0,0.2); visibility: visible !important; }
+.ui-sortable-placeholder { background-color: rgba(0,0,0,0.2); visibility: visible !important; }
+
+#connection_setting { height: 492px; }
+#connection_setting .s_form {
+	float: left;
+	margin: 0 12px 0 0;
+	padding-left: 24px;
+	height: 100%;
+	border-left: solid 1px #ddd;
+}
+#connection_setting .s_form:first-child { padding-left: 0; border: none; }
+#connection_setting .s_form label { line-height: 30px; }
+#connection_setting .s_form .c_icon, #connection_setting .s_form .c_name {
+	display: inline-block;
+	vertical-align: middle;
+}
+#connection_setting .s_form .c_name { padding: 0 12px; font-size: 18px; }
+#connection_setting .s_form input[type=text], #connection_setting .s_form input[type=password] { width: 202px; }
+#connection_setting .setting_btn { margin-left: 12px; }
+#connection_setting .setting_btn.disable { background-color: #ddd; cursor: default; }
+#connection_setting .c_status {
+	float: right;
+	padding: 6px;
+	font-size: 9px;
+	background-color: #eee;
+	color: #ccc;
+	font-family: Arial;
+	font-weight: bold;
+}
+#connection_setting .c_status_on { background-color: #51A351; color: #fff; }
+#connection_setting .c_info {
+	font-size: 18px;
+	font-family: Arial;
+	padding: 7px 6px;
+	background-color: #fcfcfc;
+	cursor: default;
+}

app/views/desktop/settings/connections.html.erb

@@ -1,10 +1,9 @@
-
+<div class="tinycanvas hp">
-<div class="tinycanvas vp">
+	<div class="scrollbar sb_h vp"><div class="track"><div class="thumb thmc2"><div class="end"></div></div></div></div>
-	<div class="scrollbar sb_v vp"><div class="track"><div class="thumb thmc2"><div class="end"></div></div></div></div>
 	<div class="viewport">
-		<div class="overview">
+		<div id="connection_setting" class="overview vp">
-			<div class="s_title hh3">Connections</div>
+			<!-- <div class="s_title hh3">Connections</div> -->
-			<table width="100%" class="s_form">
+			<!-- <table width="100%" class="s_form">
 				<tr>
 					<td rowspan="2"><img src="assets/gmail.png" alt=""></td>
 					<td valign="top"><label for="s_name1">Username</label><input type="text" id="gmail_username" /></td>
@@ -27,7 +26,41 @@
 				<tr>
 					<td><label for="s_name1">Password</label><input type="password" /></td>
 				</tr>
-			</table>
+			</table> -->
+			<ul class="s_form w2 hp">
+				<li><span class="c_status">No Connection</span></li>
+				<li><img src="assets/connection/facebook.png" alt="" class="c_icon"><h1 class="c_name">Facebook</h1></li>
+				<li><label for="">Account</label><input type="text"></li>
+				<li><label for="">Password</label><input type="password"></li>
+				<li>
+					<div class="s_action">
+						<a href="" class="setting_btn thmc1 thmtxt hp disable">Connecting</a>
+					</div>
+				</li>
+			</ul>
+			<ul class="s_form w2 hp">
+				<li><spanspan class="c_status">No Connection</span></li>
+				<li><img src="assets/connection/twitter.png" alt="" class="c_icon"><h1 class="c_name">Twitter</h1></li>
+				<li><label for="">Account</label><input type="text"></li>
+				<li><label for="">Password</label><input type="password"></li>
+				<li>
+					<div class="s_action">
+						<a href="" class="setting_btn thmc1 thmtxt hp">Connect</a>
+					</div>
+				</li>
+			</ul>
+			<ul class="s_form w2 hp">
+				<li><span class="c_status c_status_on">Connected</span></li>
+				<li><img src="assets/connection/gmail.png" alt="" class="c_icon"><h1 class="c_name">gmail</h1></li>
+				<li><label for="">Account</label><div class="c_info">Harry</div></li>
+				<li><label for="">Password</label><div class="c_info">&#8226;&#8226;&#8226;&#8226;&#8226;&#8226;</div></li>
+				<li>
+					<div class="s_action">
+						<a href="" class="setting_btn thmc1 thmtxt hp">Edit</a>
+						<a href="" class="setting_btn thmc1 thmtxt hp">Remove</a>
+					</div>
+				</li>
+			</ul>
 		</div>
 	</div>
 </div>

app/views/desktop/settings/sections.html.erb

@@ -1,6 +1,5 @@
-
 <div class="tinycanvas vp">
-	<div class="scrollbar sb_v vp"><div class="track"><div class="thumb thmc2"><div class="end"></div></div></div></div>
+	<div class="scrollbar sb_v hp"><div class="track"><div class="thumb thmc2"><div class="end"></div></div></div></div>
 	<div class="viewport">
 		<div class="overview">
 			<div class="s_title hh3">Section Names</div>
@@ -16,4 +15,4 @@
 			</div>
 		</div>
 	</div>
-</div>
+</div>