mirror of
https://github.com/tabler/tabler.git
synced 2026-08-07 20:02:23 +04:00
Paweł Kuna
202 lines
7.0 KiB
Plaintext
202 lines
7.0 KiB
Plaintext
---
|
||
// Port of preview/pages/email-inbox.html.
|
||
import DefaultLayout from '@shared/layouts/DefaultLayout.astro';
|
||
import Button from '@shared/components/Button.astro';
|
||
import Icon from '@shared/components/Icon.astro';
|
||
import Progress from '@shared/components/ui/Progress.astro';
|
||
import Modal from '@shared/components/modals/Modal.astro';
|
||
import NewEmailModalContent from '@shared/components/modals/NewEmailModalContent.astro';
|
||
import mails from '@data/mails.json';
|
||
---
|
||
|
||
<DefaultLayout
|
||
title="Email inbox"
|
||
pageHeader="Inbox"
|
||
pageMenu="extra.email-inbox"
|
||
pageLibs={['hugerte']}
|
||
>
|
||
<div class="card">
|
||
<div class="row g-0">
|
||
<div class="col-xxl-3 email-border border-end">
|
||
<div class="offcanvas-xxl offcanvas-start h-100 file-offcanvas" 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" />
|
||
</div>
|
||
|
||
<div class="mt-3 nav nav-vertical">
|
||
<a href="#" class="nav-link text-danger fw-bold">
|
||
<Icon name="inbox" class="me-2" />
|
||
Inbox<span class="badge badge-danger 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 badge-info 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">
|
||
<h6 class="subheader">Labels</h6>
|
||
<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>
|
||
</div>
|
||
|
||
<div class="mt-5">
|
||
<h6 class="subheader">Storage</h6>
|
||
<Progress value={46} class="my-2" />
|
||
|
||
<p class="text-muted font-13 mb-0">7.02 GB (46%) of 15 GB used</p>
|
||
</div>
|
||
|
||
|
||
</div>
|
||
</div>
|
||
</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">
|
||
<Icon name="menu-2" />
|
||
</button>
|
||
</div>
|
||
|
||
<div class="btn-group">
|
||
<Button icon="archive" iconOnly />
|
||
<Button icon="alert-octagon" iconOnly />
|
||
<Button icon="trash" iconOnly />
|
||
</div>
|
||
|
||
<div class="btn-group">
|
||
<button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
|
||
<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>
|
||
</div>
|
||
|
||
<div class="btn-group">
|
||
<button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
|
||
<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>
|
||
</div>
|
||
|
||
<div class="btn-group">
|
||
<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>
|
||
<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>
|
||
</div>
|
||
</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}`}></label>
|
||
</div>
|
||
</div>
|
||
<span class="star-toggle"><Icon name="star" /></span>
|
||
<a href="#" class="email-title">{mail.sender}</a>
|
||
</div>
|
||
|
||
<div class="email-content">
|
||
<a href="#" class="email-subject">{mail.subject} –
|
||
<span>{mail.preview}</span>
|
||
</a>
|
||
<div class="email-date">{mail.date}</div>
|
||
</div>
|
||
|
||
<div class="email-action-icons">
|
||
<ul class="list-inline">
|
||
<li class="list-inline-item">
|
||
<a href="#"><Icon name="archive" /></a>
|
||
</li>
|
||
<li class="list-inline-item">
|
||
<a href="#"><Icon name="trash" /></a>
|
||
</li>
|
||
<li class="list-inline-item">
|
||
<a href="#">
|
||
<Icon name="mail-opened" class="email-action-icons-item" />
|
||
</a>
|
||
</li>
|
||
<li class="list-inline-item">
|
||
<a href="#"><Icon name="clock" /></a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</li>
|
||
))
|
||
) : (
|
||
<li class="text-muted">No emails</li>
|
||
)}
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="row">
|
||
<div class="col-7 mt-1">
|
||
Showing 1 - {mails.length} of {mails.length}
|
||
</div> <!-- end col-->
|
||
<div class="col-5">
|
||
<div class="btn-group float-end">
|
||
<button type="button" class="btn btn-icon"><Icon name="chevron-left" /></button>
|
||
<button type="button" class="btn btn-icon"><Icon name="chevron-right" /></button>
|
||
</div>
|
||
</div> <!-- end col-->
|
||
</div> <!-- end row-->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<Modal modalId="new-email">
|
||
<NewEmailModalContent />
|
||
</Modal>
|
||
</DefaultLayout>
|