-
Notifications
You must be signed in to change notification settings - Fork 12
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Mario Rodriguez
committed
Sep 5, 2019
1 parent
80a4571
commit 45c70d8
Showing
6 changed files
with
87 additions
and
71 deletions.
There are no files selected for viewing
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,5 +1,6 @@ | ||
| /** | ||
| * Proceed only if the DOM is loaded and ready. | ||
| * | ||
| * @param {Function} fn The function to be executed when DOM is ready. | ||
| */ | ||
| function domReady(fn) { | ||
|
|
@@ -16,21 +17,24 @@ function domReady(fn) { | |
| */ | ||
| domReady(function() { | ||
| const Vue = require('../node_modules/vue/dist/vue.min.js'); | ||
| const MailtoUI = require('../src/js/mailtoui.js'); | ||
| // const MailtoUI = require('../dist/mailtoui-min.js'); | ||
| // const MailtoUI = require('../src/js/mailtoui.js'); | ||
| const MailtoUI = require('../dist/mailtoui-min.js'); | ||
|
|
||
| var app = new Vue({ | ||
| el: '#app', | ||
|
|
||
| data: { | ||
| emailSyntax: '{{ email }}', | ||
| email: '[email protected]', | ||
| emailDisplay: 'With cc' | ||
| emailDisplay: 'Mailto link with cc' | ||
| }, | ||
|
|
||
| computed: { | ||
| mailtoHref: function() { | ||
| return 'mailto:' + this.email + '[email protected]'; | ||
| } | ||
| }, | ||
|
|
||
| mounted() { | ||
| MailtoUI.run({ | ||
| buttonTextCopy: 'Copia', | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,55 @@ | ||
| /* Dark Theme: Sample CSS to overrie the look of MailtoUI */ | ||
|
|
||
| .mailtoui-modal { | ||
| background-color: #cbd5e0; | ||
| background-color: rgba(250, 250, 250, 0.5); | ||
| color: #fff; | ||
| } | ||
|
|
||
| .mailtoui-modal-head { | ||
| background-color: #21262c; | ||
| } | ||
|
|
||
| .mailtoui-modal-title { | ||
| color: #fff; | ||
| } | ||
|
|
||
| .mailtoui-modal-close:focus, | ||
| .mailtoui-modal-close:hover { | ||
| color: #fff; | ||
| } | ||
|
|
||
| .mailtoui-modal-body { | ||
| background-color: #373b41; | ||
| } | ||
|
|
||
| .mailtoui-button:focus .mailtoui-button-content { | ||
| background-color: #d8dcdf; | ||
| color: #333; | ||
| } | ||
|
|
||
| .mailtoui-button-content, | ||
| .mailtoui-button-copy { | ||
| background-color: #63676b; | ||
| color: #fff; | ||
| } | ||
|
|
||
| .mailtoui-button-content:hover, | ||
| .mailtoui-button-content:focus, | ||
| .mailtoui-button-copy:hover, | ||
| .mailtoui-button-copy:focus { | ||
| background-color: #d8dcdf; | ||
| color: #333; | ||
| } | ||
|
|
||
| .mailtoui-button-copy-clicked, | ||
| .mailtoui-button-copy-clicked:hover, | ||
| .mailtoui-button-copy-clicked:focus { | ||
| background-color: #1f9d55; | ||
| color: #fff; | ||
| } | ||
|
|
||
| .mailtoui-email-address { | ||
| background-color: #909295; | ||
| color: #21262c; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -6,80 +6,36 @@ | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | ||
| <title>Quick Demo</title> | ||
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css"> | ||
| <style type="text/css"> | ||
| .smooth-scroll { | ||
| scroll-behavior: smooth; | ||
| } | ||
|
|
||
| /* .mailtoui-modal { | ||
| background-color: rgba(250,250,250,0.5); | ||
| color: #fff; | ||
| } | ||
| .mailtoui-modal-head { | ||
| background-color: #21262C; | ||
| } | ||
| .mailtoui-modal-title { | ||
| color: #fff; | ||
| } | ||
| .mailtoui-modal-close:focus, | ||
| .mailtoui-modal-close:hover { | ||
| color: #fff; | ||
| } | ||
| .mailtoui-modal-body { | ||
| background-color: #373b41; | ||
| } | ||
| .mailtoui-button:focus .mailtoui-button-content { | ||
| background-color: #D8DCDF; | ||
| color: #333; | ||
| } | ||
| .mailtoui-button-content, | ||
| .mailtoui-button-copy { | ||
| background-color: #63676b; | ||
| color: #fff; | ||
| } | ||
| .mailtoui-button-content:hover, | ||
| .mailtoui-button-content:focus, | ||
| .mailtoui-button-copy:hover, | ||
| .mailtoui-button-copy:focus { | ||
| background-color: #D8DCDF; | ||
| color: #333; | ||
| } | ||
| .mailtoui-button-copy-clicked, | ||
| .mailtoui-button-copy-clicked:hover, | ||
| .mailtoui-button-copy-clicked:focus { | ||
| background-color: #1F9D55; | ||
| color: #fff; | ||
| } | ||
| .mailtoui-email-address { | ||
| background-color: #909295; | ||
| color: #21262c; | ||
| } */ | ||
| </style> | ||
| <style type="text/css">.smooth-scroll {scroll-behavior: smooth;}</style> | ||
| <link rel="stylesheet" href="./demo-min.css"> | ||
| </head> | ||
| <body> | ||
| <div id="app" class="max-w-sm mx-auto py-32"> | ||
| <h1 class="mb-12">MailtoUI Quick Demo</h1> | ||
| <h1 class="text-3xl mb-12">MailtoUI.js Quick Demo</h1> | ||
|
|
||
| <p class="mb-8"><a class="mailtoui" href="mailto:[email protected],[email protected]?subject=Hello!">With subject</a></p> | ||
| <p class="mb-8"> | ||
| <a class="mailtoui text-blue-600 underline" href="mailto:[email protected],[email protected]?subject=Hello!"> | ||
| Mailto link with subject | ||
| </a> | ||
| </p> | ||
|
|
||
| <p class="mb-8"><a class="mailtoui" href="mailto:[email protected]?body=Hello World!">With body</a></p> | ||
| <p class="mb-8"> | ||
| <a class="mailtoui text-blue-600 underline" href="mailto:[email protected]?body=Hello World!"> | ||
| Mailto link with body | ||
| </a> | ||
| </p> | ||
|
|
||
| <p> | ||
| <a class="mailtoui text-blue" :href="mailtoHref">{{ emailDisplay }}</a> | ||
| <span class="text-grey-dark"> - Link created with Vue.js</span> | ||
| <p class="mb-8"> | ||
| <a class="mailtoui text-blue-600 underline" :href="mailtoHref"> | ||
| {{ emailDisplay }} | ||
| </a> | ||
| <span class="text-gray-600"> - Created in Vue</span> | ||
| </p> | ||
| </div> | ||
|
|
||
| <!-- <script src="../src/js/mailtoui.js" data-options='{ "buttonTextCopy": "Copia", "buttonTextCopyAction": "Copiado!", "autoClose": true, "disableOnMobile": true }'></script> --> | ||
| <!-- Toggle commenting the next two lines to load MailtoUI.js via script tag or Vue --> | ||
|
|
||
| <!-- <script src="../src/js/mailtoui.js" data-options='{ "buttonText1": "Gmail", "autoClose": true, "disableOnMobile": true }'></script> --> | ||
| <script src="./demo-min.js"></script> | ||
| </body> | ||
| </html> | ||
Large diffs are not rendered by default.
Oops, something went wrong.