- Add a "subheader" in some page headers

- Display the subject in the chatroom header
- Add a context menu on some pages to gain some place in the header
- Fix some CSS

app/assets/js/movim_tpl.js

@@ -97,6 +97,25 @@ var MovimTpl = {
     toggleMenu : function() {
         movim_toggle_class('body > nav', 'active');
     },
+    toggleContextMenu : function(e) {
+        var element = 'ul.context_menu';
+        var classname = 'shown';
+
+        if(document.querySelector(element) == null) {
+            return;
+        }
+
+        if(document.querySelector('.show_context_menu').contains(e.target)) {
+            movim_add_class(element, classname);
+            return;
+        }
+
+        //if(!document.querySelector(element).contains(e.target)) 
+        movim_remove_class(element, classname);
+    },
+    hideContextMenu : function() {
+        movim_remove_class('ul.context_menu', 'shown');
+    },
     hideMenu : function() {
         movim_remove_class('body > nav', 'active');
     },
@@ -122,4 +141,5 @@ var MovimTpl = {
 
 movim_add_onload(function() {
     MovimTpl.init();
+    document.body.addEventListener('click', MovimTpl.toggleContextMenu, false);
 });

app/models/message/MessageDAO.php

@@ -94,6 +94,22 @@ class MessageDAO extends SQL {
         return $this->run('Message');
     }
 
+    function getRoomSubject($room) {
+        $this->_sql = '
+            select * from message 
+            where jidfrom = :jidfrom
+              and subject != \'\'';
+
+        $this->prepare(
+            'Message',
+            array(
+                'jidfrom'   => $room
+            )
+        );
+            
+        return $this->run('Message', 'item');
+    }
+    
     function clearMessage() {
         $this->_sql = '
             delete from message 

app/widgets/Chat/Chat.php

@@ -10,13 +10,14 @@ class Chat extends WidgetCommon
     function load()
     {
         $this->addjs('chat.js');
-        $this->addjs('chat_otr.js');
+        //$this->addjs('chat_otr.js');
         $this->addcss('chat.css');
         $this->registerEvent('carbons', 'onMessage');
         $this->registerEvent('message', 'onMessage');
         $this->registerEvent('composing', 'onComposing');
         $this->registerEvent('paused', 'onPaused');
         $this->registerEvent('gone', 'onGone');
+        $this->registerEvent('conference_subject', 'onConferenceSubject');
         //$this->registerEvent('presence', 'onPresence');
     }
 
@@ -97,6 +98,12 @@ class Chat extends WidgetCommon
         $this->setState($array, $this->__('message.gone'));
     }
 
+    function onConferenceSubject($message)
+    {
+        $header = $this->prepareHeaderRoom($message->jidfrom);
+        Header::fill($header);
+    }
+
     private function setState($array, $message)
     {
         list($from, $to) = $array;
@@ -284,7 +291,15 @@ class Chat extends WidgetCommon
     {
         $view = $this->tpl();
 
+        $md = new \Modl\MessageDAO;
+        $s = $md->getRoomSubject($room);
+
+        $cd = new \Modl\ConferenceDAO;
+        $c = $cd->get($room);
+
         $view->assign('room', $room);
+        $view->assign('subject', $s);
+        $view->assign('conference', $c);
 
         return $view->draw('_chat_header_room', true);
     }

app/widgets/Chat/_chat_header.tpl

@@ -17,12 +17,14 @@
             </span>
         </li>
     </ul>
-    <h2 id="chat_header" class="active r1" onclick="MovimTpl.hidePanel(); Chat_ajaxGet();">
+    <div id="chat_header" class="return active r1" onclick="MovimTpl.hidePanel(); Chat_ajaxGet();">
         <span id="back" class="icon"><i class="md md-arrow-back"></i></span>
-        {if="$contact != null"}
-            {$contact->getTrueName()}
-        {else}
-            {$jid|echapJS}
-        {/if}
+        <h2>
+            {if="$contact != null"}
+                {$contact->getTrueName()}
+            {else}
+                {$jid|echapJS}
+            {/if}
+        </h2>
     </h2>
 </div>

app/widgets/Chat/_chat_header_room.tpl

@@ -7,28 +7,38 @@
         </li>
     </ul>
     <span class="on_desktop icon"><i class="md md-forum"></i></span>
-    <h2 class="r1">{$c->__('page.chats')}</h2>
+    <h2>{$c->__('page.chats')}</h2>
 </div>
 <div>
     <ul class="active">
-        <li onclick="Rooms_ajaxList('{$room}')">
-            <span class="icon">
-                <i class="md md-menu"></i>
-            </span>
-        </li>
-        <li onclick="Rooms_ajaxRemoveConfirm('{$room}')">
+        <li onclick="Rooms_ajaxExit('{$room}'); MovimTpl.hidePanel();">
             <span class="icon">
-                <i class="md md-delete"></i>
+                <i class="md md-close"></i>
             </span>
         </li>
-        <li onclick="Rooms_ajaxExit('{$room}'); MovimTpl.hidePanel();">
+        <li class="thin show_context_menu">
             <span class="icon">
-                <i class="md md-close"></i>
+                <i class="md md-more-vert"></i>
             </span>
         </li>
     </ul>
-    <h2 class="active r3" onclick="MovimTpl.hidePanel(); Chat_ajaxGet();">
+    <div class="return active r2 {if="$subject != null"}condensed{/if}" onclick="MovimTpl.hidePanel(); Chat_ajaxGet();">
         <span id="back" class="icon" ><i class="md md-arrow-back"></i></span>
-        {$room}
-    </h2>
+        {if="$conference != null && $conference->name"}
+            <h2 title="{$room}">{$conference->name}</h2>
+        {else}
+            <h2>{$room}</h2>
+        {/if}
+        {if="$subject != null"}
+            <h4 title="{$subject->subject}">{$subject->subject}</h4>
+        {/if}
+    </div>
+    <ul class="simple context_menu active">
+        <li onclick="Rooms_ajaxList('{$room}')">
+            <span>{$c->__('chatroom.members')}</span>
+        </li>
+        <li onclick="Rooms_ajaxRemoveConfirm('{$room}')">
+            <span>{$c->__('button.delete')}</span>
+        </li>
+    </ul>
 </div>

app/widgets/Chat/locales.ini

@@ -12,5 +12,6 @@ chat.smileys            = 'Smileys'
 chat.empty_title        = 'Chat'
 chat.empty_text         = 'Discuss with your contacts'
 
+chatroom.members        = 'Chatroom members'
 chatroom.connected      = 'Connected to the chatroom'
 chatroom.disconnected   = 'Disconnected from the chatroom'

app/widgets/Contact/_contact_header.tpl

@@ -16,10 +16,10 @@
                 </span>
             </li>
         </ul>
-        <h2 class="active r2" onclick="MovimTpl.hidePanel(); Contact_ajaxClear();">
+        <div class="return active r2" onclick="MovimTpl.hidePanel(); Contact_ajaxClear();">
             <span id="back" class="icon" ><i class="md md-arrow-back"></i></span>
-            {$contactr->getTrueName()}
-        </h2>
+            <h2>{$contactr->getTrueName()}</h2>
+        </div>
     {else}
         {if="$contact != null"}
             <ul class="active">

app/widgets/Group/_group_header.tpl

@@ -6,20 +6,6 @@
 </div>
 <div>
     <ul class="active">
-        {if="$role == 'owner'"}
-            <li title="{$c->__('group.get_config')}"
-                onclick="Group_ajaxGetConfig('{$item->server}', '{$item->node}')">
-                <span class="icon">
-                    <i class="md md-settings"></i>
-                </span>
-            </li>
-            <li title="{$c->__('group.get_subscriptions')}"
-                onclick="Group_ajaxGetSubscriptions('{$item->server}', '{$item->node}')">
-                <span class="icon">
-                    <i class="md md-book"></i>
-                </span>
-            </li>
-        {/if}
         {if="$subscription == null"}
             <li title="{$c->__('group.subscribe')}"
                 onclick="Group_ajaxAskSubscribe('{$item->server}', '{$item->node}')">
@@ -35,16 +21,42 @@
                 </span>
             </li>
         {/if}
+        {if="$role == 'owner'"}
+            <li class="thin show_context_menu">
+                <span class="icon">
+                    <i class="md md-more-vert"></i>
+                </span>
+            </li>
+        {/if}
     </ul>
-    <h2 class="active {if="$role == 'owner'"}r3{else}r1{/if}"
+    <div class="return active condensed {if="$role == 'owner'"}r2{else}r1{/if}"
         onclick="MovimTpl.hidePanel(); Group_ajaxClear(); Groups_ajaxHeader();">
         <span id="back" class="icon"><i class="md md-arrow-back"></i></span>
-        {if="$item != null"}
-            {if="$item->name"}
-                {$item->name}
-            {else}
-                {$item->node}
+        <h2>
+            {if="$item != null"}
+                {if="$item->name"}
+                    {$item->name}
+                {else}
+                    {$item->node}
+                {/if}
             {/if}
+        </h2>
+        {if="$item->description"}
+            <h4 title="{$item->description|strip_tags}">
+                {$item->description}
+            </h4>
+        {else}
+            <h4>{$item->server}</h4>
         {/if}
-    </h2>
+    </div>
+    {if="$role == 'owner'"}
+        <ul class="simple context_menu active">
+            <li onclick="Group_ajaxGetConfig('{$item->server}', '{$item->node}')">
+                <span>{$c->__('group.get_config')}</span>
+            </li>
+            <li onclick="Group_ajaxGetSubscriptions('{$item->server}', '{$item->node}')">
+                <span>{$c->__('group.get_subscriptions')}</span>
+            </li>
+        </ul>
+    {/if}
 </div>

app/widgets/Navigation/navigation.tpl

@@ -22,7 +22,7 @@
             <span>{$c->__('page.contacts')}</span>
         </li>
     </a>
-    <a class="classic" href="{$c->route('group')}">
+    <a class="classic {if="!$c->supported('pubsub')"}disabled{/if}" href="{$c->route('group')}">
         <li {if="$page == 'group'"}class="active"{/if}>
             <span class="icon"><i class="md md-pages"></i></span>
             <span class="counter"></span>

app/widgets/Post/_post_header.tpl

@@ -18,16 +18,18 @@
             </li>
         </ul>
     {/if}
-    <h2 class="active {if="$post->isMine()"}r1{/if}" onclick="MovimTpl.hidePanel(); Post_ajaxClear();">
+    <div class="return active {if="$post->isMine()"}r1{/if}" onclick="MovimTpl.hidePanel(); Post_ajaxClear();">
         <span id="back" class="icon"><i class="md md-arrow-back"></i></span>
-        {if="$post != null"}
-            {if="$post->title != null"}
-                {$post->title}
+        <h2>
+            {if="$post != null"}
+                {if="$post->title != null"}
+                    {$post->title}
+                {else}
+                    {$c->__('post.default_title')}
+                {/if}
             {else}
-                {$c->__('post.default_title')}
+                Empty
             {/if}
-        {else}
-            Empty
-        {/if}
+        </h2>
     </h2>
 </div>

themes/material/css/list.css

@@ -9,7 +9,7 @@ ul li {
     box-sizing: border-box;
     text-overflow: ellipsis;
     overflow: hidden;
-    min-width: 12rem;
+    /*min-width: 12rem;*/
 }
 
 ul > a {
@@ -294,13 +294,18 @@ ul.tabs li.active {
 
 ul.context_menu {
     border-radius: 0.25rem;
-    display: inline-block;
     overflow: hidden;
     background-color: white;
     color: #333;
     position: absolute;
-    top: 1rem;
-    right: 1rem;
+    top: 0;
+    right: 0;
+    margin: 0.5rem;
     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);
+    display: none;
+}
+
+ul.context_menu.shown {
+    display: block;
 }

themes/material/css/menu.css

@@ -1,4 +1,4 @@
-/* Menu header */
+/* Menu */
 
 body > nav > ul span.icon {
     left: 1rem;

themes/material/css/style.css

@@ -237,7 +237,7 @@ main > header > div {
     padding-right: 1rem;
 }
 
-main > header > div > * {
+main > header > div > .return > * {
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;
@@ -248,7 +248,7 @@ main > header > div > ul.active:not(.context_menu) {
     margin-right: -1rem;
 }
 
-main > header > div > ul.active:not(.context_menu) > li {
+main > header > div > ul.active:not(.context_menu) li {
     float: left;
     height: 7rem;
     min-width: 0;
@@ -258,15 +258,15 @@ main > header > div > ul.active:not(.context_menu) > li {
     font-size: 4rem;
 }
 
-main > header > div > ul.active:not(.context_menu) > li.thin {
+main > header > div > ul.active:not(.context_menu) li.thin {
     width: 5rem;
 }
 
-main > header > div > ul.active:not(.context_menu) > li span.icon {
+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 {
+main > header > div > ul.active:not(.context_menu) li.thin span.icon {
     width: 3rem;
 }
 
@@ -286,20 +286,29 @@ main > header > div > span.icon {
     margin: 0;
 }
 
-main > header > div > h2 {
+main > header > div > .return {
     padding-left: 9rem;
     margin-left: -9rem;
     display: inline-block;
-    padding-right: 3rem;
+    padding-right: 1rem;
     max-width: calc(100% + 10rem);
+    height: 7rem;
     box-sizing: border-box;
 }
 
-main > header > div > h2.r1 { max-width: calc(100% + 2rem); }
-main > header > div > h2.r2 { max-width: calc(100% - 5rem); }
-main > header > div > h2.r3 { max-width: calc(100% - 12rem); }
+main > header > div > .return.condensed > h2 {
+    line-height: 4.1rem;
+}
+
+main > header > div > .return > h4 {
+    line-height: 2.5rem;
+}
 
-main > header > div > h2.active:hover,
+main > header > div > .return.r1 { max-width: calc(100% + 2rem); }
+main > header > div > .return.r2 { max-width: calc(100% - 5rem); }
+main > header > div > .return.r3 { max-width: calc(100% - 12rem); }
+
+main > header > div > .return.active:hover,
 main > header > div > span.active:hover {
     background-color: rgba(0, 0, 0, 0.05);
     cursor: pointer;
@@ -823,6 +832,8 @@ dl dd {
 .spinner.on:before,
 .spinner.on:after {
     top: 3rem;
+    animation: spinner 1s linear infinite;
+    -webkit-animation: spinner 1s linear infinite;
 }
 
 .spinner:before {
@@ -836,8 +847,6 @@ dl dd {
     content: '';
     border: 0.75rem solid transparent;
     border-top: 0.75rem solid #ddd;
-    animation: spinner 1s linear infinite;
-    -webkit-animation: spinner 1s linear infinite;
 }
 
 .spinner:after {