keejef
/
session-desktop
mirror of https://github.com/oxen-io/session-desktop
2
0
Fork 0
Code Issues 8 Projects Releases Wiki Activity

Start on panels

Browse Source
pull/749/head
Riley Shaw 10 years ago committed by lilia
parent 02d0c58e5e
commit 2cbcb28ee3
13 changed files with 449 additions and 329 deletions
Show Stats Download Patch File Download Diff File

74
conversation.html
Unescape Escape View File

@ -0,0 +1,74 @@
<!DOCTYPE html>
<html class='no-js' lang='en'>
<head>
<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></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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="/components/bootstrap-tagsinput/dist/bootstrap-tagsinput.css" rel="stylesheet" type="text/css" />
<link href="/stylesheets/index.css" rel="stylesheet" type="text/css" />
</head>
<body class='signal index' data-name="curve25519" data-tools="pnacl" data-configs="Debug Release" data-path="nacl/pnacl/{config}">
<div class='title-bar' id='header'>Settings and whatever</div>
<ul id='conversation-container'>
</ul>
<div class="bottom-bar">
<button>Attachments</button>
<form class='send'>
<input class='send-message' rows='6' type='textarea'>
<div class='attachments'>
<input type='file' name='files[]' multiple class='file-input'>
</div>
</form>
<button>Send</button>
</div>
<script type='text/x-tmpl-mustache' id='message'>
<li>
<img class="avatar" src="#" alt="">
<div class="bubble {{ bubble_class }}">
<p class="content">{{ message }}</p>
<p class="sender">{{ sender }}</p>
<p class="timestamp">{{ timestamp }}</p>
</div>
</li>
</script>
<script type="text/javascript" src="js/components.js"></script>
<script type="text/javascript" src="js/libtextsecure.js"></script>
<script type="text/javascript" src="js/database.js"></script>
<script type="text/javascript" src="components/bootstrap-tagsinput/dist/bootstrap-tagsinput.js"></script>
<script type="text/javascript" src="js/libphonenumber-util.js"></script>
<script type="text/javascript" src="js/models/messages.js"></script>
<script type="text/javascript" src="js/models/conversations.js"></script>
<script type="text/javascript" src="js/chromium.js"></script>
<script type="text/javascript" src="js/views/file_modal_view.js"></script>
<script type="text/javascript" src="js/views/attachment_preview_view.js"></script>
<script type="text/javascript" src="js/views/file_input_view.js"></script>
<script type="text/javascript" src="js/views/list_view.js"></script>
<script type="text/javascript" src="js/views/group_update_view.js"></script>
<script type="text/javascript" src="js/views/attachment_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_view.js"></script>
<script type="text/javascript" src="js/conversation_panel.js"></script>
<div id="listener"></div>
<div id="log"></div>
</body>
</html>

77
index2.html
Unescape Escape View File

@ -0,0 +1,77 @@
<!DOCTYPE html>
<html class='no-js' lang='en'>
<head>
<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>
Signal for Chrome
</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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="/components/bootstrap-tagsinput/dist/bootstrap-tagsinput.css" rel="stylesheet" type="text/css" />
<link href="/stylesheets/index.css" rel="stylesheet" type="text/css" />
</head>
<body class='signal index' data-name="curve25519" data-tools="pnacl" data-configs="Debug Release" data-path="nacl/pnacl/{config}">
<div class='title-bar' id='header'>
<a href id='new-message'>New message</a>
<a href id='new-group'>New group</a>
</div>
<div id='gutter' class='gutter'>
<div class='search'>
<form>
<input name='contact_search' placeholder='Search' type='search'>
</form>
</div>
<div id='contacts'></div>
</div>
<script type='text/x-tmpl-mustache' id='contact'>
<span class='avatar'></span>
<div class='contact-details'>
<h3 class='contact-name'>
{{ contact_name }}
</h3>
<p class='last-message'>
{{ last_message }}
</p>
<span class='last-timestamp'>
{{ last_message_timestamp }}
</span>
</div>
</script>
<script type="text/javascript" src="js/components.js"></script>
<script type="text/javascript" src="js/libtextsecure.js"></script>
<script type="text/javascript" src="js/database.js"></script>
<script type="text/javascript" src="components/bootstrap-tagsinput/dist/bootstrap-tagsinput.js"></script>
<script type="text/javascript" src="js/libphonenumber-util.js"></script>
<script type="text/javascript" src="js/models/messages.js"></script>
<script type="text/javascript" src="js/models/conversations.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/file_input_view.js"></script>
<script type="text/javascript" src="js/views/list_view.js"></script>
<script type="text/javascript" src="js/views/group_update_view.js"></script>
<script type="text/javascript" src="js/views/attachment_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/views/new_conversation_view.js"></script>
<script type="text/javascript" src="js/views/new_group_view.js"></script>
<script type="text/javascript" src="js/views/inbox_view.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<div id="listener"></div>
<div id="log"></div>
</body>
</html>

