first commit

mod/chat/gui_ajax/index.php

@@ -0,0 +1,114 @@
+<?php
+// This file is part of Moodle - http://moodle.org/
+//
+// Moodle is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// Moodle is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
+
+require_once('../../../config.php');
+require_once('../lib.php');
+
+$id      = required_param('id', PARAM_INT);
+$groupid = optional_param('groupid', 0, PARAM_INT); // Only for teachers.
+$theme   = optional_param('chat_theme', 'course_theme', PARAM_SAFEDIR); // The value course_theme == the current theme.
+
+$url = new moodle_url('/mod/chat/gui_ajax/index.php', array('id' => $id));
+if ($groupid !== 0) {
+    $url->param('groupid', $groupid);
+}
+$PAGE->set_url($url);
+$PAGE->set_popup_notification_allowed(false); // No popup notifications in the chat window.
+$PAGE->requires->strings_for_js(array('coursetheme', 'bubble', 'compact'), 'mod_chat');
+
+$chat = $DB->get_record('chat', array('id' => $id), '*', MUST_EXIST);
+$course = $DB->get_record('course', array('id' => $chat->course), '*', MUST_EXIST);
+$cm = get_coursemodule_from_instance('chat', $chat->id, $course->id, false, MUST_EXIST);
+
+$context = context_module::instance($cm->id);
+require_login($course, false, $cm);
+require_capability('mod/chat:chat', $context);
+
+// Check to see if groups are being used here.
+if ($groupmode = groups_get_activity_groupmode($cm)) {   // Groups are being used.
+    if ($groupid = groups_get_activity_group($cm)) {
+        if (!$group = groups_get_group($groupid)) {
+            throw new \moodle_exception('invalidgroupid');
+        }
+        $groupname = ': '.$group->name;
+    } else {
+        $groupname = ': '.get_string('allparticipants');
+    }
+} else {
+    $groupid = 0;
+    $groupname = '';
+}
+// If requested theme doesn't exist, use default 'bubble' theme.
+if ($theme != 'course_theme' and !file_exists(__DIR__ . '/theme/'.$theme.'/chat.css')) {
+    $theme = 'compact';
+}
+
+// Log into the chat room.
+if (!$chatsid = chat_login_user($chat->id, 'ajax', $groupid, $course)) {
+    throw new \moodle_exception('cantlogin', 'chat');
+}
+$courseshortname = format_string($course->shortname, true, array('context' => context_course::instance($course->id)));
+$module = array(
+    'name'      => 'mod_chat_ajax', // Chat gui's are not real plugins, we have to break the naming standards for JS modules here.
+    'fullpath'  => '/mod/chat/gui_ajax/module.js',
+    'requires'  => array('base', 'dom', 'event', 'event-mouseenter', 'event-key', 'json-parse', 'io', 'overlay', 'yui2-resize',
+                         'yui2-layout', 'yui2-menu'),
+    'strings'   => array(array('send', 'chat'), array('sending', 'chat'), array('inputarea', 'chat'), array('userlist', 'chat'),
+                         array('modulename', 'chat'), array('beep', 'chat'), array('talk', 'chat'))
+);
+$modulecfg = array(
+    'home' => $CFG->wwwroot.'/mod/chat/view.php?id='.$cm->id,
+    'chaturl' => $CFG->wwwroot.'/mod/chat/gui_ajax/index.php?id='.$id,
+    'theme' => $theme,
+    'userid' => $USER->id,
+    'sid' => $chatsid,
+    'timer' => 3000,
+    'chat_lasttime' => 0,
+    'chat_lastrow' => null,
+    'chatroom_name' => $courseshortname . ": " . format_string($chat->name, true) . $groupname
+);
+$PAGE->requires->js_init_call('M.mod_chat_ajax.init', array($modulecfg), false, $module);
+
+$PAGE->set_title(get_string('modulename', 'chat').": $courseshortname: ".format_string($chat->name, true)."$groupname");
+$PAGE->add_body_class('yui-skin-sam');
+$PAGE->activityheader->disable();
+$PAGE->set_pagelayout('embedded');
+if ( $theme != 'course_theme') {
+    $PAGE->requires->css('/mod/chat/gui_ajax/theme/'.$theme.'/chat.css');
+}
+
+echo $OUTPUT->header();
+echo $OUTPUT->box(html_writer::tag('h2',  get_string('participants'), array('class' => 'accesshide')) .
+        '<ul id="users-list" class="list-group"></ul>', '', 'chat-userlist');
+echo $OUTPUT->box('', '', 'chat-options');
+echo $OUTPUT->box(html_writer::tag('h2',  get_string('messages', 'chat'), array('class' => 'accesshide')) .
+        '<ul id="messages-list"></ul>', '', 'chat-messages');
+$table = new html_table();
+$table->data = [[
+    '<div class="d-flex flex-wrap align-items-center"><div class="d-flex"><label class="accesshide" for="input-message">'.
+    get_string('entermessage', 'chat').' </label>'.
+    '<span class="mb-3"><input type="text" disabled="true" class="form-control" ' .
+    'id="input-message" value="Loading..." size="48" /></span>'.
+    '<span class="mb-3"><input type="button" id="button-send" class="btn btn-secondary mx-1" ' .
+    'value="'.get_string('send', 'chat').'" />' .$OUTPUT->help_icon('usingchat', 'chat'). '</span></div>' .
+    ' <div class="mb-3 d-flex ml-auto"><a id="choosetheme" href="###">'.
+    get_string('themes').
+    ' &raquo; </a></div></div>',
+]];
+echo $OUTPUT->box(html_writer::tag('h2',  get_string('composemessage', 'chat'), array('class' => 'accesshide')) .
+        html_writer::table($table), '', 'chat-input-area');
+echo $OUTPUT->box('', '', 'chat-notify');
+echo $OUTPUT->footer();

