Merge pull request #462 from victornpb/drag-resize

Resize in all directions

package.json

@@ -1,7 +1,7 @@
 {
   "name": "undiscord",
   "nameFull": "Undiscord",
-  "version": "5.1.1",
+  "version": "5.2.0",
   "description": "Delete all messages in a Discord channel or DM (Bulk deletion)",
   "userScript": {
     "namespace": "https://github.com/victornpb/deleteDiscordMessages",

src/ui/drag.css

@@ -0,0 +1,79 @@
+[name^="grab-"] {
+  position: absolute;
+  --size: 6px;
+  --corner-size: 16px;
+  --offset: -1px;
+  z-index: 9;
+}
+[name^="grab-"]:hover{
+    background: rgba(128,128,128,0.1);
+}
+
+[name="grab-t"] {
+  top: 0px;
+  left: var(--corner-size);
+  right: var(--corner-size);
+  height: var(--size);
+  margin-top: var(--offset);
+  cursor: ns-resize;
+}
+[name="grab-r"] {
+  top: var(--corner-size);
+  bottom: var(--corner-size);
+  right: 0px;
+  width: var(--size);
+  margin-right: var(--offset); 
+  cursor: ew-resize;
+}
+[name="grab-b"] {
+  bottom: 0px;
+  left: var(--corner-size);
+  right: var(--corner-size);
+  height: var(--size);
+  margin-bottom: var(--offset);
+  cursor: ns-resize;
+}
+[name="grab-l"] {
+  top: var(--corner-size);
+  bottom: var(--corner-size);
+  left: 0px;
+  width: var(--size);
+  margin-left: var(--offset);
+  cursor: ew-resize;
+}
+[name="grab-tl"] {
+  top: 0px;
+  left: 0px;
+  width: var(--corner-size);
+  height: var(--corner-size);
+  margin-top: var(--offset);
+  margin-left: var(--offset);
+  cursor: nwse-resize;
+}
+[name="grab-tr"] {
+  top: 0px;
+  right: 0px;
+  width: var(--corner-size);
+  height: var(--corner-size);
+  margin-top: var(--offset);
+  margin-right: var(--offset);
+  cursor: nesw-resize;
+}
+[name="grab-br"] {
+  bottom: 0px;
+  right: 0px;
+  width: var(--corner-size);
+  height: var(--corner-size);
+  margin-bottom: var(--offset);
+  margin-right: var(--offset);
+  cursor: nwse-resize;
+}
+[name="grab-bl"] {
+  bottom: 0px;
+  left: 0px;
+  width: var(--corner-size);
+  height: var(--corner-size);
+  margin-bottom: var(--offset);
+  margin-left: var(--offset);
+  cursor: nesw-resize;
+}

src/ui/main.css

@@ -29,8 +29,8 @@
 /**** Undiscord Interface ****/
 #undiscord {
     position: fixed;
-    z-index: 99;
-    top: 44px;
+    z-index: 100;
+    top: 58px;
     right: 10px;
     display: flex;
     flex-direction: column;

src/undiscord-ui.js

@@ -4,6 +4,7 @@ import { VERSION } from 'process.env';
 
 import themeCss from './ui/theme.css';
 import mainCss from './ui/main.css';
+import dragCss from './ui/drag.css';
 import buttonHtml from './ui/undiscord-button.html';
 import undiscordTemplate from './ui/undiscord.html';
 
@@ -43,6 +44,7 @@ function initUI() {
 
   insertCss(themeCss);
   insertCss(mainCss);
+  insertCss(dragCss);
 
   // create undiscord window
   const undiscordUI = replaceInterpolations(undiscordTemplate, {
@@ -54,8 +56,7 @@ function initUI() {
   document.body.appendChild(ui.undiscordWindow);
 
   // enable drag and resize on undiscord window
-  new Drag(ui.undiscordWindow, $('.header'), { mode: 'move' });
-  new Drag(ui.undiscordWindow, $('.footer'), { mode: 'resize' });
+  new Drag({ elm: ui.undiscordWindow, moveHandle: $('.header') });
 
   // create undiscord Trash icon
   ui.undiscordBtn = createElm(buttonHtml);