Skip to content

[4.0][RFC] Remove 3 column layout and introduce fieldWidth attribute as layout hint #31810

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
HLeithner wants to merge 7 commits into from
Closed

[4.0][RFC] Remove 3 column layout and introduce fieldWidth attribute as layout hint #31810

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
8669c1f
Remove 3 column layout introduce fieldWidth attribute
HLeithner Dec 30, 2020
971d921
cs
HLeithner Dec 31, 2020
b62916e
Changed width to static values and set better default values
HLeithner Jan 2, 2021
a20143e
Better sizes, cleanups
HLeithner Jan 2, 2021
52e4ed9
Merge remote-tracking branch 'upstream/4.0-dev' into j4/columns
HLeithner Jan 2, 2021
3b4cb51
Regression fix form ids
HLeithner Jan 3, 2021
e0aa8dc
Update libraries/src/Form/FormField.php
HLeithner Jan 3, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion administrator/components/com_content/tmpl/article/edit.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -155,7 +155,7 @@
<?php echo HTMLHelper::_('uitab.addTab', 'myTab', 'editor', Text::_('COM_CONTENT_SLIDER_EDITOR_CONFIG')); ?>
<fieldset id="fieldset-editor" class="options-form">
<legend><?php echo Text::_('COM_CONTENT_SLIDER_EDITOR_CONFIG'); ?></legend>
<div class="column-count-md-2 column-count-lg-3">
<div>
<?php echo $this->form->renderFieldset('editorConfig'); ?>
</div>
</fieldset>
Expand Down
5 changes: 5 additions & 0 deletions administrator/components/com_modules/forms/advanced.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
name="style"
type="chromestyle"
label="COM_MODULES_FIELD_MODULE_STYLE_LABEL"
fieldWidth="large"
Copy link
Copy Markdown
Member

@infograf768 infograf768 Jan 4, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium would rather fit.

/>

<field
Expand All @@ -16,6 +17,7 @@
label="COM_MODULES_FIELD_MODULE_TAG_LABEL"
default="div"
validate="options"
fieldWidth="medium"
/>

<field
Expand All @@ -25,6 +27,7 @@
first="0"
last="12"
step="1"
fieldWidth="small"
/>

<field
Expand All @@ -33,6 +36,7 @@
label="COM_MODULES_FIELD_HEADER_TAG_LABEL"
default="h3"
validate="options"
fieldWidth="small"
/>

<field
Expand All @@ -41,6 +45,7 @@
label="COM_MODULES_FIELD_HEADER_CLASS_LABEL"
rows="3"
validate="CssIdentifier"
fieldWidth="full"
Copy link
Copy Markdown
Member

@infograf768 infograf768 Jan 4, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium would rather fit. See above.

Screen Shot 2021-01-04 at 08 33 13

Copy link
Copy Markdown
Member Author

@HLeithner HLeithner Jan 4, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The custom field values in modules are only for demonstration, I think they can all be removed.

/>
</fieldset>
</fields>
Expand Down
13 changes: 13 additions & 0 deletions administrator/components/com_modules/forms/module.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
label="JGLOBAL_FIELD_ID_LABEL"
default="0"
readonly="true"
fieldWidth="small"
/>

<field
Expand All @@ -16,6 +17,7 @@
size="40"
maxlength="100"
required="true"
fieldWidth="full"
/>

<field
Expand All @@ -24,6 +26,7 @@
label="COM_MODULES_FIELD_NOTE_LABEL"
maxlength="255"
size="40"
fieldWidth="full"
/>

<field
Expand All @@ -40,6 +43,7 @@
label="COM_MODULES_FIELD_SHOWTITLE_LABEL"
layout="joomla.form.field.radio.switcher"
default="1"
fieldWidth="medium"
>
<option value="0">JHIDE</option>
<option value="1">JSHOW</option>
Expand All @@ -53,6 +57,7 @@
default="1"
size="1"
validate="options"
fieldWidth="full"
>
<option value="1">JPUBLISHED</option>
<option value="0">JUNPUBLISHED</option>
Expand All @@ -67,6 +72,7 @@
translateformat="true"
showtime="true"
size="22"
fieldWidth="medium"
/>

