Nirzar has uploaded a new change for review.
https://gerrit.wikimedia.org/r/206161
Change subject: VE toolbar polish
......................................................................
VE toolbar polish
This tries to solve some of the issues with VE toolbar. adding hover states to
tools, better seperation of tools, dropdowns are anchored so you can see the
parent menu. flush buttons.
P.S. This is not complete.
Change-Id: I32d5e094c83f6c704672dd2cb52517717141366f
---
M demos/styles/demo.css
M src/themes/mediawiki/tools.less
2 files changed, 358 insertions(+), 275 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/oojs/ui refs/changes/61/206161/1
diff --git a/demos/styles/demo.css b/demos/styles/demo.css
index adbb522..4951f9c 100644
--- a/demos/styles/demo.css
+++ b/demos/styles/demo.css
@@ -77,13 +77,15 @@
float: right;
font-size: 0.8em;
vertical-align: top;
- padding: 0.25em;
+ //padding: 0.25em;
}
.oo-ui-demo-toolbar-actionButtons > .oo-ui-buttonElement-framed {
+/*
margin-left: 0.25em;
margin-right: 0.25em;
margin-top: 0.2em;
+*/
}
/* Icons demo */
diff --git a/src/themes/mediawiki/tools.less b/src/themes/mediawiki/tools.less
index 952afe3..44b7910 100644
--- a/src/themes/mediawiki/tools.less
+++ b/src/themes/mediawiki/tools.less
@@ -1,353 +1,434 @@
@import 'common';
.theme-oo-ui-toolbar () {
- &-bar {
- border-bottom: 4px solid rgba(0, 0, 0, 0.15);
- background: #fff;
+ &-bar {
+ border-bottom: 1px solid #ccc;
+ background-color: #f5f5f5;
+ font-weight: 500;
+ color: #555;
+ .oo-ui-toolbar-bar {
+ border: none;
+ background: none;
+ }
+ }
- .oo-ui-toolbar-bar {
- border: none;
- background: none;
- }
- }
-
- &-shadow {
- display: none;
- }
+ &-shadow {
+
.oo-ui-background-image('@{oo-ui-default-image-path}/toolbar-shadow.png');
+ bottom: -9px;
+ height: 9px;
+ opacity: 0.125;
+ //.oo-ui-transition(opacity 500ms ease-in-out);
+ }
}
.theme-oo-ui-tool () {}
.theme-oo-ui-popupTool () {
- .oo-ui-popupWidget {
- /* @noflip */
- margin-left: 1.25em;
- font-size: 0.8em;
- }
+ .oo-ui-popupWidget {
+ /* @noflip */
+ margin-left: 1.25em;
+ font-size: 0.9em;
+ }
}
.theme-oo-ui-toolGroupTool () {
- > .oo-ui-popupToolGroup {
- margin: 0;
- }
+ > .oo-ui-popupToolGroup {
+ border: 0;
+ border-radius: 0;
+ margin: 0;
+ }
- // Like .oo-ui-tool-link in barToolGroup
- > .oo-ui-popupToolGroup > .oo-ui-popupToolGroup-handle {
- height: 1.5em;
- padding: 0.25em;
+ // Like .oo-ui-tool in barToolGroup
+ &:first-child > .oo-ui-popupToolGroup {
+ //border-top-left-radius: 0.25em;
+ //border-bottom-left-radius: 0.25em;
+ }
- .oo-ui-iconElement-icon {
- height: 1.5em;
- width: 1.5em;
- opacity: 0.8;
- }
- }
+ &:last-child > .oo-ui-popupToolGroup {
+ //border-top-right-radius: 0.25em;
+ //border-bottom-right-radius: 0.25em;
+ }
- > .oo-ui-popupToolGroup.oo-ui-labelElement >
.oo-ui-popupToolGroup-handle {
- .oo-ui-labelElement-label {
- line-height: 2.1em; // 0.5em less
- }
- }
+ // Like .oo-ui-tool-link in barToolGroup
+ > .oo-ui-popupToolGroup > .oo-ui-popupToolGroup-handle {
+ height: 2em;
+ padding: 0.25em;
+
+ .oo-ui-iconElement-icon {
+ height: 2em;
+ width: 1.5em;
+ }
+ }
+
+ > .oo-ui-popupToolGroup.oo-ui-labelElement > .oo-ui-popupToolGroup-handle {
+ .oo-ui-labelElement-label {
+ line-height: 2.1em; // 0.5em less
+ }
+ }
}
.theme-oo-ui-toolGroup () {
- margin: 0.3em;
+ //margin: 0.3em;
+ //border-radius: 0.25em;
+ border-radius: 0px;
+ //border: 1px solid transparent;
+ //.oo-ui-transition(border-color 300ms ease-in-out);
- .oo-ui-toolbar-narrow & {
- + .oo-ui-toolGroup {
- margin-left: 0;
- }
- }
+ .oo-ui-toolbar-narrow & {
+ + .oo-ui-toolGroup {
+ margin-left: 0;
+ }
+ }
+ .oo-ui-toolGroup {
+ .oo-ui-widget-enabled {
+ border-right: none !important;
+ }
+ }
- &.oo-ui-widget-enabled {
- .oo-ui-tool-link {
- .oo-ui-tool-title {
- color: #000;
- }
+ &.oo-ui-widget-enabled {
+ border-right: 1px solid #ccc;
+
+ &:hover {
+ //border-color: rgba(0,0,0,0.1);
+ //background-color: rgba(255,255,255,0.5);
+ }
- .oo-ui-tool-accel {
- color: #888;
- }
- }
- }
+ .oo-ui-tool-link .oo-ui-tool-title {
+ color: #000;
+ }
+ }
}
.theme-oo-ui-barToolGroup () {
- > .oo-ui-toolGroup-tools > .oo-ui-tool {
- > .oo-ui-tool-link {
- height: 1.5em;
- padding: 0.25em;
+ > .oo-ui-toolGroup-tools > .oo-ui-tool {
+ //margin: -1px 0 -1px -1px;
+ //border: 1px solid transparent;
- .oo-ui-iconElement-icon {
- height: 1.5em;
- width: 1.5em;
- opacity: 0.8;
- }
- }
- }
+ &:first-child {
+ //border-top-left-radius: 0.25em;
+ //border-bottom-left-radius: 0.25em;
+ }
- &.oo-ui-widget-enabled > .oo-ui-toolGroup-tools > .oo-ui-tool {
- &.oo-ui-tool-active {
- &.oo-ui-widget-enabled {
- background-color: #eee;
- }
- }
+ &:last-child {
+ //margin-right: -1px;
+ //border-top-right-radius: 0.25em;
+ //border-bottom-right-radius: 0.25em;
+ }
- &.oo-ui-widget-disabled > .oo-ui-tool-link {
- .oo-ui-iconElement-icon {
- opacity: 0.2;
- }
- }
+ > .oo-ui-tool-link {
+ height: 1.5em;
+ padding: 0.5em;
- &.oo-ui-widget-enabled {
- > .oo-ui-tool-link .oo-ui-iconElement-icon {
- opacity: 0.8;
- }
+ .oo-ui-iconElement-icon {
+ height: 1.5em;
+ width: 1.5em;
+ }
+ }
+ }
- &:hover > .oo-ui-tool-link .oo-ui-iconElement-icon {
- opacity: 1;
- }
- }
- }
+ &.oo-ui-widget-enabled > .oo-ui-toolGroup-tools > .oo-ui-tool {
+ &.oo-ui-widget-enabled:hover {
+ // 1337 hover tool
+ border-color: rgba(0,0,0,0.2);
+ background-color: #fff;
+ }
- &.oo-ui-widget-disabled > .oo-ui-toolGroup-tools > .oo-ui-tool {
- > .oo-ui-tool-link {
- .oo-ui-iconElement-icon {
- opacity: 0.2;
- }
- }
- }
+ &.oo-ui-tool-active {
+ &.oo-ui-widget-enabled {
+ border-color: rgba(0,0,0,0.2);
+ box-shadow: inset 0 0.07em 0.07em 0 rgba(0, 0, 0, 0.07);
+ background-color: #fff; //1337 bgcolor on click
+ }
+
+ &.oo-ui-widget-enabled + .oo-ui-tool-active.oo-ui-widget-enabled {
+ border-left-color: rgba(0,0,0,0.1);
+ }
+ }
+
+ &.oo-ui-widget-disabled > .oo-ui-tool-link {
+ .oo-ui-iconElement-icon {
+ opacity: 0.2;
+ }
+ }
+
+ &.oo-ui-widget-enabled {
+ &:hover > .oo-ui-tool-link .oo-ui-iconElement-icon {
+ opacity: 1;
+ }
+ }
+ }
+
+ &.oo-ui-widget-disabled > .oo-ui-toolGroup-tools > .oo-ui-tool {
+ > .oo-ui-tool-link {
+ .oo-ui-iconElement-icon {
+ opacity: 0.2;
+ }
+ }
+ }
}
.theme-oo-ui-popupToolGroup () {
- height: 2em;
- min-width: 2em;
+ height: 2.5em;
+ min-width: 2em;
- .oo-ui-toolbar-narrow & {
- min-width: 1.5em;
- }
+ .oo-ui-toolbar-narrow & {
+ min-width: 1.5em;
+ }
- &.oo-ui-iconElement {
- min-width: 2.5em;
+ &.oo-ui-iconElement {
+ min-width: 2.5em;
+ //opacity: 0.8;
+ .oo-ui-toolbar-narrow & {
+ min-width: 2em;
+ }
+ }
- .oo-ui-toolbar-narrow & {
- min-width: 2em;
- }
- }
+ &.oo-ui-indicatorElement.oo-ui-iconElement {
+ min-width: 3.5em;
- &.oo-ui-indicatorElement.oo-ui-iconElement {
- min-width: 3.5em;
+ .oo-ui-toolbar-narrow & {
+ min-width: 3em;
+ }
+ }
- .oo-ui-toolbar-narrow & {
- min-width: 3em;
- }
- }
+ &.oo-ui-labelElement {
+ .oo-ui-popupToolGroup-handle .oo-ui-labelElement-label {
+ line-height: 2.6em;
+ font-size: 0.8em;
+ margin: 0 1em;
+
+ .oo-ui-toolbar-narrow & {
+ margin: 0 0.5em;
+ }
+ }
- &.oo-ui-labelElement {
- .oo-ui-popupToolGroup-handle .oo-ui-labelElement-label {
- line-height: 2.6em;
- font-size: 0.8em;
- margin: 0 1em;
+ &.oo-ui-iconElement .oo-ui-popupToolGroup-handle
.oo-ui-labelElement-label {
+ margin-left: 3em;
- .oo-ui-toolbar-narrow & {
- margin: 0 0.5em;
- }
- }
+ .oo-ui-toolbar-narrow & {
+ margin-left: 2.5em;
+ }
+ }
- &.oo-ui-iconElement .oo-ui-popupToolGroup-handle
.oo-ui-labelElement-label {
- margin-left: 3em;
+ &.oo-ui-indicatorElement .oo-ui-popupToolGroup-handle
.oo-ui-labelElement-label {
+ margin-right: 2.25em;
- .oo-ui-toolbar-narrow & {
- margin-left: 2.5em;
- }
- }
+ .oo-ui-toolbar-narrow & {
+ margin-right: 1.75em;
+ }
+ }
+ }
- &.oo-ui-indicatorElement .oo-ui-popupToolGroup-handle
.oo-ui-labelElement-label {
- margin-right: 2.25em;
+ &-handle {
+ .oo-ui-indicatorElement-indicator {
+ width: 0.75em;
+ height: 1.3em;
+ margin: 0.625em;
+ top: 0;
+ right: 0;
+ opacity: 0.3;
+
+ .oo-ui-toolbar-narrow & {
+ right: -0.25em;
+ }
+ }
+ .oo-ui-iconElement-icon {
+ width: 1.5em;
+ height: 2em;
+ margin: 0.25em;
+ top: 0;
+ left: 0.25em;
+ opacity:0.8;
+ .oo-ui-toolbar-narrow & {
+ left: 0;
+ }
+ }
+ }
- .oo-ui-toolbar-narrow & {
- margin-right: 1.75em;
- }
- }
- }
+ &-header {
+ line-height: 2.6em;
+ font-size: 0.8em;
+ margin: 0 0.6em;
+ font-weight: bold;
+ }
- &-handle {
- .oo-ui-indicatorElement-indicator {
- width: 0.75em;
- height: 0.75em;
- margin: 0.625em;
- top: 0;
- right: 0;
+ &-active.oo-ui-widget-enabled {
+ border-bottom-left-radius: 0;
+ border-bottom-right-radius: 0;
+ box-shadow: inset 0 0.07em 0.07em 0 rgba(0, 0, 0, 0.07);
+ background-color: #fff; // 1337 background color on click
- .oo-ui-toolbar-narrow & {
- right: -0.25em;
- }
- }
- .oo-ui-iconElement-icon {
- width: 1.5em;
- height: 1.5em;
- margin: 0.25em;
- top: 0;
- left: 0.25em;
+ }
- .oo-ui-toolbar-narrow & {
- left: 0;
- }
- }
- }
+ .oo-ui-toolGroup-tools {
+ top: 2.5em;
+ margin: 0 -1px;
+ border: 1px solid #ccc;
+ background-color: white;
+ box-shadow: 0 0.25em 1em rgba(0,0,0,0.25);
+ }
- &-header {
- line-height: 2.6em;
- font-size: 0.8em;
- margin: 0 0.6em;
- font-weight: bold;
- }
+ .oo-ui-tool-link {
+ padding: 0.25em 0.5em;
+ box-sizing: border-box;
+ .oo-ui-iconElement-icon {
+ height: 2em;
+ width: 1.5em;
+ min-width: 1.5em;
+ }
- .oo-ui-toolGroup-tools {
- top: 2em;
- background-color: white;
- }
+ .oo-ui-tool-title {
+ padding-left: 0.5em;
+ }
- .oo-ui-tool-link {
- padding: 0.25em 0 0.25em 0.25em;
+ .oo-ui-tool-accel,
+ .oo-ui-tool-title {
+ line-height: 2em;
+ font-size: 0.8em;
+ }
- .oo-ui-iconElement-icon {
- height: 1.5em;
- width: 1.5em;
- min-width: 1.5em;
- }
-
- .oo-ui-tool-title {
- padding-left: 0.5em;
- }
-
- .oo-ui-tool-accel,
- .oo-ui-tool-title {
- line-height: 2em;
- font-size: 0.8em;
- }
- }
+ .oo-ui-tool-accel {
+ color: #888;
+ }
+ }
}
.theme-oo-ui-listToolGroup () {
- .oo-ui-tool {
- padding: 0 0.75em 0 0.25em;
+ .oo-ui-toolGroup-tools {
+ //padding: 0.5em;
+ }
- &.oo-ui-widget-enabled {
- &:hover {
- background-color: #eeeeee;
- }
- }
+ &.oo-ui-popupToolGroup-active {
+ border-color: rgba(0,0,0,0.2);
+ }
- &-active {
- &.oo-ui-widget-enabled,
- &.oo-ui-widget-enabled:hover {
- background-color: #d0d0d0;
- }
- }
+ .oo-ui-tool {
- &.oo-ui-widget-disabled {
- .oo-ui-tool-link {
- .oo-ui-tool-title {
- color: #ccc;
- }
+ &-active {
+ &.oo-ui-widget-enabled {
+ border-color: rgba(0,0,0,0.1);
+ box-shadow: inset 0 0.07em 0.07em 0 rgba(0, 0, 0, 0.07);
+ background-color: #fff; //1337 bgcolor on click
- .oo-ui-tool-accel {
- color: #ddd;
- }
- .oo-ui-iconElement-icon {
- opacity: 0.2;
- }
- }
- }
- }
+ + .oo-ui-tool-active.oo-ui-widget-enabled {
+ border-top-color: rgba(0,0,0,0.1);
+ }
+ &:hover {
+ border-color: rgba(0,0,0,0.2);
+ }
+ }
+ }
- &.oo-ui-widget-disabled {
- color: #ccc;
+ &.oo-ui-widget-enabled {
+ &:hover {
+ border-color: rgba(0,0,0,0.2);
+ background-color: #eee;
+ }
+ &:hover .oo-ui-tool-link .oo-ui-iconElement-icon {
+ opacity: 1;
+ }
+ }
- .oo-ui-indicatorElement-indicator,
- .oo-ui-iconElement-icon {
- opacity: 0.2;
- }
- }
+ &.oo-ui-widget-disabled {
+ .oo-ui-tool-link {
+ .oo-ui-tool-title {
+ color: #ccc;
+ }
- .oo-ui-toolGroup-tools {
- padding: 0.25em 0 0.25em 0;
- border: 1px solid #aaa;
- border-radius: 0.2em;
- box-shadow: inset 0 -0.2em 0 0 rgba(0,0,0,0.2), 0 0.1em 0 0
rgba(0,0,0,0.1);
- }
+ .oo-ui-tool-accel {
+ color: #ddd;
+ }
+
+ .oo-ui-iconElement-icon {
+ opacity: 0.2;
+ }
+ }
+ }
+ }
+
+ &.oo-ui-widget-disabled {
+ color: #ccc;
+ .oo-ui-indicatorElement-indicator,
+ .oo-ui-iconElement-icon {
+ opacity: 0.2;
+ }
+ }
+}
+
+
+.oo-ui-popupToolGroup-handle {
+ padding: 0.25em;
+ height: 2em;
+ &:hover {
+ background-color: #fff; }
+
}
.theme-oo-ui-menuToolGroup () {
- border: 1px solid #ccc;
- border-radius: 0.1em;
+ border-color: rgba(0,0,0,0.1);
- .oo-ui-popupToolGroup-handle {
- min-width: 8em;
+ .oo-ui-popupToolGroup-handle {
+ min-width: 8em;
- .oo-ui-toolbar-narrow & {
- min-width: 6.5em;
- }
- }
- .oo-ui-toolGroup-tools {
- margin-left: -1px;
- padding: 0.25em 0 0.25em 0;
- border: 1px solid #aaa;
- border-radius: 0.2em;
- border-top-left-radius: 0;
- box-shadow: inset 0 -0.2em 0 0 rgba(0,0,0,0.2), 0 0.1em 0 0
rgba(0,0,0,0.1);
- }
+ .oo-ui-toolbar-narrow & {
+ min-width: 6.5em;
+ }
+ }
- &.oo-ui-widget-enabled {
- &:hover {
- border-color: #aaa;
- }
- }
+ .oo-ui-toolGroup-tools {
+ //padding: 0.25em 0 0.25em 0;
+ }
- &.oo-ui-popupToolGroup-active {
- border-color: #aaa;
- }
+ &.oo-ui-widget-enabled {
+ &:hover {
+ border-color: rgba(0,0,0,0.2);
+ }
+ }
- .oo-ui-tool {
- padding: 0 1em 0 0.25em;
+ &.oo-ui-popupToolGroup-active {
+ border-color: rgba(0,0,0,0.25);
+ }
- &-link {
- .oo-ui-iconElement-icon {
- background-image: none;
- }
- }
+ .oo-ui-tool {
+ padding: 0 1em 0 0.25em;
- &-active .oo-ui-tool-link .oo-ui-iconElement-icon {
-
.oo-ui-background-image-svg('@{oo-ui-default-image-path}/icons/check');
- }
+ &-link {
+ .oo-ui-iconElement-icon {
+ background-image: none;
+ }
+ }
- &.oo-ui-widget-enabled {
- &:hover {
- background-color: #eeeeee;
- }
- }
+ &-active .oo-ui-tool-link .oo-ui-iconElement-icon {
+
.oo-ui-background-image-svg('@{oo-ui-default-image-path}/icons/check');
+ }
- &.oo-ui-widget-disabled {
- .oo-ui-tool-link .oo-ui-tool-title {
- color: #ccc;
- }
+ &.oo-ui-widget-enabled {
+ &:hover {
+ background-color: #eee;
+ }
+ }
- .oo-ui-tool-link .oo-ui-iconElement-icon {
- opacity: 0.2;
- }
- }
- }
+ &.oo-ui-widget-disabled {
+ .oo-ui-tool-link .oo-ui-tool-title {
+ color: #ccc;
+ }
- &.oo-ui-widget-disabled {
- color: #ccc;
- border-color: #ccc;
+ .oo-ui-tool-link .oo-ui-iconElement-icon {
+ opacity: 0.2;
+ }
+ }
+ }
- .oo-ui-indicatorElement-indicator,
- .oo-ui-iconElement-icon {
- opacity: 0.2;
- }
- }
+ &.oo-ui-widget-disabled {
+ color: #ccc;
+ border-color: rgba(0,0,0,0.05);
+
+ .oo-ui-indicatorElement-indicator,
+ .oo-ui-iconElement-icon {
+ opacity: 0.2;
+ }
+ }
}
+
--
To view, visit https://gerrit.wikimedia.org/r/206161
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I32d5e094c83f6c704672dd2cb52517717141366f
Gerrit-PatchSet: 1
Gerrit-Project: oojs/ui
Gerrit-Branch: master
Gerrit-Owner: Nirzar <npangar...@wikimedia.org>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
