fix: Colors and border radii

Author: fsbraun

filer/private/sass/components/_drag-and-drop.scss

@@ -23,7 +23,7 @@ form .form-row {
         position: relative;
         min-width: 215px;
         border: solid 1px $gray-lighter;
-        border-radius: $border-radius-base;
+        border-radius: $border-radius-normal;
         background-color: $gray-lightest;
         box-sizing: border-box !important;
         .z-index-fix {
@@ -171,7 +171,7 @@ form .form-row {
             margin-right: 10px;
         }
         .filerFile .related-lookup {
-            @include button-variant($btn-action-color, $btn-action-bgcolor, $btn-action-border, true);
+            @include button-variant($btn-action-color, var(--primary), $btn-action-border, true);
             float: left !important;
             overflow: hidden;
             // makes true that button has correct height #668
@@ -265,13 +265,13 @@ form .form-row {
                 height: 80px;
                 margin-right: 10px;
                 border: solid 1px $gray-lighter;
-                border-radius: $border-radius-base;
+                border-radius: 0;
                 vertical-align: top;
                 &[src*="nofile"] {
                     box-sizing: border-box;
                     margin-right: 0;
                     border: solid 1px $gray-lighter;
-                    border-radius: $border-radius-base;
+                    border-radius: 0;
                 }
             }
             // required for django CMS <= 3.1

filer/private/sass/settings/_custom.scss

@@ -60,9 +60,9 @@ $btn-default-color: var(--dca-gray-light, var(--button-fg, #999));
 $btn-default-bgcolor: var(--dca-white, var(--button-bg, #fff));
 $btn-default-border: var(--dca-gray-lighter, transparent);
 
-$btn-action-color: var(--dca-white, var(--button-fg, #fff));
-$btn-action-bgcolor: $color-primary;
-$btn-action-border: $color-primary;
+$btn-action-color: var(--default-button-fg, var(--button-fg, #fff));
+$btn-action-bgcolor: var(--default-button-bg);
+$btn-action-border: $black;
 
 //##############################################################################
 // #SHADOW

filer/static/filer/css/admin_filer.css

@@ -115,15 +115,19 @@ window.Cl = window.Cl || {};
             event.preventDefault();
             this.isDragging = true;
 
-            const clientX = event.type === 'touchstart' ? event.touches[0].clientX : event.clientX;
-            const clientY = event.type === 'touchstart' ? event.touches[0].clientY : event.clientY;
+            const touch = event.type === 'touchstart' ? event.touches[0] : event;
 
-            this.dragStartX = clientX;
-            this.dragStartY = clientY;
+            // Get container bounds
+            const containerRect = this.container.getBoundingClientRect();
+
+            // Calculate mouse position relative to container
+            this.dragStartX = touch.clientX - containerRect.left;
+            this.dragStartY = touch.clientY - containerRect.top;
 
-            const rect = this.circle.getBoundingClientRect();
-            this.circleStartX = rect.left;
-            this.circleStartY = rect.top;
+            // Get current circle position (center)
+            const circleRect = this.circle.getBoundingClientRect();
+            this.circleStartX = circleRect.left - containerRect.left + circleRect.width;
+            this.circleStartY = circleRect.top - containerRect.top + circleRect.height;
 
             document.addEventListener('mousemove', this._onMouseMove);
             document.addEventListener('mouseup', this._onMouseUp);
@@ -136,33 +140,36 @@ window.Cl = window.Cl || {};
 
             event.preventDefault();
 
-            const clientX = event.type === 'touchmove' ? event.touches[0].clientX : event.clientX;
-            const clientY = event.type === 'touchmove' ? event.touches[0].clientY : event.clientY;
-
-            const deltaX = clientX - this.dragStartX;
-            const deltaY = clientY - this.dragStartY;
+            const touch = event.type === 'touchmove' ? event.touches[0] : event;
 
+            // Get container bounds
             const containerRect = this.container.getBoundingClientRect();
-            const circleRect = this.circle.getBoundingClientRect();
 
-            let newX = this.circleStartX - containerRect.left + deltaX;
-            let newY = this.circleStartY - containerRect.top + deltaY;
+            // Calculate current mouse position relative to container
+            const currentX = touch.clientX - containerRect.left;
+            const currentY = touch.clientY - containerRect.top;
 
-            // Constrain to container bounds
-            const minX = 0;
-            const minY = 0;
-            const maxX = containerRect.width - circleRect.width;
-            const maxY = containerRect.height - circleRect.height;
+            // Calculate how much the mouse moved
+            const deltaX = currentX - this.dragStartX;
+            const deltaY = currentY - this.dragStartY;
 
-            newX = Math.max(minX, Math.min(maxX, newX));
-            newY = Math.max(minY, Math.min(maxY, newY));
+            // Calculate new center position
+            let centerX = this.circleStartX + deltaX;
+            let centerY = this.circleStartY + deltaY;
 
-            this.circle.style.left = `${newX}px`;
-            this.circle.style.top = `${newY}px`;
+            // Get circle dimensions
+            const circleRect = this.circle.getBoundingClientRect();
+            const halfCircle = circleRect.width / 2;
 
-            // Update location value (center of circle)
-            const centerX = newX + circleRect.width / 2;
-            const centerY = newY + circleRect.height / 2;
+            // Constrain center to container bounds
+            centerX = Math.max(halfCircle, Math.min(containerRect.width + halfCircle, centerX));
+            centerY = Math.max(halfCircle, Math.min(containerRect.height + halfCircle, centerY));
+
+            // Position circle by its top-left corner (center - radius)
+            this.circle.style.left = `${centerX - halfCircle}px`;
+            this.circle.style.top = `${centerY - halfCircle}px`;
+
+            // Update location value with center coordinates
             this._updateLocationValue(centerX, centerY);
         }
 
@@ -237,4 +244,11 @@ window.Cl = window.Cl || {};
 
     window.Cl.FocalPoint = FocalPoint;
     window.Cl.FocalPointConstructor = FocalPointConstructor;
+
+    // Export for ES6 module usage
+    if (typeof module !== 'undefined' && module.exports) {
+        module.exports = FocalPoint;
+    }
 })();
+
+export default window.Cl.FocalPoint;

filer/static/filer/js/addons/focal-point.js

@@ -78,3 +78,5 @@ class TogglerConstructor {
 
 Cl.Toggler = Toggler;
 Cl.TogglerConstructor = TogglerConstructor;
+
+export default Toggler;

filer/static/filer/js/addons/toggler.js

@@ -401,4 +401,11 @@ document.addEventListener('DOMContentLoaded', () => {
             }, 1200);
         });
     });
+
+    // Initialize FocalPoint
+    const focalPoint = new FocalPoint();
+    focalPoint.initialize();
+
+    // Initialize Toggler (auto-initializes in constructor)
+    new Toggler();
 });