27
js/background.js
Unescape Escape View File

@ -56,6 +56,32 @@
request.respond(500, 'Bad encrypted websocket message'); request.respond(500, 'Bad encrypted websocket message');
}); });
}); });
var opened = false;
var panel = 0;
chrome.browserAction.onClicked.addListener(function () {
if (opened === false) {
opened = true;
chrome.windows.create({
url: 'index2.html',
type: 'panel',
focused: true,
width: 260, // 280 for chat
height: 440 // 420 for chat
}, function (window) {
var isPanelEnabled = window.alwaysOnTop;
panel = window.id;
});
} else if (opened === true) {
chrome.windows.update(panel, { focused: true });
}
chrome.windows.onRemoved.addListener(function (windowId) {
if (windowId === panel) {
panel = 0;
opened = false;
}
});
});
}; };
function onMessageReceived(pushMessage) { function onMessageReceived(pushMessage) {
@ -196,5 +222,4 @@
console.log('got delivery receipt for unknown message', pushMessage.source, timestamp); console.log('got delivery receipt for unknown message', pushMessage.source, timestamp);
}); });
}; };
})(); })();

57
js/conversation_panel.js
Unescape Escape View File

@ -0,0 +1,57 @@
/*global $, Whisper, Backbone, textsecure, extension*/
/* vim: ts=4:sw=4:expandtab:
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Lesser General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Lesser General Public License for more details.
*
* You should have received a copy of the GNU Lesser General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
(function () {
'use strict';
window.Whisper = window.Whisper || {};
function loadConversation (id) {
var conversation = new Whisper.Conversation({ id: id });
conversation.fetch().then(function () {
new Whisper.ConversationView({ model: conversation}).render().$el.appendTo($('#conversation-container'));
});
// clean 'er up
conversationInfo = undefined;
};
var conversationInfo = {
id: '',
idPairs: {}
};
extension.on('loadConversation', function (message) {
debugger;
if (conversationInfo.id) {
if (message.windowId === conversationInfo.id) {
loadConversation(message.conversationId);
}
} else {
conversationInfo.idPairs[message.windowId] = message.conversationId;
}
});
chrome.windows.getCurrent(function (windowInfo) {
window.document.title = conversationInfo.id = windowInfo.id;
var conversationId = conversationInfo.idPairs[conversationInfo.id];
if (typeof conversationId !== 'undefined') {
loadConversation(conversationId);
}
});
}());

18
js/views/conversation_list_item_view.js
Unescape Escape View File

@ -19,6 +19,7 @@ var Whisper = Whisper || {};
(function () { (function () {
'use strict'; 'use strict';
// list of conversations, showing user/group and last message sent
Whisper.ConversationListItemView = Backbone.View.extend({ Whisper.ConversationListItemView = Backbone.View.extend({
tagName: 'div', tagName: 'div',
className: 'contact', className: 'contact',
@ -36,11 +37,28 @@ var Whisper = Whisper || {};
}, },
open: function(e) { open: function(e) {
var modelId = this.model.id;
this.$el.addClass('selected'); this.$el.addClass('selected');
if (!this.view) { if (!this.view) {
this.view = new Whisper.ConversationView({ model: this.model }); this.view = new Whisper.ConversationView({ model: this.model });
} }
chrome.windows.create({
url: 'conversation.html#' + modelId,
type: 'panel',
focused: true,
width: 280,
height: 420
}, function (windowInfo) {
debugger;
extension.trigger('loadConversation', {
windowId: windowInfo.id,
conversationId: modelId
});
});
this.model.collection.trigger('selected', this.view); this.model.collection.trigger('selected', this.view);
}, },

17
js/views/conversation_view.js
Unescape Escape View File

@ -37,8 +37,8 @@
this.view = new Whisper.MessageListView({ this.view = new Whisper.MessageListView({
collection: this.model.messageCollection collection: this.model.messageCollection
}); });
this.$el.find('.discussion-container').append(this.view.el); $('#conversation-container').append(this.view.el);
//new ...({el: $(#conversation-container)})
this.model.fetchMessages({reset: true}); this.model.fetchMessages({reset: true});
}, },
@ -83,7 +83,20 @@
} }
}, },
/*addAll: function() {
this.collection.each(this.addOne);
},
addOne: function(model) {
var view = new Whisper.Message({model: model});
view.render();
$(this.el).append(view.el);
model.bind('remove', view.remove);
},*/
render: function() { render: function() {
//this.$el.empty();
//this.addAll();
this.delegateEvents(); this.delegateEvents();
this.view.delegateEvents(); this.view.delegateEvents();
this.view.scrollToBottom(); this.view.scrollToBottom();

17
js/views/inbox_view.js
Unescape Escape View File

@ -22,9 +22,7 @@
initialize: function () { initialize: function () {
this.gutter = $('#gutter'); this.gutter = $('#gutter');
this.contacts = $('#contacts'); this.contacts = $('#contacts');
this.resize();
window.addEventListener('resize', this.resize.bind(this));
this.conversations = new Whisper.ConversationCollection(); this.conversations = new Whisper.ConversationCollection();
new Whisper.ConversationListView({ new Whisper.ConversationListView({
@ -70,23 +68,8 @@
}); });
this.setContent(view.render().$el.show()); this.setContent(view.render().$el.show());
}, },
resize: function (e) {
var windowheight = window.innerHeight,
form = $('.send-message-area').outerHeight(),
gutter_offset = this.gutter.offset().top,
contacts_offset = this.contacts.offset().top;
if (window.innerWidth < 480) {
this.gutter.css('height', windowheight - gutter_offset - form);
this.contacts.css('height', windowheight - contacts_offset - form);
} else {
this.gutter.css('height', windowheight - gutter_offset);
this.contacts.css('height', windowheight - contacts_offset);
}
$('.discussion').css('height', windowheight - gutter_offset - form);
},
setContent: function (content) { setContent: function (content) {
$(content).insertAfter(this.gutter); $(content).insertAfter(this.gutter);
this.resize();
} }
}); });