mod/chat/gui_ajax/module.js

@@ -0,0 +1,265 @@
+/*
+ * NOTE: the /mod/chat/gui_header_js/ is not a real plugin,
+ * ideally this code should be in /mod/chat/module.js
+ */
+
+/**
+ * @namespace M.mod_chat_ajax
+ */
+M.mod_chat_ajax = M.mod_chat_ajax || {};
+
+/**
+ * Init ajax based Chat UI.
+ * @namespace M.mod_chat_ajax
+ * @function
+ * @param {YUI} Y
+ * @param {Object} cfg configuration data
+ */
+M.mod_chat_ajax.init = function(Y, cfg) {
+
+    var gui_ajax = {
+
+        // Properties.
+        api : M.cfg.wwwroot + '/mod/chat/chat_ajax.php?sesskey=' + M.cfg.sesskey,  // The path to the ajax callback script.
+        cfg : {},                                       // A configuration variable.
+        interval : null,                                // The interval object for refreshes.
+        layout : null,                                  // A reference to the layout used in this module.
+        messages : [],                                  // An array of messages.
+        scrollable : true,                              // True is scrolling should occur.
+        thememenu : null,                               // A reference to the menu for changing themes.
+
+        // Elements
+        messageinput : null,
+        sendbutton : null,
+        messagebox : null,
+
+        init : function(cfg) {
+            this.cfg = cfg;
+            this.cfg.req_count = this.cfg.req_count || 0;
+            participantswidth = 180;
+            if (Y.one('#input-message').get('docWidth') < 640) {
+                participantswidth = 120;
+            }
+            this.layout = new Y.YUI2.widget.Layout({
+                units : [
+                     {position: 'right', width: participantswidth, resize: true, gutter: '1px', scroll: true, body: 'chat-userlist', animate: false},
+                     {position: 'bottom', height: 42, resize: false, body: 'chat-input-area', gutter: '1px', collapse: false, resize: false},
+                     {position: 'center', body: 'chat-messages', gutter: '0px', scroll: true}
+                ]
+            });
+
+            this.layout.on('render', function() {
+                var unit = this.getUnitByPosition('right');
+                if (unit) {
+                    unit.on('close', function() {
+                        closeLeft();
+                    });
+                }
+            }, this.layout);
+            this.layout.render();
+
+            // Gather the general elements.
+            this.messageinput = Y.one('#input-message');
+            this.sendbutton = Y.one('#button-send');
+            this.messagebox = Y.one('#chat-messages');
+
+            // Set aria attributes to messagebox and chat-userlist.
+            this.messagebox.set('role', 'log');
+            this.messagebox.set('aria-live', 'polite');
+            var userlist = Y.one('#chat-userlist');
+            userlist.set('aria-live', 'polite');
+            userlist.set('aria-relevant', 'all');
+
+            // Attach the default events for this module.
+            this.sendbutton.on('click', this.send, this);
+            this.messagebox.on('mouseenter', function() {
+                this.scrollable = false;
+            }, this);
+            this.messagebox.on('mouseleave', function() {
+                this.scrollable = true;
+            }, this);
+
+            // Send the message when the enter key is pressed.
+            Y.on('key', this.send, this.messageinput,  'press:13', this);
+
+            document.title = this.cfg.chatroom_name;
+
+            // Prepare and execute the first AJAX request of information.
+            Y.io(this.api,{
+                method : 'POST',
+                data :  build_querystring({
+                    action : 'init',
+                    chat_init : 1,
+                    chat_sid : this.cfg.sid,
+                    chat_theme : this.cfg.theme
+                }),
+                on : {
+                    success : function(tid, outcome) {
+                        this.messageinput.removeAttribute('disabled');
+                        this.messageinput.set('value', '');
+                        this.messageinput.focus();
+                        try {
+                            var data = Y.JSON.parse(outcome.responseText);
+                        } catch (ex) {
+                            return;
+                        }
+                        this.update_users(data.users);
+                    }
+                },
+                context : this
+            });
+
+            var scope = this;
+            this.interval = setInterval(function() {
+                scope.update_messages();
+            }, this.cfg.timer, this);
+
+            // Create and initalise theme changing menu.
+            this.thememenu = new Y.YUI2.widget.Menu('basicmenu', {xy:[0,0]});
+            this.thememenu.addItems([
+                {text: M.util.get_string('bubble', 'mod_chat'), url: this.cfg.chaturl + '&chat_theme=bubble'},
+                {text: M.util.get_string('compact', 'mod_chat'), url: this.cfg.chaturl + '&chat_theme=compact'},
+                {text: M.util.get_string('coursetheme', 'mod_chat'), url: this.cfg.chaturl + '&chat_theme=course_theme'}
+            ]);
+            this.thememenu.render(document.body);
+            Y.one('#choosetheme').on('click', function(e) {
+                this.moveTo((e.pageX - 20), (e.pageY - 20));
+                this.show();
+            }, this.thememenu);
+
+            // Set the data-placement for the help-icon to display all the content.
+            this.helpicon = Y.one('#button-send + a');
+            this.dataset = this.helpicon.get('dataset');
+            this.dataset.placement = 'top';
+            this.helpicon.set('dataset', this.dataset);
+        },
+
+        append_message : function(key, message, row) {
+            var item = Y.Node.create('<li id="mdl-chat-entry-' + key + '">' + message.message + '</li>');
+            item.addClass((message.mymessage) ? 'mdl-chat-my-entry' : 'mdl-chat-entry');
+            Y.one('#messages-list').append(item);
+            if (message.type && message.type == 'beep') {
+                var audioElement = document.createElement('audio');
+                audioElement.setAttribute('src', '../beep.mp3');
+                audioElement.play();
+            }
+        },
+
+        send : function(e, beep) {
+            if((this.messageinput.get('value') != '') || (typeof beep != 'undefined')) {
+                this.sendbutton.set('value', M.util.get_string('sending', 'chat'));
+                var data = {
+                    chat_message : (!beep) ? this.messageinput.get('value') : '',
+                    chat_sid : this.cfg.sid,
+                    chat_theme : this.cfg.theme
+                };
+                if (beep) {
+                    data.beep = beep
+                }
+                data.action = 'chat';
+
+                Y.io(this.api, {
+                    method : 'POST',
+                    data : build_querystring(data),
+                    on : {
+                        success : this.send_callback
+                    },
+                    context : this
+                });
+            }
+        },
+
+        send_callback : function(tid, outcome, args) {
+            try {
+                var data = Y.JSON.parse(outcome.responseText);
+            } catch (ex) {
+                return;
+            }
+            this.sendbutton.set('value', M.util.get_string('send', 'chat'));
+            this.messageinput.set('value', '');
+            clearInterval(this.interval);
+            this.update_messages();
+            var scope = this;
+            this.interval = setInterval(function() {
+                scope.update_messages();
+            }, this.cfg.timer, this);
+        },
+
+        talkto: function (e, name) {
+            this.messageinput.set('value', "To " + name + ": ");
+            this.messageinput.focus();
+        },
+
+        update_messages : function() {
+            this.cfg.req_count++;
+            Y.io(this.api, {
+                method : 'POST',
+                data : build_querystring({
+                    action: 'update',
+                    chat_lastrow : this.cfg.chat_lastrow || false,
+                    chat_lasttime : this.cfg.chat_lasttime,
+                    chat_sid : this.cfg.sid,
+                    chat_theme : this.cfg.theme
+                }),
+                on : {
+                    success : this.update_messages_callback
+                },
+                context : this
+            });
+        },
+
+        update_messages_callback : function(tid, outcome) {
+            try {
+                var data = Y.JSON.parse(outcome.responseText);
+            } catch (ex) {
+                return;
+            }
+            if (data.error) {
+                clearInterval(this.interval);
+                alert(data.error);
+                window.location = this.cfg.home;
+            }
+            this.cfg.chat_lasttime = data.lasttime;
+            this.cfg.chat_lastrow  = data.lastrow;
+            // Update messages.
+            for (var key in data.msgs){
+                if (!M.util.in_array(key, this.messages)) {
+                    this.messages.push(key);
+                    this.append_message(key, data.msgs[key], data.lastrow);
+                }
+            }
+            // Update users.
+            this.update_users(data.users);
+            // Scroll to the bottom of the message list
+            if (this.scrollable) {
+                Y.Node.getDOMNode(this.messagebox).parentNode.scrollTop += 500;
+            }
+            this.messageinput.focus();
+        },
+
+        update_users : function(users) {
+            if (!users) {
+                return;
+            }
+            var list = Y.one('#users-list');
+            list.get('children').remove();
+            for (var i in users) {
+                var li = Y.Node.create('<li><table><tr><td>' + users[i].picture + '</td><td></td></tr></table></li>');
+                if (users[i].id == this.cfg.userid) {
+                    li.all('td').item(1).append(Y.Node.create('<strong><a target="_blank" href="' + users[i].url + '">' + users[i].name + '</a></strong>'));
+                } else {
+                    li.all('td').item(1).append(Y.Node.create('<div><a target="_blank" href="' + users[i].url + '">' + users[i].name + '</a></div>'));
+                    var talk = Y.Node.create('<a href="###">' + M.util.get_string('talk', 'chat') + '</a>');
+                    talk.on('click', this.talkto, this, users[i].name);
+                    var beep = Y.Node.create('<a href="###">' + M.util.get_string('beep', 'chat') + '</a>');
+                    beep.on('click', this.send, this, users[i].id);
+                    li.all('td').item(1).append(Y.Node.create('<div></div>').append(talk).append('&nbsp;').append(beep));
+                }
+                list.append(li);
+            }
+        }
+
+    };
+
+    gui_ajax.init(cfg);
+};

