Navigation Menu

Skip to content

Commit

Permalink
* add quick view for open conversations
Browse files Browse the repository at this point in the history 
* fix bug: counter for new messages during focused window will not be shown in userlist/roomlist
  • Loading branch information
@SSilence
SSilence committed Mar 26, 2015
1 parent 2e5f080 commit 66c285c
Show file tree
Hide file tree
Showing 8 changed files with 321 additions and 86 deletions.
5 changes: 3 additions & 2 deletions .gitignore
View file
Expand Up @@ -4,7 +4,8 @@ bin
node_modules/grunt* node_modules/grunt*
node_modules/nw* node_modules/nw*
node_modules/.bin* node_modules/.bin*
config*.ini *config*.ini
gamez gamez
userlist.db userlist.db
cache cache
*.bat
9 changes: 9 additions & 0 deletions app/index.html
View file
Expand Up @@ -75,6 +75,10 @@ <h1>{lang.nav_rooms} <span id="rooms-add" class="ion-plus-round"></span></h1>
</div> </div>


<!-- buttons --> <!-- buttons -->
<div id="open-conversations-menue">
<div class="unread"></div>
<div class="icon ion-earth"></div>
</div>
<div id="key-menue" class="ion-checkmark"></div> <div id="key-menue" class="ion-checkmark"></div>
<div id="main-menue" class="ion-navicon-round"></div> <div id="main-menue" class="ion-navicon-round"></div>
<div id="main-close" class="ion-close-round"></div> <div id="main-close" class="ion-close-round"></div>
Expand Down Expand Up @@ -166,6 +170,11 @@ <h1>{lang.nav_rooms} <span id="rooms-add" class="ion-plus-round"></span></h1>
<li id="key-menue-import" class="menue"><span class="ion-arrow-right-c"></span> {lang.menue_key_entry_import}</li> <li id="key-menue-import" class="menue"><span class="ion-arrow-right-c"></span> {lang.menue_key_entry_import}</li>
<li id="key-menue-disable" class="menue"><span class="ion-close"></span> {lang.menue_key_entry_disable}</li> <li id="key-menue-disable" class="menue"><span class="ion-close"></span> {lang.menue_key_entry_disable}</li>
</ul> </ul>

<!-- message menue dropdown -->
<div id="open-conversations-menue-dropdown">
<ul class="openconversations"></ul>
</div>
</div> </div>


<!-- chat conversation --> <!-- chat conversation -->
Expand Down
4 changes: 3 additions & 1 deletion app/lang/de.js
View file
Expand Up @@ -44,7 +44,9 @@ var lang = {
menue_key_entry_export: 'Schl&uuml;ssel sichern', menue_key_entry_export: 'Schl&uuml;ssel sichern',
menue_key_entry_import: 'Schl&uuml;ssel wiederherstellen', menue_key_entry_import: 'Schl&uuml;ssel wiederherstellen',
menue_key_entry_disable: 'Schl&uuml;ssel deaktivieren', menue_key_entry_disable: 'Schl&uuml;ssel deaktivieren',


menue_usermessages: 'noch keine Kommunikation vorhanden',

message_input_placeholder: 'schreibe eine Nachricht...', message_input_placeholder: 'schreibe eine Nachricht...',
message_codebox_placeholder: 'Syntax-Highlighting', message_codebox_placeholder: 'Syntax-Highlighting',
message_codebox_send: 'senden', message_codebox_send: 'senden',
Expand Down
4 changes: 3 additions & 1 deletion app/lang/en.js
View file
Expand Up @@ -44,7 +44,9 @@ var lang = {
menue_key_entry_export: 'backup key', menue_key_entry_export: 'backup key',
menue_key_entry_import: 'restore key', menue_key_entry_import: 'restore key',
menue_key_entry_disable: 'disable key management', menue_key_entry_disable: 'disable key management',


menue_usermessages: 'no open communication found',

message_input_placeholder: 'write a message...', message_input_placeholder: 'write a message...',
message_codebox_placeholder: 'Syntax-Highlighting', message_codebox_placeholder: 'Syntax-Highlighting',
message_codebox_send: 'send', message_codebox_send: 'send',
Expand Down
110 changes: 92 additions & 18 deletions app/main.css
View file
Expand Up @@ -330,13 +330,13 @@ input.remove,
} }


.contacts, .contacts,
.contacts li { .contact {
margin:0; margin:0;
padding:0; padding:0;
list-style:none; list-style:none;
} }


.contacts li { .contact {
position:relative; position:relative;
height:50px; height:50px;
cursor:pointer; cursor:pointer;
Expand All @@ -353,7 +353,7 @@ input.remove,
z-index:10; z-index:10;
} }


