Feature/django not react (#44)

* Made a start on implementing the frontend via django not react.

* Updated a lot of components to work with django

* Made some minor tweaks

* added missing dependency

* Added more functionality

* Merged develop

* updated the installed files

* fixed spacing problem when no sidebar is filled

* Fixed a description and some styling issues

.prettierignore

@@ -0,0 +1,7 @@
+frontend/
+static/
+src/open_inwoner/static/
+media/
+docs/
+bin/
+deployment/

.prettierrc.json

@@ -0,0 +1 @@
+{}

package.json

@@ -36,6 +36,7 @@
     "@ckeditor/ckeditor5-theme-lark": "^31.0.0",
     "@emotion/react": "^11.5.0",
     "@emotion/styled": "^11.3.0",
+    "gumshoejs": "^5.1.2",
     "leaflet": "^1.7.1",
     "microscope-sass": "latest",
     "style-loader": "^1.3.0"
@@ -61,6 +62,7 @@
     "mini-css-extract-plugin": "latest",
     "mocha": "latest",
     "postcss-loader": "^3.0.0",
+    "postcss-preset-env": "^7.0.1",
     "postcss-selector-lint": "latest",
     "raw-loader": "^4.0.2",
     "sass": "latest",

requirements/base.in

@@ -35,6 +35,8 @@ django-registration
 django-view-breadcrumbs
 markdown
 django_better_admin_arrayfield
+humanfriendly
+django_better_admin_arrayfield
 
 # API libraries
 djangorestframework

requirements/base.txt

@@ -8,6 +8,8 @@ asgiref==3.4.1
     # via django
 attrs==21.2.0
     # via jsonschema
+beautifulsoup4==4.10.0
+    # via -r requirements/base.in
 certifi==2021.5.30
     # via
     #   elastic-apm
@@ -159,6 +161,8 @@ geographiclib==1.52
     # via geopy
 geopy==2.2.0
     # via -r requirements/base.in
+humanfriendly==10.0
+    # via -r requirements/base.in
 idna==3.2
     # via requests
 importlib-metadata==4.8.2
@@ -245,6 +249,8 @@ six==1.16.0
     #   pyopenssl
     #   python-dateutil
     #   qrcode
+soupsieve==2.3.1
+    # via beautifulsoup4
 sqlparse==0.4.2
     # via django
 tablib[html,ods,xls,xlsx,yaml]==3.1.0
@@ -269,5 +275,3 @@ xmlsec==1.3.12
     # via python3-saml
 zipp==3.6.0
     # via importlib-metadata
-beautifulsoup4==4.10.0
-

requirements/ci.txt

@@ -17,7 +17,10 @@ attrs==21.2.0
     #   -r requirements/base.txt
     #   jsonschema
 beautifulsoup4==4.10.0
-    # via webtest
+    # via
+    #   -c requirements/base.txt
+    #   -r requirements/base.txt
+    #   webtest
 certifi==2021.5.30
     # via
     #   -c requirements/base.txt
@@ -302,6 +305,10 @@ geopy==2.2.0
     # via
     #   -c requirements/base.txt
     #   -r requirements/base.txt
+humanfriendly==10.0
+    # via
+    #   -c requirements/base.txt
+    #   -r requirements/base.txt
 idna==3.2
     # via
     #   -c requirements/base.txt
@@ -496,8 +503,11 @@ six==1.16.0
     #   python-dateutil
     #   qrcode
     #   requests-mock
-soupsieve==2.2.1
-    # via beautifulsoup4
+soupsieve==2.3.1
+    # via
+    #   -c requirements/base.txt
+    #   -r requirements/base.txt
+    #   beautifulsoup4
 sqlparse==0.4.2
     # via
     #   -c requirements/base.txt

requirements/dev.txt

@@ -347,6 +347,10 @@ geopy==2.2.0
     # via
     #   -c requirements/ci.txt
     #   -r requirements/ci.txt
+humanfriendly==10.0
+    # via
+    #   -c requirements/ci.txt
+    #   -r requirements/ci.txt
 idna==3.2
     # via
     #   -c requirements/ci.txt
@@ -594,7 +598,7 @@ six==1.16.0
     #   requests-mock
 snowballstemmer==2.1.0
     # via sphinx
-soupsieve==2.2.1
+soupsieve==2.3.1
     # via
     #   -c requirements/ci.txt
     #   -r requirements/ci.txt

src/open_inwoner/components/templates/components/Button/Button.html

@@ -3,11 +3,10 @@
 {% if href %}
     <a class="{% create_button_classes %}" href="{{href}}">
         {% if icon %}<span class="material-icons">{{ icon }}</span>{% endif %}
-        {% if closeAction %}<span class="material-icons">close</span>{% endif %}
         {{text}}
     </a>
 {% else %}
-    <button onClick={ closeAction } class="{% create_button_classes %}" type="{{type}}">
+    <button class="{% create_button_classes %}" type="{{type}}">
         {% if icon %}<span class="material-icons">{{ icon }}</span>{% endif %}
         {% if closeAction %}<span class="material-icons">close</span>{% endif %}
         {{text}}

src/open_inwoner/components/templates/components/File/File.html

@@ -0,0 +1,14 @@
+{% load i18n link_tags utils %}
+
+<aside class="file">
+    {% if file.file.file_type == 'Image' %}
+    <span class="material-icons-outlined">image</span>
+    {% else %}
+    <span class="material-icons-outlined">description</span>
+    {% endif %}
+    <p class="p">
+        {% firstof file.file.name file.file.label|cut:file.file.extension|cut:"." %} ({{file.file.extension}}, {{file.file.file.size|readable_size}})
+    </p>
+    {% trans "Download" as download %}
+    {% link href=file.file.file.url text=download secondary=True download=True icon="file_download" %}
+</aside>

src/open_inwoner/components/templates/components/File/FileList.html

@@ -0,0 +1,17 @@
+{% load i18n file_tags %}
+
+<nav class="file-list">
+    {% trans "Bestanden" as base_title %}
+    {% if h1 %}
+        <h1 class="h1" id="files">{% firstof title base_title %}</h1>
+    {% else %}
+        <h4 class="h4" id="files">{% firstof title base_title %}</h4>
+    {% endif %}
+    <ul class="file-list__list">
+        {% for file in files %}
+        <li class="file-list__list-item">
+            {% file file=file %}
+        </li>
+        {% endfor %}
+    </ul>
+</nav>

src/open_inwoner/components/templates/components/Header/AccessibilityHeader.html

@@ -4,22 +4,24 @@
     <ul class="accessibility-header__list">
         <li class="accessibility-header__list-item">
             {% trans "Lees voor" as link_text %}
-            {% link href="#" icon="hearing" text=link_text %}
+            {% link href="#" icon="hearing" text=link_text extra_classes="accessibility--read" %}
         </li>
 
         <li class="accessibility-header__list-item">
             {% trans "Vergroten" as link_text %}
-            {% link href="#" icon="zoom_in" text=link_text %}
+            {% trans "Verkleinen" as alt_link_text %}
+            {% link href="#" icon="zoom_in" text=link_text extra_classes="accessibility--enlarge-font" data_text=link_text data_alt_text=alt_link_text data_icon="zoom_in" data_alt_icon="zoom_out" %}
         </li>
 
         <li class="accessibility-header__list-item">
             {% trans "Dyslexie" as link_text %}
-            {% link href="#" icon="font_download" text=link_text %}
+            {% trans "Normaal lettertype" as alt_link_text %}
+            {% link href="#" icon="font_download" text=link_text extra_classes="accessibility--change-font" data_text=link_text data_alt_text=alt_link_text %}
         </li>
 
         <li class="accessibility-header__list-item">
             {% trans "Print pagina" as link_text %}
-            {% link href="#" icon="print" text=link_text %}
+            {% link href="#" icon="print" text=link_text extra_classes="accessibility--print" %}
         </li>
     </ul>
 </header>

src/open_inwoner/components/templates/components/Typography/Link.html

@@ -1,6 +1,15 @@
 {% load i18n helpers %}
 
-<a href="{{href}}" {% if download %}download{% endif %} {% if href|startswith:"http" %}target="_blank"{% endif %} class="link {{ extra_classes }} {% if active %}link--active{% endif %} {% if iconPosition %}button--icon-{{iconPosition}}{% endif %} {% if primary %}link--primary{% endif %} {% if secondary %}link--secondary{% endif %}">
+<a
+    href="{{href}}"
+    {% if download %}download{% endif %}
+    {% if href|startswith:"http" %}target="_blank"{% endif %}
+    class="link {{ extra_classes }} {% if active %}link--active{% endif %} {% if iconPosition %}button--icon-{{iconPosition}}{% endif %} {% if primary %}link--primary{% endif %} {% if secondary %}link--secondary{% endif %}"
+    {% if data_text %}data-text="{{ data_text }}"{% endif %}
+    {% if data_alt_text %}data-alt-text="{{ data_alt_text }}"{% endif %}
+    {% if data_icon %}data-icon="{{ data_icon }}"{% endif %}
+    {% if data_alt_icon %}data-alt-icon="{{ data_alt_icon }}"{% endif %}
+>
     {% if src %}
         <img class="logo__image" src="{{src}}" alt="{% trans "Logo of the municipality" %}"/>
     {% endif %}
@@ -10,6 +19,6 @@
     {% if icon %}
         <span class="material-icons">{{icon}}</span>
     {% endif %}
-    {{ text }}
+    <span class="link__text">{{ text }}</span>
     {% if href|startswith:"http" %}<span class="material-icons">open_in_new</span>{% endif %}
 </a>

src/open_inwoner/components/templatetags/button_tags.py

@@ -5,4 +5,9 @@
 
 @register.inclusion_tag("components/Button/Button.html")
 def button(text, **kwargs):
+    """
+    text: this will be the button text
+    href: where the button links to (Optional)
+    icon: the icon that you want to display (Optional)
+    """
     return {**kwargs, "text": text}

src/open_inwoner/components/templatetags/file_tags.py

@@ -0,0 +1,21 @@
+from django import template
+
+register = template.Library()
+
+
+@register.inclusion_tag("components/File/FileList.html")
+def file_list(**kwargs):
+    """
+    files: array | this is the list of file that need to be rendered. (Optional)
+    h1: bool | render the title in a h1 instead of a h4 (Optional)
+    title: string | the title that should be used (Optional)
+    """
+    return {**kwargs}
+
+
+@register.inclusion_tag("components/File/File.html")
+def file(file, **kwargs):
+    """
+    file: this is the file that needs to be rendered.
+    """
+    return {**kwargs, "file": file}

src/open_inwoner/configurations/models.py

@@ -25,8 +25,66 @@ class SiteConfiguration(SingletonModel):
         help_text=_("Logo of the municipality"),
     )
 
