Request to add support for themes

[boess]

I'm a big fan of the module, but not a big fan of the default styling used by noty.

Noty does have support for several themes (http://ned.im/noty/themes.html), I did some tests with it and the current used version supports the defaultTheme, relax and bootstrapTheme. The metroui theme seems to be added in a later version, if updating the noty version is possible this could be included.

The theme can easily be set by passing it in the constructor, just like layout and type are now passed.
It could be handled like the layout and type settings now (with enum values).

I tried to do it myself, and changed the Notification widget and was able to test it. But I do not understand how I should change the related Appronto-Notification-Module and if that is possible.

Hopefully you can add the support for themes.

[pimvdnoll]

Hi Boess thanks for the feedback! will check it out.

in the meantime try this in your css file (code snippet of other project):

ul#noty_topCenter_layout_container {
	width: 50% !important;
	top: 13px !important;
}
ul#noty_topCenter_layout_container li {
  background: #fff !important;
  border: 0 !important;
  width: 100% !important;
  -webkit-border-radius: 0 !important;
  border-radius: 		 0 !important;
  -webkit-box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px !important;
  box-shadow: 		  rgba(0, 0, 0, 0.4) 0px 2px 4px !important;
}

.noty_bar {
  color: #363636;
  border-radius: 		 0;
  -webkit-border-radius: 0;
  border: 1px solid #9e9e9e;
  border-bottom: 6px solid #9e9e9e;
}
.noty_message {
	padding: 10px !important;
}
.noty_text {
    font: 18px/24px ProximaNova_Bold, Arial, Helvetica, sans-serif;
}
.noty_type_success {
	background-color: rgba(140,190,32,0.25);
	border-color: #8CBE20;
}
.noty_type_error {
  	background-color: rgba(230,34,36,0.25);
    border-color: #E62224;
}
.noty_type_warning {
  	background-color: rgba(234,170,55,0.25);
    border-color: #EAAA37;
}
.noty_type_alert {
	background-color: rgba(158,158,158,0.25);
    border-color: #9e9e9e;
}
.noty_type_info {
  	background-color: rgba(0,143,211,0.25);
    border-color: #008FD3;
}

/* Errors below */
ul#noty_bottomCenter_layout_container
{
	bottom: 9px !important;
	width: 50% !important;
}

ul#noty_bottomCenter_layout_container li
{
  background: #fff !important;
  border: 0 !important;
  width: 100% !important;
  border-radius: 		 0 !important;
  -webkit-border-radius: 0 !important;
  -webkit-box-shadow: rgba(0, 0, 0, 0.55) 0px 0px 17px 0px !important;
  box-shadow: 		  rgba(0, 0, 0, 0.55) 0px 0px 17px 0px !important;
}

[boess]

Hoi Pim, bedankt voor de .css! Dit werkt prima voor wat wijzigingen. groetjes, Stefan 2017-01-18 20:17 GMT+01:00 Pim van der Noll <[email protected]>:

…

Hi Boess thanks for the feedback! will check it out. in the meantime try this in your css file (code snippet of other project): ul#noty_topCenter_layout_container { width: 50% !important; top: 13px !important; } ul#noty_topCenter_layout_container li { background: #fff !important; border: 0 !important; width: 100% !important; -webkit-border-radius: 0 !important; border-radius: 0 !important; -webkit-box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px !important; box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px !important; } .noty_bar { color: #363636; border-radius: 0; -webkit-border-radius: 0; border: 1px solid #9e9e9e; border-bottom: 6px solid #9e9e9e; } .noty_message { padding: 10px !important; } .noty_text { font: 18px/24px ProximaNova_Bold, Arial, Helvetica, sans-serif; } .noty_type_success { background-color: rgba(140,190,32,0.25); border-color: #8CBE20; } .noty_type_error { background-color: rgba(230,34,36,0.25); border-color: #E62224; } .noty_type_warning { background-color: rgba(234,170,55,0.25); border-color: #EAAA37; } .noty_type_alert { background-color: rgba(158,158,158,0.25); border-color: #9e9e9e; } .noty_type_info { background-color: rgba(0,143,211,0.25); border-color: #008FD3; } /* Errors below */ ul#noty_bottomCenter_layout_container { bottom: 9px !important; width: 50% !important; } ul#noty_bottomCenter_layout_container li { background: #fff !important; border: 0 !important; width: 100% !important; border-radius: 0 !important; -webkit-border-radius: 0 !important; -webkit-box-shadow: rgba(0, 0, 0, 0.55) 0px 0px 17px 0px !important; box-shadow: rgba(0, 0, 0, 0.55) 0px 0px 17px 0px !important; } — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#1 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AHOBfHgx6xe557tlfi_Yh-vcagFODbarks5rTmUygaJpZM4LnGyx> .

[pimvdnoll]

mooi! had je getest door het widget aan te passen met de nieuwe versie van noty of gewoon ff buiten Mendix app testje gedaan?
als ik de nieuwe noty wil gebruiken bokt mijn widget over Jquery ellende

[boess]

Ik had de widget aangepast om de theme mee te geven in de "constructor" van Noty, dus in de notification.js in dit stukje --> this._notyNode = noty({ text: text, layout: layout, type: type, theme: theme, timeout: timeout, callback: { onClose: lang.hitch(this, this._onClose), onCloseClick: lang.hitch(this, this._onCloseClick) } }); Toen ik dit testte met verschillende waarden voor theme (defaultTheme, relax, bootstrapTheme en metroui), viel me op dat de laatste niet werkte. Als ik op de github van noty keek zag ik ook dat deze pas in een latere noty versie toegevoegd was. Je kan er ook voor kiezen om de noty versie niet up te daten, dan werken de eerste 3 thema's wel. Is ieder geval meer keuze al dan nu :-) 2017-01-24 14:58 GMT+01:00 Pim van der Noll <[email protected]>:

…

mooi! had je getest door het widget aan te passen met de nieuwe versie van noty of gewoon ff buiten Mendix app testje gedaan? als ik de nieuwe noty wil gebruiken bokt mijn widget over Jquery ellende — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#1 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AHOBfHuIXGRWY2zKCvlPV4ZpQV0Bj6sDks5rVgOjgaJpZM4LnGyx> .