From 1c22b87cc987f71a32f1950f407577eb3b389bee Mon Sep 17 00:00:00 2001
From: Samuel Georges <sam@daftspunk.com>
Date: Sun, 14 Jun 2015 10:58:11 +1000
Subject: [PATCH] Complete single image mode of mediafinder

---
 .../mediafinder/assets/css/mediafinder.css    | 39 ++++++++++++-------
 .../mediafinder/assets/js/mediafinder.js      |  2 +-
 .../assets/less/mediafinder.base.less         | 19 ++++++++-
 .../assets/less/mediafinder.filesingle.less   |  2 +-
 .../assets/less/mediafinder.imagesingle.less  | 14 ++-----
 .../mediafinder/partials/_file_single.htm     |  2 +-
 .../mediafinder/partials/_image_single.htm    |  2 +-
 7 files changed, 51 insertions(+), 29 deletions(-)

diff --git a/modules/cms/formwidgets/mediafinder/assets/css/mediafinder.css b/modules/cms/formwidgets/mediafinder/assets/css/mediafinder.css
index 8898b39c4..c0e02ec12 100644
--- a/modules/cms/formwidgets/mediafinder/assets/css/mediafinder.css
+++ b/modules/cms/formwidgets/mediafinder/assets/css/mediafinder.css
@@ -1,3 +1,16 @@
+.field-mediafinder .find-object {
+  -webkit-border-radius: 3px;
+  -moz-border-radius: 3px;
+  border-radius: 3px;
+  position: relative;
+  outline: none;
+  overflow: hidden;
+  display: inline-block;
+  vertical-align: top;
+}
+.field-mediafinder .find-object .icon-container {
+  display: table;
+}
 .field-mediafinder .find-object .icon-container i {
   color: #95a5a6;
   display: inline-block;
@@ -16,6 +29,13 @@
   transition: padding 0.1s;
   position: relative;
 }
+.field-mediafinder .find-object h4 a {
+  position: absolute;
+  right: 0;
+  top: 0;
+  display: none;
+  font-weight: 400;
+}
 .field-mediafinder .find-object .info h4 a,
 .field-mediafinder .find-object .meta a.find-remove-button {
   color: #2b3e50;
@@ -23,8 +43,8 @@
   font-size: 15px;
   text-decoration: none;
 }
-.field-mediafinder.is-populated:hover h4 a,
-.field-mediafinder.is-populated:hover .meta .find-remove-button {
+.field-mediafinder.is-populated .find-object:hover h4 a,
+.field-mediafinder.is-populated .find-object:hover .meta .find-remove-button {
   display: block;
 }
 @media (max-width: 1024px) {
@@ -86,7 +106,7 @@
 }
 .field-mediafinder.style-image-single .find-object {
   display: none;
-  padding-bottom: 66px;
+  padding-bottom: 39px;
 }
 .field-mediafinder.style-image-single .find-object .icon-container {
   border: 1px solid #f6f8f9;
@@ -105,14 +125,7 @@
   left: 0;
   right: 0;
   bottom: 0;
-  height: 66px;
-}
-.field-mediafinder.style-image-single .find-object .meta {
-  position: absolute;
-  bottom: 65px;
-  left: 0;
-  right: 0;
-  margin: 0 15px;
+  height: 39px;
 }
 .field-mediafinder.style-image-single .find-object:hover h4 {
   padding-right: 20px;
@@ -121,7 +134,7 @@
   display: none;
 }
 .field-mediafinder.style-image-single.is-populated .find-object {
-  display: block;
+  display: inline-block;
 }
 .field-mediafinder.style-file-single {
   background-color: #ffffff;
@@ -186,7 +199,7 @@
   top: 50%;
   margin-top: -44px;
   height: 88px;
-  right: 34px;
+  right: 0;
 }
 .field-mediafinder.style-file-single .find-object .meta .find-remove-button {
   position: absolute;
diff --git a/modules/cms/formwidgets/mediafinder/assets/js/mediafinder.js b/modules/cms/formwidgets/mediafinder/assets/js/mediafinder.js
index 518d30dbf..f3eb76cb7 100644
--- a/modules/cms/formwidgets/mediafinder/assets/js/mediafinder.js
+++ b/modules/cms/formwidgets/mediafinder/assets/js/mediafinder.js
@@ -41,7 +41,7 @@
         this.$el.on('click', '.find-remove-button', this.proxy(this.onClickRemoveButton))
         this.$el.one('dispose-control', this.proxy(this.dispose))
 
-        this.$findValue = $('input.find-value', this.$el)
+        this.$findValue = $('[data-find-value]', this.$el)
     }
 
     MediaFinder.prototype.dispose = function() {
diff --git a/modules/cms/formwidgets/mediafinder/assets/less/mediafinder.base.less b/modules/cms/formwidgets/mediafinder/assets/less/mediafinder.base.less
index b16fd12e5..a7c3a1327 100644
--- a/modules/cms/formwidgets/mediafinder/assets/less/mediafinder.base.less
+++ b/modules/cms/formwidgets/mediafinder/assets/less/mediafinder.base.less
@@ -67,7 +67,16 @@
 
     .find-object {
 
+        .border-radius(3px);
+        position: relative;
+        outline: none;
+        overflow: hidden;
+        display: inline-block;
+        vertical-align: top;
+
         .icon-container {
+            display: table;
+
             i {
                 color: #95a5a6;
                 display: inline-block;
@@ -87,6 +96,14 @@
             .transition(padding 0.1s);
 
             position: relative;
+
+            a {
+                position: absolute;
+                right: 0;
+                top: 0;
+                display: none;
+                font-weight: 400;
+            }
         }
 
         .info h4 a,
@@ -99,7 +116,7 @@
     }
 
     &.is-populated {
-        &:hover {
+        .find-object:hover {
             h4 a,
             .meta .find-remove-button { display: block; }
         }
diff --git a/modules/cms/formwidgets/mediafinder/assets/less/mediafinder.filesingle.less b/modules/cms/formwidgets/mediafinder/assets/less/mediafinder.filesingle.less
index 75ee5a655..70b14ea64 100644
--- a/modules/cms/formwidgets/mediafinder/assets/less/mediafinder.filesingle.less
+++ b/modules/cms/formwidgets/mediafinder/assets/less/mediafinder.filesingle.less
@@ -65,7 +65,7 @@
 
         .meta {
             .finder-vertical-align();
-            right: 34px;
+            right: 0;
             .find-remove-button {
                 position: absolute;
                 top: 50%;
diff --git a/modules/cms/formwidgets/mediafinder/assets/less/mediafinder.imagesingle.less b/modules/cms/formwidgets/mediafinder/assets/less/mediafinder.imagesingle.less
index 2285b44f9..f22a29f3e 100644
--- a/modules/cms/formwidgets/mediafinder/assets/less/mediafinder.imagesingle.less
+++ b/modules/cms/formwidgets/mediafinder/assets/less/mediafinder.imagesingle.less
@@ -11,7 +11,7 @@
 
     .find-object {
         display: none;
-        padding-bottom: 66px;
+        padding-bottom: 39px;
 
         .icon-container {
             border: 1px solid #f6f8f9;
@@ -28,15 +28,7 @@
             left: 0;
             right: 0;
             bottom: 0;
-            height: 66px;
-        }
-
-        .meta {
-            position: absolute;
-            bottom: 65px;
-            left: 0;
-            right: 0;
-            margin: 0 15px;
+            height: 39px;
         }
 
         &:hover {
@@ -49,7 +41,7 @@
             display: none;
         }
         .find-object {
-            display: block;
+            display: inline-block;
         }
     }
 
diff --git a/modules/cms/formwidgets/mediafinder/partials/_file_single.htm b/modules/cms/formwidgets/mediafinder/partials/_file_single.htm
index 2646bad88..caf7eefe0 100644
--- a/modules/cms/formwidgets/mediafinder/partials/_file_single.htm
+++ b/modules/cms/formwidgets/mediafinder/partials/_file_single.htm
@@ -37,6 +37,6 @@
         name="<?= $field->getName() ?>"
         id="<?= $field->getId() ?>"
         value="<?= e($value) ?>"
-        class="find-value"
+        data-find-value
         />
 </div>
\ No newline at end of file
diff --git a/modules/cms/formwidgets/mediafinder/partials/_image_single.htm b/modules/cms/formwidgets/mediafinder/partials/_image_single.htm
index abf5103a3..9e3c0b3d6 100644
--- a/modules/cms/formwidgets/mediafinder/partials/_image_single.htm
+++ b/modules/cms/formwidgets/mediafinder/partials/_image_single.htm
@@ -30,6 +30,6 @@
         name="<?= $field->getName() ?>"
         id="<?= $field->getId() ?>"
         value="<?= e($value) ?>"
-        class="find-value"
+        data-find-value
         />
 </div>
\ No newline at end of file