mirrors/signal-desktop
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages 2 Wiki Activity Actions

Restyle conversation panel

Browse source 
// FREEBIE
This commit is contained in:
lilia 2016-03-18 13:09:45 -07:00
parent 043a3f9609
commit 18a5ce8e54
8 changed files with 95 additions and 104 deletions
Download patch file Download diff file Expand all files Collapse all files

11
background.html
View file

@ -38,9 +38,10 @@
</script> </script>
<script type='text/x-tmpl-mustache' id='conversation'> <script type='text/x-tmpl-mustache' id='conversation'>
<div class='panel'> <div class='panel'>
<div class='conversation-header'> <div class='conversation-header'
style='background-color: {{ avatar.color }}'>
<div class='conversation-menu menu'> <div class='conversation-menu menu'>
<button class='drop-down'></button> <button class='hamburger'></button>
<ul class='menu-list'> <ul class='menu-list'>
{{#group}} {{#group}}
<li><a class='view-members'>{{ view-members }}</a></li> <li><a class='view-members'>{{ view-members }}</a></li>
@ -54,13 +55,15 @@
<li><a class='destroy'>{{ destroy }}</a></li> <li><a class='destroy'>{{ destroy }}</a></li>
</ul> </ul>
</div> </div>
{{> avatar }}
<span class='conversation-title'> <span class='conversation-title'>
{{ title }} {{ #name }}
<span class='conversation-name'>{{ name }}</span>
{{ /name }}
{{ #number }} {{ #number }}
<span class='conversation-number'>{{ number }}</span> <span class='conversation-number'>{{ number }}</span>
{{ /number }} {{ /number }}
</span> </span>
{{> avatar }}
</div> </div>
<div class='discussion-container'></div> <div class='discussion-container'></div>

28
js/models/conversations.js
View file

@ -287,6 +287,14 @@
}.bind(this)); }.bind(this));
}, },
getName: function() {
if (this.isPrivate()) {
return this.get('name');
} else {
return this.get('name') || 'Unknown group';
}
},
getTitle: function() { getTitle: function() {
if (this.isPrivate()) { if (this.isPrivate()) {
return this.get('name') || this.getNumber(); return this.get('name') || this.getNumber();
@ -338,25 +346,27 @@
this.trigger('change'); this.trigger('change');
} }
}, },
getAvatar: function() { getAvatar: function() {
if (this.avatarUrl === undefined) { if (this.avatarUrl === undefined) {
this.updateAvatarUrl(true); this.updateAvatarUrl(true);
} }
var title = this.get('name');
var color = '#999999';
if (this.isPrivate() && title) {
color = COLORS[Math.abs(this.hashCode()) % 15];
}
if (this.avatarUrl) { if (this.avatarUrl) {
return { url: this.avatarUrl }; return { url: this.avatarUrl, color: color };
} else if (this.isPrivate()) { } else if (this.isPrivate()) {
var title = this.get('name');
if (!title) { if (!title) {
return { content: '#', color: '#999999' }; return { content: '#', color: color };
} }
var initials = title.trim()[0]; var initials = title.trim()[0];
return { return { content: initials, color: color };
color: COLORS[Math.abs(this.hashCode()) % 15],
content: initials
};
} else { } else {
return { url: '/images/group_default.png', color: 'gray' }; return { url: '/images/group_default.png', color: color };
} }
}, },

8
js/views/conversation_view.js
View file

