Add a ribbon for new, featured and deprecated

qgis-app/plugins/templates/plugins/plugin_list.html

@@ -89,11 +89,32 @@ <h2>{% if title %}{{title}}{% else %}{% trans "All plugins" %}{% endif %}</h2>
                     card 
                     is-flex 
                     is-flex-direction-column 
-                    is-justify-content-space-between 
-                    {% if object.deprecated %} has-background-danger-light{% endif %}
+                    is-justify-content-space-between
                 "
                 onclick="window.location.href='{% url "plugin_detail" object.package_name %}';"
                 >
+
+                {% if object|is_new and not object.featured and not object.deprecated %}
+                    <div class="right-ribbon">
+                        <span class="new">
+                            <i class="fas fa-bolt mr-1"></i> New
+                        </span>
+                    </div>
+                {% endif %}
+                {% if object.featured and not object.deprecated %}
+                    <div class="right-ribbon">
+                        <span class="featured">
+                            <i class="fas fa-star mr-1"></i> Featured
+                        </span>
+                    </div>
+                {% endif %}
+                {% if object.deprecated %}
+                    <div class="right-ribbon">
+                        <span class="deprecated">
+                            Deprecated
+                        </span>
+                    </div>
+                {% endif %}
                 <div class="card-content is-flex is-flex-direction-column is-justify-content-space-between" style="height: 100%;">
                     <div class="media">
                         <div class="media-left">

qgis-app/plugins/templatetags/plugin_utils.py

@@ -5,6 +5,7 @@
 from django.conf import settings
 from bs4 import BeautifulSoup
 import requests
+import datetime
 
 register = template.Library()
 
@@ -65,6 +66,24 @@ def _validate_image(file_path):
 def feedbacks_not_completed(feedbacks):
     return feedbacks.filter(is_completed=False)
 
+PLUGINS_FRESH_DAYS = getattr(settings, "PLUGINS_FRESH_DAYS", 30)
+@register.filter
+def is_new(plugin, days=PLUGINS_FRESH_DAYS):
+    """
+    A template filter to check if a plugin is new based on the created_on date.
+    Default is to check if the plugin was created within the last 30 days.
+    """
+    if plugin.created_on:
+        now = datetime.datetime.now(datetime.timezone.utc)  # Use timezone-aware datetime
+        created_on = plugin.created_on
+
+        # Ensure created_on is timezone-aware
+        if created_on.tzinfo is None:
+            created_on = created_on.replace(tzinfo=datetime.timezone.utc)
+
+        delta = now - created_on
+        return delta.days <= days  # Returns True if within 'days', False otherwise
+    return False
 
 # inspired by projecta <https://github.com/kartoza/prj.app>
 @register.simple_tag(takes_context=True)

qgis-app/static/style/scss/_variables.scss

@@ -36,7 +36,7 @@ $grey-dark: #444444;
 $grey-darker: #363636;
 $grey-light: #d4d4d4;
 $primary: #a7cecb;
-$danger: hsl(348, 100%, 61%);
+$danger: hsl(0, 100%, 61%);
 $info: #93b023;
 $success: #589632;
 $warning: #ee7913;

qgis-app/static/style/scss/bulma/components/plugins-list.sass

@@ -1,18 +1,5 @@
 .plugins-list-table, .versions-list-table
   color: inherit
-  .rm-past
-    color: #4D6370
-    &:hover
-      color: black
-  .rm-future
-    font-weight: 600
-    color: #4D6370
-  .rm-current
-    font-weight: 600
-    color: #3a9800
-  .rm-next
-    font-weight: 600
-    color: #ee7913
   tr:hover
     background-color: #ECF1F4
     cursor: pointer
@@ -50,6 +37,80 @@
       width: 200px
       overflow: hidden
       text-overflow: ellipsis
+
+  .right-ribbon
+    position: absolute
+    right: -5px
+    top: -5px
+    z-index: 1
+    overflow: hidden
+    width: 150px
+    height: 150px
+    text-align: right
+
+  .right-ribbon span
+    color: #fff
+    text-align: center
+    font-size: 10pt
+    font-weight: 500
+    line-height: 25px
+    transform: rotate(45deg)
+    width: 130px
+    display: block
+    box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1)
+    position: absolute
+    top: 25px
+    right: -27px
+
+  .right-ribbon
+    .featured
+      background: $success
+    .new
+      background: $info
+    .deprecated
+      background: $danger
+
+  .right-ribbon span::before
+    content: ''
+    position: absolute
+    left: 0px
+    top: 100%
+    z-index: -1
+    border-right: 3px solid transparent
+    border-bottom: 3px solid transparent
+
+  .right-ribbon .featured::before
+    border-left: 3px solid $success
+    border-top: 3px solid $success
+
+  .right-ribbon .new::before
+    border-left: 3px solid $info
+    border-top: 3px solid $info
+
+  .right-ribbon .deprecated::before
+    border-left: 3px solid $danger
+    border-top: 3px solid $danger
+
+  .right-ribbon span::after
+    content: ''
+    position: absolute
+    right: 0%
+    top: 100%
+    z-index: -1
+    border-left: 3px solid transparent
+    border-bottom: 3px solid transparent
+
+  .right-ribbon .featured::after
+    border-right: 3px solid $success
+    border-top: 3px solid $success
+
+  .right-ribbon .new::after
+    border-right: 3px solid $info
+    border-top: 3px solid $info
+
+  .right-ribbon .deprecated::after
+    border-right: 3px solid $danger
+    border-top: 3px solid $danger
 
 div
   &.plugins-list-table, .versions-list-table
@@ -204,9 +265,9 @@ div
   right: -41px
 
 .right-ribbon
-  .stable
+  .featured
     background: #3a9800
-  .latest
+  .new
     background: #ee7913
   .development
     background: #4D6370
@@ -221,11 +282,11 @@ div
   border-right: 3px solid transparent
   border-bottom: 3px solid transparent
 
-.right-ribbon .stable::before
+.right-ribbon .featured::before
   border-left: 3px solid #3a9800
   border-top: 3px solid #3a9800
 
-.right-ribbon .latest::before
+.right-ribbon .new::before
   border-left: 3px solid #ee7913
   border-top: 3px solid #ee7913
 
@@ -242,11 +303,11 @@ div
   border-left: 3px solid transparent
   border-bottom: 3px solid transparent
 
-.right-ribbon .stable::after
+.right-ribbon .featured::after
   border-right: 3px solid #3a9800
   border-top: 3px solid #3a9800
 
-.right-ribbon .latest::after
+.right-ribbon .new::after
   border-right: 3px solid #ee7913
   border-top: 3px solid #ee7913