mirror of
https://github.com/tabler/tabler.git
synced 2026-10-12 05:06:55 +04:00
204 lines
9.1 KiB
Plaintext
204 lines
9.1 KiB
Plaintext
---
|
||
import Empty from '@ui/Empty.astro'
|
||
import Subheader from '@ui/Subheader.astro'
|
||
import ButtonGroup from '@ui/ButtonGroup.astro'
|
||
import DefaultLayout from '@shared/layouts/DefaultLayout.astro'
|
||
import Button from '@ui/Button.astro'
|
||
import Icon from '@ui/Icon.astro'
|
||
import Card from '@ui/Card.astro'
|
||
import Offcanvas from '@ui/Offcanvas.astro'
|
||
import Progress from '@ui/Progress.astro'
|
||
import Modal from '@shared/components/modals/Modal.astro'
|
||
import CaptureModal from '@shared/components/CaptureModal.astro'
|
||
import NewEmailModalContent from '@shared/components/modals/NewEmailModalContent.astro'
|
||
import ListGroup from '@ui/ListGroup.astro'
|
||
import ListGroupItem from '@ui/ListGroupItem.astro'
|
||
import { formatShortDate } from '@shared/lib/date-format'
|
||
import mails from '@data/mails.json'
|
||
|
||
// Label colors shared by the folder sidebar and the dots in the message list.
|
||
const labelColors: Record<string, string> = { Updates: 'azure', Friends: 'orange', Family: 'teal', Social: 'indigo', Important: 'pink', Promotions: 'purple' }
|
||
---
|
||
|
||
<DefaultLayout title="Email inbox" pageHeader="Inbox" pageMenu="extra.email-inbox" pageLibs={['hugerte']}>
|
||
<Card>
|
||
<div class="row g-0">
|
||
<div class="col-xxl-3 border-end">
|
||
<Offcanvas responsive="xxl" direction="start" class="h-100" tabindex="-1" id="emailSidebaroffcanvas">
|
||
<div class="card-body h-100">
|
||
<div>
|
||
<Button icon="pencil" text="Compose" color="primary" block class="d-none d-sm-block" modalId="new-email" />
|
||
</div>
|
||
|
||
<div class="mt-3 nav nav-vertical nav-pills">
|
||
<a href="#" class="nav-link active">
|
||
<Icon name="inbox" class="me-2" />
|
||
Inbox<span class="badge bg-primary-lt ms-auto">{mails.length}</span>
|
||
</a>
|
||
<a href="#" class="nav-link"><Icon name="star" class="me-2" />Starred</a>
|
||
<a href="#" class="nav-link"><Icon name="clock" class="me-2" />Snoozed</a>
|
||
<a href="#" class="nav-link"><Icon name="file" class="me-2" />Draft<span class="badge bg-info-lt ms-auto">32</span></a>
|
||
<a href="#" class="nav-link"><Icon name="mail-up" class="me-2" />Sent mail</a>
|
||
<a href="#" class="nav-link"><Icon name="trash" class="me-2" />Trash</a>
|
||
<a href="#" class="nav-link"><Icon name="tag" class="me-2" />Important</a>
|
||
<a href="#" class="nav-link"><Icon name="alert-octagon" class="me-2" />Spam</a>
|
||
</div>
|
||
|
||
<div class="mt-4">
|
||
<Subheader as="h6">Labels</Subheader>
|
||
<div class="mt-2 nav nav-vertical nav-pills">
|
||
{
|
||
Object.entries(labelColors).map(([label, color]) => (
|
||
<a href="#" class="nav-link">
|
||
<span class={`badge bg-${color} me-2`} /> {label}
|
||
</a>
|
||
))
|
||
}
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mt-5">
|
||
<Subheader as="h6">Storage</Subheader>
|
||
<Progress value={46} class="my-2" />
|
||
|
||
<p class="text-muted mb-0">7.02 GB (46%) of 15 GB used</p>
|
||
</div>
|
||
</div>
|
||
</Offcanvas>
|
||
</div>
|
||
|
||
<div class="col-xxl-9">
|
||
<div class="card-body">
|
||
<div class="d-flex flex-wrap align-items-center gap-2">
|
||
<div class="d-xxl-none d-inline-flex">
|
||
<button class="btn btn-icon" type="button" data-bs-toggle="offcanvas" data-bs-target="#emailSidebaroffcanvas" aria-controls="emailSidebaroffcanvas" aria-label="Show folders">
|
||
<Icon name="menu-2" />
|
||
</button>
|
||
</div>
|
||
|
||
<ButtonGroup>
|
||
<Button icon="archive" iconOnly text="Archive" />
|
||
<Button icon="alert-octagon" iconOnly text="Report spam" />
|
||
<Button icon="trash" iconOnly text="Delete" />
|
||
</ButtonGroup>
|
||
|
||
<ButtonGroup>
|
||
<button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" aria-label="Move to folder">
|
||
<Icon name="folder" />
|
||
</button>
|
||
<div class="dropdown-menu">
|
||
<span class="dropdown-header">Move to</span>
|
||
<a class="dropdown-item" href="#">Social</a>
|
||
<a class="dropdown-item" href="#">Promotions</a>
|
||
<a class="dropdown-item" href="#">Updates</a>
|
||
<a class="dropdown-item" href="#">Forums</a>
|
||
</div>
|
||
</ButtonGroup>
|
||
|
||
<ButtonGroup>
|
||
<button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" aria-label="Add label">
|
||
<Icon name="tag" />
|
||
</button>
|
||
<div class="dropdown-menu">
|
||
<span class="dropdown-header">Label as</span>
|
||
<a class="dropdown-item" href="#">Updates</a>
|
||
<a class="dropdown-item" href="#">Social</a>
|
||
<a class="dropdown-item" href="#">Promotions</a>
|
||
<a class="dropdown-item" href="#">Forums</a>
|
||
</div>
|
||
</ButtonGroup>
|
||
|
||
<ButtonGroup class="ms-auto">
|
||
<button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
|
||
<Icon name="dots" /> More
|
||
</button>
|
||
<div class="dropdown-menu dropdown-menu-end">
|
||
<a class="dropdown-item" href="#">Mark as unread</a>
|
||
<a class="dropdown-item" href="#">Add to tasks</a>
|
||
<a class="dropdown-item" href="#">Add star</a>
|
||
<a class="dropdown-item" href="#">Mute</a>
|
||
</div>
|
||
</ButtonGroup>
|
||
</div>
|
||
</div>
|
||
<ListGroup flush hoverable class="card-list-group">
|
||
{
|
||
mails.length > 0 ? (
|
||
mails.map((mail) => (
|
||
<ListGroupItem>
|
||
<div class="row align-items-center g-2">
|
||
<div class="col-auto">
|
||
<input type="checkbox" class="form-check-input m-0" aria-label={`Select "${mail.subject}"`} />
|
||
</div>
|
||
<div class="col-auto">
|
||
<a href="#" class:list={['list-group-item-actions', mail.starred && 'show']} aria-label={mail.starred ? 'Remove star' : 'Add star'}>
|
||
<Icon name="star" color={mail.starred ? 'yellow' : 'secondary'} />
|
||
</a>
|
||
</div>
|
||
<div class="col-3 col-lg-2 text-truncate">
|
||
<a href="#" class="text-body">
|
||
{mail.sender}
|
||
</a>
|
||
</div>
|
||
<div class="col text-truncate">
|
||
<a href="#" class="text-body">
|
||
{mail.subject}
|
||
</a>
|
||
<span class="text-secondary"> – {mail.preview}</span>
|
||
</div>
|
||
<div class="col-auto d-none d-lg-block">
|
||
{mail.labels.map((label) => (
|
||
<span class={`badge bg-${labelColors[label] ?? 'secondary'}`} title={label} aria-label={label} />
|
||
))}
|
||
</div>
|
||
<div class="col-auto d-none d-md-block">
|
||
<div class="list-group-item-actions d-flex gap-2">
|
||
<a href="#" class="text-secondary" aria-label="Archive">
|
||
<Icon name="archive" />
|
||
</a>
|
||
<a href="#" class="text-secondary" aria-label="Delete">
|
||
<Icon name="trash" />
|
||
</a>
|
||
<a href="#" class="text-secondary" aria-label="Mark as read">
|
||
<Icon name="mail-opened" />
|
||
</a>
|
||
<a href="#" class="text-secondary" aria-label="Snooze">
|
||
<Icon name="clock" />
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<div class="col-auto text-secondary text-end">{formatShortDate(new Date(mail.date))}</div>
|
||
</div>
|
||
</ListGroupItem>
|
||
))
|
||
) : (
|
||
<ListGroupItem>
|
||
<Empty title="No emails" />
|
||
</ListGroupItem>
|
||
)
|
||
}
|
||
</ListGroup>
|
||
<div class="card-footer">
|
||
<div class="row align-items-center">
|
||
<div class="col-7 mt-1">
|
||
Showing 1 - {mails.length} of {mails.length}
|
||
</div>
|
||
<div class="col-5">
|
||
<ButtonGroup class="float-end">
|
||
<button type="button" class="btn btn-icon" aria-label="Previous page"><Icon name="chevron-left" /></button>
|
||
<button type="button" class="btn btn-icon" aria-label="Next page"><Icon name="chevron-right" /></button>
|
||
</ButtonGroup>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</Card>
|
||
|
||
<CaptureModal>
|
||
<Modal modalId="new-email">
|
||
<NewEmailModalContent />
|
||
</Modal>
|
||
</CaptureModal>
|
||
</DefaultLayout>
|