wikimedia/mediawiki-extensions-VisualEditor
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/extensions/VisualEditor synced 2024-11-16 10:59:56 +00:00
Code Issues Packages Projects Releases Wiki Activity
mediawiki-extensions-Visual.../modules/ve-mw/ui/styles/dialogs/ve.ui.MWTransclusionDialog.css

194 lines
6 KiB
CSS
Raw Normal View History

Split out omnibus CSS files Change-Id: I195a0e4091cf2d003c325e9c653dd634e7096779
2014-03-18 20:52:39 +00:00
/*!
* VisualEditor MediaWiki UserInterface MWTransclusionDialog styles.
*
doc: Bump copyright year for 2020 Change-Id: I30539877543dc2a57bd1428a00d10ac46d8fc294
2020-01-08 17:13:04 +00:00
* @copyright 2011-2020 VisualEditor Team and others; see AUTHORS.txt
Split out omnibus CSS files Change-Id: I195a0e4091cf2d003c325e9c653dd634e7096779
2014-03-18 20:52:39 +00:00
* @license The MIT License (MIT); see LICENSE.txt
*/
Sprinke some child selectors around in MWTransclusionDialog.css Indiscriminately styling all .oo-ui-widget elements with a descendant selector is very evil, use a child selector instead. The use of a descendant selector broke inline dropdowns. Change-Id: I25c5007ef1ffab9e59c46c3b11270b8f77610327
2014-10-28 00:38:20 +00:00
.ve-ui-mwTransclusionDialog-addTemplateFieldset > .oo-ui-widget {
Split out omnibus CSS files Change-Id: I195a0e4091cf2d003c325e9c653dd634e7096779
2014-03-18 20:52:39 +00:00
display: inline-block;
}
Sprinke some child selectors around in MWTransclusionDialog.css Indiscriminately styling all .oo-ui-widget elements with a descendant selector is very evil, use a child selector instead. The use of a descendant selector broke inline dropdowns. Change-Id: I25c5007ef1ffab9e59c46c3b11270b8f77610327
2014-10-28 00:38:20 +00:00
.ve-ui-mwTransclusionDialog-addTemplateFieldset > .oo-ui-buttonElement-framed {
Split out omnibus CSS files Change-Id: I195a0e4091cf2d003c325e9c653dd634e7096779
2014-03-18 20:52:39 +00:00
margin-left: 0.5em;
}
Use new MediaWiki core TitleInputWidget All link input/title input functionality has been moved to core, so we can replace the link widget, redirect widget and template search widget with it. Depends on Ib463e60cad96 in MediaWiki core. Change-Id: I452f3b86ead403307072cf904f0553c9771f4300
2015-06-15 10:25:44 +00:00
.ve-ui-mwTransclusionDialog-addTemplateFieldset .mw-widget-titleInputWidget {
MWTransclusionDialog: remove extra padding from framesets Bug: T191234 Change-Id: I6cfec45607f2dd428347879c134dbe286397f8b6
2018-04-05 15:56:17 +00:00
min-width: 10em;
Make the Add template button not wrap to the next line By default, MWTitleInputWidgets are now 30em wide, but this doesn't work in the transclusion dialog where we want to put the "Add template" button after an MWTitleInputWidget and have it not wrap to the next line. So make the MWTitleInputWidget on the add template page 20em wide instead (this is what they all were before the default was changed to 30em). Change-Id: I2f33a87427657f4e27939c401436c4ce6441208c
2014-04-16 23:24:45 +00:00
}
Split out omnibus CSS files Change-Id: I195a0e4091cf2d003c325e9c653dd634e7096779
2014-03-18 20:52:39 +00:00
.ve-ui-mwTransclusionDialog-addParameterFieldset .ve-ui-mwParameterSearchWidget {
position: relative;
overflow: hidden;
margin-bottom: 1em;
}
.ve-ui-mwTransclusionDialog-addParameterFieldset .oo-ui-searchWidget-results {
position: relative;
padding-bottom: 5em;
}
.ve-ui-mwTransclusionDialog-removeButton {
position: absolute;
TransclusionDialog: Fix removeButton position Change-Id: I886c64f51fe54483d24c6cfa925b698db7bf4e7e
2018-12-11 23:48:30 +00:00
top: 0.85714286em; /* Equals ≈`12px` */
Split out omnibus CSS files Change-Id: I195a0e4091cf2d003c325e9c653dd634e7096779
2014-03-18 20:52:39 +00:00
right: 1.5em;
}
Use ActionFieldLayout in the template placeholder page Instead of manually attaching a button to the input widget, use the newly available ActionFieldLayout. Change-Id: I3a39f476e6115f97f11ea49fac5bfcd93bd8f841
2015-01-27 00:47:59 +00:00
.ve-ui-mwTransclusionDialog-addButton {
white-space: nowrap;
}
Invert template search result highlighting Bug: T275048 Change-Id: I50fc7407b4357e2cea9d5421d0de46a81d39c69d
2021-05-10 12:56:03 +00:00
.ve-ui-mwTransclusionDialog-enhancedSearch .mw-widget-titleWidget-menu-withDescriptions .mw-widget-titleOptionWidget .oo-ui-labelElement-label {
font-weight: bold;
}
.ve-ui-mwTransclusionDialog-enhancedSearch .mw-widget-titleWidget-menu-withDescriptions .mw-widget-titleOptionWidget .oo-ui-labelElement-label .oo-ui-labelElement-label-highlight {
font-weight: normal;
}
Show redirects as part of description in template search These are the most minimal (and therefor most stable, hopefully) hacks I could come up with so far. Bug: T274903 Change-Id: I28ba414dd34aad756e29400eb656f0942291a923
2021-05-19 16:51:48 +00:00
.ve-ui-mwTemplateTitleInputWidget-redirectedfrom {
font-style: italic;
}
More robust debug container for new template editor sitebar Before, the new sidebar was hacked in a place where it confused the BookletLayout logic. This became visible when using the up/down buttons to move elements in the sidebar. This new container wraps the new and the old sidebar. It also uses a temporary color to make it easier to see where one ends and the other starts. Bug: T274544 Change-Id: I4e5b40b1d1556886fc85cff9e926a02e4888f032
2021-07-13 07:07:59 +00:00
.ve-ui-mwTemplateDialog-pocSidebar-debug-container {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 2.5em;
overflow: auto;
}
.ve-ui-mwTemplateDialog-pocSidebar-debug-container > .oo-ui-outlineSelectWidget {
height: auto;
}
.ve-ui-mwTemplateDialog-pocSidebar-debug-container > .ve-ui-mwTransclusionOutlineContainerWidget {
background-color: rgba( 0%, 100%, 0%, 0.1 );
outline: 1px solid #0f0;
}
Transclusion dialog: Add VE specific rules from OOjs UI Adding VE specific rules from OOjs UI in preparation of removing them from the library. Change-Id: I798717b60badb521d28f8f7a7036a99e5a26d61a
2017-02-28 20:24:22 +00:00
.ve-ui-mwTemplateDialog .oo-ui-outlineOptionWidget.oo-ui-flaggedElement-empty .oo-ui-iconElement-icon {
opacity: 0.51;
}
.ve-ui-mwTemplateDialog .oo-ui-outlineOptionWidget.oo-ui-flaggedElement-empty .oo-ui-labelElement-label {
color: #72777d;
}
Update VE core submodule to master (1f82a47) New changes: 5d063a2 Don't use three different coordinate systems in getSelectionRect() feeb1ae Only focus the paste target if focusedNode has changed 2c1bb97 Update OOjs UI to v0.1.0-pre (4cef83f702) Local changes: * Update references to renamed classes * Update calling patterns element mixins Change-Id: I330c0e308807597dec31dad8dbf713eb29fdc290
2014-09-04 00:18:41 +00:00
.ve-ui-mwTransclusionDialog .oo-ui-bookletLayout .oo-ui-fieldsetLayout > .oo-ui-labelElement-label {
Split out omnibus CSS files Change-Id: I195a0e4091cf2d003c325e9c653dd634e7096779
2014-03-18 20:52:39 +00:00
height: 1.5em;
overflow: hidden;
}
Rename sidebar state to distinguish from multiple transclusion This dramatically simplifies the "mode" flag in MWTransclusionDialog. The main reason to touch this code is: The flag appears like it will be "single" when the dialog contains a single template, and "multiple" when there are multiple templates. But this is not true. What the flag really does is show/hide the sidebar. The sidebar is needed to be able to create multi-part templates. But a dialog that already contains multiple templates can be set to "single" mode (i.e. the user can collapse the sidebar), and vice versa. This patch focuses on private details inside of this class, but keeps the terminology of a "mode" in some places. E.g. the messages are not renamed to not cause unnecessary trouble for translators. Change-Id: Ib029fd48b393d2ab7d7cff6c842789e22989e944
2021-06-04 15:41:41 +00:00
.ve-ui-mwTransclusionDialog-collapsed .oo-ui-bookletLayout .oo-ui-fieldsetLayout > .oo-ui-iconElement-icon,
.ve-ui-mwTransclusionDialog-collapsed .oo-ui-bookletLayout .oo-ui-fieldsetLayout > .oo-ui-labelElement-label,
.ve-ui-mwTransclusionDialog-collapsed .oo-ui-bookletLayout .ve-ui-mwTransclusionDialog-removeButton,
.ve-ui-mwTransclusionDialog-expanded .oo-ui-bookletLayout .ve-ui-mwTemplatePage-more,
.ve-ui-mwTransclusionDialog-expanded .oo-ui-bookletLayout .ve-ui-mwParameterPage-addUndocumented {
Hide extra space at the top of the single transclusion dialogs Bug: T78045 Change-Id: I36974f69128a3e2c303076e3bd740f270e178c6b
2014-12-12 21:01:04 +00:00
display: none;
Split out omnibus CSS files Change-Id: I195a0e4091cf2d003c325e9c653dd634e7096779
2014-03-18 20:52:39 +00:00
}
build: Replace csslint with stylelint For now just use the rules file in lib/ve, but eventually this will be a preset. Change-Id: I7fd79d3e1dce37aef066d416cd969e5fff1e962f Depends-On: I17e0d23ddfedf64985495ab35d113ea08c03b1df
2016-05-16 14:38:57 +00:00
.ve-ui-mwTransclusionDialog.ve-ui-mwTemplateDialog-ready .oo-ui-bookletLayout .oo-ui-fieldsetLayout > .oo-ui-labelElement-label,
.ve-ui-mwTransclusionDialog.ve-ui-mwTemplateDialog-ready .oo-ui-bookletLayout .oo-ui-fieldsetLayout > .oo-ui-iconElement-icon,
.ve-ui-mwTransclusionDialog.ve-ui-mwTemplateDialog-ready .oo-ui-bookletLayout .ve-ui-mwTransclusionDialog-removeButton,
.ve-ui-mwTransclusionDialog.ve-ui-mwTemplateDialog-ready .oo-ui-bookletLayout .ve-ui-mwTemplatePage-more,
Internally rename container for adding an undocumented paramter The internal name "more" conflicts with new collapsible buttons. TODO: looks like TemplatePage has an analogous field? Change-Id: I10b24758316a6cc3fbd236c77daffa014fcdafc6
2021-04-26 08:34:48 +00:00
.ve-ui-mwTransclusionDialog.ve-ui-mwTemplateDialog-ready .oo-ui-bookletLayout .ve-ui-mwParameterPage-addUndocumented,
build: Replace csslint with stylelint For now just use the rules file in lib/ve, but eventually this will be a preset. Change-Id: I7fd79d3e1dce37aef066d416cd969e5fff1e962f Depends-On: I17e0d23ddfedf64985495ab35d113ea08c03b1df
2016-05-16 14:38:57 +00:00
.ve-ui-mwTransclusionDialog.ve-ui-mwTemplateDialog-ready .oo-ui-bookletLayout > .oo-ui-gridLayout > .oo-ui-panelLayout {
-webkit-transition: all 250ms ease-in-out;
-moz-transition: all 250ms ease-in-out;
transition: all 250ms ease-in-out;
}
Optional feature makes the transclusion dialog bigger When $wgVisualEditorTransclusionDialogInlineDescriptions is set to true, the template dialog will use a larger format. Bug: T273971 Change-Id: Iad3c3f4d65125c83e35414ce15f793f6a1b192ef
2021-05-03 10:40:02 +00:00
.ve-ui-mwTransclusionDialog-bigger .oo-ui-menuLayout > .oo-ui-menuLayout-menu {
width: 240px;
}
.ve-ui-mwTransclusionDialog-bigger .oo-ui-menuLayout > .oo-ui-menuLayout-content {
left: 240px;
}
Optional verbose template search Renames "Add a template" to "Template Search" in most cases and provides inline help for the workflow. Bug: T277028 Change-Id: I3fee87cb89b5044e785596e71ef3f1a18f2694ce
2021-05-03 12:46:56 +00:00
.ve-ui-mwTransclusionDialog-addTemplateFieldset .oo-ui-inline-help {
color: inherit;
}
Rename sidebar state to distinguish from multiple transclusion This dramatically simplifies the "mode" flag in MWTransclusionDialog. The main reason to touch this code is: The flag appears like it will be "single" when the dialog contains a single template, and "multiple" when there are multiple templates. But this is not true. What the flag really does is show/hide the sidebar. The sidebar is needed to be able to create multi-part templates. But a dialog that already contains multiple templates can be set to "single" mode (i.e. the user can collapse the sidebar), and vice versa. This patch focuses on private details inside of this class, but keeps the terminology of a "mode" in some places. E.g. the messages are not renamed to not cause unnecessary trouble for translators. Change-Id: Ib029fd48b393d2ab7d7cff6c842789e22989e944
2021-06-04 15:41:41 +00:00
.ve-ui-mwTransclusionDialog-collapsed .oo-ui-bookletLayout .ve-ui-mwTransclusionDialog-addTemplateFieldset.oo-ui-fieldsetLayout > .oo-ui-labelElement-label {
Optional verbose template search Renames "Add a template" to "Template Search" in most cases and provides inline help for the workflow. Bug: T277028 Change-Id: I3fee87cb89b5044e785596e71ef3f1a18f2694ce
2021-05-03 12:46:56 +00:00
display: inline-block;
}
Template dialog checkbox list Introduces new widgets forming the backbone of the experimental template dialog sidebar. FIXME: `text-overflow: ellipsis` is not working yet, the container styles need adjustment. Bug: T274543 Change-Id: Ie81b84be288553343017c4aaf8691c4e266995f5
2021-05-17 15:43:49 +00:00
Show ellipsis when sidebar parameter names are too long Bug: T285044 Change-Id: I6bf53ec4d6d45888ed7e9ba1d67848e41224de63
2021-07-15 15:35:42 +00:00
.ve-ui-mwTransclusionOutlineItem.oo-ui-fieldLayout.oo-ui-fieldLayout-align-inline > .oo-ui-fieldLayout-body {
display: flex;
}
.ve-ui-mwTransclusionOutlineItem.oo-ui-fieldLayout.oo-ui-fieldLayout-align-inline > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-field {
width: 20px;
}
.ve-ui-mwTransclusionOutlineItem.oo-ui-fieldLayout.oo-ui-fieldLayout-align-inline > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-header {
Template dialog checkbox list Introduces new widgets forming the backbone of the experimental template dialog sidebar. FIXME: `text-overflow: ellipsis` is not working yet, the container styles need adjustment. Bug: T274543 Change-Id: Ie81b84be288553343017c4aaf8691c4e266995f5
2021-05-17 15:43:49 +00:00
overflow: hidden;
Show ellipsis when sidebar parameter names are too long Bug: T285044 Change-Id: I6bf53ec4d6d45888ed7e9ba1d67848e41224de63
2021-07-15 15:35:42 +00:00
text-overflow: ellipsis;
white-space: nowrap;
padding-left: 6px;
padding-right: 12px;
}
.ve-ui-mwTransclusionOutlineItem {
Various design tweaks to the new template dialog sidebar Still far from being finished, but much closer to the mocks already. Bug: T274544 Change-Id: I1feee06e43a4b9c10a2d9443b6d816595bead64d
2021-07-13 08:57:57 +00:00
padding-bottom: 8px;
padding-left: 24px;
padding-top: 8px;
Template dialog checkbox list Introduces new widgets forming the backbone of the experimental template dialog sidebar. FIXME: `text-overflow: ellipsis` is not working yet, the container styles need adjustment. Bug: T274543 Change-Id: Ie81b84be288553343017c4aaf8691c4e266995f5
2021-05-17 15:43:49 +00:00
}
Various design tweaks to the new template dialog sidebar Still far from being finished, but much closer to the mocks already. Bug: T274544 Change-Id: I1feee06e43a4b9c10a2d9443b6d816595bead64d
2021-07-13 08:57:57 +00:00
.ve-ui-mwTransclusionOutlineItem.oo-ui-fieldLayout.oo-ui-fieldLayout-align-inline {
margin-top: 0;
}
.ve-ui-mwTransclusionOutlineItem,
.ve-ui-mwTransclusionOutlineItem label {
cursor: pointer;
}
.ve-ui-mwTransclusionOutlineItem:hover {
background-color: #eaecf0;
}
.ve-ui-mwTransclusionOutlineItem .oo-ui-checkboxInputWidget.oo-ui-widget-enabled [ type='checkbox' ]:hover + span {
border-width: 2px;
}
Make new template editor sidebar items actual ButtonElements Actually reusing this OOUI mixin gives us a lot of well developed functionality we need anyway. Most notably proper event management, e.g. click events. The number of CSS properties we need to override is managable, I would argue. Let's see: * Our buttons are not inline-elements, but should use the full width. * No focus-border left and right for the same reason. * We want much more inner padding. * We want a stronger hover effect. * We need to fine-tune the position of the icon. This is because of the inner padding. * Need to get rid of a negative margin that's only relevant for inline-buttons. I currently feel like the benefits are worth living with slightly more brittle code. Note that we can undo this change any time because all this is well encapsulated in this new class. Bug: T274544 Change-Id: I33f275a958964d49e803e56bf74a6fa961093da1
2021-07-13 10:15:47 +00:00
.ve-ui-mwTransclusionOutlineButtonWidget,
.ve-ui-mwTransclusionOutlineButtonWidget > .oo-ui-buttonElement-button {
display: block;
}
.ve-ui-mwTransclusionOutlineButtonWidget.oo-ui-buttonElement-frameless.oo-ui-labelElement.oo-ui-iconElement > .oo-ui-buttonElement-button {
border-left: 0;
border-radius: 0;
border-right: 0;
overflow: hidden;
padding: 8px 0 8px 36px;
text-overflow: ellipsis;
}
.ve-ui-mwTransclusionOutlineButtonWidget.oo-ui-buttonElement-frameless.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover {
background-color: #eaecf0;
}
.ve-ui-mwTransclusionOutlineButtonWidget.oo-ui-buttonElement-frameless.oo-ui-iconElement:first-child {
margin-left: 0;
}
.ve-ui-mwTransclusionOutlineButtonWidget.oo-ui-buttonElement-frameless.oo-ui-iconElement > .oo-ui-buttonElement-button > .oo-ui-iconElement-icon {
left: 10px;
}
Add parameter search to sidebar of VE TemplateDialog Bug: T272481 Change-Id: If044e5d134f1b24f939c4786949e6ca34fb79e1e
2021-07-12 15:00:04 +00:00
Adjust the styling for the template parameter search Bug: T272481 Change-Id: Ie1c6b95cf32640401cb2a17bcda656a40a22e9b4
2021-07-16 16:03:48 +00:00
.ve-ui-mwTransclusionOutlineTemplateWidget-searchWidget {
margin: 8px 24px 8px 24px;
width: auto;
}
Add parameter search to sidebar of VE TemplateDialog Bug: T272481 Change-Id: If044e5d134f1b24f939c4786949e6ca34fb79e1e
2021-07-12 15:00:04 +00:00
.ve-ui-mwTransclusionOutlineTemplateWidget-no-match {
font-style: italic;
Adjust the styling for the template parameter search Bug: T272481 Change-Id: Ie1c6b95cf32640401cb2a17bcda656a40a22e9b4
2021-07-16 16:03:48 +00:00
color: #72777d;
margin: 8px 24px 8px 24px;
Add parameter search to sidebar of VE TemplateDialog Bug: T272481 Change-Id: If044e5d134f1b24f939c4786949e6ca34fb79e1e
2021-07-12 15:00:04 +00:00
}
Reference in a new issue Copy permalink