- Complete the Chat features (composing + paused)

- Add color chooser in the Controllers - Fix the forms CSS - Fix the Avatar widget - Fix XMPPtoForm (move the labels) - Fix the colors CSS
11 years ago · 3923912ee4
18 changed files with 224 additions and 92 deletions
--- a/app/controllers/ChatController.php
+++ b/app/controllers/ChatController.php
@ -7,5 +7,6 @@ class ChatController extends BaseController {

    function dispatch() {
        $this->page->setTitle(__('title.main', APP_TITLE));
+        $this->page->setColor('blue');
    }
 }
--- a/app/controllers/ConfController.php
+++ b/app/controllers/ConfController.php
@ -7,13 +7,6 @@ class ConfController extends BaseController {

    function dispatch() {
        $this->page->setTitle(__('title.configuration', APP_TITLE));
-        
-        $this->page->menuAddLink(__('page.home'), 'root');
-        $this->page->menuAddLink(__('page.news'), 'news');
-        $this->page->menuAddLink(__('page.explore'), 'explore');
-        $this->page->menuAddLink(__('page.profile'), 'profile');
-        $this->page->menuAddLink(__('page.media'), 'media');
-        $this->page->menuAddLink(__('page.configuration'), 'conf', true, true);
-        $this->page->menuAddLink(__('page.help'), 'help', false, true);
+        $this->page->setColor('red');
    }
 }
--- a/app/controllers/ContactController.php
+++ b/app/controllers/ContactController.php
@ -7,5 +7,6 @@ class ContactController extends BaseController {

    function dispatch() {
        $this->page->setTitle(__('title.main', APP_TITLE));
+        $this->page->setColor('orange');
    }
 }
--- a/app/controllers/HelpController.php
+++ b/app/controllers/HelpController.php
@ -7,13 +7,6 @@ class HelpController extends BaseController {

    function dispatch() {
        $this->page->setTitle(__('title.help', APP_TITLE));
-    
-        $this->page->menuAddLink(__('page.home'), 'root');
-        $this->page->menuAddLink(__('page.news'), 'news');
-        $this->page->menuAddLink(__('page.explore'), 'explore');
-        $this->page->menuAddLink(__('page.profile'), 'profile');
-        $this->page->menuAddLink(__('page.media'), 'media');
-        $this->page->menuAddLink(__('page.configuration'), 'conf', false, true);
-        $this->page->menuAddLink(__('page.help'), 'help', true, true);
+        $this->page->setColor('indigo');
    }
 }
--- a/app/views/conf.tpl
+++ b/app/views/conf.tpl
@ -9,6 +9,7 @@
        <div>
            <?php $this->widget('Tabs');?>
            <?php $this->widget('Vcard4');?>
+            <?php $this->widget('Avatar');?>
            <?php $this->widget('Config');?>
            <?php //$this->widget('ConfigData');?>
            <?php $this->widget('PubsubSubscriptionConfig');?>
--- a/app/views/page.tpl
+++ b/app/views/page.tpl
@ -76,7 +76,7 @@
        }*/
    ?>
    </head>
-    <body class="green">
+    <body class="<?php $this->color();?>">
        <noscript>
            <style type="text/css">
                nav {display:none;} #content {display: none;}
--- a/app/widgets/Avatar/_avatar_form.tpl
+++ b/app/widgets/Avatar/_avatar_form.tpl
@ -1,45 +1,46 @@
 <form name="avatarform" id="avatarform">
-    <fieldset>
-        <legend>{$c->__('page.avatar')}</legend>
-        <div class="element">
-            <label for="avatar">{$c->__('page.avatar')}</label>
-                <img id="vCardPhotoPreview" src="data:image/jpeg;base64,{$photobin}">
-            <br /><span id="picturesize" class="clean"></span><br /><br />
-            
-            <input type="file" onchange="vCardImageLoad(this.files);">
+    <h3>{$c->__('page.avatar')}</h3>
+    <div class="block">        
+        <input type="file" onchange="vCardImageLoad(this.files);">
+        <label for="avatar">{$c->__('page.avatar')}</label>
+        <input type="hidden" name="photobin"  value="{$photobin}"/>
+    </div>

