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

324 lines
10 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;
}
Correct focus handling when adding undocumented parameters When I press the button to expand the input field for undocumented parameters, it needs to be focused. Otherwise I have to click it manually all the time. We probably forgot to list this as an acceptance criteria when working on Ic5dcd36. This also replaced a bit of JavaScript with CSS. I do this mainly because I found the mixture before (one piece was hidden via JavaScript, another via CSS) a bit confusing. Bug: T272487 Change-Id: I0cbee63c65a37f2f1860bde007c1e5c8408ba006
2021-08-30 15:03:30 +00:00
.ve-ui-mwTransclusionDialog-addParameterFieldset-collapsed .oo-ui-inline-help,
.ve-ui-mwTransclusionDialog-addParameterFieldset-collapsed .ve-ui-mwTransclusionDialog-addParameterFieldset-input {
Added new input page for undocumented parameters Bug: T272487 Change-Id: Ic5dcd36c9f647f9b52b98e5a520a1df1960a5b48
2021-08-06 11:56:40 +00:00
display: none;
}
.ve-ui-mwTransclusionDialog-addParameterFieldset-input {
margin-top: 8px;
}
.ve-ui-mwTransclusionDialog-addParameterFieldset-input .oo-ui-fieldLayout-field {
width: 100%;
}
Add input validation to the add parameter page Bug: T285869 Change-Id: Iebb982e95aa19bd61fcda915981d505cc243c4b2
2021-08-31 16:01:11 +00:00
.ve-ui-mwTransclusionDialog-addParameterFieldset .oo-ui-fieldLayout-messages .oo-ui-messageWidget {
margin-left: 0;
margin-right: 0;
}
Added new input page for undocumented parameters Bug: T272487 Change-Id: Ic5dcd36c9f647f9b52b98e5a520a1df1960a5b48
2021-08-06 11:56:40 +00:00
.ve-ui-mwTransclusionDialog-addParameterFieldset-header.oo-ui-iconElement .oo-ui-iconElement-icon {
height: 100%;
}
Split out omnibus CSS files Change-Id: I195a0e4091cf2d003c325e9c653dd634e7096779
2014-03-18 20:52:39 +00:00
.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;
Fix sidebar bottom position when pressing Ctrl+Shift+E This patch fixes two issues: * The bottom corner of the new sidebar was never correct because of a `padding: 2px` that was introduced later, but never compensated for. * The moment the toolbar is shown it's not a single-template dialog any more. This implies minor style changes. Bug: T290262 Bug: T292727 Change-Id: I08da73880c469085994ee4beb3fcdd973f80ae11
2021-10-07 13:29:51 +00:00
/* Compensate for 2 * 2px padding on the .oo-ui-outlineControlsWidget + 1px border */
margin-bottom: 5px;
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
}
Remove sidebar margin on single transclusion Bug: T272482 Change-Id: I5696dbd469161b1ab1ede2bb3f49e6dd24b98521
2021-08-17 11:53:28 +00:00
.ve-ui-mwTransclusionDialog-single-transclusion .ve-ui-mwTemplateDialog-pocSidebar-debug-container {
bottom: 0;
Fix sidebar bottom position when pressing Ctrl+Shift+E This patch fixes two issues: * The bottom corner of the new sidebar was never correct because of a `padding: 2px` that was introduced later, but never compensated for. * The moment the toolbar is shown it's not a single-template dialog any more. This implies minor style changes. Bug: T290262 Bug: T292727 Change-Id: I08da73880c469085994ee4beb3fcdd973f80ae11
2021-10-07 13:29:51 +00:00
margin-bottom: 0;
Remove sidebar margin on single transclusion Bug: T272482 Change-Id: I5696dbd469161b1ab1ede2bb3f49e6dd24b98521
2021-08-17 11:53:28 +00:00
}
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 > .oo-ui-outlineSelectWidget {
Hide old sidebar when the new one is enabled This is – for now – intentionally done in a way that can be undone. This will still be helpful for debugging for a while. But we need to get rid of the duplication to be able to make this new functionality visible on the beta cluster. Actual removal will hapen the moment we actually remove the old toolbar. There are already tickets for this. Bug: T286765 Change-Id: I842c3c39a55a273af20643fa8a602d2e57fb6b8c
2021-08-04 12:37:28 +00:00
background-color: rgba( 100%, 0%, 100%, 0.1 );
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
height: auto;
Hide old sidebar when the new one is enabled This is – for now – intentionally done in a way that can be undone. This will still be helpful for debugging for a while. But we need to get rid of the duplication to be able to make this new functionality visible on the beta cluster. Actual removal will hapen the moment we actually remove the old toolbar. There are already tickets for this. Bug: T286765 Change-Id: I842c3c39a55a273af20643fa8a602d2e57fb6b8c
2021-08-04 12:37:28 +00:00
outline: 1px solid #f0f;
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
}
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;
}
Make sidebar header and search field sticky during scroll The search field will stay at the top of the window while scrolling a single template. In multi-part transclusions, the header will also be sticky. Hides the template header in single-part transclusions. Bug: T298618 Change-Id: Ib050e30a50ef965c1524e977d3a600c3ff836774
2022-01-13 09:47:24 +00:00
.ve-ui-mwTransclusionDialog-newSidebar.ve-ui-mwTransclusionDialog-single-transclusion .ve-ui-mwTransclusionOutlineButtonWidget {
display: none;
}
.ve-ui-mwTransclusionOutlineTemplateWidget-sticky {
background-color: #fff;
build: Update stylelint-config-wikimedia to 0.13.0 Change-Id: I94a18ebc57ea04fe6246b63f6c9b5d5d8718dd4d
2022-05-04 21:54:48 +00:00
/* stylelint-disable-next-line plugin/no-unsupported-browser-features */
Make sidebar header and search field sticky during scroll The search field will stay at the top of the window while scrolling a single template. In multi-part transclusions, the header will also be sticky. Hides the template header in single-part transclusions. Bug: T298618 Change-Id: Ib050e30a50ef965c1524e977d3a600c3ff836774
2022-01-13 09:47:24 +00:00
position: sticky;
top: 0;
z-index: 1;
}
Defer creating template parameter search when it's not needed From the user's perspective this is the same as before: When a template doesn't have any parameters, there is no search field. The moment the first (undocumented) parameter is added the search field appears. This is just delayed now. The widgets are only created the moment they are actually needed. This saves loading time and memory, especially in a multi-part transclusion with many zero-parameter templates. This also makes it a lot easier to change the minimal number of parameters from 1 to e.g. 4. Includes reverting the flexible header composition done in Ib050e30a50ef965c1524e977d3a600c3ff836774 Bug: T298259 Change-Id: Ied7541d8d5c0b478a439dd31ce072e634287f181
2022-01-14 16:18:00 +00:00
.ve-ui-mwTransclusionDialog-single-transclusion .ve-ui-mwTransclusionOutlineTemplateWidget-sticky {
margin-top: -8px;
Fix spacing between sticky find bar and field list Bug: T300899 Change-Id: Ieac47d58eb1037edcd82e0d7ee5c98e125c4e78c
2022-02-03 17:17:59 +00:00
margin-bottom: 8px;
Defer creating template parameter search when it's not needed From the user's perspective this is the same as before: When a template doesn't have any parameters, there is no search field. The moment the first (undocumented) parameter is added the search field appears. This is just delayed now. The widgets are only created the moment they are actually needed. This saves loading time and memory, especially in a multi-part transclusion with many zero-parameter templates. This also makes it a lot easier to change the minimal number of parameters from 1 to e.g. 4. Includes reverting the flexible header composition done in Ib050e30a50ef965c1524e977d3a600c3ff836774 Bug: T298259 Change-Id: Ied7541d8d5c0b478a439dd31ce072e634287f181
2022-01-14 16:18:00 +00:00
padding-top: 8px;
}
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 {
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
Hide content pane on narrow screens when sidebar is expanded Before, the content pane (the right half of the dialog) was moved to the right, outside of the visible viewport. But it was still active and could i.e. be navigated to via the tab key. Only truly hiding it solves this issue. Bug: T274554 Change-Id: I8925a9cca0099528aca8e98452816b5f9dd23a76
2021-09-09 13:06:52 +00:00
.ve-ui-mwTransclusionDialog-bigger .ve-ui-mwTransclusionDialog-small-screen.ve-ui-mwTransclusionDialog-expanded .oo-ui-menuLayout > .oo-ui-menuLayout-menu {
Remove unwanted scrollbar in responsive template dialog I get a scrollbar at the bottom of the sidebar. The reason is that the container's width is 100% + 1px. The extra pixel is from the border, which is not needed in this mode. Bug: T274554 Change-Id: I4f749be6b9a7f89f9a7a195dc66c5c18253b1327
2021-08-09 16:28:56 +00:00
border-right: 0;
Make the sidebar in the transclusion dialog responsive Bug: T274554 Change-Id: I51e988e6fb0e50c9d542400471152807626539ea
2021-07-23 15:07:39 +00:00
width: 100%;
}
Hide content pane on narrow screens when sidebar is expanded Before, the content pane (the right half of the dialog) was moved to the right, outside of the visible viewport. But it was still active and could i.e. be navigated to via the tab key. Only truly hiding it solves this issue. Bug: T274554 Change-Id: I8925a9cca0099528aca8e98452816b5f9dd23a76
2021-09-09 13:06:52 +00:00
.ve-ui-mwTransclusionDialog-bigger .ve-ui-mwTransclusionDialog-small-screen.ve-ui-mwTransclusionDialog-expanded .oo-ui-menuLayout > .oo-ui-menuLayout-content {
display: none;
Make the sidebar in the transclusion dialog responsive Bug: T274554 Change-Id: I51e988e6fb0e50c9d542400471152807626539ea
2021-07-23 15:07:39 +00:00
}
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
Rename outline "container" widget I can't really tell what insight we get from the word "container". Every widget is a "container" in some sense, isn't it? This widget is just _the_ outline, I would argue. Other suggestions? Change-Id: I1fb27ee58c1a3dd790022504e978198dadf7ea02
2021-09-21 08:35:36 +00:00
.ve-ui-mwTransclusionOutlineWidget {
Fix inconsistent keyboard :focus styles in template outline This fixes a few style issues: * The buttons that represent top-level elements have a proper 2px focus rectangle again. Back to the OOUI default. * The list of parameters does have a 1px focus rectangle all around. Intentionally thin because there is a 2nd level of keyboard navigation (via cursor keys) in this element. * All these focus rectangles look the same in Firefox. Before, it was a thin dotted line on the parameter list. * Parameters with long names don't wrap on a 2nd line any more. I believe this was working before but got lost in I92e8fd2. Bug: T285323 Change-Id: I0229b6395a64a9903335bf96349af70fb20ad047
2021-08-31 10:27:06 +00:00
/* .oo-ui-window-head uses a 1px outline which overlaps the top pixel of the sidebar */
padding-top: 1px;
}
Add ARIA descriptions to sidebar widgets When changing the source in the described-by attributes the screen reader will read the text of the new source when the status changes. Just changing the text within the elements holding the descriptions does not work. Bug: T291284 Change-Id: I31cc3061cf6c1f699babe41e99e0711f0eb03646
2021-10-27 09:39:03 +00:00
.ve-ui-mwTransclusionOutline-ariaHidden {
display: none;
}
Move message about missing parameters to sidebar Will be removed when parameters are added. Needs different margins depending on beeing shown in the single transclusion mode without header or on multiple transclusions. Bug: T300710 Change-Id: Ieb95d7276aa4d4b0fcbb74f87ab734e4a393dc21
2022-04-28 11:54:33 +00:00
.ve-ui-mwTransclusionOutline-no-template-parameters {
font-style: italic;
color: #72777d;
margin: 8px 24px 24px 24px;
}
.ve-ui-mwTransclusionDialog-single-transclusion .ve-ui-mwTransclusionOutline-no-template-parameters {
margin: 24px;
}
Fix inconsistent keyboard :focus styles in template outline This fixes a few style issues: * The buttons that represent top-level elements have a proper 2px focus rectangle again. Back to the OOUI default. * The list of parameters does have a 1px focus rectangle all around. Intentionally thin because there is a 2nd level of keyboard navigation (via cursor keys) in this element. * All these focus rectangles look the same in Firefox. Before, it was a thin dotted line on the parameter list. * Parameters with long names don't wrap on a 2nd line any more. I believe this was working before but got lost in I92e8fd2. Bug: T285323 Change-Id: I0229b6395a64a9903335bf96349af70fb20ad047
2021-08-31 10:27:06 +00:00
.ve-ui-mwTransclusionOutlineParameterSelectWidget:focus {
border-radius: 2px;
box-shadow: inset 0 0 0 1px #36c;
outline: 0;
}
Rename …OutlineItem CSS class to match widget class name Bug: T285323 Change-Id: Ib307a23adb4712f253610b5029483ea8c049b7ce
2021-08-31 10:15:03 +00:00
.ve-ui-mwTransclusionOutlineParameterWidget {
Fix inconsistent keyboard :focus styles in template outline This fixes a few style issues: * The buttons that represent top-level elements have a proper 2px focus rectangle again. Back to the OOUI default. * The list of parameters does have a 1px focus rectangle all around. Intentionally thin because there is a 2nd level of keyboard navigation (via cursor keys) in this element. * All these focus rectangles look the same in Firefox. Before, it was a thin dotted line on the parameter list. * Parameters with long names don't wrap on a 2nd line any more. I believe this was working before but got lost in I92e8fd2. Bug: T285323 Change-Id: I0229b6395a64a9903335bf96349af70fb20ad047
2021-08-31 10:27:06 +00:00
overflow: hidden;
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;
Fix left margin of hide unused and checkboxes The checkboxes are actually indented a bit more than the search box with this change the extra indentation is applied and the hide button text is alligned accordingly. Bug: T298259 Change-Id: I5508ab883c23e7285c023dc127529ffa4dbe58c7
2022-01-19 12:42:08 +00:00
padding-left: 30px;
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-top: 8px;
Fix inconsistent keyboard :focus styles in template outline This fixes a few style issues: * The buttons that represent top-level elements have a proper 2px focus rectangle again. Back to the OOUI default. * The list of parameters does have a 1px focus rectangle all around. Intentionally thin because there is a 2nd level of keyboard navigation (via cursor keys) in this element. * All these focus rectangles look the same in Firefox. Before, it was a thin dotted line on the parameter list. * Parameters with long names don't wrap on a 2nd line any more. I believe this was working before but got lost in I92e8fd2. Bug: T285323 Change-Id: I0229b6395a64a9903335bf96349af70fb20ad047
2021-08-31 10:27:06 +00:00
text-overflow: ellipsis;
white-space: nowrap;
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
}
Rename …OutlineItem CSS class to match widget class name Bug: T285323 Change-Id: Ib307a23adb4712f253610b5029483ea8c049b7ce
2021-08-31 10:15:03 +00:00
.ve-ui-mwTransclusionOutlineParameterWidget.oo-ui-labelElement > .oo-ui-labelElement-label {
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
cursor: pointer;
Make template parameter checkbox widget an OptionWidget The plan is to change the outer …TemplateWidget (which contains a list of template parameter checkboxes) into a SelectWidget. But this requires the elements in the list to be a subclass of OptionWidget. Note this change does not have any effect, as of this patch. But this makes the following patches smaller and easier to follow. Additionally: * The OptionWidget class is already a LabelElement. No need to initialize this twice. This happens via the parent constructor now. * Remove CSS that is not needed any more after Idc5e048. This is not a FieldLayout any more. * Update some related code documentation. Bug: T285323 Change-Id: I92e8fd2bbece9e6c55083cdfe6ed7ad16a64d688
2021-08-16 14:06:39 +00:00
display: inline;
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
}
Basic cursor key support in new template dialog sidebar Bug: T285323 Depends-On: I47effe05427cfabfcf534920edee79521eaa033f Change-Id: I319896a20a71b18655ebb93663d47e656a1a67a6
2021-08-16 16:17:14 +00:00
/* TODO: Remove debug color */
Rename …OutlineItem CSS class to match widget class name Bug: T285323 Change-Id: Ib307a23adb4712f253610b5029483ea8c049b7ce
2021-08-31 10:15:03 +00:00
.ve-ui-mwTransclusionOutlineParameterWidget.oo-ui-optionWidget-selected {
Basic cursor key support in new template dialog sidebar Bug: T285323 Depends-On: I47effe05427cfabfcf534920edee79521eaa033f Change-Id: I319896a20a71b18655ebb93663d47e656a1a67a6
2021-08-16 16:17:14 +00:00
/* background-color: rgba( 0%, 100%, 0%, 0.2 ); */
}
Rename …OutlineItem CSS class to match widget class name Bug: T285323 Change-Id: Ib307a23adb4712f253610b5029483ea8c049b7ce
2021-08-31 10:15:03 +00:00
.ve-ui-mwTransclusionOutlineParameterWidget.oo-ui-optionWidget-highlighted,
.ve-ui-mwTransclusionOutlineParameterWidget:hover {
Better colors when clicking/pressing elements in new sidebar This just copies the colors from the old sidebar. * When hovering with the mouse (without click/press) the background is gray, and the text black. Relevant for readability via WCAG AAA. * On click/press the background is blue (slightly darker than a selection), and the text is dark blue as well. As noted in https://docs.google.com/document/d/1V0rXMPr6upNjHF9AkROx4R8IF1LDZUzrG4K6oWT08sU Change-Id: I443045b55826ef390688b32616dfdcfdc6555eb3
2021-09-13 09:07:22 +00:00
/* This shade on a white background results in #eaecf0 a.k.a. @background-color-base--hover
a.k.a. @wmui-color-base80 */
Basic cursor key support in new template dialog sidebar Bug: T285323 Depends-On: I47effe05427cfabfcf534920edee79521eaa033f Change-Id: I319896a20a71b18655ebb93663d47e656a1a67a6
2021-08-16 16:17:14 +00:00
background-color: rgba( 0, 24, 73, 0.082 );
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
}
Rename …OutlineItem CSS class to match widget class name Bug: T285323 Change-Id: Ib307a23adb4712f253610b5029483ea8c049b7ce
2021-08-31 10:15:03 +00:00
.ve-ui-mwTransclusionOutlineParameterWidget .oo-ui-checkboxInputWidget.oo-ui-widget-enabled [ type='checkbox' ]:hover + span {
Make template parameter checkbox widget an OptionWidget The plan is to change the outer …TemplateWidget (which contains a list of template parameter checkboxes) into a SelectWidget. But this requires the elements in the list to be a subclass of OptionWidget. Note this change does not have any effect, as of this patch. But this makes the following patches smaller and easier to follow. Additionally: * The OptionWidget class is already a LabelElement. No need to initialize this twice. This happens via the parent constructor now. * Remove CSS that is not needed any more after Idc5e048. This is not a FieldLayout any more. * Update some related code documentation. Bug: T285323 Change-Id: I92e8fd2bbece9e6c55083cdfe6ed7ad16a64d688
2021-08-16 14:06:39 +00:00
/* Stronger :hover effect to make the different checkbox/label click regions more obvious */
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
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 {
overflow: hidden;
padding: 8px 0 8px 36px;
text-overflow: ellipsis;
}
Allow selecting top-level parts in the new sidebar This is mostly, if not exclusively visual, at the moment. The actual state is still managed by the old sidebar. I made the element OptionWidgets for convenience. This gives us all the functionality we need (primarily setSelected and isSelected), without to much clutter. However, I didn't made the container a SelectWidget. This comes with to much stuff we don't need at this level, e.g. cursor key navigation. Bug: T285323 Bug: T289043 Change-Id: I20dbd2ba23ceaa9125947b25e037c0bb3c91a471
2021-08-27 16:22:37 +00:00
.ve-ui-mwTransclusionOutlineButtonWidget.oo-ui-optionWidget-selected .oo-ui-buttonElement-button {
background-color: #eaf3ff;
}
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.oo-ui-buttonElement-frameless.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover {
background-color: #eaecf0;
Better colors when clicking/pressing elements in new sidebar This just copies the colors from the old sidebar. * When hovering with the mouse (without click/press) the background is gray, and the text black. Relevant for readability via WCAG AAA. * On click/press the background is blue (slightly darker than a selection), and the text is dark blue as well. As noted in https://docs.google.com/document/d/1V0rXMPr6upNjHF9AkROx4R8IF1LDZUzrG4K6oWT08sU Change-Id: I443045b55826ef390688b32616dfdcfdc6555eb3
2021-09-13 09:07:22 +00:00
color: #000;
}
.ve-ui-mwTransclusionOutlineButtonWidget.oo-ui-buttonElement-frameless.oo-ui-widget-enabled > .oo-ui-buttonElement-button:active,
.ve-ui-mwTransclusionOutlineParameterWidget:active {
/* Same as .oo-ui-optionWidget-pressed, a.k.a. @background-color-primary--hover */
background-color: rgba( 41, 98, 204, 0.1 );
color: #36c;
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.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
Show sidebar controls only when multi-part content is present Bug: T272482 Change-Id: I092438bc9c7d5569f758786ca6952beffdf37507
2021-08-05 14:31:56 +00:00
.ve-ui-mwTransclusionDialog-newSidebar .oo-ui-outlineControlsWidget {
padding: 2px;
display: flex;
Adjust icon spacing in new sidebar menu The icons have a padding of 6px around the icon image itself. To get to the required 16px/8px space the margin was adjusted accordingly. Note that there's also a 2px padding around the menu. Bug: T272482 Change-Id: I3df9f355dfd5c4e6366432555b96bf788e784280
2021-08-17 12:23:35 +00:00
align-items: flex-start;
justify-content: left;
Show sidebar controls only when multi-part content is present Bug: T272482 Change-Id: I092438bc9c7d5569f758786ca6952beffdf37507
2021-08-05 14:31:56 +00:00
}
.ve-ui-mwTransclusionDialog-newSidebar .oo-ui-outlineControlsWidget > .oo-ui-outlineControlsWidget-movers {
float: left;
}
.ve-ui-mwTransclusionDialog-newSidebar .oo-ui-outlineControlsWidget .oo-ui-buttonWidget {
Adjust icon spacing in new sidebar menu The icons have a padding of 6px around the icon image itself. To get to the required 16px/8px space the margin was adjusted accordingly. Note that there's also a 2px padding around the menu. Bug: T272482 Change-Id: I3df9f355dfd5c4e6366432555b96bf788e784280
2021-08-17 12:23:35 +00:00
margin-left: 4px !important; /* stylelint-disable-line declaration-no-important */
Show sidebar controls only when multi-part content is present Bug: T272482 Change-Id: I092438bc9c7d5569f758786ca6952beffdf37507
2021-08-05 14:31:56 +00:00
}
Adjust icon spacing in new sidebar menu The icons have a padding of 6px around the icon image itself. To get to the required 16px/8px space the margin was adjusted accordingly. Note that there's also a 2px padding around the menu. Bug: T272482 Change-Id: I3df9f355dfd5c4e6366432555b96bf788e784280
2021-08-17 12:23:35 +00:00
.ve-ui-mwTransclusionDialog-newSidebar .oo-ui-outlineControlsWidget > .oo-ui-outlineControlsWidget-items > .oo-ui-buttonWidget:first-child {
Show sidebar controls only when multi-part content is present Bug: T272482 Change-Id: I092438bc9c7d5569f758786ca6952beffdf37507
2021-08-05 14:31:56 +00:00
margin-left: 0 !important; /* stylelint-disable-line declaration-no-important */
}
Adjust icon spacing in new sidebar menu The icons have a padding of 6px around the icon image itself. To get to the required 16px/8px space the margin was adjusted accordingly. Note that there's also a 2px padding around the menu. Bug: T272482 Change-Id: I3df9f355dfd5c4e6366432555b96bf788e784280
2021-08-17 12:23:35 +00:00
.ve-ui-mwTransclusionDialog-newSidebar .oo-ui-outlineControlsWidget > .oo-ui-outlineControlsWidget-movers > .oo-ui-buttonWidget:nth-child( 2 ) {
margin-left: -4px !important; /* stylelint-disable-line declaration-no-important */
}
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 {
Minimize template dialog CSS a bit Bug: T272481 Change-Id: I156c8f2ea4a70d2e86a7bc4282738c51bebc3f2a
2021-08-11 06:09:40 +00:00
margin: 8px 24px;
Adjust the styling for the template parameter search Bug: T272481 Change-Id: Ie1c6b95cf32640401cb2a17bcda656a40a22e9b4
2021-07-16 16:03:48 +00:00
width: auto;
}
Make sidebar header and search field sticky during scroll The search field will stay at the top of the window while scrolling a single template. In multi-part transclusions, the header will also be sticky. Hides the template header in single-part transclusions. Bug: T298618 Change-Id: Ib050e30a50ef965c1524e977d3a600c3ff836774
2022-01-13 09:47:24 +00:00
.ve-ui-mwTransclusionOutlineTemplateWidget-searchWidget:last-child {
/* Workaround to override oo-ui-inputWidget:last-child rule */
margin-right: 24px;
}
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;
Minimize template dialog CSS a bit Bug: T272481 Change-Id: I156c8f2ea4a70d2e86a7bc4282738c51bebc3f2a
2021-08-11 06:09:40 +00:00
margin: 8px 24px;
Add parameter search to sidebar of VE TemplateDialog Bug: T272481 Change-Id: If044e5d134f1b24f939c4786949e6ca34fb79e1e
2021-07-12 15:00:04 +00:00
}
Implement floating help dialog for templates Bug: T294839 Change-Id: Id224b61bd0cd57f5e970ab62db2d82dab1db9252
2021-11-04 17:48:36 +00:00
.ve-ui-mwTransclusionDialog-floatingHelpElement {
position: absolute;
right: 23px;
bottom: 23px;
}
.ve-ui-mwTransclusionDialog-floatingHelpElement-fieldsetLayout label {
margin-bottom: 16px;
}
Use a fullscreen help dialog for templates on mobile Bug: T294839 Change-Id: I1effb6ea70bcf5e9ce4e84e65431765d0d2f8125
2021-11-09 16:47:43 +00:00
.ve-ui-mwTransclusionDialog-floatingHelpElement-fieldsetLayout .oo-ui-buttonWidget {
width: 100%;
}
Add button to sidebar to hide/show unused fields Bug: T298259 Change-Id: I8e5091b97dfb19eba981b2a919b82b6f14823990
2022-01-12 14:05:07 +00:00
Stop hide unused label from overflowing Will implicitly set a max width for the button due to the margin. Long words will break in the middle of the word. Also includes a shorter label. Bug: T300008 Change-Id: I37505af8383d8c0c2bd4af3987ec5e2a3049688a
2022-04-27 12:00:39 +00:00
.ve-ui-mwTransclusionOutlineToggleUnusedWidget.oo-ui-buttonWidget {
margin: -4px 24px 0 24px;
}
.ve-ui-mwTransclusionOutlineToggleUnusedWidget .oo-ui-labelElement-label {
Update CSS to force word wrap in unused parameters button Follow-up for what was done in I37505af. I don't fully understand why these two extras are sometimes needed and sometimes not. But this exact combination of 3 properties is used in multiple places already, so let's just do the same here. Bug: T300008 Change-Id: I1eba5fc378475d365111add58a141c3114dc0118
2022-05-10 08:17:41 +00:00
word-break: break-word;
word-wrap: break-word;
Stop hide unused label from overflowing Will implicitly set a max width for the button due to the margin. Long words will break in the middle of the word. Also includes a shorter label. Bug: T300008 Change-Id: I37505af8383d8c0c2bd4af3987ec5e2a3049688a
2022-04-27 12:00:39 +00:00
overflow-wrap: break-word;
white-space: normal;
Add button to sidebar to hide/show unused fields Bug: T298259 Change-Id: I8e5091b97dfb19eba981b2a919b82b6f14823990
2022-01-12 14:05:07 +00:00
}
Reference in a new issue Copy permalink