Add icon for discontinuous keyframes

css/panels.css

@@ -811,11 +811,11 @@
 		height: 23px;
 	}
 	#timeline .keyframe i {
-		margin-top: 2px;
-		transform: rotate(45deg);
-		font-size: 14pt;
-		margin-left: -3px;
+		margin-top: 3px;
+		font-size: 16px;
+		margin-left: -1px;
 		pointer-events: none;
+		display: block;
 	}
 	#timeline .keyframe i.keyframe_icon_smaller {
 		font-size: 11pt;

css/setup.css

@@ -150,6 +150,12 @@
 	  -moz-osx-font-smoothing: grayscale;
 	}
 
+	.icon-keyframe:before {
+	  content: "\e924";
+	}
+	.icon-keyframe_discontinuous:before {
+	  content: "\e925";
+	}
 	.icon-gizmo:before {
 	  content: "\e922";
 	}
@@ -260,7 +266,7 @@
 	}
 
 
-
+	
 
 	.material-icons {
 		font-family: 'Material Icons';

js/animations/timeline.js

@@ -1008,7 +1008,7 @@ onVueSetup(function() {
 										@contextmenu.prevent="keyframe.showContextMenu($event)"
 									>
 										<i class="material-icons keyframe_icon_smaller" v-if="keyframe.interpolation == 'catmullrom'">lens</i>
-										<i class="material-icons" v-else>stop</i>
+										<i :class="keyframe.data_points.length == 1 ? 'icon-keyframe' : 'icon-keyframe_discontinuous'" v-else></i>
 										<svg class="keyframe_waveform" v-if="keyframe.channel == 'sound' && keyframe.data_points[0].file && waveforms[keyframe.data_points[0].file]" :style="{width: waveforms[keyframe.data_points[0].file].duration * size}">
 											<polygon :points="getWaveformPoints(waveforms[keyframe.data_points[0].file].samples, size)"></polygon>
 										</svg>