From 3998ce4c979ff838080a032865599ecfb662aae8 Mon Sep 17 00:00:00 2001 From: Arlen Johnson Date: Fri, 1 Apr 2022 17:23:05 -0400 Subject: [PATCH] Replace Noty with Bootstrap Toasts (CFM-110) (#12) * Replace Noty with Bootstrap Toasts, first commmit (CFM-110) * Wrap messages with h() (CFM-110) * Change lang file key (CFM-110) --- app/resources/locales/en_US/default.po | 3 + app/resources/locales/en_US/information.po | 9 + app/templates/element/flash/default.php | 31 +- app/templates/element/flash/error.php | 30 +- app/templates/element/flash/success.php | 30 +- app/templates/element/javascript.php | 4 +- app/templates/layout/default.php | 20 +- app/webroot/css/co-base.css | 28 +- app/webroot/img/COmanage-Gears-SM.png | Bin 0 -> 1729 bytes app/webroot/js/comanage.js | 11 - app/webroot/js/jquery/noty/LICENSE.txt | 20 - app/webroot/js/jquery/noty/jquery.noty.js | 545 ------- app/webroot/js/jquery/noty/layouts/bottom.js | 30 - .../js/jquery/noty/layouts/bottomCenter.js | 38 - .../js/jquery/noty/layouts/bottomLeft.js | 39 - .../js/jquery/noty/layouts/bottomRight.js | 39 - app/webroot/js/jquery/noty/layouts/center.js | 53 - .../js/jquery/noty/layouts/centerLeft.js | 58 - .../js/jquery/noty/layouts/centerRight.js | 58 - app/webroot/js/jquery/noty/layouts/inline.js | 27 - app/webroot/js/jquery/noty/layouts/top.js | 30 - .../js/jquery/noty/layouts/topCenter.js | 37 - app/webroot/js/jquery/noty/layouts/topLeft.js | 39 - .../js/jquery/noty/layouts/topRight.js | 39 - .../noty/packaged/jquery.noty.packaged.js | 1447 ----------------- .../noty/packaged/jquery.noty.packaged.min.js | 1 - app/webroot/js/jquery/noty/promise.js | 432 ----- app/webroot/js/jquery/noty/themes/comanage.js | 162 -- app/webroot/js/jquery/noty/themes/default.js | 184 --- 29 files changed, 113 insertions(+), 3331 deletions(-) create mode 100644 app/webroot/img/COmanage-Gears-SM.png delete mode 100755 app/webroot/js/jquery/noty/LICENSE.txt delete mode 100644 app/webroot/js/jquery/noty/jquery.noty.js delete mode 100644 app/webroot/js/jquery/noty/layouts/bottom.js delete mode 100644 app/webroot/js/jquery/noty/layouts/bottomCenter.js delete mode 100644 app/webroot/js/jquery/noty/layouts/bottomLeft.js delete mode 100644 app/webroot/js/jquery/noty/layouts/bottomRight.js delete mode 100644 app/webroot/js/jquery/noty/layouts/center.js delete mode 100644 app/webroot/js/jquery/noty/layouts/centerLeft.js delete mode 100644 app/webroot/js/jquery/noty/layouts/centerRight.js delete mode 100644 app/webroot/js/jquery/noty/layouts/inline.js delete mode 100644 app/webroot/js/jquery/noty/layouts/top.js delete mode 100644 app/webroot/js/jquery/noty/layouts/topCenter.js delete mode 100644 app/webroot/js/jquery/noty/layouts/topLeft.js delete mode 100644 app/webroot/js/jquery/noty/layouts/topRight.js delete mode 100644 app/webroot/js/jquery/noty/packaged/jquery.noty.packaged.js delete mode 100644 app/webroot/js/jquery/noty/packaged/jquery.noty.packaged.min.js delete mode 100644 app/webroot/js/jquery/noty/promise.js delete mode 100644 app/webroot/js/jquery/noty/themes/comanage.js delete mode 100644 app/webroot/js/jquery/noty/themes/default.js diff --git a/app/resources/locales/en_US/default.po b/app/resources/locales/en_US/default.po index c7b9d55a6..fe117035f 100644 --- a/app/resources/locales/en_US/default.po +++ b/app/resources/locales/en_US/default.po @@ -26,6 +26,9 @@ msgid "product.code" msgstr "registry" +msgid "product.comanage" +msgstr "COmanage" + # This should match the ISO 639-1 two letter language code for the translation msgid "registry.meta.lang" msgstr "en" diff --git a/app/resources/locales/en_US/information.po b/app/resources/locales/en_US/information.po index 94f4ffd9b..835cddf26 100644 --- a/app/resources/locales/en_US/information.po +++ b/app/resources/locales/en_US/information.po @@ -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}}" diff --git a/app/templates/element/flash/default.php b/app/templates/element/flash/default.php index 62c060cab..c4e4a2f4b 100644 --- a/app/templates/element/flash/default.php +++ b/app/templates/element/flash/default.php @@ -11,13 +11,26 @@
*/ ?> -', $filteredMessage); - print ""; - } -?> + + + + + + diff --git a/app/templates/element/flash/error.php b/app/templates/element/flash/error.php index 9f66439e6..1d047dd32 100644 --- a/app/templates/element/flash/error.php +++ b/app/templates/element/flash/error.php @@ -7,14 +7,24 @@
*/ ?> + + -', $filteredMessage); - print ""; - } -?> - + + diff --git a/app/templates/element/flash/success.php b/app/templates/element/flash/success.php index a82225c56..b021443f1 100644 --- a/app/templates/element/flash/success.php +++ b/app/templates/element/flash/success.php @@ -7,12 +7,24 @@
*/ ?> -', $filteredMessage); - print ""; - } -?> + + + + + \ No newline at end of file diff --git a/app/templates/element/javascript.php b/app/templates/element/javascript.php index f75048ac7..88f34443a 100644 --- a/app/templates/element/javascript.php +++ b/app/templates/element/javascript.php @@ -230,6 +230,4 @@ var defaultConfirmCancel = ""; var defaultConfirmTitle = ""; - - -Flash->render() ?> \ No newline at end of file + \ No newline at end of file diff --git a/app/templates/layout/default.php b/app/templates/layout/default.php index 356bd917b..f5fbea63c 100644 --- a/app/templates/layout/default.php +++ b/app/templates/layout/default.php @@ -40,7 +40,7 @@ - Html->meta('viewport', 'width=device-width, initial-scale=1.0') . "\n"; ?> + Html->meta('viewport', 'width=device-width, initial-scale=1, shrink-to-fit=no') . "\n"; ?> Html->charset(); ?> <?= (!empty($vv_title) ? $vv_title : __('registry.meta.registry')); ?> @@ -63,8 +63,9 @@ 'co-responsive' ]) . "\n"; ?> - + Html->script([ + 'bootstrap/bootstrap.bundle.min.js', 'jquery/jquery.min.js' ]) . "\n"; ?> @@ -176,6 +177,15 @@
+ + +
+ Flash->render() ?> +
element('dialog'); ?> @@ -191,13 +201,9 @@ - + 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"; ?> diff --git a/app/webroot/css/co-base.css b/app/webroot/css/co-base.css index 8a90af79a..b62401762 100644 --- a/app/webroot/css/co-base.css +++ b/app/webroot/css/co-base.css @@ -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; diff --git a/app/webroot/img/COmanage-Gears-SM.png b/app/webroot/img/COmanage-Gears-SM.png new file mode 100644 index 0000000000000000000000000000000000000000..320fcfbcef51cdee500ba296dc302c583192b459 GIT binary patch literal 1729 zcmbVNdrT8|9KV)Q0juDkJXOx(6omHf`hd1lp!A^#t-PiXnR3@&p|S1N_K*T91qB5` z+2VX;DnvI;lqf>fB_{H43~=a1HZvKU!hE3Hbg0CkL)n#w+aJa(yX11e@Ap2R@B5oy zRjPKy9Is$6008DBtyHE{--Xm02S=G3B;(|hq*V$*g@uK@LIIDk&n&XyP&#fW3T!&6BZjaUGF82IJ8}W3Xr!xcMyf5SNlEAm%(#V2Qpz~gAD-T* zm+DawA`l`5t^vXHT%iEQxe{?S#>K>l7>U7!IHpHt?7WSy79@&ADp)8N$0!g)r4Yx6 z#OfHi8c_)qa)m-N!%ec-Nz|glXM7te-_u;dJGoMY4M$1BmPrt%nK?+!CrHAcPgp^P zg6cZe=5P(FGg@5A2v?(~@>b$D<7Qm1wh?A;z z85K2?uH&0^poBLIg|`O8D4ZNdbg9Y24Oz5QA){h`cZjSpLyo>$US>hB&G-Bi}G zATRB_lf^hkqkEVhJv?yx^`A#e-PZsYf|VuD;f{hGMC(N8{rNs2hKOD2O-q~mKo;i4 z@X2X^HvG+ybVyrSbZW4}o4I5z&+pO@N}qjT_)!&$h^z^M7k|Wd0=_AL`eekH$0|d5 zBf)_3k-yFkr`~D5b!%QPP%(Tt%P=)%KmtF5nHHClWapwxF z{Dn_Hpsrho9%e7}s(BFIk@NIQW=+|h(a0|rH5{BZz-n>-P{4z7#UcF z?OfKZURrx)#D_@>3PuM;JG;3ST)I8q)YF0- zaZh^>Jb*UQ=dR&5oTgQk-Ss^2=y63gYs0pm)M;+31_FD0*YtvUUV@4uvCa)_YcjAB zgWLlWv{xS-+O>H1xliVF8<|U<@2#&L+IoVQ6Pw&wyD0fatz&neE;uwnTX>Vt?TM?* zo_i{LdE;k+o)rw%mewtd!$jYLvd2KyQFX+~6ZZJneCPV(PUqn0*WvAZzw7G04Bo&- z8@l!n*6jxNMadiSyMCDu_IGTp;a(q+Fg{%^f8n3g*zkdMT`wdVTly@16NT^QN@pPwMYIcU>w;Dy{NNVs820 DVS;wo literal 0 HcmV?d00001 diff --git a/app/webroot/js/comanage.js b/app/webroot/js/comanage.js index dca2183b4..86dfb5cf5 100644 --- a/app/webroot/js/comanage.js +++ b/app/webroot/js/comanage.js @@ -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) diff --git a/app/webroot/js/jquery/noty/LICENSE.txt b/app/webroot/js/jquery/noty/LICENSE.txt deleted file mode 100755 index 686993990..000000000 --- a/app/webroot/js/jquery/noty/LICENSE.txt +++ /dev/null @@ -1,20 +0,0 @@ -Copyright (c) 2012 Nedim Arabacı - -Permission is hereby granted, free of charge, to any person obtaining -a copy of this software and associated documentation files (the -"Software"), to deal in the Software without restriction, including -without limitation the rights to use, copy, modify, merge, publish, -distribute, sublicense, and/or sell copies of the Software, and to -permit persons to whom the Software is furnished to do so, subject to -the following conditions: - -The above copyright notice and this permission notice shall be -included in all copies or substantial portions of the Software. - -THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, -EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF -MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND -NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE -LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION -OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION -WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. \ No newline at end of file diff --git a/app/webroot/js/jquery/noty/jquery.noty.js b/app/webroot/js/jquery/noty/jquery.noty.js deleted file mode 100644 index 23877779d..000000000 --- a/app/webroot/js/jquery/noty/jquery.noty.js +++ /dev/null @@ -1,545 +0,0 @@ -/*! - @package noty - jQuery Notification Plugin - @version version: 2.3.7 - @contributors https://github.com/needim/noty/graphs/contributors - - @documentation Examples and Documentation - http://needim.github.com/noty/ - - @license Licensed under the MIT licenses: http://www.opensource.org/licenses/mit-license.php - */ - - if(typeof Object.create !== 'function') { - Object.create = function(o) { - function F() { - } - - F.prototype = o; - return new F(); - }; - } - - var NotyObject = { - - init: function(options) { - - // Mix in the passed in options with the default options - this.options = $.extend({}, $.noty.defaults, options); - - this.options.layout = (this.options.custom) ? $.noty.layouts['inline'] : $.noty.layouts[this.options.layout]; - - if($.noty.themes[this.options.theme]) - this.options.theme = $.noty.themes[this.options.theme]; - else - options.themeClassName = this.options.theme; - - delete options.layout; - delete options.theme; - - this.options = $.extend({}, this.options, this.options.layout.options); - this.options.id = 'noty_' + (new Date().getTime() * Math.floor(Math.random() * 1000000)); - - this.options = $.extend({}, this.options, options); - - // Build the noty dom initial structure - this._build(); - - // return this so we can chain/use the bridge with less code. - return this; - }, // end init - - _build: function() { - - // Generating noty bar - var $bar = $('
').attr('id', this.options.id); - $bar.append(this.options.template).find('.noty_text').html(this.options.text); - - this.$bar = (this.options.layout.parent.object !== null) ? $(this.options.layout.parent.object).css(this.options.layout.parent.css).append($bar) : $bar; - - if(this.options.themeClassName) - this.$bar.addClass(this.options.themeClassName).addClass('noty_container_type_' + this.options.type); - - // Set buttons if available - if(this.options.buttons) { - - // If we have button disable closeWith & timeout options - this.options.closeWith = []; - this.options.timeout = false; - - var $buttons = $('
').addClass('noty_buttons'); - - (this.options.layout.parent.object !== null) ? this.$bar.find('.noty_bar').append($buttons) : this.$bar.append($buttons); - - var self = this; - - $.each(this.options.buttons, function(i, button) { - var $button = $('