Frontend: Improve mouse interaction for player widget

AgustinSRG · Feb 10, 2024 · c3b4aca · c3b4aca
1 parent 7386693
commit c3b4aca
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 1 deletion.
diff --git a/frontend/src/components/player/ResizableWidget.vue b/frontend/src/components/player/ResizableWidget.vue
@@ -7,6 +7,7 @@
         @dblclick="stopPropagationEvent"
         @mousedown="propagateClick"
         @touchstart="propagateTouch"
+        @contextmenu="stopPropagationEvent"
         :style="{
             top: y + 'px',
             left: x + 'px',
@@ -36,7 +37,7 @@
             </div>
         </div>
 
-        <div class="resizable-widget-body">
+        <div class="resizable-widget-body" :class="{ resizing: resizing }">
             <slot></slot>
         </div>
 

diff --git a/frontend/src/style/player/resizable-widget.css b/frontend/src/style/player/resizable-widget.css
@@ -19,6 +19,7 @@
     flex-direction: column;
     border: solid 1px var(--theme-border-color);
     pointer-events: all;
+    cursor: default;
 }
 
 .resizable-widget-header {
@@ -38,6 +39,7 @@
     text-overflow: ellipsis;
     overflow: hidden;
     padding-right: 12px;
+    user-select: none;
 }
 
 .resizable-widget-body {
@@ -46,6 +48,11 @@
     scrollbar-gutter: stable;
 
     height: calc(100% - 56px);
+    user-select: text;
+}
+
+.resizable-widget-body.resizing {
+    user-select: none;
 }
 
 /* Close button */