Esanders has uploaded a new change for review.
https://gerrit.wikimedia.org/r/181362
Change subject: Redo VE toolbar styling
......................................................................
Redo VE toolbar styling
A lot of CSS has been moved upstream since this was first written.
It is also possible to simplify the resizing of the toolbar by just
changing the base font size as all sizing in VE is done with ems.
MF's overriding of box-sizing necessitates another override.
Bug: T85072
Change-Id: Ifa646fe392b86ab5c9f4aa03cc3df833e49eab7e
---
M less/modules/editor/VisualEditorOverlay.less
1 file changed, 23 insertions(+), 114 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/MobileFrontend
refs/changes/62/181362/1
diff --git a/less/modules/editor/VisualEditorOverlay.less
b/less/modules/editor/VisualEditorOverlay.less
index debf1ba..6d78c0f 100644
--- a/less/modules/editor/VisualEditorOverlay.less
+++ b/less/modules/editor/VisualEditorOverlay.less
@@ -88,127 +88,36 @@
// Toolbar
.overlay-header-container {
- .overlay-header {
- > .toolbar {
- border-left: 1px solid @grayLight;
- // Expand the toolbar as wide as possible to
limit the size of the
- // overlay-action. (Both are displayed as
table-cells.)
- width: 100%;
-
- .oo-ui-toolbar-bar {
- position: static;
- border: 0;
-
- .oo-ui-toolGroup {
- // FIXME: This resets oo-ui css
and shouldn't be needed. Fix should be applied in oo-ui Agora skin
- margin: 0;
- }
-
- .oo-ui-popupToolGroup {
- &.oo-ui-iconElement {
- height: @headerHeight;
- margin: 0 0 0 1em;
- }
-
- .oo-ui-toolGroup-tools {
- // Position the
dropdown underneath the icon
- top: @headerHeight;
- // FIXME: This should
probably be in oo-ui minerva skin
- background-color: white;
- border: 1px solid
@grayLight;
- box-shadow: 0 .1em .2em
rgba(0, 0, 0, .2);
- }
-
- .oo-ui-widget-enabled >
.oo-ui-tool-title {
- color: @grayDark;
- }
-
- .oo-ui-tool-title {
- font-size: .9em;
- }
- }
-
- // FIXME: Move to oo-ui Agora skin
- .oo-ui-popupToolGroup-handle {
-
.oo-ui-indicatorElement-indicator {
- right: -.6em;
- top: .7em;
- }
- }
-
- // FIXME: Move to oo-ui Agora skin
- .oo-ui-popupToolGroup-header {
- font-size: .9em;
- margin: 0 .8em;
- }
- }
- }
- }
-
- .oo-ui-listToolGroup {
- .oo-ui-tool {
- display: block;
- width: auto;
- }
+ .toolbar {
+ border-left: 1px solid @grayLight;
+ // Expand the toolbar as wide as possible to limit the
size of the
+ // overlay-action. (Both are displayed as table-cells.)
+ width: 100%;
.oo-ui-tool-link {
- display: block;
- padding: 0 1em 0 .1em;
+ // Remove once MF box-sizing is fixed
+ .box-sizing( content-box );
}
- }
-
- .oo-ui-barToolGroup {
- .oo-ui-tool {
- display: block;
- float: left;
- position: relative;
-
- &.oo-ui-iconElement {
- height: @headerHeight;
- margin: 0 0 0 1em;
- min-width: 24px;
- }
-
- &.oo-ui-tool-active {
- background-color: #EDF4FF;
+ .oo-ui-toolbar {
+ // Everything is measured in ems so the easiest
way to scale
+ // is to change the base font size. VE toolbar
is ~2em tall by default.
+ font-size: @headerHeight / 2;
+ .oo-ui-iconElement-icon {
+ .background-size( 32px, 32px );
}
}
-
- .oo-ui-tool-link {
- padding: 0; // reset
-
- // Hide labels for buttons in the toolbar
- .oo-ui-tool-title {
- display: none;
- }
+ .oo-ui-tool-title,
+ .oo-ui-popupToolGroup-header {
+ // Undo font size increase for labels
+ font-size: 0.9 / ( @headerHeight / 2 );
}
- }
-
- // We may want to move these to an oojs-ui theme at some point.
The down-side is
- // that we wouldn't be able to use the @headerHeight LESS
variable.
- .oo-ui-toolbar-tools {
- .oo-ui-tool-link {
- height: 100%;
- .box-sizing( border-box );
+ .oo-ui-toolbar-bar {
+ // Overlay toolbar has its own borders
+ border: 0;
}
-
- // FIXME: Merge with icon and icon-32px classes
- .oo-ui-iconElement-icon {
- width: @headerHeight;
- height: @headerHeight;
- // FIXME: Somehow consolidate ooui classes with
icon and icon-32px classes so this rule is unnecessary
- .background-size( 32px, 32px );
+ .oo-ui-toolGroup {
+ // FIXME: This resets oo-ui css and shouldn't
be needed. Fix should be applied in oo-ui Agora skin
+ margin: 0;
}
- }
-
- // FIXME: Remove these resets once oo-ui supports skinning
- .oo-ui-tool-active:not(.oo-ui-widget-disabled) {
- box-shadow: none;
- border: none;
- }
-
- // FIXME: Remove these resets once oo-ui supports skinning
- .oo-ui-tool:hover:not(.oo-ui-widget-disabled) {
- border: none;
}
}
}
--
To view, visit https://gerrit.wikimedia.org/r/181362
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: Ifa646fe392b86ab5c9f4aa03cc3df833e49eab7e
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/MobileFrontend
Gerrit-Branch: master
Gerrit-Owner: Esanders <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
