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

Refactor back button style

Browse source 
Make it easier to reuse these styles.
This commit is contained in:
lilia 2015-02-23 12:50:07 -08:00
parent d0392a3e04
commit 368cd2f79a
6 changed files with 50 additions and 59 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
index.html
View file

@ -14,8 +14,8 @@
</head>
<body class='signal index'>
<div class='title-bar' id='header'>
<div class='back'>
<button></button>
<div class='new-conversation-title hide'>
<button class='back'></button>
<span class='title-text'>New Message</span>
</div>
</div>

4
js/views/inbox_view.js
View file

@ -24,7 +24,7 @@
this.$gutter = $('#gutter');
this.$contacts = $('#contacts');
this.$fab = this.$el.find('.fab');
this.$back = this.$el.find('.back');
this.$back = this.$el.find('.new-conversation-title');
this.newConversationView = new Whisper.NewConversationView();
this.newConversationView.$el.hide().appendTo(this.$gutter);
@ -40,7 +40,7 @@
},
events: {
'keyup': 'keyup',
'click .back button': 'hideCompose',
'click .back': 'hideCompose',
'click .fab': 'showCompose',
'select #contacts .contact': 'openConversation',
'open .new-conversation': 'openConversation'

17
stylesheets/_conversation.scss
View file

@ -19,23 +19,6 @@
opacity: 0.8;
}
.title-bar {
button {
height: 36px;
line-height: 36px;
margin-right: 8px;
padding: 0;
border: 0;
outline: 0;
color: white;
}
}
button {
cursor: pointer;
}
.timestamp {
font-size: smaller;
}

25
stylesheets/_global.scss
View file

@ -23,6 +23,10 @@ body {
clear: both;
}
.hide {
display: none;
}
#header {
position: fixed;
top: 0;
@ -43,6 +47,27 @@ body {
font-family: $roboto-light;
}
.title-bar button {
width: $header-height;
height: $header-height;
line-height: $header-height;
margin-right: 8px;
padding: 0;
border: 0;
outline: 0;
}
button { cursor: pointer; }
button.back {
float: left;
background: $header-color url('/images/back.png') no-repeat center center;
& + .title-text {
text-indent: -$header-height;
}
}
.menu {
position: relative;
float: right;

15
stylesheets/_index.scss
View file

@ -26,21 +26,6 @@ input.new-message {
outline: 0;
}
.back {
display: none;
text-align: center;
button {
float: left;
width: $header-height;
height: $header-height;
background: $header-color url('/images/back.png') no-repeat center center;
}
span {
text-indent: -$header-height;
}
}
.new-conversation {
.new-group-update-form {
display: none;

44
stylesheets/manifest.css
View file

@ -34,6 +34,9 @@ body {
.clearfix:after {
clear: both; }
.hide {
display: none; }
#header {
position: fixed;
top: 0;
@ -52,6 +55,24 @@ body {
line-height: 36px;
font-family: Roboto-Light, "Helvetica Neue", Arial, Helvetica, sans-serif; }
.title-bar button {
width: 36px;
height: 36px;
line-height: 36px;
margin-right: 8px;
padding: 0;
border: 0;
outline: 0; }
button {
cursor: pointer; }
button.back {
float: left;
background: #f2f2f2 url("/images/back.png") no-repeat center center; }
button.back + .title-text {
text-indent: -36px; }
.menu {
position: relative;
float: right;
@ -132,17 +153,6 @@ input.new-message {
margin: 0;
outline: 0; }
.back {
display: none;
text-align: center; }
.back button {
float: left;
width: 36px;
height: 36px;
background: #f2f2f2 url("/images/back.png") no-repeat center center; }
.back span {
text-indent: -36px; }
.new-conversation .new-group-update-form {
display: none; }
.new-conversation .new-group-update-form button.create-group {
@ -284,18 +294,6 @@ input.new-message {
font-size: smaller;
opacity: 0.8; }
.title-bar button {
height: 36px;
line-height: 36px;
margin-right: 8px;
padding: 0;
border: 0;
outline: 0;
color: white; }
button {
cursor: pointer; }
.timestamp {
font-size: smaller; }