From: jdlrobson Date: Fri, 11 Jul 2014 21:24:53 +0000 (-0700) Subject: Simplify MediaWiki UI codebase X-Git-Tag: 1.31.0-rc.0~14939 X-Git-Url: http://git.cyclocoop.org/%7B%24admin_url%7Dmes_infos.php?a=commitdiff_plain;ds=sidebyside;h=76d5f43a58da432be0f21d5edb30d457cb46fcfc;p=lhc%2Fweb%2Fwiklou.git Simplify MediaWiki UI codebase * Stop thinking in terms of skins. Apply same styles to all uses of MediaWiki. MediaWiki UI should be able to be slotted in anywhere. * Kill unused mixins * Move variables into single separate file ** Kill unused variables * Do not load variables in mixin files (skins should tweak if necessary) * Create a single variables file Change-Id: Ib6c2485aca9a6a7c88f1a5326d9990647a1a26fb --- diff --git a/resources/Resources.php b/resources/Resources.php index 4f854fb3e0..5afe336a82 100644 --- a/resources/Resources.php +++ b/resources/Resources.php @@ -1442,18 +1442,16 @@ return array( /* MediaWiki UI */ 'mediawiki.ui' => array( - 'skinStyles' => array( - 'default' => 'resources/src/mediawiki.ui/default.less', - 'vector' => 'resources/src/mediawiki.ui/vector.less', + 'styles' => array( + 'resources/src/mediawiki.ui/default.less', ), 'position' => 'top', 'targets' => array( 'desktop', 'mobile' ), ), // Lightweight module for button styles 'mediawiki.ui.button' => array( - 'skinStyles' => array( - 'default' => 'resources/src/mediawiki.ui/components/default/buttons.less', - 'vector' => 'resources/src/mediawiki.ui/components/vector/buttons.less', + 'styles' => array( + 'resources/src/mediawiki.ui/components/buttons.less', ), 'position' => 'top', 'targets' => array( 'desktop', 'mobile' ), diff --git a/resources/src/mediawiki.less/mediawiki.ui/colors.less b/resources/src/mediawiki.less/mediawiki.ui/colors.less deleted file mode 100644 index d456f864fd..0000000000 --- a/resources/src/mediawiki.less/mediawiki.ui/colors.less +++ /dev/null @@ -1,35 +0,0 @@ -// FIXME: remove @colorProgressiveShadow (shadows should be generated -// in LESS by dimming the original colors) -@colorProgressiveShadow: #4091ed; - -// White; for background use, and text use on dark backgrounds -@colorWhite: #fff; -// Off-white; for background use on white backgrounds -@colorOffWhite: #fafafa; -// Dark gray; for non-text use -@colorGrayDark: #898989; -// Light gray; for non-text use -@colorGrayLight: #ccc; -// Very light gray; for non-text use -@colorGrayLighter: #ddd; -// Lightest gray; for non-text use -@colorGrayLightest: #eee; - -// Dark gray; for body text -@colorText: #252525; -// Light gray; for less important body text and links -@colorTextLight: #696969; - -// Blue; for contextual use of a continuing action -@colorProgressive: #347bff; -// Orange; for contextual use of returning to a past action -@colorRegressive: #ff7e1e; -// Green; for contextual use of a positive finalizing action -@colorConstructive: #00af89; -// Red; for contextual use of a negative finalizing action -@colorDestructive: #d11d13; - -// Used in mixins to darken contextual colors by the same amount (eg. focus) -@colorDarkenPercentage: 13.5%; -// Used in mixins to lighten contextual colors by the same amount (eg. hover) -@colorLightenPercentage: 13.5%; \ No newline at end of file diff --git a/resources/src/mediawiki.less/mediawiki.ui/mixins/effects.less b/resources/src/mediawiki.less/mediawiki.ui/mixins/effects.less index 8561582c62..9b62efe5dc 100644 --- a/resources/src/mediawiki.less/mediawiki.ui/mixins/effects.less +++ b/resources/src/mediawiki.less/mediawiki.ui/mixins/effects.less @@ -1,4 +1,3 @@ -@import "mediawiki.ui/colors"; // ---------------------------------------------------------------------------- // Button styling // ---------------------------------------------------------------------------- diff --git a/resources/src/mediawiki.less/mediawiki.ui/mixins/forms.less b/resources/src/mediawiki.less/mediawiki.ui/mixins/forms.less index 6b04061b38..7258d30aac 100644 --- a/resources/src/mediawiki.less/mediawiki.ui/mixins/forms.less +++ b/resources/src/mediawiki.less/mediawiki.ui/mixins/forms.less @@ -1,5 +1,3 @@ -@import "mediawiki.ui/colors"; - // Font is not included. // For Vector, that should be layered on top with vector-type .agora-field-styling() { diff --git a/resources/src/mediawiki.less/mediawiki.ui/mixins/type.less b/resources/src/mediawiki.less/mediawiki.ui/mixins/type.less deleted file mode 100644 index bf80ccb167..0000000000 --- a/resources/src/mediawiki.less/mediawiki.ui/mixins/type.less +++ /dev/null @@ -1,6 +0,0 @@ -@import "mediawiki.ui/typography"; - -.vector-type() { - font-size: @baseFontSize; - line-height: @baseLineHeight; -} diff --git a/resources/src/mediawiki.less/mediawiki.ui/mixins/utilities.less b/resources/src/mediawiki.less/mediawiki.ui/mixins/utilities.less deleted file mode 100644 index 3d7b73245e..0000000000 --- a/resources/src/mediawiki.less/mediawiki.ui/mixins/utilities.less +++ /dev/null @@ -1,17 +0,0 @@ -.agora-flush-left() { - float: left; - margin-left: 0; - padding-left: 0; -} - -.agora-flush-right() { - float: right; - margin-right: 0; - padding-right: 0; -} - -.agora-center-block() { - display: block; - margin-left: auto; - margin-right: auto; -} diff --git a/resources/src/mediawiki.less/mediawiki.ui/typography.less b/resources/src/mediawiki.less/mediawiki.ui/typography.less deleted file mode 100644 index 83651edb70..0000000000 --- a/resources/src/mediawiki.less/mediawiki.ui/typography.less +++ /dev/null @@ -1,5 +0,0 @@ -@baseFontSize: 1em; -@baseLineHeight: 1.4 * @baseFontSize; -@baseFontColor: @colorText; - -@smallFontSize: 0.75em; diff --git a/resources/src/mediawiki.less/mediawiki.ui/variables.less b/resources/src/mediawiki.less/mediawiki.ui/variables.less new file mode 100644 index 0000000000..ccf869df82 --- /dev/null +++ b/resources/src/mediawiki.less/mediawiki.ui/variables.less @@ -0,0 +1,37 @@ +@baseFontSize: 1em; + +// FIXME: remove @colorProgressiveShadow (shadows should be generated +// in LESS by dimming the original colors) +@colorProgressiveShadow: #4091ed; + +// White; for background use, and text use on dark backgrounds +@colorWhite: #fff; +// Off-white; for background use on white backgrounds +@colorOffWhite: #fafafa; +// Dark gray; for non-text use +@colorGrayDark: #898989; +// Light gray; for non-text use +@colorGrayLight: #ccc; +// Very light gray; for non-text use +@colorGrayLighter: #ddd; +// Lightest gray; for non-text use +@colorGrayLightest: #eee; + +// Dark gray; for body text +@colorText: #252525; +// Light gray; for less important body text and links +@colorTextLight: #696969; + +// Blue; for contextual use of a continuing action +@colorProgressive: #347bff; +// Orange; for contextual use of returning to a past action +@colorRegressive: #ff7e1e; +// Green; for contextual use of a positive finalizing action +@colorConstructive: #00af89; +// Red; for contextual use of a negative finalizing action +@colorDestructive: #d11d13; + +// Used in mixins to darken contextual colors by the same amount (eg. focus) +@colorDarkenPercentage: 13.5%; +// Used in mixins to lighten contextual colors by the same amount (eg. hover) +@colorLightenPercentage: 13.5%; \ No newline at end of file diff --git a/resources/src/mediawiki.ui/components/buttons.less b/resources/src/mediawiki.ui/components/buttons.less new file mode 100644 index 0000000000..e5495ba4d9 --- /dev/null +++ b/resources/src/mediawiki.ui/components/buttons.less @@ -0,0 +1,227 @@ +@import "mediawiki.mixins"; +@import "mediawiki.ui/variables"; +@import "mediawiki.ui/mixins/effects"; + +// Buttons +// +// All buttons start with mw-ui-button class, modified by other classes. +// It can be any element. Due to a lack of a CSS reset, the exact styling of +// the button depends on what type of element is used. +// There are two kinds of buttons, the default is a "Call to Action" with an obvious border +// and there is a quiet kind without a border. +// +// Styleguide 2. + +@buttonBorderRadius: 3px; +@transitionDuration: .1s; +@transitionFunction: ease-in-out; + +// Neutral button styling +// +// Markup: +// +// +// +// Styleguide 2.1. +.mw-ui-button { + // Container layout + display: inline-block; + padding: .5em 1em; + margin: 0; + .box-sizing(border-box); + + // Disable weird iOS styling + -webkit-appearance: none; + + // IE6/IE7 hack + // http://stackoverflow.com/a/5838575/365238 + *display: inline; + zoom: 1; + + // Container styling + .button-colors(@colorWhite); + border-radius: @buttonBorderRadius; + + // Ensure that buttons and inputs are nicely aligned when they have differing heights + vertical-align: middle; + + // Content styling + text-align: center; + font-weight: bold; + + // Interaction styling + cursor: pointer; + + &:disabled { + text-shadow: none; + cursor: default; + } + + .transition(background @transitionDuration @transitionFunction, color @transitionDuration @transitionFunction, box-shadow @transitionDuration @transitionFunction;); + + // Styling for specific button types + // ----------------------------------------- + + // Big buttons + // + // Not all buttons are equal. You can emphasise certain actions over others + // using the mw-ui-big class. + // + // Markup: + // + // + // + // + // + // Styleguide 2.1.6. + &.mw-ui-big { + font-size: @baseFontSize * 1.3; + } + + // Block buttons + // + // Some buttons might need to be stacked. + // + // Markup: + // + // + // + // + // + // Styleguide 2.1.5. + &.mw-ui-block { + display: block; + width: 100%; + } + + // Progressive buttons + // + // Use progressive buttons for actions which lead to a next step in the process. + // .mw-ui-primary is deprecated, kept for compatibility. + // + // Markup: + // + // + // + // Styleguide 2.1.1. + &.mw-ui-progressive, + &.mw-ui-primary { + .button-colors(@colorProgressive); + + &.mw-ui-quiet { + .button-colors-quiet(@colorProgressive); + } + } + + // Constructive buttons + // + // Use constructive buttons for actions which result in a final action in the process that results + // in a change of state. + // e.g. save changes button + // + // Markup: + // + // + // + // Styleguide 2.1.2. + &.mw-ui-constructive { + .button-colors(@colorConstructive); + + &.mw-ui-quiet { + .button-colors-quiet(@colorConstructive); + } + } + + // Destructive buttons + // + // Use destructive buttons for actions which result in the destruction of data. + // e.g. deleting a page. + // This should not be used for cancel buttons. + // + // Markup: + // + // + // + // Styleguide 2.1.3. + &.mw-ui-destructive { + .button-colors(@colorDestructive); + + &.mw-ui-quiet { + .button-colors-quiet(@colorDestructive); + } + } + + // Quiet buttons + // + // Use quiet buttons when they are less important and alongisde other progressive/destructive/progressive buttons. + // + // Markup: + // + // + // + // + // + // + // + // + // Styleguide 2.1.4. + &.mw-ui-quiet { + background: transparent; + border: none; + text-shadow: none; + .button-colors-quiet(@colorGrayDark); + + &:hover, + &:focus { + box-shadow: none; + } + + &:active, + &:disabled { + background: transparent; + } + } +} + +a.mw-ui-button { + text-decoration: none; + + // This overrides an underline declaration on a:hover and a:focus in + // commonElements.css, which the class alone isn't specific enough to do. + &:hover, + &:focus { + text-decoration: none; + } +} + +// Button groups +// +// Group of buttons. Make sure you clear the floating after using a mw-ui-button-group. +// +// Markup: +//
+//
A
+//
B
+//
C
+//
D
+//
+// +// Styleguide 2.2. +.mw-ui-button-group > * { + border-radius: 0; + float: left; + + &:first-child { + border-top-left-radius: @buttonBorderRadius; + border-bottom-left-radius: @buttonBorderRadius; + } + + &:not(:first-child) { + border-left: none; + } + + &:last-child{ + border-top-right-radius: @buttonBorderRadius; + border-bottom-right-radius: @buttonBorderRadius; + } +} diff --git a/resources/src/mediawiki.ui/components/default/buttons.less b/resources/src/mediawiki.ui/components/default/buttons.less deleted file mode 100644 index cc8212fe10..0000000000 --- a/resources/src/mediawiki.ui/components/default/buttons.less +++ /dev/null @@ -1,228 +0,0 @@ -@import "mediawiki.mixins"; -@import "mediawiki.ui/typography"; -@import "mediawiki.ui/mixins/effects"; -@import "mediawiki.ui/mixins/utilities"; - -// Buttons -// -// All buttons start with mw-ui-button class, modified by other classes. -// It can be any element. Due to a lack of a CSS reset, the exact styling of -// the button depends on what type of element is used. -// There are two kinds of buttons, the default is a "Call to Action" with an obvious border -// and there is a quiet kind without a border. -// -// Styleguide 2. - -@buttonBorderRadius: 3px; -@transitionDuration: .1s; -@transitionFunction: ease-in-out; - -// Neutral button styling -// -// Markup: -// -// -// -// Styleguide 2.1. -.mw-ui-button { - // Container layout - display: inline-block; - padding: .5em 1em; - margin: 0; - .box-sizing(border-box); - - // Disable weird iOS styling - -webkit-appearance: none; - - // IE6/IE7 hack - // http://stackoverflow.com/a/5838575/365238 - *display: inline; - zoom: 1; - - // Container styling - .button-colors(@colorWhite); - border-radius: @buttonBorderRadius; - - // Ensure that buttons and inputs are nicely aligned when they have differing heights - vertical-align: middle; - - // Content styling - text-align: center; - font-weight: bold; - - // Interaction styling - cursor: pointer; - - &:disabled { - text-shadow: none; - cursor: default; - } - - .transition(background @transitionDuration @transitionFunction, color @transitionDuration @transitionFunction, box-shadow @transitionDuration @transitionFunction;); - - // Styling for specific button types - // ----------------------------------------- - - // Big buttons - // - // Not all buttons are equal. You can emphasise certain actions over others - // using the mw-ui-big class. - // - // Markup: - // - // - // - // - // - // Styleguide 2.1.6. - &.mw-ui-big { - font-size: @baseFontSize * 1.3; - } - - // Block buttons - // - // Some buttons might need to be stacked. - // - // Markup: - // - // - // - // - // - // Styleguide 2.1.5. - &.mw-ui-block { - display: block; - width: 100%; - } - - // Progressive buttons - // - // Use progressive buttons for actions which lead to a next step in the process. - // .mw-ui-primary is deprecated, kept for compatibility. - // - // Markup: - // - // - // - // Styleguide 2.1.1. - &.mw-ui-progressive, - &.mw-ui-primary { - .button-colors(@colorProgressive); - - &.mw-ui-quiet { - .button-colors-quiet(@colorProgressive); - } - } - - // Constructive buttons - // - // Use constructive buttons for actions which result in a final action in the process that results - // in a change of state. - // e.g. save changes button - // - // Markup: - // - // - // - // Styleguide 2.1.2. - &.mw-ui-constructive { - .button-colors(@colorConstructive); - - &.mw-ui-quiet { - .button-colors-quiet(@colorConstructive); - } - } - - // Destructive buttons - // - // Use destructive buttons for actions which result in the destruction of data. - // e.g. deleting a page. - // This should not be used for cancel buttons. - // - // Markup: - // - // - // - // Styleguide 2.1.3. - &.mw-ui-destructive { - .button-colors(@colorDestructive); - - &.mw-ui-quiet { - .button-colors-quiet(@colorDestructive); - } - } - - // Quiet buttons - // - // Use quiet buttons when they are less important and alongisde other progressive/destructive/progressive buttons. - // - // Markup: - // - // - // - // - // - // - // - // - // Styleguide 2.1.4. - &.mw-ui-quiet { - background: transparent; - border: none; - text-shadow: none; - .button-colors-quiet(@colorGrayDark); - - &:hover, - &:focus { - box-shadow: none; - } - - &:active, - &:disabled { - background: transparent; - } - } -} - -a.mw-ui-button { - text-decoration: none; - - // This overrides an underline declaration on a:hover and a:focus in - // commonElements.css, which the class alone isn't specific enough to do. - &:hover, - &:focus { - text-decoration: none; - } -} - -// Button groups -// -// Group of buttons. Make sure you clear the floating after using a mw-ui-button-group. -// -// Markup: -//
-//
A
-//
B
-//
C
-//
D
-//
-// -// Styleguide 2.2. -.mw-ui-button-group > * { - border-radius: 0; - float: left; - - &:first-child { - border-top-left-radius: @buttonBorderRadius; - border-bottom-left-radius: @buttonBorderRadius; - } - - &:not(:first-child) { - border-left: none; - } - - &:last-child{ - border-top-right-radius: @buttonBorderRadius; - border-bottom-right-radius: @buttonBorderRadius; - } -} diff --git a/resources/src/mediawiki.ui/components/default/forms.less b/resources/src/mediawiki.ui/components/default/forms.less deleted file mode 100644 index 1a84afd286..0000000000 --- a/resources/src/mediawiki.ui/components/default/forms.less +++ /dev/null @@ -1,183 +0,0 @@ -// Form elements and layouts - -@import "mediawiki.mixins"; -@import "mediawiki.ui/mixins/utilities"; -@import "mediawiki.ui/mixins/forms"; - -// -------------------------------------------------------------------------- -// Layouts -// -------------------------------------------------------------------------- - -// The FancyCaptcha image CAPTCHA used on WMF wikis drives the width of the -// 'VForm' design, the form can't be narrower than this. -@captchaContainerWidth: 290px; -@defaultFormWidth: @captchaContainerWidth; - -// Forms -// -// Styleguide 3. - -// VForm -// -// Style a compact vertical stacked form ("VForm") and the elements in divs -// within it. See button section on guidance of how and when to use mw-ui-constructive. -// -// Markup: -//
-//
This is a form example.
-//
-// -// -//
-//
-// -//
-//
-// -// Styleguide 3.1. -.mw-ui-vform { - .box-sizing(border-box); - - width: @defaultFormWidth; - - // MW currently doesn't use the type attribute everywhere on inputs. - input, - select, - .mw-ui-button { - display: block; - .box-sizing(border-box); - margin: 0; - width: 100%; - } - - // We exclude buttons because they'll generally use mw-ui-button. - // Otherwise, we'll unintentionally override that. - input:not([type=button]):not([type=submit]):not([type=file]) { - .agora-field-styling(); // mixins/forms.less - } - - // Give dropdown lists the same spacing as input fields for consistency. - // Values taken from .agora-field-styling() in mixins/form.less - select { - padding: 0.35em 0.5em 0.35em 0.5em; - vertical-align: middle; - } - - label { - display: block; - .box-sizing(border-box); - .agora-label-styling(); - width: auto; - margin: 0 0 0.2em; - padding: 0; - } - - // Override input styling just for checkboxes and radio inputs. - input[type="checkbox"], - input[type="radio"] { - display: inline; - .box-sizing(content-box); - width: auto; - } - - - // Styles for information boxes - // - // Regular HTMLForm uses .error class, some special pages like - // SpecialUserlogin (login and create account) use .errorbox. - // - // Markup: - //
- //
An error occurred
- //
A warning to be noted
- //
Action successful!
- //
A different kind of error
- //
- //
  • There are problems with some of your input.
- //
- //
- // - //
- //
- // - // The value you specified is not a valid option. - //
- //
- // - //
- //
- // - // Styleguide 3.1. - .error, - .errorbox, - .warningbox, - .successbox { - .box-sizing(border-box); - font-size: 0.9em; - margin: 0 0 1em 0; - padding: 0.5em; - word-wrap: break-word; - } - - // Colours taken from those for .errorbox in skins/common/shared.css - .error { - color: #cc0000; - border: 1px solid #fac5c5; - background-color: #fae3e3; - text-shadow: 0 1px #fae3e3; - } - - // This specifies styling for individual field validation error messages. - // Show them below the fields to prevent line break glitches, and leave - // some space between the field and the error message box. - .mw-ui-vform-div .error, /* for backwards-compatibility, remove before 1.24 */ - .mw-ui-vform-field .error { - display: block; - margin-top: 5px; - } - -} - -// -------------------------------------------------------------------------- -// Elements -// -------------------------------------------------------------------------- - -// A wrapper for a single form field: the / is within an Agora -// form container such as mw-ui-vform -.mw-ui-input { - .agora-field-styling(); // mixins/forms.less -} - -// Apply mw-ui-label to individual elements to style them. -// You generally don't need to use this class if