✨ 990 Implement new header (#1006)

src/sdg/conf/base.py

@@ -183,6 +183,7 @@
                 "django.contrib.auth.context_processors.auth",
                 "django.contrib.messages.context_processors.messages",
                 "sdg.utils.context_processors.settings",
+                "sdg.utils.context_processors.has_new_notifications",
             ],
             "loaders": TEMPLATE_LOADERS,
         },

src/sdg/organisaties/views/notificaties.py

@@ -1,12 +1,13 @@
 from django.contrib.auth.mixins import LoginRequiredMixin
+from django.utils import timezone
 from django.utils.timezone import now
 from django.utils.translation import gettext as _
 from django.views.generic import ListView
 
 from dateutil.relativedelta import relativedelta
 
 from sdg.core.views.mixins import BreadcrumbsMixin
-from sdg.producten.models import ProductVersie
+from sdg.producten.models import NotificationViewed, ProductVersie
 
 
 class ProductVersieListView(
@@ -41,3 +42,12 @@ def get_queryset(self):
             .published()
             .order_by("-gewijzigd_op")[: self.limit]
         )
+
+    def get(self, request, *args, **kwargs):
+        # Call the parent class's get method to fetch the queryset
+        response = super().get(request, *args, **kwargs)
+
+        # Update or create the NotificationViewed instance for the current user
+        NotificationViewed.objects.update_or_create(gebruiker=request.user)
+
+        return response

src/sdg/organisaties/views/roles.py

@@ -79,6 +79,15 @@ def get_form_class(self):
 
         raise PermissionDenied()
 
+    def get_success_url(self):
+        # Stay on the same page if the user is editing own settings and is not an admin.
+        if (
+            self.request.user.email == self.object.user.email
+            and self.object.is_beheerder is not True
+        ):
+            return self.request.get_full_path()
+        return super().get_success_url()
+
     def form_valid(self, form, *args, **kwargs):
         response = super().form_valid(form)
 

src/sdg/producten/migrations/0059_notificationviewed.py

@@ -0,0 +1,38 @@
+# Generated by Django 3.2.23 on 2024-10-21 14:12
+
+from django.conf import settings
+from django.db import migrations, models
+import django.db.models.deletion
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        migrations.swappable_dependency(settings.AUTH_USER_MODEL),
+        ("producten", "0058_alter_localizedproduct_decentrale_procedure_link"),
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name="NotificationViewed",
+            fields=[
+                (
+                    "id",
+                    models.AutoField(
+                        auto_created=True,
+                        primary_key=True,
+                        serialize=False,
+                        verbose_name="ID",
+                    ),
+                ),
+                ("last_viewed_date", models.DateTimeField(blank=True, null=True)),
+                (
+                    "gebruiker",
+                    models.OneToOneField(
+                        on_delete=django.db.models.deletion.CASCADE,
+                        to=settings.AUTH_USER_MODEL,
+                    ),
+                ),
+            ],
+        ),
+    ]

src/sdg/producten/migrations/0060_alter_notificationviewed_last_viewed_date.py

@@ -0,0 +1,18 @@
+# Generated by Django 3.2.23 on 2024-11-15 16:33
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ("producten", "0059_notificationviewed"),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name="notificationviewed",
+            name="last_viewed_date",
+            field=models.DateTimeField(auto_now=True),
+        ),
+    ]

src/sdg/producten/models/__init__.py

@@ -1,2 +1,3 @@
 from .localized import *  # noqa
+from .notification import *  # noqa
 from .product import *  # noqa

src/sdg/producten/models/notification.py

@@ -0,0 +1,12 @@
+from django.contrib.auth import get_user_model
+from django.db import models
+
+User = get_user_model()
+
+
+class NotificationViewed(models.Model):
+    gebruiker = models.OneToOneField(User, on_delete=models.CASCADE)
+    last_viewed_date = models.DateTimeField(auto_now=True)
+
+    def __str__(self):
+        return f"User: {self.gebruiker_id} - Notification last viewed on: {self.last_viewed_date}"

src/sdg/scss/components/_header.scss

