mirror of
https://github.com/tabler/tabler.git
synced 2025-12-21 17:34:25 +04:00
193 lines
6.9 KiB
HTML
193 lines
6.9 KiB
HTML
---
|
||
title: Email inbox
|
||
page-header: Inbox
|
||
page-menu: extra.email-inbox
|
||
layout: default
|
||
permalink: email-inbox.html
|
||
page-libs: [ 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>
|
||
{% include "ui/button.html" icon="pencil" text="Compose" color="primary" class="d-none d-sm-block"
|
||
modal-id="new-email" %}
|
||
</div>
|
||
|
||
<div class="mt-3 nav nav-vertical">
|
||
<a href="#" class="nav-link text-danger fw-bold">
|
||
{% include "ui/icon.html" icon="inbox" class="me-2" %}
|
||
Inbox<span class="badge badge-danger ms-auto">{{ mails | size }}</span>
|
||
</a>
|
||
<a href="#" class="nav-link">{% include "ui/icon.html" icon="star" class="me-2" %}Starred</a>
|
||
<a href="#" class="nav-link">{% include "ui/icon.html" icon="clock" class="me-2" %}Snoozed</a>
|
||
<a href="#" class="nav-link ">{% include "ui/icon.html" icon="file" class="me-2" %}Draft<span class="badge badge-info ms-auto">32</span></a>
|
||
<a href="#" class="nav-link">{% include "ui/icon.html" icon="mail-up" class="me-2" %}Sent Mail</a>
|
||
<a href="#" class="nav-link">{% include "ui/icon.html" icon="trash" class="me-2" %}Trash</a>
|
||
<a href="#" class="nav-link">{% include "ui/icon.html" icon="tag" class="me-2" %}Important</a>
|
||
<a href="#" class="nav-link">{% include "ui/icon.html" icon="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>
|
||
{% include "ui/progress.html" value=46 max=100 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">
|
||
{% include "ui/icon.html" icon="menu-2" %}
|
||
</button>
|
||
</div>
|
||
|
||
<div class="btn-group">
|
||
{% include "ui/button.html" icon="archive" icon-only=true %}
|
||
{% include "ui/button.html" icon="alert-octagon" icon-only=true %}
|
||
{% include "ui/button.html" icon="trash" icon-only=true %}
|
||
</div>
|
||
|
||
<div class="btn-group">
|
||
<button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
|
||
{% include "ui/icon.html" icon="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">
|
||
{% include "ui/icon.html" icon="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">
|
||
{% include "ui/icon.html" icon="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">
|
||
{% if mails and mails.size > 0 %}
|
||
{% for mail in mails %}
|
||
<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">{% include "ui/icon.html" icon="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="#">{% include "ui/icon.html" icon="archive" %}</a>
|
||
</li>
|
||
<li class="list-inline-item">
|
||
<a href="#">{% include "ui/icon.html" icon="trash" %}</a>
|
||
</li>
|
||
<li class="list-inline-item">
|
||
<a href="#">
|
||
{% include "ui/icon.html" icon="mail-opened" class="email-action-icons-item" %}
|
||
</a>
|
||
</li>
|
||
<li class="list-inline-item">
|
||
<a href="#">{% include "ui/icon.html" icon="clock" %}</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</li>
|
||
{% endfor %}
|
||
{% else %}
|
||
<li class="text-muted">No emails</li>
|
||
{% endif %}
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="row">
|
||
<div class="col-7 mt-1">
|
||
Showing 1 - {{ mails | size }} of {{ mails | size }}
|
||
</div> <!-- end col-->
|
||
<div class="col-5">
|
||
<div class="btn-group float-end">
|
||
<button type="button" class="btn btn-icon">{% include "ui/icon.html" icon="chevron-left"
|
||
%}</button>
|
||
<button type="button" class="btn btn-icon">{% include "ui/icon.html" icon="chevron-right"
|
||
%}</button>
|
||
</div>
|
||
</div> <!-- end col-->
|
||
</div> <!-- end row-->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{% include "ui/modal.html" modal-id="new-email" %} |