<field
Expand All @@ -77,6 +83,7 @@
translateformat="true"
showtime="true"
size="22"
fieldWidth="medium"
/>

<field
Expand All @@ -85,6 +92,7 @@
label="COM_MODULES_FIELD_CLIENT_ID_LABEL"
readonly="true"
size="1"
fieldWidth="small"
/>

<field
Expand All @@ -94,6 +102,7 @@
default=""
maxlength="50"
client="site"
fieldWidth="medium"
/>

<field
Expand All @@ -109,6 +118,7 @@
type="moduleorder"
label="JFIELD_ORDERING_LABEL"
linked="position"
fieldWidth="medium"
/>

<field
Expand All @@ -118,12 +128,14 @@
buttons="true"
filter="JComponentHelper::filterText"
hide="readmore,pagebreak,module"
fieldWidth="full"
/>

<field
name="language"
type="contentlanguage"
label="JFIELD_LANGUAGE_LABEL"
fieldWidth="medium"
>
<option value="*">JALL</option>
</field>
Expand Down Expand Up @@ -153,6 +165,7 @@
component="com_modules"
section="module"
validate="rules"
fieldWidth="full"
/>
</fieldset>
</form>
13 changes: 13 additions & 0 deletions administrator/components/com_modules/forms/moduleadmin.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
label="JGLOBAL_FIELD_ID_LABEL"
default="0"
readonly="true"
fieldWidth="small"
/>

<field
Expand All @@ -16,6 +17,7 @@
size="40"
maxlength="100"
required="true"
fieldWidth="full"
/>

<field
Expand All @@ -24,6 +26,7 @@
label="COM_MODULES_FIELD_NOTE_LABEL"
maxlength="255"
size="40"
fieldWidth="full"
/>

<field
Expand All @@ -41,6 +44,7 @@
layout="joomla.form.field.radio.switcher"
default="1"
size="1"
fieldWidth="medium"
>
<option value="0">JHIDE</option>
<option value="1">JSHOW</option>
Expand All @@ -54,6 +58,7 @@
default="1"
size="1"
validate="options"
fieldWidth="full"
>
<option value="1">JPUBLISHED</option>
<option value="0">JUNPUBLISHED</option>
Expand All @@ -68,6 +73,7 @@
translateformat="true"
showtime="true"
size="22"
fieldWidth="medium"
/>

<field
Expand All @@ -78,6 +84,7 @@
translateformat="true"
showtime="true"
size="22"
fieldWidth="medium"
/>

<field
Expand All @@ -86,6 +93,7 @@
label="COM_MODULES_FIELD_CLIENT_ID_LABEL"
readonly="true"
size="1"
fieldWidth="small"
/>

<field
Expand All @@ -95,6 +103,7 @@
default=""
maxlength="50"
client="administrator"
fieldWidth="medium"
/>

<field
Expand All @@ -110,6 +119,7 @@
type="moduleorder"
label="JFIELD_ORDERING_LABEL"
linked="position"
fieldWidth="medium"
/>

<field
Expand All @@ -118,6 +128,7 @@
label="JFIELD_LANGUAGE_LABEL"
default="*"
client="administrator"
fieldWidth="medium"
>
<option value="*">JALL</option>
</field>
Expand All @@ -129,6 +140,7 @@
buttons="true"
filter="JComponentHelper::filterText"
hide="readmore,pagebreak,module"
fieldWidth="full"
/>

<field name="assignment" type="hidden" />
Expand All @@ -148,6 +160,7 @@
component="com_modules"
section="module"
validate="rules"
fieldWidth="full"
/>
</fieldset>
</form>
23 changes: 22 additions & 1 deletion administrator/templates/atum/scss/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -226,7 +226,8 @@ $custom-select-bg-size-sm: 75rem;
$custom-select-multiple-padding-y: .3rem;

