- Continue chatroom implementation

- Add user list Dialog box for the chatrooms

app/views/page.tpl

@@ -27,7 +27,6 @@
         $this->addCss('color.css');
         $this->addCss('block.css');
         $this->addCss('menu.css');
-        $this->addCss('icon.css');
         $this->addCss('material-design-iconic-font.min.css');
         /*$this->addCss('css/animations.css');
 

app/widgets/Chat/_chat_header_room.tpl

@@ -1,6 +1,11 @@
 <span id="back" class="icon" onclick="MovimTpl.hidePanel(); Chat_ajaxGet();"><i class="md md-arrow-back"></i></span>
 
 <ul class="active">
+    <li onclick="Rooms_ajaxList('{$room}')">
+        <span class="icon">
+            <i class="md md-menu"></i>
+        </span>
+    </li>
     <li onclick="Rooms_ajaxRemoveConfirm('{$room}')">
         <span class="icon">
             <i class="md md-delete"></i>

app/widgets/Chat/chat.css

@@ -16,6 +16,10 @@
     width: calc(100% - 5rem);
 }
 
+#chat_widget .chat_box form textarea {
+    margin-bottom: 0;
+}
+
 #chat_widget .chat_box .control {
     font-size: 4rem;
     color: gray;

app/widgets/Chat/chat.js

@@ -20,6 +20,10 @@ var Chat = {
             movim_title_inc();
             movim_desktop_notification(title, body, image);
         }
+    },
+    empty : function()
+    {
+        Chat_ajaxGet();
     }
 }
 

app/widgets/Chats/Chats.php

@@ -61,6 +61,7 @@ class Chats extends WidgetCommon
             Cache::c('chats', $chats);
 
             RPC::call('movim_prepend', 'chats_widget_list', $this->prepareChat($jid));
+            RPC::call('Chat.refresh');
             RPC::call('Chats.refresh');
         }
     }
@@ -71,11 +72,10 @@ class Chats extends WidgetCommon
         unset($chats[$jid]);
         Cache::c('chats', $chats);
 
-        //$c = new Chat;
-        //$c->ajaxGet(current(array_keys($chats)));
         RPC::call('movim_delete', $jid);
 
         RPC::call('Chats.refresh');
+        RPC::call('Chat.empty');
         RPC::call('MovimTpl.hidePanel');
     }
 

app/widgets/Chats/chats.js

@@ -30,7 +30,7 @@ var Chats = {
             i++;
         }
         
-        Chat_ajaxGet();
+        //Chat_ajaxGet();
 
         /*if(window.innerWidth > 1024 && !MovimTpl.isPanel()) {
             Notification.notifs_key = 'chat|' + items[0].dataset.jid;

app/widgets/Login/login.css

@@ -6,6 +6,7 @@ body main {
     background-position: center 90%;
     background-size: 30rem auto;
 
+    -webkit-animation: 60s infinite colorful;
     animation: 60s infinite colorful;
 }
 
@@ -51,236 +52,3 @@ ul.admin {
     color: white;
     max-width: 45rem;
 }
-
-/*
-#login_widget > div {
-    background-color: white;
-    border-radius: 0.25rem;
-    box-shadow: 0 0.1rem 0.3rem rgba(0, 0, 0, 0.5);
-}
-
-#login_widget > div:not(.choose) form {
-    margin: 2rem;
-    margin-top: 0;
-}
-
-#login_widget > ul {
-    color: white;
-    max-width: 50rem;
-    text-align: center;
-}
-
-@media screen and (max-width: 1024px) {
-    #login_widget > ul {
-        display: none;
-    }
-}*/
-
-/*body {
-    width: 100%;
-    margin: 0 auto;
-    max-width: 28em;
-    padding-right: 0;
-
-    animation: 200s infinite colorful;
-    -webkit-animation: 200s infinite colorful;
-    
-    background-color: #32434D;
-}
-
-#content {
-    margin: 0 auto;
-    width: 100%;
-}
-
-#loginpage {
-    display: block;
-    margin: 0 auto;
-    height: 100%;
-    
-    background-image: url(img/logo.svg);
-    background-repeat: no-repeat;
-    background-position: center 1em;
-    background-size: 74% auto;
-    padding-top: 33%;
-
-    margin-top: 40%;
-}
-
-#loginpage .admin {
-    position: fixed;
-    bottom: 0px;
-    right: 0px;
-    color: white;
-    padding: 1em;
-}
-
-#loginpage .admin a:link,
-#loginpage .admin a:visited {
-    color: white;
-}
-
-#loginpage form {
-    transition: background-color 0.5s ease;
-    box-shadow: 0 0.1em 0px rgba(0, 0, 0, 0.2);
-    padding: 0.5em;
-    background-color: rgba(255, 255, 255, 0.2);
-    border-radius: 0.1em;
-}
-
-#loginpage form .create span {
-    color: white;
-    padding: 0 1em;
-    line-height: 2em;
-    text-align: right;
-    display: inline-block;
-    float: right;
-}
-
-#loginpage form .element {
-    display: block;
-    margin: 0 auto;
-    padding: 0;
-    width: 100%;
-    min-height: 0;
-}
-
-#loginpage form > .element:not(:first-child) {
-    padding-top: 0.5em;
-}*/
-/*
-#loginpage form .element.login {
-    min-height: 0em;
-}
-*/
-
-/*
-#loginpage form .element input:not([type=submit]) {
-    margin: 0;
-    border: 0;
-    box-shadow: none;
-    color: black;
-    background-color: rgba(255, 255, 255, 0.3);
-}
-
-#loginpage form .element input[type=submit] {
-    border-color: transparent;
-}
-
-#loginpage .infos {
-    color: white;
-    text-align: center;
-    line-height: 2em;
-}
-
-#loginpage #loginhelp {
-    list-style-type: none;
-    color: white;
-    line-height: 1.2em;
-    text-align: justify;
-    transition: height 0.5s ease;
-    height: 0em;
-    overflow: hidden;
-}
-
-#loginpage #loginhelp li {
-    min-height: 2.5em;
-    background-repeat: no-repeat;
-    background-image: url(img/beaker.png);
-    padding-left: 2.5em;
-    background-position: 0.2em center;
-    margin: 0.5em 0em;
-}
-
-#loginpage form:hover > #loginhelp {
-    height: 11.5em;
-}
-
-#loginpage #loginhelp li#jabber { background-image: url(img/jabber.png); }
-#loginpage #loginhelp li#gmail { background-image: url(img/envelope.png); }
-#loginpage #loginhelp li#facebook { background-image: url(img/facebook.png); }
-*/
-/* Sessions */
-/*
-#loginpage #sessions {
-    display: none;
-}
-
-#loginpage #sessions ul {
-    list-style-type: none;
-}
-
-#loginpage #sessions ul li {
-    box-shadow: 0 0.1em 0px rgba(0, 0, 0, 0.2);
-    padding: 0.5em;
-    transition: background-color 0.5s ease;
-    background-color: rgba(255, 255, 255, 0.2);
-    border-radius: 0.1em;
-    height: 3em;
-    margin-bottom: 0.5em;
-}
-
-#loginpage #sessions ul li a.button {
-    margin-top: 0.3em;
-}
-
-#loginpage #sessions ul li:hover {
-    background-color: rgba(255, 255, 255, 0.4);
-    cursor: pointer;
-}
-
-#loginpage #sessions ul li img {
-    height: 3em;
-    float: left;
-    border-radius: 0.2em;
-}
-
-#loginpage #sessions ul li span {
-    color: white;
-    line-height: 2.8em;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    text-indent: 0.5em;
-    width: 65%;
-    display: inline-block;
-    overflow: hidden;
-}
-*/
-/* States */
-/*
-#login_widget > div #sessions,
-#login_widget > div.choose #loginhelp,
-#login_widget > div.choose form div,
-#login_widget > div.choose form input {
-    display: none;
-}
-
-#login_widget > div.choose form {
-    box-shadow: none;
-    background-color: transparent;
-}
-
-#login_widget > div.choose #sessions {
-    display: block;
-    height: 100%;
-}
-
-#login_widget > div.choose #return_sessions {
-    display: none;
-}
-
-footer {
-    display: none;
-}*/
-/*
-@media screen and (max-width: 1024px) {
-    #loginpage {
-        background-size: 80% auto;
-    }
-
-    #loginhelp,
-    #loginpage form .create span {
-        display: none;
-    }
-}
-*/

