Ticket #2878 - Layout and functionality improvements.

inc/classes/BxDolLabel.php

@@ -62,15 +62,15 @@ class BxDolLabel extends BxDolFactory implements iBxDolSingleton
         echoJson($aResult);
     }
 
-    public function getElementLabels($aInput = array())
+    public function getFormElement($aInput = array())
     {
         $oForm = BxDolForm::getObjectInstance($this->_sForm, $this->_sFormDisplaySelect);
         if(!$oForm)
             return '';
 
-        $aInput['attrs']['id'] = $this->_aHtmlIds['labels_element'];
+        $aInput['attrs']['id'] = $this->_aHtmlIds['labels_element'] . $aInput['name'];
 
-        return $oForm->getElementLabels($aInput);
+        return $oForm->getFormElement($aInput);
     }
 
     public function getLabels($aParams = array())

inc/js/classes/BxDolLabel.js

@@ -47,8 +47,15 @@ BxDolLabel.prototype.selectLabels = function(oElement, sName, aParams)
 
 BxDolLabel.prototype.onSelectLabels = function(oData)
 {
-    if(oData.content != undefined)
-        $('#' + this._aHtmlIds['labels_element']).replaceWith(oData.content);
+    if(!oData.name || !oData.content)
+        return;
+
+    var oElement = $('#' + this._aHtmlIds['labels_element'] + oData.name + ' .bx-form-input-labels');
+    if(!oElement.length)
+        return;
+
+    oElement.find('b.val:not(.val-placeholder)').remove();
+    oElement.prepend(oData.content);
 };
 
 BxDolLabel.prototype.showSublist = function(oLink)

modules/boonex/english/data/langs/system/en.xml

@@ -2222,14 +2222,15 @@ If it is not enabled then please consider implement this optimization, since it
 	<string name="_sys_form_input_age"><![CDATA[Age]]></string>
 	<string name="_sys_form_input_sys_location"><![CDATA[Location]]></string>
 	<string name="_sys_form_input_location"><![CDATA[Location]]></string>
-  <string name="_sys_form_input_location_radius_label"><![CDATA[Radius (in km)]]></string>
-	<string name="_sys_form_input_sys_labels"><![CDATA[Labels]]></string>
-  <string name="_sys_form_input_labels"><![CDATA[Labels]]></string>
+        <string name="_sys_form_input_location_radius_label"><![CDATA[Radius (in km)]]></string>
 	<string name="_sys_form_input_sys_anonymous"><![CDATA[Post as anonymous]]></string>
 	<string name="_sys_form_input_anonymous"><![CDATA[Post as anonymous]]></string>
+        <string name="_sys_form_input_sys_labels"><![CDATA[Labels]]></string>
+        <string name="_sys_form_input_labels"><![CDATA[Labels]]></string>
+        <string name="_sys_form_input_labels_placeholder"><![CDATA[+ Add Label]]></string>
         <string name="_sys_form_labels"><![CDATA[Labels]]></string>
         <string name="_sys_form_labels_display_select"><![CDATA[Select labels display]]></string>
-		<string name="_sys_form_labels_input_caption_system_name"><![CDATA[Name]]></string>
+        <string name="_sys_form_labels_input_caption_system_name"><![CDATA[Name]]></string>
         <string name="_sys_form_labels_input_caption_system_action"><![CDATA[Action]]></string>
         <string name="_sys_form_labels_input_caption_system_search"><![CDATA[Search]]></string>
         <string name="_sys_form_labels_input_caption_search"><![CDATA[Search]]></string>

modules/boonex/russian/data/langs/system/ru.xml

@@ -2208,12 +2208,13 @@
 	<string name="_sys_form_forgot_password_input_submit"><![CDATA[Выполнить]]></string>
 	<string name="_sys_form_input_age"><![CDATA[Возраст]]></string>
 	<string name="_sys_form_input_sys_location"><![CDATA[Расположение]]></string>
