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

Retool various sub-screens to fit two-column layout

Browse source
This commit is contained in:
lilia 2015-08-26 15:13:14 -07:00
parent c780713a26
commit d07357ce9a
8 changed files with 55 additions and 75 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
background.html
View file

@ -91,10 +91,10 @@
</div>
</script>
<script type='text/x-tmpl-mustache' id='new-group-update-form'>
<div class='title-bar' id='header'>
<div class='conversation-header'>
<button class='back'></button>
<button class='send check'></button>
<span class='title-text'>Update group</span>
<span class='conversation-title'>Update group</span>
</div>
<div class='container'>
<div class='scrollable'>
@ -147,9 +147,9 @@
restrictions. ({{ limit }}kB)
</script>
<script type='text/x-tmpl-mustache' id='message-detail'>
<div class='title-bar' id='header'>
<div class='conversation-header'>
<button class='back'></button>
<span class='title-text'>Message Detail</span>
<span class='conversation-title'>Message Detail</span>
</div>
<div class='container'>
<div class='message-container'></div>
@ -166,18 +166,18 @@
</div>
</script>
<script type='text/x-tmpl-mustache' id='group-member-list'>
<div class='title-bar' id='header'>
<div class='conversation-header'>
<button class='back'></button>
<span class='title-text'>Members</span>
<span class='conversation-title'>Members</span>
</div>
<div class='container'>
<div class='scrollable'></div>
</div>
</script>
<script type='text/x-tmpl-mustache' id='key-verification'>
<div class='title-bar' id='header'>
<div class='conversation-header'>
<button class='back'></button>
<span class='title-text'>Verify Identity</span>
<span class='conversation-title'>Verify Identity</span>
</div>
<div class='container'>
<p> Their identity (they read): </p>
@ -201,12 +201,12 @@
</div>
</script>
<script type='text/x-tmpl-mustache' id='new-conversation'>
<div class='title-bar' id='header'>
<div class='conversation-header'>
<button class='back'></button>
<button class='create check hide'></button>
<span class='title-text'>New Message</span>
<span class='conversation-title'>New Message</span>
</div>
<div class='gutter'>
<div class='container'>
<div class='scrollable'>
<div class='new-group-update-form clearfix'>
<div class='group-avatar'>

2
index.html
View file

@ -4,7 +4,7 @@
<meta charset='utf-8'>
<meta content='width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0' name='viewport'>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Inbox - Signal</title>
<title>Signal</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='/images/icon_128.png' rel='shortcut icon'>

8
js/views/inbox_view.js
View file

@ -87,7 +87,6 @@
this.newConversationView = new Whisper.NewConversationView({
appWindow: options.appWindow
});
this.newConversationView.$el.hide();
this.listenTo(this.newConversationView, 'open',
this.openConversation.bind(this, null));
@ -119,15 +118,12 @@
},
showCompose: function() {
this.newConversationView.reset();
this.$el.hide();
this.newConversationView.$el.insertAfter(this.$el);
this.newConversationView.$el.show();
this.newConversationView.$el.prependTo(this.conversation_stack.el);
this.newConversationView.$input.focus();
this.listenToOnce(this.newConversationView, 'back', this.hideCompose);
},
hideCompose: function() {
this.newConversationView.$el.hide();
this.$el.show();
this.newConversationView.$el.remove();
}
});
});

1
js/views/new_conversation_view.js
View file

