MinPluto/Polestar
1
Fork 0
Code Issues Pull requests Activity

Update dialog

Browse source
This commit is contained in:
Korbs 2024-08-22 03:42:24 -04:00
parent 39a32be329
commit 1c322cd7bd
1 changed files with 143 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

162
src/Dialog.astro
View file

@ -2,39 +2,163 @@
// Properties // Properties
const { const {
Name, Name,
Title = 'Dialog Title', Title = "Dialog Title",
Description = 'Description', Description = "Description",
CloseButton = true, CloseButton = true,
QuestionTooltip = false, // Requires Astro Tooltip: https://code.juliancataldo.com/component/astro-tooltips/#installation QuestionTooltip = false, // Requires Astro Tooltip: https://code.juliancataldo.com/component/astro-tooltips/#installation
Actions = false, Actions = false,
BlurryBackdrop = true BlurryBackdrop = true,
} = Astro.props } = 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 id={Name} class="fl-dialog">
<div class="fl-dialog-header"> <div class="fl-dialog-header">
<div class="fl-dialog-header-start"> <div class="fl-dialog-header-start">
<h2>{Title}</h2> <h2>{Title}</h2>
<p>{Description}</p>
</div> </div>
<div class="fl-dialog-header-end"> <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> QuestionTooltip ? (
: <button title={QuestionTooltip}>
null <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> </div>
<div class="fl-dialog-content"> <div class="fl-dialog-content">
<slot/> <slot />
</div> </div>
{Actions ? {
<div class="fl-dialog-actions"> Actions ? (
<slot name="actions"/> <div class="fl-dialog-actions">
</div> <slot name="actions" />
: </div>
null ) : null
} }
</div> </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>