MDL-56719 boost: Style mod_chat for boost

I stayed away from big markup changes. This is a table layout so needs rewriting which is a big job.

mod/chat/gui_ajax/index.php

@@ -51,11 +51,6 @@ if ($groupmode = groups_get_activity_groupmode($cm)) {   // Groups are being use
     $groupid = 0;
     $groupname = '';
 }
-$showcoursetheme = in_array('bootstrapbase', $PAGE->theme->parents);
-if (!$showcoursetheme && $theme === 'course_theme') { // Set compact as default for non bootstrapbase based themes.
-    $theme = 'compact';
-}
-
 // If requested theme doesn't exist, use default 'bubble' theme.
 if ($theme != 'course_theme' and !file_exists(__DIR__ . '/theme/'.$theme.'/chat.css')) {
     $theme = 'compact';
@@ -78,7 +73,7 @@ $modulecfg = array(
     'home' => $CFG->httpswwwroot.'/mod/chat/view.php?id='.$cm->id,
     'chaturl' => $CFG->httpswwwroot.'/mod/chat/gui_ajax/index.php?id='.$id,
     'theme' => $theme,
-    'showcoursetheme' => $showcoursetheme ? 1 : 0,
+    'showcoursetheme' => 1,
     'userid' => $USER->id,
     'sid' => $chatsid,
     'timer' => 3000,
@@ -97,18 +92,19 @@ if ( $theme != 'course_theme') {
 
 echo $OUTPUT->header();
 echo $OUTPUT->box(html_writer::tag('h2',  get_string('participants'), array('class' => 'accesshide')) .
-        '<ul id="users-list"></ul>', '', 'chat-userlist');
+        '<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 = array(
-    array('<label class="accesshide" for="input-message">'.get_string('entermessage', 'chat').' </label>'.
-          '<input type="text" disabled="true" id="input-message" value="Loading..." /> '.
-          '<input type="button" id="button-send" value="'.get_string('send', 'chat').'" /> <a id="choosetheme" href="###">'.
+    array('<div class="form-inline"><label class="accesshide" for="input-message">'.get_string('entermessage', 'chat').' </label>'.
+          '<span class="form-group"><input type="text" disabled="true" class="form-control" ' .
+          'id="input-message" value="Loading..." size="48" /></span>'.
+          '<span class="form-group"><input type="button" id="button-send" class="btn btn-secondary m-x-1" ' .
+          'value="'.get_string('send', 'chat').'" /></span> <span class="form-group"><a id="choosetheme" href="###">'.
           get_string('themes').
-          ' &raquo; </a>')
-);
+          ' &raquo; </a></span></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');

mod/chat/gui_basic/index.php

@@ -150,16 +150,16 @@ echo '<div id="send">';
 echo '<form id="editing" method="post" action="index.php">';
 
 echo '<h2><label for="message">'.get_string('sendmessage', 'message').'</label></h2>';
-echo '<div>';
-echo '<input type="text" id="message" name="message" value="'.s($refreshedmessage, true).'" size="60" />';
-echo '</div><div>';
+echo '<div class="m-b-1">';
+echo '<input type="text" id="message" class="form-control" name="message" value="'.s($refreshedmessage, true).'" size="60" />';
+echo '</div><div class="m-b-1">';
 echo '<input type="hidden" name="id" value="'.$id.'" />';
 echo '<input type="hidden" name="groupid" value="'.$groupid.'" />';
 echo '<input type="hidden" name="last" value="'.time().'" />';
 echo '<input type="hidden" name="sesskey" value="'.sesskey().'" />';
-echo '<input type="submit" value="'.get_string('submit').'" />&nbsp;';
-echo '<input type="submit" name="refresh" value="'.get_string('refresh').'" />';
-echo '<input type="checkbox" name="newonly" id="newonly" '.($newonly ? 'checked="checked" ' : '').'/>';
+echo '<input type="submit" class="btn btn-primary" value="'.get_string('submit').'" />&nbsp;';
+echo '<input type="submit" class="btn btn-secondary" name="refresh" value="'.get_string('refresh').'" />';
+echo '<input type="checkbox" class="m-x-1" name="newonly" id="newonly" '.($newonly ? 'checked="checked" ' : '').'/>';
 echo '<label for="newonly">'.get_string('newonlymsg', 'message').'</label>';
 echo '</div>';
 echo '</form>';

mod/chat/report.php

@@ -222,6 +222,8 @@ $completesessions  = 0;
 
 $messagesleft = count($messages);
 
+echo '<div class="list-group">';
+
 foreach ($messages as $message) {  // We are walking BACKWARDS through the messages.
 
     $messagesleft --;              // Countdown.
@@ -246,7 +248,8 @@ foreach ($messages as $message) {  // We are walking BACKWARDS through the messa
         $iscomplete = ($sessionend - $sessionstart > 60 and count($sessionusers) > 1);
         if ($showall or $iscomplete) {
 
-            echo '<p align="center">'.userdate($sessionstart).' --> '. userdate($sessionend).'</p>';
+            echo '<div class="list-group-item">';
+            echo '<p>'.userdate($sessionstart).' --> '. userdate($sessionend).'</p>';
 
             echo $OUTPUT->box_start();
 
@@ -283,6 +286,7 @@ foreach ($messages as $message) {  // We are walking BACKWARDS through the messa
             }
             echo '</p>';
             echo $OUTPUT->box_end();
+            echo '</div>';
         }
         if ($iscomplete) {
             $completesessions++;
@@ -294,6 +298,7 @@ foreach ($messages as $message) {  // We are walking BACKWARDS through the messa
     }
     $lasttime = $message->timestamp;
 }
+echo '</div>';
 
 if (!empty($CFG->enableportfolios) && $canexportsess) {
     require_once($CFG->libdir . '/portfoliolib.php');

theme/boost/scss/moodle/chat.scss

@@ -14,6 +14,7 @@
     .yui-layout-unit-right,
     .yui-layout-unit-bottom {
         @extend .card;
+        @extend .card-block;
         border-radius: 0;
     }
 
@@ -26,19 +27,6 @@
         border: 0;
         padding: 3px 15px;
         white-space: nowrap;
-
-        input {
-            margin: 0 10px;
-
-            &#input-message {
-                width: 45%;
-                margin: auto;
-            }
-        }
-
-        a {
-            margin: 0 5px;
-        }
     }
 
     #chat-userlist {
@@ -74,12 +62,9 @@
         }
 
         .chat-message.course-theme {
-            background-color: $body-bg;
-            border: 1px dotted #ddd;
-
-            @include border-radius(4px);
-            padding: 4px 10px;
-            margin: 10px 0;
+            @extend .card;
+            @extend .card-block;
+            background-color: $card-bg !important; /* stylelint-disable declaration-no-important */
 
             .time {
                 float: right;

theme/upgrade.txt

@@ -3,6 +3,7 @@ information provided here is intended especially for theme designer.
 
 === 3.2 ===
 
+* All themes have "course theme" option for mod_chat (it was just bootstrap2 based themes).
 * A new theme config 'undeletableblocktypes' allows a theme to define which blocks are deletable.
 * A new core setting now enables admins to upload the logos of their site. Using the
   following methods, themers can instantly support branding logos without the need