mod/chat/gui_ajax/theme/bubble/chat.css

@@ -0,0 +1,249 @@
+.yui-skin-sam .yui-layout .yui-layout-hd {
+    border: 0;
+}
+
+.yui-skin-sam .yui-layout .yui-layout-unit div.yui-layout-bd-nohd {
+    border: 0;
+}
+
+.yui-skin-sam .yui-layout .yui-layout-unit div.yui-layout-bd {
+    border: 0;
+}
+
+.yui-skin-sam .yui-layout .yui-layout-unit div.yui-layout-unit-right {
+    background: white;
+}
+
+.yui-skin-sam .yui-layout-unit-bottom {
+    background: #f2f2f2;
+}
+
+.yui-skin-sam .yui-layout-unit-right {
+    background: #eef2f8;
+}
+
+.yui-skin-sam .yui-layout-unit-center {
+    background: white;
+}
+
+.yui-skin-sam .yui-layout-unit-top {
+    background: #ffe39d;
+}
+
+.yui-skin-sam .yui-layout .yui-layout-unit div.yui-layout-bd {
+    background: transparent;
+}
+
+#chat-messages {
+    padding-top: 15px;
+}
+
+#input-message {
+    background: #fff url(input.png) repeat-x scroll 0 0;
+    padding: 0 9px;
+    border: 1px solid #999;
+    border-radius: 9px;
+    -moz-border-radius: 9px;
+}
+
+.mdl-chat-entry,
+.mdl-chat-my-entry {
+    clear: both;
+}
+
+.mdl-chat-entry .chat-event {
+    padding-bottom: 15px;
+}
+
+.chat-message .chat-message-meta {
+    padding-top: 15px;
+    padding-bottom: 15px;
+}
+
+.chat-message .chat-message-meta .user {
+    white-space: nowrap;
+}
+
+.chat-message .picture {
+    vertical-align: middle;
+}
+
+.chat-message .right {
+    text-align: right;
+}
+
+.chat-message .left {
+    text-align: left;
+}
+/*rtl:ignore*/
+.chat-message .right,
+.chat-message .left {
+    direction: ltr;
+}
+
+#chat-input-area,
+#chat-input-area table.generaltable,
+#chat-input-area table.generaltable td.cell {
+    background: #92b3e8;
+    border: 0;
+    height: 100%;
+}
+
+#chat-userlist {
+    background: #e3e8f0;
+    height: 100%;
+}
+
+/**
+ * The following CSS is a cut down version of PURE CSS SPEECH BUBBLES.
+ * Moodle only uses a small subset of the original.
+ * The original version is available at http://nicolasgallagher.com/pure-css-speech-bubbles/
+ */
+
+/* ------------------------------------------
+PURE CSS SPEECH BUBBLES
+by Nicolas Gallagher
+- http://nicolasgallagher.com/pure-css-speech-bubbles/
+
+http://nicolasgallagher.com
+http://twitter.com/necolas
+
+Created: 02 March 2010
+Version: 1.2 (03 March 2011)
+
+Dual licensed under MIT and GNU GPLv2 © Nicolas Gallagher
+------------------------------------------ */
+
+.triangle-border {
+    position: relative;
+    padding: 10px;
+    margin: 1em 0 3em;
+    border: 2px solid #5a8f00;
+    color: #333;
+    background: #fff;
+    /* css3 */
+    -webkit-border-radius: 10px;
+    -moz-border-radius: 10px;
+    border-radius: 10px;
+
+    /* moodle specific */
+    margin-top: 0;
+    /* end moodle specific */
+}
+
+/* moodle specific */
+
+@media all and (max-device-width: 320px) {
+    .triangle-border {
+        width: 50%;
+    }
+}
+
+@media all and (min-device-width: 321px) and (max-device-width: 640px) {
+    .triangle-border {
+        width: 60%;
+    }
+}
+
+@media all and (min-device-width: 641px) {
+    .triangle-border {
+        width: 65%;
+    }
+}
+/* end moodle specific */
+
+/* Variant : for left positioned triangle
+------------------------------------------ */
+
+.triangle-border.left {
+    margin-left: 30px;
+    /* moodle specific */
+    float: right;
+    /* end moodle specific */
+}
+
+/* Variant : for right positioned triangle
+------------------------------------------ */
+
+.triangle-border.right {
+    margin-right: 30px;
+    /* moodle specific */
+    float: left;
+    /* end moodle specific */
+}
+
+.triangle-border:before {
+    content: "";
+    position: absolute;
+    bottom: -20px; /* value = - border-top-width - border-bottom-width */
+    left: 40px; /* controls horizontal position */
+    border-width: 20px 20px 0;
+    border-style: solid;
+    border-color: #5a8f00 transparent;
+    /* reduce the damage in FF3.0 */
+    display: block;
+    width: 0;
+}
+
+/* creates the smaller  triangle */
+.triangle-border:after {
+    content: "";
+    position: absolute;
+    bottom: -13px; /* value = - border-top-width - border-bottom-width */
+    left: 47px; /* value = (:before left) + (:before border-left) - (:after border-left) */
+    border-width: 13px 13px 0;
+    border-style: solid;
+    border-color: #fff transparent;
+    /* reduce the damage in FF3.0 */
+    display: block;
+    width: 0;
+}
+
+/* Variant : left
+------------------------------------------ */
+
+/* creates the larger triangle */
+.triangle-border.left:before {
+    top: 7px; /* controls vertical position */
+    bottom: auto;
+    left: -24px; /* value = - border-left-width - border-right-width */
+    border-width: 10px 24px 10px 0;
+    border-color: transparent #5a8f00;
+}
+
+/* creates the smaller  triangle */
+.triangle-border.left:after {
+    top: 8px; /* value = (:before top) + (:before border-top) - (:after border-top) */
+    bottom: auto;
+    left: -21px; /* value = - border-left-width - border-right-width */
+    border-width: 9px 21px 9px 0;
+    border-color: transparent #fff;
+}
+
+/* Variant : right
+------------------------------------------ */
+
+/* creates the larger triangle */
+.triangle-border.right:before {
+    top: 7px; /* controls vertical position */
+    bottom: auto;
+    left: auto;
+    right: -24px; /* value = - border-left-width - border-right-width */
+    border-width: 10px 0 10px 24px;
+    border-color: transparent #5a8f00;
+}
+
+/* creates the smaller  triangle */
+.triangle-border.right:after {
+    top: 8px; /* value = (:before top) + (:before border-top) - (:after border-top) */
+    bottom: auto;
+    left: auto;
+    right: -21px; /* value = - border-left-width - border-right-width */
+    border-width: 9px 0 9px 21px;
+    border-color: transparent #fff;
+}
+
+#button-send + a > i.text-info {
+    /* stylelint-disable-next-line declaration-no-important */
+    color: black !important;
+}

