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

2
index.html
View file

@ -4,7 +4,7 @@
<meta charset='utf-8'> <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 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"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Inbox - Signal</title> <title>Signal</title>
<meta name="description" content=""> <meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<link href='/images/icon_128.png' rel='shortcut icon'> <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({ this.newConversationView = new Whisper.NewConversationView({
appWindow: options.appWindow appWindow: options.appWindow
}); });
this.newConversationView.$el.hide();
this.listenTo(this.newConversationView, 'open', this.listenTo(this.newConversationView, 'open',
this.openConversation.bind(this, null)); this.openConversation.bind(this, null));
@ -119,15 +118,12 @@
}, },
showCompose: function() { showCompose: function() {
this.newConversationView.reset(); this.newConversationView.reset();
this.$el.hide(); this.newConversationView.$el.prependTo(this.conversation_stack.el);
this.newConversationView.$el.insertAfter(this.$el);
this.newConversationView.$el.show();
this.newConversationView.$input.focus(); this.newConversationView.$input.focus();
this.listenToOnce(this.newConversationView, 'back', this.hideCompose); this.listenToOnce(this.newConversationView, 'back', this.hideCompose);
}, },
hideCompose: function() { hideCompose: function() {
this.newConversationView.$el.hide(); this.newConversationView.$el.remove();
this.$el.show();
} }
}); });
}); });

1
js/views/new_conversation_view.js
View file

@ -159,6 +159,7 @@
}, },
reset: function() { reset: function() {
this.delegateEvents();
this.$create.hide(); this.$create.hide();
this.$('.new-group-update-form .name').val(''); this.$('.new-group-update-form .name').val('');
this.$group_update.hide(); 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 { .conversation {
.file-input .close { .file-input .close {
top: -10px; top: -10px;
} }
.conversation-title {
display: block;
line-height: $header-height;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#header {
position: inherit;
}
.discussion-container { .discussion-container {
height: calc(100% - 2 * #{$header-height}); height: calc(100% - 2 * #{$header-height});
} }
@ -26,7 +23,6 @@
} }
.key-verification { .key-verification {
padding: $header-height 0 0;
.container { .container {
height: 100%; height: 100%;
overflow: auto; overflow: auto;
@ -41,7 +37,6 @@
} }
.message-detail { .message-detail {
padding: $header-height 0 0;
background: $grey_l; background: $grey_l;
.container { .container {
@ -97,25 +92,16 @@
font-size: smaller; font-size: smaller;
} }
.group-member-list { .group-member-list,
.new-group-update-form {
height: 100%; height: 100%;
#header {
position: inherit;
}
.container { .container {
height: calc(100% - #{$header-height}); height: calc(100% - #{$header-height});
} }
} }
.new-group-update-form { .new-group-update-form .scrollable {
.container { padding: 0.5em;
height: 100%;
padding-top: $header-height;
}
.scrollable {
padding: 0.5em;
}
} }
.private .sender, .private .sender,

5
stylesheets/_global.scss
View file

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

3
stylesheets/_index.scss
View file

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

49
stylesheets/manifest.css
View file

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