+ @if (dragHandle && !edit) {
+
+ }
{{ iSong.title }}
@if (!edit) {
@@ -30,7 +38,9 @@
@if (!edit) {
-
+ @if (dragHandle) {
+
+ }
@for (key of keys; track key) {
diff --git a/src/app/modules/shows/show/song/song.component.less b/src/app/modules/shows/show/song/song.component.less
index 87f6491..c205124 100644
--- a/src/app/modules/shows/show/song/song.component.less
+++ b/src/app/modules/shows/show/song/song.component.less
@@ -5,11 +5,11 @@
}
display: grid;
- grid-template-columns: auto 70px 25px 25px;
+ grid-template-columns: 24px auto 70px 25px 25px;
@media screen and (max-width: 860px) {
- grid-template-columns: auto 70px 45px 45px;
+ grid-template-columns: 24px auto 70px 45px 45px;
}
- grid-template-areas: "title keys edit delete";
+ grid-template-areas: "drag title keys edit delete";
& > * {
display: flex;
@@ -19,6 +19,51 @@
overflow: hidden;
}
+.drag-handle,
+.drag-handle-placeholder {
+ grid-area: drag;
+}
+
+.drag-handle {
+ width: 16px;
+ height: 36px;
+ padding: 4px 0;
+ border: 0;
+ background: transparent;
+ cursor: grab;
+ justify-self: start;
+ position: relative;
+
+ &::before {
+ content: "";
+ width: 10px;
+ height: 18px;
+ display: block;
+ border-radius: 999px;
+ background-image: radial-gradient(circle, var(--text-soft) 1.2px, transparent 1.3px),
+ radial-gradient(circle, var(--text-soft) 1.2px, transparent 1.3px);
+ background-position: 0 0, 6px 0;
+ background-size: 6px 6px;
+ background-repeat: repeat-y;
+ opacity: 0.65;
+ transition: var(--transition);
+ }
+
+ &:hover::before {
+ opacity: 1;
+ background-image: radial-gradient(circle, var(--primary-color) 1.2px, transparent 1.3px),
+ radial-gradient(circle, var(--primary-color) 1.2px, transparent 1.3px);
+ }
+
+ &:active {
+ cursor: grabbing;
+ }
+}
+
+.drag-handle-placeholder {
+ width: 16px;
+}
+
.keys-container {
display: flex;
flex-direction: column;
@@ -59,6 +104,7 @@
.title {
grid-area: title;
+ min-width: 0;
&.published {
margin: 10px 0;
diff --git a/src/app/modules/shows/show/song/song.component.ts b/src/app/modules/shows/show/song/song.component.ts
index db32cd1..b260d63 100644
--- a/src/app/modules/shows/show/song/song.component.ts
+++ b/src/app/modules/shows/show/song/song.component.ts
@@ -17,6 +17,7 @@ import {MatInput} from '@angular/material/input';
import {CdkTextareaAutosize} from '@angular/cdk/text-field';
import {ButtonRowComponent} from '../../../../widget-modules/components/button-row/button-row.component';
import {ButtonComponent} from '../../../../widget-modules/components/button/button.component';
+import {CdkDragHandle} from '@angular/cdk/drag-drop';
@Component({
selector: 'app-song',
@@ -36,6 +37,7 @@ import {ButtonComponent} from '../../../../widget-modules/components/button/butt
ButtonRowComponent,
ButtonComponent,
SongTextComponent,
+ CdkDragHandle,
],
})
export class SongComponent implements OnInit {
@@ -44,6 +46,7 @@ export class SongComponent implements OnInit {
@Input() public show: Show | null = null;
@Input() public showId: string | null = null;
@Input() public showText: boolean | null = null;
+ @Input() public dragHandle = false;
@Input() public index = -1;
@Input() public fullscreen = false;
public keys: string[] = [];