From 517bf9cca0babce938a7ed5b70e27f43fa737d0a Mon Sep 17 00:00:00 2001
From: Mattia Mancini <mancini@astron.nl>
Date: Thu, 8 Nov 2018 11:49:34 +0000
Subject: [PATCH] OSB-31: animated dropdown icon
---
.../src/components/StationTestView.css | 12 +++++++++++-
.../src/components/StationTestView.js | 6 +++---
.../src/components/StationTestView.scss | 13 ++++++++++++-
3 files changed, 26 insertions(+), 5 deletions(-)
diff --git a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/StationTestView.css b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/StationTestView.css
index 8056be00338..7d242e5767b 100644
--- a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/StationTestView.css
+++ b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/StationTestView.css
@@ -38,8 +38,18 @@ tr:hover {
display: inline;
float: right; }
+@keyframes animation-open {
+ from {
+ transform: rotate(0deg); }
+ to {
+ transform: rotate(180deg); } }
+
.line-header-dropdownbutton-up {
- transform: rotate(180deg); }
+ transform: rotate(180deg);
+ animation: animation-open;
+ animation-duration: 100ms;
+ animation-iteration-count: 1;
+ animation-timing-function: linear; }
.line-header-text {
display: inline;
diff --git a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/StationTestView.js b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/StationTestView.js
index d3f81e0a7e9..9fb4684f71b 100644
--- a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/StationTestView.js
+++ b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/StationTestView.js
@@ -294,14 +294,14 @@ class RTSMSummaryLine extends Component {
all_rtsm = this.props.data.map((item, key) => this.renderTestLine(key, item, component_id_list))
}
- const dropdownStyle = { }
- if(this.state.displaySingleTests) dropdownStyle.transform = "rotate(180deg)"
+ let dropdownAdditionStyles = ""
+ if(this.state.displaySingleTests) dropdownAdditionStyles += "line-header-dropdownbutton-up"
jsx = (
<React.Fragment>
<tr>
<td className="line-header" onClick={this.toggleDisplaySingleTests}>
<div className="line-header-text">RT {this.renderDateRange(this.props.data)}</div>
- <DropDownIcon className="line-header-dropdownbutton" style={dropdownStyle} color="black" />
+ <DropDownIcon className={"line-header-dropdownbutton " + dropdownAdditionStyles} color="black" />
</td>
{summaryLine}</tr>
{all_rtsm}
diff --git a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/StationTestView.scss b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/StationTestView.scss
index 61b264d02e9..ff977bbb0aa 100644
--- a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/StationTestView.scss
+++ b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/StationTestView.scss
@@ -46,8 +46,19 @@ tr:hover {
float: right;
}
+@keyframes animation-open {
+ from {
+ transform: rotate(0deg);
+ } to {
+ transform: rotate(180deg);
+ }
+}
.line-header-dropdownbutton-up {
- transform: rotate(180deg)
+ transform: rotate(180deg);
+ animation: animation-open;
+ animation-duration: 100ms;
+ animation-iteration-count: 1;
+ animation-timing-function: linear;
}
.line-header-text {
--
GitLab