developers
/
Orbit
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Connection page design

This commit is contained in:
devin 2012-05-01 18:05:17 +08:00
parent 769a67f026
commit bfc4507696
8 changed files with 101 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
app/assets/images/connection/Thumbs.db Executable file
View File

Binary file not shown.

BIN
app/assets/images/connection/facebook.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 820 B

BIN
app/assets/images/connection/gmail.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.4 KiB

BIN
app/assets/images/connection/twitter.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

17
app/assets/javascripts/orbitdesktop.js
View File

@ -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){

45
app/assets/stylesheets/desktopmain.css
View File

@ -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;
@ -476,3 +481,39 @@ 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; }
#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;
}

47
app/views/desktop/settings/connections.html.erb
View File

@ -1,10 +1,9 @@
<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="tinycanvas hp">
<div class="scrollbar sb_h vp"><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">Connections</div>
<table width="100%" class="s_form">
<div id="connection_setting" class="overview vp">
<!-- <div class="s_title hh3">Connections</div> -->
<!-- <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>

3
app/views/desktop/settings/sections.html.erb
View File

@ -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>