-  <string name="_sys_form_input_location"><![CDATA[Расположение по радиусу]]></string>
-  <string name="_sys_form_input_location_radius_label"><![CDATA[Радиус (в км)]]></string>
-  <string name="_sys_form_input_sys_labels"><![CDATA[Метки]]></string>
-    <string name="_sys_form_input_labels"><![CDATA[Метки]]></string>
-	<string name="_sys_form_input_sys_anonymous"><![CDATA[Анонимная публикация]]></string>
-	<string name="_sys_form_input_anonymous"><![CDATA[Анонимная публикация]]></string>
+        <string name="_sys_form_input_location"><![CDATA[Расположение по радиусу]]></string>
+        <string name="_sys_form_input_location_radius_label"><![CDATA[Радиус (в км)]]></string>
+        <string name="_sys_form_input_sys_anonymous"><![CDATA[Анонимная публикация]]></string>
+        <string name="_sys_form_input_anonymous"><![CDATA[Анонимная публикация]]></string>
+        <string name="_sys_form_input_sys_labels"><![CDATA[Метки]]></string>
+        <string name="_sys_form_input_labels"><![CDATA[Метки]]></string>
+	<string name="_sys_form_input_labels_placeholder"><![CDATA[+ Добавить метку]]></string>
         <string name="_sys_form_labels"><![CDATA[Метки]]></string>
         <string name="_sys_form_labels_display_select"><![CDATA[Выбор метки]]></string>
         <string name="_sys_form_labels_input_caption_system_name"><![CDATA[Имя]]></string>

template/css/forms.css

@@ -584,11 +584,11 @@
 
 /* auto-siggestion input */
 
