Ordinal drag and drop using mouse events

katalyst · Sep 22, 2023 · 8b3e3b7 · 8b3e3b7
1 parent 9e215cf
commit 8b3e3b7
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 8 deletions.
diff --git a/Gemfile b/Gemfile
@@ -26,7 +26,7 @@ end
 
 group :test do
   gem "capybara"
-  gem "cuprite"
+  gem "cuprite", github: "rubycdp/cuprite"
   gem "rack_session_access"
   gem "rails-controller-testing"
   gem "webmock"

diff --git a/Gemfile.lock b/Gemfile.lock
@@ -1,3 +1,11 @@
+GIT
+  remote: https://github.com/rubycdp/cuprite.git
+  revision: cc26d526c5d6d784298f3282f8ea4a191eb0a177
+  specs:
+    cuprite (0.14.3)
+      capybara (~> 3.0)
+      ferrum (~> 0.13.0)
+
 PATH
   remote: .
   specs:
@@ -124,9 +132,6 @@ GEM
     crack (0.4.5)
       rexml
     crass (1.0.6)
-    cuprite (0.14.3)
-      capybara (~> 3.0)
-      ferrum (~> 0.13.0)
     dartsass-rails (0.5.0)
       railties (>= 6.0.0)
       sass-embedded (~> 1.63)
@@ -184,7 +189,7 @@ GEM
       redlock (>= 1.2)
     katalyst-kpop (2.0.9)
     katalyst-navigation (1.4.1)
-    katalyst-tables (2.2.2)
+    katalyst-tables (2.2.4)
       html-attributes-utils
       view_component
     language_server-protocol (3.17.0.3)
@@ -407,7 +412,7 @@ PLATFORMS
 DEPENDENCIES
   brakeman
   capybara
-  cuprite
+  cuprite!
   dartsass-rails
   erb_lint
   factory_bot_rails

diff --git a/app/assets/stylesheets/koi/components/_index-table.scss b/app/assets/stylesheets/koi/components/_index-table.scss
@@ -47,6 +47,7 @@ $row-height: 48px !default;
     text-overflow: ellipsis;
     vertical-align: top;
     white-space: nowrap;
+    background-color: white;
 
     > a {
       display: block;

diff --git a/app/assets/stylesheets/koi/components/index-table/_ordinal.scss b/app/assets/stylesheets/koi/components/index-table/_ordinal.scss
@@ -1,6 +1,22 @@
 $width: 2rem !default;
+$time: 125ms !default;
 
 .index-table {
+  tr {
+    transition:
+      top $time ease-in-out,
+      transform $time ease-in-out;
+  }
+
+  tr[dragging] {
+    transition: transform $time ease-in-out;
+    filter: drop-shadow(0 0 0.5rem var(--row-border-color));
+    transform: scale(1.01);
+    td {
+      box-shadow: none;
+    }
+  }
+
   th.ordinal {
     width: $width;
     padding-left: 0;
@@ -17,5 +33,6 @@ $width: 2rem !default;
     width: $width;
     padding-left: 0;
     cursor: grab;
+    text-align: center;
   }
 }
diff --git a/spec/system/index/ordinal_spec.rb b/spec/system/index/ordinal_spec.rb
@@ -17,13 +17,13 @@
     end
   end
 
-  it "supports mouse re-ordering", pending: "https://bugs.chromium.org/p/chromium/issues/detail?id=850071" do
+  it "supports mouse re-ordering" do
     visit "/admin/banners"
 
     within(".index-table tbody") do
       first = page.find("tr:first-child td.ordinal")
       last  = page.find("tr:last-child td.ordinal")
-      first.drag_to(last)
+      first.drag_to(last, steps: 10)
     end
 
     expect(page).to have_css("tr:last-child td", text: "first")