Continue the new theme integration in the Chat page + fixes

app/views/chat.tpl

@@ -4,7 +4,7 @@
 </nav>
 
 <main>
-    <?php $this->widget('Header'); ?>
+    <?php //$this->widget('Header'); ?>
     <section>
         <div>
             <?php $this->widget('Chats');?>

app/widgets/Chat/Chat.php

@@ -191,9 +191,9 @@ class Chat extends WidgetBase
 
             $html = $this->prepareChat($jid);
 
-            $header = $this->prepareHeader($jid);
+            //$header = $this->prepareHeader($jid);
 
-            Header::fill($header);
+            //Header::fill($header);
             RPC::call('movim_fill', 'chat_widget', $html);
             RPC::call('MovimTpl.showPanel');
             RPC::call('Chat.focus');
@@ -212,9 +212,9 @@ class Chat extends WidgetBase
 
         $html = $this->prepareChat($room, true);
 
-        $header = $this->prepareHeaderRoom($room);
+        //$header = $this->prepareHeaderRoom($room);
 
-        Header::fill($header);
+        //Header::fill($header);
         RPC::call('movim_fill', 'chat_widget', $html);
         RPC::call('MovimTpl.showPanel');
         RPC::call('Chat.focus');
@@ -469,6 +469,34 @@ class Chat extends WidgetBase
         $view->assign('emoji', prepareString('😀'));
         $view->assign('muc', $muc);
 
+        if($muc) {
+            $md = new \Modl\MessageDAO;
+            $s = $md->getRoomSubject($jid);
+
+            $cd = new \Modl\ConferenceDAO;
+            $c = $cd->get($jid);
+
+            $pd = new \Modl\PresenceDAO;
+            $p = $pd->getMyPresenceRoom($jid);
+
+            $view->assign('room', $jid);
+            $view->assign('subject', $s);
+            $view->assign('presence', $p);
+            $view->assign('conference', $c);
+        } else {
+            $cd = new \Modl\ContactDAO;
+
+            $cr = $cd->getRosterItem($jid);
+            if(isset($cr)) {
+                $contact = $cr;
+            } else {
+                $contact = $cd->get($jid);
+            }
+
+            $view->assign('contact', $contact);
+            $view->assign('jid', $jid);
+        }
+
         return $view->draw('_chat', true);
     }
 

app/widgets/Chat/_chat.tpl

@@ -1,4 +1,89 @@
-<div id="{$jid}_discussion" class="contained">
+<header class="fixed">
+    {if="$muc"}
+    <ul class="list middle active">
+        <li>
+            <span id="back" class="primary icon active" {if="!$anon"}onclick="MovimTpl.hidePanel(); Chat_ajaxGet();"{/if}>
+                {if="!$anon"}
+                    <i class="zmdi zmdi-arrow-back"></i>
+                {else}
+                    <i class="zmdi zmdi-comment-text-alt"></i>
+                {/if}
+            </span>
+
+            <span class="control icon show_context_menu active">
+                <i class="zmdi zmdi-more-vert"></i>
+            </span>
+
+            {if="$c->supported('upload')"}
+                <span class="control icon active" onclick="Upload_ajaxRequest()">
+                    <i class="zmdi zmdi-attachment-alt"></i>
+                </span>
+            {/if}
+            <span class="control icon active" onclick="Rooms_ajaxExit('{$room}'); MovimTpl.hidePanel(); {if="$anon"}Presence_ajaxLogout(){/if}">
+                <i class="zmdi zmdi-close"></i>
+            </span>
+
+            {if="$conference != null && $conference->name"}
+                <p class="line" title="{$room}">{$conference->name}</p>
+            {else}
+                <p class="line">{$room}</p>
+            {/if}
+            {if="$subject != null"}
+                <p class="line" title="{$subject->subject}">{$subject->subject}</p>
+            {/if}
+        </li>
+    </ul>
+
+    <ul class="list context_menu active">
+        <li onclick="Rooms_ajaxList('{$room}')">
+            <p class="normal">{$c->__('chatroom.members')}</p>
+        </li>
+        {if="!$anon"}
+            <li onclick="Rooms_ajaxRemoveConfirm('{$room}')">
+                <p class="normal">{$c->__('button.delete')}</p>
+            </li>
+        {/if}
+        {if="$presence != null && $presence->mucrole == 'moderator' && !$anon"}
+            <li onclick="Chat_ajaxGetRoomConfig('{$room}')">
+                <p class="normal">{$c->__('chatroom.config')}</p>
+            </li>
+            <li onclick="Chat_ajaxGetSubject('{$room}')">
+                <p class="normal">{$c->__('chatroom.subject')}</p>
+            </li>
+        {/if}
+    </ul>
+    {else}
+    <ul class="list middle">
+        <li id="chat_header">
+            <span onclick="
+            MovimTpl.hidePanel();
+            Notification.current('chat');
+            Chat_ajaxGet();"
+            id="back" class="primary icon active">
+                <i class="zmdi zmdi-arrow-back"></i>
+            </span>
+            <span class="control icon active" onclick="Chats_ajaxClose('{$jid|echapJS}'); MovimTpl.hidePanel();">
+                <i class="zmdi zmdi-close"></i>
+            </span>
+            {if="$c->supported('upload')"}
+                <span class="control icon active" onclick="Upload_ajaxRequest()">
+                    <i class="zmdi zmdi-attachment-alt"></i>
+                </span>
+            {/if}
+            <p class="line">
+                {if="$contact != null"}
+                    {$contact->getTrueName()}
+                {else}
+                    {$jid|echapJS}
+                {/if}
+            </p>
+            <p class="line" id="{$jid}_state">{$contact->jid}</p>
+        </li>
+    </ul>
+    {/if}
+</header>
+
+<div id="{$jid}_discussion" class="contained" data-muc="{$muc}">
     <section id="{$jid}_messages">
         <ul class="list {if="$muc"}thin simple{else}thick{/if}" id="{$jid}_conversation"></ul>
     </section>

