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'>
<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 class='header-buttons'>
<div class='vertical-align'>
<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>
</div>
<span class='socket-status' title='Restart Signal'></span>
<h1>Signal</h1>
<div class='tool-bar clearfix'>
<!-- <button class='show-new-conversation'></button> -->
@ -40,20 +44,24 @@
<div class='panel'>
<div class='conversation-header'
style='background-color: {{ avatar.color }}'>
<div class='conversation-menu menu'>
<button class='hamburger'></button>
<ul class='menu-list'>
{{#group}}
<li><a class='view-members'>{{ view-members }}</a></li>
<!-- <li><a class='update-group'>Update group</a></li> -->
<!-- <li><a class='leave-group'>Leave group</a></li> -->
{{/group}}
{{^group}}
<li><a class='end-session'>{{ end-session }}</a></li>
<li><a class='verify-identity'>{{ verify-identity }}</a></li>
{{/group}}
<li><a class='destroy'>{{ destroy }}</a></li>
</ul>
<div class='header-buttons'>
<div class='vertical-align'>
<div class='conversation-menu menu'>
<button class='hamburger'></button>
<ul class='menu-list'>
{{#group}}
<li><a class='view-members'>{{ view-members }}</a></li>
<!-- <li><a class='update-group'>Update group</a></li> -->
<!-- <li><a class='leave-group'>Leave group</a></li> -->
{{/group}}
{{^group}}
<li><a class='end-session'>{{ end-session }}</a></li>
<li><a class='verify-identity'>{{ verify-identity }}</a></li>
{{/group}}
<li><a class='destroy'>{{ destroy }}</a></li>
</ul>
</div>
</div>
</div>
<span class='conversation-title'>
{{ #name }}

4
stylesheets/_conversation.scss
View file

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

30
stylesheets/_global.scss
View file

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

12
stylesheets/_index.scss
View file

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

52
stylesheets/manifest.css
View file

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