Commit 9d6d98b3 by Brian Talbot Committed by cahrens

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
parent 4ee8256c
...@@ -81,7 +81,7 @@ define(["js/views/baseview", "js/views/utils/xblock_utils"], ...@@ -81,7 +81,7 @@ define(["js/views/baseview", "js/views/utils/xblock_utils"],
event.preventDefault(); event.preventDefault();
event.stopPropagation(); event.stopPropagation();
this.$el.addClass('is-editing'); this.$el.addClass('is-editing');
input.focus(); input.focus().select();
}, },
hideInput: function() { hideInput: function() {
......
...@@ -479,7 +479,6 @@ $outline-indent-width: $baseline; ...@@ -479,7 +479,6 @@ $outline-indent-width: $baseline;
.outline-subsection { .outline-subsection {
@extend %outline-item; @extend %outline-item;
@extend %outline-subsection; @extend %outline-subsection;
margin-bottom: ($baseline/2);
border: 1px solid $gray-l4; border: 1px solid $gray-l4;
border-left: ($baseline/4) solid $color-draft; border-left: ($baseline/4) solid $color-draft;
border-top-left-radius: 0; border-top-left-radius: 0;
...@@ -529,11 +528,6 @@ $outline-indent-width: $baseline; ...@@ -529,11 +528,6 @@ $outline-indent-width: $baseline;
border: 1px solid $gray-l4; border: 1px solid $gray-l4;
padding: ($baseline/4) ($baseline/2); padding: ($baseline/4) ($baseline/2);
// STATE: hover/active
&:hover, &:active {
box-shadow: 0 1px 1px $shadow-l2;
}
// header - title // header - title
.unit-title { .unit-title {
@extend %t-title7; @extend %t-title7;
...@@ -543,5 +537,15 @@ $outline-indent-width: $baseline; ...@@ -543,5 +537,15 @@ $outline-indent-width: $baseline;
.unit-status { .unit-status {
@extend %outline-item-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;
}
}
} }
...@@ -117,12 +117,16 @@ ...@@ -117,12 +117,16 @@
@extend %bar-module-blue; @extend %bar-module-blue;
} }
// CASE: content is draft // CASE: content has warnings
&.draft , &.has-warnings {
&.is-draft {
@extend %bar-module-yellow; @extend %bar-module-yellow;
} }
// CASE: content has erors
&.has-errors {
@extend %bar-module-red;
}
// CASE: content is staff only // CASE: content is staff only
&.staff-only, &.staff-only,
&.is-staff-only { &.is-staff-only {
...@@ -217,6 +221,7 @@ ...@@ -217,6 +221,7 @@
// location widget // location widget
.unit-location { .unit-location {
@extend %bar-module; @extend %bar-module;
border-top: none;
.wrapper-unit-id { .wrapper-unit-id {
......
...@@ -11,6 +11,15 @@ ...@@ -11,6 +11,15 @@
// TODO: abstract out // TODO: abstract out
.is-editable { .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 { .incontext-editor-open-action {
@include transition(opacity $tmg-f1 ease-in-out 0); @include transition(opacity $tmg-f1 ease-in-out 0);
opacity: 0.0; opacity: 0.0;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment