Merge pull request #2552 from 0xF013/fix/18522-ie-11-broken-inplace-lists

18413, 18522, 18676 a bundle of fixes for details tab (ie11 included)

app/assets/stylesheets/content/_attributes_key_value.sass

@@ -28,6 +28,8 @@
 
 .attributes-key-value
   @include grid-block($wrap: true)
+  overflow: visible
+  overflow-y: visible
 
 .attributes-key-value--key
   @include grid-content(4)
@@ -37,14 +39,15 @@
   font-weight: bold
   line-height: $list-line-height / 0.9
   text-overflow: ellipsis
-  overflow: hidden
   white-space: nowrap
 
 .attributes-key-value--value-container
   @include grid-content(8)
+  overflow: visible
+  overflow-y: visible
   margin-bottom: 0.4rem
   padding: 0
 
 .attributes-key-value--value
-  &.-user
-    overflow: hidden
+  overflow: visible
+  overflow-y: visible

app/assets/stylesheets/content/_in_place_editing.sass

@@ -1,4 +1,8 @@
+.select2-container
+  position: relative!important
 .inplace-editor
+  ul
+    margin-left: auto
   display: inline
   font-size: medium
   .ined-input-wrapper-inner
@@ -44,6 +48,7 @@
       margin-bottom: -1px
   .ined-read-value
     display: inline
+    position: relative
     &.default
       span
         font-style: italic
@@ -60,10 +65,8 @@
   .ined-dashboard
     min-height: 42px
     .ined-errors
-      float: right
-      display: inline-block
       line-height: 1.2em
-      width: 251px
+      width: 100%
       padding: 5px
       left: 251px
       bottom: -11px
@@ -102,19 +105,16 @@
       display: block
     .read-value-wrapper
       display: inline-block
-      width: 400px
+      width: 100%
     .editing-link-wrapper
-      position: relative
-      display: inline-block
-      float: right
+      top: 5px
+      right: 0px
     .ined-dashboard
       padding-left: 0px
       width: 100%
       .ined-controls
         left: 0px
         z-index: 1
-      .ined-errors
-        width: 307px
     .jstHandle
       display: none
     .jstElements
@@ -140,22 +140,13 @@
       .jstb_strong, .jstb_em, .jstb_ins, .jstb_del, .jstb_ul, .jstb_ol
         display: inline
   &.type-select2
-    display: inline-block
-    width: 344px
     .select2-display-none
       display: none
-    .ui-select-choices
-      max-height: 100px
     input[type='text']
       width: 100%
     .ined-dashboard
       padding-left: 0px
-      width: 345px
-    .ined-errors
-      width: 225px
     .ined-controls
-    .ined-edit
-      height: 175px
     .ined-read-value
       position: relative
       display: block
@@ -164,7 +155,7 @@
         outline: 1px solid #cacaca
     .editing-link-wrapper
       position: absolute
-      right: -13px
+      right: -3px
       top: 1px
       width: 30px
       .icon-context:before

app/assets/stylesheets/content/_work_packages.sass

@@ -123,6 +123,7 @@
   margin: 0
   padding: 0 0 10px 0
   display: block
+  clear: both
 
 .select-type
   padding-top: 3px

frontend/app/ui_components/inplace-editor-dispatcher.js

@@ -103,8 +103,6 @@ module.exports = function($sce, $http, $timeout, AutoCompleteHelper, TextileServ
         $scope.options = options;
       }
       $scope.$broadcast('focusSelect2');
-    } else {
-      $scope.isEditable = false;
     }
   }
 
@@ -149,10 +147,14 @@ module.exports = function($sce, $http, $timeout, AutoCompleteHelper, TextileServ
         enableAutoCompletion(element);
         scope.$on('startEditing', function() {
           $timeout(function() {
-            element.find('.ined-dashboard').css({
-              'margin-left': element
+            var typeWidth = element
                 .closest('.work-packages--details-content')
-                .find('.select-type:first').width()
+                .find('.select-type:first').width();
+            element.find('.ined-dashboard').css({
+              'margin-left': typeWidth
+            });
+            element.find('input[type=text]').css({
+              'width': element.find('.ined-dashboard').width()
             });
           }, 0, false);
         });

frontend/public/templates/components/inplace_editor.html

@@ -1,22 +1,6 @@
 <div class="inplace-editor type-{{type}} attribute-{{attribute}}" ng-class="{busy: isBusy, preview: isPreview, editable: isEditable}" aria-busy="{{ isBusy }}" ng-disabled="!isEditable">
   <div class="ined-read-value" ng-class="{ default: placeholderSet, editable: isEditable }" ng-hide="isEditing" ng-switch="type">
-    <span class="read-value-wrapper" ng-switch-when="wiki_textarea" ng-bind-html="readValue"></span>
-    <span class="read-value-wrapper" ng-switch-default>
-      <span ng-if="!isUserLink">
-        <span ng-if="attribute == 'version.name'">
-          <span ng-if="entity.links.version">
-            <a href="{{pathHelper.versionPath(entity.embedded.version.props.id)}}">
-              {{entity.links.version.props.title}}
-            </a>
-          </span>
-          <span ng-if="!entity.links.version">
-            {{readValue}}
-          </span>
-        </span>
-        <span ng-if="attribute != 'version.name'" ng-bind="readValue"></span>
-      </span>
-      <user-field ng-if="isUserLink" user="readValue"></user-field>
-    </span>
+    <span class="read-value-wrapper" ng-include src="getDisplayTemplateUrl()"></span>
     <span ng-if="isEditable" class="editing-link-wrapper">
       <accessible-by-keyboard execute="startEditing()">
         <icon-wrapper icon-name="edit" icon-title="{{ editTitle }}">

frontend/public/templates/components/inplace_editor/display/version.html

@@ -1,8 +1,8 @@
-<span ng-if="entity.links.version">
+<span ng-if="entity.links.version.href">
   <a href="{{pathHelper.versionPath(entity.embedded.version.props.id)}}">
     {{entity.links.version.props.title}}
   </a>
 </span>
-<span ng-if="!entity.links.version">
+<span ng-if="!entity.links.version.href">
   {{readValue}}
 </span>