-            <input type="hidden" name="photobin"  value="{$photobin}"/>
-        </div>
+    <div class="block" id="result">
+        <img id="vCardPhotoPreview" src="data:image/jpeg;base64,{$photobin}">
+        <span id="picturesize" class="clean"></span>
+    </div>

-        <div class="element" id="camdiv">
-            <label for="url"><i class="fa fa-camera"></i> {$c->__('avatar.webcam')}</label>
-            <video id="runningcam" class="squares" autoplay></video>
-            <canvas style="display:none;"></canvas>
-            
-            <a 
-                id="shoot" 
-                class="button color green" 
-                onclick="return false;">
-                <i class="fa fa-smile-o"></i> {$c->__('avatar.cheese')}
-            </a>
-            <a
-                id="capture" 
-                class="button color purple" 
-                onclick="
-                    showVideo();
-                    return false;">
-                <i class="fa fa-smile-o"></i> {$c->__('avatar.snapshot')}
-            </a>
-        </div>
-    </fieldset>
+    <div id="camdiv" class="block">
+        <video id="runningcam" class="squares" autoplay></video>
+        <canvas style="display:none;"></canvas>
+        
+        <a 
+            id="shoot" 
+            class="button flat oppose" 
+            onclick="return false;">
+            {$c->__('avatar.cheese')}
+        </a>
+        <a
+            id="capture" 
+            class="button flat" 
+            onclick="
+                showVideo();
+                return false;">
+            {$c->__('avatar.snapshot')}
+        </a>
+        <label for="url">{$c->__('avatar.webcam')}</label>
+    </div>
+
+    <div class="clear"></div>

    <a
        onclick="
            {$submit}
            movim_button_save('#avatarvalidate');
            this.value = '{$c->__('button.submitting')}'; 
-            this.className='button color orange inactive oppose';" 
-        class="button color green oppose"
+            this.className='button color inactive oppose';" 
+        class="button color oppose"
        id="avatarvalidate"
-        ><i class="fa fa-check"></i> {$c->__('button.submit')}</a>
+        >{$c->__('button.submit')}</a>
 </form>
--- a/app/widgets/Avatar/avatar.css
+++ b/app/widgets/Avatar/avatar.css
@ -1,26 +1,63 @@
-#avatar img {
-    margin: 0 auto;
+#avatar form {
+    margin-top: 2rem;
 }

-#avatar .element #runningcam,
-#avatar .element #shoot{
+#avatar #camdiv {
+    padding-top: 5rem;
+}
+
+#avatar #camdiv #runningcam,
+#avatar #camdiv #shoot{
    display: none;
 }

-#avatar .element.active #runningcam{
+#avatar #camdiv.active #runningcam{
    display: block;
 }

-#avatar .element.active #shoot{
+#avatar #camdiv.active #shoot{
    display: inline-block;
 }

-#avatar .element.active #capture {
+#avatar #camdiv #runningcam {
+    max-width: 100%;
+}
+
+#avatar #camdiv.active #capture {
    display: none;
-}   
+}
+
+#avatar #result {
+    min-height: 35rem;
+    overflow: hidden;
+    text-align: center;
+}
+
+#avatar video {
+    background-color: #1F1F1F;
+    width: 100%;
+    min-height: 35rem;
+}
+
+#avatar #result img {
+    position:absolute;
+    top: 0;
+    bottom: 0;
+    margin:auto;
+    left: calc(50% - 105px);
+}
+
+#avatar #result span {
+    position: absolute;
+    bottom: 1rem;
+    font-size: 1.5rem;
+    margin-left: -3rem; 
+}

+/*
 .squares, #snap{
 	height:200px;
    box-shadow: none !important;
    border: 0px !important;
 }
+*/
--- a/app/widgets/Chat/Chat.php
+++ b/app/widgets/Chat/Chat.php
@ -9,6 +9,8 @@ class Chat extends WidgetCommon
        $this->addjs('chat.js');
        $this->registerEvent('carbons', 'onMessage');
        $this->registerEvent('message', 'onMessage');
