Browse Source
* WIP External actions modal frontend * Add external action links * Allow modal to show/hide and use a dynamic url * Use external link object instead of just url for state * add style and placement to external action buttons * reformat and simplify tag list style as not to conflict with action buttons and make them look less actionable since they're not * fix bug to open modal * have Esc key close modal * fix style on modal * make modal bg darker * close modal when you click outside of it * fix zindex * Add support for external action icons and colors * Some external action modal sizing + loading spinner Co-authored-by: Ginger Wong <omqmail@gmail.com>pull/828/head
Gabe Kangas
4 years ago
committed by
GitHub
11 changed files with 288 additions and 37 deletions
@ -0,0 +1,17 @@ |
|||||||
|
package models |
||||||
|
|
||||||
|
// ExternalAction is a link that will open as a 3rd party action.
|
||||||
|
type ExternalAction struct { |
||||||
|
// URL is the URL to load.
|
||||||
|
URL string `json:"url"` |
||||||
|
// Title is the name of this action, displayed in the modal.
|
||||||
|
Title string `json:"title"` |
||||||
|
// Description is the description of this action.
|
||||||
|
Description string `json:"description"` |
||||||
|
// Icon is the optional icon for the button associated with this action.
|
||||||
|
Icon string `json:"icon"` |
||||||
|
// Color is the optional color for the button associated with this action.
|
||||||
|
Color string `json:"color"` |
||||||
|
// OpenExternally states if the action should open a new tab/window instead of an internal modal.
|
||||||
|
OpenExternally bool `json:"openExternally"` |
||||||
|
} |
||||||
|
After Width: | Height: | Size: 8.4 KiB |
|
Before Width: | Height: | Size: 465 B After Width: | Height: | Size: 558 B |
@ -0,0 +1,86 @@ |
|||||||
|
import { h } from '/js/web_modules/preact.js'; |
||||||
|
import htm from '/js/web_modules/htm.js'; |
||||||
|
const html = htm.bind(h); |
||||||
|
|
||||||
|
export default function ExternalActionModal({ url, title, onClose }) { |
||||||
|
return html` |
||||||
|
<div class="fixed inset-0 overflow-y-auto" style="z-index: 9999"> |
||||||
|
<div |
||||||
|
class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0" |
||||||
|
> |
||||||
|
<div class="fixed inset-0 transition-opacity" aria-hidden="true"> |
||||||
|
<div |
||||||
|
onClick=${() => onClose()} |
||||||
|
class="absolute inset-0 bg-gray-900 bg-opacity-75" |
||||||
|
></div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<!-- This element is to trick the browser into centering the modal contents. --> |
||||||
|
<span |
||||||
|
class="hidden sm:inline-block sm:align-middle sm:h-screen" |
||||||
|
aria-hidden="true" |
||||||
|
>​</span |
||||||
|
> |
||||||
|
<div |
||||||
|
class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:align-middle w-screen md:max-w-2xl lg:max-w-2xl" |
||||||
|
role="dialog" |
||||||
|
aria-modal="true" |
||||||
|
aria-labelledby="modal-headline" |
||||||
|
> |
||||||
|
<div class="bg-white "> |
||||||
|
<div |
||||||
|
class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex justify-between items-center" |
||||||
|
> |
||||||
|
<h3 class="font-bold hidden md:block">${title}</h3> |
||||||
|
<span class="" onclick=${onClose}> |
||||||
|
<svg |
||||||
|
class="h-12 w-12 fill-current text-grey hover:text-grey-darkest" |
||||||
|
role="button" |
||||||
|
xmlns="http://www.w3.org/2000/svg" |
||||||
|
viewBox="0 0 20 20" |
||||||
|
> |
||||||
|
<title>Close</title> |
||||||
|
<path |
||||||
|
d="M14.348 14.849a1.2 1.2 0 0 1-1.697 0L10 11.819l-2.651 3.029a1.2 1.2 0 1 1-1.697-1.697l2.758-3.15-2.759-3.152a1.2 1.2 0 1 1 1.697-1.697L10 8.183l2.651-3.031a1.2 1.2 0 1 1 1.697 1.697l-2.758 3.152 2.758 3.15a1.2 1.2 0 0 1 0 1.698z" |
||||||
|
/> |
||||||
|
</svg> |
||||||
|
</span> |
||||||
|
</div> |
||||||
|
|
||||||
|
<!-- TODO: Show a loading spinner while the iframe loads --> |
||||||
|
<iframe |
||||||
|
style="height: 70vh" |
||||||
|
width="100%" |
||||||
|
allowpaymentrequest="true" |
||||||
|
allowfullscreen="false" |
||||||
|
sandbox="allow-same-origin allow-scripts allow-popups allow-forms" |
||||||
|
src=${url} |
||||||
|
/> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
`;
|
||||||
|
} |
||||||
|
|
||||||
|
export function ExternalActionButton({ index, action, onClick }) { |
||||||
|
const { title, icon, color = undefined } = action; |
||||||
|
const logo = |
||||||
|
icon && |
||||||
|
html` |
||||||
|
<span class="external-action-icon"><img src=${icon} alt="" /></span> |
||||||
|
`;
|
||||||
|
const bgcolor = color && { backgroundColor: `${color}` }; |
||||||
|
const handleClick = () => onClick(index); |
||||||
|
return html` |
||||||
|
<button |
||||||
|
class="external-action-button rounded-sm flex flex-row justify-center items-center overflow-hidden bg-gray-800" |
||||||
|
data-index=${index} |
||||||
|
onClick=${handleClick} |
||||||
|
style=${bgcolor} |
||||||
|
> |
||||||
|
${logo} |
||||||
|
<span class="external-action-label">${title}</span> |
||||||
|
</button> |
||||||
|
`;
|
||||||
|
} |
||||||
Loading…
Reference in new issue