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

Align header buttons and touch up styles

Browse source 
// FREEBIE
This commit is contained in:
lilia 2016-03-18 15:54:40 -07:00
parent 18a5ce8e54
commit c16356084d
5 changed files with 82 additions and 66 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

50
background.html
View file

@ -5,14 +5,18 @@
<script type='text/x-tmpl-mustache' id='two-column'> <script type='text/x-tmpl-mustache' id='two-column'>
<div class='gutter'> <div class='gutter'>
<div class='title-bar' id='header'> <div class='title-bar' id='header'>
<div class='global-menu menu'> <div class='header-buttons'>
<button class='hamburger'></button> <div class='vertical-align'>
<ul class='menu-list'> <div class='global-menu menu'>
<li><a class='settings'>{{ settings }}</a></li> <button class='hamburger'></button>
<li><a class='show-debug-log'>{{ submitDebugLog }}</a></li> <ul class='menu-list'>
</ul> <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>
</div> </div>
<span class='socket-status' title='Restart Signal'></span>
<h1>Signal</h1> <h1>Signal</h1>
<div class='tool-bar clearfix'> <div class='tool-bar clearfix'>
<!-- <button class='show-new-conversation'></button> --> <!-- <button class='show-new-conversation'></button> -->
@ -40,20 +44,24 @@
<div class='panel'> <div class='panel'>
<div class='conversation-header' <div class='conversation-header'
style='background-color: {{ avatar.color }}'> style='background-color: {{ avatar.color }}'>
<div class='conversation-menu menu'> <div class='header-buttons'>
<button class='hamburger'></button> <div class='vertical-align'>
<ul class='menu-list'> <div class='conversation-menu menu'>
{{#group}} <button class='hamburger'></button>
<li><a class='view-members'>{{ view-members }}</a></li> <ul class='menu-list'>
<!-- <li><a class='update-group'>Update group</a></li> --> {{#group}}
<!-- <li><a class='leave-group'>Leave group</a></li> --> <li><a class='view-members'>{{ view-members }}</a></li>
{{/group}} <!-- <li><a class='update-group'>Update group</a></li> -->
{{^group}} <!-- <li><a class='leave-group'>Leave group</a></li> -->
<li><a class='end-session'>{{ end-session }}</a></li> {{/group}}
<li><a class='verify-identity'>{{ verify-identity }}</a></li> {{^group}}
{{/group}} <li><a class='end-session'>{{ end-session }}</a></li>
<li><a class='destroy'>{{ destroy }}</a></li> <li><a class='verify-identity'>{{ verify-identity }}</a></li>
</ul> {{/group}}
<li><a class='destroy'>{{ destroy }}</a></li>
</ul>
</div>
</div>
</div> </div>
<span class='conversation-title'> <span class='conversation-title'>
{{ #name }} {{ #name }}

4
stylesheets/_conversation.scss
View file

@ -4,7 +4,7 @@
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
padding: 0 10px; padding: 0 36px;
-webkit-user-select: text; -webkit-user-select: text;
} }
.conversation-name + .conversation-number { .conversation-name + .conversation-number {
@ -496,7 +496,7 @@
.bottom-bar { .bottom-bar {
$button-width: 36px; $button-width: 36px;
padding: 5px; padding: 5px 0;
height: 50px; height: 50px;
background: $grey_l; background: $grey_l;

30
stylesheets/_global.scss
View file

@ -29,24 +29,15 @@ body {
} }
#header { #header {
width: 100%;
line-height: 24px;
h1 { h1 {
margin: 20px 0; margin: 0;
line-height: 64px;
padding-left: 20px; padding-left: 20px;
font-size: 22px; font-size: 22px;
color: #ffffff; color: #ffffff;
font-weight: normal; font-weight: normal;
} }
button {
color: inherit;
&:hover {
background-color: rgba(0,0,0, 0.2);
}
}
} }
.title-text { .title-text {
@ -88,6 +79,17 @@ button.back {
border-radius: 10px; border-radius: 10px;
} }
.header-buttons {
float: right;
height: 0;
.vertical-align {
height: 64px;
vertical-align: middle;
display: table-cell;
}
}
.menu { .menu {
position: relative; position: relative;
float: right; float: right;
@ -96,12 +98,18 @@ button.back {
width: $header-height; width: $header-height;
height: $header-height; height: $header-height;
background: url('/images/menu.png') no-repeat center; background: url('/images/menu.png') no-repeat center;
vertical-align: middle;
&:hover {
background-color: rgba(0,0,0, 0.2);
}
} }
.menu-list { .menu-list {
display: none; display: none;
position: absolute; position: absolute;
color: $grey_d; color: $grey_d;
z-index: 50; z-index: 50;
text-align: initial;
top: 100%; top: 100%;
right: 0; right: 0;

12
stylesheets/_index.scss
View file

@ -15,7 +15,7 @@
width: 300px; width: 300px;
.content { .content {
background-color: $grey_l; background-color: $grey_l;
height: calc(100% - 100px); height: calc(100% - 104px);
} }
.conversations { .conversations {
@ -27,14 +27,14 @@
.socket-status { .socket-status {
float: right; float: right;
padding: 6px; line-height: $header-height;
-webkit-app-region: no-drag;
* { * {
display: inline; display: inline;
cursor: pointer; cursor: pointer;
padding-left: 20px; padding-left: 20px;
border-radius: $header-height; border-radius: $header-height;
vertical-align: middle;
&:hover { &:hover {
background: url('/images/refresh.png') center; background: url('/images/refresh.png') center;
@ -65,6 +65,7 @@
height: 64px; height: 64px;
text-align: center; text-align: center;
color: white; color: white;
background: #999999;
.avatar { .avatar {
margin-bottom: -30px; margin-bottom: -30px;
@ -76,11 +77,6 @@
position: relative; position: relative;
} }
} }
.menu.conversation-menu {
button.drop-down {
background: url('/images/arrow_drop_down.png') no-repeat center;
}
}
input.search { input.search {
border: none; border: none;

52
stylesheets/manifest.css
View file

@ -37,19 +37,13 @@ body {
.hide { .hide {
display: none; } display: none; }
#header { #header h1 {
width: 100%; margin: 0;
line-height: 24px; } line-height: 64px;
#header h1 { padding-left: 20px;
margin: 20px 0; font-size: 22px;
padding-left: 20px; color: #ffffff;
font-size: 22px; font-weight: normal; }
color: #ffffff;
font-weight: normal; }
#header button {
color: inherit; }
#header button:hover {
background-color: rgba(0, 0, 0, 0.2); }
.title-text { .title-text {
height: 36px; height: 36px;
@ -81,18 +75,30 @@ button.back {
background: rgba(0, 0, 0, 0.15); background: rgba(0, 0, 0, 0.15);
border-radius: 10px; } border-radius: 10px; }
.header-buttons {
float: right;
height: 0; }
.header-buttons .vertical-align {
height: 64px;
vertical-align: middle;
display: table-cell; }
.menu { .menu {
position: relative; position: relative;
float: right; } float: right; }
.menu .hamburger { .menu .hamburger {
width: 36px; width: 36px;
height: 36px; height: 36px;
background: url("/images/menu.png") no-repeat center; } background: url("/images/menu.png") no-repeat center;
vertical-align: middle; }
.menu .hamburger:hover {
background-color: rgba(0, 0, 0, 0.2); }
.menu .menu-list { .menu .menu-list {
display: none; display: none;
position: absolute; position: absolute;
color: #454545; color: #454545;
z-index: 50; z-index: 50;
text-align: initial;
top: 100%; top: 100%;
right: 0; right: 0;
margin: 0; margin: 0;
@ -405,7 +411,7 @@ input[type=text]:active, input[type=text]:focus, input[type=search]:active, inpu
width: 300px; } width: 300px; }
.gutter .content { .gutter .content {
background-color: #f3f3f3; background-color: #f3f3f3;
height: calc(100% - 100px); } height: calc(100% - 104px); }
.gutter .conversations { .gutter .conversations {
overflow-y: scroll; overflow-y: scroll;
height: 100%; height: 100%;
@ -413,13 +419,13 @@ input[type=text]:active, input[type=text]:focus, input[type=search]:active, inpu
.socket-status { .socket-status {
float: right; float: right;
padding: 6px; line-height: 36px; }
-webkit-app-region: no-drag; }
.socket-status * { .socket-status * {
display: inline; display: inline;
cursor: pointer; cursor: pointer;
padding-left: 20px; padding-left: 20px;
border-radius: 36px; } border-radius: 36px;
vertical-align: middle; }
.socket-status *:hover { .socket-status *:hover {
background: url("/images/refresh.png") center; } background: url("/images/refresh.png") center; }
.socket-status .connecting .icon { .socket-status .connecting .icon {
@ -439,7 +445,8 @@ input[type=text]:active, input[type=text]:focus, input[type=search]:active, inpu
.conversation-header { .conversation-header {
height: 64px; height: 64px;
text-align: center; text-align: center;
color: white; } color: white;
background: #999999; }
.conversation-header .avatar { .conversation-header .avatar {
margin-bottom: -30px; margin-bottom: -30px;
border: solid 2px white; border: solid 2px white;
@ -449,9 +456,6 @@ input[type=text]:active, input[type=text]:focus, input[type=search]:active, inpu
line-height: 44px; line-height: 44px;
position: relative; } position: relative; }
.menu.conversation-menu button.drop-down {
background: url("/images/arrow_drop_down.png") no-repeat center; }
input.search { input.search {
border: none; border: none;
padding: 0; padding: 0;
@ -591,7 +595,7 @@ input.search {
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
padding: 0 10px; padding: 0 36px;
-webkit-user-select: text; } -webkit-user-select: text; }
.conversation-name + .conversation-number:before { .conversation-name + .conversation-number:before {
@ -970,7 +974,7 @@ input.search {
margin-top: 5px; } margin-top: 5px; }
.bottom-bar { .bottom-bar {
padding: 5px; padding: 5px 0;
height: 50px; height: 50px;
background: #f3f3f3; } background: #f3f3f3; }
.bottom-bar form.send { .bottom-bar form.send {