Padding and border around new topic tool

Bug: T269157
Change-Id: I4f56f9dc0eca71ea4ed452df49e861aac47e3de8
This commit is contained in:
Ed Sanders 2021-01-13 20:54:59 +00:00
parent 4269d65868
commit e16a519a05
2 changed files with 18 additions and 5 deletions

View file

@ -5,7 +5,12 @@ var
function NewTopicController( $pageContainer, $replyLink ) {
var comment;
this.$container = $( '<div>' ).addClass( 'dt-ui-newTopic' );
this.container = new OO.ui.PanelLayout( {
classes: [ 'dt-ui-newTopic' ],
expanded: false,
padded: true,
framed: true
} );
this.sectionTitle = new OO.ui.TextInputWidget( {
// Wrap in a <h2> element to inherit heading font styles
@ -19,7 +24,7 @@ function NewTopicController( $pageContainer, $replyLink ) {
} );
this.prevTitleText = '';
this.$container.append( this.sectionTitleField.$element );
this.container.$element.append( this.sectionTitleField.$element );
// HeadingItem representing the heading being added, so that we can pretend we're replying to it
comment = new HeadingItem( {
@ -63,7 +68,7 @@ NewTopicController.prototype.getTranscludedFromSource = function () {
NewTopicController.prototype.setup = function ( mode ) {
var rootScrollable = OO.ui.Element.static.getRootScrollableElement( document.body );
this.$pageContainer.append( this.$container );
this.$pageContainer.append( this.container.$element );
NewTopicController.super.prototype.setup.call( this, mode );
// The section title field is added to the page immediately, we can scroll to the bottom and focus
@ -105,7 +110,7 @@ NewTopicController.prototype.teardown = function ( abandoned ) {
NewTopicController.super.prototype.teardown.call( this, abandoned );
this.replyWidget.storage.remove( this.replyWidget.storagePrefix + '/title' );
this.$container.detach();
this.container.$element.detach();
};
/**

View file

@ -1,11 +1,19 @@
.dt-ui-newTopic {
clear: both;
&-sectionTitle {
&.oo-ui-panelLayout-padded.oo-ui-panelLayout-framed {
margin-top: 2em;
}
h2&-sectionTitle {
max-width: none;
// This element is a <h2> - override unwanted heading styles
padding: 0;
border: 0;
margin-top: 4px;
}
.dt-ui-replyWidget {
margin-bottom: 0;
}