mirror of
https://github.com/tabler/tabler.git
synced 2026-10-12 05:06:55 +04:00
70 lines
3.3 KiB
Plaintext
70 lines
3.3 KiB
Plaintext
---
|
|
// Buttons for the video recorder (`pnpm run record button`): a row of buttons
|
|
// and a scripted "Save changes" flow — hover, click, `.btn-loading` for a
|
|
// moment, then a success state — driven by steps/button.json. The page works
|
|
// as a still too; the recorder only adds the cursor and the clicks.
|
|
import ScreenshotLayout from '../layouts/ScreenshotLayout.astro'
|
|
import CaptureScript from '@shared/components/CaptureScript.astro'
|
|
import Card from '@ui/Card.astro'
|
|
import CardBody from '@ui/CardBody.astro'
|
|
import CardTitle from '@ui/CardTitle.astro'
|
|
import CardSubtitle from '@ui/CardSubtitle.astro'
|
|
import Button from '@ui/Button.astro'
|
|
import ButtonList from '@ui/ButtonList.astro'
|
|
---
|
|
|
|
<ScreenshotLayout title="Button" columns={2}>
|
|
<Card>
|
|
<CardBody>
|
|
<CardTitle>Notification settings</CardTitle>
|
|
<CardSubtitle>Choose how you want to hear from us. Changes apply to all your devices.</CardSubtitle>
|
|
<div class="form-selectgroup form-selectgroup-boxes d-flex flex-column mb-4">
|
|
<label class="form-selectgroup-item flex-fill">
|
|
<input type="checkbox" class="form-selectgroup-input" checked />
|
|
<div class="form-selectgroup-label d-flex align-items-center p-3">
|
|
<div class="me-3"><span class="form-selectgroup-check"></span></div>
|
|
<div>
|
|
<span class="form-selectgroup-title strong mb-1">Email</span>
|
|
<span class="d-block text-secondary">Weekly summary and account alerts</span>
|
|
</div>
|
|
</div>
|
|
</label>
|
|
<label class="form-selectgroup-item flex-fill">
|
|
<input type="checkbox" class="form-selectgroup-input" />
|
|
<div class="form-selectgroup-label d-flex align-items-center p-3">
|
|
<div class="me-3"><span class="form-selectgroup-check"></span></div>
|
|
<div>
|
|
<span class="form-selectgroup-title strong mb-1">Push</span>
|
|
<span class="d-block text-secondary">Mentions and direct messages</span>
|
|
</div>
|
|
</div>
|
|
</label>
|
|
</div>
|
|
<ButtonList class="justify-content-end">
|
|
<Button text="Cancel" variant="ghost" color="secondary" />
|
|
<Button id="save" text="Save changes" color="primary" icon="device-floppy" />
|
|
</ButtonList>
|
|
<CaptureScript>
|
|
<!-- BEGIN SCRIPT OF SAVE BUTTON -->
|
|
<script is:inline>
|
|
/*
|
|
Fakes a request behind the save button: 1.5 s of .btn-loading, then a success state.
|
|
*/
|
|
const save = document.getElementById('save')
|
|
save.addEventListener('click', () => {
|
|
save.classList.add('btn-loading')
|
|
setTimeout(() => {
|
|
save.classList.remove('btn-loading')
|
|
save.classList.replace('btn-primary', 'btn-success')
|
|
save.querySelector('.icon')?.remove()
|
|
save.insertAdjacentHTML('afterbegin', '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="icon"><path d="M5 12l5 5l10 -10" /></svg>')
|
|
save.lastChild.textContent = 'Saved'
|
|
}, 1500)
|
|
})
|
|
</script>
|
|
<!-- END SCRIPT OF SAVE BUTTON -->
|
|
</CaptureScript>
|
|
</CardBody>
|
|
</Card>
|
|
</ScreenshotLayout>
|