0.15 Notify with HTML

snowdrop

@akaryatrh Yes, setting the Notify plugin inside the quasar.conf.js is not sufficient. I need to declare import { Notify } from 'quasar' in my vue file to make it work.

Akaryatrh

If not already done, you guys should open issues on https://github.com/quasarframework/quasar/issues

MusicForMellons

Ok, just did.

rstoenescu

Installation. Required. http://quasar-framework.org/components/notify.html#Installation
Usage: http://quasar-framework.org/components/notify.html#Basic-Usage

Now, I see following complaints:

Not supporting HTML markup. Yes, because Quasar needs to make your app be protected from Javascript injection.
You probably want HTML markup because you need multiple lines. First, according to Material Guidelines, the notification needs to be short. As short as possible. It’s not a full-blown alert message. Having a notification popping up and covering half of the screen defeats its purpose (and it’s also bad UI). Use a Dialog for these cases. Notifications are a “soft” way to inform user something has happened. Add a button to it for “More Info” if you have to. Or use the details prop, but be short with it.
"I added Notify to quasar.conf.js, but I still need to import it from Quasar". This applies to the usage outside of Vue files. And you need to import it where you use it in this case. How else would you reference the Notify object??? You may ask yourself: but why do I also need to add it to quasar.conf then? You need to understand that Notify is a Quasar Plugin, so it needs to do some initialisation before it can be used. This is why you need it in quasar.conf.js.
this.$q.notify does not work in a Vue file. I still need to import it from Quasar??". Where are you using this.$q.notify? Inside the Vue component definition, or outside of the export default {...}. Notice the usage of this!! It has meaning inside of the Vue component definition or in your vue template, not outside of it. If you need it before export default {...} then yes, you need the “outside of a Vue file” usage, because your scope is not the Vue component scope…

MusicForMellons

Thanks for explanation. Must have messed up something (don’t know what exactly)…, since now it works.

I used to use rgba notation for the background (and have opacity feature this way), it seems not possible to set color using rgba notation with notify, correct (and why not…)?

benoitranque

Notify only supports colors from the quasar color palette

MusicForMellons

I noticed, and I miss rgba dearly.

jeffatpf

I used the HTML property within Alert to bold the important part of the message, ala “Do you really want to delete <b>whatever</b>?”

Nicholas

@rstoenescu thanks for the feedback. But dialog doesn’t support HTML either anymore.
And as mentioned above, I need to use HTML in alerts for emphasis.

rstoenescu

You can always add colors to the palette. http://quasar-framework.org/components/color-palette.html#Adding-Your-Own-Colors

mds1

To echo @jeffatef and @Nicholas, I also used the HTML property for emphasis on certain parts of the message. Although I also found it useful for adding hyperlinks within the notification text (I could add a button for this, but I believe a link would provide a better UI in my case). I understand the concerns about Javascript injection, but are there currently any alternative ways to implement these two capabilities into a notification?

mds1

To @jeffatef, @Nicholas, and anyone else looking to add emphasis to their alerts, here’s the workaround I’m using. Basically just modifying the DOM directly after the notification is created. I’m still fairly new to JS so there might be some downside here (aside from injection) that I’m missing, but it seems to work well.

function createAlert(html, type) {
  // html: string, valid HTML to be used as the alert's text
  // type: string, choose 'positive', 'negative', 'warning', 'info'

  const alert = Notify.create({
    message: '', // text is updated later
    timeout: 0, // forces user to dismiss
    type: type,
    actions: [
      {
        label: 'Dismiss',
      }
    ]
  })

  // use setTimeout(function, 0) to ensure element is created by the time we add HTML
  setTimeout(function () {
    // the div containing the text has no class or id, so we first get its parent
    // based on its classes
    const el = document.getElementsByClassName('q-alert-content col self-center')
    // then we update the html of the most recently added notification
    el[el.length - 1].firstChild.innerHTML = html
  }, 0);

  return alert
}

Nicholas

@mds1 Yikes! That’s certainly a nasty solution haha. I’ve decided to hold back from upgrading to 0.15 until these features and/or proper workarounds are documented (plus other bug fixes )

benoitranque

For the reasons mentioned above, html messages are not coming back. Maybe we’ll add a classes prop so you can further customize text, but that is about it. No more html as strings

edsongaspar

Sorry for comments a 5 months discussions. My suggestion or advice is to use Markdown for customized texts. Can anyone points me if it is possible to do Javascript injection on Markdown using this approach. Can I help to implement it?

antonio

I think that is up to developer the choose to use html or not… in some case is very useful!

No More Posting New Topics!

0.15 Notify with HTML