webui: chat-layout fixed

libresapi/src/webui-src/app/_chat.sass

@@ -9,6 +9,7 @@
         height: 100%
         padding: 0px
         position: relative
+        box-sizing: border-box
     &.header
         position: absolute
         top: 0px
@@ -24,7 +25,7 @@
         bottom: 0px
         left: 0px
         width: $left_width
-        border-right: solid 1px gray
+        //border-right: solid 1px gray
         box-sizing: border-box
         background-color: black
     &.right
@@ -34,22 +35,24 @@
         bottom: 0px
         width: $right_width
         box-sizing: border-box
-        border-left: solid 1px gray
+        //border-left: solid 1px gray
     &.middle
         //background-color: blue
         position: absolute
-        top: $header_height
+        top: 0px
+        margin-top: $header_height
         left: $left_width
         right: $right_width
         box-sizing: border-box
-        padding-top: 0px
+        padding: 0px
-        padding-left: 0px
+        height: 100%
-        padding-right: 0px
+        overflow-y: scroll
     &.bottom
         position: absolute
         bottom: 0px
         right: $right_width
         left: $left_width
+        padding: 5px
     &.msg
         padding: 0px
         $author_width: 100px
@@ -57,6 +60,7 @@
             position: relative
             border-bottom: solid 1px lightgray
             padding: 10px
+            height: unset
             //background-color: lime
         &.from
             position: absolute
@@ -73,3 +77,5 @@
             padding-left: $author_width
             top: 0px
             left: $author_width
+            white-space: pre-wrap
+            height: initial

libresapi/src/webui-src/app/chat.js

@@ -4,6 +4,7 @@ var m = require("mithril");
 var rs = require("retroshare");
 
 var msg = null;
+var particips = [];
 
 function dspmsg(from, when, text){
     return m(".chat.msg.container",[
@@ -169,6 +170,24 @@ function lobby(lobbyid){
             },"submit")
         ]);
     }
+    if (lobdt.subscribed != undefined
+        && lobdt.subscribed
+        && !lobdt.is_broadcast
+        ) {
+        //set participants
+        particips = [
+            m("h3","participants:"),
+            rs.list(
+                "chat/lobby_participants/" + lobbyid,
+                function(item) {
+                    return m("div",item.identity.name);
+                },
+                function (a,b){
+                    return rs.stringSort(a.identity.name,b.identity.name);
+                }
+            )
+        ]
+    }
     return [
         intro,
         mem.msg.map(function(item){
@@ -184,7 +203,13 @@ function lobby(lobbyid){
 
 module.exports = {
     frame: function(content, right){
-        return m("div", [
+        return m("div", {
+            style: {
+                "height": "100%",
+                "box-sizing": "border-box",
+                "padding-bottom": "170px",
+            }
+        },[
             m(".chat.container", [
                 m(".chat.header", [
                     m(
@@ -211,9 +236,10 @@ module.exports = {
         var lobbyid = m.route.param("lobby");
         msg = null;
         if (lobbyid != undefined ) {
+            particips = [];
             return this.frame(
                 lobby(lobbyid),
-                []
+                particips
             );
         };
         return this.frame(
@@ -222,7 +248,7 @@ module.exports = {
                 {style: {margin:"10px"}},
                 "please select lobby"
             ),
-            m("div","right")
+            m("div","")
         );
     }
 }

libresapi/src/webui-src/app/green-black.scss

@@ -6,6 +6,7 @@ body {
     /*padding: 1.5em;*/
     padding: 2mm;
     font-size: 1.1em;
+    box-sizing: border-box;
 }
 
 #overlay{

libresapi/src/webui-src/app/main.js

@@ -62,10 +62,22 @@ function Page(menu){
                 return m("h2","server starting ...")
             } else if("waiting_account_select|running_ok.*".match(runstate.runstate)) {
                 if (runst === undefined || runst.match(runstate.runstate)) {
-                    return m("div", [
+                    return m("div", {
+                        style: {
+                            height: "100%",
+                            "box-sizing": "border-box",
+                            "padding-bottom": "40px"
+                        }
+                    }, [
                         m("div", mm.view()),
         	            m("hr"),
-                        m("div", content)
+                        m("div", {
+                            style: {
+                                height: "100%",
+                                "box-sizing": "border-box",
+                                "padding-bottom":"40px"
+                            }
+                        }, content)
                     ]);
                 } else {
                     // funktion currently not available

libresapi/src/webui-src/app/menudef.js

@@ -70,24 +70,18 @@ module.exports = {  nodes: [
 	{
 		name: "chat",
 		runstate: "running_ok.*",
-		counter: rs.counting2([
+		counter: rs.counting2({
-		    {
+	        "peers": function(peer) {
-		        path: "peers",
+	            var sum = 0;
-		        counter: function(peer) {
+	            peer.locations.map(function (loc) {
-		            var sum = 0;
+	                sum += parseInt(loc.unread_msgs);
-		            peer.locations.map(function (loc) {
+	            });
-		                sum += parseInt(loc.unread_msgs);
+	            return sum;
-		            });
+	        },
-		            return sum;
+	        "chat/lobbies": function(lobby) {
-		        }
+	            return lobby.unread_msg_count;
-		    },
+	        }
-		    {
+		})
-		        path: "chat/lobbies",
-		        counter: function(lobby) {
-		            return lobby.unread_msg_count;
-		        }
-		    }
-		])
 	},
 	{
 		name: "shutdown",

libresapi/src/webui-src/app/retroshare.js

@@ -286,15 +286,14 @@ rs.counting = function(path, counterfnkt) {
 rs.counting2 = function(targets) {
     return function () {
         var sum = 0;
-        targets.map(function(target) {
+        for (var path in targets) {
-            var data=rs(target.path);
+            var data=rs(path);
             if (data != undefined) {
                 data.map(function(item){
-                    sum += parseInt(target.counter(item));
+                    sum += parseInt(targets[path](item));
                 });
             };
-            return null;
+        };
-        });
         if (sum > 0) {
             return " (" + sum + ")";
         }
@@ -327,23 +326,30 @@ rs.memory = function(path, args){
     return item.memory;
 };
 
+// Sortierfunktion für Texte von Objekten,
+// falls einfache Namen nicht funktionieren
+rs.stringSort = function(textA,textB, innersort, objectA, objectB){
+        if (textA.toLowerCase() == textB.toLowerCase()) {
+            if (innersort === undefined) {
+                return 0
+            }
+            return innersort(objectA,objectB);
+        } else if (textA.toLowerCase() < textB.toLowerCase()) {
+            return -1
+        } else {
+            return 1
+        }
+    }
+
+
 //return sorting-function for string, based on property name
 //using: list.sort(rs.sort("name"));
 // -----
 //innersort: cascading sorting - using:
 //list.sort(rs.sort("type",rs.sort("name")))
 rs.sort = function(name, innersort){
-    return function(a,b){
+    return function(a,b) {
-        if (a[name].toLowerCase() == b[name].toLowerCase()) {
+        return rs.stringSort(a[name],b[name],innersort,a,b);
-            if (innersort === undefined) {
-                return 0
-            }
-            return innersort(a,b);
-        } else if (a[name].toLowerCase() < b[name].toLowerCase()) {
-            return -1
-        } else {
-            return 1
-        }
     }
 }