From 9d6d98b32639374b4b641a4a3330ed53dac066f6 Mon Sep 17 00:00:00 2001
From: Brian Talbot <btalbot@edx.org>
Date: Mon, 28 Jul 2014 15:32:46 -0400
Subject: [PATCH] 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
---
 .../js/views/xblock_string_field_editor.js       |  2 +-
 cms/static/sass/elements/_modules.scss           | 16 ++++++++++------
 cms/static/sass/views/_container.scss            | 11 ++++++++---
 cms/static/sass/views/_outline.scss              |  9 +++++++++
 4 files changed, 28 insertions(+), 10 deletions(-)

diff --git a/cms/static/js/views/xblock_string_field_editor.js b/cms/static/js/views/xblock_string_field_editor.js
index 9e52c55e52..ad9de8fdaa 100644
--- a/cms/static/js/views/xblock_string_field_editor.js
+++ b/cms/static/js/views/xblock_string_field_editor.js
@@ -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() {
diff --git a/cms/static/sass/elements/_modules.scss b/cms/static/sass/elements/_modules.scss
index 16c5f89bb8..21edc5b5ed 100644
--- a/cms/static/sass/elements/_modules.scss
+++ b/cms/static/sass/elements/_modules.scss
@@ -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;
+    }
+  }
 }
 
diff --git a/cms/static/sass/views/_container.scss b/cms/static/sass/views/_container.scss
index 08b279941e..18b137d6d1 100644
--- a/cms/static/sass/views/_container.scss
+++ b/cms/static/sass/views/_container.scss
@@ -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 {
 
diff --git a/cms/static/sass/views/_outline.scss b/cms/static/sass/views/_outline.scss
index f377d401a1..12a2112381 100644
--- a/cms/static/sass/views/_outline.scss
+++ b/cms/static/sass/views/_outline.scss
@@ -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;