From 5efe1a4a8763a376f21465f772243f052524c632 Mon Sep 17 00:00:00 2001
From: Robbie Averill <robbie@silverstripe.com>
Date: Mon, 7 Aug 2017 11:49:55 +1200
Subject: [PATCH] FIX Add CSS bundle to link edit context document add form

---
 code/cms/DMSDocumentAddExistingField.php |  5 +++--
 dist/css/cmsbundle.css                   | 28 +++++++++++++-----------
 scss/_variables.scss                     |  2 ++
 scss/upload.scss                         | 22 ++++++++++++-------
 4 files changed, 34 insertions(+), 23 deletions(-)

diff --git a/code/cms/DMSDocumentAddExistingField.php b/code/cms/DMSDocumentAddExistingField.php
index 83d9bb1..48bacae 100644
--- a/code/cms/DMSDocumentAddExistingField.php
+++ b/code/cms/DMSDocumentAddExistingField.php
@@ -54,8 +54,9 @@ class DMSDocumentAddExistingField extends CompositeField
 
     public function Field($properties = array())
     {
-        Requirements::javascript(DMS_DIR.'/javascript/DMSDocumentAddExistingField.js');
-        Requirements::javascript(DMS_DIR."/javascript/DocumentHtmlEditorFieldToolbar.js");
+        Requirements::javascript(DMS_DIR . '/javascript/DMSDocumentAddExistingField.js');
+        Requirements::javascript(DMS_DIR . '/javascript/DocumentHtmlEditorFieldToolbar.js');
+        Requirements::css(DMS_DIR . '/dist/css/cmsbundle.css');
 
         return $this->renderWith('DMSDocumentAddExistingField');
     }
diff --git a/dist/css/cmsbundle.css b/dist/css/cmsbundle.css
index a8f59e3..5d99403 100644
--- a/dist/css/cmsbundle.css
+++ b/dist/css/cmsbundle.css
@@ -172,13 +172,13 @@ form.small .field .TreeDropdownField,
 .ss-add .document-add-existing .treedropdownfield-toggle-panel-link {
   padding: 5px 9px 9px;
   background: #fff;
-  border: 1px solid #B3B3B3;
+  border: 1px solid #b3b3b3;
   float: right;
   z-index: 99999;
   position: relative; }
   .ss-add .document-add-existing .treedropdownfield-toggle-panel-link.treedropdownfield-open-tree {
     background: #fff;
-    border: 1px solid #B3B3B3;
+    border: 1px solid #b3b3b3;
     border-bottom: none;
     border-bottom-right-radius: 0; }
 
@@ -228,16 +228,18 @@ form.small .field .TreeDropdownField,
   font-weight: bold;
   text-shadow: 1px 1px 0 white; }
 
-.ss-add .document-add-existing.link-editor-context .middleColumn {
-  margin-left: 184px; }
-  .ss-add .document-add-existing.link-editor-context .middleColumn input {
-    background: white;
-    border: 1px solid #B3B3B3;
-    line-height: 16px;
-    margin: 0;
-    border-radius: 4px;
-    background-size: 100%;
-    max-width: 512px; }
+.ss-add .document-add-existing.link-editor-context .middleColumn input {
+  background: white;
+  border: 1px solid #b3b3b3;
+  line-height: 16px;
+  border-radius: 4px;
+  background-size: 100%;
+  max-width: 468px; }
+  .ss-add .document-add-existing.link-editor-context .middleColumn input.document-autocomplete {
+    max-width: 365px; }
+
+.ss-add .document-add-existing.link-editor-context .document-list {
+  width: calc(100% - 2px); }
 
 .ss-add .ss-assetuploadfield.link-editor-context label {
   float: left;
@@ -314,7 +316,7 @@ form.small .field .TreeDropdownField,
       margin-top: 13px;
       padding: 10px;
       background: white;
-      border: 1px solid #B3B3B3; }
+      border: 1px solid #b3b3b3; }
     #Form_ItemEditForm ul.SelectionGroup li.selected label.ui-button:after {
       top: 43px; }
   #Form_ItemEditForm ul.SelectionGroup .treedropdownfield-panel {
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 027ba43..8bad479 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -8,3 +8,5 @@ $color-grey-lighter: #f8f8f8 !default;
 $color-grey-light: #d0d3d5 !default;
 $color-grey-dark: #66727d !default;
 $color-white: #ffffff !default;
+
+$color-cms-input-border: #b3b3b3 !default;
diff --git a/scss/upload.scss b/scss/upload.scss
index 84ac952..6004eac 100644
--- a/scss/upload.scss
+++ b/scss/upload.scss
@@ -37,14 +37,14 @@
     .treedropdownfield-toggle-panel-link {
       padding: 5px 9px 9px;
       background: #fff;
-      border: 1px solid #B3B3B3;
+      border: 1px solid $color-cms-input-border;
       float: right;
       z-index: 99999;
       position: relative;
 
       &.treedropdownfield-open-tree {
         background: #fff;
-        border: 1px solid #B3B3B3;
+        border: 1px solid $color-cms-input-border;
         border-bottom:none;
         border-bottom-right-radius:0;
       }
@@ -100,6 +100,7 @@
       }
     }
 
+    // When inserting a link to a document via the TinyMCE editor
     &.link-editor-context {
       label {
         float: left;
@@ -112,18 +113,23 @@
       }
 
       .middleColumn {
-        margin-left: 184px;
-
         input {
           background: white;
-          border: 1px solid #B3B3B3;
+          border: 1px solid $color-cms-input-border;
           line-height: 16px;
-          margin: 0;
           border-radius: 4px;
           background-size: 100%;
-          max-width: 512px;
+          max-width: 468px;
+
+          &.document-autocomplete {
+            max-width: 365px;
+          }
         }
       }
+
+      .document-list {
+        width: calc(100% - 2px);
+      }
     }
   }
 
@@ -234,7 +240,7 @@
         margin-top: 13px;
         padding: 10px;
         background: white;
-        border: 1px solid #B3B3B3;
+        border: 1px solid $color-cms-input-border;
       }
 
       &.selected {