dcl cms navbar logo

datacenterlight/cms_models.py

@@ -120,6 +120,30 @@ class DCLLinkPluginModel(CMSPlugin):
     )
 
 
+class DCLNavbarPluginModel(CMSPlugin):
+    logo_light = FilerImageField(
+        on_delete=models.CASCADE, null=True, blank=True,
+        help_text='Logo to be used on transparent navbar'
+    )
+    logo_dark = FilerImageField(
+        on_delete=models.CASCADE, null=True, blank=True,
+        help_text='Logo to be used on white navbar'
+    )
+    logo_url = models.URLField(max_length=300, null=True, blank=True)
+
+    def get_logo_dark(self):
+        if self.logo_dark:
+            return self.logo_dark.url
+        else:
+            return self.logo_white.url
+
+    def get_logo_light(self):
+        if self.logo_light:
+            return self.logo_light.url
+        else:
+            return self.logo_dark.url
+
+
 class DCLNavbarDropdownPluginModel(CMSPlugin):
     target = models.CharField(
         max_length=100, null=True, blank=True,

datacenterlight/cms_plugins.py

@@ -6,7 +6,7 @@ from .cms_models import (
     DCLBannerItemPluginModel, DCLBannerListPluginModel, DCLContactPluginModel,
     DCLFooterPluginModel, DCLLinkPluginModel, DCLNavbarDropdownPluginModel,
     DCLSectionIconPluginModel, DCLSectionImagePluginModel,
-    DCLSectionPluginModel,
+    DCLSectionPluginModel, DCLNavbarPluginModel
 )
 from .models import VMTemplate
 
@@ -84,7 +84,7 @@ class DCLBannerItemPlugin(CMSPluginBase):
 class DCLNavbarPlugin(CMSPluginBase):
     module = "Datacenterlight"
     name = "DCL Navbar Plugin"
-    model = CMSPlugin
+    model = DCLNavbarPluginModel
     render_template = "datacenterlight/cms/navbar.html"
     cache = False
     allow_children = True

datacenterlight/migrations/0013_dclnavbarpluginmodel.py

@@ -0,0 +1,34 @@
+# -*- coding: utf-8 -*-
+# Generated by Django 1.9.4 on 2018-03-16 09:53
+from __future__ import unicode_literals
+
+from django.db import migrations, models
+import django.db.models.deletion
+import filer.fields.image
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('cms', '0014_auto_20160404_1908'),
+        ('datacenterlight', '0012_dclcalculatorpluginmodel'),
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name='DCLNavbarPluginModel',
+            fields=[
+                ('cmsplugin_ptr', models.OneToOneField(auto_created=True, on_delete=django.db.models.deletion.CASCADE,
+                                                       parent_link=True, primary_key=True, serialize=False, to='cms.CMSPlugin')),
+                ('logo_url', models.URLField(blank=True, max_length=300, null=True)),
+                ('logo_dark', filer.fields.image.FilerImageField(blank=True, help_text='Logo to be used on white navbar',
+                                                                 null=True, on_delete=django.db.models.deletion.CASCADE, to='filer.Image')),
+                ('logo_light', filer.fields.image.FilerImageField(blank=True, help_text='Logo to be used on transparent navbar',
+                                                                  null=True, on_delete=django.db.models.deletion.CASCADE, to='filer.Image')),
+            ],
+            options={
+                'abstract': False,
+            },
+            bases=('cms.cmsplugin',),
+        ),
+    ]

datacenterlight/static/datacenterlight/css/landing-page.css

@@ -79,6 +79,10 @@ textarea {
   border-radius: 6px;
 }
 
+.navbar-brand > img {
+  max-height: 30px;
+}
+
 @media (max-width: 767px) {
   .navbar-default .navbar-nav>li>a{
     font-weight: 400;

datacenterlight/templates/datacenterlight/cms/navbar.html

@@ -10,8 +10,14 @@
       <span class="icon-bar"></span>
       <span class="icon-bar"></span>
     </button>
-    <a href="{% url 'datacenterlight:index' %}" id="logoBlack" class="navbar-brand topnav"><img src="{% static 'datacenterlight/img/logo_black.svg' %}"></a>
+    {% url 'datacenterlight:index' as default_logo_url %}
-    <a href="{% url 'datacenterlight:index' %}" id="logoWhite" class="navbar-brand topnav"><img src="{% static 'datacenterlight/img/logo_white.svg' %}"></a>
+    {% if instance.logo_dark or instance.logo_white %}
+      <a href="{{ instance.logo_url|default:default_logo_url }}" id="logoBlack" class="navbar-brand topnav"><img src="{{ instance.get_logo_dark }}"></a>
+      <a href="{{ instance.logo_url|default:default_logo_url }}" id="logoWhite" class="navbar-brand topnav"><img src="{{ instance.get_logo_light }}"></a>
+    {% else %}
+      <a href="{{ default_logo_url }}" id="logoBlack" class="navbar-brand topnav"><img src="{% static 'datacenterlight/img/logo_black.svg' %}"></a>
+      <a href="{{ default_logo_url }}" id="logoWhite" class="navbar-brand topnav"><img src="{% static 'datacenterlight/img/logo_white.svg' %}"></a>
+    {% endif %}
   </div>
   <div class="collapse navbar-collapse" id="dcl-topnav">
     <!-- Start Navbar collapse-->