Update dialog
This commit is contained in:
Korbs
parent
39a32be329
commit
1c322cd7bd
1 changed files with 143 additions and 19 deletions
160
src/Dialog.astro
160
src/Dialog.astro
|
|
@ -2,39 +2,163 @@
|
|||
// Properties
|
||||
const {
|
||||
Name,
|
||||
Title = 'Dialog Title',
|
||||
Description = 'Description',
|
||||
Title = "Dialog Title",
|
||||
Description = "Description",
|
||||
CloseButton = true,
|
||||
QuestionTooltip = false, // Requires Astro Tooltip: https://code.juliancataldo.com/component/astro-tooltips/#installation
|
||||
Actions = false,
|
||||
BlurryBackdrop = true
|
||||
} = Astro.props
|
||||
BlurryBackdrop = true,
|
||||
} = Astro.props;
|
||||
---
|
||||
|
||||
<div id={Name} class="fl-dialog-backdrop"></div>
|
||||
<div id={Name + '-backdrop'} class="fl-dialog-backdrop"></div>
|
||||
<div id={Name} class="fl-dialog">
|
||||
<div class="fl-dialog-header">
|
||||
<div class="fl-dialog-header-start">
|
||||
<h2>{Title}</h2>
|
||||
<p>{Description}</p>
|
||||
</div>
|
||||
<div class="fl-dialog-header-end">
|
||||
{QuestionTooltip ?
|
||||
<button title={QuestionTooltip}><svg width="24px" height="24px" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="#000000"><path d="M7.90039 8.07954C7.90039 3.30678 15.4004 3.30682 15.4004 8.07955C15.4004 11.4886 11.9913 10.8067 11.9913 14.8976" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M12 19.01L12.01 18.9989" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg></button>
|
||||
:
|
||||
null
|
||||
{
|
||||
QuestionTooltip ? (
|
||||
<button title={QuestionTooltip}>
|
||||
<svg
|
||||
width="24px"
|
||||
height="24px"
|
||||
stroke-width="1.5"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
color="#000000"
|
||||
>
|
||||
<>
|
||||
<path
|
||||
d="M7.90039 8.07954C7.90039 3.30678 15.4004 3.30682 15.4004 8.07955C15.4004 11.4886 11.9913 10.8067 11.9913 14.8976"
|
||||
stroke="#000000"
|
||||
stroke-width="1.5"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M12 19.01L12.01 18.9989"
|
||||
stroke="#000000"
|
||||
stroke-width="1.5"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</>
|
||||
</svg>
|
||||
</button>
|
||||
) : null
|
||||
}
|
||||
{
|
||||
CloseButton ? (
|
||||
<button onclick={CloseButton}>
|
||||
<svg
|
||||
width="24px"
|
||||
height="24px"
|
||||
stroke-width="1.5"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
color="#000000"
|
||||
>
|
||||
<path
|
||||
d="M6.75827 17.2426L12.0009 12M17.2435 6.75736L12.0009 12M12.0009 12L6.75827 6.75736M12.0009 12L17.2435 17.2426"
|
||||
stroke="#FFF"
|
||||
stroke-width="1.5"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
) : null
|
||||
}
|
||||
{CloseButton ? <button><svg width="24px" height="24px" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="#000000"><path d="M6.75827 17.2426L12.0009 12M17.2435 6.75736L12.0009 12M12.0009 12L6.75827 6.75736M12.0009 12L17.2435 17.2426" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg></button> : null}
|
||||
</div>
|
||||
</div>
|
||||
<div class="fl-dialog-content">
|
||||
<slot/>
|
||||
<slot />
|
||||
</div>
|
||||
{Actions ?
|
||||
<div class="fl-dialog-actions">
|
||||
<slot name="actions"/>
|
||||
</div>
|
||||
:
|
||||
null
|
||||
{
|
||||
Actions ? (
|
||||
<div class="fl-dialog-actions">
|
||||
<slot name="actions" />
|
||||
</div>
|
||||
) : null
|
||||
}
|
||||
</div>
|
||||
|
||||
<style lang="scss" is:inline>
|
||||
.fl-dialog-backdrop {
|
||||
position: fixed;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
backdrop-filter: blur(10px) brightness(0.8) contrast(0.8);
|
||||
z-index: 1;
|
||||
display: none;
|
||||
}
|
||||
.fl-dialog {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
z-index: 2;
|
||||
background: black;
|
||||
border-radius: 12px;
|
||||
border: 1px #3e3e3e solid;
|
||||
max-width: 720px;
|
||||
display: none;
|
||||
.fl-dialog-header {
|
||||
border-radius: 12px 12px 0px 0px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 12px 24px;
|
||||
* {margin: 0px}
|
||||
p {
|
||||
color: gray;
|
||||
}
|
||||
button {
|
||||
background: transparent;
|
||||
border-radius: 3rem;
|
||||
border: none;
|
||||
aspect-ratio: 1;
|
||||
&:hover {
|
||||
background: #1e1e1e;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
.fl-dialog-content {
|
||||
padding: 12px 24px;
|
||||
}
|
||||
.fl-dialog-actions {
|
||||
border-radius: 0px 0px 12px 12px;
|
||||
padding: 12px 24px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 6px;
|
||||
a, button {
|
||||
color: black;
|
||||
background: white;
|
||||
border: none;
|
||||
font-size: 16px;
|
||||
border-radius: 4px;
|
||||
padding: 6px 12px;
|
||||
&:hover {
|
||||
filter: brightness(0.6);
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.fl-secondary-btn {
|
||||
color: white;
|
||||
background: transparent;
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
filter: brightness(0.6);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in a new issue