Skip to content
Jump to bottom

Replace Noty with Bootstrap Toasts (CFM-110) #12

Merged
merged 3 commits into from
Apr 1, 2022
+113 −3,331
Merged

Replace Noty with Bootstrap Toasts (CFM-110) #12

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
55cbcdf
Replace Noty with Bootstrap Toasts, first commmit (CFM-110)
arlen Mar 30, 2022
e823b05
Wrap messages with h() (CFM-110)
arlen Mar 31, 2022
701fa96
Change lang file key (CFM-110)
arlen Mar 31, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions app/resources/locales/en_US/default.po
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,9 @@
msgid "product.code"
msgstr "registry"

msgid "registry.meta.comanage"
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe this should be product.comanage?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Agreed! Changed.

msgstr "COmanage"

# This should match the ISO 639-1 two letter language code for the translation
msgid "registry.meta.lang"
msgstr "en"
Expand Down
9 changes: 9 additions & 0 deletions app/resources/locales/en_US/information.po
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,15 @@ msgstr "No collaborations (COs) yet exist. Please have an administrator create o
msgid "cos.select"
msgstr "Please select the collaboration (CO) you wish to manage."

msgid "flash.default"
msgstr "Notice"

msgid "flash.error"
msgstr "Error"

msgid "flash.success"
msgstr "Success"

msgid "pagination.format"
msgstr "Page {{page}} of {{pages}}, Viewing {{start}}-{{end}} of {{count}}"

Expand Down
31 changes: 22 additions & 9 deletions app/templates/element/flash/default.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,13 +11,26 @@
<div class="<?= h($class) ?>" onclick="this.classList.add('hidden');"><?= $message ?></div>
*/ ?>

<?php
if(!empty($message)) {
// Strip tags then escape quotes before handing Flash message to noty.js
$filteredMessage = filter_var(filter_var($message,FILTER_SANITIZE_STRING,FILTER_FLAG_NO_ENCODE_QUOTES),FILTER_SANITIZE_ADD_SLASHES);
// Replace all newlines with html breaks
$filteredMessage = str_replace(array("\r", "\n"), '<br/>', $filteredMessage);
print "<script>generateFlash('" . $filteredMessage . "', '" . $class . "');</script>";
}
?>

<?php if(!empty($message)): ?>
<div class="toast error" role="alert" aria-live="assertive" aria-atomic="true" data-bs-autohide="false">
<div class="toast-header">
<?= $this->Html->image("COmanage-Gears-SM.png", array('alt' => __('registry.meta.logo'))); ?>
<span class="me-auto"><?= __('registry.meta.comanage'); ?></span>
<small><?= __d('information','flash.default'); ?></small>
<button type="button" class="btn-close nospin" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
<?= $message ?>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just confirming we don't need to do filter_var here anymore? (Yay, if so.)

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Cake claims that flash messages are escaped by default and safe for printing, but they also wrap all their examples in h() (htmlspecialchars) - so I've added that to the flash messages as well.

</div>
</div>

<script>
var toastElList = [].slice.call(document.querySelectorAll('.toast'))
var toastList = toastElList.map(function(toastEl) {
return new bootstrap.Toast(toastEl);
});
toastList.forEach(toast => toast.show());
</script>
<?php endif; ?>

30 changes: 20 additions & 10 deletions app/templates/element/flash/error.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,14 +7,24 @@
<div class="message error" onclick="this.classList.add('hidden');"><?= $message ?></div>
*/ ?>

<?php if(!empty($message)): ?>
<div class="toast error" role="alert" aria-live="assertive" aria-atomic="true" data-bs-autohide="false">
<div class="toast-header">
<?= $this->Html->image("COmanage-Gears-SM.png", array('alt' => __('registry.meta.logo'))); ?>
<span class="me-auto"><?= __('registry.meta.comanage'); ?></span>
<small><?= __d('information','flash.error'); ?></small>
<button type="button" class="btn-close nospin" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
<?= $message ?>
</div>
</div>

<?php
if(!empty($message)) {
// Strip tags then escape quotes before handing Flash message to noty.js
$filteredMessage = filter_var(filter_var($message,FILTER_SANITIZE_STRING,FILTER_FLAG_NO_ENCODE_QUOTES),FILTER_SANITIZE_ADD_SLASHES);
// Replace all newlines with html breaks
$filteredMessage = str_replace(array("\r", "\n"), '<br/>', $filteredMessage);
print "<script>generateFlash('" . $filteredMessage . "', 'error');</script>";
}
?>

<script>
var toastElList = [].slice.call(document.querySelectorAll('.toast'))
var toastList = toastElList.map(function(toastEl) {
return new bootstrap.Toast(toastEl);
});
toastList.forEach(toast => toast.show());
</script>
<?php endif; ?>
30 changes: 21 additions & 9 deletions app/templates/element/flash/success.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,12 +7,24 @@
<div class="message success" onclick="this.classList.add('hidden')"><?= $message ?></div>
*/ ?>

