- Start the implementation of contextual menu

- Add gray chevrons on some links
- Use EOF to signalise the end of a block in the daemon
- Refresh the user feed on login
- Fix some CSS

app/widgets/Contact/_contact.tpl

@@ -24,7 +24,7 @@
                 </span>
             </li>
             {if="$caps"}
-                <li class="">
+                <li>
                     <span class="icon">
                         <i class="md
                             {if="$caps->type == 'handheld' || $caps->type == 'phone'"}

app/widgets/Hello/hello.tpl

@@ -40,7 +40,8 @@
         <ul id="news" class="flex thick active">
             <li class="subheader block large">News</li>
             {loop="$news"}
-                <li class="block condensed" data-id="{$value->nodeid}"
+                <li class="block condensed"
+                    data-id="{$value->nodeid}"
                     {if="$value->title != null"}
                         title="{$value->title|strip_tags}"
                     {else}
@@ -49,8 +50,8 @@
                     onclick="movim_reload('{$c->route('news', $value->nodeid)}')"
                 >
                     {if="current(explode('.', $value->origin)) == 'nsfw'"}
-                        <span class="icon bubble color red">
-                            <i class="md md-warning"></i>
+                        <span class="icon bubble color red tiny">
+                            +18
                         </span>
                     {elseif="$value->node == 'urn:xmpp:microblog:0'"}
                         {$url = $value->getContact()->getPhoto('s')}

app/widgets/Help/help.tpl

@@ -1,6 +1,6 @@
 <div class="tabelem" title="{$c->__('page.help')}" id="help_widget">
     <ul class="thick active">
-        <li class="condensed">
+        <li class="condensed action">
             <a href="http://wiki.movim.eu" target="_blank">
                 <span class="icon bubble color blue">
                     <i class="md md-subject"></i>
@@ -8,17 +8,11 @@
                 <span>{$c->__('wiki.question')}</span>
                 <p>{$c->__('wiki.button')}</p>
             </a>
+            <div class="action">
+                <i class="md md-chevron-right"></i>
+            </div>
         </li>
-        <li class="condensed">
-            <a onclick="Help.joinChatroom()" target="_blank">
-                <span class="icon bubble color green">
-                    <i class="md md-chat"></i>
-                </span>
-                <span>{$c->__('chatroom.question')}</span>
-                <p>{$c->__('chatroom.button')}</p>
-            </a>
-        </li>
-        <li class="condensed">
+        <li class="condensed action">
             <a href="http://wiki.movim.eu/en:mailing_list" target="_blank">
                 <span class="icon bubble color orange">
                     <i class="md md-email"></i>
@@ -26,6 +20,16 @@
                 <span>{$c->__('ml.question')}</span>
                 <p>{$c->__('ml.button')}</p>
             </a>
+            <div class="action">
+                <i class="md md-chevron-right"></i>
+            </div>
+        </li>
+        <li class="condensed">
+                <span class="icon bubble color green">
+                    <i class="md md-chat"></i>
+                </span>
+                <span>{$c->__('chatroom.question')}</span>
+                <p>{$c->__('chatroom.button')}<br/>movim@conference.movim.eu</p>
         </li>
     </ul>
 
@@ -40,18 +44,11 @@
                     <li><h3>{$c->__('banner.title')}</h3></li>
                 </ul>
             </header>
-            <!--<center>    
-            <div title="{function="getFlagTitle("white")"}" style="width: 60px; height: 50px; display: inline-block;" class="protect white"></div>
-            <div title="{function="getFlagTitle("green")"}"  style="width: 60px; height: 50px; display: inline-block;" class="protect green"></div>
-            <div title="{function="getFlagTitle("orange")"}"  style="width: 60px; height: 50px; display: inline-block;" class="protect orange"></div>
-            <div title="{function="getFlagTitle("red")"}"  style="width: 60px; height: 50px; display: inline-block;" class="protect red"></div>
-            <div title="{function="getFlagTitle("black")"}" title="{$c->__('Help')}" style="width: 60px; height: 50px; display: inline-block;" class="protect black"></div>
-            </center>-->
             <section>
                 <p>{$c->__('banner.info1')}</p>
                 <ul class="thin">
                     <li>
-                        <span class="color icon bubble brown small"></span>
+                        <span class="color icon bubble gray small"></span>
                         <span>{$c->__('banner.white')}</span>
                     </li>
                     <li>

app/widgets/Menu/_menu_list.tpl

@@ -41,8 +41,12 @@
             {else}
                 <span>{$c->__('menu.contact_post')}</span>
             {/if}
+            {if="$value->privacy"}
+                <span class="info" title="{$c->__('menu.public')}">
+                    <i class="md md-wifi-tethering"></i>
+                </span>
+            {/if}
             <span class="info">{$value->published|strtotime|prepareDate}</span>
