Merge pull request #194 from blackcandy-org/dev

Use native dialog element
blackcandy-org · Aug 24, 2022 · 048e81f · 048e81f
2 parents 95f56ec + 87ba94b
commit 048e81f
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 36 deletions.
diff --git a/app/assets/stylesheets/components/_dialog.scss b/app/assets/stylesheets/components/_dialog.scss
@@ -1,13 +1,18 @@
 @use "../tools/functions" as *;
 
 .c-dialog {
-  position: fixed;
-  top: 100px;
-  left: 0;
-  right: 0;
-  z-index: 1000;
+  padding: 0;
+  margin-top: 100px;
   background: var(--dialog-bg-color);
+  border: none;
   border-radius: border-radius("medium");
+  width: 100%;
+  max-width: 360px;
+  color: inherit;
+}
+
+.c-dialog::backdrop {
+  background-color: var(--dialog-backdrop-color);
 }
 
 .c-dialog__header {

diff --git a/app/assets/stylesheets/settings/_theme.scss b/app/assets/stylesheets/settings/_theme.scss
@@ -87,6 +87,10 @@
   --dialog-header-bg-color: #{$grey-lighter};
   --dialog-header-color: #{$black};
 
+  ::backdrop {
+    --dialog-backdrop-color: #{color.change($grey-lightest, $alpha: 0.9)};
+  }
+
   /* Overlay */
   --overlay-blur-bg-color: #{color.change($grey-lightest, $alpha: 0.9)};
 
@@ -170,7 +174,7 @@
   --tab-active-color: #{$purple-light};
 
   /* List */
-  --list-border-color: #{$black-lighter};
+  --list-border-color: #{$black-light};
   --list-active-color: #{$purple-light};
   --list-dragging-placeholder-bg-color: #{$black-light};
   --list-dragging-bg-color: #{$black-dark};
@@ -202,6 +206,10 @@
   --dialog-header-bg-color: #{$grey};
   --dialog-header-color: #{$black};
 
+  ::backdrop {
+    --dialog-backdrop-color: #{color.change($black-light, $alpha: 0.9)};
+  }
+
   /* Overlay */
   --overlay-blur-bg-color: #{color.change($black-light, $alpha: 0.9)};
 

diff --git a/app/javascript/controllers/dialog_controller.js b/app/javascript/controllers/dialog_controller.js
@@ -1,35 +1,11 @@
 import { Controller } from '@hotwired/stimulus'
 
 export default class extends Controller {
-  static values = {
-    isShown: Boolean
-  }
-
   initialize () {
-    if (this.isShownValue) {
-      this.show()
-    } else {
-      this.hide()
-    }
-  }
-
-  connect () {
-    this.element.addEventListener('dialog:hide', this.hide)
-    this.element.addEventListener('dialog:show', this.show)
-  }
-
-  disconnect () {
-    this.element.removeEventListener('dialog:hide', this.hide)
-    this.element.removeEventListener('dialog:show', this.show)
-  }
-
-  show = () => {
-    document.querySelector('#js-overlay').classList.remove('u-display-none')
-    this.element.classList.remove('u-display-none')
+    this.element.showModal()
   }
 
-  hide = () => {
-    document.querySelector('#js-overlay').classList.add('u-display-none')
-    this.element.classList.add('u-display-none')
+  hide () {
+    this.element.close()
   }
 }
diff --git a/app/views/layouts/dialog.html.erb b/app/views/layouts/dialog.html.erb
@@ -1,5 +1,5 @@
 <%= turbo_frame_tag 'turbo-dialog' do %>
-  <section class='c-dialog o-container o-container--extra-narrow u-display-none' data-controller='dialog' data-dialog-is-shown-value='true'>
+  <dialog class='c-dialog' data-controller='dialog'>
     <header class='c-dialog__header o-flex o-flex--justify-between'>
       <h2 class='u-mb-0'><%= yield(:title) %></h2>
       <span class='u-cursor-pointer' data-action='click->dialog#hide'>
@@ -9,5 +9,5 @@
     <div id='js-dialog-content' class='c-dialog__content u-position-relative'>
       <%= yield %>
     </div>
-  </section>
+  </dialog>
 <% end %>
diff --git a/test/application_system_test_case.rb b/test/application_system_test_case.rb
@@ -8,7 +8,8 @@
 class ApplicationSystemTestCase < ActionDispatch::SystemTestCase
   driven_by :cuprite, screen_size: [1400, 900], options: {
     browser_options: {"no-sandbox": nil},
-    url_blacklist: ["https://www.gravatar.com"]
+    url_blacklist: ["https://www.gravatar.com"],
+    timeout: 10
   }
 
   def login_as(user)