mirror of
https://gerrit.wikimedia.org/r/mediawiki/extensions/DiscussionTools
synced 2024-09-23 18:38:18 +00:00
Re-style preview
Bug: T238177 Change-Id: Iabc7cfa7595d60cbd0482340bd159002ee5a6b0e
This commit is contained in:
Ed Sanders
Bartosz Dziewoński
parent
b80f7ee82e
commit
c8564f6ccb
|
|
@ -93,6 +93,7 @@
|
|||
"messages": [
|
||||
"discussiontools-replywidget-anon-warning",
|
||||
"discussiontools-replywidget-cancel",
|
||||
"discussiontools-replywidget-preview",
|
||||
"discussiontools-replywidget-reply",
|
||||
"discussiontools-replywidget-terms-click"
|
||||
],
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@
|
|||
"discussiontools-replywidget-anon-warning": "<strong>You are not logged in.</strong> To receive attribution with your name instead of your IP address, you can [$1 log in] or [$2 create an account].",
|
||||
"discussiontools-replywidget-cancel": "Cancel",
|
||||
"discussiontools-replywidget-loading": "Loading…",
|
||||
"discussiontools-replywidget-preview": "Preview",
|
||||
"discussiontools-replywidget-reply": "Reply",
|
||||
"discussiontools-replywidget-terms-click": "By clicking \"$1\", you agree to the terms of use for this wiki.",
|
||||
"tag-discussiontools": "DiscussionTools edit",
|
||||
|
|
|
|||
|
|
@ -13,6 +13,7 @@
|
|||
"discussiontools-replywidget-anon-warning": "Warning message to be displayed when anonymous user starts writing a new topic or reply.\n* $1 is a URL to log in.\n* $2 is a URL to register an account.",
|
||||
"discussiontools-replywidget-cancel": "Label for the cancel button in the reply widget",
|
||||
"discussiontools-replywidget-loading": "Message shown while the reply widget is loading",
|
||||
"discussiontools-replywidget-preview": "Label for the preview area of the reply widget",
|
||||
"discussiontools-replywidget-reply": "Label for the button to submit a reply in the reply widget",
|
||||
"discussiontools-replywidget-terms-click": "Terms of use for posting a reply.\n\n* $1 is the label of the button to be clicked, e.g. {{msg-mw|discussiontools-replywidget-reply}}.",
|
||||
"tag-discussiontools": "Short description of the discussiontools tag.\n\nShown on lists of changes (history, recentchanges, etc.) for each edit made using DiscussionTools.\n\nSee also:\n* {{msg-mw|Tag-discussiontools-description}}",
|
||||
|
|
|
|||
|
|
@ -30,10 +30,20 @@ function ReplyWidget( comment, config ) {
|
|||
} );
|
||||
this.cancelButton = new OO.ui.ButtonWidget( {
|
||||
flags: [ 'destructive' ],
|
||||
label: mw.msg( 'discussiontools-replywidget-cancel' )
|
||||
label: mw.msg( 'discussiontools-replywidget-cancel' ),
|
||||
framed: false
|
||||
} );
|
||||
|
||||
this.$preview = $( '<div>' ).addClass( 'dt-ui-replyWidget-preview' );
|
||||
this.$preview = $( '<div>' ).addClass( 'dt-ui-replyWidget-preview' ).attr( 'data-label', mw.msg( 'discussiontools-replywidget-preview' ) );
|
||||
this.$actionsWrapper = $( '<div>' ).addClass( 'dt-ui-replyWidget-actionsWrapper' );
|
||||
this.$actions = $( '<div>' ).addClass( 'dt-ui-replyWidget-actions' ).append(
|
||||
this.cancelButton.$element,
|
||||
this.replyButton.$element
|
||||
);
|
||||
this.$terms = $( '<div>' ).addClass( 'dt-ui-replyWidget-terms' ).append(
|
||||
mw.message( 'discussiontools-replywidget-terms-click', mw.msg( 'discussiontools-replywidget-reply' ) ).parseDom()
|
||||
);
|
||||
this.$actionsWrapper.append( this.$terms, this.$actions );
|
||||
|
||||
// Events
|
||||
this.replyButton.connect( this, { click: 'onReplyClick' } );
|
||||
|
|
@ -46,15 +56,9 @@ function ReplyWidget( comment, config ) {
|
|||
|
||||
// Initialization
|
||||
this.$element.addClass( 'dt-ui-replyWidget' ).append(
|
||||
this.$preview,
|
||||
this.replyBodyWidget.$element,
|
||||
$( '<div>' ).addClass( 'dt-ui-replyWidget-actions' ).append(
|
||||
$( '<div>' ).addClass( 'dt-ui-replyWidget-terms' ).append(
|
||||
mw.message( 'discussiontools-replywidget-terms-click', mw.msg( 'discussiontools-replywidget-reply' ) ).parseDom()
|
||||
),
|
||||
this.cancelButton.$element,
|
||||
this.replyButton.$element
|
||||
)
|
||||
this.$preview,
|
||||
this.$actionsWrapper
|
||||
);
|
||||
|
||||
if ( mw.user.isAnon() ) {
|
||||
|
|
@ -62,18 +66,19 @@ function ReplyWidget( comment, config ) {
|
|||
returntoquery: encodeURIComponent( window.location.search ),
|
||||
returnto: mw.config.get( 'wgPageName' )
|
||||
};
|
||||
this.$element.prepend(
|
||||
new OO.ui.MessageWidget( {
|
||||
classes: [ 'dt-ui-replyWidget-anonWarning' ],
|
||||
type: 'warning',
|
||||
label: mw.message( 'discussiontools-replywidget-anon-warning' )
|
||||
.params( [
|
||||
mw.util.getUrl( 'Special:Userlogin', returnTo ),
|
||||
mw.util.getUrl( 'Special:Userlogin/signup', returnTo )
|
||||
] )
|
||||
.parseDom()
|
||||
} ).$element
|
||||
);
|
||||
this.anonWarning = new OO.ui.MessageWidget( {
|
||||
classes: [ 'dt-ui-replyWidget-anonWarning' ],
|
||||
type: 'warning',
|
||||
label: mw.message( 'discussiontools-replywidget-anon-warning' )
|
||||
.params( [
|
||||
mw.util.getUrl( 'Special:Userlogin', returnTo ),
|
||||
mw.util.getUrl( 'Special:Userlogin/signup', returnTo )
|
||||
] )
|
||||
.parseDom()
|
||||
} );
|
||||
this.anonWarning.$element.append( this.$actions );
|
||||
this.$element.append( this.anonWarning.$element, this.$terms );
|
||||
this.$actionsWrapper.detach();
|
||||
}
|
||||
|
||||
// Init preview?
|
||||
|
|
@ -187,18 +192,12 @@ ReplyWidget.prototype.onInputChange = function () {
|
|||
// TODO: Add list context
|
||||
|
||||
parsePromise.then( function ( response ) {
|
||||
var heightAfter,
|
||||
heightBefore = widget.$preview.outerHeight( true );
|
||||
widget.$preview.html( response ? response.parse.text : '' );
|
||||
heightAfter = widget.$preview.outerHeight( true );
|
||||
|
||||
if ( response ) {
|
||||
mw.loader.load( response.parse.modulestyles );
|
||||
mw.loader.load( response.parse.modules );
|
||||
}
|
||||
|
||||
// TODO: IE11?
|
||||
window.scrollBy( 0, heightAfter - heightBefore );
|
||||
} );
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -3,23 +3,58 @@
|
|||
max-width: none;
|
||||
}
|
||||
|
||||
&-actions {
|
||||
margin-top: 0.5em;
|
||||
&-actionsWrapper {
|
||||
display: flex;
|
||||
margin-top: 0.5em;
|
||||
}
|
||||
|
||||
&-actions {
|
||||
margin-left: 3em;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
&-terms {
|
||||
flex-grow: 1;
|
||||
margin-right: 1em;
|
||||
font-size: 0.75em;
|
||||
color: #54595d;
|
||||
}
|
||||
|
||||
&-preview {
|
||||
margin-left: -1.6em;
|
||||
background: #f6f6f6;
|
||||
padding: 0.5em 1em;
|
||||
|
||||
&:empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:before {
|
||||
content: attr( data-label );
|
||||
color: #808080;
|
||||
}
|
||||
|
||||
> .mw-parser-output {
|
||||
margin-left: -1.6em;
|
||||
}
|
||||
}
|
||||
|
||||
.oo-ui-messageWidget {
|
||||
&-anonWarning {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 1em;
|
||||
margin-bottom: 0.5em;
|
||||
|
||||
&.oo-ui-messageWidget-block {
|
||||
padding: 8px 12px;
|
||||
|
||||
> .oo-ui-iconElement-icon {
|
||||
background-position: center center;
|
||||
transform: scale( 1.5 );
|
||||
}
|
||||
}
|
||||
|
||||
> .oo-ui-labelElement-label {
|
||||
flex-grow: 1;
|
||||
margin-left: 2.5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue