wikimedia/mediawiki-extensions-VisualEditor
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/extensions/VisualEditor synced 2024-11-15 18:39:52 +00:00
Code Issues Packages Projects Releases Wiki Activity
mediawiki-extensions-Visual.../modules/ve-mw/ui/widgets/ve.ui.MWTransclusionOutlineButtonWidget.js

42 lines
1.4 KiB
JavaScript
Raw Normal View History

Reuse generic button widget for elements in the new sidebar This introduces another generic "button-like" class that can be reused in multiple places in the new sidebar. The main change in this patch is the "add more information" button which is now an instance of this new class as well. This patch also simplifies over-complicated setup code in related widgets. Bug: T274544 Change-Id: I0cfe7675d02fdd5c5dc8d9198bb3f4aec9abf397
2021-07-13 09:00:57 +00:00
/**
Finishing touches to new template editor sidebar In detail: * Allow clicks on all elements in the new sidebar. This should focus the corresponding element on the right. * Make all elements in the new sidebar tabbable. * Fix MWTransclusionOutlineTemplateWidget.createCheckbox() to not need a temporary param object any more. * Rewrite more code in MWTransclusionOutlineTemplateWidget to be shorter and easier to read. * Fix MWTemplateModel.addParameter() to not do way to much stuff when a parameter already exists. * Update code documentation. * Use more specific, less ambiguous variable and method names. Bug: T274544 Change-Id: Iaf6f7d1b0f7bf0e9b03eb86d01f3eceadece6fe4
2021-07-13 19:01:30 +00:00
* Generic button-like widget for items in the template dialog sidebar. See
* {@see OO.ui.ButtonWidget} for inspiration.
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
*
Reuse generic button widget for elements in the new sidebar This introduces another generic "button-like" class that can be reused in multiple places in the new sidebar. The main change in this patch is the "add more information" button which is now an instance of this new class as well. This patch also simplifies over-complicated setup code in related widgets. Bug: T274544 Change-Id: I0cfe7675d02fdd5c5dc8d9198bb3f4aec9abf397
2021-07-13 09:00:57 +00:00
* @class
* @extends OO.ui.Widget
*
* @constructor
* @param {Object} config
* @cfg {string} [icon='']
* @cfg {string} label
*/
ve.ui.MWTransclusionOutlineButtonWidget = function VeUiMWTransclusionOutlineButtonWidget( config ) {
// Parent constructor
ve.ui.MWTransclusionOutlineButtonWidget.super.call( this, config );
// Mixin constructors
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
OO.ui.mixin.ButtonElement.call( this, {
framed: false
} );
Reuse generic button widget for elements in the new sidebar This introduces another generic "button-like" class that can be reused in multiple places in the new sidebar. The main change in this patch is the "add more information" button which is now an instance of this new class as well. This patch also simplifies over-complicated setup code in related widgets. Bug: T274544 Change-Id: I0cfe7675d02fdd5c5dc8d9198bb3f4aec9abf397
2021-07-13 09:00:57 +00:00
OO.ui.mixin.IconElement.call( this, config );
OO.ui.mixin.LabelElement.call( this, config );
Finishing touches to new template editor sidebar In detail: * Allow clicks on all elements in the new sidebar. This should focus the corresponding element on the right. * Make all elements in the new sidebar tabbable. * Fix MWTransclusionOutlineTemplateWidget.createCheckbox() to not need a temporary param object any more. * Rewrite more code in MWTransclusionOutlineTemplateWidget to be shorter and easier to read. * Fix MWTemplateModel.addParameter() to not do way to much stuff when a parameter already exists. * Update code documentation. * Use more specific, less ambiguous variable and method names. Bug: T274544 Change-Id: Iaf6f7d1b0f7bf0e9b03eb86d01f3eceadece6fe4
2021-07-13 19:01:30 +00:00
OO.ui.mixin.TabIndexedElement.call( this, ve.extendObject( {
$tabIndexed: this.$button
}, config ) );
Reuse generic button widget for elements in the new sidebar This introduces another generic "button-like" class that can be reused in multiple places in the new sidebar. The main change in this patch is the "add more information" button which is now an instance of this new class as well. This patch also simplifies over-complicated setup code in related widgets. Bug: T274544 Change-Id: I0cfe7675d02fdd5c5dc8d9198bb3f4aec9abf397
2021-07-13 09:00:57 +00:00
this.$element
.addClass( 've-ui-mwTransclusionOutlineButtonWidget' )
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
.append( this.$button.append( this.$icon, this.$label ) );
Reuse generic button widget for elements in the new sidebar This introduces another generic "button-like" class that can be reused in multiple places in the new sidebar. The main change in this patch is the "add more information" button which is now an instance of this new class as well. This patch also simplifies over-complicated setup code in related widgets. Bug: T274544 Change-Id: I0cfe7675d02fdd5c5dc8d9198bb3f4aec9abf397
2021-07-13 09:00:57 +00:00
};
/* Inheritance */
OO.inheritClass( ve.ui.MWTransclusionOutlineButtonWidget, OO.ui.Widget );
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
OO.mixinClass( ve.ui.MWTransclusionOutlineButtonWidget, OO.ui.mixin.ButtonElement );
Reuse generic button widget for elements in the new sidebar This introduces another generic "button-like" class that can be reused in multiple places in the new sidebar. The main change in this patch is the "add more information" button which is now an instance of this new class as well. This patch also simplifies over-complicated setup code in related widgets. Bug: T274544 Change-Id: I0cfe7675d02fdd5c5dc8d9198bb3f4aec9abf397
2021-07-13 09:00:57 +00:00
OO.mixinClass( ve.ui.MWTransclusionOutlineButtonWidget, OO.ui.mixin.IconElement );
OO.mixinClass( ve.ui.MWTransclusionOutlineButtonWidget, OO.ui.mixin.LabelElement );
// TODO: Add OO.ui.mixin.TitledElement?
Finishing touches to new template editor sidebar In detail: * Allow clicks on all elements in the new sidebar. This should focus the corresponding element on the right. * Make all elements in the new sidebar tabbable. * Fix MWTransclusionOutlineTemplateWidget.createCheckbox() to not need a temporary param object any more. * Rewrite more code in MWTransclusionOutlineTemplateWidget to be shorter and easier to read. * Fix MWTemplateModel.addParameter() to not do way to much stuff when a parameter already exists. * Update code documentation. * Use more specific, less ambiguous variable and method names. Bug: T274544 Change-Id: Iaf6f7d1b0f7bf0e9b03eb86d01f3eceadece6fe4
2021-07-13 19:01:30 +00:00
// TODO: Add OO.ui.mixin.FlaggedElement?
OO.mixinClass( ve.ui.MWTransclusionOutlineButtonWidget, OO.ui.mixin.TabIndexedElement );
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
// TODO: Add OO.ui.mixin.AccessKeyedElement?
Reference in a new issue Copy permalink