diff --git a/app/assets/images/shared/avatar_creepyeye.jpg b/app/assets/images/shared/avatar_creepyeye.jpg new file mode 100644 index 000000000..7d911e103 Binary files /dev/null and b/app/assets/images/shared/avatar_creepyeye.jpg differ diff --git a/app/assets/images/shared/avatar_david.jpg b/app/assets/images/shared/avatar_david.jpg new file mode 100644 index 000000000..4489aa229 Binary files /dev/null and b/app/assets/images/shared/avatar_david.jpg differ diff --git a/app/assets/images/shared/avatar_jonathon.png b/app/assets/images/shared/avatar_jonathon.png new file mode 100644 index 000000000..4f09c1bed Binary files /dev/null and b/app/assets/images/shared/avatar_jonathon.png differ diff --git a/app/assets/images/shared/avatar_saltnpepper.jpg b/app/assets/images/shared/avatar_saltnpepper.jpg new file mode 100644 index 000000000..dc28376ab Binary files /dev/null and b/app/assets/images/shared/avatar_saltnpepper.jpg differ diff --git a/app/assets/images/shared/avatar_silverfox.jpg b/app/assets/images/shared/avatar_silverfox.jpg new file mode 100644 index 000000000..3ae180e13 Binary files /dev/null and b/app/assets/images/shared/avatar_silverfox.jpg differ diff --git a/app/assets/images/shared/icon_delete_sm.png b/app/assets/images/shared/icon_delete_sm.png new file mode 100644 index 000000000..d17c9d604 Binary files /dev/null and b/app/assets/images/shared/icon_delete_sm.png differ diff --git a/app/assets/images/shared/icon_session.png b/app/assets/images/shared/icon_session.png new file mode 100644 index 000000000..848f5393d Binary files /dev/null and b/app/assets/images/shared/icon_session.png differ diff --git a/app/assets/images/sidebar/icon_recording.png b/app/assets/images/sidebar/icon_recording.png new file mode 100644 index 000000000..a5f51c4fa Binary files /dev/null and b/app/assets/images/sidebar/icon_recording.png differ diff --git a/app/assets/javascripts/layout.js b/app/assets/javascripts/layout.js index b2914eeb1..3e5380646 100644 --- a/app/assets/javascripts/layout.js +++ b/app/assets/javascripts/layout.js @@ -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) { diff --git a/app/assets/stylesheets/client/common.css.scss b/app/assets/stylesheets/client/common.css.scss index e3ccab5b7..688c53e87 100644 --- a/app/assets/stylesheets/client/common.css.scss +++ b/app/assets/stylesheets/client/common.css.scss @@ -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%); diff --git a/app/assets/stylesheets/client/jamkazam.css.scss b/app/assets/stylesheets/client/jamkazam.css.scss index ae499ee93..566c06e08 100644 --- a/app/assets/stylesheets/client/jamkazam.css.scss +++ b/app/assets/stylesheets/client/jamkazam.css.scss @@ -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 { diff --git a/app/assets/stylesheets/client/sidebar.css.scss b/app/assets/stylesheets/client/sidebar.css.scss index 9d4c76b00..005cb6f04 100644 --- a/app/assets/stylesheets/client/sidebar.css.scss +++ b/app/assets/stylesheets/client/sidebar.css.scss @@ -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%; -} diff --git a/app/views/clients/_sidebar.html.erb b/app/views/clients/_sidebar.html.erb index 5c2253697..b73df88f3 100644 --- a/app/views/clients/_sidebar.html.erb +++ b/app/views/clients/_sidebar.html.erb @@ -1,25 +1,94 @@