NPM Resource Changed ? Pending

User tests: Successful: Unsuccessful:

avatar ciar4n
ciar4n
14 Feb 2021

Pull Request for Issue #25891 .

Summary of Changes

Adds some utility classes that can be applied using the parentclass attribute. These classes set width and layout of fields...

span-1 (16.6% width - single column)
span-2 (33.3% width - single column)
span-3 (50% width - single column)
span-4 (66.6% width - single column)
span-5 (83.3 width - single column)
span-6 (default - full width - single column)

For the option of displaying fields inline / in a row we have...

span-1-inline (16.6% width - inline)
span-2-inline (33.3% width - inline)
span-3-inline (50% width - inline)
span-4-inline (66.6% width - inline)
span-5-inline (83.3% width - inline)

Offset layout

offset-1 (16.6% offset)
offset-2 (33.3% offset)
offset-3 (50% offset)
offset-4 (66.6% offset)
offset-5 (83.3% offset)

Field orientation

stack (stack label on top of field)

See examples below....

image

Testing Instructions

Note: This can be partly tested via browser tools by adding the classes to the control-group div of a field. Otherwise simply edit xml using the class attribute..

<field
	name="article_layout"
	type="componentlayout"
	label="JFIELD_ALT_LAYOUT_LABEL"
	class="form-select"
	useglobal="true"
	extension="com_content"
	view="article"
        parentclass="span-4 stack"
/>

Documentation Changes Required

Yes

avatar ciar4n ciar4n - open - 14 Feb 2021
avatar ciar4n ciar4n - change - 14 Feb 2021
Status New Pending
avatar joomla-cms-bot joomla-cms-bot - change - 14 Feb 2021
Category Administration com_content com_messages com_users Templates (admin) NPM Change Layout Libraries
avatar ciar4n ciar4n - change - 14 Feb 2021
The description was changed
avatar ciar4n ciar4n - edited - 14 Feb 2021
avatar regularlabs
regularlabs - comment - 14 Feb 2021

What is the reason for a new display attribute, when all it does is add it to the class?
Why not just use the ready-to-use class attribute?

So instead of this:

<field
	...
	class="form-select"
	display="span-4 stack"
/>

Simply do:

<field
	...
	class="form-select span-4 stack"
/>
avatar ciar4n
ciar4n - comment - 14 Feb 2021

None really.. I just replicated #31810. Happy to revert the extra attribute and just use the class attribute if considered the best approach here.

avatar brianteeman
brianteeman - comment - 14 Feb 2021

I guess it is more readable as display

avatar regularlabs
regularlabs - comment - 15 Feb 2021

I recommend you remove the display attribute. As it just complicates things. It is an anti-pattern.

In your example these would all do the same. I don't see how that makes things clearer or more readable:

class="form-select"
display="span-4 stack"
class="form-select span-4"
display="stack"
class="form-select stack"
display="span-4"
class="form-select span-4 stack"
display="form-select span-4 stack"
class="span-4 stack"
display="form-select"
class="stack"
display="form-select span-4"
class="span-4"
display="form-select stack"
avatar ciar4n ciar4n - change - 15 Feb 2021
Labels Added: NPM Resource Changed ?
avatar joomla-cms-bot joomla-cms-bot - change - 15 Feb 2021
Category Administration com_content com_messages com_users Templates (admin) NPM Change Layout Libraries Administration com_content com_messages com_users Templates (admin) NPM Change Layout
avatar ciar4n ciar4n - change - 15 Feb 2021
Title
[4.0] Field layout attribute
[4.0] Field layout utility classes
avatar ciar4n ciar4n - edited - 15 Feb 2021
avatar ciar4n ciar4n - change - 15 Feb 2021
The description was changed
avatar ciar4n ciar4n - edited - 15 Feb 2021
avatar ciar4n
ciar4n - comment - 15 Feb 2021

A fair point. I have removed the display attribute in favour of applying these classes via the existing class atribute. Title and description have been updated.

avatar Quy
Quy - comment - 15 Feb 2021

Please add form-grid to Global Configuration to address issue #27672. Thanks.

avatar ciar4n
ciar4n - comment - 15 Feb 2021

Thx @Quy.. global config included with 06fddc9

avatar richard67 richard67 - change - 15 Feb 2021
The description was changed
avatar richard67 richard67 - edited - 15 Feb 2021
avatar wilsonge
wilsonge - comment - 16 Feb 2021

I think this seems logical. Kinda prefer the grid layout to #31810 as well - seems more native/intuitive. I guess what's left is to work through core now and figure out where we do/don't want the column based layouts. Like I still think article options are better with the inline fields overall. Obviously plugins we don't want it etc.

avatar brianteeman
brianteeman - comment - 16 Feb 2021

Like I still think article options are better with the inline fields overall.

Might be better visually but they dont work as shown by multiple issues