app/widgets/Login/login.tpl

@@ -44,8 +44,8 @@
 
             <ul class="thin simple">
                 <li class="new_account">
-                    <span>{$c->__('form.no_account')}
-                        <a class="" href="{$c->route('account')}">
+                    <span>{$c->__('form.no_account')}<br />
+                        <a class="button flat" href="{$c->route('account')}">
                             {$c->__('form.create_one')}
                         </a>
                     </span>

app/widgets/Rooms/Rooms.php

@@ -66,6 +66,19 @@ class Rooms extends WidgetCommon
         Dialog::fill($view->draw('_rooms_remove', true));
     }
 
+    /**
+     * @brief Display the remove room confirmation
+     */
+    function ajaxList($room)
+    {
+        $view = $this->tpl();
+
+        $cd = new \Modl\PresenceDAO;
+        $view->assign('list', $cd->getJid($room));
+
+        Dialog::fill($view->draw('_rooms_list', true), true);
+    }
+
     /**
      * @brief Remove a room
      */

app/widgets/Rooms/_rooms_list.tpl

@@ -0,0 +1,24 @@
+<section class="scroll">
+    <h3>{$c->__('chatrooms.users')}</h3>
+    <br />
+    <ul class="active">
+        {loop="$list"}
+            <li onclick="Chats_ajaxOpen('{$value->jid}/{$value->resource}'); Dialog.clear();">
+                <span class="icon bubble color {$value->resource|stringToColor}">
+                    {$value->resource|firstLetterCapitalize}
+                </span>
+                {if="$value->mucaffiliation =='owner'"}
+                    <div class="control">
+                        <i class="md md-beenhere"></i>
+                    </div>
+                {/if}
+                <span>{$value->resource}</span>
+            </li>
+        {/loop}
+    </ul>
+</section>
+<div class="no_bar">
+    <a onclick="Dialog.clear()" class="button flat">
+        {$c->__('button.cancel')}
+    </a>
+</div>