@ -159,6 +159,7 @@
},
reset: function() {
this.delegateEvents();
this.$create.hide();
this.$('.new-group-update-form .name').val('');
this.$group_update.hide();

40
stylesheets/_conversation.scss
View file

@ -1,20 +1,17 @@
.conversation-title {
display: block;
line-height: $header-height;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding-left: 10px;
}
.conversation {
.file-input .close {
top: -10px;
}
.conversation-title {
display: block;
line-height: $header-height;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#header {
position: inherit;
}
.discussion-container {
height: calc(100% - 2 * #{$header-height});
}
@ -26,7 +23,6 @@
}
.key-verification {
padding: $header-height 0 0;
.container {
height: 100%;
overflow: auto;
@ -41,7 +37,6 @@
}
.message-detail {
padding: $header-height 0 0;
background: $grey_l;
.container {
@ -97,25 +92,16 @@
font-size: smaller;
}
.group-member-list {
.group-member-list,
.new-group-update-form {
height: 100%;
#header {
position: inherit;
}
.container {
height: calc(100% - #{$header-height});
}
}
.new-group-update-form {
.container {
height: 100%;
padding-top: $header-height;
}
.scrollable {
padding: 0.5em;
}
.new-group-update-form .scrollable {
padding: 0.5em;
}
.private .sender,

5
stylesheets/_global.scss
View file

@ -62,6 +62,7 @@ body {
font-family: $roboto-light;
}
.conversation-header button,
.title-bar button {
width: $header-height;
height: $header-height;
@ -258,7 +259,7 @@ $avatar-size: 44px;
}
}
.title-bar .check {
.conversation-header .check {
float: right;
background: url('/images/check.png') no-repeat center center;
}
@ -299,6 +300,8 @@ $avatar-size: 44px;
margin: 0;
font-size: 1em;
font-weight: 400;
text-overflow: ellipsis;
overflow-x: hidden;
}
}

3
stylesheets/_index.scss
View file

@ -110,9 +110,6 @@ input.search {
font-size: smaller;
}
.new-conversation {
}
.new-contact {
display: none;
.contact-name { display: none; }

49
stylesheets/manifest.css
View file

@ -64,6 +64,7 @@ body {
line-height: 36px;
font-family: Roboto-Light, "Helvetica Neue", Arial, Helvetica, sans-serif; }
.conversation-header button,
.title-bar button {
width: 36px;
height: 36px;
@ -216,7 +217,7 @@ img.emoji {
background: white;
cursor: auto; }
.title-bar .check {
.conversation-header .check {
float: right;
background: url("/images/check.png") no-repeat center center; }
@ -244,7 +245,9 @@ img.emoji {
.contact .contact-name {
margin: 0;
font-size: 1em;
font-weight: 400; }
font-weight: 400;
text-overflow: ellipsis;
overflow-x: hidden; }
.recipients-input .recipients-container {
background-color: white;
@ -449,16 +452,16 @@ input.search {
.conversations .unread .contact-details .last-timestamp {
font-weight: bold; }
.conversation .file-input .close {
top: -10px; }
.conversation .conversation-title {
.conversation-title {
display: block;
line-height: 36px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis; }
.conversation #header {
position: inherit; }
text-overflow: ellipsis;
padding-left: 10px; }
.conversation .file-input .close {
top: -10px; }
.conversation .discussion-container {
height: calc(100% - 2 * 36px); }
@ -466,19 +469,16 @@ input.search {
.conversation, .message-list, .message-detail, .key-verification {
height: 100%; }
.key-verification {
padding: 36px 0 0; }
.key-verification .container {
height: 100%;
overflow: auto; }
.key-verification p {
padding: 1em; }
.key-verification .key {
font-family: monospace;
padding: 0 1em; }
.key-verification .container {
height: 100%;
overflow: auto; }
.key-verification p {
padding: 1em; }
.key-verification .key {
font-family: monospace;
padding: 0 1em; }
.message-detail {
padding: 36px 0 0;
background: #f3f3f3; }
.message-detail .container {
height: 100%;
@ -516,16 +516,13 @@ input.search {
.group-update {
font-size: smaller; }
.group-member-list {
.group-member-list,
.new-group-update-form {
height: 100%; }
.group-member-list #header {
position: inherit; }
.group-member-list .container {
.group-member-list .container,
.new-group-update-form .container {
height: calc(100% - 36px); }
.new-group-update-form .container {
height: 100%;
padding-top: 36px; }
.new-group-update-form .scrollable {
padding: 0.5em; }