'CloneDatabase' => __DIR__ . '/includes/db/CloneDatabase.php',
'CodeCleanerGlobalsPass' => __DIR__ . '/maintenance/CodeCleanerGlobalsPass.inc',
'CodeContentHandler' => __DIR__ . '/includes/content/CodeContentHandler.php',
+ 'CollapsibleFieldsetLayout' => __DIR__ . '/includes/htmlform/CollapsibleFieldsetLayout.php',
'Collation' => __DIR__ . '/includes/collation/Collation.php',
'CollationCkb' => __DIR__ . '/includes/collation/CollationCkb.php',
'CommandLineInc' => __DIR__ . '/maintenance/commandLine.inc',
--- /dev/null
+<?php
+
+class CollapsibleFieldsetLayout extends OOUI\FieldsetLayout {
+ public function __construct( array $config = [] ) {
+ parent::__construct( $config );
+
+ $this->addClasses( [ 'mw-collapsible' ] );
+ if ( isset( $config[ 'collapsed' ] ) && $config[ 'collapsed' ] ) {
+ $this->addClasses( [ 'mw-collapsed' ] );
+ }
+ $this->header->addClasses( [ 'mw-collapsible-toggle' ] );
+ $this->group->addClasses( [ 'mw-collapsible-content' ] );
+
+ $this->header->appendContent(
+ new OOUI\IconWidget( [
+ 'icon' => 'expand',
+ 'label' => wfMessage( 'collapsible-expand' )->text(),
+ ] ),
+ new OOUI\IconWidget( [
+ 'icon' => 'collapse',
+ 'label' => wfMessage( 'collapsible-collapse' )->text(),
+ ] )
+ );
+
+ $this->header->setAttributes( [
+ 'role' => 'button',
+ ] );
+ }
+}
public function wrapForm( $html ) {
if ( is_string( $this->mWrapperLegend ) ) {
- $classes = $this->mCollapsible ? [ 'mw-collapsible' ] : [];
- if ( $this->mCollapsed ) {
- $classes[] = 'mw-collapsed';
- }
- $content = new OOUI\FieldsetLayout( [
+ $phpClass = $this->mCollapsible ? CollapsibleFieldsetLayout::class : OOUI\FieldsetLayout::class;
+ $content = new $phpClass( [
'label' => $this->mWrapperLegend,
- 'classes' => $classes,
- 'group' => new OOUI\StackLayout( [
- 'expanded' => false,
- 'classes' => [ 'mw-collapsible-content' ],
- ] ),
+ 'collapsed' => $this->mCollapsed,
'items' => [
new OOUI\Widget( [
'content' => new OOUI\HtmlSnippet( $html )
}
}
-fieldset.mw-collapsible .mw-collapsible-toggle {
- position: absolute;
- right: 0;
- z-index: 1;
-}
-
// special treatment for list items to match above
// !important necessary to override overly-specific float left and right above.
ol.mw-collapsible:not( @{exclude} ):before,
@ooui-font-size-browser: 16; // assumed browser default of `16px`
@ooui-font-size-base: 0.875em; // equals `14px` at browser default of `16px`
+@ooui-spacing-small: 8 / @ooui-font-size-browser / @ooui-font-size-base; // equals `0.57142857em`≈`8px`
@ooui-spacing-medium: 12 / @ooui-font-size-browser / @ooui-font-size-base; // equals `0.8571429em`≈`12px`
@ooui-spacing-large: 16 / @ooui-font-size-browser / @ooui-font-size-base; // equals `1.1428571em`≈`16px`
@ooui-padding-horizontal: 12 / @ooui-font-size-browser / @ooui-font-size-base;
// Reducing `padding-top`, as the heading's `line-height` provides similar distance.
padding: @ooui-spacing-medium @ooui-spacing-large @ooui-spacing-large;
+ .client-js & .oo-ui-fieldsetLayout.mw-collapsible .oo-ui-fieldsetLayout-header {
+ // Push legend up when JS is on, to increase clickable area.
+ margin-top: -@ooui-spacing-small;
+ margin-bottom: @ooui-spacing-small;
+ // Add `padding-top` to make up for negative `margin` above.
+ padding: @ooui-spacing-small;
+ // Make space for toggle icon defined below.
+ padding-left: 24 / @ooui-font-size-browser / @ooui-font-size-base;
+ }
+
// Trigger only when collapsible & JS is available via `.mw-collapsed`.
.client-js & .oo-ui-fieldsetLayout.mw-collapsed .oo-ui-fieldsetLayout-header {
+ min-height: 30px;
// Negative margin to match the reduced distance on the top caused by the previous rule.
- margin-bottom: -( @ooui-spacing-large - @ooui-spacing-medium );
+ margin-bottom: -@ooui-spacing-medium;
.oo-ui-labelElement-label {
margin-bottom: 0;
.mw-htmlform-ooui .mw-htmlform-submit-buttons {
margin-top: @ooui-spacing-medium;
}
+
+.oo-ui-fieldsetLayout.mw-collapsible {
+ .oo-ui-fieldsetLayout-header {
+ max-width: none;
+ }
+
+ .mw-collapsible-toggle .oo-ui-iconElement-icon {
+ position: absolute;
+ top: 0;
+ left: 0;
+ // Special case: Reduce to `16px` icon size here.
+ min-width: 16px;
+ width: 16 / @ooui-font-size-browser / @ooui-font-size-base;
+ margin-right: 0.5em;
+ }
+
+ // When expanded: only 'collapse' icon visible
+ .mw-collapsible-toggle .oo-ui-icon-expand {
+ display: none;
+ }
+
+ // When collapsed: only 'expand' icon visible
+ &.mw-collapsed {
+ .mw-collapsible-toggle .oo-ui-icon-expand {
+ display: inline-block;
+ }
+
+ .mw-collapsible-toggle .oo-ui-icon-collapse {
+ display: none;
+ }
+ }
+}