app/widgets/Chat/chat.css

@@ -46,7 +46,7 @@
 }
 
 #chat_widget section {
-    padding-bottom: 2rem;
+    padding-bottom: 1rem;
 }
 
 #chat_widget li.oppose span.control {
@@ -71,6 +71,7 @@
 
 #chat_widget li.room {
     padding: 0.25rem 0;
+    padding-right: 2rem;
 }
 
 #chat_widget li.room > p {

app/widgets/Chat/chat.js

@@ -54,13 +54,16 @@ var Chat = {
     },
     setScrollBehaviour : function() {
         var discussion = document.querySelector('#chat_widget div.contained');
-        discussion.onscroll = function() {
-            if(this.scrollTop < 1) {
-                var chat = document.querySelector('#chat_widget');
-                Chat.lastScroll = this.scrollHeight;
-                Chat_ajaxGetHistory(chat.dataset.jid, Chat.date);
-            }
-        };
+        console.log(discussion.dataset.muc);
+        if(discussion.dataset.muc != true) {
+            discussion.onscroll = function() {
+                if(this.scrollTop < 1) {
+                    var chat = document.querySelector('#chat_widget');
+                    Chat.lastScroll = this.scrollHeight;
+                    Chat_ajaxGetHistory(chat.dataset.jid, Chat.date);
+                }
+            };
+        }
     },
     appendMessages : function(messages) {
         if(messages) {

app/widgets/Chats/chats.tpl

@@ -1,3 +1,13 @@
+<header>
+    <ul class="list middle">
+        <li>
+            <span id="menu" class="primary on_mobile icon active gray" onclick="MovimTpl.toggleMenu()"><i class="zmdi zmdi-menu"></i></span>
+            <span class="primary icon on_desktop icon gray"><i class="zmdi zmdi-comments"></i></span>
+            <p class="center">{$c->__('page.chats')}</p>
+        </li>
+    </ul>
+</header>
+
 <ul id="chats_widget_list" class="list middle active divided spaced">{$list}</ul>
 
 <div class="placeholder icon">

app/widgets/Hello/hello.tpl

@@ -1,14 +1,14 @@
-<header>
-    <ul class="list middle">
-        <li>
-            <span id="menu" class="primary on_mobile icon active" onclick="MovimTpl.toggleMenu()"><i class="zmdi zmdi-menu"></i></span>
-            <span class="primary on_desktop icon gray"><i class="zmdi zmdi-home"></i></span>
-            <p class="center">{$c->__('page.home')}</p>
-        </li>
-    </ul>
-</header>
-
 <div id="hello_widget" class="divided">
+    <header>
+        <ul class="list middle">
+            <li>
+                <span id="menu" class="primary on_mobile icon active gray" onclick="MovimTpl.toggleMenu()"><i class="zmdi zmdi-menu"></i></span>
+                <span class="primary on_desktop icon gray"><i class="zmdi zmdi-home"></i></span>
+                <p class="center">{$c->__('page.home')}</p>
+            </li>
+        </ul>
+    </header>
+
     {if="!isset($top) || !isset($news)"}
         <ul class="list thick">
             {$a = '1f600'}
@@ -153,6 +153,8 @@
 
                 </li>
             {/loop}
+        </ul>
+        <ul class="list">
             <a href="{$c->route('news')}">
                 <li>
                     <span class="primary icon">

app/widgets/Menu/_menu_list.tpl

@@ -2,7 +2,7 @@
     <header>
         <ul class="list middle">
             <li>
-                <span id="menu" class="primary on_mobile icon active" onclick="MovimTpl.toggleMenu()"><i class="zmdi zmdi-menu"></i></span>
+                <span id="menu" class="primary on_mobile icon active gray" onclick="MovimTpl.toggleMenu()"><i class="zmdi zmdi-menu"></i></span>
                 <span class="primary on_desktop icon gray"><i class="zmdi zmdi-filter-list"></i></span>
                 <p class="center line">{$c->__('page.news')}</p>
             </li>

app/widgets/Roster/roster.tpl

@@ -2,7 +2,7 @@
     <header>
         <ul class="list">
             <li>
-                <span id="menu" class="primary on_mobile icon active" onclick="MovimTpl.toggleMenu()"><i class="zmdi zmdi-menu"></i></span>
+                <span id="menu" class="primary on_mobile icon active gray" onclick="MovimTpl.toggleMenu()"><i class="zmdi zmdi-menu"></i></span>
                 <span class="primary on_desktop icon gray"><i class="zmdi zmdi-search"></i></span>
                 <form>
                     <div onclick="Roster.init();">

themes/material/css/block.css

@@ -5,6 +5,7 @@
 
 .flex .block {
     flex: 1 50%;
+    overflow: hidden;
 }
 
 .flex .block.large,

themes/material/css/color.css

@@ -75,6 +75,7 @@ ul.list li > p:nth-last-of-type(2) + p {
 .button.color,
 input[type=button].color,
 ul li span.counter,
+main > section > div > header.fixed,
 /*main > section > div > header,*/
 main > header { background-color: #3F51B5; color: white; border-color: #3F51B5; }
 
@@ -88,6 +89,7 @@ main > section > div > header.scroll {
     background-color: #EEE;
 }
 
+header.fixed ul.list li > p:nth-last-of-type(2) + p,
 main > section > div > header.big *,
 .snackbar ul.list li > p:nth-last-of-type(2) + p,
 main > header ul.list li > p:nth-last-of-type(2) + p,

themes/material/css/header.css

@@ -10,6 +10,24 @@ header.big {
 }
 
 
+header.fixed {
+    position: fixed;
+    background-color: red;
+    width: 100%;
+    max-width: 100%;
+    z-index: 1;
+}
+
+@media screen and (min-width: 1024px) {
+    main > section > div:first-child:nth-last-child(2) ~ div > header.fixed  {
+        width: 65%;
+    }
+}
+
+header.fixed + div {
+    margin-top: 7rem;
+}
+
 /*
 header.big {
     background-size: cover, cover;

themes/material/css/listn.css

@@ -228,7 +228,7 @@ ul.list li > .control ~ .control ~ .control {
 /* Limit the size of the main content */
 
 ul.list li > .control ~ *:not(.control):not(.bubble):not(.counter) {
-    width: calc(100% - 8rem);
+    width: calc(100% - 9rem);
 }
 
 ul.list li > .control ~ .control ~ *:not(.control):not(.bubble):not(.counter) {
@@ -325,6 +325,7 @@ ul li div.bubble {
     max-width: calc(100% - 11rem);
     float: left;
 
+    overflow: hidden;
     left: 9rem;
     padding-left: 2rem;
     width: auto;

themes/material/css/style.css

@@ -394,8 +394,8 @@ main > section > div:first-child:nth-last-child(2) ~ div {
     position: absolute;
     top: 0;
     right: 0;
-    -webkit-transition: left .3s cubic-bezier(.4,0,.2,1);
-    transition: left .3s cubic-bezier(.4,0,.2,1);
+    /*-webkit-transition: left .3s cubic-bezier(.4,0,.2,1);
+    transition: left .3s cubic-bezier(.4,0,.2,1);*/
 }
 
 main > section > div:first-child:nth-last-child(2) ~ div {
@@ -403,7 +403,7 @@ main > section > div:first-child:nth-last-child(2) ~ div {
 }
 
 main > section > div > div.contained { /* Specific behaviour when the scroll need to be inside the block */
-    height: calc(100% - 7rem);
+    height: calc(100% - 14.5rem);
     overflow-y: scroll;
     position: absolute;
     max-width: 100%;