//input
$input-padding: .6rem 1rem;
$input-padding-y: .6rem;
$input-padding-x: .6rem;
$input-border: solid 1px #c9c9c9;

// Modals
Expand Down Expand Up @@ -266,3 +267,23 @@ $zindex-tooltip: 1070;
$zindex-mobile-bottom: 8000;
$zindex-mobile-toggle: 9999;
$zindex-mobile-menu: 9000;

$form-field-widths: (
xs: (
full: 100%,
large: 100%,
medium: 100%,
small: 100%,
),
sm: (
),
md: (
medium: 710px,
small: 460px,
),
lg: (
),
xl: (
large: 910px,
),
);
16 changes: 15 additions & 1 deletion administrator/templates/atum/scss/blocks/_form.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,6 @@

.controls {
position: relative;
flex: 1;
min-width: 210px;

+ div {
Expand All @@ -54,7 +53,22 @@
.form-vertical & {
flex-direction: column;
}
}

@each $breakpoint, $form-field-widths-local in $form-field-widths {
@each $name, $form-field-width in $form-field-widths-local {
@include media-breakpoint-up($breakpoint, $grid-breakpoints) {
.control-group.#{$name} .controls {
width: min(#{$form-field-width}, 100%);
}

@if $breakpoint != "sm" and $breakpoint != "xs" {
fieldset:not(.form-vertical) .control-group.#{$name} .control-label + .controls {
width: min(calc(#{$form-field-width} - 240px), 100%);
}
}
}
}
}

.control-group {
Expand Down
4 changes: 2 additions & 2 deletions layouts/joomla/edit/params.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -128,7 +128,7 @@
echo '</div>';
}

echo '<div class="column-count-md-2 column-count-lg-3">';
echo '<div>';
}
// Tabs
elseif (!$hasParent)
Expand Down Expand Up @@ -165,7 +165,7 @@
echo '</div>';
}

echo '<div class="column-count-md-2 column-count-lg-3">';
echo '<div>';

$opentab = 2;
}
Expand Down
5 changes: 5 additions & 0 deletions layouts/joomla/form/renderfield.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@
* @var string $label The html code for the label
* @var string $input The input field html code
* @var string $description An optional description to use in a tooltip
* @var string $fieldWidth A hint for the field width
*/

if (!empty($options['showonEnabled']))
Expand All @@ -35,6 +36,10 @@
$id = $name . '-desc';
$hide = empty($options['hiddenLabel']) ? '' : ' sr-only';
$hideDescription = empty($options['hiddenDescription']) ? false : $options['hiddenDescription'];
$fieldWidth = empty($fieldWidth) ? 'full' : $fieldWidth;

$class .= ' ' . $fieldWidth;

?>
<div class="control-group<?php echo $class; ?>"<?php echo $rel; ?>>
<div class="control-label<?php echo $hide; ?>"><?php echo $label; ?></div>
Expand Down
12 changes: 12 additions & 0 deletions libraries/src/Form/Field/CalendarField.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,6 +81,18 @@ class CalendarField extends FormField
*/
protected $layout = 'joomla.form.field.calendar';

/**
* Hint for render width
* Possible values are:
* - full
* - large
* - medium
* - small
*
* @var string
*/
protected $fieldWidth = 'small';

/**
* Method to get certain otherwise inaccessible properties from the form field object.
*
Expand Down
12 changes: 12 additions & 0 deletions libraries/src/Form/Field/EditorField.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -101,6 +101,18 @@ class EditorField extends TextareaField
*/
protected $editorType;

/**
* Hint for render width
* Possible values are:
* - full
* - large
* - medium
* - small
*
* @var string
*/
protected $fieldWidth = 'full';

/**
* Method to get certain otherwise inaccessible properties from the form field object.
*
Expand Down
Loading