-
             <p class="more">
                 {if="current(explode('.', $value->origin)) != 'nsfw'"}
                     {$value->contentcleaned|strip_tags:'<img><img/>'}

app/widgets/Menu/locales.ini

@@ -2,3 +2,4 @@ menu.empty_title    = 'Hello'
 menu.contact_post   = 'Contact post'
 menu.empty          = 'Welcome on your news feed, here you will see all the posts published in the groups you have subscribed.'
 menu.refresh        = 'Refreshing all the streams'
+menu.public         = 'This post is public'

app/widgets/Presence/Presence.php

@@ -23,6 +23,7 @@ use Moxl\Xec\Action\Presence\Away;
 use Moxl\Xec\Action\Presence\DND;
 use Moxl\Xec\Action\Presence\XA;
 use Moxl\Xec\Action\Presence\Unavailable;
+use Moxl\Xec\Action\Pubsub\GetItems;
 use Moxl\Stanza\Stream;
 use Moxl\Xec\Action\Storage\Get;
 
@@ -145,6 +146,15 @@ class Presence extends WidgetBase
         }
     }
 
+    // We refresh our personnal feed
+    function ajaxFeedRefresh()
+    {
+        $r = new GetItems;
+        $r->setTo($this->user->getLogin())
+          ->setNode('urn:xmpp:microblog:0')
+          ->request();
+    }
+
     function ajaxOpenDialog()
     {
         Dialog::fill($this->preparePresenceList());

app/widgets/Presence/presence.js

@@ -8,6 +8,7 @@ function postStart() {
         Presence_ajaxServerCapsGet();
         Presence_ajaxBookmarksGet();
         Presence_ajaxUserRefresh();
+        Presence_ajaxFeedRefresh();
         //Menu_ajaxRefresh();
         localStorage.postStart = 0;
     }

linker.php

@@ -72,7 +72,7 @@ $connector($config->websocketurl, array('xmpp'))->then(function($conn) use (&$st
             if(!empty($msg)) {
                 $msg = json_encode($msg);
                 #fwrite(STDERR, colorize($msg, 'yellow')." : ".colorize('sent to browser', 'green')."\n");
-                echo base64_encode(gzcompress($msg, 9))."END";
+                echo base64_encode(gzcompress($msg, 9))."";
             }
 
             if(!empty($xml)) {
@@ -93,8 +93,8 @@ $connector($config->websocketurl, array('xmpp'))->then(function($conn) use (&$st
     $stdin->removeAllListeners('data');
     $stdin->on('data', function ($data) use ($conn, $loop, &$buffer) {
         // A little bit of signalisation to use properly the buffer
-        if(substr($data, -3) == "END") {
-            $messages = explode("END", $buffer . substr($data, 0, -3));
+        if(substr($data, -1) == "") {
+            $messages = explode("", $buffer . substr($data, 0, -1));
             $buffer = '';
 
             foreach ($messages as $message) {
@@ -127,7 +127,7 @@ $connector($config->websocketurl, array('xmpp'))->then(function($conn) use (&$st
 
                 if(!empty($msg)) {
                     #fwrite(STDERR, colorize($msg, 'yellow')." : ".colorize('sent to the browser', 'green')."\n");
-                    echo base64_encode(gzcompress($msg, 9))."END";
+                    echo base64_encode(gzcompress($msg, 9))."";
                 }
             }
         } else {
@@ -139,15 +139,15 @@ $connector($config->websocketurl, array('xmpp'))->then(function($conn) use (&$st
     $obj = new \StdClass;
     $obj->func = 'registered';
 
-    echo base64_encode(gzcompress(json_encode($obj), 9))."END";
+    echo base64_encode(gzcompress(json_encode($obj), 9))."";
 });
 
 // Fallback event, when the WebSocket is not enabled,
 // we still handle browser to Movim requests
 $stdin->on('data', function ($data) use ($loop) {
     if(!isset($buffer)) $buffer = '';
-    if(substr($data, -3) == "END") {
-        $messages = explode("END", $buffer . substr($data, 0, -3));
+    if(substr($data, -1) == "") {
+        $messages = explode("", $buffer . substr($data, 0, -1));
         $buffer = '';
     
         foreach ($messages as $message) {
@@ -173,7 +173,7 @@ $stdin->on('data', function ($data) use ($loop) {
 
             if(!empty($msg)) {
                 #fwrite(STDERR, colorize($msg, 'yellow')." : ".colorize('sent to the browser', 'green')."\n");
-                echo base64_encode(gzcompress($msg, 9))."END";
+                echo base64_encode(gzcompress($msg, 9))."";
             }
         }
     } else {

src/Movim/Daemon/Session.php

@@ -58,8 +58,8 @@ class Session {
 
         // Buffering the incoming data and fire it once its complete      
         $this->process->stdout->on('data', function($output) use ($me, &$buffer) {
-            if(substr($output, -3) == "END") {
-                $out = $buffer . substr($output, 0, -3);
+            if(substr($output, -1) == "") {
+                $out = $buffer . substr($output, 0, -1);
                 $buffer = '';
                 $me->messageOut($out);
             } else {
@@ -99,7 +99,7 @@ class Session {
     {
         $this->timestamp = time();
         if(isset($this->process)) {
-            $this->process->stdin->write($msg."END");
+            $this->process->stdin->write($msg."");
         }
     }
 

themes/material/css/color.css

@@ -70,6 +70,7 @@ span.icon.status.away:after,
 .bubble.color.yellow, .icon.color.yellow   { color: white; background-color: #FDD835; border-color: #FDD835 }
 .bubble.color.brown , .icon.color.brown    { color: white; background-color: #795548; border-color: #795548 }
 .bubble.color.gray  , .icon.color.gray     { color: white; background-color: #9E9E9E; border-color: #9E9E9E }
+.bubble.color.black , .icon.color.black    { color: white; background-color: #000;    border-color: #000 }
 
 label.red   , .icon.red   , span.user.red      { color: #F44336; }
 label.purple, .icon.purple, span.user.purple   { color: #9C27B0; }
@@ -79,7 +80,10 @@ label.green , .icon.green , span.user.green    { color: #689F38; }
 label.orange, .icon.orange, span.user.orange   { color: #FF9800; }
 label.yellow, .icon.yellow, span.user.yellow   { color: #FFEB3B; }
 label.brown , .icon.brown , span.user.brown    { color: #795548; }
+ul li.action > div.action,
+ul li.action > form > div.action,
 label.gray  , .icon.gray  , span.user.gray     { color: #9E9E9E; }
+label.black , .icon.black , span.user.black    { color: #000; }
 
 form input:focus:invalid,
 form textarea:focus:invalid {

themes/material/css/list.css

@@ -108,7 +108,8 @@ ul.thick li.condensed p {
     margin-bottom: 0;
 }
 
-ul li > p {
+ul li > p,
+ul li > a > p {
     display: block;
     font-size: 1.75rem;
     color: rgba(0, 0, 0, 0.60);
@@ -291,17 +292,15 @@ ul.tabs li.active {
 
 /* Menu */
 
-ul.menu {
+ul.context_menu {
     border-radius: 0.25rem;
     display: inline-block;
-    height: 5rem;
-    margin-left: 1rem;
     overflow: hidden;
-}
-
-ul.menu:hover {
-    height: auto;
     background-color: white;
-    color: black;
+    color: #333;
+    position: absolute;
+    top: 1rem;
+    right: 1rem;
+    z-index: 3;
     box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.26), 0px 2px 10px 0px rgba(0, 0, 0, 0.16);
 }

themes/material/css/menu.css

@@ -1,4 +1,4 @@
-/* Menu */
+/* Menu header */
 
 body > nav > ul span.icon {
     left: 1rem;
@@ -46,4 +46,3 @@ ul.oppose {
     width: 100%;
     min-width: 10rem;
 }
-

themes/material/css/style.css

@@ -222,7 +222,7 @@ nav + main {
 main > header {
     position: relative;
     height: 7rem;
-    overflow: hidden;
+    /*overflow: hidden;*/
     box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.2);
     z-index: 2;
 }
@@ -232,7 +232,7 @@ main > header > div {
     position: relative;
     width: 30%;
     display: inline-block;
-    overflow: hidden;
+    /*overflow: hidden;*/
     box-sizing: border-box;
     padding-right: 1rem;
 }
@@ -243,12 +243,12 @@ main > header > div > * {
     overflow: hidden;
 }
 
-main > header > div > ul.active {
+main > header > div > ul.active:not(.context_menu) {
     float: right;
     margin-right: -1rem;
 }
 
-main > header > div > ul.active li {
+main > header > div > ul.active:not(.context_menu) > li {
     float: left;
     height: 7rem;
     min-width: 0;
@@ -258,10 +258,18 @@ main > header > div > ul.active li {
     font-size: 4rem;
 }
 
-main > header > div > ul.active li span.icon {
+main > header > div > ul.active:not(.context_menu) > li.thin {
+    width: 5rem;
+}
+
+main > header > div > ul.active:not(.context_menu) > li span.icon {
     left: 1rem;
 }
 
+main > header > div > ul.active:not(.context_menu) > li.thin span.icon {
+    width: 3rem;
+}
+
 main > header > div:first-child:nth-last-child(2) ~ div {
     width: 70%;
     position: absolute;