.contacts li.active { .contact.active {
background:#f9f9f9; background:#f9f9f9;
border-right:0; border-right:0;
border-bottom:1px solid #dadada; border-bottom:1px solid #dadada;
Expand Down Expand Up @@ -432,12 +432,12 @@ input.remove,
} }


.rooms, .rooms,
.rooms li { .room {
margin:0; margin:0;
padding:0; padding:0;
} }


.rooms li { .room {
font-size:0.9em; font-size:0.9em;
padding:10px; padding:10px;
position:relative; position:relative;
Expand All @@ -453,7 +453,7 @@ input.remove,
z-index:10; z-index:10;
} }


.rooms li.active { .room.active {
background:#f9f9f9; background:#f9f9f9;
border-right:0; border-right:0;
border-bottom:1px solid #dadada; border-bottom:1px solid #dadada;
Expand All @@ -462,24 +462,24 @@ input.remove,
z-index:11; z-index:11;
} }


.rooms .rooms-outside, .room .rooms-outside,
.rooms .rooms-inside { .room .rooms-inside {
border-radius:5px; border-radius:5px;
width:10px; width:10px;
height:10px; height:10px;
display:block; display:block;
margin-right:5px; margin-right:5px;
} }


.rooms .rooms-inside { .room .rooms-inside {
background:#68b54d; background:#68b54d;
} }


.rooms .rooms-outside { .room .rooms-outside {
background:#e45857; background:#e45857;
} }


.rooms .rooms-name { .room .rooms-name {
position:relative; position:relative;
-webkit-box-flex: 1; -webkit-box-flex: 1;
box-flex: 1; box-flex: 1;
Expand All @@ -492,7 +492,7 @@ input.remove,
white-space: nowrap; white-space: nowrap;
} }


.rooms .rooms-unread { .room .rooms-unread {
display:block; display:block;
background:#e45857; background:#e45857;
color:#ffffff; color:#ffffff;
Expand All @@ -505,21 +505,21 @@ input.remove,
margin-right:5px; margin-right:5px;
} }


.rooms .rooms-invite, .room .rooms-invite,
.rooms .rooms-leave { .room .rooms-leave {
position:absolute; position:absolute;
font-size:1.4em; font-size:1.4em;
margin-left:10px; margin-left:10px;
color:#999; color:#999;
display:none; display:none;
} }


.rooms .rooms-leave { .room .rooms-leave {
margin-left:35px; margin-left:35px;
} }


.rooms .rooms-leave:hover, .room .rooms-leave:hover,
.rooms .rooms-invitet:hover { .room .rooms-invitet:hover {
color:#000; color:#000;
} }


Expand Down Expand Up @@ -630,6 +630,7 @@ input.remove,
color:#ff0000; color:#ff0000;
} }


#open-conversations-menue,
#key-menue, #key-menue,
#main-menue, #main-menue,
#main-close { #main-close {
Expand All @@ -642,15 +643,35 @@ input.remove,
-webkit-app-region: no-drag; -webkit-app-region: no-drag;
} }


#open-conversations-menue {
margin-left:-160px;
}

#open-conversations-menue .unread {
display:none;
position:absolute;
background-color: #E74C3C;
border-radius: 30px;
color: white;
font-size: 0.6em;
font-weight: normal;
min-width: 8px;
padding: 0 5px 0 5px;
margin-left: 5px;
margin-top:13px;
vertical-align: baseline;
z-index:1000;
}

#key-menue { #key-menue {
margin-left:-120px; margin-left:-120px;

} }


#main-menue { #main-menue {
margin-left:-80px; margin-left:-80px;
} }


#open-conversations-menue-dropdown,
#key-menue-dropdown, #key-menue-dropdown,
#main-menue-dropdown { #main-menue-dropdown {
display:none; display:none;
Expand All @@ -668,6 +689,7 @@ input.remove,
-webkit-app-region: no-drag; -webkit-app-region: no-drag;
} }


#open-conversations-menue-dropdown:after, #open-conversations-menue-dropdown:before,
#key-menue-dropdown:after, #key-menue-dropdown:before, #key-menue-dropdown:after, #key-menue-dropdown:before,
#main-menue-dropdown:after, #main-menue-dropdown:before { #main-menue-dropdown:after, #main-menue-dropdown:before {
bottom: 100%; bottom: 100%;
Expand All @@ -680,6 +702,7 @@ input.remove,
pointer-events: none; pointer-events: none;
} }