@ -17,7 +17,7 @@
render_attributes: function() { render_attributes: function() {
return { return {
group: this.model.get('type') === 'group', group: this.model.get('type') === 'group',
title: this.model.getTitle(), name: this.model.getName(),
number: this.model.getNumber(), number: this.model.getNumber(),
avatar: this.model.getAvatar(), avatar: this.model.getAvatar(),
'view-members' : i18n('members'), 'view-members' : i18n('members'),
@ -84,7 +84,7 @@
'click .update-group': 'newGroupUpdate', 'click .update-group': 'newGroupUpdate',
'click .verify-identity': 'verifyIdentity', 'click .verify-identity': 'verifyIdentity',
'click .view-members': 'viewMembers', 'click .view-members': 'viewMembers',
'click .drop-down': 'toggleMenu', 'click .conversation-menu .hamburger': 'toggleMenu',
'click .openInbox' : 'openInbox', 'click .openInbox' : 'openInbox',
'click' : 'onClick', 'click' : 'onClick',
'select .message-list .entry': 'messageDetail', 'select .message-list .entry': 'messageDetail',
@ -177,7 +177,7 @@
}, },
closeMenu: function(e) { closeMenu: function(e) {
if (e && !$(e.target).hasClass('drop-down')) { if (e && !$(e.target).hasClass('hamburger')) {
this.$('.menu-list').hide(); this.$('.menu-list').hide();
} }
}, },
@ -271,7 +271,7 @@
$bottomBar.outerHeight( $bottomBar.outerHeight(
this.$messageField.outerHeight() + this.$messageField.outerHeight() +
$attachmentPreviews.outerHeight() + 1); $attachmentPreviews.outerHeight() + 10);
this.view.scrollToBottomIfNeeded(); this.view.scrollToBottomIfNeeded();
}, },

2
js/views/inbox_view.js
View file