avatar wilsonge wilsonge - change - 17 Feb 2021
Status Pending Fixed in Code Base
Closed_Date 0000-00-00 00:00:00 2021-02-17 18:39:23
Closed_By wilsonge
avatar wilsonge wilsonge - close - 17 Feb 2021
avatar wilsonge wilsonge - merge - 17 Feb 2021
avatar wilsonge
wilsonge - comment - 17 Feb 2021

Might be better visually but they dont work as shown by multiple issues

I mean it's unclear to me whether grid will have the same issues as we have in (showon i guess would have the same issues - but things like the calendar form field I'd hope wouldn't)

avatar wilsonge
wilsonge - comment - 17 Feb 2021

Anyhow thanks @ciar4n !

avatar ciar4n
ciar4n - comment - 17 Feb 2021

Thank you @wilsonge ?

avatar richard67
richard67 - comment - 17 Feb 2021

Saved me a lot of work for testing which I've scheduled for next weekend ;-)

avatar micker
micker - comment - 18 Feb 2021

I will try to test if it solved issue when we use subform

avatar ciar4n ciar4n - change - 18 Feb 2021
The description was changed
avatar ciar4n ciar4n - edited - 18 Feb 2021
avatar richard67
richard67 - comment - 21 Feb 2021

Now someone has to do the work and add classes here and there to the fields so that the backend looks nice again. E.g. for Cassiopeia's template style options I'd think the "span-2-inline stack" should be fine.

avatar ciar4n ciar4n - change - 21 Feb 2021
The description was changed
avatar ciar4n ciar4n - edited - 21 Feb 2021
avatar ciar4n ciar4n - change - 21 Feb 2021
The description was changed
avatar ciar4n ciar4n - edited - 21 Feb 2021
avatar infograf768
infograf768 - comment - 6 Mar 2021

@ciar4n
Sorry I am totally lost. Take the menu module edit for example #31810 (comment)

My question is here #31810 (comment)
If I add the new classes to control-group, I can reduce the length of the input or select field, but not at all if I do for each field in the xml. Also these new classes don't seem to be useful to create multiple columns.

I guess I need examples that work.

avatar Magnytu2
Magnytu2 - comment - 6 Mar 2021

@wilsonge @brianteeman @ciar4n @richard67 Hello, you know I hope I appreciate you all. But now I do not agree with what you are doing. The backend of Joomla! 4 has now been in place for a few months. And I believe that it was finally accepted by the users.
You cannot leave the backend primarily displayed on a column. This makes using Joomla very painful. If google translate does its job well, I understand that you are going to put the display back to three columns. I sincerely hope so, with all my heart. You shouldn't make using Joomla even more difficult for new or small users. The media manager is already difficult to use beyond 12 images. Don't make the entire backend difficult to view on a computer screen. Thank you very much for your work.
Cyrille

avatar richard67
richard67 - comment - 6 Mar 2021

I've already mentioned above that there is some work to do now: #32422 (comment)

avatar ciar4n
ciar4n - comment - 6 Mar 2021

This requires #32488

If merged I will create a PR with some examples.

avatar korenevskiy
korenevskiy - comment - 7 Mar 2021
  1. Using the display attribute is confusing, because after the display you want to write block. Yes, in general, and parentclass is also not clear about which parent we are talking about. I suggest using the controlclass attribute, we know that in the full sense of the control is just <div class= "control-group"/>
  2. I suggest making the layout multi-column. But with the observance of several rules. the note field and the spacer field will be full-width.
    Controls located between the note and spacer fields, only between them will be distributed in 2-3 columns. This will allow you not to create a garbage can from the fields. And of course the ability to use the controlclass attribute.
    But having the ability to override the default classes and set your own width in the number of columns.
    .
    In any case, now in Joomla Nightly 1 column mode, by analogy J3, looks better. 1 column is clearer and the most important thing is available. I propose to center 1 column in the middle.
avatar ciar4n ciar4n - change - 8 Mar 2021
The description was changed
avatar ciar4n ciar4n - edited - 8 Mar 2021
avatar micker
micker - comment - 1 Apr 2021

@ciar4n thanks for this function i test it its great but seams doesn't works on fieldset
like
<fieldset name="block_config" label="MOD_DASHBOARD_BLOCK_CONFIG" description="MOD_DASHBOARD_BLOCK_CONFIG_DESC" parentclass="span-4 stack">
any idea ?

avatar ciar4n
ciar4n - comment - 1 Apr 2021

These classes are designed to work on individual fields rather than a collective of fields (fieldset). I guess technically they can be extended to work on the fieldset, presuming there is a need for it?

avatar micker
micker - comment - 1 Apr 2021

Ok it Can be cool to use columns via fieldset more simple to use for basic ux
It Can be very simple 2 columns mode only

avatar korenevskiy
korenevskiy - comment - 4 Apr 2021

These classes are designed to work on individual fields rather than a collective of fields (fieldset). I guess technically they can be extended to work on the fieldset, presuming there is a need for it?

@ciar4n As you can see, user @micker mixed up the parent for this attribute. Therefore, the field attribute should be more precise in the name, for example, ContainerClass, CaseClass, ControlClass.
Thank you for your work.

Add a Comment

Login with GitHub to post a comment