2
manifest.json
Unescape Escape View File

@ -16,7 +16,7 @@
"default_icon": { "default_icon": {
"19": "icon.png" "19": "icon.png"
}, },
"default_popup": "index.html" "default_title": "TextSecure"
}, },
"background": { "background": {

73
stylesheets/_gutter.scss
Unescape Escape View File

@ -1,73 +0,0 @@
.gutter {
float:left;
border-right:1px solid lightgray;
width:240px;
position:relative;
background-color:blue;
z-index:100;
.contact {
float:left;
width:100%;
border-bottom:1px solid whitesmoke;
color:#333;
&:hover {
background-color:whitesmoke;
margin-top:-1px;
border-bottom:1px solid lightgray;
border-top:1px solid lightgray;
}
}
.contact-details {
position:relative;
width:156px;
float:left;
text-align: left;
h3 {
font-size:13px;
margin-bottom:4px;
}
.last-message {
color:lighten(#333, 40%);
letter-spacing:0.15px;
-webkit-text-stroke: 0.2px;
margin:0;
font-size: 12px;
}
.last-timestamp {
position:absolute;
top:14px;
right:8px;
font-size:12px;
font-weight: 500;
color:gray;
}
}
}
.avatar {
cursor:pointer;
height:56px;
width:56px;
display:inline-block;
margin:10px;
margin-right:14px;
float:left;
clear:both;
background-color:whitesmoke;
}
.search {
padding:10px;
border-bottom:1px solid whitesmoke;
input[type=search] {
box-sizing: border-box;
font-size:12px;
outline:0;
width:100%;
margin:0;
letter-spacing: 0.25px;
padding:4px 8px;
border:1px solid lightgray;
}
}

39
stylesheets/index.css
Unescape Escape View File

@ -1,41 +1,3 @@
.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }
body {
min-width: 320px;
min-height: 500px;
}
.number.error {
background-color: #ffdddd;
}
.gutter {
padding-bottom: 0;
overflow: hidden;
}
#contacts {
overflow-y: scroll;
}
#contacts::-webkit-scrollbar {
display: none;
}
.contact.selected {
background-color: aliceblue;
}
.gutter .contact .avatar {
background-position: center;
background-size: cover;
}
.conversation {
margin: 0;
padding: 0;
}
ul.discussion { ul.discussion {
margin: 0; margin: 0;
padding: 10px; padding: 10px;
@ -115,6 +77,7 @@ img.preview {
ul.country-list { ul.country-list {
min-width: 197px !important; min-width: 197px !important;
} }
<<<<<<< HEAD
div.attachments { div.attachments {
width: 95% !important; width: 95% !important;

173
stylesheets/manifest.css
Unescape Escape View File

@ -81,99 +81,94 @@ body {
.gutter .search { .gutter .search {
display: block; } } display: block; } }
@media screen and (min-width: 320px) { .gutter {
.gutter { width: 100%;
width: 64px; float: left;
border-right: 1px solid lightgray;
position: relative;
box-sizing: border-box;
overflow: scroll;
background-color: white;
padding-bottom: 80px;
z-index: 100; }
.gutter .contact {
cursor: pointer;
float: left; float: left;
border-right: 1px solid lightgray; width: 100%;
position: relative; border-bottom: 1px solid whitesmoke;
box-sizing: border-box; color: #333; }
height: 458px; .gutter .contact:hover {
overflow: scroll; background-color: whitesmoke;
background-color: white; margin-top: -1px;
padding-bottom: 80px; } border-bottom: 1px solid lightgray;
.gutter .contact { border-top: 1px solid lightgray; }
.gutter .contact.active {
background-color: #ecfcff;
margin-top: -1px;
border-bottom: 1px solid lightgray;
border-top: 1px solid lightgray; }
.gutter .contact .avatar {
height: 42px;
width: 42px;
border-radius: 42px;
cursor: pointer; cursor: pointer;
display: inline-block;
margin: 10px;
margin-right: 14px;
float: left; float: left;
width: 100%; clear: both;
border-bottom: 1px solid whitesmoke; background-color: whitesmoke; }
color: #333; }
.gutter .contact:hover {
background-color: whitesmoke;
margin-top: -1px;
border-bottom: 1px solid lightgray;
border-top: 1px solid lightgray; }
.gutter .contact.active {
background-color: #ecfcff;
margin-top: -1px;
border-bottom: 1px solid lightgray;
border-top: 1px solid lightgray; }
.gutter .contact .avatar {
height: 42px;
width: 42px;
border-radius: 42px;
cursor: pointer;
display: inline-block;
margin: 10px;
margin-right: 14px;
float: left;
clear: both;
background-color: whitesmoke; }
.gutter .contact .contact-details {
display: none; } }
@media screen and (min-width: 480px) {
.gutter {
width: 240px;
height: auto;
z-index: 100; }
.gutter .search {
padding: 10px;
border-bottom: 1px solid whitesmoke; }
.gutter .search input[type=search] {
box-sizing: border-box;
font-size: 12px;
outline: 0;
width: 100%;
margin: 0;
letter-spacing: 0.25px;
padding: 4px 8px;
border: 1px solid lightgray; }
.gutter .search.d6 {
display: block; }
.gutter .contact .avatar {
height: 56px;
width: 56px; }
.gutter .contact .contact-details { .gutter .contact .contact-details {
display: block; display: none; }
position: relative; .gutter .search {
width: 156px; padding: 10px;
float: left; border-bottom: 1px solid whitesmoke; }
text-align: left; } .gutter .search input[type=search] {
.gutter .contact .contact-details h3 { box-sizing: border-box;
font-size: 13px; font-size: 12px;
margin-bottom: 4px; } outline: 0;
.gutter .contact .contact-details .contact-name { width: 100%;
width: 105px; margin: 0;
white-space: nowrap; letter-spacing: 0.25px;
overflow: hidden; padding: 4px 8px;
text-overflow: ellipsis; } border: 1px solid lightgray; }
.gutter .contact .contact-details .last-message { .gutter .search.d6 {
color: #999999; display: block; }
letter-spacing: 0.15px; .gutter .contact .avatar {
-webkit-text-stroke: 0.2px; height: 56px;
margin: 0; width: 56px; }
font-size: 12px; .gutter .contact .contact-details {
width: 150px; display: block;
white-space: nowrap; position: relative;
overflow: hidden; width: 156px;
text-overflow: ellipsis; } float: left;
.gutter .contact .contact-details .last-timestamp { text-align: left; }
position: absolute; .gutter .contact .contact-details h3 {
top: 14px; font-size: 13px;
right: 8px; margin-bottom: 4px; }
font-size: 12px; .gutter .contact .contact-details .contact-name {
font-weight: 500; width: 105px;
color: gray; } } white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis; }
.gutter .contact .contact-details .last-message {
color: #999999;
letter-spacing: 0.15px;
-webkit-text-stroke: 0.2px;
margin: 0;
font-size: 12px;
width: 150px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis; }
.gutter .contact .contact-details .last-timestamp {
position: absolute;
top: 14px;
right: 8px;
font-size: 12px;
font-weight: 500;
color: gray; }
.conversation { .conversation {
margin-top: 10px; margin-top: 10px;
width: 100%; width: 100%;

2
stylesheets/manifest.css.map
View File

File diff suppressed because one or more lines are too long

198
stylesheets/view/_gutter.scss
Unescape Escape View File

@ -1,119 +1,107 @@
@media #{$D7} { .gutter {
.gutter { width:100%;
width:64px; float:left;
border-right:1px solid lightgray;
position:relative;
box-sizing: border-box;
overflow: scroll;
background-color:white;
padding-bottom:80px;
.contact {
cursor:pointer;
float:left; float:left;
border-right:1px solid lightgray; width:100%;
position:relative; border-bottom:1px solid whitesmoke;
box-sizing: border-box; color:#333;
height:458px; &:hover {
overflow: scroll; background-color:whitesmoke;
background-color:white; margin-top:-1px;
padding-bottom:80px; border-bottom:1px solid lightgray;
.search { border-top:1px solid lightgray;
//display:none; }
&.active {
background-color:$lightblue;
margin-top:-1px;
border-bottom:1px solid lightgray;
border-top:1px solid lightgray;
} }
.contact { .avatar {
height:42px;
width:42px;
border-radius:42px;
cursor:pointer; cursor:pointer;
display:inline-block;
margin:10px;
margin-right:14px;
float:left; float:left;
width:100%; clear:both;
border-bottom:1px solid whitesmoke; background-color:whitesmoke;
color:#333; }
&:hover { .contact-details {
background-color:whitesmoke; display:none;
margin-top:-1px;
border-bottom:1px solid lightgray;
border-top:1px solid lightgray;
}
&.active {
background-color:$lightblue;
margin-top:-1px;
border-bottom:1px solid lightgray;
border-top:1px solid lightgray;
}
.avatar {
height:42px;
width:42px;
border-radius:42px;
cursor:pointer;
display:inline-block;
margin:10px;
margin-right:14px;
float:left;
clear:both;
background-color:whitesmoke;
}
.contact-details {
display:none;
}
} }
} }
}
@media #{$D6} { z-index:100;
.search {
.gutter { padding:10px;
width:240px; border-bottom:1px solid whitesmoke;
height:auto; input[type=search] {
z-index:100; box-sizing: border-box;
.search { font-size:12px;
padding:10px; outline:0;
border-bottom:1px solid whitesmoke; width:100%;
input[type=search] { margin:0;
box-sizing: border-box; letter-spacing: 0.25px;
font-size:12px; padding:4px 8px;
outline:0; border:1px solid lightgray;
width:100%; }
margin:0; &.d6 {
letter-spacing: 0.25px; display:block;
padding:4px 8px; }
border:1px solid lightgray; }
.contact {
.avatar {
height:56px;
width:56px;
}
.contact-details {
display:block;
position:relative;
width:156px;
float:left;
text-align: left;
h3 {
font-size:13px;
margin-bottom:4px;
} }
&.d6 { .contact-name {
display:block; width: 105px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
} }
} .last-message {
.contact { color:lighten(#333, 40%);
.avatar { letter-spacing:0.15px;
height:56px; -webkit-text-stroke: 0.2px;
width:56px; margin:0;
font-size: 12px;
width: 150px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
} }
.contact-details { .last-timestamp {
display:block; position:absolute;
position:relative; top:14px;
width:156px; right:8px;
float:left; font-size:12px;
text-align: left; font-weight: 500;
h3 { color:gray;
font-size:13px;
margin-bottom:4px;
}
.contact-name {
width: 105px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.last-message {
color:lighten(#333, 40%);
letter-spacing:0.15px;
-webkit-text-stroke: 0.2px;
margin:0;
font-size: 12px;
width: 150px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.last-timestamp {
position:absolute;
top:14px;
right:8px;
font-size:12px;
font-weight: 500;
color:gray;
}
} }
} }
} }
} }
Write Preview
Loading…
Cancel
Save