mediawiki-extensions-Multim.../resources/mmv/ui/mmv.ui.reuse.dialog.less

@import "../mmv.mixins";
@import "../mmv.globals";

.mw-mmv-reuse-dialog {
	@divider-border-height: 1px;

	// positioned relative to the reuse button
	bottom: @metadatabar-above-fold-height + @progress-bar-height - 5px;

	.mw-mmv-reuse-tabs {
		@divider-color: rgb(204, 204, 204);

		position: static;
		box-shadow: none;
		padding-bottom: 0; // OOUI override
		border: none; // OOUI override
		border-bottom: @divider-border-height solid @divider-color;
		.box-round(@border-radius @border-radius 0 0);

		.oo-ui-iconedElement-icon.oo-ui-icon-check, .oo-ui-iconElement-icon.oo-ui-icon-check {
			display: none;
		}

		.oo-ui-optionWidget {
			@tab-border-height: 3px;
			@highlighted-tab-color: rgb(225, 243, 255);
			@selected-tab-color: rgb(0, 113, 188);

			display: inline-block;
			padding: 10px 25px;

			font-size: 1.2em;

			&.oo-ui-optionWidget-highlighted {
				border-bottom: (@tab-border-height - @divider-border-height) solid @highlighted-tab-color;
			}

			&.oo-ui-optionWidget-selected,
			&.oo-ui-optionWidget-highlighted.oo-ui-optionWidget-selected {
				border-bottom: @tab-border-height solid @selected-tab-color;
			}

			&:first-child {
				.box-round(@border-radius 0 0 0);
			}
		}
	}

	.mw-mmv-reuse-pane {
		display: none;
		padding: 20px;

		&.active {
			display: block;
		}
	}

	.mw-mmv-dialog-down-arrow {
		bottom: @metadatabar-above-fold-height + @progress-bar-height + 5px;
	}
}
Create StripeButtons class, convert reuse button to use it Also do a bunch of refactoring to: * keep LESS rules in more sane locations so it is not as hard to get an overview (most of the metadata panel rules were in mmv.less) * move mmv.mixins.less up one directory as it is not specific to the UI * move the SVG icons as all of them were related to the UI * remove the marging-right hack which was used to keep the title text from overflowing the button; instead use a float and overflow properties to make sure text that is too long gets hidden Change-Id: Icc8ea2e766be67d86ae98c734721b2185bd6c36e 2014-04-01 01:41:57 +00:00			`@import "../mmv.mixins";`
Make the reuse button part of the canvas Moves it out of stripeButtons and into canvasButtons. Will move download to its own thing later. Change-Id: Iaf18914b29a6283c3bade954f1adb3f206c9c911 Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/834 2014-09-12 18:05:13 +00:00			`@import "../mmv.globals";`
Add share panel, replace reuse Mingle: 147 Change-Id: I5678002ac84965a80f5e63635151032e6c293194 2014-03-17 08:07:53 +00:00
Use mw-mmv CSS prefix consistently for all things With apologies to anyone who gets a hundred merge conflicts because of this :) We had several different prefix styles (mlb-, mw-mlb-, mw-mmv-, mw-mmv-mmv-, a few unprefixed), which was getting annoying, and will be confusing to wiki editors who are trying to figure out where a given style comes from. Such changes are better done before going live because it breaks all local CSS tweaks on the wiki, so I am renaming things now (also removing some stuff which wasnt used anywhere). Change-Id: I00447a25f0028e234169c6db941bedc99622eb8d 2014-03-31 21:33:12 +00:00			`.mw-mmv-reuse-dialog {`
Add share panel, replace reuse Mingle: 147 Change-Id: I5678002ac84965a80f5e63635151032e6c293194 2014-03-17 08:07:53 +00:00			`@divider-border-height: 1px;`

Make the reuse button part of the canvas Moves it out of stripeButtons and into canvasButtons. Will move download to its own thing later. Change-Id: Iaf18914b29a6283c3bade954f1adb3f206c9c911 Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/834 2014-09-12 18:05:13 +00:00			`// positioned relative to the reuse button`
Move dialogs to the left, make arrows point right Change-Id: If8fc4ca5f902b3dc3271a33c44554d4e46faadb8 2014-09-18 20:37:02 +00:00			`bottom: @metadatabar-above-fold-height + @progress-bar-height - 5px;`
Add share panel, replace reuse Mingle: 147 Change-Id: I5678002ac84965a80f5e63635151032e6c293194 2014-03-17 08:07:53 +00:00
Use mw-mmv CSS prefix consistently for all things With apologies to anyone who gets a hundred merge conflicts because of this :) We had several different prefix styles (mlb-, mw-mlb-, mw-mmv-, mw-mmv-mmv-, a few unprefixed), which was getting annoying, and will be confusing to wiki editors who are trying to figure out where a given style comes from. Such changes are better done before going live because it breaks all local CSS tweaks on the wiki, so I am renaming things now (also removing some stuff which wasnt used anywhere). Change-Id: I00447a25f0028e234169c6db941bedc99622eb8d 2014-03-31 21:33:12 +00:00			`.mw-mmv-reuse-tabs {`
Add share panel, replace reuse Mingle: 147 Change-Id: I5678002ac84965a80f5e63635151032e6c293194 2014-03-17 08:07:53 +00:00			`@divider-color: rgb(204, 204, 204);`

			`position: static;`
			`box-shadow: none;`
