Merge pull request #3101 from edx/talbs/ui-disabled

UI: Disabled Utility Classes

cms/static/sass/_base.scss

@@ -782,12 +782,20 @@ hr.divide {
 // ====================
 
 // basic utility
+
+// UI - semantically hide text
 .sr {
   @extend %cont-text-sr;
 }
 
+// UI - faking a link's behavior
 .fake-link {
-  cursor: pointer;
+  @extend %ui-fake-link;
+}
+
+// UI - disabled
+.is-disabled {
+  @extend %ui-disabled;
 }
 
 .non-list {

cms/static/sass/elements/_controls.scss

 // studio - elements - UI controls
 // ====================
 
+// ====================
+
+// general actions
+%action {
+  @extend %ui-fake-link;
+
+  &.is-disabled {
+    @extend %ui-disabled;
+    -webkit-filter: grayscale(65%);
+    opacity: 0.65;
+  }
+}
+
+// ====================
+
 // gray primary button
 %btn-primary-gray {
   @extend %ui-btn-primary;

cms/static/sass/views/_unit.scss

@@ -1038,6 +1038,7 @@ body.unit {
     padding: $baseline/2 $baseline;
   }
 
+
   .unit-actions {
     border-bottom: none;
     padding-bottom: 0;
@@ -1055,8 +1056,16 @@ body.unit {
     div {
       margin-top: 15px;
     }
-  }
 
+    // actions - publish/edit
+    .publish-draft {
+      @extend %action;
+    }
+
+    .create-draft {
+      @extend %action;
+    }
+  }
 
 
   input[type="radio"] {

common/static/js/spec/CSS3_workarounds_spec.js

+describe("CSS3 workarounds", function() {
+	describe("pointer-events", function() {
+		beforeEach(function() {
+			var html = "<a href='#' class='ui-disabled'>What wondrous life in this I lead</a>";
+			setFixtures(html);
+		});
+
+		it("should not prevent default when pointerEvents is supported", function() {
+			// In case this test suite is being run in a browser where
+			// 'pointerEvents' is not supported, mock out document.body.style
+			// so that it includes 'pointerEvents'
+			var mockBodyStyle = document.body.style;
+			if (!("pointerEvents" in mockBodyStyle)) {
+				mockBodyStyle["pointerEvents"] = "";
+			};
+
+			pointerEventsNone(".ui-disabled", mockBodyStyle);
+			spyOnEvent(".ui-disabled", "click");
+			$(".ui-disabled").click();
+			expect("click").not.toHaveBeenPreventedOn(".ui-disabled");
+		});
+
+		it("should prevent default when pointerEvents is not Supported", function() {
+			// mock document.body.style so it does not include 'pointerEvents'
+			var mockBodyStyle = {},
+			    bodyStyleKeys = Object.keys(document.body.style);
+			for (var index = 0; index < bodyStyleKeys.length; index++) {
+				var key = bodyStyleKeys[index];
+				if (key !== "pointerEvents") {
+					mockBodyStyle[key] = document.body.style[key];
+				};
+			};
+
+			pointerEventsNone(".ui-disabled", mockBodyStyle);
+			spyOnEvent(".ui-disabled", "click");
+			$(".ui-disabled").click();
+			expect("click").toHaveBeenPreventedOn(".ui-disabled");
+		});
+	});
+});

common/static/js/src/CSS3_workarounds.js

+// A file for JS workarounds for CSS3 features that are not
+// supported in older browsers
+
+var pointerEventsNone = function (selector, supportedStyles) {
+	// Check to see if the brower supports 'pointer-events' css rule.
+	// If it doesn't, use javascript to stop the link from working
+	// when clicked.
+	$(selector).click(function (event) {
+		if (!('pointerEvents' in supportedStyles)) {
+			event.preventDefault();
+		};
+	});
+};
+
+$(function () {
+	pointerEventsNone('.ui-disabled', document.body.styles);
+});

common/static/sass/_mixins.scss

@@ -106,6 +106,7 @@
 %ui-disabled {
   pointer-events: none;
   outline: none;
+  cursor: default;
 }
 
 // extends - UI - depth levels

lms/static/sass/base/_base.scss

@@ -222,10 +222,6 @@ mark {
   }
 }
 
-.sr {
-  @extend %text-sr;
-}
-
 .help-tab {
   @include transform(rotate(-90deg));
   @include transform-origin(0 0);
@@ -286,7 +282,19 @@ mark {
   height: 150px;
 }
 
-// ui - skipnav
+// ====================
+
+// UI - disabled state
+.is-disabled {
+  @extend %ui-disabled;
+}
+
+// UI - semantically hide text
+.sr {
+  @extend %text-sr;
+}
+
+// UI - skipnav
 .nav-skip {
   display: block;
   position: absolute;

lms/static/sass/base/_mixins.scss

@@ -87,6 +87,7 @@
 %ui-disabled {
   pointer-events: none;
   outline: none;
+  cursor: default;
 }
 
 // extends - UI - depth levels