Fix up Flash messages in Match, including Information messages (CO-18…

…48). Use material icons in lieu of jquery-ui icons, clean up styling, and perform trivial refactoring.
COmanage · Mar 20, 2020 · 0a24823 · 0a24823
1 parent 20eec85
commit 0a24823
Show file tree

Hide file tree

Showing 8 changed files with 34 additions and 51 deletions.
diff --git a/app/src/Template/Element/Flash/default.ctp b/app/src/Template/Element/Flash/default.ctp
@@ -1,4 +1,6 @@
+
 <?php
+  // Reference examples from Cake 3
   $class = 'message';
   if (!empty($params['class'])) {
     $class .= ' ' . $params['class'];

diff --git a/app/src/Template/Element/Flash/error.ctp b/app/src/Template/Element/Flash/error.ctp
@@ -1,20 +1,14 @@
 <?php
   if (!isset($params['escape']) || $params['escape'] !== false) {
-    $message = h($message);
+    $message = h($message); // XXX probably redundant
   }
-?>
-<?php /*
-<div class="message error" 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_MAGIC_QUOTES);
     // Replace all newlines with html breaks
     $filteredMessage = str_replace(array("\r", "\n"), '<br/>', $filteredMessage);
-    print "<script>generateFlash('" . $filteredMessage . "', 'error');</script>";
+    print "<script>generateFlash('<span class=\"material-icons\">error</span>" . $filteredMessage . "', 'error');</script>";
   }
 ?>
 
diff --git a/app/src/Template/Element/Flash/information.ctp b/app/src/Template/Element/Flash/information.ctp
@@ -0,0 +1,14 @@
+<?php
+  if (!isset($params['escape']) || $params['escape'] !== false) {
+    $message = h($message); // XXX probably redundant
+  }
+
+  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_MAGIC_QUOTES);
+    // Replace all newlines with html breaks
+    $filteredMessage = str_replace(array("\r", "\n"), '<br/>', $filteredMessage);
+    print "<script>generateFlash('<span class=\"material-icons\">info</span>" . $filteredMessage . "', 'information');</script>";
+  }
+?>
+
diff --git a/app/src/Template/Element/Flash/success.ctp b/app/src/Template/Element/Flash/success.ctp
@@ -1,18 +1,13 @@
 <?php
-if (!isset($params['escape']) || $params['escape'] !== false) {
-    $message = h($message);
-}
-?>
-<?php /*
-<div class="message success" onclick="this.classList.add('hidden')"><?= $message ?></div>
-*/ ?>
+  if (!isset($params['escape']) || $params['escape'] !== false) {
+    $message = h($message); // XXX probably redundant
+  }
 
-<?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_MAGIC_QUOTES);
     // Replace all newlines with html breaks
     $filteredMessage = str_replace(array("\r", "\n"), '<br/>', $filteredMessage);
-    print "<script>generateFlash('" . $filteredMessage . "', 'success');</script>";
+    print "<script>generateFlash('<span class=\"material-icons\">check_circle</span>" . $filteredMessage . "', 'success');</script>";
   }
 ?>
diff --git a/app/src/Template/Element/javascript.ctp b/app/src/Template/Element/javascript.ctp
@@ -27,7 +27,7 @@
  */
 ?>
 
-<script type="text/javascript">
+<script>
   $(function() {
     // Establish left-side navigation
     $('#main-menu').metisMenu();
@@ -223,12 +223,6 @@
 
     });
 
-    // Flash Messages
-    <?php
-      print $this->Flash->render('error');
-      print $this->Flash->render('success');
-      print $this->Flash->render('information');
-    ?>
   });
 
   // Define default text for confirm dialog
@@ -237,3 +231,5 @@
   var defaultConfirmTitle = "<?php print __('op.confirm'); ?>";
 
 </script>
+
+<?= $this->Flash->render() ?>
diff --git a/app/src/Template/Layout/default.ctp b/app/src/Template/Layout/default.ctp
@@ -165,9 +165,7 @@ if(isset($_SERVER['HTTP_USER_AGENT']) && (strpos($_SERVER['HTTP_USER_AGENT'], 'M
     ]) . "\n"; ?>
 
     <!-- COmanage JavaScript onload scripts -->
-    <?php print $this->element('javascript'); ?>
+    <?= $this->element('javascript'); ?>
 
-    <!-- XXX where does Flash->render go? -->
-    <?= $this->Flash->render() ?>
   </body>
 </html>
diff --git a/app/webroot/css/co-base.css b/app/webroot/css/co-base.css
@@ -297,25 +297,15 @@ body.logged-in #user-menu {
   padding: 1em 0;
 }
 /* NOTICES */
-.noty_text{
-  font-weight: bold;
-}
-.noty_icon{
-  display: inline-block !important;
-  position: relative;
-  top: 3px;
-}
-.warbg{
-  background-image: url("../js/jquery/jquery-ui-1.11.4.custom/images-comanage/ui-icons_826262_256x240.png") !important;
-}
-.sucbg{
-  background-image: url("../js/jquery/jquery-ui-1.11.4.custom/images-comanage/ui-icons_006400_256x240.png") !important;
-}
-.errbg{
-  background-image: url("../js/jquery/jquery-ui-1.11.4.custom/images-comanage/ui-icons_ffffff_256x240.png") !important;
+.noty_text {
+  letter-spacing: 0.3px;
+  font-size: 14px;
 }
-.notbg{
-  background-image: url("../js/jquery/jquery-ui-1.11.4.custom/images-comanage/ui-icons_444444_256x240.png") !important;
+.noty_text .material-icons {
+  font-size: 20px !important;
+  padding: 0;
+  margin: 0 4px 0 -10px;
+  vertical-align: text-bottom;
 }
 /* General icon and box styling */
 .co-info { /* info icon */

diff --git a/app/webroot/js/jquery/noty/themes/comanage.js b/app/webroot/js/jquery/noty/themes/comanage.js
@@ -129,23 +129,17 @@
 
 			switch (this.options.type) {
 				case 'alert': case 'notification':
-					$('<span class="ui-icon ui-icon-alert noty_icon notbg"></span>').prependTo(this.$message);
 					this.$bar.css({backgroundColor: '#FFF', borderColor: '#CCC', color: '#444'}); break;
 				case 'warning':
-					$('<span class="ui-icon ui-icon-alert noty_icon warbg"></span>').prependTo(this.$message);
 					this.$bar.css({backgroundColor: '#FFEAA8', borderColor: '#FFC237', color: '#826200'});
 					this.$buttons.css({borderTop: '1px solid #FFC237'}); break;
 				case 'error':
-					$('<span class="ui-icon ui-icon-circle-close noty_icon errbg"></span>').prependTo(this.$message);
 					this.$bar.css({backgroundColor: 'red', borderColor: 'darkred', color: '#FFF'});
-					this.$message.css({fontWeight: 'bold'});
 					this.$buttons.css({borderTop: '1px solid darkred'}); break;
 				case 'information':
-					$('<span class="ui-icon ui-icon-info noty_icon infbg"></span>').prependTo(this.$message);
 					this.$bar.css({backgroundColor: '#57B7E2', borderColor: '#0B90C4', color: '#FFF'});
 					this.$buttons.css({borderTop: '1px solid #0B90C4'}); break;
 				case 'success':
-					$('<span class="ui-icon ui-icon-circle-check noty_icon sucbg"></span>').prependTo(this.$message);
 					this.$bar.css({backgroundColor: 'lightgreen', borderColor: '#50C24E', color: 'darkgreen'});
 					this.$buttons.css({borderTop: '1px solid #50C24E'});
 					break;