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

get frontend rendering with new markup/css

Browse source
This commit is contained in:
lilia 2014-07-27 12:12:59 -10:00
parent 518bdb2056
commit 95c31629b7
6 changed files with 51 additions and 22 deletions
Download patch file Download diff file Expand all files Collapse all files

50
index.html
View file

@ -11,9 +11,8 @@
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<link href='/favicon.ico' rel='shortcut icon'> <link href='/favicon.ico' rel='shortcut icon'>
<link href="/stylesheets/normalize.css" rel="stylesheet" type="text/css" /><link href="/stylesheets/manifest.css" rel="stylesheet" type="text/css" /> <link href="/stylesheets/normalize.css" rel="stylesheet" type="text/css" /><link href="/stylesheets/manifest.css" rel="stylesheet" type="text/css" />
<script src="/javascripts/first.js" type="text/javascript"></script>
</head> </head>
<body class='signal index'> <body class='signal index' data-name="curve25519" data-tools="pnacl" data-configs="Debug Release" data-path="nacl/pnacl/{config}">
<div class='title-bar'> <div class='title-bar'>
<h1>Signal</h1> <h1>Signal</h1>
</div> </div>
@ -30,11 +29,11 @@
<div class='search'> <div class='search'>
<input name='contact_search' placeholder='Search' type='search'> <input name='contact_search' placeholder='Search' type='search'>
</div> </div>
<div class='gutter'> <div id='gutter' class='gutter'>
<div class='search'> <div class='search'>
<input name='contact_search' placeholder='Search' type='search'> <input name='contact_search' placeholder='Search' type='search'>
</div> </div>
<div class='contact'> <script type='text/x-tmpl-mustache' id='contact'>
<img class='avatar' src='{{ contact_avatar }}'> <img class='avatar' src='{{ contact_avatar }}'>
<div class='contact-details'> <div class='contact-details'>
<h3> <h3>
@ -46,20 +45,19 @@
<span class='last-timestamp'> <span class='last-timestamp'>
{{ last_message_timestamp }} {{ last_message_timestamp }}
</span> </span>
</div> </script>
</div>
</div> </div>
<div class='conversation'> <div class='conversation'>
<ul class='discussion'> <ul id='discussion' class='discussion'>
<li class='entry'> <script type='text/x-tmpl-mustache' id='message'>
<div class='bubble bubble_context {{ }}'> <div class='bubble bubble_context {{ bubble_class }}'>
<ul class='volley'> <ul class='volley'>
<li class='message'> <li class='message'>
{{ message }} {{ message }}
</li> </li>
</ul> </ul>
</div> </div>
</li> </script>
</ul> </ul>
<div class='send-message-area'> <div class='send-message-area'>
<div class='message-composer'> <div class='message-composer'>
@ -79,7 +77,35 @@
</div> </div>
</div> </div>
<!-- / Final Scripts --> <!-- / Final Scripts -->
<script src='//code.jquery.com/jquery-1.11.0.min.js'></script> <script type="text/javascript" src="js-deps/nacl-common.js"></script>
<script src="/javascripts/last.js" type="text/javascript"></script> <script type="text/javascript" src="js-deps/CryptoJS.js"></script>
<script type="text/javascript" src="js-deps/curve255.js"></script>
<script type="text/javascript" src="js-deps/Long.min.js"></script>
<script type="text/javascript" src="js-deps/ByteBuffer.min.js"></script>
<script type="text/javascript" src="js-deps/ProtoBuf.min.js"></script>
<script type="text/javascript" src="js-deps/underscore.js"></script>
<script type="text/javascript" src="js-deps/backbone.js"></script>
<script type="text/javascript" src="js-deps/backbone.localStorage.js"></script>
<script type="text/javascript" src="js-deps/mustache.js"></script>
<script type="text/javascript" src="js-deps/libphonenumber_api-compiled.js"></script>
<script type="text/javascript" src="js/helpers.js"></script>
<script type="text/javascript" src="js/webcrypto.js"></script>
<script type="text/javascript" src="js/crypto.js"></script>
<script type="text/javascript" src="js/models/messages.js"></script>
<script type="text/javascript" src="js/models/threads.js"></script>
<script type="text/javascript" src="js/api.js"></script>
<script type="text/javascript" src="js/sendmessage.js"></script>
<script type="text/javascript" src="js/chromium.js"></script>
<script type="text/javascript" src="js/views/notifications.js"></script>
<script type="text/javascript" src="js/views/list_view.js"></script>
<script type="text/javascript" src="js/views/message_view.js"></script>
<script type="text/javascript" src="js/views/message_list_view.js"></script>
<script type="text/javascript" src="js/views/conversation_list_item_view.js"></script>
<script type="text/javascript" src="js/views/conversation_list_view.js"></script>
<script type="text/javascript" src="js/views/conversation_view.js"></script>
<script type="text/javascript" src="js/popup.js"></script>
</body> </body>
</html> </html>