app/widgets/Rooms/locales.ini

@@ -12,6 +12,7 @@ chatrooms.remove_title  = 'Remove a chatroom'
 chatrooms.remove_text   = 'You are going to remove the following chatroom. Please confirm your action.'
 chatrooms.connected     = 'Connected to the chatroom'
 chatrooms.disconnected  = 'Disconnected from the chatroom'
+chatrooms.users         = 'Users in the room'
 
 [bookmarks]
 bookmarks.updated       = 'Bookmarks updated'

locales/locales.ini

@@ -77,7 +77,7 @@ button.save             = 'Save'
 button.clear            = 'Clear'
 button.upload           = 'Upload'
 button.come_in          = 'Come in!'
-button.connecting       = 'Connecting...'
+button.connecting       = 'Connecting'
 button.yes              = 'Yes'
 button.no               = 'No'
 button.edit             = 'Edit'

themes/material/css/color.css

@@ -37,6 +37,20 @@
     100% { background-color: #9E9E9E; }
 }
 
+@-webkit-keyframes colorful {
+    0% { background-color: #9E9E9E; }
+    10% { background-color: #607D8B; }
+    20% { background-color: #F44336; }
+    30% { background-color: #9C27B0; }
+    40% { background-color: #3F51B5; }
+    50% { background-color: #2196F3; }
+    60% { background-color: #689F38; }
+    70% { background-color: #FF9800; }
+    80% { background-color: #FDD835; }
+    90% { background-color: #795548; }
+    100% { background-color: #9E9E9E; }
+}
+
 /* Elements */
 
 .bubble.color       , .icon.color          { color: white; background-color: #607D8B; border-color: #607D8B }

themes/material/css/form.css

@@ -70,7 +70,7 @@ main > header form > div:not(.clear):not(.control) > .select select {
 
 /* Placeholders to mimic FF */
 ::-webkit-input-placeholder { /* WebKit browsers */
-    color:    #fff;
+    color: #555;
     opacity: 0.5;
 }
 :-ms-input-placeholder { /* Internet Explorer 10+ */

themes/material/css/style.css

@@ -644,7 +644,7 @@ main section > div:first-child:nth-last-child(2) ~ div .actions.fixed > div:last
     opacity: 0;
 }
 
-@media screen and (max-width: 34rem) {
+@media screen and (max-width: 22rem) {
     .snackbar {
         width: 100%;
         top: 0;
@@ -655,6 +655,8 @@ main section > div:first-child:nth-last-child(2) ~ div .actions.fixed > div:last
 
     .toast {
         max-width: 90%;
+        left: 5%;
+        margin-left: 0;
     }
 }