mirror of
https://gerrit.wikimedia.org/r/mediawiki/extensions/DiscussionTools
synced 2024-09-29 05:16:27 +00:00
d76143bc08
1. Extend the JS modifier to allow adding top-level comments (that is, replies to headings). PHP modifier doesn't do this because we'll save the changes using paction=addtopic instead. 2. Subclass CommentController to allow adding a new heading and a top-level comment underneath it at the same time. 3. A lot of ugly code in ReplyWidget to customize the interface for this case. Much of it should probably be moved to CommentController/NewTopicController. Bug: T267595 Change-Id: I9c707bb7f7aae1b92c72fb4dee436490f8c8409b
187 lines
3.2 KiB
Plaintext
187 lines
3.2 KiB
Plaintext
.dt-ui-replyWidget {
|
|
margin-bottom: 1em;
|
|
position: relative;
|
|
clear: both;
|
|
|
|
> .oo-ui-textInputWidget {
|
|
max-width: none;
|
|
|
|
.oo-ui-inputWidget-input {
|
|
line-height: 1.5em;
|
|
overflow-y: hidden;
|
|
}
|
|
}
|
|
|
|
.ve-ui-targetToolbar > .oo-ui-toolbar-bar {
|
|
background: none;
|
|
box-shadow: none;
|
|
border: 0;
|
|
|
|
> .oo-ui-toolbar-actions {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.oo-ui-toolbar-position-top .ve-ui-toolbarDialog-position-above {
|
|
border-top: 0;
|
|
|
|
.oo-ui-window-body {
|
|
padding-left: 0;
|
|
padding-right: 0;
|
|
}
|
|
}
|
|
|
|
&-headerWrapper {
|
|
display: flex;
|
|
// Allow wrapping when the space is very narrow (mode switcher above toolbar)
|
|
flex-wrap: wrap-reverse;
|
|
}
|
|
|
|
&-modeTabs {
|
|
box-shadow: none;
|
|
height: 3em;
|
|
text-align: right;
|
|
// Stretch to all available space
|
|
flex-grow: 1;
|
|
|
|
.oo-ui-tabOptionWidget:last-child {
|
|
margin-right: 2px;
|
|
}
|
|
}
|
|
|
|
&-actionsWrapper {
|
|
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 {
|
|
// Add spacing before the footer when wrapping
|
|
margin-bottom: 0.5em;
|
|
margin-left: 3em;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
&-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;
|
|
font-size: 0.75em;
|
|
color: #54595d;
|
|
|
|
> p {
|
|
&:first-child {
|
|
margin-top: 0;
|
|
}
|
|
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
&-preview {
|
|
background: #f6f6f6;
|
|
padding: 0.5em 1em;
|
|
|
|
&:empty {
|
|
height: 0;
|
|
padding: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
&:before {
|
|
content: attr( data-label );
|
|
color: #808080;
|
|
}
|
|
|
|
.dt-ui-replyWidget:not( .dt-ui-replyWidget-newTopic ) & > .mw-parser-output {
|
|
margin-left: -1.6em;
|
|
}
|
|
|
|
> .mw-parser-output > h2:first-child {
|
|
// Remove excess spacing above section title for preview
|
|
padding-top: 0;
|
|
margin-top: 0.25em;
|
|
}
|
|
}
|
|
|
|
&-anonWarning,
|
|
&-advanced {
|
|
&.oo-ui-messageWidget-block {
|
|
padding: 8px 12px;
|
|
}
|
|
}
|
|
|
|
&-captcha {
|
|
margin-top: 0.5em;
|
|
}
|
|
|
|
&-error {
|
|
margin-bottom: 0.5em;
|
|
}
|
|
|
|
&-anonWarning {
|
|
margin-bottom: 0.5em;
|
|
display: flex;
|
|
align-items: center;
|
|
// Allow wrapping when the space is very narrow (buttons below the warning text)
|
|
flex-wrap: wrap;
|
|
// When wrapping, align actions to the right
|
|
justify-content: flex-end;
|
|
|
|
&.oo-ui-messageWidget-block {
|
|
> .oo-ui-iconElement-icon {
|
|
background-position: center center;
|
|
transform: scale( 1.5 );
|
|
transform-origin: 0 center;
|
|
left: 1em;
|
|
}
|
|
}
|
|
|
|
> .oo-ui-labelElement-label {
|
|
flex-grow: 1;
|
|
flex-basis: 20em;
|
|
margin-left: 3em;
|
|
}
|
|
|
|
.dt-ui-replyWidget-actions {
|
|
// Fix alignment within message widget
|
|
margin-top: 0.5em;
|
|
}
|
|
}
|
|
|
|
&-editSummaryField.oo-ui-labelElement {
|
|
margin-top: 0;
|
|
}
|
|
|
|
&-editSummary {
|
|
max-width: none;
|
|
}
|
|
|
|
&-advanced.oo-ui-element-hidden + .dt-ui-replyWidget-anonWarning {
|
|
// Removing spacing between message widgets when the first is hidden
|
|
margin-top: 0;
|
|
}
|
|
|
|
&-advancedToggle {
|
|
font-size: 0.75em;
|
|
|
|
.oo-ui-indicatorElement-indicator {
|
|
min-width: auto;
|
|
}
|
|
|
|
.oo-ui-buttonElement-button {
|
|
min-height: auto;
|
|
}
|
|
}
|
|
|
|
&-checkboxes {
|
|
float: right;
|
|
}
|
|
}
|