Fix #6465 - drag drop for cards

[roojs1] / Roo / bootstrap / TriggerField.js

diff --git a/Roo/bootstrap/TriggerField.js b/Roo/bootstrap/TriggerField.js
index a361cf0..0fe4989 100644 (file)
--- a/Roo/bootstrap/TriggerField.js
+++ b/Roo/bootstrap/TriggerField.js
@@ -22,7 +22,7 @@ trigger.applyTo('my-field');
  * {@link Roo.bootstrap.DateField} and {@link Roo.bootstrap.ComboBox} are perfect examples of this.
  * @cfg {String} triggerClass An additional CSS class used to style the trigger button.  The trigger will always get the
  * class 'x-form-trigger' by default and triggerClass will be <b>appended</b> if specified.
- * @cfg {String} caret (search|calendar) a fontawesome for the trigger icon see http://fortawesome.github.io/Font-Awesome/icons/
+ * @cfg {String} caret (search|calendar) BS3 only - carat fa name
 
  * @constructor
  * Create a new TriggerField.
@@ -100,19 +100,15 @@ Roo.extend(Roo.bootstrap.TriggerField, Roo.bootstrap.Input,  {
         }
         
         var inputblock = input;
-        Roo.log(this);
+        
         if(this.hasFeedback && !this.allowBlank){
             
-            Roo.log('in 1');
             var feedback = {
                 tag: 'span',
                 cls: 'glyphicon form-control-feedback'
             };
             
-            if(this.removable && !this.editable && !this.tickable){
-                
-                Roo.log('in 2');
-                
+            if(this.removable && !this.editable  ){
                 inputblock = {
                     cls : 'has-feedback',
                     cn :  [
@@ -126,9 +122,6 @@ Roo.extend(Roo.bootstrap.TriggerField, Roo.bootstrap.Input,  {
                     ] 
                 };
             } else {
-                
-                Roo.log('in 3');
-                
                 inputblock = {
                     cls : 'has-feedback',
                     cn :  [
@@ -139,7 +132,7 @@ Roo.extend(Roo.bootstrap.TriggerField, Roo.bootstrap.Input,  {
             }
 
         } else {
-            if(this.removable && !this.editable && !this.tickable){
+            if(this.removable && !this.editable ){
                 inputblock = {
                     cls : 'roo-removable',
                     cn :  [
@@ -163,7 +156,7 @@ Roo.extend(Roo.bootstrap.TriggerField, Roo.bootstrap.Input,  {
             if (this.before) {
                 inputblock.cn.push({
                     tag :'span',
-                    cls : 'input-group-addon',
+                    cls : 'input-group-addon input-group-prepend input-group-text',
                     html : this.before
                 });
             }
@@ -178,62 +171,44 @@ Roo.extend(Roo.bootstrap.TriggerField, Roo.bootstrap.Input,  {
             if (this.after) {
                 inputblock.cn.push({
                     tag :'span',
-                    cls : 'input-group-addon',
+                    cls : 'input-group-addon input-group-append input-group-text',
                     html : this.after
                 });
             }
             
         };
         
-        var box = {
-            tag: 'div',
-            cn: [
-                {
-                    tag: 'input',
-                    type : 'hidden',
-                    cls: 'form-hidden-field'
-                },
-                inputblock
-            ]
-            
-        };
+      
+        
+        var ibwrap = inputblock;
         
         if(this.multiple){
-            box = {
-                tag: 'div',
-                cn: [
-                    {
-                        tag: 'input',
-                        type : 'hidden',
-                        cls: 'form-hidden-field'
-                    },
+            ibwrap = {
+                tag: 'ul',
+                cls: 'roo-select2-choices',
+                cn:[
                     {
-                        tag: 'ul',
-                        cls: 'roo-select2-choices',
-                        cn:[
-                            {
-                                tag: 'li',
-                                cls: 'roo-select2-search-field',
-                                cn: [
+                        tag: 'li',
+                        cls: 'roo-select2-search-field',
+                        cn: [
 
-                                    inputblock
-                                ]
-                            }
+                            inputblock
                         ]
                     }
                 ]
-            }
-        };
+            };
+                
+        }
         
         var combobox = {
             cls: 'roo-select2-container input-group',
             cn: [
-                box
-//                {
-//                    tag: 'ul',
-//                    cls: 'typeahead typeahead-long dropdown-menu',
-//                    style: 'display:none'
-//                }
+                 {
+                    tag: 'input',
+                    type : 'hidden',
+                    cls: 'form-hidden-field'
+                },
+                ibwrap
             ]
         };
         
@@ -253,9 +228,9 @@ Roo.extend(Roo.bootstrap.TriggerField, Roo.bootstrap.Input,  {
             
             combobox.cn.push({
                 tag :'span',
-                cls : 'input-group-addon btn dropdown-toggle',
+                cls : 'input-group-addon input-group-append input-group-text btn dropdown-toggle',
                 cn : [
-                    caret,
+                    Roo.bootstrap.version == 3 ? caret : '',
                     {
                         tag: 'span',
                         cls: 'combobox-clear',
@@ -274,17 +249,25 @@ Roo.extend(Roo.bootstrap.TriggerField, Roo.bootstrap.Input,  {
         if(this.multiple){
             combobox.cls += ' roo-select2-container-multi';
         }
+         var indicator = {
+            tag : 'i',
+            cls : 'roo-required-indicator ' + (this.indicatorpos == 'right'  ? 'right' : 'left') +'-indicator text-danger fa fa-lg fa-star',
+            tooltip : 'This field is required'
+        };
+        if (Roo.bootstrap.version == 4) {
+            indicator = {
+                tag : 'i',
+                style : 'display:none'
+            };
+        }
+        
         
         if (align ==='left' && this.fieldLabel.length) {
             
-            cfg.cls += ' roo-form-group-label-left';
+            cfg.cls += ' roo-form-group-label-left'  + (Roo.bootstrap.version == 4 ? ' row' : '');
 
             cfg.cn = [
-                {
-                    tag : 'i',
-                    cls : 'roo-required-indicator left-indicator text-danger fa fa-lg fa-star',
-                    tooltip : 'This field is required'
-                },
+                indicator,
                 {
                     tag: 'label',
                     'for' :  id,
@@ -315,11 +298,7 @@ Roo.extend(Roo.bootstrap.TriggerField, Roo.bootstrap.Input,  {
                                 tag : 'span',
                                 html : this.fieldLabel
                             },
-                            {
-                                tag : 'i',
-                                cls : 'roo-required-indicator right-indicator text-danger fa fa-lg fa-star',
-                                tooltip : 'This field is required'
-                            }
+                            indicator
                         ]
                     },
                     {
@@ -366,11 +345,7 @@ Roo.extend(Roo.bootstrap.TriggerField, Roo.bootstrap.Input,  {
         } else if ( this.fieldLabel.length) {
 //                Roo.log(" label");
             cfg.cn = [
-                {
-                   tag : 'i',
-                   cls : 'roo-required-indicator left-indicator text-danger fa fa-lg fa-star',
-                   tooltip : 'This field is required'
-               },
+                indicator,
                {
                    tag: 'label',
                    //cls : 'input-group-addon',
@@ -392,11 +367,7 @@ Roo.extend(Roo.bootstrap.TriggerField, Roo.bootstrap.Input,  {
                                tag : 'span',
                                html : this.fieldLabel
                            },
-                           {
-                              tag : 'i',
-                              cls : 'roo-required-indicator right-indicator text-danger fa fa-lg fa-star',
-                              tooltip : 'This field is required'
-                           }
+                           indicator
                        ]
 
                     },
@@ -510,7 +481,7 @@ Roo.extend(Roo.bootstrap.TriggerField, Roo.bootstrap.Input,  {
     createList : function()
     {
         this.list = Roo.get(document.body).createChild({
-            tag: 'ul',
+            tag: Roo.bootstrap.version == 4 ? 'div' : 'ul',
             cls: 'typeahead typeahead-long dropdown-menu',
             style: 'display:none'
         });