Ticket #3629 - Artificer template (Part 2): Labels.

modules/boonex/artificer/data/template/system/css/forms.css

@@ -231,14 +231,14 @@ import url(../../../../../../../template/css/forms.css);
 
 
 /*--- Form field: Auto-siggestion ---*/
-.bx-form-value .bx-form-input-autotoken:not(.bx-form-input-autotoken-labels) {
+.bx-form-value .bx-form-input-autotoken:not(.bx-form-input-labels) {
     float:left;
     padding: 0.25rem 0;
     height:auto;
     box-shadow: none;
     min-height: 2.8rem;
 }
-.bx-form-value .bx-form-input-autotoken:not(.bx-form-input-autotoken-labels) b {
+.bx-form-value .bx-form-input-autotoken:not(.bx-form-input-labels) b {
     display: block;
     margin: 0.25rem;
     padding-right: 1.5rem; 
@@ -249,13 +249,13 @@ import url(../../../../../../../template/css/forms.css);
     font-weight: normal;    
     cursor: pointer;
 }
-.bx-form-value .bx-form-input-autotoken:not(.bx-form-input-autotoken-labels) b:first-child {
+.bx-form-value .bx-form-input-autotoken:not(.bx-form-input-labels) b:first-child {
     margin-left: 0.75rem;
 }
-.bx-form-value .bx-form-input-autotoken:not(.bx-form-input-autotoken-labels) b:hover {
+.bx-form-value .bx-form-input-autotoken:not(.bx-form-input-labels) b:hover {
     opacity: 0.7;
 }
-.bx-form-value .bx-form-input-autotoken:not(.bx-form-input-autotoken-labels) b:after {
+.bx-form-value .bx-form-input-autotoken:not(.bx-form-input-labels) b:after {
     font-family: 'sys-user', 'sys-user-fal';
     content: "\f00d";    
     position:absolute;    
@@ -264,13 +264,13 @@ import url(../../../../../../../template/css/forms.css);
     font-size:0.7em;
     font-weight:bold;
 }
-.bx-form-value .bx-form-input-autotoken:not(.bx-form-input-autotoken-labels).bx-form-input-disabled b {
+.bx-form-value .bx-form-input-autotoken:not(.bx-form-input-labels).bx-form-input-disabled b {
     cursor: default;
 }
-.bx-form-value .bx-form-input-autotoken:not(.bx-form-input-autotoken-labels).bx-form-input-disabled b:after{
+.bx-form-value .bx-form-input-autotoken:not(.bx-form-input-labels).bx-form-input-disabled b:after{
     display: none;
 }
-.bx-form-value .bx-form-input-autotoken:not(.bx-form-input-autotoken-labels) input {
+.bx-form-value .bx-form-input-autotoken:not(.bx-form-input-labels) input {
     border:0;
     margin:0;
     padding:0 0 0 5px;
@@ -278,32 +278,19 @@ import url(../../../../../../../template/css/forms.css);
     float:left;
     box-shadow: none;
 }
-.bx-form-value .bx-form-input-autotoken:not(.bx-form-input-autotoken-labels) .bx-base-pofile-unit-wo-info {
+.bx-form-value .bx-form-input-autotoken:not(.bx-form-input-labels) .bx-base-pofile-unit-wo-info {
     display: inline-block;
     vertical-align: middle;
 
     margin-right: 8px;
     margin-right: 0.5rem;
 }
-.bx-form-value .bx-form-input-autotoken-labels > a {
+.bx-form-value .bx-form-input-labels > a {
     margin-left: 0.5rem;
 }
-.bx-form-value .bx-form-input-autotoken-labels > a:first-child {
+.bx-form-value .bx-form-input-labels > a:first-child {
     margin-left: 0;
 }
-.bx-form-value .bx-form-input-autotoken-labels-show-more {
-    display:inline-block;
-    line-height:1.5rem;
-    font-size:85%;    
-    padding-right:1em;
-    margin-top:0.625rem;
-    margin-left:0.1em;
-    margin-right:0.1em;
-    font-style:normal;
-}
-.bx-form-input-autotoken-labels-more {
-    display:none;
-}
 .select2-container {
     width:100% !important;
 }

modules/boonex/artificer/data/template/system/css/label.css

@@ -4,8 +4,4 @@
 /*-- Labels Form Field --*/
 .bx-form-value .sys-labels .bx-form-input-autotoken.bx-form-input-labels {
     padding: 0.25rem 0;
-}
-
-.bx-form-value .sys-labels .bx-form-input-autotoken.bx-form-input-labels b {
-    line-height: normal;
 }

template/css/forms.css

@@ -663,11 +663,7 @@
     margin-right: 8px;
     margin-right: 0.5rem;
 }
-.bx-form-value .bx-form-input-autotoken-labels b {
-    padding-left: 1em;
-}
-.bx-form-value .bx-form-input-autotoken-labels-show-more,
-.bx-form-value .bx-form-input-autotoken-labels-sel b {
+.bx-form-value .bx-form-input-labels-sel b {
     display:inline-block;
     line-height:1.5rem;
     font-size:85%;    
@@ -675,14 +671,7 @@
     margin-top:0.625rem;
     font-style:normal;
 }
-.bx-form-value .bx-form-input-autotoken-labels-show-more {
-    margin-left:0.1em;
-    margin-right:0.1em;
-}
-.bx-form-value .bx-form-input-autotoken-labels-sel b:after {
-    display:none;
-}
-.bx-form-input-autotoken-labels-more {
+.bx-form-value .bx-form-input-labels-sel b:after {
     display:none;
 }
 .select2-container {

template/css/label.css

@@ -20,12 +20,19 @@
     height: 1.625rem;
     margin: 0.125rem;
 
-    line-height: 1.625rem;    
+    line-height: 1.625rem;
 }
 .sys-labels .bx-form-input-text.bx-form-input-autotoken b {
     padding-left: 0.5rem;
+    
+    border-radius: 1.25rem;
 
+    font-weight: normal;
     white-space: nowrap;
+    cursor: pointer;
+}
+.sys-labels .bx-form-input-text.bx-form-input-autotoken b:first-child {
+    margin-left: 0.75rem;
 }
 .sys-labels .bx-form-input-text.bx-form-input-autotoken b:after {
     top: -1px;

template/form_field_labels.html

@@ -1,32 +0,0 @@
-<div id="__id__wrapper">
-    <div id="__id__" class="bx-form-input-autotoken bx-form-input-autotoken-labels bx-def-font-inputs bx-form-input-text">
-        __value__
-    </div>
-    <div class="bx-form-input-autotoken bx-form-input-autotoken-labels bx-form-input-autotoken-labels-sel">
-        __values__
-    </div>
-</div>
-<script>
-    var fCallack = function () {
-        // adding label
-        if ($(this).parents('.bx-form-input-autotoken-labels-sel').length) {
-            var e = $(this).remove().on('click', fCallack);
-            e.append('<input type="hidden" name="__name__[]" value="' + e.text() + '">');
-            $("#__id__").append(e);
-        }
-        // removing label
-        else if ($(this).parent('#__id__').length) {
-            var e = $(this).remove().on('click', fCallack);
-            e.find('input').remove();
-            $("#__id__wrapper .bx-form-input-autotoken-labels-sel").prepend(e);
-        }
-    };
-    $("#__id__wrapper b").on('click', fCallack);
-
-    // show more
-    $("#__id__wrapper .bx-form-input-autotoken-labels-show-more").on('click', function () {
-        $(this).hide();
-        $("#__id__wrapper .bx-form-input-autotoken-labels-more").show();
-        return false;
-    });
-</script>

template/form_field_labels_view.html

@@ -1,5 +1,5 @@
 <div class="bx-form-value">
-    <div class="bx-form-input-autotoken bx-form-input-autotoken-labels bx-form-input-autotoken-labels-sel">
+    <div class="bx-form-input-autotoken bx-form-input-labels bx-form-input-labels-sel">
         __values__
     </div>
-</div>
+</div>