MDL-72674 core: Add indicator that feedback link opens in new window

* New pix icon i/externallink
* New lang string opensinnewwindow
* Use the external link pix icon with "Opens in new window" lang string
 as its alt text and add it to the "Give feedback about this software"
 link.
* Update cta template to indicate whether the link opens in new window.

lang/en/moodle.php

@@ -1537,6 +1537,7 @@ $string['oldpassword'] = 'Current password';
 $string['olduserdirectory'] = 'This is the OLD users directory, and is no longer needed. You may safely delete it. The files it contains have been copied to the NEW user directory.';
 $string['opendrawerblocks'] = 'Open block drawer';
 $string['opendrawerindex'] = 'Open course index drawer';
+$string['opensinnewwindow'] = 'Opens in new window';
 $string['optional'] = 'optional';
 $string['options'] = 'options';
 $string['order'] = 'Order';

lib/classes/output/icon_system_fontawesome.php

@@ -238,6 +238,7 @@ class icon_system_fontawesome extends icon_system_font {
             'core:i/enrolusers' => 'fa-user-plus',
             'core:i/expired' => 'fa-exclamation text-warning',
             'core:i/export' => 'fa-download',
+            'core:i/externallink' => 'fa-external-link',
             'core:i/files' => 'fa-file',
             'core:i/filter' => 'fa-filter',
             'core:i/flagged' => 'fa-flag',

lib/classes/userfeedback.php

@@ -63,6 +63,7 @@ class core_userfeedback {
                     'record' => 1,
                     'hide' => 1,
                 ],
+                'newwindow' => true,
             ],
             [
                 'title' => get_string('calltofeedback_remind'),

lib/templates/local/notification/cta.mustache

@@ -51,7 +51,7 @@
 
 <div class="cta alert alert-primary alert-block fade in {{ extraclasses }}" {{# region }}data-region="{{ region }}"{{/ region}}>
     <div class="media">
-        <div class="mr-2 icon-size-5">
+        <div class="cta-icon mr-2 icon-size-5">
             {{# pix }} {{ icon.pix }}, {{ icon.component }} {{/ pix }}
         </div>
         <div class="media-body align-self-center">
@@ -61,7 +61,7 @@
                     {{# data }}
                    data-{{ name }}="{{ value }}"
                     {{/ data }}
-                >{{ title }}</a>
+                >{{ title }} {{#newwindow}}{{#pix}}i/externallink, core, {{#str}}opensinnewwindow{{/str}}{{/pix}}{{/newwindow}}</a>
             {{/ actions }}
         </div>
     </div>

lib/templates/userfeedback_footer_link.mustache

@@ -24,4 +24,6 @@
 }}
 
 {{# pix }} i/bullhorn, core {{/ pix }}
-<a href="{{url}}" target="_blank">{{#str}}calltofeedback_give{{/str}}</a>
+<a href="{{url}}" target="_blank">
+    {{#str}}calltofeedback_give{{/str}} {{#pix}}i/externallink, core, {{#str}}opensinnewwindow{{/str}}{{/pix}}
+</a>

theme/boost/scss/moodle/core.scss

@@ -2750,12 +2750,14 @@ $picker-emojis-per-row: 7 !default;
 }
 
 .alert.cta {
-    .icon {
-        padding: 0.3rem;
-        &.fa {
-            border-radius: 50%;
-            border-style: solid;
-            border-width: 0.125rem;
+    .cta-icon {
+        .icon {
+            padding: 0.3rem;
+            &.fa {
+                border-radius: 50%;
+                border-style: solid;
+                border-width: 0.125rem;
+            }
         }
     }
 }

theme/boost/style/moodle.css

@@ -11918,9 +11918,9 @@ input[disabled] {
   .link-underline:focus {
     text-decoration: none; }
 
-.alert.cta .icon {
+.alert.cta .cta-icon .icon {
   padding: 0.3rem; }
-  .alert.cta .icon.fa {
+  .alert.cta .cta-icon .icon.fa {
     border-radius: 50%;
     border-style: solid;
     border-width: 0.125rem; }

theme/classic/style/moodle.css

@@ -12139,9 +12139,9 @@ input[disabled] {
   .link-underline:focus {
     text-decoration: none; }
 
-.alert.cta .icon {
+.alert.cta .cta-icon .icon {
   padding: 0.3rem; }
-  .alert.cta .icon.fa {
+  .alert.cta .cta-icon .icon.fa {
     border-radius: 50%;
     border-style: solid;
     border-width: 0.125rem; }