Pending

User tests: Successful: Unsuccessful:

avatar ghost
ghost
16 Mar 2013

Tracker item: http://joomlacode.org/gf/project/joomla/tracker/?action=TrackerItemEdit&tracker_item_id=30298

This adds a form field which you can use in the xml files for extensions.
This form field makes it possible (and easy) to create titles, texts, descriptions and even alert boxes.

This makes it very easy to bring order in the settings for extensions, by separating them with useful titles. Or adding descriptions for certain settings (without having to rely on the tooltips). Or adding any other text you want.

The syntax is pretty straight-forward:
<field name="..." type="note" label="..." description="..." class="..." close="..." />

So just to go through the attributes:

  • name: contains the name of the field (like with any other field tag)
  • type: the type of the field, which is: note
  • label: the title of the note (uses JText) (optional if using description)
  • description: the description/text of the note (uses JText) (optional if using label)
  • heading: the type of heading element to use for the label (optional) (default: h4)
  • class: a class name (or class names), like alert (see further for examples) (optional)
  • close: a value of 'true' (for alerts) or the value for the data-dismiss of the bootstrap close icon (optional)

Test instructions:

To test, add these fields to the settings part of an xml file of some extension, like a module. Then go to that extensions settings in the admin and view the result of the note fields.

I have filled the label and description values with Lorem Ipsum text. But in real usage this would of course be actual language stings. So you can replace that with any language strings you wish to test with, like:

label="JFIELD_ALT_LAYOUT_LABEL" description="JFIELD_ALT_MODULE_LAYOUT_DESC"

In below examples I have placed a dummy text field (with label 'Some Other Option') between each note field, so you can see where the note field starts and ends. And can also see the spacing in relation to 'normal' fields.

Title and or Description

So with this note field you can either use the title or the description or both.

<field name="opt10" type="text" label="Some Other Option" />
<field name="note11" type="note" label="Lorem ipsum dolor sit amet" />
<field name="opt11" type="text" label="Some Other Option" />
<field name="note12" type="note" description="Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat." />
<field name="opt12" type="text" label="Some Other Option" />
<field name="note13" type="note" label="Lorem ipsum dolor sit amet" description="Consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat." />
<field name="opt13" type="text" label="Some Other Option" />

note-1

Classes (Alerts)

You can add classes to the note. This way you can make (bootstrap) alerts very easily. But also any other styling via class names you want (like a 'well').

<field name="opt20" type="text" label="Some Other Option" />
<field name="note21" type="note" class="alert" label="Lorem ipsum dolor sit amet" description="Consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat." />
<field name="opt21" type="text" label="Some Other Option" />
<field name="note22" type="note" class="alert alert-info" label="Lorem ipsum dolor sit amet" description="Consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat." />
<field name="opt22" type="text" label="Some Other Option" />
<field name="note23" type="note" class="alert alert-success" label="Lorem ipsum dolor sit amet" description="Consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat." />
<field name="opt23" type="text" label="Some Other Option" />
<field name="note24" type="note" class="alert alert-error" label="Lorem ipsum dolor sit amet" description="Consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat." />
<field name="opt24" type="text" label="Some Other Option" />

note-2

Close button

You can add a close button to the alerts by adding the close="true" attribute to the tag.
If you use a different class than the alert, use the required value for the data-dismiss of the bootstrap close icon instead of the value "true".
But here is the code to test the close icon on an alert.

<field name="opt30" type="text" label="Some Other Option" />
<field name="note31" type="note" class="alert" close="true" label="Lorem ipsum dolor sit amet" description="Consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat." />
<field name="opt31" type="text" label="Some Other Option" />

note-3

avatar nonumber nonumber - open - 16 Mar 2013
avatar nicksavov
nicksavov - comment - 16 Mar 2013

Thanks Peter! This looks great as well! :)

Tracker item added at http://joomlacode.org/gf/project/joomla/tracker/?action=TrackerItemEdit&tracker_item_id=30298

avatar vdespa
vdespa - comment - 16 Mar 2013

+1 for the idea.

1 The div generated by type="note" seems a bit buggy.

note-div

And similar with alerts, <div "="" class="alert">

2 Also maybe it's a good idea to make the width fixed, I guess using class="span12" like the system messages.

image

3 Labels and descriptions are not translated when using language files strings. See getLabel() in field.php

avatar nonumber
nonumber - comment - 16 Mar 2013

1) Fixed

2) I'll leave that to the dev if he wants that. If you want to have the full width, then use:
<field name="..." type="note" class="alert span12" label="..." description="..." />

3) Fixed

avatar vdespa
vdespa - comment - 16 Mar 2013

I've tested 1) & 3) - thumbs up!

