thegamer/Cable-Desktop
2
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

New layout

Browse source 
Move the global header inside the left pane only, expand conversation
panels to full bleed, restyle conversation list items and selected state.

// FREEBIE
This commit is contained in:
lilia 2016-03-18 11:11:36 -07:00
parent 760bfffb50
commit 043a3f9609
5 changed files with 89 additions and 95 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

29
background.html
View file

@ -3,21 +3,22 @@
<head> <head>
<meta charset='utf-8'> <meta charset='utf-8'>
<script type='text/x-tmpl-mustache' id='two-column'> <script type='text/x-tmpl-mustache' id='two-column'>
<div class='title-bar' id='header'>
<div class='global-menu menu'>
<button class='hamburger'></button>
<ul class='menu-list'>
<li><a class='settings'>{{ settings }}</a></li>
<li><a class='show-debug-log'>{{ submitDebugLog }}</a></li>
</ul>
</div>
<span class='socket-status' title='Restart Signal'></span>
<div class='tool-bar clearfix'>
<!-- <button class='show-new-conversation'></button> -->
<input type='search' class='search' placeholder='{{ searchForPeopleOrGroups }}'>
</div>
</div>
<div class='gutter'> <div class='gutter'>
<div class='title-bar' id='header'>
<div class='global-menu menu'>
<button class='hamburger'></button>
<ul class='menu-list'>
<li><a class='settings'>{{ settings }}</a></li>
<li><a class='show-debug-log'>{{ submitDebugLog }}</a></li>
</ul>
</div>
<span class='socket-status' title='Restart Signal'></span>
<h1>Signal</h1>
<div class='tool-bar clearfix'>
<!-- <button class='show-new-conversation'></button> -->
<input type='search' class='search' placeholder='{{ searchForPeopleOrGroups }}'>
</div>
</div>
<div class='content'> <div class='content'>
<div class='conversations scrollable inbox'></div> <div class='conversations scrollable inbox'></div>
<div class='conversations scrollable search-results hide'> <div class='conversations scrollable search-results hide'>

4
stylesheets/_conversation.scss
View file

@ -17,11 +17,9 @@
.conversation { .conversation {
max-width: 950px; max-width: 950px;
background-color: #ffffff; background-color: #ffffff;
margin: 10px auto;
padding: 20px 20px 10px; padding: 20px 20px 10px;
border-radius: 10px; border-radius: 10px;
height: calc(100% - 20px); height: 100%;
border-radius: 10px;
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
background: rgba(0,0,0,0.15); background: rgba(0,0,0,0.15);

32
stylesheets/_global.scss
View file

@ -30,9 +30,15 @@ body {
#header { #header {
width: 100%; width: 100%;
height: 0;
line-height: 24px; line-height: 24px;
color: #f2f2f2;
h1 {
margin: 20px 0;
padding-left: 20px;
font-size: 22px;
color: #ffffff;
font-weight: normal;
}
button { button {
color: inherit; color: inherit;
@ -78,8 +84,8 @@ button.back {
} }
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
background: rgba(0,0,0,0.15);
border-radius: 10px; border-radius: 10px;
background: rgba(255,255,255,0.6);
} }
.menu { .menu {
@ -283,14 +289,12 @@ $avatar-size: 44px;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
background: rgba(255,255,255,0.6); background: rgba(255,255,255,0.6);
margin: 10px; margin: 1px;
border-radius: 10px;
&.selected { &.selected {
background: $grey_l; background: rgb(236, 243, 252);
padding-left: 22px; padding-left: 7px;
margin-left: 0; border-left: 5px solid $blue;
border-radius: 0 10px 10px 0;
} }
&:first-child { &:first-child {
@ -428,10 +432,6 @@ $avatar-size: 44px;
} }
} }
::-webkit-scrollbar-thumb {
background: rgba(0,0,0,0.15);
}
button, input[type=submit] { button, input[type=submit] {
border-radius: 4px; border-radius: 4px;
border: solid 1px #ccc; border: solid 1px #ccc;
@ -495,3 +495,9 @@ $avatar-size: 44px;
font-size: 19px; font-size: 19px;
} }
} }
input[type=text], input[type=search], textarea {
&:active, &:focus {
outline: 1px solid $blue;
}
}