+    class Meta:
+        verbose_name = "Site Configuration"
+
     def __str__(self):
         return "Site Configuration"
 
-    class Meta:
-        verbose_name = "Site Configuration"
+    @property
+    def get_primary_color(self):
+        return self.hex_to_hsl(self.primary_color)
+
+    @property
+    def get_secondary_color(self):
+        return self.hex_to_hsl(self.secondary_color)
+
+    @property
+    def get_accent_color(self):
+        return self.hex_to_hsl(self.accent_color)
+
+    def hex_to_hsl(self, color):
+        # Convert hex to RGB first
+        r = 0
+        g = 0
+        b = 0
+        if len(color) == 4:
+            r = "0x" + color[1] + color[1]
+            g = "0x" + color[2] + color[2]
+            b = "0x" + color[3] + color[3]
+        elif len(color) == 7:
+            r = "0x" + color[1] + color[2]
+            g = "0x" + color[3] + color[4]
+            b = "0x" + color[5] + color[6]
+
+        # Then to HSL
+        r = int(r, 16) / 255
+        g = int(g, 16) / 255
+        b = int(b, 16) / 255
+        cmin = min(r, g, b)
+        cmax = max(r, g, b)
+        delta = cmax - cmin
+        h = 0
+        s = 0
+        l = 0
+
+        if delta == 0:
+            h = 0
+        elif cmax == r:
+            h = ((g - b) / delta) % 6
+        elif cmax == g:
+            h = (b - r) / delta + 2
+        else:
+            h = (r - g) / delta + 4
+
+        h = round(h * 60)
+
+        if h < 0:
+            h += 360
+
+        l = (cmax + cmin) / 2
+        s = 0 if delta == 0 else delta / (1 - abs(2 * l - 1))
+        s = int((s * 100))
+        l = int((l * 100))
+
+        return h, s, l

