mirror of
https://github.com/tabler/tabler.git
synced 2026-10-12 05:06:55 +04:00
Style the email-inbox message list with a list group (#2996)
This commit is contained in:
Paweł Kuna authored and 
GitHub committed
1 parent
b8e61dbea7
commit
d9ed9428de
5 files changed
+96
-100
No files matched your search
@@ -10,27 +10,33 @@ 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: 'info', Friends: 'warning', Family: 'success', Social: 'primary', Important: 'danger', 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 email-border border-end">
|
||||
<Offcanvas responsive="xxl" direction="start" class="h-100 file-offcanvas" tabindex="-1" id="emailSidebaroffcanvas">
|
||||
<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" class="d-none d-sm-block" modalId="new-email" />
|
||||
<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">
|
||||
<a href="#" class="nav-link text-danger fw-bold">
|
||||
<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-danger ms-auto">{mails.length}</span>
|
||||
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 ms-auto">32</span></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>
|
||||
@@ -39,25 +45,14 @@ import mails from '@data/mails.json'
|
||||
|
||||
<div class="mt-4">
|
||||
<Subheader as="h6">Labels</Subheader>
|
||||
<div class="mt-2 nav nav-vertical">
|
||||
<a href="#" class="nav-link">
|
||||
<div class="badge bg-info me-2"></div> Updates
|
||||
</a>
|
||||
<a href="#" class="nav-link">
|
||||
<div class="badge bg-warning me-2"></div> Friends
|
||||
</a>
|
||||
<a href="#" class="nav-link">
|
||||
<div class="badge bg-success me-2"></div> Family
|
||||
</a>
|
||||
<a href="#" class="nav-link">
|
||||
<div class="badge bg-primary me-2"></div> Social
|
||||
</a>
|
||||
<a href="#" class="nav-link">
|
||||
<div class="badge bg-danger me-2"></div> Important
|
||||
</a>
|
||||
<a href="#" class="nav-link">
|
||||
<div class="badge bg-purple me-2"></div> Promotions
|
||||
</a>
|
||||
<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>
|
||||
|
||||
@@ -112,12 +107,11 @@ import mails from '@data/mails.json'
|
||||
</div>
|
||||
</ButtonGroup>
|
||||
|
||||
<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">
|
||||
<span class="dropdown-header">More Options :</span>
|
||||
<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>
|
||||
@@ -125,70 +119,66 @@ import mails from '@data/mails.json'
|
||||
</div>
|
||||
</ButtonGroup>
|
||||
</div>
|
||||
|
||||
<div class="mt-3">
|
||||
<ul class="email-list">
|
||||
{
|
||||
mails && mails.length > 0 ? (
|
||||
mails.map((mail) => (
|
||||
<li>
|
||||
<div class="email-sender-info">
|
||||
<div class="checkbox-wrapper-mail">
|
||||
<div class="form-check">
|
||||
<input type="checkbox" class="form-check-input" id={`mail-${mail.id}`} />
|
||||
<label class="form-check-label" for={`mail-${mail.id}`} />
|
||||
</div>
|
||||
</div>
|
||||
<span class="star-toggle">
|
||||
<Icon name="star" />
|
||||
</span>
|
||||
<a href="#" class="email-title">
|
||||
</div>
|
||||
<div class="card-body p-0">
|
||||
<ListGroup flush hoverable>
|
||||
{
|
||||
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' : 'muted'} />
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-3 col-lg-2 text-truncate">
|
||||
<a href="#" class="text-body">
|
||||
{mail.sender}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="email-content">
|
||||
<a href="#" class="email-subject">
|
||||
{mail.subject} –
|
||||
<span>{mail.preview}</span>
|
||||
<div class="col text-truncate">
|
||||
<a href="#" class="text-body">
|
||||
{mail.subject}
|
||||
</a>
|
||||
<div class="email-date">{mail.date}</div>
|
||||
<span class="text-secondary"> – {mail.preview}</span>
|
||||
</div>
|
||||
|
||||
<div class="email-action-icons">
|
||||
<ul class="list-inline">
|
||||
<li class="list-inline-item">
|
||||
<a href="#" aria-label="Archive">
|
||||
<Icon name="archive" />
|
||||
</a>
|
||||
</li>
|
||||
<li class="list-inline-item">
|
||||
<a href="#" aria-label="Delete">
|
||||
<Icon name="trash" />
|
||||
</a>
|
||||
</li>
|
||||
<li class="list-inline-item">
|
||||
<a href="#" aria-label="Mark as read">
|
||||
<Icon name="mail-opened" class="email-action-icons-item" />
|
||||
</a>
|
||||
</li>
|
||||
<li class="list-inline-item">
|
||||
<a href="#" aria-label="Snooze">
|
||||
<Icon name="clock" />
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<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>
|
||||
</li>
|
||||
))
|
||||
) : (
|
||||
<li class="text-muted">No emails</li>
|
||||
)
|
||||
}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<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 class="text-secondary">No emails</ListGroupItem>
|
||||
)
|
||||
}
|
||||
</ListGroup>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-7 mt-1">
|
||||
Showing 1 - {mails.length} of {mails.length}
|
||||
</div>
|
||||
|
||||
Reference in new issue
Block a user