@ -110,7 +110,7 @@
}, },
events: { events: {
'click': 'closeMenu', 'click': 'closeMenu',
'click .hamburger': 'toggleMenu', 'click .global-menu .hamburger': 'toggleMenu',
'click .show-debug-log': 'showDebugLog', 'click .show-debug-log': 'showDebugLog',
'click .settings': 'showSettings', 'click .settings': 'showSettings',
'select .gutter .conversation-list-item': 'openConversation', 'select .gutter .conversation-list-item': 'openConversation',

37
stylesheets/_conversation.scss
View file

@ -4,27 +4,21 @@
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
padding-left: 10px; padding: 0 10px;
-webkit-user-select: text; -webkit-user-select: text;
} }
.conversation-number { .conversation-name + .conversation-number {
padding-left: 5px; &:before {
line-height: 1em; content:"\00b7"; // &middot
font-size: small; font-weight: bold;
color: #999; padding: 0 5px 0 4px;
}
} }
.conversation { .conversation {
max-width: 950px;
background-color: #ffffff; background-color: #ffffff;
padding: 20px 20px 10px;
border-radius: 10px;
height: 100%; height: 100%;
::-webkit-scrollbar-thumb {
background: rgba(0,0,0,0.15);
}
.panel { .panel {
height: 100%; height: 100%;
display: flex; display: flex;
@ -43,10 +37,6 @@
padding: 2em 8px 0; padding: 2em 8px 0;
overflow-y: auto; overflow-y: auto;
@media(min-width: $big-avatar-min-width) {
padding-left: 70px;
}
&:before { &:before {
display: block; display: block;
margin: -25px auto 10px; margin: -25px auto 10px;
@ -286,7 +276,7 @@
li { li {
max-width: 800px; max-width: 800px;
margin: 0 8px 16px; margin: 0 auto 16px;
&::after { &::after {
visibility: hidden; visibility: hidden;
@ -506,10 +496,13 @@
.bottom-bar { .bottom-bar {
$button-width: 36px; $button-width: 36px;
margin-top: 4px; padding: 5px;
height: 36px; height: 50px;
border-top: 1px solid $grey_l; background: $grey_l;
background: white;
form.send {
background: #ffffff;
}
button, input, textarea { button, input, textarea {
color: $grey_d; color: $grey_d;

6
stylesheets/_global.scss
View file

@ -91,7 +91,6 @@ button.back {
.menu { .menu {
position: relative; position: relative;
float: right; float: right;
height: 36px;
.hamburger { .hamburger {
width: $header-height; width: $header-height;
@ -102,7 +101,7 @@ button.back {
display: none; display: none;
position: absolute; position: absolute;
color: $grey_d; color: $grey_d;
z-index: 1; z-index: 50;
top: 100%; top: 100%;
right: 0; right: 0;
@ -132,7 +131,6 @@ button.back {
.file-input { .file-input {
position: relative; position: relative;
margin-right: 10px;
box-sizing: content-box; box-sizing: content-box;
border: 1px transparent solid; border: 1px transparent solid;
.choose-file { .choose-file {
@ -464,7 +462,7 @@ $avatar-size: 44px;
width: 100%; width: 100%;
background-color: rgba(0, 0, 0, 0.3); background-color: rgba(0, 0, 0, 0.3);
padding: 0 20px; padding: 0 20px;
z-index: 10; z-index: 100;
.content { .content {
position: relative; position: relative;

35
stylesheets/_index.scss
View file

@ -62,23 +62,18 @@
} }
.conversation-header { .conversation-header {
border-bottom: solid 1px $grey_l2; height: 64px;
margin-bottom: 4px; text-align: center;
padding-bottom: 5px; color: white;
.avatar { .avatar {
float: left; margin-bottom: -30px;
width: 36px; border: solid 2px white;
height: 36px; z-index: 10;
line-height: 36px; width: 48px;
} height: 48px;
@media(min-width: $big-avatar-min-width) { line-height: 44px;
.avatar { position: relative;
width: 70px;
height: 70px;
line-height: 70px;
margin-bottom: -60px;
position: relative;
}
} }
} }
.menu.conversation-menu { .menu.conversation-menu {
@ -128,6 +123,10 @@ input.search {
width: 100%; width: 100%;
padding: 10px; padding: 10px;
border: solid 1px $grey_l; border: solid 1px $grey_l;
&.active {
outline: solid 1px $blue;
}
} }
} }
@ -135,6 +134,7 @@ input.search {
font-size: smaller; font-size: smaller;
float: right; float: right;
margin: 0 10px; margin: 0 10px;
color: $grey;
} }
.new-contact { .new-contact {
@ -165,14 +165,13 @@ input.search {
margin: 6px 0; margin: 6px 0;
font-size: small; font-size: small;
font-weight: 300; font-weight: 300;
color: $grey;
} }
.gutter .timestamp { .gutter .timestamp {
position: absolute; position: absolute;
top: 14px; top: 14px;
right: 12px; right: 12px;
color: #888; color: $grey;
} }
} }

72
stylesheets/manifest.css
View file

@ -83,8 +83,7 @@ button.back {
.menu { .menu {
position: relative; position: relative;
float: right; float: right; }
height: 36px; }
.menu .hamburger { .menu .hamburger {
width: 36px; width: 36px;
height: 36px; height: 36px;
@ -93,7 +92,7 @@ button.back {
display: none; display: none;
position: absolute; position: absolute;
color: #454545; color: #454545;
z-index: 1; z-index: 50;
top: 100%; top: 100%;
right: 0; right: 0;
margin: 0; margin: 0;
@ -113,7 +112,6 @@ button.back {
.file-input { .file-input {
position: relative; position: relative;
margin-right: 10px;
box-sizing: content-box; box-sizing: content-box;
border: 1px transparent solid; } border: 1px transparent solid; }
.file-input .choose-file { .file-input .choose-file {
@ -364,7 +362,7 @@ img.emoji {
width: 100%; width: 100%;
background-color: rgba(0, 0, 0, 0.3); background-color: rgba(0, 0, 0, 0.3);
padding: 0 20px; padding: 0 20px;
z-index: 10; } z-index: 100; }
.modal .content { .modal .content {
position: relative; position: relative;
max-width: 350px; max-width: 350px;
@ -439,21 +437,17 @@ input[type=text]:active, input[type=text]:focus, input[type=search]:active, inpu
display: block; } display: block; }
.conversation-header { .conversation-header {
border-bottom: solid 1px #d9d9d9; height: 64px;
margin-bottom: 4px; text-align: center;
padding-bottom: 5px; } color: white; }
.conversation-header .avatar { .conversation-header .avatar {
float: left; margin-bottom: -30px;
width: 36px; border: solid 2px white;
height: 36px; z-index: 10;
line-height: 36px; } width: 48px;
@media (min-width: 900px) { height: 48px;
.conversation-header .avatar { line-height: 44px;
width: 70px; position: relative; }
height: 70px;
line-height: 70px;
margin-bottom: -60px;
position: relative; } }
.menu.conversation-menu button.drop-down { .menu.conversation-menu button.drop-down {
background: url("/images/arrow_drop_down.png") no-repeat center; } background: url("/images/arrow_drop_down.png") no-repeat center; }
@ -491,11 +485,14 @@ input.search {
width: 100%; width: 100%;
padding: 10px; padding: 10px;
border: solid 1px #f3f3f3; } border: solid 1px #f3f3f3; }
.tool-bar input.search.active {
outline: solid 1px #2090ea; }
.last-timestamp { .last-timestamp {
font-size: smaller; font-size: smaller;
float: right; float: right;
margin: 0 10px; } margin: 0 10px;
color: #616161; }
.new-contact { .new-contact {
display: none; display: none;
@ -517,13 +514,12 @@ input.search {
.index .last-message { .index .last-message {
margin: 6px 0; margin: 6px 0;
font-size: small; font-size: small;
font-weight: 300; font-weight: 300; }
color: #616161; }
.index .gutter .timestamp { .index .gutter .timestamp {
position: absolute; position: absolute;
top: 14px; top: 14px;
right: 12px; right: 12px;
color: #888; } color: #616161; }
.conversations .unread .contact-details .name, .conversations .unread .contact-details .name,
.conversations .unread .contact-details .last-message, .conversations .unread .contact-details .last-message,
@ -595,23 +591,17 @@ input.search {
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
padding-left: 10px; padding: 0 10px;
-webkit-user-select: text; } -webkit-user-select: text; }
.conversation-number { .conversation-name + .conversation-number:before {
padding-left: 5px; content: "\00b7";
line-height: 1em; font-weight: bold;
font-size: small; padding: 0 5px 0 4px; }
color: #999; }
.conversation { .conversation {
max-width: 950px;
background-color: #ffffff; background-color: #ffffff;
padding: 20px 20px 10px;
border-radius: 10px;
height: 100%; } height: 100%; }
.conversation ::-webkit-scrollbar-thumb {
background: rgba(0, 0, 0, 0.15); }
.conversation .panel { .conversation .panel {
height: 100%; height: 100%;
display: flex; display: flex;
@ -627,9 +617,6 @@ input.search {
margin: 0; margin: 0;
padding: 2em 8px 0; padding: 2em 8px 0;
overflow-y: auto; } overflow-y: auto; }
@media (min-width: 900px) {
.conversation .panel .discussion-container .message-list {
padding-left: 70px; } }
.conversation .panel .discussion-container .message-list:before { .conversation .panel .discussion-container .message-list:before {
display: block; display: block;
margin: -25px auto 10px; margin: -25px auto 10px;
@ -803,7 +790,7 @@ input.search {
.message-detail li, .message-detail li,
.message-list li { .message-list li {
max-width: 800px; max-width: 800px;
margin: 0 8px 16px; } margin: 0 auto 16px; }
.message-detail li::after, .message-detail li::after,
.message-list li::after { .message-list li::after {
visibility: hidden; visibility: hidden;
@ -983,10 +970,11 @@ input.search {
margin-top: 5px; } margin-top: 5px; }
.bottom-bar { .bottom-bar {
margin-top: 4px; padding: 5px;
height: 36px; height: 50px;
border-top: 1px solid #f3f3f3; background: #f3f3f3; }
background: white; } .bottom-bar form.send {
background: #ffffff; }
.bottom-bar button, .bottom-bar input, .bottom-bar textarea { .bottom-bar button, .bottom-bar input, .bottom-bar textarea {
color: #454545; } color: #454545; }
.bottom-bar button { .bottom-bar button {