seth
/
jam-cloud
mirror of https://bitbucket.org/jamkazam/jam-cloud.git
1
0
Fork 0
Code Issues Actions Packages Projects Releases Wiki Activity

Start on sidebar from Jeff

This commit is contained in:
Jonathon Wilson 2012-12-31 13:56:18 -07:00
parent 9a6d15280b
commit 9c30e17206
14 changed files with 294 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
app/assets/images/shared/avatar_creepyeye.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.7 KiB

BIN
app/assets/images/shared/avatar_david.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.7 KiB

BIN
app/assets/images/shared/avatar_jonathon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 91 KiB

BIN
app/assets/images/shared/avatar_saltnpepper.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

BIN
app/assets/images/shared/avatar_silverfox.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.9 KiB

BIN
app/assets/images/shared/icon_delete_sm.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
app/assets/images/shared/icon_session.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

BIN
app/assets/images/sidebar/icon_recording.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

23
app/assets/javascripts/layout.js
View File

@ -35,7 +35,7 @@
notifyHeight: 150,
notifyGutter: 10,
collapsedSidebar: 30,
panelHeaderHeight: 48,
panelHeaderHeight: 36,
gutter: 60, // Margin around the whole UI
screenMargin: 0, // Margin around screens (not headers/sidebar)
gridOuterMargin: 6, // Outer margin on Grids (added to screenMargin if screen)
@ -120,9 +120,10 @@
var width = screenWidth - (2 * opts.gutter + 2 * opts.screenMargin);
if (sidebarVisible) {
width -= opts.sidebarWidth;
width -= (opts.sidebarWidth + 2*opts.gridPadding);
} else {
width -= opts.collapsedSidebar;
width -= opts.collapsedSidebar + 2*opts.gridPadding;
width += opts.gutter; // Add back in the right gutter width.
}
var height = screenHeight - opts.headerHeight - (2 * opts.gutter + 2 * opts.screenMargin);
var css = {
@ -139,7 +140,7 @@
*/
function positionOffscreens(screenWidth, screenHeight) {
var top = opts.headerHeight + opts.gutter + opts.screenMargin;
var left = -1 * screenWidth;
var left = -1 * (screenWidth + 2*opts.gutter);
var $screens = $('[layout="screen"]').not('[layout-id="' + currentScreen + '"]');
$screens.css({
top: top,
@ -195,13 +196,14 @@
function layoutSidebar(screenWidth, screenHeight) {
var width = opts.sidebarWidth;
var height = screenHeight - opts.headerHeight - 2 * opts.gutter;
var right = 0;
var expanderHeight = $('[layout-sidebar-expander]').height();
var height = screenHeight - opts.headerHeight - 2 * opts.gutter + expanderHeight;
var right = opts.gutter;
if (!sidebarVisible) {
// Negative right to hide most of sidebar
right = (0 - opts.sidebarWidth) + opts.collapsedSidebar;
}
var top = opts.headerHeight + opts.gutter;
var top = opts.headerHeight + opts.gutter - expanderHeight;
var css = {
width: width,
height: height,
@ -231,11 +233,14 @@
}
var $expandedPanelContents = $('[layout-id="' + expandedPanel + '"] [layout-panel="contents"]');
var combinedHeaderHeight = $('[layout-panel="contents"]').length * opts.panelHeaderHeight;
var searchHeight = $('.sidebar .search').first().height();
logger.debug(searchHeight);
var expanderHeight = $('[layout-sidebar-expander]').height();
var expandedPanelHeight = sidebarHeight - combinedHeaderHeight - expanderHeight;
$expandedPanelContents.animate({"height": expandedPanelHeight + "px"}, opts.animationDuration);
var expandedPanelHeight = sidebarHeight - (combinedHeaderHeight + expanderHeight + searchHeight);
$('[layout-panel="contents"]').hide();
$('[layout-panel="contents"]').css({"height": "1px"});
$expandedPanelContents.show();
$expandedPanelContents.animate({"height": expandedPanelHeight + "px"}, opts.animationDuration);
}
function layoutHeader(screenWidth, screenHeight) {

4
app/assets/stylesheets/client/common.css.scss
View File

@ -2,10 +2,10 @@
* Variables used across files
*/
$ColorUIBackground: #323232; /* Dark Grey */
$ColorUIBackground: #262626; /* Dark Grey */
/* $ColorScreenPrimary: #f34e1d; */ /* JW */
$ColorScreenPrimary: #ed3618; /* Orange */
$ColorElementPrimary: #007985; /* Teal */
$ColorElementPrimary: #0b6672; /* Teal */
$ColorText: #ffffff; /* White */
$ColorLink: #9ec030; /* Lime */
$ColorScreenBackground: lighten($ColorUIBackground, 10%);

4
app/assets/stylesheets/client/jamkazam.css.scss
View File

@ -16,7 +16,9 @@ body {
width: 100%;
height: 100%;
overflow: hidden;
font-family: 'LatoRegular', Arial, sans-serif;
font-family: Raleway, Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: 300;
}
a {

220
app/assets/stylesheets/client/sidebar.css.scss
View File

@ -1,67 +1,165 @@
@import "client/common.css.scss";
@charset "UTF-8";
.sidebar {
background-color: $ColorElementPrimary;
}
.sidebar .panel-header {
background-color: shade($ColorElementPrimary, 10);
}
.sidebar h2 {
padding: 12px;
font-size: 180%;
font-family: LatoLight, Arial, sans-serif;
}
.sidebar .expander {
cursor:pointer;
background-color:$ColorUIBackground;
color: $ColorElementPrimary;
}
.sidebar .expander p {
text-align:right;
font-size: 100%;
font-weight: bold;
font-family: LatoBold, Arial, sans-serif;
padding: 8px;
}
.sidebar .expander p span {
padding: 0px 4px;
margin: 0px 2px;
background-color: $ColorElementPrimary;
color: lighten($ColorElementPrimary, 15);
}
.sidebar li {
position: relative;
height: 48px;
line-height:48px;
margin: 4px 0px 4px 24px;
}
.sidebar li.offline {
color: shade($text, 40%);
}
.sidebar li img {
margin: 8px;
float:left;
}
.sidebar .name {
display:block;
position:absolute;
line-height: 18px;
height: 18px;
left: 48px;
top: 10px;
font-weight: bold;
font-family: LatoBold, Arial, sans-serif;
font-size:110%;
.panel-header {
margin:0px;
padding:0px;
cursor:pointer;
}
.panelcontents {
overflow-y:auto;
overflow-x:hidden;
}
h2 {
background-color: shade($ColorElementPrimary, 20);
margin:0px 0px 6px 0px;
padding: 3px 0px 3px 10px;
font-size: 180%;
font-weight: 100;
color:#a0b9bd;
cursor:pointer;
}
.expander {
background-color:$ColorUIBackground;
font-size:80%;
color:shade($ColorText, 30);
cursor:pointer;
}
.expander p {
text-align:right;
padding: 0px 0px 6px 0px;
}
.expander img {
vertical-align: middle;
margin-left: 12px;
}
.expander.hidden p {
text-align:left;
}
.expander.hidden img {
margin-left: 0px;
}
/*.expander {*/
/*position:relative;*/
/*text-align:right;*/
/*padding: 0px 0px 8px 0px;*/
/*}*/
/*.expander p span {*/
/*padding: 0px 4px;*/
/*margin: 0px 2px;*/
/*background-color: $ColorElementPrimary;*/
/*color: lighten($ColorElementPrimary, 15);*/
/*}*/
.search form {
margin: 0px;
padding: 0px;
}
.search input[type="text"] {
background-color:#227985;
border: solid 1px #01545f;
font-weight:400;
font-size:15px;
color:#abd2d7;
width: 92%;
margin: 4px 4px 8px 8px;
padding: 3px;
}
li {
position: relative;
border-bottom:solid 1px shade($ColorElementPrimary, 20);
clear:both;
}
li.offline {
background-color: shade($ColorElementPrimary, 20);
color: shade($text, 10);
opacity:0.5;
ms-filter: "alpha(opacity=50)";
}
li .avatar-small {
float:left;
padding:1px;
width:36px;
height:36px;
background-color:#ed3618;
margin:10px;
-webkit-border-radius:18px;
-moz-border-radius:18px;
border-radius:18px;
}
li .avatar-small img {
width: 36px;
height: 36px;
-webkit-border-radius:18px;
-moz-border-radius:18px;
border-radius:18px;
}
li .friend-name {
float:left;
font-size:18px;
margin-top:12px;
}
li .friend-status {
font-size:11px;
color:#D5E2E4;
}
.friend-icon {
float:right;
margin-top:18px;
margin-right:20px;
}
li a {
color:#B3DD15;
}
li a:hover {
color:#FFF;
}
/*li img {*/
/*margin: 8px;*/
/*float:left;*/
/*}*/
.name {
display:block;
position:absolute;
line-height: 18px;
height: 18px;
left: 48px;
top: 10px;
font-weight: bold;
font-family: LatoBold, Arial, sans-serif;
font-size:110%;
}
.status {
display:block;
position:absolute;
line-height:12px;
height: 12px;
left: 48px;
top: 26px;
font-style: italic;
font-family: LatoItalic, Arial, sans-serif;
font-size: 100%;
}
}
.sidebar .status {
display:block;
position:absolute;
line-height:12px;
height: 12px;
left: 48px;
top: 26px;
font-style: italic;
font-family: LatoItalic, Arial, sans-serif;
font-size: 100%;
}

126
app/views/clients/_sidebar.html.erb
View File

@ -1,25 +1,94 @@
<div layout="sidebar" class="sidebar" style="display:none;">
<div layout-sidebar-expander="visible" class="expander visible">
<p>Hide <span>&gt;&gt;</span></p>
<p>HIDE
<%= image_tag "sidebar/expand_arrows_right.jpg" %>
</p>
</div>
<div layout-sidebar-expander="hidden" class="expander hidden">
<p><span>&lt;&lt;</span></p>
<p>
<%= image_tag "sidebar/expand_arrows_left.jpg" %>
</p>
</div>
<div layout="panel" layout-id="panel1">
<div class="search">
<div layout-panel="header" class="panel-header">
<h2>search</h2>
</div>
<div class="searchbox">
<form>
<input id="search-input" autocomplete="off" type="text" name="search" placeholder="enter search terms" />
</form>
</div>
</div>
<div layout="panel" layout-id="panelFriends">
<div layout-panel="collapsed">
F
</div>
<div layout-panel="expanded" class="panel expanded">
<div layout-panel="header" class="panel-header">
<h2>Friends</h2>
<h2>friends</h2>
</div>
<div layout-panel="contents" class="panelcontents">
<ul>
<li>
<%= image_tag "avatars/avatar_david.jpg", :class => "avatar small" %>
<p class="name">David Wilson</p>
<p class="status">Session: <a href="#">Blues at Seven</a></p>
<div class="avatar-small">
<%= image_tag "avatars/avatar_david.jpg" %>
</div>
<div class="friend-name">
David Wilson<br/>
<span class="friend-status">
<a href="#">In Session</a>, started at 12:34 pm
</span>
</div>
<div class="friend-icon">
<%= image_tag "shared/icon_session.png", :width=>24, :height=>24 %>
</div>
<br clear="all" />
</li>
<li>
<div class="avatar-small">
<%= image_tag "shared/avatar_creepyeye.jpg" %>
</div>
<div class="friend-name">
Brian Smith<br/>
<span class="friend-status">Available</span>
</div>
<div class="friend-icon"></div>
<br clear="all" />
</li>
<li>
<div class="avatar-small">
<%= image_tag "shared/avatar_silverfox.jpg" %>
</div>
<div class="friend-name">
Peter Walker<br/>
<span class="friend-status">
Recording: <a href="#">Seven Trails</a>
</span>
</div>
<div class="friend-icon">
<%= image_tag "sidebar/icon_recording.png", :width=>24, :height=>24 %>
</div>
<br clear="all" />
</li>
<li class="offline">
<div class="avatar-small">
<%= image_tag "shared/avatar_saltnpepper.jpg" %>
</div>
<div class="friend-name">
Seth Call<br/>
<span class="friend-status">
Offline
</span>
</div>
<div class="friend-icon"></div>
<br clear="all" />
</li>
<!--
<li>
<%= image_tag "avatars/avatar_brian.jpg", :class => "avatar small" %>
<p class="name">Brian Smith</p>
@ -30,28 +99,63 @@
<p class="name">Peter Walker</p>
<p class="status">Practicing</p>
</li>
<li>
<%= image_tag "avatars/avatar_peter.jpg", :class => "avatar small" %>
<p class="name">Peter Walker</p>
<p class="status">Practicing</p>
</li>
<li>
<%= image_tag "avatars/avatar_peter.jpg", :class => "avatar small" %>
<p class="name">Peter Walker</p>
<p class="status">Practicing</p>
</li>
<li>
<%= image_tag "avatars/avatar_peter.jpg", :class => "avatar small" %>
<p class="name">Peter Walker</p>
<p class="status">Practicing</p>
</li>
<li>
<%= image_tag "avatars/avatar_peter.jpg", :class => "avatar small" %>
<p class="name">Peter Walker</p>
<p class="status">Practicing</p>
</li>
<li class="offline">
<%= image_tag "avatars/avatar_seth.jpg", :class => "avatar small" %>
<p class="name">Seth Call</p>
<p class="status">Offline</p>
</li>
-->
</ul>
</div>
</div>
</div>
<div layout="panel" layout-id="panel2">
<div layout="panel" layout-id="panelChat">
<div layout-panel="collapsed">
S
C
</div>
<div layout-panel="expanded" class="panel expanded">
<div layout-panel="header" class="panel-header">
<h2>Session</h2>
<h2>chat</h2>
</div>
<div layout-panel="contents" class="panelcontents">
When in a session, this will show details.
Chat contents go here.
</div>
</div>
</div>
<div layout="panel" layout-id="panelNotifications">
<div layout-panel="collapsed">
N
</div>
<div layout-panel="expanded" class="panel expanded">
<div layout-panel="header" class="panel-header">
<h2>notifications</h2>
</div>
<div layout-panel="contents" class="panelcontents">
Notifications contents go here.
</div>
</div>
</div>
</div>

2
app/views/layouts/client.html.erb
View File

@ -5,7 +5,7 @@
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="css/ie.css" media="screen, projection"/>
<![endif]-->
<link href='http://fonts.googleapis.com/css?family=Raleway:100,200,300,400,500,600,700' rel='stylesheet' type='text/css'>
<%= stylesheet_link_tag "client/ie", media: "all" %>
<%= stylesheet_link_tag "client/jamkazam", media: "all" %>
<%= stylesheet_link_tag "client/header", media: "all" %>