src/open_inwoner/js/components/accessibility/change_font.js

@@ -0,0 +1,25 @@
+const printButtons = document.querySelectorAll(".accessibility--change-font")
+
+class Print {
+    constructor(node) {
+        this.node = node;
+        this.text = node.querySelector(".link__text");
+        this.node.addEventListener('click', this.change.bind(this))
+    }
+
+    change(event) {
+        event.preventDefault();
+        let root = document.documentElement;
+        const varName = '--font-family-body';
+
+        if (root.style.getPropertyValue(varName) == "Open Dyslexic") {
+            root.style.setProperty(varName, "TheSans C5");
+            this.text.innerText = this.node.dataset.text;
+        } else {
+            root.style.setProperty(varName, "Open Dyslexic");
+            this.text.innerText = this.node.dataset.altText;
+        }
+    }
+}
+
+[...printButtons].forEach((printButton) => new Print(printButton))

src/open_inwoner/js/components/accessibility/enlarge_font.js

@@ -0,0 +1,30 @@
+const enlargeButtons = document.querySelectorAll(".accessibility--enlarge-font")
+
+class EnlageFont {
+    constructor(node) {
+        this.node = node;
+        this.text = node.querySelector(".link__text");
+        this.icon = node.querySelector(".material-icons");
+        this.node.addEventListener('click', this.enlarge.bind(this))
+    }
+
+    enlarge(event) {
+        event.preventDefault();
+        let root = document.documentElement;
+        const varName = '--font-size-body';
+        const baseSize = '16px'
+        const enlargeSize = "20px"
+
+        if (root.style.getPropertyValue(varName) == enlargeSize) {
+            root.style.setProperty(varName, baseSize);
+            this.text.innerText = this.node.dataset.text;
+            this.icon.innerText = this.node.dataset.icon;
+        } else {
+            root.style.setProperty(varName, enlargeSize);
+            this.text.innerText = this.node.dataset.altText;
+            this.icon.innerText = this.node.dataset.altIcon;
+        }
+    }
+}
+
+[...enlargeButtons].forEach((enlargeButton) => new EnlageFont(enlargeButton))

src/open_inwoner/js/components/accessibility/index.js

@@ -0,0 +1,4 @@
+import './change_font';
+import './print';
+import './read';
+import './enlarge_font';