Frontend: Allow player widgets to move outside the player

AgustinSRG · Feb 9, 2024 · 1a558a3 · 1a558a3
1 parent b678474
commit 1a558a3
Show file tree

Hide file tree

Showing 6 changed files with 15 additions and 27 deletions.
diff --git a/frontend/src/components/player/ExtendedDescriptionWidget.vue b/frontend/src/components/player/ExtendedDescriptionWidget.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="tags-edit-helper-container">
+    <div class="resizable-widget-container">
         <ResizableWidget
             :title="$t('Extended description')"
             v-model:display="displayStatus"

diff --git a/frontend/src/components/player/TagsEditHelper.vue b/frontend/src/components/player/TagsEditHelper.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="tags-edit-helper-container">
+    <div class="resizable-widget-container">
         <ResizableWidget
             :title="$t('Tags')"
             v-model:display="displayStatus"

diff --git a/frontend/src/components/player/TimeSlicesEditHelper.vue b/frontend/src/components/player/TimeSlicesEditHelper.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="time-slices-edit-helper-container">
+    <div class="resizable-widget-container">
         <ResizableWidget
             :title="$t('Time slices')"
             v-model:display="displayStatus"

diff --git a/frontend/src/style/player/resizable-widget.css b/frontend/src/style/player/resizable-widget.css
@@ -1,5 +1,17 @@
 /* Resizable widget */
 
+.resizable-widget-container {
+    position: fixed;
+    z-index: 10;
+
+    left: 0.5rem;
+    right: 0.5rem;
+    top: 0.5rem;
+    bottom: 0.5rem;
+
+    pointer-events: none;
+}
+
 .resizable-widget {
     position: absolute;
     background-color: var(--player-editor-background);

diff --git a/frontend/src/style/player/tags-edit.css b/frontend/src/style/player/tags-edit.css
@@ -1,17 +1,5 @@
 /* Tags editor helper */
 
-.tags-edit-helper-container {
-    position: absolute;
-
-    right: 0.5rem;
-
-    top: calc(56px + 0.5rem);
-    bottom: 76px;
-
-    width: calc(100% - 1rem);
-    pointer-events: none;
-}
-
 .tags-editor-body {
     padding: 1rem;
 }
diff --git a/frontend/src/style/player/time-slices-edit.css b/frontend/src/style/player/time-slices-edit.css
@@ -1,17 +1,5 @@
 /* Time slices editor helper */
 
-.time-slices-edit-helper-container {
-    position: absolute;
-
-    right: 0.5rem;
-
-    top: calc(56px + 0.5rem);
-    bottom: 76px;
-
-    width: calc(100% - 1rem);
-    pointer-events: none;
-}
-
 .time-slices-edit-helper-btn {
     display: inline-block;
     width: 24px;