-.bx-form-value .bx-form-input-autotoken {
+.bx-form-value .bx-form-input-autotoken:not(.bx-form-input-labels) {
     float:left;
     padding:0px;
     height:auto;
-	box-shadow: none;
+    box-shadow: none;
     min-height: 2.8rem;
 }
 .bx-form-value .bx-form-input-autotoken b {

template/css/label.css

@@ -1,12 +1,49 @@
 /*-- Labels Form Field --*/
+.sys-labels .bx-form-input-text.bx-form-input-autotoken {
+    display: -webkit-flex;
+    display: flex;
+    -webkit-flex-wrap: wrap;
+    flex-wrap: wrap;
+
+    box-sizing: border-box;
+    height: auto;
+    min-height: 2.5rem;
+
+    padding: 0.25rem;
+}
+.sys-labels .bx-form-input-text.bx-form-input-autotoken b,
+.sys-labels .bx-form-input-text.bx-form-input-autotoken input:not([type = 'hidden']) {
+    position: relative;
+    display: block;
+    float: none;
+
+    height: 1.625rem;
+    margin: 0.125rem;
+
+    line-height: 1.625rem;    
+}
 .sys-labels .bx-form-input-text.bx-form-input-autotoken b {
     padding-left: 0.5rem;
+
+    white-space: nowrap;
+}
+.sys-labels .bx-form-input-text.bx-form-input-autotoken b:after {
+    top: -1px;
+
+    margin: 0;
+    padding: 0 0.5rem;
+}
+.sys-labels .bx-form-input-text.bx-form-input-autotoken b.val-placeholder {
+    border-style: dashed;
 }
 .sys-labels .bx-form-input-text.bx-form-input-autotoken.bx-form-input-disabled b {
     padding-left: 0.5rem;
     padding-right: 0.5rem;
 }
-
+.sys-labels .bx-form-input-text.bx-form-input-autotoken input:not([type = 'hidden']) {
+    width: auto !important;
+    padding: 0;
+}
 
 /*-- Labels Popup Search --*/
 .sys-labels-select .bx-form-input-text.bx-form-input-autotoken b {

template/label_select_field.html

@@ -1,2 +1,2 @@
-<div id="__html_id__" class="sys-labels bx-def-margin-top bx-clearfix" onclick="javascript:__js_object__.selectLabels(this, '__name__')">__input_labels__</div>
+<div id="__html_id__" class="sys-labels bx-clearfix" onclick="javascript:__js_object__.selectLabels(this, '__name__')">__input_labels__</div>
 __js_code__

template/label_select_field_item.html

@@ -1 +1 @@
-<b class="val bx-def-color-bg-hl bx-def-round-corners">__label__<input type="hidden" name="__field__[]" value="__label__" /></b>
+<b class="val bx-def-color-bg-hl bx-def-border bx-def-round-corners bx-def-box-sizing __class__">__label__<bx_if:show_input><input type="hidden" name="__field__[]" value="__label__" /></bx_if:show_input></b>

template/scripts/BxBaseFormView.php

@@ -1439,7 +1439,7 @@ BLAH;
         if(!empty($aInput['value']) && !is_array($aInput['value']))
             $aInput['value'] = unserialize($aInput['value']);
 
-        return BxDolLabel::getInstance()->getElementLabels($aInput);
+        return BxDolLabel::getInstance()->getFormElement($aInput);
     }
     
     /**

template/scripts/BxBaseLabel.php

@@ -32,7 +32,7 @@ class BxBaseLabel extends BxDolLabel
         $this->_sJsObjName = 'oBxDolLabel';
 
         $this->_aHtmlIds = array(
-            'labels_element' => 'sys-labels',
+            'labels_element' => 'sys-labels-',
             'labels_select_popup' => 'sys-labels-select-popup',
         );
     }
@@ -95,7 +95,7 @@ class BxBaseLabel extends BxDolLabel
         $oForm->initChecker($aValues);
 
         if($oForm->isSubmittedAndValid()) {
-			$sName = $oForm->getCleanValue('name');
+            $sName = $oForm->getCleanValue('name');
 
             $aLabels = array();
             if(($aLabelsSearch = $oForm->getCleanValue('search')) !== false)
@@ -106,10 +106,12 @@ class BxBaseLabel extends BxDolLabel
 
             $aLabels = array_unique($aLabels);
 
-            return array('eval' => $sJsObject . '.onSelectLabels(oData);', 'content' => $this->getElementLabels(array(
-				'name' => $sName,
-                'value' => $aLabels, 
-            )));
+            $sLabels = '';
+            if(!empty($aLabels) && is_array($aLabels))
+                foreach($aLabels as $sLabel)
+                    $sLabels .= $this->getLabel($sName, $sLabel);
+        
+            return array('eval' => $sJsObject . '.onSelectLabels(oData);', 'name' => $sName, 'content' => $sLabels);
         }
 
         $sContent = BxTemplFunctions::getInstance()->transBox($this->_aHtmlIds['labels_select_popup'], $this->_oTemplate->parseHtmlByName('label_select_popup.html', array(
@@ -124,8 +126,27 @@ class BxBaseLabel extends BxDolLabel
     public function getLabel($sField, $sLabel)
     {
         return $this->_oTemplate->parseHtmlByName('label_select_field_item.html', array(
-            'field' => $sField,
-            'label' => $sLabel
+            'class' => '',
+            'label' => $sLabel,
+            'bx_if:show_input' => array(
+                'condition' => true,
+                'content' => array(
+                    'label' => $sLabel,
+                    'field' => $sField,
+                )
+            )
+        ));
+    }
+
+    public function getLabelPlaceholder($sPlaceholder)
+    {
+        return $this->_oTemplate->parseHtmlByName('label_select_field_item.html', array(
+            'class' => 'val-placeholder',
+            'label' => _t($sPlaceholder),
+            'bx_if:show_input' => array(
+                'condition' => false,
+                'content' => array()
+            )
         ));
     }
 

template/scripts/BxBaseLabelForm.php

@@ -29,7 +29,7 @@ class BxBaseLabelForm extends BxTemplFormView
         return parent::initChecker($aValues, $aSpecificValues);
     }
 
-    public function getElementLabels($aInput = array())
+    public function getFormElement($aInput = array())
     {
         $sName = !empty($aInput['name']) ? $aInput['name'] : 'labels';
         $sHtmlId = !empty($aInput['attrs']['id']) ? $aInput['attrs']['id'] : 'bx-form-element-labels';
@@ -39,6 +39,10 @@ class BxBaseLabelForm extends BxTemplFormView
             foreach($aInput['value'] as $sLabel)
                 $sValue .= $this->_oObject->getLabel($sName, $sLabel);
 
+        $sKeyPlaceholder = $aInput['caption_src'] . '_placeholder';
+        if(strcmp($sKeyPlaceholder, _t($sKeyPlaceholder)) != 0)
+            $sValue .= $this->_oObject->getLabelPlaceholder($sKeyPlaceholder);           
+
         $aInputLabels = array(
             'type' => 'custom',
             'name' => $sName,
@@ -48,6 +52,7 @@ class BxBaseLabelForm extends BxTemplFormView
                 'action' => 'labels_list',
             )),
             'attrs' => array(
+                'class' => 'bx-form-input-labels',
                 'disabled' => 'disabled'
             )
         );
@@ -56,7 +61,7 @@ class BxBaseLabelForm extends BxTemplFormView
             'js_object' => $this->_oObject->getJsObjectName(),
             'js_code' => $this->_oObject->getJsCodeForm(),
             'html_id' => $sHtmlId,
-			'name' => $sName,
+            'name' => $sName,
             'input_labels' => $this->genCustomInputUsernamesSuggestions($aInputLabels)
         ));
     }