style changes

UniStuttgart-VISUS · Nov 10, 2023 · fdf5309 · fdf5309
1 parent 7699e1a
commit fdf5309
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 5 deletions.
diff --git a/src/components/ComponentPicker.vue b/src/components/ComponentPicker.vue
@@ -18,7 +18,7 @@
                 <div :class="['d-flex', horizontal ? 'flex-row' : 'flex-column']">
                     <ComponentPreview v-for="c in cat" :key="c.key"
                         v-ripple
-                        class="ma-1 clickable"
+                        class="ma-1 clickable-wobble"
                         :data="c.values"
                         :title="c.title"
                         :width="100"

diff --git a/src/components/LineChart.vue b/src/components/LineChart.vue
@@ -19,6 +19,7 @@
     import * as d3 from 'd3';
     import { ref, watch, onMounted } from 'vue';
     import { useApp } from '@/store/app'
+import { DateTime } from 'luxon';
 
     const props = defineProps({
         data: {
@@ -121,7 +122,7 @@
 
         const xAxis = svg.append("g")
             .attr("transform", `translate(0,${props.height-25})`)
-            .call(d3.axisBottom(xScale).tickFormat(d3.timeFormat("%b")))
+            .call(d3.axisBottom(xScale).tickFormat(d3.timeFormat("%0d %b")))
 
         const yAxis = svg.append("g")
             .attr("transform", "translate(35,0)")
@@ -137,7 +138,7 @@
 
             highlight(xz, yz);
 
-            xAxis.call(d3.axisBottom(xz).tickFormat(d3.timeFormat("%b")))
+            xAxis.call(d3.axisBottom(xz).tickFormat(d3.timeFormat("%0d %b")))
             yAxis.call(d3.axisLeft(yz))
 
             app.setLineChartZoom(transform);

diff --git a/src/components/TimeSeriesTitle.vue b/src/components/TimeSeriesTitle.vue
@@ -15,6 +15,7 @@
         <div class="d-flex align-center justify-space-between">
 
         <v-icon :icon="app.selectedTs === timeseries.id ? 'mdi-circle-slice-8' : 'mdi-circle-outline'"
+            :class="app.selectedTs !== timeseries.id ? 'clickable-blink' : 'not-clickable'"
             @click="app.selectTimeSeries(timeseries.id)"
             :color="tsColor"/>
 

diff --git a/src/styles/settings.scss b/src/styles/settings.scss
@@ -9,14 +9,37 @@
 //   $color-pack: false
 // );
 
-.clickable {
+.clickable,
+.clickable-wobble,
+.clickable-blink {
     cursor: pointer;
 }
 
-.clickable:hover {
+.clickable-blink:hover {
+    animation: blink 800ms ease-in-out infinite;
+}
+
+.clickable-wobble:hover {
     animation: wobble 400ms ease-in-out infinite;
 }
 
+.not-clickable {
+    cursor: default;
+}
+
+@keyframes blink {
+    0% {
+        opacity: 1;
+    }
+    50% {
+        opacity: 0.5;
+        filter: hue-rotate(90deg);
+    }
+    100% {
+        opacity: 1;
+    }
+}
+
 @keyframes wobble {
     0% {
         transform: rotate(0deg);