wikimedia/mediawiki-extensions-DiscussionTools
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/extensions/DiscussionTools synced 2024-12-18 02:51:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge "Allow reply widget header and footer to wrap when it's narrow"

Browse source
This commit is contained in:
jenkins-bot 2020-08-10 22:27:51 +00:00 committed by Gerrit Code Review
parent 4d4722a6ab 74560f216e
commit b681eec8e4
3 changed files with 26 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
modules/dt-ve/CommentTarget.js
View file

@ -70,7 +70,7 @@ CommentTarget.static.importRules.external.blacklist = ve.extendObject(
); );
CommentTarget.prototype.attachToolbar = function () { CommentTarget.prototype.attachToolbar = function () {
this.$element.parent().parent().prepend( this.getToolbar().$element ); this.$element.parent().parent().children().first().prepend( this.getToolbar().$element );
}; };
CommentTarget.prototype.getSurfaceConfig = function ( config ) { CommentTarget.prototype.getSurfaceConfig = function ( config ) {

8
modules/dt.ui.ReplyWidget.js
View file

@ -78,6 +78,12 @@ function ReplyWidget( commentController, comment, pageName, oldId, config ) {
// Initialize to avoid flicker when switching mode // Initialize to avoid flicker when switching mode
this.modeTabSelect.selectItemByData( this.getMode() ); this.modeTabSelect.selectItemByData( this.getMode() );
this.$headerWrapper = $( '<div>' ).addClass( 'dt-ui-replyWidget-headerWrapper' );
this.$headerWrapper.append(
// (visual mode toolbar magically appears here)
this.modeTabSelect.$element
);
this.$preview = $( '<div>' ) this.$preview = $( '<div>' )
.addClass( 'dt-ui-replyWidget-preview' ) .addClass( 'dt-ui-replyWidget-preview' )
.attr( 'data-label', mw.msg( 'discussiontools-replywidget-preview' ) ) .attr( 'data-label', mw.msg( 'discussiontools-replywidget-preview' ) )
@ -125,7 +131,7 @@ function ReplyWidget( commentController, comment, pageName, oldId, config ) {
// Initialization // Initialization
this.$element.addClass( 'dt-ui-replyWidget' ).append( this.$element.addClass( 'dt-ui-replyWidget' ).append(
this.modeTabSelect.$element, this.$headerWrapper,
this.replyBodyWidget.$element, this.replyBodyWidget.$element,
this.$preview, this.$preview,
this.$actionsWrapper this.$actionsWrapper

26
modules/dt.ui.ReplyWidget.less
View file

@ -30,34 +30,44 @@
} }
} }
&-headerWrapper {
display: flex;
// Allow wrapping when the space is very narrow (mode switcher above toolbar)
flex-wrap: wrap-reverse;
}
&-modeTabs { &-modeTabs {
box-shadow: none; box-shadow: none;
height: 3em; height: 3em;
text-align: right; text-align: right;
// Stretch to all available space
flex-grow: 1;
.oo-ui-tabOptionWidget:last-child { .oo-ui-tabOptionWidget:last-child {
margin-right: 2px; margin-right: 2px;
} }
} }
&-ve .dt-ui-replyWidget-modeTabs {
position: absolute;
z-index: 2;
top: 0;
right: 0;
}
&-actionsWrapper { &-actionsWrapper {
display: flex;
margin-top: 0.5em; margin-top: 0.5em;
display: flex;
// Allow wrapping when the space is very narrow (buttons above the footer text)
flex-wrap: wrap-reverse;
// When wrapping, align actions to the right
justify-content: flex-end;
} }
&-actions { &-actions {
// Add spacing before the footer when wrapping
margin-bottom: 0.5em;
margin-left: 3em; margin-left: 3em;
white-space: nowrap; white-space: nowrap;
} }
&-footer { &-footer {
// Preferred width; if there isn't enough space, this wraps under the actions
flex-basis: 20em;
// Stretch to all available space
flex-grow: 1; flex-grow: 1;
font-size: 0.75em; font-size: 0.75em;
color: #54595d; color: #54595d;