jenkins-bot has submitted this change and it was merged.
Change subject: Cleanup tool styles
......................................................................
Cleanup tool styles
Objectives:
* Make drop down tools look more like buttons and less like inputs, since they
aren't text input and are buttons
* Make context toolbars inside surface widgets render correctly
* Show outlines of groups on hover to hint tool relationships
* Make neighboring active tools look cleaner
Changes:
ve.ui.Tool.css
* Merge ButtonTool and DropdownTool styles as much as possible
* Add styles for DropdownTool active states
* Only round the corners of the first and last tool in a group
* Soften the borders between consecutive active tools
ve.ui.Toolbar.css
* Add border to groups on hover
ve.ui.Widget.css
* Isolate surface widget toolbar styles by using stricter selector
ve.ui.Tool.js
* Fix incorrect capitalization of class name
ve.ui.SurfaceWidget.js
* Add classes to toolbar and surface for better style targeting
Change-Id: Ib5ae8f705ef1e9c481e5bdf8c8dcef9c1eb22c4d
---
M modules/ve/ui/styles/ve.ui.Tool.css
M modules/ve/ui/styles/ve.ui.Toolbar.css
M modules/ve/ui/styles/ve.ui.Widget.css
M modules/ve/ui/ve.ui.Tool.js
M modules/ve/ui/widgets/ve.ui.SurfaceWidget.js
5 files changed, 76 insertions(+), 66 deletions(-)
Approvals:
Catrope: Looks good to me, approved
jenkins-bot: Verified
diff --git a/modules/ve/ui/styles/ve.ui.Tool.css
b/modules/ve/ui/styles/ve.ui.Tool.css
index 8d4d697..ec6b5eb 100644
--- a/modules/ve/ui/styles/ve.ui.Tool.css
+++ b/modules/ve/ui/styles/ve.ui.Tool.css
@@ -5,51 +5,47 @@
* @license The MIT License (MIT); see LICENSE.txt
*/
-/* ve.ui.ButtonTool */
+/* ve.ui.Tool */
-.ve-ui-buttonTool {
+.ve-ui-tool {
+ position: relative;
display: inline-block;
+ margin: -1px 0 -1px -1px;
+}
+
+.ve-ui-tool:first-child {
+ border-top-left-radius: 0.25em;
+ border-bottom-left-radius: 0.25em;
+}
+
+.ve-ui-tool:last-child {
+ margin-right: -1px;
+ border-top-right-radius: 0.25em;
+ border-bottom-right-radius: 0.25em;
+}
+
+/* ve.ui.ButtonTool */
+/* ve.ui.DropdownTool */
+
+.ve-ui-buttonTool-active:not(.ve-ui-widget-disabled) +
.ve-ui-buttonTool-active:not(.ve-ui-widget-disabled) {
+ border-left-color: rgba(0,0,0,0.1);
+}
+
+.ve-ui-dropdownTool,
+.ve-ui-buttonTool {
border: solid 1px transparent;
- border-radius: 0.125em;
cursor: pointer;
vertical-align: top;
+}
+
+.ve-ui-dropdownTool {
+ border-color: rgba(0,0,0,0.1);
}
.ve-ui-buttonTool {
padding: 0.25em;
height: 1.5em;
width: 1.5em;
-}
-
-.ve-ui-buttonTool:hover {
- border-color: #eee;
-}
-
-.ve-ui-buttonTool-active:hover {
- border-color: #ccc;
-}
-
-.ve-ui-buttonTool:active,
-.ve-ui-buttonTool-active {
- border-color: #ddd;
- /* @embed */
- background-image: url(images/fade-down.png);
- background-position: left top;
- background-repeat: repeat-x;
- box-shadow: inset 0 0.07em 0.07em 0 rgba(0, 0, 0, 0.07);
-}
-
-.ve-ui-buttonTool.ve-ui-widget-disabled:active {
- background-image: none;
- box-shadow: none;
-}
-
-.ve-ui-buttonTool.ve-ui-widget-disabled:hover {
- border-color: transparent;
-}
-
-.ve-ui-buttonTool.ve-ui-widget-disabled {
- cursor: default;
}
.ve-ui-buttonTool-icon {
@@ -59,31 +55,6 @@
background-position: center center;
background-repeat: no-repeat;
opacity: 0.8;
-}
-
-.ve-ui-buttonTool:not(.ve-ui-widget-disabled):hover .ve-ui-buttonTool-icon {
- opacity: 1;
-}
-
-.ve-ui-widget-disabled .ve-ui-buttonTool-icon {
- opacity: 0.2;
-}
-
-/* ve.ui.DropdownTool */
-
-.ve-ui-dropdownTool {
- position: relative;
- display: inline-block;
- cursor: pointer;
- vertical-align: top;
- border: solid 1px #ddd;
- border-radius: 0.25em;
- background-color: white;
- box-shadow: inset 0 0.07em 0.07em 0 rgba(0, 0, 0, 0.07);
-}
-
-.ve-ui-dropdownTool:hover {
- border-color: #ccc;
}
.ve-ui-dropdownTool-label {
@@ -109,10 +80,6 @@
opacity: 0.8;
}
-.ve-ui-dropdownTool:hover .ve-ui-dropdownTool-icon {
- opacity: 1;
-}
-
.ve-ui-dropdownTool .ve-ui-menuWidget {
left: -1px;
top: 2.5em;
@@ -123,6 +90,40 @@
display: block;
padding: 0.33em 0 0.33em 0;
}
+
+.ve-ui-buttonTool:hover:not(.ve-ui-widget-disabled),
+.ve-ui-dropdownTool:hover:not(.ve-ui-widget-disabled) {
+ border-color: rgba(0,0,0,0.2);
+}
+
+.ve-ui-buttonTool:hover:not(.ve-ui-widget-disabled) .ve-ui-buttonTool-icon,
+.ve-ui-dropdownTool:hover:not(.ve-ui-widget-disabled) .ve-ui-dropdownTool-icon
{
+ opacity: 1;
+}
+
+.ve-ui-buttonTool:active:not(.ve-ui-widget-disabled),
+.ve-ui-buttonTool-active:not(.ve-ui-widget-disabled),
+.ve-ui-dropdownTool:active:not(.ve-ui-widget-disabled),
+.ve-ui-dropdownTool-active:not(.ve-ui-widget-disabled) {
+ /* @embed */
+ background-image: url(images/fade-down.png);
+ background-position: left top;
+ background-repeat: repeat-x;
+ box-shadow: inset 0 0.07em 0.07em 0 rgba(0, 0, 0, 0.07);
+ border-color: rgba(0,0,0,0.2);
+}
+
+.ve-ui-buttonTool.ve-ui-widget-disabled,
+.ve-ui-dropdownTool.ve-ui-widget-disabled {
+ cursor: default;
+}
+
+.ve-ui-widget-disabled .ve-ui-buttonTool-icon,
+.ve-ui-widget-disabled .ve-ui-dropdownTool-icon {
+ opacity: 0.2;
+}
+
+/* ve.ui.FormatDropdownTool */
.ve-ui-dropdownTool-format {
width: 8em;
@@ -165,3 +166,4 @@
.ve-ui-dropdownTool-format .ve-ui-optionWidget[rel="preformatted"]
.ve-ui-labeledElement-label {
font-family: monospace, "Courier New";
}
+
diff --git a/modules/ve/ui/styles/ve.ui.Toolbar.css
b/modules/ve/ui/styles/ve.ui.Toolbar.css
index 673cfb5..de10cb8 100644
--- a/modules/ve/ui/styles/ve.ui.Toolbar.css
+++ b/modules/ve/ui/styles/ve.ui.Toolbar.css
@@ -55,6 +55,12 @@
display: inline-block;
margin: 0.3em;
vertical-align: middle;
+ border-radius: 0.25em;
+ border: solid 1px transparent;
+}
+
+.ve-ui-toolbar-group:hover {
+ border-color: rgba(0,0,0,0.05);
}
.ve-ui-toolbar-label {
diff --git a/modules/ve/ui/styles/ve.ui.Widget.css
b/modules/ve/ui/styles/ve.ui.Widget.css
index a1e9e1e..2bf8ef3 100644
--- a/modules/ve/ui/styles/ve.ui.Widget.css
+++ b/modules/ve/ui/styles/ve.ui.Widget.css
@@ -564,11 +564,11 @@
/* ve.ui.SurfaceWidget.js */
-.ve-ui-surfaceWidget .ve-ui-toolbar {
+.ve-ui-surfaceWidget-toolbar {
font-size: 1.25em;
}
-.ve-ui-surfaceWidget .ve-ui-toolbar-bar {
+.ve-ui-surfaceWidget-toolbar .ve-ui-toolbar-bar {
border: solid 1px #ddd;
border-radius: 0.25em;
border-bottom-right-radius: 0;
diff --git a/modules/ve/ui/ve.ui.Tool.js b/modules/ve/ui/ve.ui.Tool.js
index 215e843..5ae3ab5 100644
--- a/modules/ve/ui/ve.ui.Tool.js
+++ b/modules/ve/ui/ve.ui.Tool.js
@@ -29,7 +29,7 @@
// Initialization
this.setTitle();
- this.$.addClass( 've-ui-Tool' );
+ this.$.addClass( 've-ui-tool' );
};
/* Inheritance */
diff --git a/modules/ve/ui/widgets/ve.ui.SurfaceWidget.js
b/modules/ve/ui/widgets/ve.ui.SurfaceWidget.js
index 480d5a8..f947491 100644
--- a/modules/ve/ui/widgets/ve.ui.SurfaceWidget.js
+++ b/modules/ve/ui/widgets/ve.ui.SurfaceWidget.js
@@ -30,6 +30,8 @@
this.toolbar = new ve.ui.SurfaceToolbar( this.surface, { '$$': this.$$
} );
// Initialization
+ this.surface.$.addClass( 've-ui-surfaceWidget-surface' );
+ this.toolbar.$.addClass( 've-ui-surfaceWidget-toolbar' );
this.$
.addClass( 've-ui-surfaceWidget' )
.append( this.toolbar.$, this.surface.$ );
--
To view, visit https://gerrit.wikimedia.org/r/77470
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: Ib5ae8f705ef1e9c481e5bdf8c8dcef9c1eb22c4d
Gerrit-PatchSet: 4
Gerrit-Project: mediawiki/extensions/VisualEditor
Gerrit-Branch: master
Gerrit-Owner: Trevor Parscal <[email protected]>
Gerrit-Reviewer: Catrope <[email protected]>
Gerrit-Reviewer: jenkins-bot
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