For 2) - I agree that adding the span12 class is a fair solution and gives freedom to the developer. BUT it's not working as intended. I am no CSS expert to propose a fix, sorry.

avatar nonumber
nonumber - comment - 16 Mar 2013

Not sure what you mean by: 'it's not working as intended'.
What isn't working? What is intended?

avatar vdespa
vdespa - comment - 16 Mar 2013

I mean adding span12 does not make it 100% of the width. It will stay the same.

avatar nonumber
nonumber - comment - 16 Mar 2013

2) fixed

avatar vdespa
vdespa - comment - 16 Mar 2013

It works, but you have again the thing with <div "="" class="alert alert-info span12">

avatar nonumber
nonumber - comment - 16 Mar 2013

Oops, fixed again :)

avatar vdespa
vdespa - comment - 17 Mar 2013

Looks good. The only glitch I've found is also css related. For span12 the div is getting to near the right margin.

image

avatar nonumber
nonumber - comment - 17 Mar 2013

You probably don't need the span12 now...

avatar neeesn
neeesn - comment - 22 Mar 2013

Tested it in Joomla 3.1 Beta and it worked fine :-).- But in your sample code for close button, it has a 1 in the close="" it should be "true" as you write in text.

avatar johnnyredweb
johnnyredweb - comment - 22 Mar 2013

Tested your patch in Joomla 3.1 Beta 2 as well. It worked fine.

avatar vdespa
vdespa - comment - 22 Mar 2013

@neeesn You are right, I've noticed that too.

avatar nonumber
nonumber - comment - 22 Mar 2013

Ah, yes, sorry. Should indeed be close="true". I corrected that in the example code.

avatar nonumber
nonumber - comment - 22 Mar 2013

So we have at least 2 successful tests now? :)

avatar nicksavov
nicksavov - comment - 22 Mar 2013

Thanks everyone! I'm setting this to Ready for Review. Congrats!

avatar nonumber
nonumber - comment - 22 Mar 2013

Cool :)

avatar dextercowley
dextercowley - comment - 10 Apr 2013

I left a comment in the tracker. I'd like to see an example using language tags. Thanks!

avatar nonumber nonumber - close - 10 Apr 2013
avatar nonumber
nonumber - comment - 10 Apr 2013

@dextercowley: Not sure what you want to see. You can replace the text in the label and description attributes with any language tag you want. They get converted like any form field does with the label/description values.
So you would do something like:

<field name="@note" type="note" class="alert alert-error" label="MY_IMPORTANT_NOTICE" description="MY_IMPORTANT_NOTICE_DESC" />
avatar nonumber nonumber - reopen - 10 Apr 2013
avatar dextercowley
dextercowley - comment - 10 Apr 2013

@Peter: You have the very nice examples at the top of this page. I was hoping to see one of them using language tags instead of literals. Not a big deal, just to show the proper usage. Thanks.

avatar nonumber
nonumber - comment - 10 Apr 2013

Yeah, the Lorem Ipsum was just to give ready copy/paste code for testing.
Having said that, would be cool to have Lorem Ipsum language tags in Joomla, so we can do:
label="JLOREM_1" description="JLOREM_2" :)

avatar nicksavov
nicksavov - comment - 10 Apr 2013

Sounds like another pull request :P

avatar dextercowley
dextercowley - comment - 10 Apr 2013

That sounds good to me. If it's OK with JM, it's fine with me. For now, maybe use these tags?

JFIELD_ALT_COMPONENT_LAYOUT_DESC="Use a different layout from the supplied component view or overrides in the templates."
JFIELD_ALT_LAYOUT_LABEL="Alternative Layout"

Or something similar, just to see it working with language. Thanks!

avatar nonumber
nonumber - comment - 10 Apr 2013

Wow, great minds... Look what I just added to the Testing instructions :)

avatar infograf768
infograf768 - comment - 15 Apr 2013

Tested and commented in tracker.
Could it be possible to make the h4 a parameter?

avatar nonumber
nonumber - comment - 15 Apr 2013

Done.
You can overrule it now via heading="h3" (or whatever you want)

avatar infograf768
infograf768 - comment - 15 Apr 2013

Great. Thanks.

avatar nonumber
nonumber - comment - 15 Apr 2013

PS: The reason I chose for syntax heading="h4" instead of heading="4" is so you can 'misuse' this attribute for other html tags than just headings (h1-h6), like: heading="strong", heading="em" or heading="pre".

avatar dextercowley dextercowley - close - 15 Apr 2013
avatar dextercowley
dextercowley - comment - 15 Apr 2013

Committed in master. Thanks!

avatar nonumber
nonumber - comment - 15 Apr 2013

Woohoo :)

avatar nonumber nonumber - head_ref_deleted - 18 Apr 2013

Add a Comment

Login with GitHub to post a comment