overlastic 0.1.0 → 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: e71d0d0cb84a1e1576f09f7e7329ceaf6601dd46cc2045caba2e2aec3ee4f5ba
4
- data.tar.gz: fa2a39ad530363af3d3d1b9b04a07f95049d7865774d1684f8e50ac2aa88d9ec
3
+ metadata.gz: b15c1e8912468223f9b071536a31595df060b4c4fc43650fa90a023acfbc6ac5
4
+ data.tar.gz: 55859a726aef8e8b2983e36b13211f45ae6950354f79cb77ee360200006dae8d
5
5
  SHA512:
6
- metadata.gz: c136cb0313643c9fa6c15e73c93e2ad0725920f10548ef848ae784a2418dcefb971d25b45bf393bb2c63e2ca71455e6c7dc24c2f54c6187e23ff3fd3934888e9
7
- data.tar.gz: d906bc365ffa890bd4543700cccd7eb200accbdea7086fb8701161cf6239608ac7633ec874794ff8bf7068ac75bd58f2f506414f34ae36ddf3c7389b88758d73
6
+ metadata.gz: 48f45ab76516fa475fb83b147115af03f53f739f8e2cc11cb1c187df3cf9928a7aad1d1d3bac4b3c3f0e6701af1a2a4d81a4a34c70a1e48015cde6451509f34f
7
+ data.tar.gz: e04854b3ab1dadfd2e15c613dd37f36dc0f6c10f69f1e268dc059bc1ba70c103a68ce71406c9fd7bc2320552798ea1099a6836c88b7cd3d30b4b32729cb2aea6
data/README.md CHANGED
@@ -62,12 +62,36 @@ Overlastic.configure do |config|
62
62
  end
63
63
  ```
64
64
 
65
+
66
+ ## Customization
67
+
68
+ Overlastic comes with default views for both the dialog and pane overlays. It also provides a generator to allow for easy customization.
69
+
70
+ <details>
71
+ <summary>Default overlays</summary><br>
72
+
73
+ <img src="assets/dialog.png?sanitize=true" width="600" alt="Dialog">
74
+
75
+ <br>
76
+
77
+ <img src="assets/pane.png?sanitize=true" width="600" alt="Dialog">
78
+ </details>
79
+
80
+ <details>
81
+ <summary>Generate customizable views</summary><br>
82
+
83
+ ```sh
84
+ # Available options: inline, tailwind
85
+ ./bin/rails generate overlastic:views --css tailwind
86
+ ```
87
+ </details>
88
+
89
+
65
90
  ## Development
66
91
 
67
92
  <details>
68
93
  <summary>Roadmap</summary><br>
69
94
 
70
- - Generator to allow easy customization of the overlay views
71
95
  - Handle 4xx responses (p.e. validation errors) when submitting forms inside an overlay
72
96
  </details>
73
97
 
@@ -1,7 +1,7 @@
1
1
  <% title ||= "" %>
2
2
 
3
3
  <%= turbo_frame_tag current_overlay_name do %>
4
- <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);">
4
+ <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);">
5
5
  <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);">
6
6
  <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);">
7
7
  <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);">
@@ -1,7 +1,7 @@
1
1
  <%= turbo_frame_tag current_overlay_name do %>
2
- <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);">
3
- <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);">
4
- <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);">
2
+ <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);">
3
+ <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);">
4
+ <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);">
5
5
  <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);">
6
6
  <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);">
7
7
  <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;">
@@ -0,0 +1,9 @@
1
+ Description:
2
+ Generate views for the dialog and pane overlays to provide for easy customization.
3
+
4
+ Example:
5
+ bin/rails generate overlastic:views --css tailwind
6
+
7
+ This will create:
8
+ app/views/overlays/_dialog.html.erb
9
+ app/views/overlays/_pane.html.erb
@@ -0,0 +1,14 @@
1
+ class Overlastic::ViewsGenerator < Rails::Generators::Base
2
+ source_root File.expand_path("../../../../app/views/overlastic", __dir__)
3
+
4
+ class_option :css, enum: %w[inline tailwind], default: "inline", desc: "Indicate the desired CSS style"
5
+
6
+ def self.default_generator_root
7
+ __dir__
8
+ end
9
+
10
+ def copy_view_files
11
+ copy_file "#{options[:css]}/_dialog.html.erb", "app/views/overlays/_dialog.html.erb"
12
+ copy_file "#{options[:css]}/_pane.html.erb", "app/views/overlays/_pane.html.erb"
13
+ end
14
+ end
@@ -19,7 +19,7 @@ module Overlastic
19
19
  overlay_types.each do |overlay_type|
20
20
  self.class.attr_accessor :"#{overlay_type}_overlay_view_path"
21
21
 
22
- public_send :"#{overlay_type}_overlay_view_path=", "shared/overlays/#{overlay_type}"
22
+ public_send :"#{overlay_type}_overlay_view_path=", "overlastic/inline/#{overlay_type}"
23
23
  end
24
24
  end
25
25
  end
@@ -1,3 +1,3 @@
1
1
  module Overlastic
2
- VERSION = "0.1.0"
2
+ VERSION = "0.2.0"
3
3
  end
metadata CHANGED
@@ -1,14 +1,14 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: overlastic
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.1.0
4
+ version: 0.2.0
5
5
  platform: ruby
6
6
  authors:
7
7
  - Martin Zamuner
8
8
  autorequire:
9
9
  bindir: bin
10
10
  cert_chain: []
11
- date: 2022-09-12 00:00:00.000000000 Z
11
+ date: 2022-09-13 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: activejob
@@ -71,10 +71,12 @@ files:
71
71
  - app/javascript/overlastic/dialogElement.js
72
72
  - app/javascript/overlastic/index.js
73
73
  - app/javascript/overlastic/paneElement.js
74
- - app/views/shared/overlays/_dialog.html.erb
75
- - app/views/shared/overlays/_pane.html.erb
76
- - app/views/shared/overlays/tailwind/_dialog.html.erb
77
- - app/views/shared/overlays/tailwind/_pane.html.erb
74
+ - app/views/overlastic/inline/_dialog.html.erb
75
+ - app/views/overlastic/inline/_pane.html.erb
76
+ - app/views/overlastic/tailwind/_dialog.html.erb
77
+ - app/views/overlastic/tailwind/_pane.html.erb
78
+ - lib/generators/overlastic/views/USAGE
79
+ - lib/generators/overlastic/views/views_generator.rb
78
80
  - lib/install/overlastic_with_importmap.rb
79
81
  - lib/install/overlastic_with_node.rb
80
82
  - lib/overlastic.rb
@@ -94,7 +96,7 @@ required_ruby_version: !ruby/object:Gem::Requirement
94
96
  requirements:
95
97
  - - ">="
96
98
  - !ruby/object:Gem::Version
97
- version: 2.6.0
99
+ version: 2.5.0
98
100
  required_rubygems_version: !ruby/object:Gem::Requirement
99
101
  requirements:
100
102
  - - ">="