33
stylesheets/_index.scss
View file

@ -9,11 +9,13 @@
} }
.gutter { .gutter {
color: #000000;
background-color: $blue;
float: left; float: left;
width: 300px; width: 300px;
.content { .content {
height: 100%; background-color: $grey_l;
padding: 46px 0 10px; height: calc(100% - 100px);
} }
.conversations { .conversations {
@ -50,7 +52,7 @@
} }
.conversation-stack { .conversation-stack {
padding: $header-height 10px 0px 310px; padding-left: 300px;
.conversation { .conversation {
display: none; display: none;
} }
@ -103,6 +105,9 @@ input.search {
} }
.tool-bar { .tool-bar {
background: $grey_l;
padding: 2px;
button.show-new-conversation { button.show-new-conversation {
float: right; float: right;
height: $header-height; height: $header-height;
@ -119,23 +124,10 @@ input.search {
} }
input.search { input.search {
height: $header-height - 10px; height: $header-height;
width: 270px; width: 100%;
background: rgba(255,255,255,0.2); padding: 10px;
margin: 10px; border: solid 1px $grey_l;
padding: 5px;
&::-webkit-input-placeholder {
color: white;
}
&.active, &:active, &:focus {
background: white;
&::-webkit-input-placeholder {
color: #ccc;
}
}
} }
} }
@ -163,7 +155,6 @@ input.search {
.index { .index {
color: $grey_d; color: $grey_d;
background: #2eace0;
.gutter .new-group-update-form { .gutter .new-group-update-form {
display: none; display: none;

86
stylesheets/manifest.css
View file

@ -39,9 +39,13 @@ body {
#header { #header {
width: 100%; width: 100%;
height: 0; line-height: 24px; }
line-height: 24px; #header h1 {
color: #f2f2f2; } margin: 20px 0;
padding-left: 20px;
font-size: 22px;
color: #ffffff;
font-weight: normal; }
#header button { #header button {
color: inherit; } color: inherit; }
#header button:hover { #header button:hover {
@ -74,8 +78,8 @@ button.back {
width: 10px; } width: 10px; }
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
border-radius: 10px; background: rgba(0, 0, 0, 0.15);
background: rgba(255, 255, 255, 0.6); } border-radius: 10px; }
.menu { .menu {
position: relative; position: relative;
@ -235,13 +239,11 @@ img.emoji {
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
background: rgba(255, 255, 255, 0.6); background: rgba(255, 255, 255, 0.6);
margin: 10px; margin: 1px; }
border-radius: 10px; }
.contact.selected { .contact.selected {
background: #f3f3f3; background: #ecf3fc;
padding-left: 22px; padding-left: 7px;
margin-left: 0; border-left: 5px solid #2090ea; }
border-radius: 0 10px 10px 0; }
.contact:first-child { .contact:first-child {
margin-top: 0; } margin-top: 0; }
.contact:last-child::after { .contact:last-child::after {
@ -336,8 +338,6 @@ img.emoji {
flex-grow: 1; flex-grow: 1;
width: 100%; width: 100%;
resize: none; } resize: none; }
.debug-log ::-webkit-scrollbar-thumb {
background: rgba(0, 0, 0, 0.15); }
.debug-log button, .debug-log input[type=submit] { .debug-log button, .debug-log input[type=submit] {
border-radius: 4px; border-radius: 4px;
border: solid 1px #ccc; border: solid 1px #ccc;
@ -389,6 +389,9 @@ img.emoji {
text-align: center; text-align: center;
font-size: 19px; } font-size: 19px; }
input[type=text]:active, input[type=text]:focus, input[type=search]:active, input[type=search]:focus, textarea:active, textarea:focus {
outline: 1px solid #2090ea; }
.conversation-stack, .conversation-stack,
.new-conversation, .inbox, .gutter { .new-conversation, .inbox, .gutter {
height: 100%; } height: 100%; }
@ -398,11 +401,13 @@ img.emoji {
overflow: auto; } overflow: auto; }
.gutter { .gutter {
color: #000000;
background-color: #2090ea;
float: left; float: left;
width: 300px; } width: 300px; }
.gutter .content { .gutter .content {
height: 100%; background-color: #f3f3f3;
padding: 46px 0 10px; } height: calc(100% - 100px); }
.gutter .conversations { .gutter .conversations {
overflow-y: scroll; overflow-y: scroll;
height: 100%; height: 100%;
@ -427,7 +432,7 @@ img.emoji {
background: url("/images/error_red.png") no-repeat left center; } background: url("/images/error_red.png") no-repeat left center; }
.conversation-stack { .conversation-stack {
padding: 36px 10px 0px 310px; } padding-left: 300px; }
.conversation-stack .conversation { .conversation-stack .conversation {
display: none; } display: none; }
.conversation-stack .conversation:first-child { .conversation-stack .conversation:first-child {
@ -467,29 +472,25 @@ input.search {
input.search::-webkit-search-cancel-button:hover { input.search::-webkit-search-cancel-button:hover {
cursor: pointer; } cursor: pointer; }
.tool-bar button.show-new-conversation { .tool-bar {
float: right; background: #f3f3f3;
height: 36px; padding: 2px; }
width: 36px; .tool-bar button.show-new-conversation {
border: 0; float: right;
outline: 0; height: 36px;
font: 300 36px Roboto, "Helvetica Neue", Arial, Helvetica, sans-serif; width: 36px;
color: white; border: 0;
background: url("/images/pencil.png") no-repeat center center; } outline: 0;
.tool-bar button.show-new-conversation:hover { font: 300 36px Roboto, "Helvetica Neue", Arial, Helvetica, sans-serif;
background-color: #ebebeb; } color: white;
.tool-bar input.search { background: url("/images/pencil.png") no-repeat center center; }
height: 26px; .tool-bar button.show-new-conversation:hover {
width: 270px; background-color: #ebebeb; }
background: rgba(255, 255, 255, 0.2); .tool-bar input.search {
margin: 10px; height: 36px;
padding: 5px; } width: 100%;
.tool-bar input.search::-webkit-input-placeholder { padding: 10px;
color: white; } border: solid 1px #f3f3f3; }
.tool-bar input.search.active, .tool-bar input.search:active, .tool-bar input.search:focus {
background: white; }
.tool-bar input.search.active::-webkit-input-placeholder, .tool-bar input.search:active::-webkit-input-placeholder, .tool-bar input.search:focus::-webkit-input-placeholder {
color: #ccc; }
.last-timestamp { .last-timestamp {
font-size: smaller; font-size: smaller;
@ -509,8 +510,7 @@ input.search {
opacity: 1; } opacity: 1; }
.index { .index {
color: #454545; color: #454545; }
background: #2eace0; }
.index .gutter .new-group-update-form { .index .gutter .new-group-update-form {
display: none; display: none;
padding: 0.5em; } padding: 0.5em; }
@ -607,11 +607,9 @@ input.search {
.conversation { .conversation {
max-width: 950px; max-width: 950px;
background-color: #ffffff; background-color: #ffffff;
margin: 10px auto;
padding: 20px 20px 10px; padding: 20px 20px 10px;
border-radius: 10px; border-radius: 10px;
height: calc(100% - 20px); height: 100%; }
border-radius: 10px; }
.conversation ::-webkit-scrollbar-thumb { .conversation ::-webkit-scrollbar-thumb {
background: rgba(0, 0, 0, 0.15); } background: rgba(0, 0, 0, 0.15); }
.conversation .panel { .conversation .panel {