Studio: further outline UI revisions + PR feedback

* syncing up status-release hover states for outline units
* adjusting in-context editor UI for longer outline titles
* corrects outline incontext editor display regression
* cleaning up unit/container sidebar styling
* removing redundant margin on Outline UI subsections
* selecting text when a user focuses into an incontext-editor input - STUD-2032
This commit is contained in:
Brian Talbot
2014-07-28 15:32:46 -04:00
committed by cahrens
parent 4ee8256c97
commit 9d6d98b326
4 changed files with 28 additions and 10 deletions

View File

@@ -81,7 +81,7 @@ define(["js/views/baseview", "js/views/utils/xblock_utils"],
event.preventDefault();
event.stopPropagation();
this.$el.addClass('is-editing');
input.focus();
input.focus().select();
},
hideInput: function() {

View File

@@ -479,7 +479,6 @@ $outline-indent-width: $baseline;
.outline-subsection {
@extend %outline-item;
@extend %outline-subsection;
margin-bottom: ($baseline/2);
border: 1px solid $gray-l4;
border-left: ($baseline/4) solid $color-draft;
border-top-left-radius: 0;
@@ -529,11 +528,6 @@ $outline-indent-width: $baseline;
border: 1px solid $gray-l4;
padding: ($baseline/4) ($baseline/2);
// STATE: hover/active
&:hover, &:active {
box-shadow: 0 1px 1px $shadow-l2;
}
// header - title
.unit-title {
@extend %t-title7;
@@ -543,5 +537,15 @@ $outline-indent-width: $baseline;
.unit-status {
@extend %outline-item-status;
}
// STATE: hover/active
&:hover, &:active {
box-shadow: 0 1px 1px $shadow-l2;
// status - release
.unit-status .status-release {
opacity: 1.0;
}
}
}

View File

@@ -117,12 +117,16 @@
@extend %bar-module-blue;
}
// CASE: content is draft
&.draft ,
&.is-draft {
// CASE: content has warnings
&.has-warnings {
@extend %bar-module-yellow;
}
// CASE: content has erors
&.has-errors {
@extend %bar-module-red;
}
// CASE: content is staff only
&.staff-only,
&.is-staff-only {
@@ -217,6 +221,7 @@
// location widget
.unit-location {
@extend %bar-module;
border-top: none;
.wrapper-unit-id {

View File

@@ -11,6 +11,15 @@
// TODO: abstract out
.is-editable {
.incontext-editor-value, .incontext-editor-action-wrapper {
vertical-align: top;
}
.incontext-editor-value {
max-width: 80%;
margin-right: ($baseline/10);
}
.incontext-editor-open-action {
@include transition(opacity $tmg-f1 ease-in-out 0);
opacity: 0.0;