@@ -1,48 +1,24 @@
-@import 'colors';
+@import "colors";
 
 .header {
-  --shadow-color: rgba(0, 0, 0, 0.121722);
-
   width: 100%;
   background: rgb(57, 106, 136);
-  background: linear-gradient(353.15deg, var(--org-theme-bg-darkest) -68.3%, var(--org-theme-bg) 179.94%);
+  background: linear-gradient(
+    353.15deg,
+    var(--org-theme-bg-darkest) -68.3%,
+    var(--org-theme-bg) 179.94%
+  );
   padding: 24px 0 0;
   justify-content: space-between;
   display: flex;
   flex-direction: column;
 
-  &.header--inset {
-    padding-bottom: 88px;
-  }
-
-  .header__top {
+  &__top {
     justify-content: space-between;
     display: flex;
     flex-direction: row;
   }
 
-  .header__user {
-    display: flex;
-    align-items: center;
-
-    & > .svg-inline--fa {
-      height: 50px;
-      width: 50px;
-      border-radius: 50%;
-      background-color: $color_primary_lightest;
-      color: $color_primary;
-      padding-top: 4px;
-      overflow: hidden;
-      margin-right: 8px;
-      border: 3px solid $color_secondary_dark;
-      z-index: 1;
-
-      path {
-        color: $color_primary;
-      }
-    }
-  }
-
   .header__username {
     background-color: var(--org-theme-bg-darker);
     border: 1px solid transparent;
@@ -59,36 +35,10 @@
     color: #000;
   }
 
-  .header__title {
-    color: $color_secondary_dark;
-    font-size: 40px;
-
-    .switch-icon {
-      color: $color_accent;
-      margin-left: 8px;
-    }
-
-    a:hover svg {
-      color: $color_accent_dark;
-      transition: all 0.3s ease-in-out;
-    }
-
-  }
-
-  .header__subtitle {
-    color: $color_secondary_darker;
-    font-size: 14px;
-    margin-bottom: 8px;
-  }
-
   .header__dropdown {
     position: relative;
     padding: 12px;
     color: #fff;
-
-    .svg-inline--fa:hover {
-      transform: scale(1.05);
-    }
   }
 
   .header__dropdown *:hover ~ .header__dropdown-list,
@@ -126,20 +76,4 @@
       text-decoration: underline;
     }
   }
-
-  .header__dropdown-action .svg-inline--fa {
-    float: left;
-    margin-top: 2px;
-    margin-right: 8px;
-    width: 1em;
-  }
-
-  .header__dropdown-text {
-    padding: 12px;
-    color: #000;
-    display: block;
-    text-align: left;
-    text-decoration: none;
-    margin-right: 8px;
-  }
 }

src/sdg/scss/components/_index.scss

@@ -34,3 +34,5 @@
 @import 'url_label_field';
 @import 'choices';
 @import 'publications';
+@import 'nav';
+@import 'user-dropdown';

src/sdg/scss/components/_nav.scss

@@ -0,0 +1,31 @@
+.nav {
+  display: flex;
+  justify-content: space-between;
+
+  &__list {
+    display: flex;
+    list-style: none;
+    font-size: 1rem;
+    color: $color-white;
+    margin: 0;
+    gap: $grid-margin-3;
+  }
+
+  &__item {
+    color: $color-white;
+  }
+
+  &__item--active &__link {
+    color: $color_accent;
+    text-decoration: underline;
+  }
+
+  &__link {
+    color: $color-white;
+    text-decoration: none;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+}

src/sdg/scss/components/_user-dropdown.scss

@@ -0,0 +1,86 @@
+.user-dropdown {
+  --shadow-color: rgba(0, 0, 0, 0.121722);
+  --border-color: #{$color_grey_dark};
+
+  align-items: center;
+  background-color: var(--org-theme-bg-darker);
+  border: 1px solid transparent;
+  border-radius: 9999px;
+  color: $color-white;
+  display: flex;
+  gap: $grid-margin-0;
+  height: 40px;
+  text-decoration: none;
+  padding-right: $grid-margin-2;
+  position: relative;
+  transition: all 0.3s ease-in-out;
+
+  &:hover &__list,
+  & > *:hover ~ &__list,
+  &__list:hover {
+    opacity: 1;
+    transition-delay: 0s;
+    visibility: visible;
+  }
+
+  &:hover {
+    background-color: $color_grey_light;
+    border-color: var(--border-color);
+    color: #212121;
+  }
+
+  &__icon {
+    background-color: $color_primary_lightest;
+    border: 2px solid var(--border-color);
+    border-radius: 50%;
+    color: $color_primary;
+    flex-shrink: 0;
+    height: 50px;
+    left: -4px;
+    overflow: hidden;
+    padding-top: 4px;
+    position: relative;
+    width: 50px;
+
+    > .svg-inline--fa {
+      color: $color_primary;
+      height: 100%;
+      width: 100%;
+    }
+  }
+
+  &__list {
+    background-color: $color_grey_light;
+    border: 1px solid var(--border-color);
+    border-radius: 10px;
+    box-shadow: 1px 1px 4px var(--shadow-color);
+    color: #fff;
+    left: 0;
+    opacity: 0;
+    position: absolute;
+    right: 0;
+    top: calc(100% + 1rem);
+    transition: all 0.3s ease-in-out;
+    transition-delay: 0s;
+    visibility: hidden;
+    z-index: 20;
+  }
+
+  &__action {
+    align-items: center;
+    color: $color_primary_dark;
+    display: flex;
+    gap: 0.5rem;
+    padding: 12px;
+    text-align: left;
+    text-decoration: none;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
+  hr {
+    border: 0.5px solid var(--border-color);
+  }
+}