<?php
if(!empty($message)) {
// Strip tags then escape quotes before handing Flash message to noty.js
$filteredMessage = filter_var(filter_var($message,FILTER_SANITIZE_STRING,FILTER_FLAG_NO_ENCODE_QUOTES),FILTER_SANITIZE_ADD_SLASHES);
// Replace all newlines with html breaks
$filteredMessage = str_replace(array("\r", "\n"), '<br/>', $filteredMessage);
print "<script>generateFlash('" . $filteredMessage . "', 'success');</script>";
}
?>
<?php if(!empty($message)): ?>
<div class="toast success" role="alert" aria-live="assertive" aria-atomic="true" data-bs-autohide="false">
<div class="toast-header">
<?= $this->Html->image("COmanage-Gears-SM.png", array('alt' => __('registry.meta.logo'))); ?>
<span class="me-auto"><?= __('registry.meta.comanage'); ?></span>
<small><?= __d('information','flash.success'); ?></small>
<button type="button" class="btn-close nospin" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
<?= $message ?>
</div>
</div>

<script>
var toastElList = [].slice.call(document.querySelectorAll('.toast'))
var toastList = toastElList.map(function(toastEl) {
return new bootstrap.Toast(toastEl);
});
toastList.forEach(toast => toast.show());
</script>
<?php endif; ?>
4 changes: 1 addition & 3 deletions app/templates/element/javascript.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -230,6 +230,4 @@
var defaultConfirmCancel = "<?php print __d('operation', 'cancel'); ?>";
var defaultConfirmTitle = "<?php print __d('operation', 'confirm'); ?>";

</script>

<?= $this->Flash->render() ?>
</script>
20 changes: 13 additions & 7 deletions app/templates/layout/default.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@
<!DOCTYPE html>
<html lang="<?= __('registry.meta.lang'); ?>">
<head>
<?= $this->Html->meta('viewport', 'width=device-width, initial-scale=1.0') . "\n"; ?>
<?= $this->Html->meta('viewport', 'width=device-width, initial-scale=1, shrink-to-fit=no') . "\n"; ?>
<?= $this->Html->charset(); ?>

<title><?= (!empty($vv_title) ? $vv_title : __('registry.meta.registry')); ?></title>
Expand All @@ -63,8 +63,9 @@
'co-responsive'
]) . "\n"; ?>

<!-- Load JavaScript (only JQuery here - other scripts at bottom) -->
<!-- Load Bootstrap and jQuery (other scripts at bottom) -->
<?= $this->Html->script([
'bootstrap/bootstrap.bundle.min.js',
'jquery/jquery.min.js'
]) . "\n"; ?>

Expand Down Expand Up @@ -176,6 +177,15 @@

<!-- loading animation -->
<div id="co-loading"><span></span><span></span><span></span></div>

<!-- informational messages -->
<div
class="toast-container"
id="flash-messages"
aria-live="polite"
aria-atomic="true" >
<?= $this->Flash->render() ?>
</div>

<!-- modal dialog box -->
<?= $this->element('dialog'); ?>
Expand All @@ -191,13 +201,9 @@
</script>

<!-- Load Javascript -->
<!-- XXX Noty, js-cookie, and metisMenu should be deprecated -->
<!-- XXX js-cookie should be deprecated -->
<?= $this->Html->script([
'bootstrap/bootstrap.bundle.min.js',
'js-cookie/js.cookie-2.1.3.min.js',
'jquery/noty/jquery.noty.js',
'jquery/noty/layouts/topCenter.js',
'jquery/noty/themes/comanage.js',
'comanage.js'
]) . "\n"; ?>

Expand Down
28 changes: 24 additions & 4 deletions app/webroot/css/co-base.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -319,11 +319,31 @@ instead, reveal in user menu */
padding: 1em 0;
}
/* NOTICES */
.noty_text {
letter-spacing: 0.3px;
font-size: 14px;
#flash-messages {
position: fixed;
top: 0;
left: 0;
right: 0;
margin: 1em auto;
z-index: 100;
}
#flash-messages .toast-header img {
width: 20px;
margin-right: 0.3em;
}
#flash-messages .toast.success .toast-header {
background-color: var(--cmg-color-green-007);
color: white;
}
#flash-messages .toast.error .toast-header {
background-color: var(--cmg-color-red-002);
color: white;
}
#flash-messages .toast.default .toast-header {
background-color: var(--cmg-color-yellow-001);
color: black;
}
.noty_text .material-icons {
#flash-messages .material-icons {
font-size: 20px !important;
padding: 0;
margin: 0 4px 0 -10px;
Expand Down
Binary file added app/webroot/img/COmanage-Gears-SM.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
11 changes: 0 additions & 11 deletions app/webroot/js/comanage.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,17 +40,6 @@ function js_onsubmit_call_hooks() {
}
}

// Generate flash notifications for messages
function generateFlash(text, type) {
var n = noty({
text: text,
type: type,
dismissQueue: true,
layout: 'topCenter',
theme: 'comanage'
});
}

// Generate a loading animation by revealing a persistent hidden div with CSS animation.
// An element's onclick action will trigger this to appear if it has the class "spin" class on an element.
// (See Template/Elements/javascript.ctp)
Expand Down
20 changes: 0 additions & 20 deletions app/webroot/js/jquery/noty/LICENSE.txt
View file
Open in desktop

This file was deleted.

Loading