djledda/arne-drums
3
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

update

Browse Source
This commit is contained in:
Daniel Ledda
2024-03-31 14:56:26 +02:00
parent ebca41dc8f
commit 3c9065ee8c
25 changed files with 49 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/fonts/DMSans-Bold.ttf Normal file
View File

Binary file not shown.

BIN
src/assets/fonts/DMSans-BoldItalic.ttf Normal file
View File

Binary file not shown.

BIN
src/assets/fonts/DMSans-Italic.ttf Normal file
View File

Binary file not shown.

BIN
src/assets/fonts/DMSans-Medium.ttf Normal file
View File

Binary file not shown.

BIN
src/assets/fonts/DMSans-MediumItalic.ttf Normal file
View File

Binary file not shown.

BIN
src/assets/fonts/DMSans-Regular.ttf Normal file
View File

Binary file not shown.

BIN
src/assets/svgs/LF.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.1 KiB

BIN
src/assets/svgs/LH.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.3 KiB

BIN
src/assets/svgs/RF.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.8 KiB

BIN
src/assets/svgs/RH.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.4 KiB

4
src/assets/svgs/arrow-clockwise.svg Normal file
View File

@@ -0,0 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-clockwise" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2v1z"/>
<path d="M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 352 B

4
src/assets/svgs/download.svg Normal file
View File

@@ -0,0 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-download" viewBox="0 0 16 16">
<path d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z"/>
<path d="M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 427 B

3
src/assets/svgs/eraser-fill.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-eraser-fill" viewBox="0 0 16 16">
<path d="M8.086 2.207a2 2 0 0 1 2.828 0l3.879 3.879a2 2 0 0 1 0 2.828l-5.5 5.5A2 2 0 0 1 7.879 15H5.12a2 2 0 0 1-1.414-.586l-2.5-2.5a2 2 0 0 1 0-2.828l6.879-6.879zm.66 11.34L3.453 8.254 1.914 9.793a1 1 0 0 0 0 1.414l2.5 2.5a1 1 0 0 0 .707.293H7.88a1 1 0 0 0 .707-.293l.16-.16z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 418 B

3
src/assets/svgs/list.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-list" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 344 B

3
src/assets/svgs/snowflake.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-snow2" viewBox="0 0 16 16">
<path d="M8 16a.5.5 0 0 1-.5-.5v-1.293l-.646.647a.5.5 0 0 1-.707-.708L7.5 12.793v-1.086l-.646.647a.5.5 0 0 1-.707-.708L7.5 10.293V8.866l-1.236.713-.495 1.85a.5.5 0 1 1-.966-.26l.237-.882-.94.542-.496 1.85a.5.5 0 1 1-.966-.26l.237-.882-1.12.646a.5.5 0 0 1-.5-.866l1.12-.646-.884-.237a.5.5 0 1 1 .26-.966l1.848.495.94-.542-.882-.237a.5.5 0 1 1 .258-.966l1.85.495L7 8l-1.236-.713-1.849.495a.5.5 0 1 1-.258-.966l.883-.237-.94-.542-1.85.495a.5.5 0 0 1-.258-.966l.883-.237-1.12-.646a.5.5 0 1 1 .5-.866l1.12.646-.237-.883a.5.5 0 0 1 .966-.258l.495 1.849.94.542-.236-.883a.5.5 0 0 1 .966-.258l.495 1.849 1.236.713V5.707L6.147 4.354a.5.5 0 1 1 .707-.708l.646.647V3.207L6.147 1.854a.5.5 0 1 1 .707-.708l.646.647V.5a.5.5 0 0 1 1 0v1.293l.647-.647a.5.5 0 1 1 .707.708L8.5 3.207v1.086l.647-.647a.5.5 0 1 1 .707.708L8.5 5.707v1.427l1.236-.713.495-1.85a.5.5 0 1 1 .966.26l-.236.882.94-.542.495-1.85a.5.5 0 1 1 .966.26l-.236.882 1.12-.646a.5.5 0 0 1 .5.866l-1.12.646.883.237a.5.5 0 1 1-.26.966l-1.848-.495-.94.542.883.237a.5.5 0 1 1-.26.966l-1.848-.495L9 8l1.236.713 1.849-.495a.5.5 0 0 1 .259.966l-.883.237.94.542 1.849-.495a.5.5 0 0 1 .259.966l-.883.237 1.12.646a.5.5 0 0 1-.5.866l-1.12-.646.236.883a.5.5 0 1 1-.966.258l-.495-1.849-.94-.542.236.883a.5.5 0 0 1-.966.258L9.736 9.58 8.5 8.866v1.427l1.354 1.353a.5.5 0 0 1-.707.708l-.647-.647v1.086l1.354 1.353a.5.5 0 0 1-.707.708l-.647-.647V15.5a.5.5 0 0 1-.5.5z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