mod/chat/gui_ajax/theme/bubble/config.php

@@ -0,0 +1,50 @@
+<?php
+// This file is part of Moodle - http://moodle.org/
+//
+// Moodle is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// Moodle is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
+
+$chattheme_cfg = new stdClass();
+$chattheme_cfg->avatar = true;
+$chattheme_cfg->align  = true;
+$chattheme_cfg->event_message = <<<TEMPLATE
+<div class="chat-event">
+<span class="time">___time___</span>
+<a target='_blank' href="___senderprofile___">___sender___</a>
+<span class="event">___event___</span>
+</div>
+TEMPLATE;
+$chattheme_cfg->user_message_left = <<<TEMPLATE
+<div class='chat-message ___mymessageclass___'>
+    <div class="left">
+        <span class="text triangle-border left">___message___</span>
+        <span class="picture">___avatar___</span>
+    </div>
+    <div class="chat-message-meta left">
+        <span class="time">___time___</span>
+        <span class="user">___sender___</span>
+    </div>
+</div>
+TEMPLATE;
+$chattheme_cfg->user_message_right = <<<TEMPLATE
+<div class='chat-message ___mymessageclass___'>
+    <div class="right">
+        <span class="text triangle-border right">___message___</span>
+        <span class="picture">___avatar___</span>
+    </div>
+    <div class="chat-message-meta right">
+        <span class="time">___time___</span>
+        <span class="user">___sender___</span>
+    </div>
+</div>
+TEMPLATE;

