Improve Contact page, reorganistion of the UI and add tabs

Fix #582

app/views/contact.tpl

@@ -18,8 +18,11 @@
                 <?php $this->widget('ContactDisco');?>
             </aside>
             <div>
+                <?php $this->widget('Tabs');?>
+
                 <?php $this->widget('Invitations');?>
                 <?php $this->widget('Roster');?>
+                <?php $this->widget('ContactDiscoPosts');?>
             </div>
         <?php } else { ?>
             <aside>

app/widgets/ContactDisco/ContactDisco.php

@@ -16,15 +16,10 @@ class ContactDisco extends \Movim\Widget\Base
     {
         $view = $this->tpl();
 
-        $nd = new \Modl\PostnDAO;
-        $blogs = $nd->getLastBlogPublic(0, 6);
-        $blogs = is_array($blogs) ? $blogs : [];
-
         $cd = new \Modl\ContactDAO;
-        $users = $cd->getAllPublic(0, 16);
+        $users = $cd->getAllPublic(0, 40);
 
         $view->assign('presencestxt', getPresencesTxt());
-        $view->assign('blogs', $blogs);
         $view->assign('users', $users);
 
         return $view->draw('_contactdisco', true);

app/widgets/ContactDisco/_contactdisco.tpl

@@ -1,5 +1,5 @@
 <ul class="list flex active">
-    <li class="subheader">
+    <li class="subheader block large">
         <p>{$c->__('explore.explore')}</p>
     </li>
     {loop="$users"}
@@ -34,52 +34,3 @@
     {/loop}
 </ul>
 
-<ul class="list active middle card shadow">
-    <li class="subheader">
-        <p>{$c->__('post.blog_last')}</p>
-    </li>
-    {loop="$blogs"}
-        {$attachments = $value->getAttachments()}
-        <li class="block" onclick="MovimUtils.redirect('{$c->route('post', [$value->origin, $value->node, $value->nodeid])}')">
-            <span class="primary icon thumb color {$value->getContact()->jid|stringToColor}"
-            {$picture = $value->getPicture()}
-            {if="$picture != null"}
-                style="background-image: url({$picture});"
-            {else}
-                {$url = $value->getContact()->getPhoto('l')}
-                {if="$url"}
-                    style="background-image: url({$url});"
-                {/if}
-            {/if}
-            >
-                {$value->getContact()->getTrueName()|firstLetterCapitalize}
-            </span>
-            <p class="line" {if="isset($value->title)"}title="{$value->title}"{/if}>
-            {if="isset($value->title)"}
-                {$value->title}
-            {else}
-                {$value->node}
-            {/if}
-            </p>
-            <p dir="auto">{$value->getSummary()}</p>
-            <p>
-                <a href="{$c->route('contact', $value->getContact()->jid)}">
-                    {$value->getContact()->getTrueName()}
-                </a>
-
-                {$count = $value->countLikes()}
-                {if="$count > 0"}
-                    {$count} <i class="zmdi zmdi-favorite-outline"></i>
-                {/if}
-
-                {$count = $value->countComments()}
-                {if="$count > 0"}
-                    {$count} <i class="zmdi zmdi-comment-outline"></i>
-                {/if}
-                <span class="info">
-                    {$value->published|strtotime|prepareDate:true,true}
-                </span>
-            </p>
-        </li>
-    {/loop}
-</ul>

app/widgets/ContactDiscoPosts/ContactDiscoPosts.php

@@ -0,0 +1,27 @@
+<?php
+
+class ContactDiscoPosts extends \Movim\Widget\Base
+{
+    public function load()
+    {
+        $this->addjs('contactdiscoposts.js');
+    }
+
+    public function ajaxGet()
+    {
+        $this->rpc('MovimTpl.fill', '#contactdiscoposts', $this->preparePosts());
+    }
+
+    public function preparePosts()
+    {
+        $view = $this->tpl();
+
+        $nd = new \Modl\PostnDAO;
+        $blogs = $nd->getLastBlogPublic(0, 36);
+        $blogs = is_array($blogs) ? $blogs : [];
+
+        $view->assign('blogs', $blogs);
+
+        return $view->draw('_contactdiscoposts', true);
+    }
+}

app/widgets/ContactDiscoPosts/_contactdiscoposts.tpl

@@ -0,0 +1,46 @@
+<ul class="list middle column half active card">
+    {loop="$blogs"}
+        {$attachments = $value->getAttachments()}
+        <li class="block" onclick="MovimUtils.redirect('{$c->route('post', [$value->origin, $value->node, $value->nodeid])}')">
+            <span class="primary icon thumb color {$value->getContact()->jid|stringToColor}"
+            {$picture = $value->getPicture()}
+            {if="$picture != null"}
+                style="background-image: url({$picture});"
+            {else}
+                {$url = $value->getContact()->getPhoto('l')}
+                {if="$url"}
+                    style="background-image: url({$url});"
+                {/if}
+            {/if}
+            >
+                {$value->getContact()->getTrueName()|firstLetterCapitalize}
+            </span>
+            <p class="line" {if="isset($value->title)"}title="{$value->title}"{/if}>
+            {if="isset($value->title)"}
+                {$value->title}
+            {else}
+                {$value->node}
+            {/if}
+            </p>
+            <p dir="auto">{$value->getSummary()}</p>
+            <p>
+                <a href="{$c->route('contact', $value->getContact()->jid)}">
+                    {$value->getContact()->getTrueName()}
+                </a>
+
+                {$count = $value->countLikes()}
+                {if="$count > 0"}
+                    {$count} <i class="zmdi zmdi-favorite-outline"></i>
+                {/if}
+
+                {$count = $value->countComments()}
+                {if="$count > 0"}
+                    {$count} <i class="zmdi zmdi-comment-outline"></i>
+                {/if}
+                <span class="info">
+                    {$value->published|strtotime|prepareDate:true,true}
+                </span>
+            </p>
+        </li>
+    {/loop}
+</ul>

app/widgets/ContactDiscoPosts/contactdiscoposts.js

@@ -0,0 +1,3 @@
+MovimWebsocket.attach(function() {
+    ContactDiscoPosts_ajaxGet();
+});

app/widgets/ContactDiscoPosts/contactdiscoposts.tpl

@@ -0,0 +1 @@
+<div id="contactdiscoposts" class="tabelem spin" title="{$c->__('button.discover')}"></div>

app/widgets/Roster/_roster_list.tpl

@@ -1,6 +1,9 @@
 <header>
     <ul class="list">
         <li>
+            <span class="primary icon bubble gray">
+                <i class="zmdi zmdi-search"></i>
+            </span>
             {if="count($contacts) > 5"}
             <form onsubmit="return false;">
                 <div onclick="Roster.init();">

app/widgets/Roster/roster.tpl

@@ -1,3 +1,3 @@
-<div id="roster">
+<div id="roster" class="tabelem spin" title="{$c->__('page.contacts')}">
     {$c->prepareItems()}
 </div>

themes/material/css/block.css

@@ -40,6 +40,10 @@
     margin: 1rem 0;
 }
 
+.column.half {
+    column-count: 2;
+}
+
 .column > * {
     display: inline-block;
     width: 100%;
@@ -54,7 +58,8 @@
         max-width: 100%;
     }
 
-    .column {
+    .column,
+    .column.half {
         column-count: 1;
     }
 }