+        $this->registerEvent('composing', 'onComposing');
+        $this->registerEvent('paused', 'onPaused');
    }

    function onMessage($packet)
@ -26,6 +28,40 @@ class Chat extends WidgetCommon
        RPC::call('MovimTpl.scrollPanel');
    }

+    function onComposing($array)
+    {
+        list($from, $to) = $array;
+        $myself = false;
+
+        if($from == $this->user->getLogin()) {
+            // If the message is from me
+            $myself = true;
+            $jid = $to;
+        } else {
+            $jid = $from;
+        }
+        
+        RPC::call('movim_fill', $jid.'_messages', $this->prepareMessages($jid, 'composing', $myself));
+        RPC::call('MovimTpl.scrollPanel');
+    }
+
+    function onPaused($array)
+    {
+        list($from, $to) = $array;
+        $myself = false;
+
+        if($from == $this->user->getLogin()) {
+            // If the message is from me
+            $myself = true;
+            $jid = $to;
+        } else {
+            $jid = $from;
+        }
+        
+        RPC::call('movim_fill', $jid.'_messages', $this->prepareMessages($jid, 'paused', $myself));
+        RPC::call('MovimTpl.scrollPanel');
+    }
+
    /**
     * @brief Show the smiley list
     */
@ -110,8 +146,16 @@ class Chat extends WidgetCommon
        $view = $this->tpl();

        $cd = new \Modl\ContactDAO;
+
+        $cr = $cd->getRosterItem($jid);
+        if(isset($cr)) {
+            $contact = $cr;
+        } else {
+            $contact = $cd->get($jid);
+        }
        
-        $view->assign('contact', $cd->get($jid));
+        $view->assign('contact', $contact);
+        $view->assign('presences', getPresences());
        $view->assign('jid', $jid);

        return $view->draw('_chat_header', true);
@ -136,10 +180,10 @@ class Chat extends WidgetCommon
        return $view->draw('_chat', true);
    }

-    function prepareMessages($jid)
+    function prepareMessages($jid, $status = false, $myself = false)
    {
        $md = new \Modl\MessageDAO();
-        $messages = $md->getContact(echapJid($jid), 0, 10);
+        $messages = $md->getContact(echapJid($jid), 0, 15);
        $messages = array_reverse($messages);
        
        $cd = new \Modl\ContactDAO;
@ -150,6 +194,9 @@ class Chat extends WidgetCommon
        $view->assign('me', $cd->get());
        $view->assign('messages', $messages);

+        $view->assign('status', $status);
+        $view->assign('myself', $myself);
+
        return $view->draw('_chat_messages', true);
    }

--- a/app/widgets/Chat/_chat_header.tpl
+++ b/app/widgets/Chat/_chat_header.tpl
@ -9,7 +9,7 @@
    </li>
 </ul>
 {if="$contact != null"}
-    <h2>{$contact->getTrueName()}</h2>
+    <h2>{$contact->getTrueName()} {if="$contact->value != null && $contact->value < 6"}- {$value = $contact->value} {$presences.$value}{/if}</h2>
 {else}
    <h2>{$jid}</h2>
 {/if}
--- a/app/widgets/Chat/_chat_messages.tpl
+++ b/app/widgets/Chat/_chat_messages.tpl
@ -14,8 +14,26 @@
                {else}
                    {$value->body|prepareString}
                {/if}
-            <span class="info">{$value->delivered|strtotime|prepareDate}</span>
+                <span class="info">{$value->delivered|strtotime|prepareDate}</span>
            </div>
        </li>
    {/loop}
