replaced input with gf-form-dropdown

public/app/plugins/panel/table/column_options.html

@@ -1,17 +1,16 @@
-
 <div class="edit-tab-with-sidemenu">
-	<aside class="edit-sidemenu-aside">
-		<ul class="edit-sidemenu">
+  <aside class="edit-sidemenu-aside">
+    <ul class="edit-sidemenu">
       <li ng-repeat="style in editor.panel.styles" ng-class="{active: editor.activeStyleIndex === $index}">
-        <a ng-click="editor.activeStyleIndex = $index" >{{style.pattern || 'New rule'}}</a>
+        <a ng-click="editor.activeStyleIndex = $index">{{style.pattern || 'New rule'}}</a>
       </li>
       <li>
         <a class="pointer" ng-click="editor.addColumnStyle()">
           <i class="fa fa-plus"></i>&nbsp;Add
         </a>
       </li>
-		</ul>
-	</aside>
+    </ul>
+  </aside>
 
   <div class="edit-tab-content" ng-repeat="style in editor.panel.styles" ng-if="editor.activeStyleIndex === $index">
 
@@ -20,7 +19,9 @@
       <div class="gf-form-inline">
         <div class="gf-form">
           <label class="gf-form-label width-13">Apply to columns named</label>
-          <input type="text" placeholder="Name or regex" class="gf-form-input width-13" ng-model="style.pattern" bs-tooltip="'Specify regex using /my.*regex/ syntax'" bs-typeahead="editor.getColumnNames" ng-blur="editor.render()" data-min-length=0 data-items=100 ng-model-onblur data-placement="right">
+          <input type="text" placeholder="Name or regex" class="gf-form-input width-13" ng-model="style.pattern" bs-tooltip="'Specify regex using /my.*regex/ syntax'"
+            bs-typeahead="editor.getColumnNames" ng-blur="editor.render()" data-min-length=0 data-items=100 ng-model-onblur
+            data-placement="right">
         </div>
       </div>
       <div class="gf-form" ng-if="style.type !== 'hidden'">
@@ -39,18 +40,20 @@
           <select class="gf-form-input" ng-model="style.type" ng-options="c.value as c.text for c in editor.columnTypes" ng-change="editor.render()"></select>
         </div>
       </div>
-      <div class="gf-form"  ng-if="style.type === 'date'">
+      <div class="gf-form" ng-if="style.type === 'date'">
         <label class="gf-form-label width-11">Date Format</label>
-        <div class="gf-form-select-wrapper width-16">
-          <select class="gf-form-input" ng-model="style.dateFormat" ng-options="c.value as c.text for c in editor.dateFormats" ng-change="editor.render()"></select>
-        </div>
+        <gf-form-dropdown model="style.dateFormat" css-class="gf-form-input width-16" lookup-text="true" get-options="editor.dateFormats"
+          on-change="editor.render()">
+        </gf-form-dropdown>
       </div>
 
       <div ng-if="style.type === 'string'">
-        <gf-form-switch class="gf-form" label-class="width-11" ng-if="style.type === 'string'" label="Sanitize HTML" checked="style.sanitize" change="editor.render()"></gf-form-switch>
+        <gf-form-switch class="gf-form" label-class="width-11" ng-if="style.type === 'string'" label="Sanitize HTML" checked="style.sanitize"
+          change="editor.render()"></gf-form-switch>
       </div>
       <div ng-if="style.type === 'string'">
-        <gf-form-switch class="gf-form" label-class="width-11" ng-if="style.type === 'string'" label="Preserve Formatting" checked="style.preserveFormat" change="editor.render()"></gf-form-switch>
+        <gf-form-switch class="gf-form" label-class="width-11" ng-if="style.type === 'string'" label="Preserve Formatting" checked="style.preserveFormat"
+          change="editor.render()"></gf-form-switch>
       </div>
 
       <div ng-if="style.type === 'number'">
@@ -60,16 +63,20 @@
         </div>
         <div class="gf-form">
           <label class="gf-form-label width-11">Decimals</label>
-          <input type="number" class="gf-form-input width-4" data-placement="right" ng-model="style.decimals" ng-change="editor.render()" ng-model-onblur>
+          <input type="number" class="gf-form-input width-4" data-placement="right" ng-model="style.decimals" ng-change="editor.render()"
+            ng-model-onblur>
         </div>
       </div>
     </div>
 
-    <div class="section gf-form-group"  ng-if="style.type === 'number'">
+    <div class="section gf-form-group" ng-if="style.type === 'number'">
       <h5 class="section-heading">Thresholds</h5>
       <div class="gf-form">
-        <label class="gf-form-label width-8">Thresholds<tip>Comma separated values</tip></label>
-        <input type="text" class="gf-form-input width-10" ng-model="style.thresholds" placeholder="50,80" ng-blur="editor.render()" array-join>
+        <label class="gf-form-label width-8">Thresholds
+          <tip>Comma separated values</tip>
+        </label>
+        <input type="text" class="gf-form-input width-10" ng-model="style.thresholds" placeholder="50,80" ng-blur="editor.render()"
+          array-join>
       </div>
       <div class="gf-form">
         <label class="gf-form-label width-8">Color Mode</label>
@@ -102,21 +109,23 @@
         <info-popover mode="right-absolute">
           <p>Specify an URL (relative or absolute)</p>
           <span>
-            Use special variables to specify cell values: <br>
-            <em>$__cell</em> refers to current cell value <br>
+            Use special variables to specify cell values:
+            <br>
+            <em>$__cell</em> refers to current cell value
+            <br>
             <em>$__cell_n</em> refers to Nth column value in current row. Column indexes are started from 0. For instance,
-              <em>$__cell_1</em> refers to second column's value.
+            <em>$__cell_1</em> refers to second column's value.
           </span>
         </info-popover>
       </div>
       <div class="gf-form">
         <label class="gf-form-label width-9">Tooltip</label>
-        <input type="text" class="gf-form-input width-29" ng-model="style.linkTooltip" ng-blur="editor.render()" ng-model-onblur data-placement="right">
+        <input type="text" class="gf-form-input width-29" ng-model="style.linkTooltip" ng-blur="editor.render()" ng-model-onblur
+          data-placement="right">
         <info-popover mode="right-absolute">
           <p>Specify text for link tooltip.</p>
           <span>
-            This title appears when user hovers pointer over the cell with link.
-            Use the same variables as for URL.
+            This title appears when user hovers pointer over the cell with link. Use the same variables as for URL.
           </span>
         </info-popover>
       </div>