From eb2a394eef8e392c06ab022269bbf1feb8fd3a47 Mon Sep 17 00:00:00 2001
From: Robert Goldmann <deadlocker@gmx.de>
Date: Sun, 18 Jul 2021 13:08:53 +0200
Subject: [PATCH] #585 - highlight selected buttons on click
---
src/main/resources/static/css/charts.css | 17 +++++++--------
src/main/resources/static/js/charts.js | 21 +++++++++++++++++++
.../resources/templates/charts/charts.ftl | 10 ++++-----
3 files changed, 34 insertions(+), 14 deletions(-)
diff --git a/src/main/resources/static/css/charts.css b/src/main/resources/static/css/charts.css
index 84439feb8..4292263f3 100644
--- a/src/main/resources/static/css/charts.css
+++ b/src/main/resources/static/css/charts.css
@@ -36,15 +36,6 @@
font-size: 1.2rem;
}
-.chart-button i {
- font-size: 2.2rem;
-}
-
-.chart-button-name {
- margin-left: 1rem;
- font-weight: bold;
-}
-
.chart-preview:hover {
cursor: pointer;
}
@@ -56,6 +47,14 @@
padding: 1rem;
}
+.button-display-type.active {
+ background-color: var(--color-green) !important;
+}
+
+.button-group-type.active {
+ background-color: var(--color-blue-baby) !important;
+}
+
#chart-date-card {
background-color: var(--color-grey-dark-almost-transparent);
}
\ No newline at end of file
diff --git a/src/main/resources/static/js/charts.js b/src/main/resources/static/js/charts.js
index 9623f869f..6290d5794 100644
--- a/src/main/resources/static/js/charts.js
+++ b/src/main/resources/static/js/charts.js
@@ -87,6 +87,16 @@ $(document).ready(function()
{
handleQuickDate(this);
});
+
+ $('.button-display-type').click(function()
+ {
+ toggleChartTypeButtons('button-display-type', this);
+ });
+
+ $('.button-group-type').click(function()
+ {
+ toggleChartTypeButtons('button-group-type', this);
+ });
});
function createDatePickerEnd(minDate, selectedDate)
@@ -226,4 +236,15 @@ function setDateRange(startDate, endDate)
chartPickerEndDate.destroy();
chartPickerEndDate = createDatePickerEnd(chartPickerStartDate.date, endDate.startOf('day').toDate());
+}
+
+function toggleChartTypeButtons(styleClassName, item)
+{
+ let siblings = document.getElementsByClassName(styleClassName);
+ for(let i = 0; i < siblings.length; i++)
+ {
+ siblings[i].classList.toggle('active', false);
+ }
+
+ item.classList.toggle('active', true);
}
\ No newline at end of file
diff --git a/src/main/resources/templates/charts/charts.ftl b/src/main/resources/templates/charts/charts.ftl
index fe9102ea7..1aa0dc78d 100644
--- a/src/main/resources/templates/charts/charts.ftl
+++ b/src/main/resources/templates/charts/charts.ftl
@@ -33,7 +33,7 @@
<div class="row hide-on-small-and-down">
<div class="col s12 center-align">
<#list displayTypes as displayType>
- <@chartTypeButton displayType/>
+ <@chartTypeButton item=displayType buttonClass="button-display-type"/>
</#list>
</div>
</div>
@@ -43,7 +43,7 @@
<div class="row hide-on-small-and-down">
<div class="col s12 center-align">
<#list groupTypes as groupType>
- <@chartTypeButton groupType/>
+ <@chartTypeButton item=groupType buttonClass="button-group-type"/>
</#list>
</div>
</div>
@@ -263,8 +263,8 @@
</@stepCollapsible>
</#macro>
-<#macro chartTypeButton item>
- <a class="waves-effect waves-light btn-large background-grey text-black">
+<#macro chartTypeButton item buttonClass>
+ <a class="waves-effect waves-light btn-large background-grey text-black ${buttonClass}" data-value="${item.name()}">
<#if item.hasFontAwesomeIcon()>
<i class="${item.getIcon()} left"></i> ${locale.getString(item.getLocalizationKey())}
<#else>
@@ -274,7 +274,7 @@
</#macro>
<#macro chartPreview chart>
- <div class="col s6 m4 l3 center-align">
+ <div class="col s6 m4 l3 center-align chart-preview-column" data-display-type="${chart.getDisplayType()}" data-group-type="${chart.getGroupType()}">
<div class="card chart-preview background-grey-dark">
<div class="card-image">
<img src="<@s.url '/images/charts/' + chart.getPreviewImageFileName()!"placeholder.png"/>">
--
GitLab