+    {if="$status != false"}
+        <li {if="$myself == false"}class="oppose"{/if}>
+            <span class="icon bubble">
+                {if="$myself == false"}
+                    <img src="{$contact->getPhoto('s')}">
+                {else}
+                    <img src="{$me->getPhoto('s')}">
+                {/if}
+            </span>
+            <div class="bubble">
+                {if="$status == 'composing'"}
+                    <i class="md md-mode-edit"></i> {$c->__('message.composing')}
+                {else}
+                    <i class="md md-mode-edit"></i> {$c->__('message.paused')}
+                {/if}
+            </div>
+        </li>
+    {/if}
 </ul>
--- a/app/widgets/Chats/Chats.php
+++ b/app/widgets/Chats/Chats.php
@ -62,7 +62,12 @@ class Chats extends WidgetCommon
        $cd = new \Modl\ContactDAO;

        foreach($chats as $jid => $value) {
-            $chats[$jid] = $cd->get($jid);
+            $cr = $cd->getRosterItem($jid);
+            if(isset($cr)) {
+                $chats[$jid] = $cr;
+            } else {
+                $chats[$jid] = $cd->get($jid);
+            }
        }

        $view->assign('chats', array_reverse($chats));
--- a/app/widgets/Login/login.css
+++ b/app/widgets/Login/login.css
@ -41,6 +41,10 @@ body main {
    margin-top: 2rem;
 }

