mirror of
https://gerrit.wikimedia.org/r/mediawiki/extensions/DiscussionTools
synced 2024-11-14 11:25:10 +00:00
58c078437d
When there are just two modes, using arrow keys to switch between them is not intuitive. The focus moving from the selector to the body widget afterwards is even less intuitive. Override default TabOptionWidget to allow options to be highlightable (not just immediately selectable), and mark the current mode's tab as disabled instead of selected (but make it look selected). This results in intuitive keyboard interactions (tabbing to the widget highlights the other tab rather than the current one, pressing enter switches to it). Bug: T274423 Change-Id: I9d358d5f301cbf081380ef5d34ccc8c4e146652e
208 lines
4 KiB
Plaintext
208 lines
4 KiB
Plaintext
.ext-discussiontools-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;
|
|
}
|
|
}
|
|
|
|
.ve-ui-targetToolbar {
|
|
display: flex;
|
|
// Allow wrapping when the space is very narrow (mode switcher above toolbar)
|
|
flex-wrap: wrap-reverse;
|
|
|
|
> .oo-ui-windowManager {
|
|
flex-basis: 100%;
|
|
box-shadow: 0 -1px 1px 0 rgba( 0, 0, 0, 0.1 );
|
|
}
|
|
}
|
|
|
|
&-modeTabs {
|
|
box-shadow: none;
|
|
height: 3em;
|
|
text-align: right;
|
|
// Stretch to all available space
|
|
flex-grow: 1;
|
|
// Hide outline that can appear after switching modes via keyboard
|
|
outline: 0;
|
|
|
|
.oo-ui-tabOptionWidget:last-child {
|
|
margin-right: 2px;
|
|
}
|
|
|
|
// When mode tabs are focussed, the only available option uses the same styles as normal focus
|
|
.ext-discussiontools-ui-modeTab.oo-ui-optionWidget-highlighted {
|
|
color: #36c;
|
|
border-radius: 2px;
|
|
box-shadow: inset 0 0 0 2px #36c;
|
|
}
|
|
|
|
// The unavailable option in mode tabs is disabled, to make it un-interactable, but we want it
|
|
// to look as if it was selected
|
|
.ext-discussiontools-ui-modeTab.oo-ui-widget-disabled {
|
|
color: #36c;
|
|
box-shadow: inset 0 -2px 0 0 #36c;
|
|
}
|
|
}
|
|
|
|
&-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;
|
|
}
|
|
|
|
.ext-discussiontools-ui-replyWidget:not( .ext-discussiontools-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;
|
|
}
|
|
|
|
.ext-discussiontools-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 + .ext-discussiontools-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;
|
|
}
|
|
}
|