From 49946fd9ef47a6e1ea8e8b619a092cf32a3fe288 Mon Sep 17 00:00:00 2001
From: Mihail Maxacov <0xf013@gmail.com>
Date: Mon, 2 Feb 2015 12:02:10 +0200
Subject: [PATCH] fix controls and errors blocks styles

---
 .../content/_in_place_editing.sass            | 94 ++++++++++---------
 .../stylesheets/content/_work_packages.sass   |  3 +-
 .../templates/components/inplace_editor.html  | 34 +++----
 .../templates/work_packages.list.details.html |  5 +-
 .../integration/work-package-details-spec.js  |  2 +-
 5 files changed, 74 insertions(+), 64 deletions(-)

diff --git a/app/assets/stylesheets/content/_in_place_editing.sass b/app/assets/stylesheets/content/_in_place_editing.sass
index f7525419fc..16d2f8f487 100644
--- a/app/assets/stylesheets/content/_in_place_editing.sass
+++ b/app/assets/stylesheets/content/_in_place_editing.sass
@@ -1,5 +1,6 @@
 .inplace-editor
   display: inline
+  font-size: initial
   .ined-input-wrapper-inner
     display: inline
   &.busy
@@ -38,10 +39,9 @@
 
   .ined-input-wrapper
     display: inline
-    input, textarea
-      width: 370px
-    textarea
-      min-height: 200px
+    input
+      width: 90%
+      margin-bottom: -1px
   .ined-read-value
     display: inline
     &.default
@@ -57,32 +57,42 @@
     display: inline
     .ng-invalid
       background: lightpink!important
-  .ined-errors
-    position: absolute
-    line-height: 1.2em
-    width: 251px
-    padding: 5px
-    left: 0
-    bottom: -49px
-    background: white
-    border: 1px solid #cacaca
-    height: 42px
-  .ined-controls
-    position: absolute
-    bottom: -35px
-    right: 0
-    width: 120px
-    background: white
-    border: 1px solid #cacaca
-    text-align: center
-    a
-      width: 36px
+  .ined-dashboard
+    padding-left: 29px
+    min-height: 42px
+    width: 502px
+    .ined-errors
+      float: right
+      display: inline-block
+      line-height: 1.2em
+      width: 251px
+      padding: 5px
+      left: 251px
+      bottom: -11px
+      background: white
+      border: 1px solid #cacaca
+      min-height: 42px
+    .ined-controls
+      float: left
       display: inline-block
+      bottom: 17px
+      left: 29px
+      width: 120px
+      background: white
+      border: 1px solid #cacaca
       text-align: center
-      text-decoration: none
-      &:hover
-        background: #f0f0f0
+      a
+        width: 36px
+        display: inline-block
+        text-align: center
+        text-decoration: none
+        &:hover
+          background: #f0f0f0
   &.type-wiki_textarea
+    textarea
+      min-height: 200px
+      width: 100%
+      margin-bottom: -1px
     .ined-input-wrapper-inner
       display: block!important
     form
@@ -96,11 +106,16 @@
       position: relative
       display: inline-block
       float: right
-    .ined-controls
-      bottom: -6px
-    .ined-errors
-      bottom: -26px
-      width: 307px
+    .ined-dashboard
+      padding-left: 0px
+      width: 526px
+      .ined-controls
+        left: 0px
+        z-index: 1
+      .ined-errors
+        width: 307px
+    .jstHandle
+      display: none
     .jstElements
       display: inline
       bottom: -31px
@@ -123,14 +138,6 @@
           padding-left: 0
       .jstb_strong, .jstb_em, .jstb_ins, .jstb_del, .jstb_ul, .jstb_ol
         display: inline
-  &.type-select
-    .ined-controls
-      right: auto
-      left: 0
-      bottom: -23px
-    .ined-errors
-      bottom: -44px
-      left: 119px
   &.type-select2
     display: inline-block
     width: 344px
@@ -140,13 +147,12 @@
       max-height: 100px
     input[type='text']
       width: 100%
+    .ined-dashboard
+      padding-left: 0px
+      width: 345px
     .ined-errors
-      bottom: -41px
-      left: 119px
       width: 225px
     .ined-controls
-      bottom: -27px
-      left: 0
     .ined-edit
       height: 175px
     .ined-read-value
