From 3f8fa53d8b61d43c912e5e96076de7abb462c806 Mon Sep 17 00:00:00 2001 From: Heleen Date: Mon, 11 Nov 2024 13:48:14 +0100 Subject: [PATCH 1/8] Adds toggle element and styling. --- .../assets/css/components/toggle-button.scss | 70 ++++++++++++ rocky/assets/css/components/toggle.scss | 100 ++++++++---------- rocky/assets/css/main.scss | 1 + .../templates/partials/report_ooi_list.html | 23 ++++ 4 files changed, 141 insertions(+), 53 deletions(-) create mode 100644 rocky/assets/css/components/toggle-button.scss diff --git a/rocky/assets/css/components/toggle-button.scss b/rocky/assets/css/components/toggle-button.scss new file mode 100644 index 00000000000..d2a1dc59717 --- /dev/null +++ b/rocky/assets/css/components/toggle-button.scss @@ -0,0 +1,70 @@ +button, +a, +input[type="button"], +input[type="submit"], +input[type="reset"] { + $breakpoint: 24rem !default; + + &.toggle-button { + /* Alignment */ + display: flex; + align-items: center; + justify-content: center; + align-self: flex-start; + gap: 0; + margin: 0; + box-sizing: border-box; + + /* Styling */ + border-radius: var(--border-radius-l); + padding: var(--spacing-grid-150); + width: 2.75rem; + height: 2.75rem; + border: 1px solid var(--colors-purrple-300); + + /* Text and icon styling */ + background-color: var(--colors-white); + color: var(--colors-purrple-500); + text-decoration: none; + font-size: 0; + + &::before { + color: var(--colors-purrple-500); + padding: 0; + } + + /* Behaviour */ + cursor: pointer; + overflow-wrap: break-word; + + /* States */ + &[aria-current="page"] { + background-color: var(--colors-purrple-200); + border-color: var(--colors-purrple-200); + + &::before { + color: var(--colors-purrple-700); + } + } + + &:hover, + &:active { + border-color: var(--colors-purrple-500); + } + + &:focus { + outline: 2px solid var(--colors-purrple-500); + outline-offset: 0.125rem; + z-index: 2; + position: relative; + } + } +} + +a { + &.toggle-button { + &:visited { + color: var(--colors-purrple-500); + } + } +} diff --git a/rocky/assets/css/components/toggle.scss b/rocky/assets/css/components/toggle.scss index d2a1dc59717..e63bac0dc6d 100644 --- a/rocky/assets/css/components/toggle.scss +++ b/rocky/assets/css/components/toggle.scss @@ -1,70 +1,64 @@ -button, -a, -input[type="button"], -input[type="submit"], -input[type="reset"] { - $breakpoint: 24rem !default; +/* Toggle */ - &.toggle-button { - /* Alignment */ - display: flex; - align-items: center; - justify-content: center; - align-self: flex-start; - gap: 0; - margin: 0; - box-sizing: border-box; - - /* Styling */ - border-radius: var(--border-radius-l); - padding: var(--spacing-grid-150); - width: 2.75rem; - height: 2.75rem; - border: 1px solid var(--colors-purrple-300); +.toggle-switch { + display: flex; + flex-direction: row; + padding: var(--spacing-grid-050); + box-sizing: border-box; + width: auto; + border-radius: var(--border-radius-s); + margin-top: 0; + line-height: 1.5rem; + border: 1px solid var(--colors-purrple-300); + gap: var(--spacing-grid-100); + max-width: 100%; + overflow: auto; - /* Text and icon styling */ - background-color: var(--colors-white); - color: var(--colors-purrple-500); - text-decoration: none; - font-size: 0; + li { + padding: var(--spacing-grid-050) var(--spacing-grid-100); + border-radius: var(--border-radius-s); + background-color: transparent; + cursor: pointer; + list-style: none; + box-sizing: border-box; + position: relative; + white-space: nowrap; - &::before { - color: var(--colors-purrple-500); - padding: 0; + a { + color: var(--colors-grey-900); + text-decoration: none; } - /* Behaviour */ - cursor: pointer; - overflow-wrap: break-word; - - /* States */ - &[aria-current="page"] { + &[aria-current="true"] { background-color: var(--colors-purrple-200); - border-color: var(--colors-purrple-200); - &::before { - color: var(--colors-purrple-700); + a { + font-weight: bold; + } + + &:hover { + background-color: var(--colors-purrple-300); } } - &:hover, - &:active { - border-color: var(--colors-purrple-500); + &:hover { + background-color: var(--colors-purrple-50); } - &:focus { - outline: 2px solid var(--colors-purrple-500); - outline-offset: 0.125rem; - z-index: 2; - position: relative; + &::after { + content: ""; + border-right: 1px solid var(--colors-purrple-300); + margin-left: var(--spacing-grid-100); + display: block; + position: absolute; + height: 60%; + top: 20%; + right: calc((1px + var(--spacing-grid-050)) * -1); + width: 1px; } - } -} -a { - &.toggle-button { - &:visited { - color: var(--colors-purrple-500); + &:last-child::after { + content: none; } } } diff --git a/rocky/assets/css/main.scss b/rocky/assets/css/main.scss index 4fb860423c0..fd56ce328a6 100644 --- a/rocky/assets/css/main.scss +++ b/rocky/assets/css/main.scss @@ -69,6 +69,7 @@ @import "components/state-tags"; @import "components/table"; @import "components/toggle"; +@import "components/toggle-button"; @import "components/toolbar"; @import "components/tree-tables"; @import "components/user-icon"; diff --git a/rocky/reports/templates/partials/report_ooi_list.html b/rocky/reports/templates/partials/report_ooi_list.html index 0fa37cdb8de..ce12aafaf36 100644 --- a/rocky/reports/templates/partials/report_ooi_list.html +++ b/rocky/reports/templates/partials/report_ooi_list.html @@ -10,6 +10,29 @@

Select objects ({{ total_oois }}) {% endblocktranslate %}

+

{% blocktranslate %} Select which objects you want to include in your report. You can either continue From 5f48582261cbb6ac84facfa40ae6b077345aa551 Mon Sep 17 00:00:00 2001 From: Heleen Date: Mon, 11 Nov 2024 13:49:39 +0100 Subject: [PATCH 2/8] Removes test html --- .../templates/partials/report_ooi_list.html | 15 --------------- 1 file changed, 15 deletions(-) diff --git a/rocky/reports/templates/partials/report_ooi_list.html b/rocky/reports/templates/partials/report_ooi_list.html index ce12aafaf36..4e3db858538 100644 --- a/rocky/reports/templates/partials/report_ooi_list.html +++ b/rocky/reports/templates/partials/report_ooi_list.html @@ -17,21 +17,6 @@

  • Manueel
    • -
  • - Option -
    • -
  • - Option -
    • -
  • - Option -
    • -
  • - Option -
    • -
  • - Option -

    • {% blocktranslate %} From 892d106915bc285765086433a65f3abf6afb289d Mon Sep 17 00:00:00 2001 From: Heleen Date: Tue, 12 Nov 2024 10:41:51 +0100 Subject: [PATCH 3/8] Added translations --- rocky/reports/templates/partials/report_ooi_list.html | 4 ++-- rocky/rocky/locale/django.pot | 10 +++++++++- 2 files changed, 11 insertions(+), 3 deletions(-) diff --git a/rocky/reports/templates/partials/report_ooi_list.html b/rocky/reports/templates/partials/report_ooi_list.html index 4e3db858538..0d284f1bcda 100644 --- a/rocky/reports/templates/partials/report_ooi_list.html +++ b/rocky/reports/templates/partials/report_ooi_list.html @@ -12,10 +12,10 @@

    diff --git a/rocky/rocky/locale/django.pot b/rocky/rocky/locale/django.pot index 77c44de6112..f9c2f18b3ec 100644 --- a/rocky/rocky/locale/django.pot +++ b/rocky/rocky/locale/django.pot @@ -9,7 +9,7 @@ msgid "" msgstr "" "Project-Id-Version: PACKAGE VERSION\n" "Report-Msgid-Bugs-To: \n" -"POT-Creation-Date: 2024-11-07 11:24+0000\n" +"POT-Creation-Date: 2024-11-12 09:40+0000\n" "PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n" "Last-Translator: FULL NAME \n" "Language-Team: LANGUAGE \n" @@ -3861,6 +3861,14 @@ msgid_plural "Select objects (%(total_oois)s)" msgstr[0] "" msgstr[1] "" +#: reports/templates/partials/report_ooi_list.html +msgid "Live set" +msgstr "" + +#: reports/templates/partials/report_ooi_list.html +msgid "Manual" +msgstr "" + #: reports/templates/partials/report_ooi_list.html msgid "" "\n" From 4d7ff38886e8e2ee9a532d283ada6b9187f68572 Mon Sep 17 00:00:00 2001 From: TwistMeister Date: Thu, 28 Nov 2024 12:10:40 +0100 Subject: [PATCH 4/8] Implement toggle switch JS on report OOI selection --- rocky/assets/js/toggleSwitch.js | 42 ++++ .../templates/partials/report_ooi_list.html | 209 +++++++++--------- rocky/reports/templates/reports.html | 1 + 3 files changed, 151 insertions(+), 101 deletions(-) create mode 100644 rocky/assets/js/toggleSwitch.js diff --git a/rocky/assets/js/toggleSwitch.js b/rocky/assets/js/toggleSwitch.js new file mode 100644 index 00000000000..c1ae45e8f04 --- /dev/null +++ b/rocky/assets/js/toggleSwitch.js @@ -0,0 +1,42 @@ +import { onDomReady } from "../js/imports/utils.js"; + +onDomReady(initToggle); + +function initToggle() { + document.querySelector(".manual-selection-form").classList.add("hidden"); + let switch_button_list = document.getElementsByClassName( + "toggle-switch-button", + ); + + for (let i = 0; i < switch_button_list.length; i++) { + console.log(switch_button_list[i]); + switch_button_list[i].addEventListener("click", (event) => { + toggle(); + }); + } +} +function toggle() { + let manual_form = document.querySelector(".manual-selection-form"); + let live_set_form = document.querySelector(".live-set-form"); + + if (manual_form.classList.contains("hidden")) { + document + .querySelector(".manual-selection-button") + .parentElement.setAttribute("aria-current", "true"); + document + .querySelector(".live-set-button") + .parentElement.setAttribute("aria-current", "false"); + } + + if (live_set_form.classList.contains("hidden")) { + document + .querySelector(".live-set-button") + .parentElement.setAttribute("aria-current", "true"); + document + .querySelector(".manual-selection-button") + .parentElement.setAttribute("aria-current", "false"); + } + + manual_form.classList.toggle("hidden"); + live_set_form.classList.toggle("hidden"); +} diff --git a/rocky/reports/templates/partials/report_ooi_list.html b/rocky/reports/templates/partials/report_ooi_list.html index 0d284f1bcda..beb0d584a03 100644 --- a/rocky/reports/templates/partials/report_ooi_list.html +++ b/rocky/reports/templates/partials/report_ooi_list.html @@ -12,10 +12,10 @@

    @@ -37,115 +37,119 @@

    {% include "partials/ooi_list_filters.html" %} -
    - {% csrf_token %} - {% include "forms/report_form_fields.html" %} +
    + + {% csrf_token %} + {% include "forms/report_form_fields.html" %} - - - - {% if not ooi_list %} -

    {% translate "No objects found." %}

    -
    - {% translate "Create object" %} - {% translate "Go to the object page" %} -
    - {% else %} - {% if all_oois_selected %} -
    -

    {{ total_oois }} {% translate "objects selected" %}

    - {% translate "Deselect all objects" %} -

    - {% blocktranslate with length=ooi_list|length total=total_oois %}Showing {{ length }} of {{ total }} objects{% endblocktranslate %} -

    + + + +
    +
    + {% if not ooi_list %} +

    {% translate "No objects found." %}

    +
    + {% translate "Create object" %} + {% translate "Go to the object page" %}
    {% else %} -
    - -
    -

    + {% if all_oois_selected %} +

    +

    {{ total_oois }} {% translate "objects selected" %}

    + {% translate "Deselect all objects" %} +

    {% blocktranslate with length=ooi_list|length total=total_oois %}Showing {{ length }} of {{ total }} objects{% endblocktranslate %}

    -
    - {% endif %} -
    - {% csrf_token %} - {% if all_oois_selected %} - {% include "forms/report_form_fields.html" %} - {% else %} - {% include "forms/report_form_fields.html" with disable_ooi_selection_fields=True %} - +
    + +
    +

    + {% blocktranslate with length=ooi_list|length total=total_oois %}Showing {{ length }} of {{ total }} objects{% endblocktranslate %} +

    +
    +
    {% endif %} -
    - - - - - - - - - - - {% for object in ooi_list %} - - - - - - - - {% endfor %} - -
    - - {% translate "Object" %}{% translate "Type" %}{% translate "Clearance level" %}{% translate "Clearance type" %}
    - - {{ object.human_readable }}{{ object.ooi_type }} - {% include "partials/scan_level_indicator.html" with value=object.scan_profile.level.value %} + + {% csrf_token %} + {% if all_oois_selected %} + {% include "forms/report_form_fields.html" %} - {{ object.scan_profile.scan_profile_type|title }}
    - -
    -
    - {% include "partials/list_paginator.html" %} + {% else %} + {% include "forms/report_form_fields.html" with disable_ooi_selection_fields=True %} + + {% endif %} +
    + + + + + + + + + + + {% for object in ooi_list %} + + + + + + + + {% endfor %} + +
    + + {% translate "Object" %}{% translate "Type" %}{% translate "Clearance level" %}{% translate "Clearance type" %}
    + + {{ object.human_readable }}{{ object.ooi_type }} + {% include "partials/scan_level_indicator.html" with value=object.scan_profile.level.value %} - {% endif %} + {{ object.scan_profile.scan_profile_type|title }}
    + +
    + + {% include "partials/list_paginator.html" %} + + {% endif %} +
    @@ -153,3 +157,6 @@

    {% if not all_oois_selected %}{% endif %} +{% block html_at_end_body %} + +{% endblock html_at_end_body %} diff --git a/rocky/reports/templates/reports.html b/rocky/reports/templates/reports.html index 4a783c5271e..e341ca2d5af 100644 --- a/rocky/reports/templates/reports.html +++ b/rocky/reports/templates/reports.html @@ -20,4 +20,5 @@ {% block html_at_end_body %} {{ block.super }} + {% comment %} {% endcomment %} {% endblock html_at_end_body %} From 612637eba2e065057651925c78a4bb5e3a8b20b6 Mon Sep 17 00:00:00 2001 From: TwistMeister Date: Thu, 28 Nov 2024 13:10:35 +0100 Subject: [PATCH 5/8] Update toggleSwitch.js --- rocky/assets/js/toggleSwitch.js | 1 - 1 file changed, 1 deletion(-) diff --git a/rocky/assets/js/toggleSwitch.js b/rocky/assets/js/toggleSwitch.js index c1ae45e8f04..79b4305dd7d 100644 --- a/rocky/assets/js/toggleSwitch.js +++ b/rocky/assets/js/toggleSwitch.js @@ -9,7 +9,6 @@ function initToggle() { ); for (let i = 0; i < switch_button_list.length; i++) { - console.log(switch_button_list[i]); switch_button_list[i].addEventListener("click", (event) => { toggle(); }); From b63730d3b32dfb946a17819c34c03b28defeb2e6 Mon Sep 17 00:00:00 2001 From: TwistMeister Date: Thu, 5 Dec 2024 10:12:37 +0100 Subject: [PATCH 6/8] Improved toggle script and made generic --- rocky/assets/js/toggleSwitch.js | 74 +++++++++++-------- .../templates/partials/report_ooi_list.html | 14 ++-- 2 files changed, 51 insertions(+), 37 deletions(-) diff --git a/rocky/assets/js/toggleSwitch.js b/rocky/assets/js/toggleSwitch.js index 79b4305dd7d..9d4debc7e21 100644 --- a/rocky/assets/js/toggleSwitch.js +++ b/rocky/assets/js/toggleSwitch.js @@ -1,41 +1,51 @@ import { onDomReady } from "../js/imports/utils.js"; -onDomReady(initToggle); - -function initToggle() { - document.querySelector(".manual-selection-form").classList.add("hidden"); - let switch_button_list = document.getElementsByClassName( - "toggle-switch-button", - ); - - for (let i = 0; i < switch_button_list.length; i++) { - switch_button_list[i].addEventListener("click", (event) => { - toggle(); - }); - } -} -function toggle() { - let manual_form = document.querySelector(".manual-selection-form"); - let live_set_form = document.querySelector(".live-set-form"); +onDomReady(initToggleSwitches); - if (manual_form.classList.contains("hidden")) { - document - .querySelector(".manual-selection-button") - .parentElement.setAttribute("aria-current", "true"); +function initToggleSwitches() { + // Switches get stitches ;-) + let toggle_switches = document.querySelectorAll(".toggle-switch"); + + for (let i = 0; i < toggle_switches.length; i++) { + let options = toggle_switches[i].querySelectorAll(".toggle-switch-button"); + + for (let j = 0; j < options.length; j++) { + let option = options[j]; + + // Hide all elements linked to toggle switch options. + document + .getElementById(option.getAttribute("data-target-id")) + .classList.add("hidden"); + + // Add click listener to switch options. + option.addEventListener("click", (event) => { + toggle(event.target, options); + }); + } + + // Initially show first option contents from toggle-switch. document - .querySelector(".live-set-button") - .parentElement.setAttribute("aria-current", "false"); + .getElementById(options[0].getAttribute("data-target-id")) + .classList.remove("hidden"); } +} - if (live_set_form.classList.contains("hidden")) { - document - .querySelector(".live-set-button") - .parentElement.setAttribute("aria-current", "true"); +function toggle(target, options) { + let target_li = target.closest("li"); + + // Check if target isn't already the active one. + if (!target_li.hasAttribute("aria-current", "true")) { + for (let i = 0; i < options.length; i++) { + // Toggle all options to "non active" state. + options[i].closest("li").removeAttribute("aria-current", "false"); + document + .getElementById(options[i].getAttribute("data-target-id")) + .classList.add("hidden"); + } + // Toggle selected option (target) to active state. + target_li.setAttribute("aria-current", "true"); document - .querySelector(".manual-selection-button") - .parentElement.setAttribute("aria-current", "false"); + .getElementById(target.getAttribute("data-target-id")) + .classList.remove("hidden"); } - - manual_form.classList.toggle("hidden"); - live_set_form.classList.toggle("hidden"); } diff --git a/rocky/reports/templates/partials/report_ooi_list.html b/rocky/reports/templates/partials/report_ooi_list.html index beb0d584a03..e6ea381910c 100644 --- a/rocky/reports/templates/partials/report_ooi_list.html +++ b/rocky/reports/templates/partials/report_ooi_list.html @@ -12,10 +12,12 @@

    @@ -37,7 +39,7 @@

    {% include "partials/ooi_list_filters.html" %} -
    +
    -
    +
    {% if not ooi_list %}

    {% translate "No objects found." %}

    @@ -158,5 +160,7 @@

    {% if not all_oois_selected %}{% endif %} {% block html_at_end_body %} - + {% compress js %} + + {% endcompress %} {% endblock html_at_end_body %} From dc1ce0bbae59624cd8f5be08d8bda0edfe15c834 Mon Sep 17 00:00:00 2001 From: TwistMeister Date: Thu, 5 Dec 2024 11:33:42 +0100 Subject: [PATCH 7/8] Update report_ooi_list.html --- rocky/reports/templates/partials/report_ooi_list.html | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/rocky/reports/templates/partials/report_ooi_list.html b/rocky/reports/templates/partials/report_ooi_list.html index e6ea381910c..d72fcc4d0df 100644 --- a/rocky/reports/templates/partials/report_ooi_list.html +++ b/rocky/reports/templates/partials/report_ooi_list.html @@ -12,12 +12,14 @@

    @@ -160,7 +162,5 @@

    {% if not all_oois_selected %}{% endif %} {% block html_at_end_body %} - {% compress js %} - - {% endcompress %} + {% endblock html_at_end_body %} From 130032a9793d49bf570f7c299bc6118d38fbdb41 Mon Sep 17 00:00:00 2001 From: TwistMeister Date: Thu, 12 Dec 2024 16:22:13 +0100 Subject: [PATCH 8/8] Made init of buttons and content blocks a separate function. Also fixed the hard coded option[0] --- rocky/assets/js/toggleSwitch.js | 38 ++++++++++++++++++++------------- 1 file changed, 23 insertions(+), 15 deletions(-) diff --git a/rocky/assets/js/toggleSwitch.js b/rocky/assets/js/toggleSwitch.js index 9d4debc7e21..cdc18da109f 100644 --- a/rocky/assets/js/toggleSwitch.js +++ b/rocky/assets/js/toggleSwitch.js @@ -4,29 +4,37 @@ onDomReady(initToggleSwitches); function initToggleSwitches() { // Switches get stitches ;-) + // Grab all toggle switches let toggle_switches = document.querySelectorAll(".toggle-switch"); for (let i = 0; i < toggle_switches.length; i++) { - let options = toggle_switches[i].querySelectorAll(".toggle-switch-button"); - - for (let j = 0; j < options.length; j++) { - let option = options[j]; + initButtonsAndContentBlocks(toggle_switches[i]); + } +} - // Hide all elements linked to toggle switch options. - document - .getElementById(option.getAttribute("data-target-id")) - .classList.add("hidden"); +function initButtonsAndContentBlocks(toggle_switch) { + // Get all the toggle switch options + let options = toggle_switch.querySelectorAll(".toggle-switch-button"); - // Add click listener to switch options. - option.addEventListener("click", (event) => { - toggle(event.target, options); - }); - } + for (let i = 0; i < options.length; i++) { + let option = options[i]; - // Initially show first option contents from toggle-switch. + // Hide all elements linked to toggle switch options. document - .getElementById(options[0].getAttribute("data-target-id")) + .getElementById(option.getAttribute("data-target-id")) + .classList.add("hidden"); + + // Add click listener to switch options. + option.addEventListener("click", (event) => { + toggle(event.target, options); + }); + + // Show option that on init has "aria-current". + if (option.parentElement.hasAttribute("aria-current", "true")) { + document + .getElementById(option.getAttribute("data-target-id")) .classList.remove("hidden"); + } } }