overlastic 0.1.0 → 0.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: e71d0d0cb84a1e1576f09f7e7329ceaf6601dd46cc2045caba2e2aec3ee4f5ba
-  data.tar.gz: fa2a39ad530363af3d3d1b9b04a07f95049d7865774d1684f8e50ac2aa88d9ec
+  metadata.gz: b15c1e8912468223f9b071536a31595df060b4c4fc43650fa90a023acfbc6ac5
+  data.tar.gz: 55859a726aef8e8b2983e36b13211f45ae6950354f79cb77ee360200006dae8d
 SHA512:
-  metadata.gz: c136cb0313643c9fa6c15e73c93e2ad0725920f10548ef848ae784a2418dcefb971d25b45bf393bb2c63e2ca71455e6c7dc24c2f54c6187e23ff3fd3934888e9
-  data.tar.gz: d906bc365ffa890bd4543700cccd7eb200accbdea7086fb8701161cf6239608ac7633ec874794ff8bf7068ac75bd58f2f506414f34ae36ddf3c7389b88758d73
+  metadata.gz: 48f45ab76516fa475fb83b147115af03f53f739f8e2cc11cb1c187df3cf9928a7aad1d1d3bac4b3c3f0e6701af1a2a4d81a4a34c70a1e48015cde6451509f34f
+  data.tar.gz: e04854b3ab1dadfd2e15c613dd37f36dc0f6c10f69f1e268dc059bc1ba70c103a68ce71406c9fd7bc2320552798ea1099a6836c88b7cd3d30b4b32729cb2aea6

data/README.md

@@ -62,12 +62,36 @@ Overlastic.configure do |config|
 end
 ```
 
+
+## Customization
+
+Overlastic comes with default views for both the dialog and pane overlays. It also provides a generator to allow for easy customization.
+
+<details>
+  <summary>Default overlays</summary><br>
+
+  <img src="assets/dialog.png?sanitize=true" width="600" alt="Dialog">
+
+  <br>
+
+  <img src="assets/pane.png?sanitize=true" width="600" alt="Dialog">
+</details>
+
+<details>
+  <summary>Generate customizable views</summary><br>
+
+  ```sh
+    # Available options: inline, tailwind
+    ./bin/rails generate overlastic:views --css tailwind
+  ```
+</details>
+
+
 ## Development
 
 <details>
   <summary>Roadmap</summary><br>
 
-  - Generator to allow easy customization of the overlay views
   - Handle 4xx responses (p.e. validation errors) when submitting forms inside an overlay
 </details>
 

data/app/views/{shared/overlays → overlastic/inline}/_dialog.html.erb

@@ -1,7 +1,7 @@
 <% title ||= "" %>
 
 <%= turbo_frame_tag current_overlay_name do %>
-  <overlastic-dialog style="height:736px;background-color:rgba(107, 114, 128, 0.5);justify-content:center;align-items:center;width: 100vw;display:flex;z-index:50;left:0px;top:0px;position:fixed;box-sizing:border-box;border-width:0px;border-style:solid;border-color:rgb(229, 231, 235);">
+  <overlastic-dialog style="height:100vh;background-color:rgba(107, 114, 128, 0.5);justify-content:center;align-items:center;width: 100vw;display:flex;z-index:50;left:0px;top:0px;position:fixed;box-sizing:border-box;border-width:0px;border-style:solid;border-color:rgb(229, 231, 235);">
     <div style="width: 50%;justify-content:center;align-items:center;flex-direction:column;max-width:672px;height:662.398px;display:flex;box-sizing:border-box;border-width:0px;border-style:solid;border-color:rgb(229, 231, 235);">
       <div style="padding-top:32px;padding-bottom:32px;box-shadow:rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.1) 0px 2px 4px -2px;background-color:rgb(255, 255, 255);overflow:hidden;box-sizing:border-box;border-width:0px;border-style:solid;border-color:rgb(229, 231, 235);">
         <div style="padding-left:32px;padding-right:32px;justify-content:space-between;align-items:center;display:flex;box-sizing:border-box;border-width:0px;border-style:solid;border-color:rgb(229, 231, 235);">

data/app/views/{shared/overlays → overlastic/inline}/_pane.html.erb

@@ -1,7 +1,7 @@
 <%= turbo_frame_tag current_overlay_name do %>
-  <overlastic-pane style="background-color:rgba(107, 114, 128, 0.5);justify-content:flex-end;width: 100vw;height:736px;display:flex;z-index:40;left:0px;top:0px;position:fixed;box-sizing:border-box;border-width:0px;border-style:solid;border-color:rgb(229, 231, 235);">
-    <div style="width: 66.6667%;align-items:flex-end;flex-direction:column;animation:0.2s ease 0s 1 normal both running modal;height:736px;display:flex;box-sizing:border-box;border-width:0px;border-style:solid;border-color:rgb(229, 231, 235);">
-      <div style="box-shadow:rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.1) 0px 2px 4px -2px;padding-top:20px;padding-bottom:20px;background-color:rgb(249, 250, 251);border-top-left-radius:8px;border-bottom-left-radius:8px;overflow:hidden;width: 100%;height:736px;box-sizing:border-box;border-width:0px;border-style:solid;border-color:rgb(229, 231, 235);">
+  <overlastic-pane style="background-color:rgba(107, 114, 128, 0.5);justify-content:flex-end;width: 100vw;height:100vh;display:flex;z-index:40;left:0px;top:0px;position:fixed;box-sizing:border-box;border-width:0px;border-style:solid;border-color:rgb(229, 231, 235);">
+    <div style="width: 66.6667%;align-items:flex-end;flex-direction:column;animation:0.2s ease 0s 1 normal both running modal;height:100%;display:flex;box-sizing:border-box;border-width:0px;border-style:solid;border-color:rgb(229, 231, 235);">
+      <div style="box-shadow:rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.1) 0px 2px 4px -2px;padding-top:20px;padding-bottom:20px;background-color:rgb(249, 250, 251);border-top-left-radius:8px;border-bottom-left-radius:8px;overflow:hidden;width: 100%;height:100%;box-sizing:border-box;border-width:0px;border-style:solid;border-color:rgb(229, 231, 235);">
         <div style="padding-left:20px;padding-right:20px;justify-content:space-between;align-items:center;display:flex;margin-bottom:12px;box-sizing:border-box;border-width:0px;border-style:solid;border-color:rgb(229, 231, 235);">
           <span class="overlastic-close" style="color:rgb(75, 85, 99);cursor:pointer;box-sizing:border-box;border-width:0px;border-style:solid;border-color:rgb(229, 231, 235);">
             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" style="width: 2rem;height:32px;display:block;vertical-align:middle;box-sizing:border-box;border-width:0px;border-style:solid;border-color:rgb(229, 231, 235);fill:currentColor;">

data/lib/generators/overlastic/views/USAGE

@@ -0,0 +1,9 @@
+Description:
+    Generate views for the dialog and pane overlays to provide for easy customization.
+
+Example:
+    bin/rails generate overlastic:views --css tailwind
+
+    This will create:
+        app/views/overlays/_dialog.html.erb
+        app/views/overlays/_pane.html.erb

data/lib/generators/overlastic/views/views_generator.rb

@@ -0,0 +1,14 @@
+class Overlastic::ViewsGenerator < Rails::Generators::Base
+  source_root File.expand_path("../../../../app/views/overlastic", __dir__)
+
+  class_option :css, enum: %w[inline tailwind], default: "inline", desc: "Indicate the desired CSS style"
+
+  def self.default_generator_root
+    __dir__
+  end
+
+  def copy_view_files
+    copy_file "#{options[:css]}/_dialog.html.erb", "app/views/overlays/_dialog.html.erb"
+    copy_file "#{options[:css]}/_pane.html.erb", "app/views/overlays/_pane.html.erb"
+  end
+end

data/lib/overlastic/configuration.rb

@@ -19,7 +19,7 @@ module Overlastic
       overlay_types.each do |overlay_type|
         self.class.attr_accessor :"#{overlay_type}_overlay_view_path"
 
-        public_send :"#{overlay_type}_overlay_view_path=", "shared/overlays/#{overlay_type}"
+        public_send :"#{overlay_type}_overlay_view_path=", "overlastic/inline/#{overlay_type}"
       end
     end
   end

data/lib/overlastic/version.rb

@@ -1,3 +1,3 @@
 module Overlastic
-  VERSION = "0.1.0"
+  VERSION = "0.2.0"
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: overlastic
 version: !ruby/object:Gem::Version
-  version: 0.1.0
+  version: 0.2.0
 platform: ruby
 authors:
 - Martin Zamuner
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2022-09-12 00:00:00.000000000 Z
+date: 2022-09-13 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: activejob
@@ -71,10 +71,12 @@ files:
 - app/javascript/overlastic/dialogElement.js
 - app/javascript/overlastic/index.js
 - app/javascript/overlastic/paneElement.js
-- app/views/shared/overlays/_dialog.html.erb
-- app/views/shared/overlays/_pane.html.erb
-- app/views/shared/overlays/tailwind/_dialog.html.erb
-- app/views/shared/overlays/tailwind/_pane.html.erb
+- app/views/overlastic/inline/_dialog.html.erb
+- app/views/overlastic/inline/_pane.html.erb
+- app/views/overlastic/tailwind/_dialog.html.erb
+- app/views/overlastic/tailwind/_pane.html.erb
+- lib/generators/overlastic/views/USAGE
+- lib/generators/overlastic/views/views_generator.rb
 - lib/install/overlastic_with_importmap.rb
 - lib/install/overlastic_with_node.rb
 - lib/overlastic.rb
@@ -94,7 +96,7 @@ required_ruby_version: !ruby/object:Gem::Requirement
   requirements:
   - - ">="
     - !ruby/object:Gem::Version
-      version: 2.6.0
+      version: 2.5.0
 required_rubygems_version: !ruby/object:Gem::Requirement
   requirements:
   - - ">="