mirror_php/moodle
1
0
Fork 0
mirror of https://github.com/moodle/moodle.git synced 2025-01-19 06:18:28 +01:00
Code Issues Projects Releases Wiki Activity

MDL-39770 mod_chat: improved the chat experience on small screens

Browse Source
This commit is contained in:
Andrew Davis 2013-06-24 21:36:43 +08:00
parent 838d78a9ff
commit e9c599cb84
5 changed files with 163 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
mod/chat/gui_ajax/index.php
View File

@ -79,7 +79,7 @@ echo $OUTPUT->box(html_writer::tag('h2', get_string('messages', 'chat'), array(
'<ul id="messages-list"></ul>', '', 'chat-messages');
$table = new html_table();
$table->data = array(
array(' &raquo; <label class="accesshide" for="input-message">' . get_string('entermessage', 'chat') . ' </label><input type="text" disabled="true" id="input-message" value="Loading..." size="50" /> <input type="button" id="button-send" value="'.get_string('send', 'chat').'" /> <a id="choosetheme" href="###">'.get_string('themes').' &raquo; </a>')
array('<label class="accesshide" for="input-message">' . get_string('entermessage', 'chat') . ' </label><input type="text" disabled="true" id="input-message" value="Loading..." size="50" /> <input type="button" id="button-send" value="'.get_string('send', 'chat').'" /> <a id="choosetheme" href="###">'.get_string('themes').' &raquo; </a>')
);
echo $OUTPUT->box(html_writer::tag('h2', get_string('composemessage', 'chat'), array('class' => 'accesshide')) .
html_writer::table($table), '', 'chat-input-area');

10
mod/chat/gui_ajax/module.js
View File

@ -37,11 +37,15 @@ M.mod_chat_ajax.init = function(Y, cfg) {
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: 180, resize: true, gutter: '5px', scroll: true, body: 'chat-userlist', animate: false},
{position: 'bottom', height: 42, resize: false, body: 'chat-input-area', gutter: '5px', collapse: false, resize: false},
{position: 'center', body: 'chat-messages', gutter: '5px', scroll: true}
{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}
]
});

138
mod/chat/gui_ajax/theme/bubble/chat.css
View File

File diff suppressed because one or more lines are too long

2
mod/chat/gui_ajax/theme/bubble/config.php
View File

@ -12,8 +12,8 @@ TEMPLATE;
$chattheme_cfg->user_message_left = <<<TEMPLATE
<div class='chat-message ___mymessageclass___'>
<div class="left">
<span class="picture">___avatar___</span>
<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>

13
mod/chat/styles.css
View File

@ -5,6 +5,15 @@
.path-mod-chat #messages-list,
.path-mod-chat #users-list {list-style-type:none;padding:0;margin:0}
.path-mod-chat #chat-header {overflow: hidden;}
.path-mod-chat #chat-input-area table.generaltable td.cell {padding:1px;}
/** shrink the text box so the theme link is always accessible */
@media all and (max-device-width: 320px) {
.path-mod-chat #input-message {width: 150px;}
}
@media all and (min-device-width: 321px) and (max-device-width: 640px) {
.path-mod-chat #input-message {width: 175px;}
}
/** styles for view.php **/
#page-mod-chat-view .chatcurrentusers .chatuserdetails {vertical-align: middle;}
@ -24,8 +33,8 @@
/** YUI Overrides **/
.path-mod-chat .yui-layout-unit-top {background: #FFE39D;}
.path-mod-chat .yui-layout-unit-right {border-top: 5px solid white;background: #FFD46B;}
.path-mod-chat .yui-layout-unit-bottom {border-top: 5px solid white;background: #FFCB44;}
.path-mod-chat .yui-layout-unit-right {background: #FFD46B;}
.path-mod-chat .yui-layout-unit-bottom {background: #FFCB44;}
.path-mod-chat .yui-layout .yui-layout-hd {border:0;}
.path-mod-chat .yui-layout .yui-layout-unit div.yui-layout-bd {border:0;background: transparent;}
.path-mod-chat .yui-layout .yui-layout-unit div.yui-layout-unit-right {background: white;}