diff --git a/lib/amd/build/toast.min.js.map b/lib/amd/build/toast.min.js.map index 645a72ddf23..e8c04864802 100644 --- a/lib/amd/build/toast.min.js.map +++ b/lib/amd/build/toast.min.js.map @@ -1 +1 @@ -{"version":3,"sources":["../src/toast.js"],"names":["addToastRegion","parent","pendingPromise","Pending","Templates","renderForPromise","html","js","prependNodeContents","Notification","exception","resolve","add","message","configuration","closeButton","autohide","delay","templateName","getTargetNode","targetNode","regions","document","querySelectorAll","length","body"],"mappings":"mMAuBA,OACA,OACA,O,6jCAOO,GAAMA,CAAAA,CAAc,4CAAG,WAAMC,CAAN,+FACpBC,CADoB,CACH,GAAIC,UAAJ,CAAY,gBAAZ,CADG,yBAIGC,WAAUC,gBAAV,CAA2B,0BAA3B,CAAuD,EAAvD,CAJH,iBAIfC,CAJe,GAIfA,IAJe,CAITC,CAJS,GAITA,EAJS,CAKtBH,UAAUI,mBAAV,CAA8BP,CAA9B,CAAsCK,CAAtC,CAA4CC,CAA5C,EALsB,qDAOtBE,UAAaC,SAAb,OAPsB,QAU1BR,CAAc,CAACS,OAAf,GAV0B,uDAAH,uDAApB,C,mBAuBA,GAAMC,CAAAA,CAAG,4CAAG,WAAMC,CAAN,CAAeC,CAAf,mGACTZ,CADS,CACQ,GAAIC,UAAJ,CAAY,gBAAZ,CADR,CAEfW,CAAa,IACTC,WAAW,GADF,CAETC,QAAQ,GAFC,CAGTC,KAAK,CAAE,GAHE,EAINH,CAJM,CAAb,CAOMI,CATS,oDAWcC,CAAAA,CAAa,EAX3B,QAWLC,CAXK,uBAYchB,WAAUC,gBAAV,CAA2Ba,CAA3B,IACrBL,OAAO,CAAPA,CADqB,EAElBC,CAFkB,EAZd,iBAYJR,CAZI,GAYJA,IAZI,CAYEC,CAZF,GAYEA,EAZF,CAgBXH,UAAUI,mBAAV,CAA8BY,CAA9B,CAA0Cd,CAA1C,CAAgDC,CAAhD,EAhBW,qDAkBXE,UAAaC,SAAb,OAlBW,QAqBfR,CAAc,CAACS,OAAf,GArBe,uDAAH,uDAAT,C,QAwBP,GAAMQ,CAAAA,CAAa,4CAAG,oGACZE,CADY,CACFC,QAAQ,CAACC,gBAAT,CAA0B,gBAA1B,CADE,KAGdF,CAAO,CAACG,MAHM,0CAIPH,CAAO,CAACA,CAAO,CAACG,MAAR,CAAiB,CAAlB,CAJA,wBAOZxB,CAAAA,CAAc,CAACsB,QAAQ,CAACG,IAAV,CAAgB,cAAhB,CAPF,iCAQXN,CAAa,EARF,0CAAH,uD","sourcesContent":["// This file is part of Moodle - http://moodle.org/\n//\n// Moodle is free software: you can redistribute it and/or modify\n// it under the terms of the GNU General Public License as published by\n// the Free Software Foundation, either version 3 of the License, or\n// (at your option) any later version.\n//\n// Moodle is distributed in the hope that it will be useful,\n// but WITHOUT ANY WARRANTY; without even the implied warranty of\n// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n// GNU General Public License for more details.\n//\n// You should have received a copy of the GNU General Public License\n// along with Moodle. If not, see .\n\n/**\n * A system for displaying small snackbar notifications to users which disappear shortly after they are shown.\n *\n * @module core/toast\n * @package core\n * @copyright 2019 Andrew Nicols \n * @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later\n */\nimport Templates from 'core/templates';\nimport Notification from 'core/notification';\nimport Pending from 'core/pending';\n\n/**\n * Add a new region to place toasts in, taking in a parent element.\n *\n * @param {Element} parent\n */\nexport const addToastRegion = async(parent) => {\n const pendingPromise = new Pending('addToastRegion');\n\n try {\n const {html, js} = await Templates.renderForPromise('core/local/toast/wrapper', {});\n Templates.prependNodeContents(parent, html, js);\n } catch (e) {\n Notification.exception(e);\n }\n\n pendingPromise.resolve();\n};\n\n/**\n * Add a new toast or snackbar notification to the page.\n *\n * @param {String} message\n * @param {Object} configuration\n * @param {String} [configuration.title]\n * @param {String} [configuration.subtitle]\n * @param {Bool} [configuration.autohide=true]\n * @param {Number} [configuration.delay=4000]\n */\nexport const add = async(message, configuration) => {\n const pendingPromise = new Pending('addToastRegion');\n configuration = {\n closeButton: false,\n autohide: true,\n delay: 4000,\n ...configuration,\n };\n\n const templateName = `core/local/toast/message`;\n try {\n const targetNode = await getTargetNode();\n const {html, js} = await Templates.renderForPromise(templateName, {\n message,\n ...configuration\n });\n Templates.prependNodeContents(targetNode, html, js);\n } catch (e) {\n Notification.exception(e);\n }\n\n pendingPromise.resolve();\n};\n\nconst getTargetNode = async() => {\n const regions = document.querySelectorAll('.toast-wrapper');\n\n if (regions.length) {\n return regions[regions.length - 1];\n }\n\n await addToastRegion(document.body, 'fixed-bottom');\n return getTargetNode();\n};\n"],"file":"toast.min.js"} \ No newline at end of file +{"version":3,"sources":["../src/toast.js"],"names":["addToastRegion","parent","pendingPromise","Pending","Templates","renderForPromise","html","js","prependNodeContents","Notification","exception","resolve","add","message","configuration","closeButton","autohide","delay","templateName","getTargetNode","targetNode","regions","document","querySelectorAll","length","body"],"mappings":"mMAuBA,OACA,OACA,O,6jCAOO,GAAMA,CAAAA,CAAc,4CAAG,WAAMC,CAAN,+FACpBC,CADoB,CACH,GAAIC,UAAJ,CAAY,gBAAZ,CADG,yBAIGC,WAAUC,gBAAV,CAA2B,0BAA3B,CAAuD,EAAvD,CAJH,iBAIfC,CAJe,GAIfA,IAJe,CAITC,CAJS,GAITA,EAJS,CAKtBH,UAAUI,mBAAV,CAA8BP,CAA9B,CAAsCK,CAAtC,CAA4CC,CAA5C,EALsB,qDAOtBE,UAAaC,SAAb,OAPsB,QAU1BR,CAAc,CAACS,OAAf,GAV0B,uDAAH,uDAApB,C,mBAyBA,GAAMC,CAAAA,CAAG,4CAAG,WAAMC,CAAN,CAAeC,CAAf,mGACTZ,CADS,CACQ,GAAIC,UAAJ,CAAY,gBAAZ,CADR,CAEfW,CAAa,IACTC,WAAW,GADF,CAETC,QAAQ,GAFC,CAGTC,KAAK,CAAE,GAHE,EAINH,CAJM,CAAb,CAOMI,CATS,oDAWcC,CAAAA,CAAa,EAX3B,QAWLC,CAXK,uBAYchB,WAAUC,gBAAV,CAA2Ba,CAA3B,IACrBL,OAAO,CAAPA,CADqB,EAElBC,CAFkB,EAZd,iBAYJR,CAZI,GAYJA,IAZI,CAYEC,CAZF,GAYEA,EAZF,CAgBXH,UAAUI,mBAAV,CAA8BY,CAA9B,CAA0Cd,CAA1C,CAAgDC,CAAhD,EAhBW,qDAkBXE,UAAaC,SAAb,OAlBW,QAqBfR,CAAc,CAACS,OAAf,GArBe,uDAAH,uDAAT,C,QAwBP,GAAMQ,CAAAA,CAAa,4CAAG,oGACZE,CADY,CACFC,QAAQ,CAACC,gBAAT,CAA0B,gBAA1B,CADE,KAGdF,CAAO,CAACG,MAHM,0CAIPH,CAAO,CAACA,CAAO,CAACG,MAAR,CAAiB,CAAlB,CAJA,wBAOZxB,CAAAA,CAAc,CAACsB,QAAQ,CAACG,IAAV,CAAgB,cAAhB,CAPF,iCAQXN,CAAa,EARF,0CAAH,uD","sourcesContent":["// This file is part of Moodle - http://moodle.org/\n//\n// Moodle is free software: you can redistribute it and/or modify\n// it under the terms of the GNU General Public License as published by\n// the Free Software Foundation, either version 3 of the License, or\n// (at your option) any later version.\n//\n// Moodle is distributed in the hope that it will be useful,\n// but WITHOUT ANY WARRANTY; without even the implied warranty of\n// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n// GNU General Public License for more details.\n//\n// You should have received a copy of the GNU General Public License\n// along with Moodle. If not, see .\n\n/**\n * A system for displaying small snackbar notifications to users which disappear shortly after they are shown.\n *\n * @module core/toast\n * @package core\n * @copyright 2019 Andrew Nicols \n * @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later\n */\nimport Templates from 'core/templates';\nimport Notification from 'core/notification';\nimport Pending from 'core/pending';\n\n/**\n * Add a new region to place toasts in, taking in a parent element.\n *\n * @param {Element} parent\n */\nexport const addToastRegion = async(parent) => {\n const pendingPromise = new Pending('addToastRegion');\n\n try {\n const {html, js} = await Templates.renderForPromise('core/local/toast/wrapper', {});\n Templates.prependNodeContents(parent, html, js);\n } catch (e) {\n Notification.exception(e);\n }\n\n pendingPromise.resolve();\n};\n\n/**\n * Add a new toast or snackbar notification to the page.\n *\n * @param {String} message\n * @param {Object} configuration\n * @param {String} [configuration.title]\n * @param {String} [configuration.subtitle]\n * @param {String} [configuration.type] Optional type of the toast notification ('success', 'info', 'warning' or 'danger')\n * @param {Boolean} [configuration.autohide=true]\n * @param {Boolean} [configuration.closeButton=false]\n * @param {Number} [configuration.delay=4000]\n */\nexport const add = async(message, configuration) => {\n const pendingPromise = new Pending('addToastRegion');\n configuration = {\n closeButton: false,\n autohide: true,\n delay: 4000,\n ...configuration,\n };\n\n const templateName = `core/local/toast/message`;\n try {\n const targetNode = await getTargetNode();\n const {html, js} = await Templates.renderForPromise(templateName, {\n message,\n ...configuration\n });\n Templates.prependNodeContents(targetNode, html, js);\n } catch (e) {\n Notification.exception(e);\n }\n\n pendingPromise.resolve();\n};\n\nconst getTargetNode = async() => {\n const regions = document.querySelectorAll('.toast-wrapper');\n\n if (regions.length) {\n return regions[regions.length - 1];\n }\n\n await addToastRegion(document.body, 'fixed-bottom');\n return getTargetNode();\n};\n"],"file":"toast.min.js"} \ No newline at end of file diff --git a/lib/amd/src/toast.js b/lib/amd/src/toast.js index 7128cc51867..520de7ff84f 100644 --- a/lib/amd/src/toast.js +++ b/lib/amd/src/toast.js @@ -50,7 +50,9 @@ export const addToastRegion = async(parent) => { * @param {Object} configuration * @param {String} [configuration.title] * @param {String} [configuration.subtitle] - * @param {Bool} [configuration.autohide=true] + * @param {String} [configuration.type] Optional type of the toast notification ('success', 'info', 'warning' or 'danger') + * @param {Boolean} [configuration.autohide=true] + * @param {Boolean} [configuration.closeButton=false] * @param {Number} [configuration.delay=4000] */ export const add = async(message, configuration) => { diff --git a/lib/templates/local/toast/message.mustache b/lib/templates/local/toast/message.mustache index ae5cdac848f..af425bcc1af 100644 --- a/lib/templates/local/toast/message.mustache +++ b/lib/templates/local/toast/message.mustache @@ -30,18 +30,27 @@ "data": 200, "autohide": true, "Message": "Cubing negative numbers is tough", + "title": "Negative numbers", + "subtitle": "Cubing", + "type": "info", "closebutton": true } }} -
-
- {{{message}}} - {{#closeButton}} - - {{/closeButton}} -
+
+ {{#title}} +
+ {{{title}}} + {{#subtitle}}{{{subtitle}}}{{/subtitle}} +
+ {{/title}} +
+
{{{message}}}
+ {{#closeButton}} + + {{/closeButton}} +
{{#js}} require(['jquery', 'theme_boost/bootstrap/toast'], function(jQuery) { diff --git a/theme/boost/scss/moodle.scss b/theme/boost/scss/moodle.scss index 6bac7004c31..2d70cb2e07a 100644 --- a/theme/boost/scss/moodle.scss +++ b/theme/boost/scss/moodle.scss @@ -42,3 +42,4 @@ $breadcrumb-divider-rtl: "◀" !default; @import "moodle/layout"; @import "moodle/prefixes"; @import "moodle/atto"; +@import "moodle/toasts"; diff --git a/theme/boost/scss/moodle/toasts.scss b/theme/boost/scss/moodle/toasts.scss new file mode 100644 index 00000000000..0160f1b7487 --- /dev/null +++ b/theme/boost/scss/moodle/toasts.scss @@ -0,0 +1,49 @@ +@mixin toast-icon($content) { + @include fa-icon(); + margin: 2px 5px 0 0; + content: $content; +} + +@mixin toast-variant($color) { + background-color: rgba(theme-color-level($color, $alert-bg-level), .95); + color: theme-color-level($color, $alert-color-level); + .toast-header { + color: theme-color-level($color, $alert-color-level); + } +} + +.toast { + border-radius: $toast-border-radius; + + &.toast-success { + @include toast-variant('success'); + .toast-body:before { + @include toast-icon($fa-var-check-circle); + } + } + + &.toast-danger { + @include toast-variant('danger'); + .toast-body:before { + @include toast-icon($fa-var-times-circle); + } + } + + &.toast-info { + @include toast-variant('info'); + .toast-body:before { + @include toast-icon($fa-var-info-circle); + } + } + + &.toast-warning { + @include toast-variant('warning'); + .toast-body:before { + @include toast-icon($fa-var-exclamation-circle); + } + } + + .close { + color: inherit; + } +} diff --git a/theme/boost/scss/preset/default.scss b/theme/boost/scss/preset/default.scss index 7d9b33dde1e..71c33a8382a 100644 --- a/theme/boost/scss/preset/default.scss +++ b/theme/boost/scss/preset/default.scss @@ -66,6 +66,12 @@ $alert-border-width: 0 !default; $card-group-margin: .25rem; +// Toasts +$toast-color: $white !default; +$toast-background-color: rgba($gray-900, .95) !default; +$toast-header-color: $gray-100 !default; +$toast-header-background-color: rgba($white, .1) !default; + // Custom control size $custom-control-indicator-size: 1.25rem; diff --git a/theme/boost/style/moodle.css b/theme/boost/style/moodle.css index bcc2959cc01..4b080b6a378 100644 --- a/theme/boost/style/moodle.css +++ b/theme/boost/style/moodle.css @@ -6317,7 +6317,8 @@ a.close.disabled { max-width: 350px; overflow: hidden; font-size: 0.875rem; - background-color: rgba(255, 255, 255, 0.85); + color: #fff; + background-color: rgba(33, 37, 41, 0.95); background-clip: padding-box; border: 1px solid rgba(0, 0, 0, 0.1); box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.1); @@ -6337,8 +6338,8 @@ a.close.disabled { display: flex; align-items: center; padding: 0.25rem 0.75rem; - color: #6c757d; - background-color: rgba(255, 255, 255, 0.85); + color: #f8f9fa; + background-color: rgba(255, 255, 255, 0.1); background-clip: padding-box; border-bottom: 1px solid rgba(0, 0, 0, 0.05); } @@ -19694,6 +19695,67 @@ div.editor_atto_content:hover .atto_control { div.editor_atto_toolbar button .icon { color: #495057; } +.toast { + border-radius: 0.25rem; } + .toast.toast-success { + background-color: rgba(215, 228, 214, 0.95); + color: #1c3f1a; } + .toast.toast-success .toast-header { + color: #1c3f1a; } + .toast.toast-success .toast-body:before { + display: inline-block; + font: normal normal normal 14px/1 FontAwesome; + font-size: inherit; + text-rendering: auto; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + margin: 2px 5px 0 0; + content: ""; } + .toast.toast-danger { + background-color: rgba(244, 214, 210, 0.95); + color: #691911; } + .toast.toast-danger .toast-header { + color: #691911; } + .toast.toast-danger .toast-body:before { + display: inline-block; + font: normal normal normal 14px/1 FontAwesome; + font-size: inherit; + text-rendering: auto; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + margin: 2px 5px 0 0; + content: ""; } + .toast.toast-info { + background-color: rgba(204, 230, 234, 0.95); + color: #00434e; } + .toast.toast-info .toast-header { + color: #00434e; } + .toast.toast-info .toast-body:before { + display: inline-block; + font: normal normal normal 14px/1 FontAwesome; + font-size: inherit; + text-rendering: auto; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + margin: 2px 5px 0 0; + content: ""; } + .toast.toast-warning { + background-color: rgba(252, 239, 220, 0.95); + color: #7d5a29; } + .toast.toast-warning .toast-header { + color: #7d5a29; } + .toast.toast-warning .toast-body:before { + display: inline-block; + font: normal normal normal 14px/1 FontAwesome; + font-size: inherit; + text-rendering: auto; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + margin: 2px 5px 0 0; + content: ""; } + .toast .close { + color: inherit; } + body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } diff --git a/theme/classic/scss/preset/default.scss b/theme/classic/scss/preset/default.scss index 8eba96ab278..03e9517a9f4 100644 --- a/theme/classic/scss/preset/default.scss +++ b/theme/classic/scss/preset/default.scss @@ -63,6 +63,12 @@ $alert-border-width: 0 !default; $card-group-margin: .25rem; +// Toasts +$toast-color: $white !default; +$toast-background-color: rgba($gray-900, .95) !default; +$toast-header-color: $gray-100 !default; +$toast-header-background-color: rgba($white, .1) !default; + $input-btn-focus-color: rgba($primary, .75) !default; $input-border-color: $gray-500 !default; diff --git a/theme/classic/style/moodle.css b/theme/classic/style/moodle.css index ec162862ded..2ca5837edb2 100644 --- a/theme/classic/style/moodle.css +++ b/theme/classic/style/moodle.css @@ -6510,7 +6510,8 @@ a.close.disabled { max-width: 350px; overflow: hidden; font-size: 0.875rem; - background-color: rgba(255, 255, 255, 0.85); + color: #fff; + background-color: rgba(33, 37, 41, 0.95); background-clip: padding-box; border: 1px solid rgba(0, 0, 0, 0.1); box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.1); @@ -6531,8 +6532,8 @@ a.close.disabled { display: flex; align-items: center; padding: 0.25rem 0.75rem; - color: #6c757d; - background-color: rgba(255, 255, 255, 0.85); + color: #f8f9fa; + background-color: rgba(255, 255, 255, 0.1); background-clip: padding-box; border-bottom: 1px solid rgba(0, 0, 0, 0.05); } @@ -19877,6 +19878,67 @@ div.editor_atto_content:hover .atto_control { div.editor_atto_toolbar button .icon { color: #495057; } +.toast { + border-radius: 0.25rem; } + .toast.toast-success { + background-color: rgba(215, 228, 214, 0.95); + color: #1c3f1a; } + .toast.toast-success .toast-header { + color: #1c3f1a; } + .toast.toast-success .toast-body:before { + display: inline-block; + font: normal normal normal 14px/1 FontAwesome; + font-size: inherit; + text-rendering: auto; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + margin: 2px 5px 0 0; + content: ""; } + .toast.toast-danger { + background-color: rgba(244, 214, 210, 0.95); + color: #691911; } + .toast.toast-danger .toast-header { + color: #691911; } + .toast.toast-danger .toast-body:before { + display: inline-block; + font: normal normal normal 14px/1 FontAwesome; + font-size: inherit; + text-rendering: auto; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + margin: 2px 5px 0 0; + content: ""; } + .toast.toast-info { + background-color: rgba(204, 230, 234, 0.95); + color: #00434e; } + .toast.toast-info .toast-header { + color: #00434e; } + .toast.toast-info .toast-body:before { + display: inline-block; + font: normal normal normal 14px/1 FontAwesome; + font-size: inherit; + text-rendering: auto; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + margin: 2px 5px 0 0; + content: ""; } + .toast.toast-warning { + background-color: rgba(252, 239, 220, 0.95); + color: #7d5a29; } + .toast.toast-warning .toast-header { + color: #7d5a29; } + .toast.toast-warning .toast-body:before { + display: inline-block; + font: normal normal normal 14px/1 FontAwesome; + font-size: inherit; + text-rendering: auto; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + margin: 2px 5px 0 0; + content: ""; } + .toast .close { + color: inherit; } + body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }