// Check whether the widget is already collapsed or expanded
$collapsedState = $this->getRequest()->getCookie( 'rcfilters-toplinks-collapsed-state' );
// Note that an empty/unset cookie means collapsed, so check for !== 'expanded'
- $collapsedClass = $collapsedState !== 'expanded' ? 'mw-rcfilters-toplinks-collapsed' : '';
+ $topLinksAttributes[ 'class' ] .= $collapsedState !== 'expanded' ?
+ ' mw-recentchanges-toplinks-collapsed' : '';
+
+ $this->getOutput()->enableOOUI();
+ $contentTitle = new OOUI\ButtonWidget( [
+ 'classes' => [ 'mw-recentchanges-toplinks-title' ],
+ 'label' => new OOUI\HtmlSnippet( $this->msg( 'rcfilters-other-review-tools' )->parse() ),
+ 'framed' => false,
+ 'indicator' => $collapsedState !== 'expanded' ? 'down' : 'up',
+ 'flags' => [ 'progressive' ],
+ ] );
- $contentTitle = Html::rawElement( 'div',
- [ 'class' => 'mw-recentchanges-toplinks-title ' . $collapsedClass ],
- $this->msg( 'rcfilters-other-review-tools' )->parse()
- );
$contentWrapper = Html::rawElement( 'div',
array_merge(
- [
- 'class' => 'mw-recentchanges-toplinks-content mw-collapsible-content ' .
- $collapsedClass
- ],
+ [ 'class' => 'mw-recentchanges-toplinks-content mw-collapsible-content' ],
$langAttributes
),
$content
min-height: @rcfilters-wl-head-min-height;
}
- body:not( .mw-rcfilters-ui-initialized ) {
- .mw-recentchanges-toplinks-content.mw-rcfilters-toplinks-collapsed {
- display: none;
+ .mw-recentchanges-toplinks {
+ margin-bottom: 0.5em;
+
+ &:not( .mw-recentchanges-toplinks-collapsed ) {
+ // Same as the legend
+ border: 1px solid #ddd;
}
+ }
- .mw-recentchanges-toplinks-title.mw-rcfilters-toplinks-collapsed {
- // Hide, but keep the placement so we don't jump
- visibility: hidden;
+ body:not( .mw-rcfilters-ui-initialized ) {
+ .mw-recentchanges-toplinks.mw-recentchanges-toplinks-collapsed {
+ // Similar to the watchlist-details hack, we are going to make this float left
+ // while loading to prevent jumpiness in the min-height calculation
+ float: left;
+
+ .mw-recentchanges-toplinks-content {
+ display: none;
+ }
}
.rcfilters-head {
&-top {
display: block;
width: 100%;
-
- .mw-recentchanges-toplinks {
- margin-bottom: 0.5em;
- }
}
}
}
.mw-recentchanges-toplinks {
- padding: 0 0.5em;
-
.oo-ui-widget-enabled.oo-ui-buttonElement.oo-ui-buttonElement-frameless .oo-ui-buttonElement-button {
padding: 0 2.5em 0 0.5em;
}
-
- &-title,
- .mw-collapsible-text {
- // Same as the legend
- font-size: 0.85em;
- }
-
- &:not( .mw-collapsed ) {
- // Same as the legend
- border: 1px solid #ddd;
- }
-
- body:not( .mw-rcfilters-ui-initialized ) & {
- display: none;
- }
}
}
this.$element
.addClass( 'mw-rcfilters-ui-rcTopSectionWidget' )
.append(
- this.$top,
$( '<div>' )
.addClass( 'mw-rcfilters-ui-table' )
.append(
)
);
+ // Hack: For jumpiness reasons, this should be a sibling of -head
+ $( '.rcfilters-head' ).before( this.$top );
+
// Initialize top links position
widget.switchTopLinks( topLinksCookieValue );
};