mod/chat/gui_ajax/theme/compact/chat.css

@@ -0,0 +1,102 @@
+.yui-skin-sam .yui-layout .yui-layout-hd {
+    border: 0;
+}
+
+.yui-skin-sam .yui-layout .yui-layout-unit div.yui-layout-bd-nohd {
+    border: 0;
+}
+
+.yui-skin-sam .yui-layout .yui-layout-unit div.yui-layout-bd {
+    border: 0;
+}
+
+.yui-skin-sam .yui-layout .yui-layout-unit div.yui-layout-unit-right {
+    background: white;
+}
+
+.yui-skin-sam .yui-layout-unit-bottom {
+    background: #f2f2f2;
+}
+
+.yui-skin-sam .yui-layout-unit-right {
+    background: #eef2f8;
+}
+
+.yui-skin-sam .yui-layout-unit-center {
+    background: white;
+}
+
+.yui-skin-sam .yui-layout-unit-top {
+    background: #ffe39d;
+}
+
+.yui-skin-sam .yui-layout .yui-layout-unit div.yui-layout-bd {
+    background: transparent;
+}
+
+#input-message {
+    background: #fff url(input.png) repeat-x scroll 0 0;
+    border: 1px solid #999;
+}
+
+.mdl-chat-entry .meta {
+    background: #82b5ee;
+    border-bottom: 1px solid white;
+    -moz-border-radius-topleft: 6px;
+    -moz-border-radius-topright: 6px;
+    border-top-left-radius: 6px;
+    border-top-right-radius: 6px;
+}
+
+.mdl-chat-entry,
+.mdl-chat-my-entry {
+    margin: 1em auto;
+    border: 1px solid #938f5a;
+    -moz-border-radius-bottomleft: 6px;
+    -moz-border-radius-bottomright: 6px;
+    border-bottom-left-radius: 6px;
+    border-bottom-right-radius: 6px;
+}
+
+.mdl-chat-entry .chat-message .text {
+    color: white;
+    background: #82b5ee;
+}
+
+.chat-message {
+    padding: 3px;
+    border: 1px solid #ccc;
+    -moz-border-radius-bottomleft: 6px;
+    -moz-border-radius-bottomright: 6px;
+    border-bottom-left-radius: 6px;
+    border-bottom-right-radius: 6px;
+}
+
+.mdl-chat-my-entry .chat-message .meta {
+    background: #fffeeb;
+    border-bottom: 1px solid white;
+}
+
+.mdl-chat-my-entry .chat-message .text {
+    background: #f1f3cb;
+}
+
+#chat-input-area,
+#chat-input-area table.generaltable,
+#chat-input-area table.generaltable td.cell {
+    background: #92b3e8;
+    border: 0;
+    margin: 0;
+    padding: 2px;
+    height: 100%;
+}
+
+#chat-userlist {
+    background: #e3e8f0;
+    height: 100%;
+}
+
+#button-send + a > i.text-info {
+    /* stylelint-disable-next-line declaration-no-important */
+    color: black !important;
+}

