Implemented .label-light variant (#4894)

protected/humhub/modules/content/widgets/stream/views/wallStreamEntryBodyLayout.php

@@ -21,7 +21,7 @@ use humhub\modules\ui\view\components\View;
         </div>
 
         <div class="wall-entry-body">
-            <div class="wall-entry-topics">
+            <div class="topic-label-list">
                 <?php foreach (Topic::findByContent($model->content)->all() as $topic) : ?>
                     <?= TopicLabel::forTopic($topic) ?>
                 <?php endforeach; ?>

protected/humhub/modules/topic/widgets/TopicLabel.php

@@ -25,6 +25,7 @@ class TopicLabel extends Label
     {
         $link = Link::withAction('', 'topic.addTopic')->options(['data-topic-id' => $topic->id, 'data-topic-url' => $topic->getUrl()]);
 
-        return static::defaultType($topic->name)->sortOrder(20)->color($topic->color)->withLink($link)->icon('fa-star');
+        return static::light($topic->name)->sortOrder(20)->color($topic->color)->withLink($link)->icon('fa-star');
     }
+
 }

protected/humhub/widgets/Label.php

@@ -22,12 +22,27 @@ use Yii;
 class Label extends BootstrapComponent
 {
 
+    /**
+     * @since 1.9
+     */
+    public const TYPE_LIGHT = 'light';
+
     public $_sortOrder = 1000;
     public $encode = true;
 
     public $_link;
     public $_action;
 
+    /**
+     * @param string $text Label text
+     * @return static
+     * @since 1.9
+     */
+    public static function light($text)
+    {
+        return new static(['type' => static::TYPE_LIGHT, 'text' => $text]);
+    }
+
     public function sortOrder($sortOrder)
     {
         $this->_sortOrder = $sortOrder;

static/less/form.less

@@ -163,66 +163,6 @@ a.input-field-addon-sm {
     margin: 0px;
 }
 
-//
-// Labels
-// --------------------------------------------------
-.label {
-    text-transform: uppercase;
-}
-
-.label {
-    text-transform: uppercase;
-    display: inline-block;
-    padding: 3px 5px 4px;
-    font-weight: 600;
-    font-size: 10px !important;
-    color: white !important;
-    vertical-align: baseline;
-    white-space: nowrap;
-    text-shadow: none;
-}
-
-.label-default {
-    background: @background-color-page;
-    color: @text-color-secondary !important;
-}
-
-a.label-default:hover {
-    background: darken(@background-color-page, 5%) !important;
-}
-
-.label-info {
-    background-color: @info;
-}
-
-a.label-info:hover {
-    background: darken(@info, 5%) !important;
-}
-
-.label-danger {
-    background-color: @danger;
-}
-
-a.label-danger:hover {
-    background: darken(@danger, 5%) !important;
-}
-
-.label-success {
-    background-color: @success;
-}
-
-a.label-success:hover {
-    background: darken(@success, 5%) !important;
-}
-
-.label-warning {
-    background-color: @warning;
-}
-
-a.label-warning:hover {
-    background: darken(@warning, 5%) !important;
-}
-
 // Flatelements
 .regular-checkbox:checked + .regular-checkbox-box {
     border: 2px solid @info;

static/less/stream.less

@@ -175,24 +175,6 @@
             }
         }
 
-        .wall-entry-topics {
-            margin-bottom: 10px;
-
-            a {
-                margin-right: 4px;
-            }
-
-            .label {
-                padding: 5px;
-                background-color: transparent;
-                //color: @info;
-                //border:1px solid @info;
-                color: @text-color-secondary;
-                border: 1px solid lighten(@text-color-secondary, 25%);
-                border-radius: 4px;
-            }
-        }
-
         audio, video {
             width: 100%;
         }

static/less/tags.less

@@ -15,3 +15,82 @@
 #user-tags-panel .tags .tag {
     max-width: 250px;
 }
+
+//
+// Labels
+// --------------------------------------------------
+.label {
+    text-transform: uppercase;
+}
+
+.label {
+    text-transform: uppercase;
+    display: inline-block;
+    padding: 3px 5px 4px;
+    font-weight: 600;
+    font-size: 10px;
+    color: white;
+    vertical-align: baseline;
+    white-space: nowrap;
+    text-shadow: none;
+}
+
+.label-default {
+    background: @background-color-page;
+    color: @text-color-secondary !important;
+}
+
+a.label-default:hover {
+    background: darken(@background-color-page, 5%) !important;
+}
+
+.label-info {
+    background-color: @info;
+}
+
+a.label-info:hover {
+    background: darken(@info, 5%) !important;
+}
+
+.label-danger {
+    background-color: @danger;
+}
+
+a.label-danger:hover {
+    background: darken(@danger, 5%) !important;
+}
+
+.label-success {
+    background-color: @success;
+}
+
+a.label-success:hover {
+    background: darken(@success, 5%) !important;
+}
+
+.label-warning {
+    background-color: @warning;
+}
+
+a.label-warning:hover {
+    background: darken(@warning, 5%) !important;
+}
+
+.label-light {
+    background-color: transparent;
+    color: @text-color-secondary;
+    border: 1px solid lighten(@text-color-secondary, 25%);
+}
+
+.topic-label-list, .wall-entry-topics {
+    margin-bottom: 10px;
+
+    a {
+        margin-right: 4px;
+    }
+
+    .label {
+        padding: 5px;
+        border-radius: 4px;
+    }
+}