Fold animation sections

css/panels.css

@@ -394,13 +394,16 @@
 	.panel#animations #animations_list {
 		min-height: 126px;
 		max-height: 294px;
+		padding-bottom: 12px;
 	}
 	.animation {
-		height: 42px;
+		height: 38px;
+		display: flex;
 		white-space: nowrap;
 		position: relative;
 		vertical-align: middle;
 		padding: 8px;
+		padding-left: 16px;
 		box-sizing: border-box;
 	}
 	.animation:hover {
@@ -410,14 +413,15 @@
 		background: var(--color-selected);
 	}
 	.animation > i {
-		margin-top: 2px;
 		margin-right: 4px;
 	}
 	.animation > * {
-		float: left;
+		flex-grow: 0;
+		flex-shrink: 0;
 	}
 	.animation > .animation_name {
-		width: calc(100% - 50px);
+		flex-grow: 1;
+		flex-shrink: 1;
 		user-select: none;
 	}
 	.animation .animation_play_toggle {
@@ -427,6 +431,32 @@
 	.animation .animation_play_toggle:hover {
 		color: var(--color-light);
 	}
+	.animation .animation_save_button {
+		width: 22px;
+		color: var(--color-text);
+	}
+	.animation .animation_save_button:hover {
+		color: var(--color-light);
+	}
+	.animation .animation_save_button:not(.clickable) {
+		opacity: 0.5;
+		color: var(--color-text) !important;
+	}
+
+	.animation_file_head {
+		height: 28px;
+		padding: 2px;
+		display: flex;
+	}
+	.animation_file_head:hover {
+		color: var(--color-light);
+	}
+	.animation_file_head > .icon-open-state {
+		text-align: center;
+		width: 21px;
+		margin-top: 4px;
+	}
+
 	.panel#keyframe .tabs_small label {
 		font-size: 1em;
 		height: 30px;

js/animations/animation.js

@@ -10,8 +10,8 @@ class Animation {
 		this.length = 0;
 		this.animators = {};
 		this.markers = [];
-		for (var key in Locator.properties) {
-			Locator.properties[key].reset(this);
+		for (var key in Animation.properties) {
+			Animation.properties[key].reset(this);
 		}
 		if (typeof data === 'object') {
 			this.extend(data)
@@ -413,7 +413,7 @@ class Animation {
 		'rename',
 		'delete',
 	])
-	new Property(Animation, 'boolean', 'saved')
+	new Property(Animation, 'boolean', 'saved', {default: true})
 	new Property(Animation, 'string', 'path')
 
 

js/interface/panels.js

@@ -304,12 +304,13 @@ function setupPanels() {
 		component: {
 			name: 'panel-animations',
 			data() { return {
-				animations: Animator.animations
+				animations: Animator.animations,
+				files_folded: {}
 			}},
 			methods: {
-				sort(event) {
-					let item = Animator.animations.splice(event.oldIndex, 1)[0];
-					Animator.animations.splice(event.newIndex, 0, item);
+				toggle(key) {
+					this.files_folded[key] = !this.files_folded[key];
+					this.$forceUpdate();
 				}
 			},
 			computed: {
@@ -329,10 +330,13 @@ function setupPanels() {
 			template: `
 				<div>
 					<div class="toolbar_wrapper animations"></div>
-					<ul id="animations_list" class="list" v-sortable="{onUpdate: sort, fallbackTolerance: 10, animation: 0, handle: ':not(.animation_play_toggle)'}">
-						<li v-for="(file, key) in files" :key="key">
-							<div>{{ file.name }}</div>
-							<ul>	
+					<ul id="animations_list" class="list">
+						<li v-for="(file, key) in files" :key="key" class="animation_file">
+							<div class="animation_file_head" v-on:dblclick.stop="toggle(key)">
+								<i v-on:click.stop="toggle(key)" class="icon-open-state fa" :class=\'{"fa-angle-right": files_folded[key], "fa-angle-down": !files_folded[key]}\'></i>
+								{{ file.name }}
+							</div>
+							<ul v-if="!files_folded[key]">	
 								<li
 									v-for="animation in file.animations"
 									v-bind:class="{ selected: animation.selected }"
@@ -345,6 +349,10 @@ function setupPanels() {
 								>
 									<i class="material-icons">movie</i>
 									<input class="animation_name" v-model="animation.name" disabled="true">
+									<div class="animation_save_button" v-bind:class="{clickable: !animation.saved}" v-on:click.stop="animation.save()">
+										<i v-if="animation.saved" class="material-icons">check_circle</i>
+										<i v-else class="material-icons">save</i>
+									</div>
 									<div class="animation_play_toggle" v-on:click.stop="animation.togglePlayingState()">
 										<i v-if="animation.playing" class="fa_big far fa-play-circle"></i>
 										<i v-else class="fa_big far fa-circle"></i>