mod/chat/gui_ajax/theme/compact/config.php

@@ -0,0 +1,37 @@
+<?php
+// This file is part of Moodle - http://moodle.org/
+//
+// Moodle is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// Moodle is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
+
+$chattheme_cfg = new stdClass();
+$chattheme_cfg->avatar = false;
+$chattheme_cfg->align  = false;
+$chattheme_cfg->event_message = <<<TEMPLATE
+<div class="chat-event">
+<span class="time">___time___</span>
+<a target='_blank' href="___senderprofile___">___sender___</a>
+<span class="event">___event___</span>
+</div>
+TEMPLATE;
+$chattheme_cfg->user_message = <<<TEMPLATE
+<div class='chat-message'>
+    <div class="chat-message-meta">
+        <span class="time">___time___</span>
+        <span class="user"><a href="___senderprofile___" target="_blank">___sender___</a></span>
+    </div>
+    <div class="text">
+    ___message___
+    </div>
+</div>
+TEMPLATE;

mod/chat/gui_ajax/theme/course_theme/config.php

@@ -0,0 +1,37 @@
+<?php
+// This file is part of Moodle - http://moodle.org/
+//
+// Moodle is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// Moodle is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
+
+$chattheme_cfg = new stdClass();
+$chattheme_cfg->avatar = false;
+$chattheme_cfg->align  = false;
+$chattheme_cfg->event_message = <<<TEMPLATE
+<div class="chat-event course-theme">
+<span class="time">___time___</span>
+<a target='_blank' href="___senderprofile___">___sender___</a>
+<span class="event">___event___</span>
+</div>
+TEMPLATE;
+$chattheme_cfg->user_message = <<<TEMPLATE
+<div class='chat-message course-theme'>
+    <div class="chat-message-meta">
+        <span class="time">___time___</span>
+        <span class="user"><a href="___senderprofile___" target="_blank">___sender___</a></span>
+    </div>
+    <div class="text">
+    ___message___
+    </div>
+</div>
+TEMPLATE;