2
js/popup.js
View file

@ -16,7 +16,7 @@
new Whisper.ConversationListView({el: $('#contacts')}); new Whisper.ConversationListView().$el.appendTo($('#gutter'));
Whisper.Threads.fetch({reset: true}); Whisper.Threads.fetch({reset: true});
textsecure.registerOnLoadFunction(function() { textsecure.registerOnLoadFunction(function() {

8
js/views/conversation_list_item_view.js
View file

@ -4,8 +4,8 @@ var Whisper = Whisper || {};
'use strict'; 'use strict';
Whisper.ConversationListItemView = Backbone.View.extend({ Whisper.ConversationListItemView = Backbone.View.extend({
tagName: 'li', tagName: 'div',
className: 'conversation', className: 'contact',
events: { events: {
'click': 'open', 'click': 'open',
@ -36,7 +36,9 @@ var Whisper = Whisper || {};
render: function() { render: function() {
this.$el.html( this.$el.html(
Mustache.render(this.template, { Mustache.render(this.template, {
name: this.model.get('name') contact_name: this.model.get('name'),
last_message: this.model.get('lastMessage'),
last_message_timestamp: this.model.get('timestamp')
}) })
); );

2
js/views/conversation_list_view.js
View file

@ -4,7 +4,7 @@ var Whisper = Whisper || {};
'use strict'; 'use strict';
Whisper.ConversationListView = Whisper.ListView.extend({ Whisper.ConversationListView = Whisper.ListView.extend({
tagName: 'ul', tagName: 'div',
id: 'contacts', id: 'contacts',
itemView: Whisper.ConversationListItemView, itemView: Whisper.ConversationListItemView,
collection: Whisper.Threads, collection: Whisper.Threads,

4
js/views/message_list_view.js
View file

@ -5,11 +5,11 @@ var Whisper = Whisper || {};
Whisper.MessageListView = Whisper.ListView.extend({ Whisper.MessageListView = Whisper.ListView.extend({
tagName: 'ul', tagName: 'ul',
className: 'messages', className: 'discussion',
itemView: Whisper.MessageView, itemView: Whisper.MessageView,
render: function() { render: function() {
$('#main .message-container').html('').append(this.el); $('#discussion').html('').append(this.el);
} }
}); });
})(); })();

7
js/views/message_view.js
View file

@ -5,7 +5,7 @@ var Whisper = Whisper || {};
Whisper.MessageView = Backbone.View.extend({ Whisper.MessageView = Backbone.View.extend({
tagName: "li", tagName: "li",
className: "message", className: "entry",
initialize: function() { initialize: function() {
this.$el.addClass(this.model.get('type')); this.$el.addClass(this.model.get('type'));
@ -21,9 +21,10 @@ var Whisper = Whisper || {};
render: function() { render: function() {
this.$el.html( this.$el.html(
Mustache.render(this.template, { Mustache.render(this.template, {
body: this.model.get('body'), message: this.model.get('body'),
date: this.formatTimestamp(), date: this.formatTimestamp(),
attachments: this.model.get('attachments') attachments: this.model.get('attachments'),
bubble_class: this.model.get('type') === 'outgoing' ? 'sent' : 'incoming'
}) })
); );