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

Restyle compose button

Browse source 
Move it to a tool bar at the top of the conversation list. This is also
where a search bar will live someday.

Fixes #357

// FREEBIE
This commit is contained in:
lilia 2015-09-18 13:07:19 -07:00
parent 2243c09fea
commit 960754ef04
5 changed files with 28 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
background.html
View file

@ -14,6 +14,9 @@
<span class='socket-status'></span> <span class='socket-status'></span>
</div> </div>
<div class='gutter'> <div class='gutter'>
<div class='tool-bar clearfix'>
<button class='show-new-conversation'></button>
</div>
<div class='conversations scrollable'></div> <div class='conversations scrollable'></div>
<span class='fab'></span> <span class='fab'></span>
</div> </div>

BIN
images/pencil.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 272 B

After

Width:  |  Height:  |  Size: 160 B

2
js/views/inbox_view.js
View file

@ -108,7 +108,7 @@
'click': 'closeMenu', 'click': 'closeMenu',
'click .hamburger': 'toggleMenu', 'click .hamburger': 'toggleMenu',
'click .show-debug-log': 'showDebugLog', 'click .show-debug-log': 'showDebugLog',
'click .fab': 'showCompose', 'click .show-new-conversation': 'showCompose',
'select .gutter .contact': 'openConversation' 'select .gutter .contact': 'openConversation'
}, },
openConversation: function(e, data) { openConversation: function(e, data) {

24
stylesheets/_index.scss
View file

@ -22,6 +22,7 @@
width: 300px; width: 300px;
border-right: solid 1px #ddd; border-right: solid 1px #ddd;
.conversations { .conversations {
height: calc(100% - #{$header-height});
width: 100%; width: 100%;
} }
} }
@ -63,6 +64,7 @@
} }
} }
.tool-bar,
.conversation-header { .conversation-header {
background: $grey_l; background: $grey_l;
border-bottom: solid 1px darken($grey_l, 10%); border-bottom: solid 1px darken($grey_l, 10%);
@ -89,26 +91,20 @@ input.search {
outline: 0; outline: 0;
} }
.fab { .tool-bar {
z-index: 1; button.show-new-conversation {
position: fixed; float: right;
left: 215px;; height: $header-height;
bottom: 22px; width: $header-height;
height: 50px;
width: 50px;
border: 0; border: 0;
border-radius: (60px / 2);
outline: 0; outline: 0;
font: 300 36px $roboto; font: 300 36px $roboto;
color: white; color: white;
background: $blue url('/images/pencil.png') no-repeat center center; background: url('/images/pencil.png') no-repeat center center;
box-shadow: 0 8px 8px -8px rgba(darken($blue, 50%), 0.8);
transition: box-shadow 0.33s, transform 0.33s, background 0.33s;
&:hover { &:hover {
background-color: darken($blue, 3%); background-color: darken($grey_l, 3%);
box-shadow: 0 8px 18px -8px rgba(darken($blue, 50%), 0.9); }
transform: translate3d(0, -1px, 0);
} }
} }

24
stylesheets/manifest.css
View file

@ -401,6 +401,7 @@ img.emoji {
width: 300px; width: 300px;
border-right: solid 1px #ddd; } border-right: solid 1px #ddd; }
.gutter .conversations { .gutter .conversations {
height: calc(100% - 36px);
width: 100%; } width: 100%; }
.socket-status { .socket-status {
@ -429,6 +430,7 @@ img.emoji {
.conversation-stack .conversation:first-child { .conversation-stack .conversation:first-child {
display: block; } display: block; }
.tool-bar,
.conversation-header { .conversation-header {
background: #f3f3f3; background: #f3f3f3;
border-bottom: solid 1px #d9d9d9; } border-bottom: solid 1px #d9d9d9; }
@ -449,25 +451,17 @@ input.search {
margin: 0; margin: 0;
outline: 0; } outline: 0; }
.fab { .tool-bar button.show-new-conversation {
z-index: 1; float: right;
position: fixed; height: 36px;
left: 215px; width: 36px;
bottom: 22px;
height: 50px;
width: 50px;
border: 0; border: 0;
border-radius: 30px;
outline: 0; outline: 0;
font: 300 36px Roboto, "Helvetica Neue", Arial, Helvetica, sans-serif; font: 300 36px Roboto, "Helvetica Neue", Arial, Helvetica, sans-serif;
color: white; color: white;
background: #2090ea url("/images/pencil.png") no-repeat center center; background: url("/images/pencil.png") no-repeat center center; }
box-shadow: 0 8px 8px -8px rgba(1, 6, 10, 0.8); .tool-bar button.show-new-conversation:hover {
transition: box-shadow 0.33s, transform 0.33s, background 0.33s; } background-color: #ebebeb; }
.fab:hover {
background-color: #1689e5;
box-shadow: 0 8px 18px -8px rgba(1, 6, 10, 0.9);
transform: translate3d(0, -1px, 0); }
.last-timestamp { .last-timestamp {
font-size: smaller; } font-size: smaller; }