Commit b9a75deb authored by Pat Kira's avatar Pat Kira Committed by Aaron Wells

Notifications (bootstrap)

Bug 1465107: Use Bootstrap CSS Framework
Notifications (bootstrap)
Send message styling (work in progress)
Style inbox and outbox (work in progress)
Style inbox and outbox notification (Done)
Add class control-buttons to a tablecell that has 2 or more buttons
Notifications (bootstrap)
Amend inbox & outbox styles
Notificatiosn

Change-Id: I3216395b1b1a100ae38ee7687b255f099b90513d
parent cb93a0c4
......@@ -75,8 +75,6 @@ require_once(get_config('docroot') . 'lib/activity.php');
// use the new function to show from - and to user
$activitylist = activitylistin_html($type);
$star = json_encode($THEME->get_image_url('star'));
$readicon = json_encode($THEME->get_image_url('readusermessage'));
$strread = json_encode(get_string('read', 'activity'));
$strnodelete = json_encode(get_string('nodelete', 'activity'));
$javascript = <<<JAVASCRIPT
......
......@@ -19,15 +19,15 @@ global $USER;
global $THEME;
$readone = param_integer('readone', 0);
$table = param_alphanumext('table', 'notification_internal_activity');
$list = param_alphanumext('div', 'notification_internal_activity');
$markasread = param_integer('markasread', 0);
$delete = param_integer('delete', 0);
if ($readone) {
if ('notification_internal_activity' === $table) {
set_field($table, 'read', 1, 'id', $readone, 'usr', $USER->get('id'));
if ('notification_internal_activity' === $list) {
set_field($list, 'read', 1, 'id', $readone, 'usr', $USER->get('id'));
}
else if ('artefact_multirecipient_notification' === $table) {
else if ('artefact_multirecipient_notification' === $list) {
mark_as_read_mr(array($readone), $USER->get('id'));
}
$unread = $USER->add_unread(-1);
......@@ -51,25 +51,25 @@ if ($markasread) {
$m = array();
foreach ($_GET as $k => $v) {
if (preg_match('/^unread\-([a-zA-Z_]+)\-(\d+)$/',$k,$m)) {
$table = $m[1];
$ids[$table][] = $m[2];
$list = $m[1];
$ids[$list][] = $m[2];
}
}
foreach ($ids as $table => $idspertable) {
if ($idspertable) {
if ('artefact_multirecipient_notification' === $table) {
$table = 'artefact_multirecipient_userrelation';
foreach ($ids as $list => $idsperlist) {
if ($idsperlist) {
if ('artefact_multirecipient_notification' === $list) {
$list = 'artefact_multirecipient_userrelation';
$column = 'notification';
}
else {
$column = 'id';
}
set_field_select(
$table, 'read', '1',
$column . ' IN (' . join(',', array_map('db_quote', $idspertable)) . ') AND usr = ?',
$list, 'read', '1',
$column . ' IN (' . join(',', array_map('db_quote', $idsperlist)) . ') AND usr = ?',
array($USER->get('id'))
);
$newunread = $USER->add_unread(-count($idspertable));
$newunread = $USER->add_unread(-count($idsperlist));
}
}
$message = get_string('markedasread', 'activity');
......@@ -79,20 +79,22 @@ else if ($delete) {
$deleteunread = 0; // Remember the number of unread messages being deleted
foreach ($_GET as $k => $v) {
if (preg_match('/^delete\-([a-zA-Z_]+)\-(\d+)$/',$k,$m)) {
$table = $m[1];
$rawids[$table][] = $m[2];
if (isset($_GET['unread-' . $table . '-' . $m[2]])) {
$list = $m[1];
$ids[$list][] = $m[2];
if (isset($_GET['unread-' . $list . '-' . $m[2]])) {
$deleteunread++;
}
}
}
db_begin();
$countdeleted = 0;
foreach ($rawids as $table => $idspertable) {
if ('artefact_multirecipient_notification' === $table) {
delete_messages_mr($idspertable, $USER->get('id'));
foreach ($ids as $list => $idsperlist) {
if ('artefact_multirecipient_notification' === $list) {
delete_messages_mr($idsperlist, $USER->get('id'));
}
else if ('notification_internal_activity' === $table) {
else if ('notification_internal_activity' === $list) {
$strids = join(',', array_map('db_quote', $idsperlist));
$userid = $USER->get('id');
// Ignore message ids that do not belong to the current user to stop
// hacking of the form allowing the deletion of messages owned by other users.
......
......@@ -223,6 +223,7 @@ function activitylistin_html($type='all', $limit=10, $offset=0) {
}
else {
$tousrarray = array(
'username' => display_username(get_user_for_display($record->userids[$i])),
'display' => display_name($record->userids[$i]),
'link' => profile_url($record->userids[$i]),
);
......@@ -234,6 +235,7 @@ function activitylistin_html($type='all', $limit=10, $offset=0) {
}
if ($deletedcount > 0) {
$record->tousr[] = array(
'username' => $deletedcount . ' ' . get_string('deleteduser', 'artefact.multirecipientnotification'),
'display' => $deletedcount . ' ' . get_string('deleteduser', 'artefact.multirecipientnotification'),
'link' => null,
);
......@@ -526,6 +528,7 @@ function activitylistout_html($type='all', $limit=10, $offset=0) {
// read out sender name
if (isset($record->from)) {
$record->fromusr = $record->from;
// $record->fromusr = $record->from;
}
else {
// we're in the outbox, so basically, this should hold for all messages
......@@ -563,6 +566,7 @@ function activitylistout_html($type='all', $limit=10, $offset=0) {
}
else {
$record->tousr[] = array(
'username' => display_username(get_user_for_display($record->userids[$i])),
'display' => display_name($record->userids[$i]),
'link' => profile_url($record->userids[$i]),
);
......@@ -570,6 +574,7 @@ function activitylistout_html($type='all', $limit=10, $offset=0) {
}
if ($deletedcount > 0) {
$record->tousr[] = array(
'username' => $deletedcount . ' ' . get_string('deleteduser', 'artefact.multirecipientnotification'),
'display' => $deletedcount . ' ' . get_string('deleteduser', 'artefact.multirecipientnotification'),
'link' => null,
);
......
......@@ -68,7 +68,7 @@ class PluginArtefactResume extends PluginArtefact {
'workskill' => array('text'),
);
}
public static function submenu_items() {
$tabs = array(
'index' => array(
......@@ -1087,8 +1087,8 @@ EOF;
var buttons = [];
if (r._rownumber > 1) {
var up =
A({'href': '', 'class': 'btn btn-default btn-xs'},
SPAN({'class': 'fa fa-caret-up'}),
A({'href': '', 'class': 'moveup'},
SPAN({'class': 'fa fa-long-arrow-up'}),
SPAN({'class': 'sr-only'}, '{$upstr}'));
connect(up, 'onclick', function (e) {
e.stop();
......@@ -1098,8 +1098,8 @@ EOF;
}
if (!r._last) {
var down =
A({'href': '', 'class':'btn btn-default btn-xs movedown'},
SPAN({'class': 'fa fa-caret-down'}),
A({'href': '', 'class':'movedown'},
SPAN({'class': 'fa fa-long-arrow-down'}),
SPAN({'class': 'sr-only'}, '{$downstr}'));
connect(down, 'onclick', function (e) {
e.stop();
......@@ -1128,7 +1128,7 @@ EOF;
e.stop();
return deleteComposite(d.type, r.id, r.artefact);
});
return TD({'class':'btns2'}, null, editlink, ' ', dellink);
return TD({'class':'control-buttons'}, null, editlink, ' ', dellink);
}
]
);
......
......@@ -168,6 +168,7 @@ class PluginBlocktypeWall extends SystemBlocktype {
),
'submit' => array(
'type' => 'submit',
'class' => 'btn btn-success',
'value' => get_string('Post', 'blocktype.wall'),
),
),
......
......@@ -100,6 +100,7 @@ else {
}
$elements['submit'] = array(
'type' => $type,
'class' => 'btn btn-success',
'value' => $submitstr,
'confirm' => $confirm,
);
......
......@@ -720,19 +720,24 @@ function setCookie( name, value, expires, path, domain, secure )
// End cookie related functions
function toggleChecked(c) {
var e = getElementsByTagAndClassName(null, c);
if (e) {
for (cb in e) {
if (e[cb].checked == true) {
e[cb].checked = '';
}
else {
e[cb].checked = 'checked';
var elements = getElementsByTagAndClassName(null, c),
trigger = document.querySelectorAll('data-'+c),
i;
if(trigger) {
trigger.checked = true;
}
if (elements) {
for (i = 0; i < elements.length; i = i + 1) {
if (elements[i].checked == true) {
elements[i].checked = '';
} else {
elements[i].checked = 'checked';
}
}
}
return false;
return;
}
function expandDownToViewport(element, width) {
......
......@@ -86,13 +86,9 @@ function PieformTextarea(element, fullwidth) {//{{{
this.grippie.dimensions = this.actual(this.grippie);
// Set wrapper and textarea dimensions
setElementDimensions(this.wrapper, {'h': this.dimensions.h + this.grippie.dimensions.h + 1});
if (!fullwidth) {
jQuery(this.wrapper).css("max-width", this.dimensions.w + "px");
}
setStyle(this.element, {
'margin-bottom': '0',
'width': '100%'
'margin-bottom': '0'
// 'width': '100%'
});
// Wrap textarea
......
......@@ -1017,7 +1017,7 @@ function check_imap_for_bounces() {
* Both parameters should be objects containing id, preferredname, firstname,
* lastname, admin
*
* @param object $user the user that you're trying to format to a string
* @param Int $user the user that you're trying to format to a string
* @param object $userto the user that is looking at the string representation (if left
* blank, will default to the currently logged in user).
* @param boolean $nameonly do not append the user's username even if $userto can see it.
......@@ -1027,6 +1027,7 @@ function check_imap_for_bounces() {
* @returns string name to display
*/
function display_name($user, $userto=null, $nameonly=false, $realname=false, $username=false) {
global $USER;
static $tutorcache = array();
......@@ -1191,6 +1192,8 @@ function get_user_for_display($user=null) {
* the global $USER object is used
*/
function display_username($user=null) {
global $USER;
if ($user === null) {
......
......@@ -4,7 +4,7 @@
<div class="fr nowrap">
<span class="entries"><a href="{$WWWROOT}artefact/blog/view/index.php?id={$blog->id}">{str tag=nposts section=artefact.blog arg1=$blog->postcount}</a></span>
<span class="newentry"><a href="{$WWWROOT}artefact/blog/post.php?blog={$blog->id}" class="btn">{str tag=addpost section=artefact.blog}</a></span>
<span class="btns2">
<span class="control-buttons">
{if $blog->locked}
<span class="s dull">{str tag=submittedforassessment section=view}</span>
{else}
......
......@@ -48,7 +48,7 @@
</span>
<a class="attach-files" data-toggle="collapse" href="#attach_{$post->id}" aria-expanded="false">
{str tag=attachedfiles section=artefact.blog}
<span class="fa fa-chevron-down"></span>
<span class="fa fa-chevron-up"></span>
</a>
</div>
<div class="collapse files" id="attach_{$post->id}">
......
......@@ -76,7 +76,7 @@
</td>
{/if}
<!-- Ensure space for 3 buttons (in the case of a really long single line string in a user input field -->
<td class="text-right">
<td class="text-right control-buttons">
{if $editable && !$file->isparent}
{if $file->locked}
<span class="dull">{str tag=Submitted section=view}</span>
......
......@@ -78,7 +78,7 @@
{/foreach}
</td>
<td class="note-attachment"><label class="hidden">{str tag=Attachments section=artefact.resume}: </label> {$n->count}</td>
<td class="right buttonscell btns2">
<td class="right buttonscell control-buttons">
{if $n->locked}
<span class="s dull">{str tag=Submitted section=view}</span>
{else}
......
......@@ -9,7 +9,7 @@
<th class="icons"></th>
<th>{str tag='service' section='artefact.internal'}</th>
<th>{str tag='profileurl' section='artefact.internal'}</th>
{if $controls}<th class="btns2">
{if $controls}<th class="control-buttons">
<span class="accessible-hidden sr-only">{str tag=edit}</span>
</th>{/if}
</tr>
......@@ -20,7 +20,7 @@
<td class="center"><img src="{$row->icon}" alt="{$row->description}"></td>
<td><span>{$row->description}</span></td>
<td>{if $row->link}<a href="{$row->link}" title="{$row->link}" target="_blank" class="socialprofile">{/if}{$row->title}{if $row->link}</a>{/if}</td>
{if $controls}<td class="right buttonscell btns2">
{if $controls}<td class="buttonscell control-buttons">
<a href="{$WWWROOT}artefact/internal/socialprofile.php?id={$row->id}" title="{str tag='edit'}" class="btn btn-default btn-xs">
<span class="fa fa-pencil"></span>
<span class="sr-only">{str tag='edit'}</span>
......
{foreach from=$data item=item}
<script language="JavaScript" type="text/javascript" src="js/toggle_recipient.js"> </script>
<tr class="{cycle values='r0,r1'}">
<td class="inboxicon">
{if $item->read && $item->type == 'usermessage'}
<img src="{theme_url filename=cat('images/read' $item->type '.png')}" alt="{$item->strtype} - {str tag='read' section='activity'}" />
{elseif $item->type == 'usermessage'}
<img src="{theme_url filename=cat('images/' $item->type '.png')}" alt="{$item->strtype}" class="unreadmessage" />
{else}
<img src="{theme_url filename=cat('images/' $item->type '.png')}" alt="{$item->strtype}" />
{/if}
</td>
<td>{$item->fromusr|display_name|truncate:$maxnamestrlength}</td>
<td>
{if $item->message}
<a href="" onclick="showHideMessage({$item->id}, '{$item->table}'); return false;">
{$item->subject|truncate:60}
<span class="accessible-hidden sr-only">{str tag='clickformore' section='artefact.multirecipientnotification'}</span>
</a>
<div id="message-{$item->table}-{$item->id}" class="hidden">
{$item->message|safe}
{if $item->url}
<br />
<a href="{$WWWROOT}{$item->url}">
{if $item->urltext}
{$item->urltext} {str tag='linkindicator' section="artefact.multirecipientnotification"}
{else}
{str tag="more..."}
{/if}
</a>
{/if}
<div class="notification-item panel panel-default">
<div class="notification-header panel-heading clearfix" data-toggle="collapse" data-target="#notification-{$item->id}" aria-expanded="false" aria-controls="#notification-{$item->id}">
<div class="notification-icon pull-left">
{if $item->read && $item->type == 'usermessage'}
<span class="fa fa-envelope"></span><span class="sr-only">{$item->strtype} - {str tag='read' section='activity'}</span>
{elseif $item->strtype == 'usermessage'}
<span class="fa fa-envelope"></span><span class="sr-only">{$item->strtype}</span>
{else}
<span class="fa fa-wrench"></span>
<span class="sr-only">{$item->strtype}</span>
{/if}
</div>
{elseif $item->url}
<a href="{$WWWROOT}{$item->url}">{$item->subject|truncate:60}</a>
{else}
{$item->subject|truncate:60}
{/if}
</td>
<td class="userlist">
{if count($item->tousr) > 1}
<span id="short{$item->id}">
<a onclick="return toggleMe('long{$item->id}', 'short{$item->id}');" href="javascript:void(0)">
<img class="togglebtn" src="{theme_url filename='images/expand.png'}" />
{*<span class="accessible-hidden sr-only">{str tag='clickformore' section='artefact.multirecipientnotification'}</span>*}
</a>
{assign var="tousr" value=$item->tousr[0]}
{if $tousr['link']}<a href="{$tousr['link']}">{/if}
{$tousr['display']|truncate:$maxnamestrlength}
{if $tousr['link']}</a>{/if}
</span>
<span style="display:none;" id="long{$item->id}">
<a onclick="return toggleMe('short{$item->id}', 'long{$item->id}');" href="javascript:void(0)">
<img class="togglebtn" src="{theme_url filename='images/expanded.png'}" />
</a>
<span class="recipientlist">
{foreach from=$item->tousr item=tousr key=break}
{if ($tousr['link'])}<a href="{$tousr['link']}">{/if}
{$tousr['display']|truncate:$maxnamestrlength}
{if ($tousr['link'])}</a>{/if}
<br />
{/foreach}
</span>
</span>
{else}
{assign var="tousr" value=$item->tousr[0]}
{if $tousr['link']}<a href="{$tousr['link']}">{/if}
{$tousr['display']|truncate:$maxnamestrlength}
{if $tousr['link']}</a>{/if}
{/if}
</td>
<td>{$item->date}</td>
<td class="center">
{if $item->table === 'artefact_multirecipient_notification'}
<label class="accessible-hidden sr-only" for="delete-{$item->table}-{$item->id}">{str tag='delete' section='mahara'}</label>
<input type="checkbox" class="tocheckdel" name="delete-{$item->table}-{$item->id}" id="delete-{$item->table}-{$item->id}">
{/if}
</td>
</tr>
<h3 class="notification-subject">
<span class="sr-only">{str section='activity' tag='subject'}</span>
{if !$item->read}
<span class="accessible-hidden sr-only">
{str tag='unread' section='activity'}:
</span>
{/if}
{$item->subject|truncate:40}
</h3>
<div class="notification-metadata">
<span>
{str section='artefact.multirecipientnotification' tag='touser'}:
</span>
<span class="username">
{if count($item->tousr) > 1}
{assign var="tousr" value=$item->tousr[0]}
{$tousr['username']|truncate:$maxnamestrlength}
<span>... ({count($item->tousr)})<span><span class="sr-only">more</span>
{else}
{assign var="tousr" value=$item->tousr[0]}
{$tousr['username']|truncate:$maxnamestrlength}
{/if}
</span>
<span class="sentdate">
, {$item->date}
</span>
</div>
<div class="notification-control">
<div class="control">
<div class="control-wrapper prl">
<input type="checkbox" class="tocheckdel" name="delete-{$item->table}-{$item->id}" id="delete-{$item->table}-{$item->id}">
<label class="marked delete" for="delete-{$item->table}-{$item->id}">{str tag='delete' section='mahara'}</label>
</div>
</div>
<span class="content-expanded fa fa-chevron-up"></span>
</div>
</div>
<div id="notification-{$item->id}" class="collapse">
{if $item->message}
<div class="notification-content panel-body">
<p class="notification-tousers">
<span class="recipientlist">
<strong>
{str section='artefact.multirecipientnotification' tag='touser'}:
</strong>
{if count($item->tousr) > 1}
<span class="tousers">
{foreach from=$item->tousr item=tousr key=break}
{if ($tousr['link'])}
<a class="prm" href="{$tousr['link']}">
{/if}
{$tousr['display']|truncate:$maxnamestrlength}
{if ($tousr['link'])}
</a>{/if}
{/foreach}
</span>
{else}
<span class="tousers">
{assign var="tousr" value=$item->tousr[0]}
{if $tousr['link']}
<a href="{$tousr['link']}">
{/if}
{$tousr['display']|truncate:$maxnamestrlength}
{if $tousr['link']}
</a>{/if}
</span>
{/if}
</p>
<p>{$item->message|safe}</p>
</div>
{/if}
<div class="notification-cta panel-footer clearfix">
<div class="notification-url">
{if $item->url}
<a class="notification-action" href="{$WWWROOT}{$item->url}">
<span class="fa fa-reply"></span>
{if $item->urltext}
{$item->urltext}
{/if}
</a>
{/if}
{if $item->return}
<a class="notification-action" href="{$WWWROOT}{$item->return}">
<span class="fa fa-reply-all"></span> {$item->returnoutput}
</a>
{/if}
</div>
</div>
</div>
</div>
{/foreach}
......@@ -6,53 +6,40 @@
<label for="notifications_type">{str section='activity' tag='type'}:</label>
<select id="notifications_type" name="type">
{foreach from=$options item=name key=t}
<option value="{$t}"{if $type == $t} selected{/if}>{$name}</option>
<option value="{$t}"{if $type == $t} selected{/if}>
{$name}
</option>
{/foreach}
</select>{contextualhelp plugintype='core' pluginname='activity' section='activitytypeselect'}
</div>
</form>
{$deleteall|safe}
<form class="form-notificationlist" name="notificationlist" method="post" onSubmit="markread(this, 'read'); return false;">
<div class="table-responsive">
<table id="activitylist" class="fullwidth table table-striped">
<thead>
<tr>
<th><span class="accessible-hidden sr-only">{str section='activity' tag='messagetype'}</span></th>
<th>{str section='artefact.multirecipientnotification' tag='fromuser'}</th>
<th>{str section='activity' tag='subject'}</th>
<th>{str section='artefact.multirecipientnotification' tag='touser'}</th>
<th>{str section='activity' tag='date'}</th>
<th class="text-center">{str section='activity' tag='read'}</th>
<th class="text-center">{str tag='delete'}</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="5"></td>
<td class="text-center">
<a href="" onclick="toggleChecked('tocheckread'); return false;">
{str section='activity' tag='selectall'}
<span class="accessible-hidden sr-only"> {str tag='selectallread' section='artefact.multirecipientnotification'}</span>
</a>
</td>
<td class="text-center">
<a href="" onclick="toggleChecked('tocheckdel'); return false;">
{str section='activity' tag='selectall'}
<span class="accessible-hidden sr-only">{str tag='selectalldelete' section='artefact.multirecipientnotification'}</span>
</a>
</td>
</tr>
</tfoot>
<tbody>
{$activitylist['tablerows']|safe}
</tbody>
</table>
</div>
<div class="right activity-buttons">
<div class="activity-buttons pull-left">
<input class="submit btn btn-success" type="submit" value="{str tag='markasread' section='activity'}" />
<input class="submit btn btn-danger" type="button" value="{str tag='delete'}" onClick="markread(document.notificationlist, 'del'); return false;" />
</div>
<div class="selectall pull-right">
<strong class="prm">{str section='activity' tag='selectall'}: </strong>
<div class="markasread">
<label class="selected" for="markallasread" onclick="toggleChecked('tocheckread'); return false;">
<input type="checkbox" data-tocheckread="true" name="markallasread" id="markallasread">
{str tag='markasread' section='activity'}
<span class="accessible-hidden sr-only"> {str tag='selectallread' section='artefact.multirecipientnotification'}</span>
</label>
</div>
<div class="delete">
<label class="selected" for="deleteall" onclick="toggleChecked('tocheckdel'); return false;">
<input type="checkbox" name="deleteall" id="deleteall">
{str tag='delete'}
<span class="accessible-hidden sr-only">{str tag='selectalldelete' section='artefact.multirecipientnotification'}</span>
</label>
</div>
</div>
<div id="activitylist" class="notification-list">