3
src/assets/svgs/trash.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash3-fill" viewBox="0 0 16 16">
<path d="M11 1.5v1h3.5a.5.5 0 0 1 0 1h-.538l-.853 10.66A2 2 0 0 1 11.115 16h-6.23a2 2 0 0 1-1.994-1.84L2.038 3.5H1.5a.5.5 0 0 1 0-1H5v-1A1.5 1.5 0 0 1 6.5 0h3A1.5 1.5 0 0 1 11 1.5Zm-5 0v1h4v-1a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 0-.5.5ZM4.5 5.029l.5 8.5a.5.5 0 1 0 .998-.06l-.5-8.5a.5.5 0 1 0-.998.06Zm6.53-.528a.5.5 0 0 0-.528.47l-.5 8.5a.5.5 0 0 0 .998.058l.5-8.5a.5.5 0 0 0-.47-.528ZM8 4.5a.5.5 0 0 0-.5.5v8.5a.5.5 0 0 0 1 0V5a.5.5 0 0 0-.5-.5Z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 582 B

34
src/ui/Beat/Beat.vue
View File

@@ -2,8 +2,15 @@
<div class="beat" :class="{ vertical: false }">
<editable-text-field node-type="h3" class="beat-title" v-model="beat!.name.value" />
<div class="beat-main-container">
<div class="beat-track-container">
<draggable handle=".handle" :list="tracks" @change="onMove" item-key="index">
<div class="beat-track-container" :class="{ dragging }">
<draggable @start="dragging = true"
@end="dragging = false"
animation="150"
ghost-class="ghost"
handle=".handle"
:list="tracks"
@change="onMove"
item-key="index">
<template #item="{ element }">
<div class="beat-line">
<editable-text-field class="track-name" v-model="element.track.name.value" />
@@ -23,10 +30,10 @@
import EditableTextField from "@/ui/Widgets/EditableTextField/EditableTextField.vue";
import { useAppStateStore } from '@/AppState';
import { useBeatStore } from '@/BeatStore';
import { computed } from "vue";
import { computed, ref } from "vue";
import Draggable from "vuedraggable";
import type { Track } from "@/Track";
import Icon from "../Widgets/Icon/Icon.vue";
import Icon from "@/ui/Widgets/Icon/Icon.vue";
const props = defineProps<{
beatIndex: number,
@@ -47,14 +54,16 @@
track: trackList[i]!,
});
}
if (props.orientation === 'horizontal') {
if (props.orientation !== 'horizontal') {
list.reverse();
}
return list;
});
const dragging = ref(false);
function onMove(evt: { moved: { oldIndex: number, newIndex: number }}) {
if (props.orientation === 'horizontal') {
if (props.orientation !== 'horizontal') {
beat.value?.insertAt(tracks.value.length - 1 - evt.moved.oldIndex, tracks.value.length - 1 - evt.moved.newIndex);
} else {
beat.value?.insertAt(evt.moved.oldIndex, evt.moved.newIndex);
@@ -154,10 +163,23 @@
flex-direction: row;
justify-content: flex-end;
align-items: center;
}
.dragging {
:not(.ghost) {
.handle {
opacity: 0%;
}
}
}
.track-name {
text-align: right;
}
.ghost {
opacity: 0;
}
</style>

3
src/ui/Root/Root.vue
View File

@@ -161,6 +161,7 @@
height: 100vh;
display: flex;
transition: left 400ms;
top: 0;
}
&.sidebar-visible {
@@ -200,7 +201,6 @@
display: flex;
flex-direction: column;
.buttons {
flex: 1;
@@ -228,6 +228,7 @@
position: absolute;
height: 100%;
left: 0;
top: 0;
width: 100vw;
display: flex;
flex-direction: column;

2
src/ui/TrackSettings/TrackSettings.vue
View File

@@ -32,8 +32,6 @@
const { beats } = useBeatStore();
const beat = computed(() => beats.value[props.beatIndex] ?? null);
const track = computed(() => beat.value?.tracks.value[props.trackIndex] ?? null);
watch(track, () => console.log(track.value));
</script>
<style scoped lang="scss">

2
src/ui/Widgets/Icon/Icon.vue
View File

@@ -15,7 +15,7 @@
const cssText = computed(() => {
const colorString = props.color ? `--icon-bg:${ props.color }` : "";
return `-webkit-mask-image: url(${ iconUrl.value }); mask-image: url(${ iconUrl.value });${ colorString ?? '' }`;
return `-webkit-mask-image: url("${ iconUrl.value }"); mask-image: url("${ iconUrl.value }");${ colorString ?? '' }`;
});
</script>

20
src/ui/Widgets/Icon/icons.ts
View File

@@ -1,13 +1,13 @@
import List from "assets/svgs/list.svg";
import ArrowClockwise from "assets/svgs/arrow-clockwise.svg";
import Trash from "assets/svgs/trash.svg";
import Snowflake from "assets/svgs/snowflake.svg";
import LeftHand from "assets/svgs/LH.png";
import Download from "assets/svgs/download.svg";
import RightHand from "assets/svgs/RH.png";
import LeftFoot from "assets/svgs/LF.png";
import RightFoot from "assets/svgs/RF.png";
import Eraser from "assets/svgs/eraser-fill.svg";
import List from "@/assets/svgs/list.svg";
import ArrowClockwise from "@/assets/svgs/arrow-clockwise.svg";
import Trash from "@/assets/svgs/trash.svg";
import Snowflake from "@/assets/svgs/snowflake.svg";
import LeftHand from "@/assets/svgs/LH.png";
import Download from "@/assets/svgs/download.svg";
import RightHand from "@/assets/svgs/RH.png";
import LeftFoot from "@/assets/svgs/LF.png";
import RightFoot from "@/assets/svgs/RF.png";
import Eraser from "@/assets/svgs/eraser-fill.svg";
export const IconUrlMap = {
arrowClockwise: ArrowClockwise,

8
src/ui/global.css
View File

@@ -113,26 +113,26 @@ body {
font-family: 'DMSans';
font-style: normal;
font-weight: 400;
src: url(assets/fonts/DMSans-Regular.ttf) format('woff2');
src: url(@/assets/fonts/DMSans-Regular.ttf) format('woff2');
}
@font-face {
font-family: 'DMSans';
font-style: normal;
font-weight: 600;
src: url(assets/fonts/DMSans-Bold.ttf) format('woff2');
src: url(@/assets/fonts/DMSans-Bold.ttf) format('woff2');
}
@font-face {
font-family: 'DMSans';
font-style: italic;
font-weight: 400;
src: url(assets/fonts/DMSans-Italic.ttf) format('woff2');
src: url(@/assets/fonts/DMSans-Italic.ttf) format('woff2');
}
@font-face {
font-family: 'DMSans';
font-style: italic;
font-weight: 600;
src: url(assets/fonts/DMSans-BoldItalic.ttf) format('woff2');
src: url(@/assets/fonts/DMSans-BoldItalic.ttf) format('woff2');
}