+#login_widget form > div:last-child {
+    min-height: 0;
+}
+
 ul.admin {
    position: relative;
    text-align: center;
--- a/app/widgets/Menu/_menu_list.tpl
+++ b/app/widgets/Menu/_menu_list.tpl
@ -22,8 +22,14 @@
        </li>
    </ul>
 {elseif="$page == 0"}
-    <div>
-        <h1>{$c->__('menu.empty_title')}</h1>
-        <p>{$c->__('menu.empty')}</p>
-    </div>
+    <br/>
+    <ul>
+        <li class="condensed">
+            <span class="icon bubble color orange">
+                <i class="md md-format-align-left"></i>
+            </span>
+            <span>{$c->__('menu.empty_title')}</span>
+            <p>{$c->__('menu.empty')}</p>
+        </li>
+    </ul>
 {/if}
--- a/lib/XMPPtoForm.php
+++ b/lib/XMPPtoForm.php
@ -95,10 +95,11 @@ class XMPPtoForm{

    private function outGeneric($s){
        $this->html .= '
+            <input id="'.$s.'" name="generic_'.$s.'" type="'.$s.'" required/>
            <label for="'.$s.'">'.
                $s.'
            </label>
-            <input id="'.$s.'" name="generic_'.$s.'" type="'.$s.'" required/>';
+            ';
    }
    private function outTitle($s){
        $this->html .= '
@ -123,18 +124,7 @@ class XMPPtoForm{
        $this->fieldset ++;
    }

-    private function outCheckbox($s){        
-        $this->html .= '
-            <label for="'.$s['var'].'">';
-                if($s['label']==null){
-                    $this->html .= $s['var'];
-                }
-                else{
-                    $this->html .= $s['label'];
-                }
-        $this->html .= '
-            </label>';
-            
+    private function outCheckbox($s){
        $this->html .= '
            <input 
                id="'.$s['var'].'" 
@ -145,18 +135,28 @@ class XMPPtoForm{
            if($s->value == "true" || $s->value == "1")
                $this->html .= ' checked';
        $this->html .= '/>';
-        
+
+        $this->html .= '
+            <label for="'.$s['var'].'">';
+                if($s['label']==null){
+                    $this->html .= $s['var'];
+                }
+                else{
+                    $this->html .= $s['label'];
+                }
+        $this->html .= '
+            </label>';
    }
    
    private function outTextarea($s){
        $this->html .= '
-            <label for="'.$s["var"].'">'.$s["label"].'</label>
            <textarea 
                id="'.$s["var"].'" 
                name="'.$s["var"].'" 
                type="'.$s['type'].'"
                label="'.$s['label'].'"
-                required="'.$s->required.'">';
+                required="'.$s->required.'">
+            <label for="'.$s["var"].'">'.$s["label"].'</label>';
                
        foreach($s->children() as $value){
            if($value->getName() == "value"){
@ -170,7 +170,6 @@ class XMPPtoForm{
        if($s->required)
            $req = 'required';
        $this->html .= '
-            <label for="'.$s["var"].'">'.$s["label"].'</label>
            <input id="'.$s["var"].'" name="'.$s["var"].'" value="';
            
            foreach($s->children() as $value){
@ -189,7 +188,8 @@ class XMPPtoForm{
            title="'.$s->desc.'" 
            type="'.$s['type'].'"
            label="'.$s['label'].'"
-            '.$multiple.' '.$req.'/>';
+            '.$multiple.' '.$req.'/>
+            <label for="'.$s["var"].'">'.$s["label"].'</label>';
    }
    
    private function outHiddeninput($s){
@ -199,7 +199,6 @@ class XMPPtoForm{
    
    private function outList($s, $multiple){
        $this->html .= '
-            <label for="'.$s["var"].'">'.$s["label"].'</label>
            <div class="select">
                <select 
                    type="'.$s['type'].'"
@ -229,7 +228,8 @@ class XMPPtoForm{
        
        $this->html .= '
                </select>
-            </div>';
+            </div>
+            <label for="'.$s["var"].'">'.$s["label"].'</label>';
    }
 }

--- a/system/template/TplPageBuilder.php
+++ b/system/template/TplPageBuilder.php
@ -14,6 +14,7 @@ class TplPageBuilder
 {
    private $theme = 'movim';
    private $_view = '';
+    private $_color = 'green';
    private $title = '';
    private $menu = array();
    private $content = '';
@ -100,6 +101,22 @@ class TplPageBuilder
    {
        echo $this->title;
    }
+    
+    /**
+     * Sets the page's color.
+     */
+    function setColor($color)
+    {
+        $this->_color = $color;
+    }
+
+    /**
+     * Displays the current color.
+     */
+    function color()
+    {
+        echo $this->_color;
+    }

    /**
     * Adds a link to the menu with the displayed label.
--- a/themes/material/css/color.css
+++ b/themes/material/css/color.css
@ -63,7 +63,7 @@ label.orange, .icon.orange   { color: #FF9800; }
 label.yellow, .icon.yellow   { color: #FFEB3B; }
 label.brown , .icon.brown    { color: #795548; }
 label.gray  , .icon.gray     { color: #9E9E9E; }
-
+/*
 form input:focus,
 form textarea:focus {
    border-bottom: 2px solid #2196F3;
@ -85,7 +85,7 @@ form input:focus:valid {
 }
 form input:focus:valid + label {
    color: #4CAF50;
-}
+}*/

 /* Global color palette */

@ -235,6 +235,10 @@ body.blue ul li span.counter,
 body.blue .oppose .bubble,
 body.blue main > header { background-color: #2196F3; color: white; border-color: #2196F3; }

+/* 200 */
+body.blue .oppose .bubble a,
+body.blue main > header a { color: #90caf9; }
+
 body.blue .tabs,
 body.blue .button,
 body.blue input[type=button],
--- a/themes/material/css/form.css
+++ b/themes/material/css/form.css
@ -52,7 +52,7 @@ form > div > .select select {
    background-color: transparent;
 }

-form > div > input,
+form > div > input:not([type=submit]),
 form > div > textarea {
    display: block;
    padding: 1rem 0;
@ -67,6 +67,7 @@ form > div > textarea {

 form > div > input:focus,
 form > div > textarea:focus {
+    border-bottom-width: 2px;
    margin-bottom: calc(1rem - 1px);
 }

@ -192,11 +193,14 @@ input[type=button] {
    line-height: 4.5rem;
    height: 4.5rem;
    margin: 0.75rem 0.5rem;
+    
    border-radius: 0.25rem;
    background-color: white;
    color: black;
    padding: 0 1rem;

+    border: 0;
+
    transition: background 0.3s ease;

    box-shadow: 0 0.1rem 0.3rem rgba(0, 0, 0, 0.5);