Merge pull request #414 from simplabs/better-dummy

mainmatter · Aug 20, 2021 · 71dd12b · 71dd12b
2 parents bf92d65 + 91d73a6
commit 71dd12b
Show file tree

Hide file tree

Showing 10 changed files with 218 additions and 97 deletions.
diff --git a/.github/epm.svg b/.github/epm.svg
diff --git a/README.md b/README.md
@@ -1,4 +1,4 @@
-<p align="center"><img src=".github/epm.svg" role="presentation" alt="" /></p>
+<p align="center"><img src="./tests/dummy/public/ember-promise-modals-logo.svg" role="presentation" alt="" width="600" height="400" /></p>
 
 # ember-promise-modals
 
@@ -24,21 +24,7 @@ To use EPM in your project, add the target for the modals to your `application.h
 <EpmModalContainer />
 ```
 
-Then you need to inject the `modals` service wherever you need to open a modal:
-
-```javascript
-@service modals;
-```
-
-Now you can call the `open` method with a component name to render it as a modal:
-
-```javascript
-this.modals.open('component-to-render');
-```
-
-### Basic usage
-
-Here is a basic code example:
+Then you can to inject the `modals` service wherever you need and call its `open` method with a component name to render it as a modal.
 
 ```javascript
 import { inject as service } from '@ember/service';
@@ -53,15 +39,13 @@ export default class extends Component {
 }
 ```
 
-Then in your template, you can:
-
 ```handlebars
-<button {{on "click" this.handleOpenModal}}>
+<button type="button" {{on "click" this.handleOpenModal}}>
   Click Me!
 </button>
 ```
 
-### Attributes
+### Passing data to the rendered component
 
 You can pass custom data into your rendered template like so:
 
@@ -74,30 +58,26 @@ this.modals.open('file-preview', {
 All passed attributes can be accessed from the passed-in `data` object:
 
 ```handlebars
-<!-- app/components/file-preview.hbs -->
-
+<!-- components/file-preview.hbs -->
 <img src={{@data.fileUrl}} />
 ```
 
 ```javascript
-// app/components/file-preview.js
-
-this.data.fileUrl; // or this.args.data.fileUrl in Glimmer components
+// components/file-preview.js
+this.args.data.fileUrl; // or this.data.fileUrl in classic components
 ```
 
 **NOTE:** By default, a `close` method is passed in your rendered component, in
 order to trigger the "close modal" action. It can be called like so:
 
 ```handlebars
-<!-- app/components/file-preview.hbs -->
-
+<!-- components/file-preview.hbs -->
 <button {{on "click" @close}}>Close</button>
 ```
 
 ```javascript
-// app/components/file-preview.js
-
-this.close(); // or this.args.close() in Glimmer components
+// components/file-preview.js
+this.args.close(); // or this.close() in classic components
 ```
 
 ## Animation

diff --git a/tests/dummy/app/index.html b/tests/dummy/app/index.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <title>Dummy</title>
+    <title>ember-promise-modals Demo</title>
     <meta name="description" content="">
     <meta name="viewport" content="width=device-width, initial-scale=1">
 

diff --git a/tests/dummy/app/styles/app.css b/tests/dummy/app/styles/app.css
@@ -1,11 +1,19 @@
 /* === Basic styling for the demo modal */
 
+.epm-modal {
+  /*
+    Inset so modals look like modals on mobile.
+    The addon doesn't impose any default on your project
+  */
+  padding: 0.5rem;
+}
+
 .modal {
-  max-width: 100%;
+  max-width: 600px;
   border-radius: 6px;
   background-color: white;
   box-shadow: 0 4px 28px 0 rgba(0, 0, 0, 0.36);
-  padding: 16px 32px;
+  padding: 1.5rem;
 }
 
 .modal1 {
@@ -93,3 +101,139 @@
     transform: translate(0, calc(-50vh - 50%));
   }
 }
+
+/* Anything below is just to make the demo page look fancy */
+
+html,
+body,
+* {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  line-height: 1.5;
+  color: inherit;
+}
+
+html,
+body {
+  font: 15px/24px sans-serif;
+  background: #fff;
+  color: #456078;
+}
+
+:where(*) {
+  font-size: inherit;
+  line-height: inherit;
+}
+
+body {
+  padding: 0 0.5rem;
+  font-size: 0.9375rem;
+  line-height: 1.5rem;
+}
+
+main,
+footer p {
+  max-width: 400px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+footer {
+  padding: 1.5rem;
+  background: #fafafa;
+  margin-top: 3rem;
+}
+
+header {
+  max-width: 600px;
+  margin: auto;
+}
+
+img {
+  display: block;
+  max-width: 100%;
+  height: auto;
+  margin: auto;
+}
+
+p {
+  text-align: center;
+}
+
+p + p {
+  margin-top: 1rem;
+}
+
+small {
+  font-size: 0.8125rem;
+  line-height: 1.5rem;
+  opacity: 0.4;
+}
+
+*:focus {
+  outline: 0;
+  box-shadow: 0 0 10px -2px #007EDF;
+}
+
+a {
+  padding: 0.25em 0;
+  border-radius: 0.25em;
+}
+
+[type='button'] {
+  padding: 0.5rem 1.25rem;
+  font-weight: 700;
+  background: rgba(255, 255, 255, 0.95);
+  box-shadow: 0 1px 2px 0 rgba(0, 76, 134, 0.4), 0 5px 16px -4px rgba(0, 76, 134, 0.4);
+  border-radius: 0.5625rem;
+}
+
+[type='button']:focus {
+  box-shadow: 0 0 10px -2px #007EDF, 0 1px 2px 0 rgba(0, 76, 134, 0.4), 0 5px 16px -4px rgba(0, 76, 134, 0.4);
+  outline: 0;
+  color: #007EDF;
+}
+
+[type='button']:active {
+  transform: translateY(1px);
+  box-shadow: 0 0 2px 0 rgba(0, 76, 134, 0.4), 0 4px 16px -4px rgba(0, 76, 134, 0.4);
+}
+
+.box {
+  padding: 1.5rem;
+  border-radius: 1.125rem;
+  text-align: center;
+}
+
+* + .box {
+  margin-top: 1rem;
+}
+
+.box + * {
+  margin-top: 3rem;
+}
+
+.box-blue {
+  background: #eff9fa;
+}
+
+.box-green {
+  background: #effbf2;
+}
+
+.box-placeholder {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 50vh;
+  background: #fafafa;
+}
+
+.modal header {
+  margin: 0 0 1rem;
+}
+
+.modal p {
+  text-align: left;
+}