From 634bacb203d1452ed256d24135f315cc0307d6a3 Mon Sep 17 00:00:00 2001
From: alekseybobkov <aleksey.bobkov@gmail.com>
Date: Thu, 3 Jul 2014 23:03:01 +1100
Subject: [PATCH] Record finder styling

---
 modules/backend/assets/css/october.css        | 41 ++++++++-----------
 .../backend/assets/less/controls/forms.less   | 34 ++++++++-------
 .../backend/assets/less/core/variables.less   |  1 +
 modules/backend/formwidgets/RecordFinder.php  |  2 +-
 .../recordfinder/partials/_recordfinder.htm   |  6 +--
 5 files changed, 41 insertions(+), 43 deletions(-)

diff --git a/modules/backend/assets/css/october.css b/modules/backend/assets/css/october.css
index 44e8e8806..b5dfb783c 100644
--- a/modules/backend/assets/css/october.css
+++ b/modules/backend/assets/css/october.css
@@ -8240,7 +8240,7 @@ label {
   margin-top: 0;
 }
 .field-recordfinder {
-  background-color: #f6f6f6;
+  background-color: #ffffff;
   border: 1px solid #e0e0e0;
   overflow: hidden;
   position: relative;
@@ -8249,8 +8249,13 @@ label {
   background: transparent;
   border-color: transparent;
   height: auto;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  padding: 8px 30px 10px 11px;
 }
 .field-recordfinder .btn {
+  background: transparent;
   position: absolute;
   right: 0;
   top: 50%;
@@ -8258,30 +8263,18 @@ label {
   height: 88px;
   width: 36px;
 }
-.field-recordfinder .btn:before {
-  content: '';
-  display: block;
-  width: 0;
-  height: 0;
-  border-top: 44px solid transparent;
-  border-bottom: 44px solid transparent;
-  border-right: 26px solid #e3e3e3;
-  position: absolute;
-  left: -16px;
-  top: 50%;
-  margin-top: -44px;
+.field-recordfinder .btn i {
+  font-size: 14px;
 }
-.field-recordfinder .btn:hover:before,
-.field-recordfinder .btn:focus:before,
-.field-recordfinder .btn:active:before,
-.field-recordfinder .btn.active:before {
-  content: '';
-  display: block;
-  width: 0;
-  height: 0;
-  border-top: 44px solid transparent;
-  border-bottom: 44px solid transparent;
-  border-right: 26px solid #cfcfcf;
+.field-recordfinder .text-muted i {
+  font-size: 14px;
+  position: relative;
+  top: 1px;
+  display: inline-block;
+  margin: 0 2px;
+}
+.field-recordfinder .primary {
+  font-weight: 600;
 }
 .form-buttons {
   padding-bottom: 20px;
diff --git a/modules/backend/assets/less/controls/forms.less b/modules/backend/assets/less/controls/forms.less
index 21c46a81d..2a5942c05 100644
--- a/modules/backend/assets/less/controls/forms.less
+++ b/modules/backend/assets/less/controls/forms.less
@@ -192,7 +192,7 @@ label {
 }
 
 .field-recordfinder {
-    background-color: @color-form-field-preview;
+    background-color: @color-form-field-bg;
     border: 1px solid @color-form-field-border;
     overflow: hidden;
     position: relative;
@@ -200,30 +200,34 @@ label {
         background: transparent;
         border-color: transparent;
         height: auto;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        white-space: nowrap;
+        padding: 8px 30px 10px 11px;
     }
     .btn {
+        background: transparent;
         position: absolute;
         right: 0;
         top: 50%;
         margin-top: -44px;
         height: 88px;
         width: 36px;
-        &:before {
-            .triangle(left, 26px, 88px, @btn-default-bg);
-            position: absolute;
-            left: -16px;
-            top: 50%;
-            margin-top: -44px;
-        }
-        &:hover,
-        &:focus,
-        &:active,
-        &.active {
-            &:before {
-                .triangle(left, 26px, 88px, darken(@btn-default-bg, 8%));
-            }
+
+        i {
+            font-size: 14px;
         }
     }
+    .text-muted i {
+        font-size: 14px;
+        position: relative;
+        top: 1px;
+        display: inline-block;
+        margin: 0 2px;
+    }
+    .primary {
+        font-weight: 600;
+    }
 }
 
 .form-buttons {
diff --git a/modules/backend/assets/less/core/variables.less b/modules/backend/assets/less/core/variables.less
index b61313761..ad765bb43 100644
--- a/modules/backend/assets/less/core/variables.less
+++ b/modules/backend/assets/less/core/variables.less
@@ -113,6 +113,7 @@
 @color-form-required-asterisk:               #ff0000;
 @color-form-sidebar:                         #ecf0f1;
 @color-form-field-preview:                   #f6f6f6;
+@color-form-field-bg:                        #ffffff;
 
 @color-panel-light:                          #ECF0F1;
 
diff --git a/modules/backend/formwidgets/RecordFinder.php b/modules/backend/formwidgets/RecordFinder.php
index 86349931b..b56ae444d 100644
--- a/modules/backend/formwidgets/RecordFinder.php
+++ b/modules/backend/formwidgets/RecordFinder.php
@@ -112,7 +112,7 @@ class RecordFinder extends FormWidgetBase
         $this->vars['nameValue'] = $this->getNameValue();
         $this->vars['descriptionValue'] = $this->getDescriptionValue();
         $this->vars['listWidget'] = $this->listWidget;
-        $this->vars['prompt'] = str_replace('%s', '<i class="icon-search"></i>', $this->prompt);
+        $this->vars['prompt'] = str_replace('%s', '<i class="icon-th-list"></i>', $this->prompt);
     }
 
     /**
diff --git a/modules/backend/formwidgets/recordfinder/partials/_recordfinder.htm b/modules/backend/formwidgets/recordfinder/partials/_recordfinder.htm
index 8f6431a63..a12f6635c 100644
--- a/modules/backend/formwidgets/recordfinder/partials/_recordfinder.htm
+++ b/modules/backend/formwidgets/recordfinder/partials/_recordfinder.htm
@@ -6,9 +6,9 @@
     id="<?= $this->getId() ?>">
     <span class="form-control">
         <?php if ($value): ?>
-            <?= $nameValue ?: 'Undefined' ?>
+            <span class="primary"><?= e($nameValue) ?: 'Undefined' ?></span>
             <?php if ($descriptionValue): ?>
-                <br /><small><?= $descriptionValue ?></small>
+                <span class="secondary"> - <?= e($descriptionValue) ?></span>
             <?php endif ?>
         <?php else: ?>
             <span class="text-muted"><?= $prompt ?></span>
@@ -20,7 +20,7 @@
         data-handler="<?= $this->getEventHandler('onFindRecord') ?>"
         data-request-data="recordfinder_flag: 1"
         type="button">
-        <i class="icon-search"></i>
+        <i class="icon-th-list"></i>
     </button>
 
     <input