Merge branch 'develop' of github.internet2.edu:COmanage/match into de…

…velop

NOTICE

@@ -65,9 +65,9 @@ files and utilities for further information:
  Apache 2.0
  https://fonts.google.com/icons?selected=Material+Icons 
 
- Noto Sans (app/webroot/css/fonts/notosans_*)
- SIL Open Font License
- https://fonts.google.com/noto/specimen/Noto+Sans
+ Open Sans (app/webroot/css/fonts/opensans)
+ Apache 2.0
+ https://fonts.google.com/specimen/Open+Sans
 
  noty (app/webroot/js/jquery/noty)
  MIT License

app/templates/element/badgeList.php

@@ -27,7 +27,7 @@
  *    'color' => BadgeColorModeEnum::Blue,
  *    'outline' => false,
  *    'pill' => true,
- *    'fa_class' => 'fa-key',
+ *    'icon' => 'material-icons-key',
  *   ),
  * );
  *
@@ -48,13 +48,13 @@
 
 foreach($vv_badge_list as $badge) {
   $badge_classes = [];
-  $fa_element = "";
+  $icon = "";
 
   if(isset($badge['pill']) && $badge['pill']) {
     $badge_classes[] = "rounded-pill";
   }
-  if(!empty($badge['fa_class'])) {
-    $fa_element = '<i class="mr-1 fa ' . $badge["fa_class"] .'"></i>';
+  if(!empty($badge['icon'])) {
+    $icon = '<i class="mr-1 material-icons" aria-hidden="true">' . $badge["icon"] .'</i>';
   }
   if(isset($badge['outline']) && $badge['outline']) {
     $badge_classes[] = "bg-outline-" . $badge['color'];
@@ -69,7 +69,7 @@
   // Print the Badge
   print $this->Html->tag(
     'span',
-    $fa_element . $badge['text'],
+    $icon . $badge['text'],
     [
       'class' => 'mr-1 badge ' . implode(' ', $badge_classes),
       'escape' => false,

app/templates/element/javascript.php

@@ -178,13 +178,16 @@
 
     // Add loading animation when a form is submitted, when any item with a "spin" class is clicked, 
     // or on any button or anchor tag lacking the .nospin class.
-    $("input[type='submit'], button:not(.nospin), a:not(.nospin), .spin").click(function() {
+    $("input[type='submit'], button:not(.nospin), a:not(.nospin), .spin").click(function(e) {
 
-      displaySpinner();
+      // Start a spinner only if CTRL, CMD, or SHIFT is not pressed (which loads a new tab or window).
+      if(!(e.ctrlKey || e.metaKey || e.shiftKey)) {
+        displaySpinner();
 
-      // Test for invalid fields (HTML5) and turn off spinner explicitly if found
-      if(document.querySelectorAll(":invalid").length) {
-        stopSpinner();
+        // Test for invalid fields (HTML5) and turn off spinner explicitly if found
+        if (document.querySelectorAll(":invalid").length) {
+          stopSpinner();
+        }
       }
 
     });

app/webroot/css/co-base.css

@@ -25,11 +25,11 @@
  */
 
 /* HTML, BODY, HEADINGS, ANCHORS, FONTS */
-@import url("fonts/notosans_regular/stylesheet.css");
+@import url("fonts/opensans/stylesheet.css");
 @import url("fonts/material-icons/material-icons.css");
 
 html * {
-  font-family: 'Noto Sans','Trebuchet MS',Arial,Helvetica,sans-serif;
+  font-family: 'open_sansregular','Trebuchet MS',Arial,Helvetica,sans-serif;
 }
 body {
   color: var(--cmg-color-gray-001);

app/webroot/css/fonts/material-icons/_mixins.scss

@@ -0,0 +1,55 @@
+// @see https://github.com/twbs/bootstrap/blob/main/scss/_functions.scss
+@function material-icons-str-replace($string, $search, $replace: '') {
+  $index: str-index($string, $search);
+  @if $index {
+    @return str-slice($string, 1, $index - 1) + $replace +
+      material-icons-str-replace(
+        str-slice($string, $index + str-length($search)),
+        $search,
+        $replace
+      );
+  }
+  @return $string;
+}
+
+@mixin material-icons-font-class($font-family) {
+  font-family: $font-family;
+  font-weight: normal;
+  font-style: normal;
+  font-size: $material-icons-font-size;
+  line-height: 1;
+  letter-spacing: normal;
+  text-transform: none;
+  display: inline-block;
+  white-space: nowrap;
+  word-wrap: normal;
+  direction: ltr;
+  -webkit-font-smoothing: antialiased; // Support for all WebKit browsers
+  -moz-osx-font-smoothing: grayscale; // Support for Firefox
+  text-rendering: optimizeLegibility; // Support for Safari and Chrome
+  font-feature-settings: 'liga'; // Support for IE
+}
+
+@mixin material-icons-font($font-family) {
+  $class-name: to-lower-case($font-family);
+  $class-name: material-icons-str-replace($class-name, ' ', '-');
+  $font-file: $material-icons-font-path + $class-name;
+
+  @font-face {
+    font-family: $font-family;
+    font-style: normal;
+    font-weight: 400;
+    font-display: $material-icons-font-display;
+    src: url('#{$font-file}.woff2') format('woff2'),
+      url('#{$font-file}.woff') format('woff');
+  }
+
+  .#{$class-name} {
+    @include material-icons-font-class($font-family);
+  }
+}
+
+@mixin material-icons() {
+  @warn "material-icons() Sass mixin has been deprecated as of 1.0. Use '@extend .material-icons;' instead of '@include material-icons();'.";
+  @include material-icons-font-class('Material Icons');
+}

app/webroot/css/fonts/material-icons/_variables.scss

@@ -0,0 +1,3 @@
+$material-icons-font-path: './' !default;
+$material-icons-font-size: 24px !default;
+$material-icons-font-display: block !default;