Fix share tabs The share/embed tab bar used some hacks to disable MenuSelectWidget's normal behavior of disappearing once a selection has been made; after the last OOUI update this doesn't work anymore. This commit makes some small changes to make it work again: * replace .show() with .toggle() as the widget uses a custom show/hide mechanism now * reorder some calls - .toggle() has no effect as long as the menu has no options * disable autoHide which would hide the menu when the user clicks outside (didn't test if it is really needed but seemed reasonable) Also undoes some CSS changes that came with the update. Bug: T89531 Change-Id: I3688ec21250bf2eb8dbfd67e306e857028d71fc7 2015-02-15 06:01:43 +00:00			`padding-bottom: 0; // OOUI override`
			`border: none; // OOUI override`
Add share panel, replace reuse Mingle: 147 Change-Id: I5678002ac84965a80f5e63635151032e6c293194 2014-03-17 08:07:53 +00:00			`border-bottom: @divider-border-height solid @divider-color;`
			`.box-round(@border-radius @border-radius 0 0);`

CSS compatibility with upcoming OOUI breaking change Change-Id: Ic7bb6246b20706f8b7e4d7c39d6eb7fd921fde7b Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/832 2014-09-01 08:02:48 +00:00			`.oo-ui-iconedElement-icon.oo-ui-icon-check, .oo-ui-iconElement-icon.oo-ui-icon-check {`
Add share panel, replace reuse Mingle: 147 Change-Id: I5678002ac84965a80f5e63635151032e6c293194 2014-03-17 08:07:53 +00:00			`display: none;`
			`}`

Update for OOUI OptionWidget (and subclasses) changes OptionWidget constructor now accepts a 'data' config option instead of a separate 'data' parameter. See I7ee78b6d. Change-Id: Ie54e9db788cbe846cd2d173498c7fe17bafc126e 2014-11-22 00:01:29 +00:00			`.oo-ui-optionWidget {`
Add share panel, replace reuse Mingle: 147 Change-Id: I5678002ac84965a80f5e63635151032e6c293194 2014-03-17 08:07:53 +00:00			`@tab-border-height: 3px;`
			`@highlighted-tab-color: rgb(225, 243, 255);`
			`@selected-tab-color: rgb(0, 113, 188);`

			`display: inline-block;`
			`padding: 10px 25px;`

			`font-size: 1.2em;`

			`&.oo-ui-optionWidget-highlighted {`
			`border-bottom: (@tab-border-height - @divider-border-height) solid @highlighted-tab-color;`
			`}`

			`&.oo-ui-optionWidget-selected,`
			`&.oo-ui-optionWidget-highlighted.oo-ui-optionWidget-selected {`
			`border-bottom: @tab-border-height solid @selected-tab-color;`
			`}`

			`&:first-child {`
			`.box-round(@border-radius 0 0 0);`
			`}`
			`}`
			`}`

Use mw-mmv CSS prefix consistently for all things With apologies to anyone who gets a hundred merge conflicts because of this :) We had several different prefix styles (mlb-, mw-mlb-, mw-mmv-, mw-mmv-mmv-, a few unprefixed), which was getting annoying, and will be confusing to wiki editors who are trying to figure out where a given style comes from. Such changes are better done before going live because it breaks all local CSS tweaks on the wiki, so I am renaming things now (also removing some stuff which wasnt used anywhere). Change-Id: I00447a25f0028e234169c6db941bedc99622eb8d 2014-03-31 21:33:12 +00:00			`.mw-mmv-reuse-pane {`
Add share panel, replace reuse Mingle: 147 Change-Id: I5678002ac84965a80f5e63635151032e6c293194 2014-03-17 08:07:53 +00:00			`display: none;`
Make the reuse button part of the canvas Moves it out of stripeButtons and into canvasButtons. Will move download to its own thing later. Change-Id: Iaf18914b29a6283c3bade954f1adb3f206c9c911 Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/834 2014-09-12 18:05:13 +00:00			`padding: 20px;`
Add share panel, replace reuse Mingle: 147 Change-Id: I5678002ac84965a80f5e63635151032e6c293194 2014-03-17 08:07:53 +00:00
			`&.active {`
			`display: block;`
			`}`
			`}`

Make the download pane into its own dialog Change-Id: Ia92545ed1ef7f2e4ba7934c682eef684a22ca17f Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/841 2014-09-16 20:33:05 +00:00			`.mw-mmv-dialog-down-arrow {`
Move dialogs to the left, make arrows point right Change-Id: If8fc4ca5f902b3dc3271a33c44554d4e46faadb8 2014-09-18 20:37:02 +00:00			`bottom: @metadatabar-above-fold-height + @progress-bar-height + 5px;`
Add share panel, replace reuse Mingle: 147 Change-Id: I5678002ac84965a80f5e63635151032e6c293194 2014-03-17 08:07:53 +00:00			`}`
			`}`