diff --git a/app/assets/stylesheets/content/_work_packages.sass b/app/assets/stylesheets/content/_work_packages.sass
index 0839b9a4cf..56e057bbf1 100644
--- a/app/assets/stylesheets/content/_work_packages.sass
+++ b/app/assets/stylesheets/content/_work_packages.sass
@@ -29,7 +29,7 @@
 .work-packages--details-content
   font-size:  0.8125rem
 
-  h2
+  .wp-subject
     margin:       0
     padding:      0 0 4px 0
     font-size:    1.25rem
@@ -125,6 +125,7 @@
   display: block
 
 .select-type
+  padding-top: 3px
   line-height: 26px
   float: left
   color: $content-link-color
diff --git a/frontend/public/templates/components/inplace_editor.html b/frontend/public/templates/components/inplace_editor.html
index 789992575e..f0150f32bb 100644
--- a/frontend/public/templates/components/inplace_editor.html
+++ b/frontend/public/templates/components/inplace_editor.html
@@ -34,22 +34,24 @@
           <span ng-bind-html="previewHtml"></span>
         </div>
       </div>
-      <div class="ined-errors" ng-show="error" role="alert" ng-bind="error"></div>
-      <div class="ined-controls" ng-hide="isBusy">
-        <accessible-by-keyboard execute="editForm.$valid && submit(false)" class="ined-edit-save">
-          <icon-wrapper icon-name="yes" icon-title="{{ saveTitle }}">
-          </icon-wrapper>
-        </accessible-by-keyboard>
-        <accessible-by-keyboard execute="editForm.$valid && submit(true)" class="ined-edit-save-send">
-          <span title="{{ saveAndSendTitle }}">
-            <i class="icon-yes"></i>
-            <i class="icon-mail"></i>
-          </span>
-        </accessible-by-keyboard>
-        <accessible-by-keyboard execute="discardEditing()" class="ined-edit-close">
-          <icon-wrapper icon-name="close" icon-title="{{ cancelTitle }}">
-          </icon-wrapper>
-        </accessible-by-keyboard>
+      <div class="ined-dashboard">
+        <div class="ined-errors" ng-show="error" role="alert" ng-bind="error"></div>
+        <div class="ined-controls" ng-hide="isBusy">
+          <accessible-by-keyboard execute="editForm.$valid && submit(false)" class="ined-edit-save">
+            <icon-wrapper icon-name="yes" icon-title="{{ saveTitle }}">
+            </icon-wrapper>
+          </accessible-by-keyboard>
+          <accessible-by-keyboard execute="editForm.$valid && submit(true)" class="ined-edit-save-send">
+            <span title="{{ saveAndSendTitle }}">
+              <i class="icon-yes"></i>
+              <i class="icon-mail"></i>
+            </span>
+          </accessible-by-keyboard>
+          <accessible-by-keyboard execute="discardEditing()" class="ined-edit-close">
+            <icon-wrapper icon-name="close" icon-title="{{ cancelTitle }}">
+            </icon-wrapper>
+          </accessible-by-keyboard>
+        </div>
       </div>
     </form>
   </div>
diff --git a/frontend/public/templates/work_packages.list.details.html b/frontend/public/templates/work_packages.list.details.html
index edf77dae74..6a4bef5499 100644
--- a/frontend/public/templates/work_packages.list.details.html
+++ b/frontend/public/templates/work_packages.list.details.html
@@ -32,14 +32,15 @@
 
   <div class="select-type">{{ workPackage.props.type }}:&nbsp;</div>
 
-  <h2
+  <div
+    class="wp-subject"
     inplace-editor
     ined-type="text"
     ined-entity="workPackage"
     ined-attribute="subject"
     ined-attribute-title="{{ I18n.t('js.work_packages.properties.subject') }}"
     title="{{ workPackage.props.subject }}"
-  ></h2>
+  ></div>
 
   <span class="subtitle">
     <accessible-by-keyboard ng-if="toggleWatchLink" execute="toggleWatch()" class="star">
diff --git a/frontend/tests/integration/work-package-details-spec.js b/frontend/tests/integration/work-package-details-spec.js
index 0768d4b556..bfd3afad88 100644
--- a/frontend/tests/integration/work-package-details-spec.js
+++ b/frontend/tests/integration/work-package-details-spec.js
@@ -102,7 +102,7 @@ describe('OpenProject', function() {
     }
 
     describe('subject', function() {
-      var subjectEditor = $('h2 .inplace-editor');
+      var subjectEditor = $('.wp-subject .inplace-editor');
 
       context('work package with updateImmediately link', function() {
         beforeEach(function() {