#open-conversations-menue-dropdown:after,
#key-menue-dropdown:after, #key-menue-dropdown:after,
#main-menue-dropdown:after { #main-menue-dropdown:after {
border-color: rgba(241, 241, 241, 0); border-color: rgba(241, 241, 241, 0);
Expand All @@ -688,6 +711,7 @@ input.remove,
margin-left: -15px; margin-left: -15px;
} }


#open-conversations-menue-dropdown:before,
#key-menue-dropdown:before, #key-menue-dropdown:before,
#main-menue-dropdown:before { #main-menue-dropdown:before {
border-color: rgba(218, 218, 218, 0); border-color: rgba(218, 218, 218, 0);
Expand All @@ -696,6 +720,7 @@ input.remove,
margin-left: -16px; margin-left: -16px;
} }


#open-conversations-menue-dropdown li,
#key-menue-dropdown li, #key-menue-dropdown li,
#main-menue-dropdown li { #main-menue-dropdown li {
list-style:none; list-style:none;
Expand All @@ -705,11 +730,13 @@ input.remove,
cursor:pointer; cursor:pointer;
} }


#open-conversations-menue-dropdown li:hover,
#key-menue-dropdown li:hover, #key-menue-dropdown li:hover,
#main-menue-dropdown li:hover { #main-menue-dropdown li:hover {
background:#f9f9f9; background:#f9f9f9;
} }


#open-conversations-menue-dropdown li.inactive,
#main-menue-dropdown li.inactive { #main-menue-dropdown li.inactive {
color:#A0A0A0; color:#A0A0A0;
} }
Expand Down Expand Up @@ -778,6 +805,53 @@ input.remove,
width:90%; width:90%;
} }



#open-conversations-menue-dropdown {
margin-left:-314px;
margin-top:16px;
height:150px;
}

#open-conversations-menue-dropdown ul {
margin: 0;
padding: 0;
}

#open-conversations-menue-dropdown li.empty {
font-size:0.8em;
text-align:center;
margin-top:60px;
}

#open-conversations-menue-dropdown li
#open-conversations-menue-dropdown .room {
padding: 5px;
}

#open-conversations-menue-dropdown .contacts-state {
margin: 0 5px 0 0;
}

#open-conversations-menue-dropdown .contacts-avatar {
width: 16px;
height: 16px;
}

#open-conversations-menue-dropdown .contact {
height:auto;
}

#open-conversations-menue-dropdown .rooms-outside,
#open-conversations-menue-dropdown .rooms-inside {
width: 6px;
height: 6px;
}

#open-conversations-menue-dropdown li.active {
box-shadow: none;
border-top:0;
}



#content { #content {
padding:20px; padding:20px;
Expand Down
56 changes: 56 additions & 0 deletions app/sum-backend.js
View file
Expand Up @@ -273,6 +273,13 @@ define('sum-backend', Class.extend({
this.getUserlistResponse = callback; this.getUserlistResponse = callback;
}, },


/**
* register callback for user list by messages update
*/
onGetOpenConversationList: function(callback) {
this.getOpenConversationList = callback;
},

/** /**
* register callback for getting converstion * register callback for getting converstion
*/ */
Expand Down Expand Up @@ -400,6 +407,55 @@ define('sum-backend', Class.extend({
} }
}, },



/**
* update frontend with userlist sorted by last message timestamp
*/
updateOpenConversationList: function() {
if(typeof this.onGetOpenConversationList != "undefined") {
var all = [];

// get all users with last message timestamp
var currentuser = this.backendHelpers.getUsername();
var allUsers = this.userlist.slice();
var i=0;
for(i=0; i<allUsers.length; i++) {

// ignore current user
if (allUsers[i].username == currentuser) {
continue;
}

var conv = this.conversations[allUsers[i].username];
if (typeof conv != "undefined" && conv.length > 0) {
allUsers[i].lastMessage = conv[conv.length - 1].datetime;
all[all.length] = allUsers[i];
}
}

// get all rooms with last message timestamp
var allRooms = [ { name: config.room_all} ].concat(this.roomlist);
for(i=0; i<allRooms.length; i++) {
var convRoom = this.conversations[allRooms[i].name];
if (typeof convRoom != "undefined" && convRoom.length > 0) {
allRooms[i].lastMessage = convRoom[convRoom.length - 1].datetime;
all[all.length] = allRooms[i];
}
}

// sort by timestamp
all = all.sort(function(a, b) {
if (a.lastMessage < b.lastMessage)
return 1;
if (a.lastMessage > b.lastMessage)
return -1;
return 0;
});

this.getOpenConversationList(all);
}
},



/** /**
* returns array with all known users * returns array with all known users
Expand Down

0 comments on commit 66c285c

Please sign in to comment.