Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2025-12-21 17:34:25 +04:00
Code Issues Projects Releases Wiki Activity

new emails page

Browse Source
This commit is contained in:
codecalm
2025-08-28 23:32:04 +02:00
parent bddacee9ad
commit 0ee3c0a3b4
7 changed files with 451 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

193
preview/pages/email-inbox.html Normal file
View File

@@ -0,0 +1,193 @@
---
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 }} &nbsp;–&nbsp;
<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" %}

27
preview/pages/modals.html
View File

@@ -4,7 +4,7 @@ page-header: Modals
page-menu: base.modals
layout: default
permalink: modals.html
page-libs: [signature_pad]
page-libs: [signature_pad, hugerte]
---
<div class="card">
@@ -22,49 +22,54 @@ page-libs: [signature_pad]
<a href="#modal-danger" class="nav-link">Danger modal</a>
<a href="#modal-team" class="nav-link">Modal with simple form</a>
<a href="#modal-signature" class="nav-link">Modal with signature form</a>
<a href="#modal-new-email" class="nav-link">New email modal</a>
</div>
</div>
<div class="col">
<div class="space-y-6">
<div>
<h3>Simple modal</h3>
{% include "ui/modal.html" class="position-relative rounded d-block show bg-surface-backdrop py-6 w-auto h-auto" modal-id="simple" inline %}
{% include "ui/modal.html" class="position-relative rounded d-block show bg-surface-backdrop py-6 w-auto h-auto z-0" modal-id="simple" inline %}
</div>
<div>
<h3>Large modal</h3>
{% include "ui/modal.html" class="position-relative rounded d-block show bg-surface-backdrop py-6 w-auto h-auto" modal-id="large" size="lg" inline %}
{% include "ui/modal.html" class="position-relative rounded d-block show bg-surface-backdrop py-6 w-auto h-auto z-0" modal-id="large" size="lg" inline %}
</div>
<div>
<h3>Small modal</h3>
{% include "ui/modal.html" class="position-relative rounded d-block show bg-surface-backdrop py-6 w-auto h-auto" modal-id="small" size="sm" inline %}
{% include "ui/modal.html" class="position-relative rounded d-block show bg-surface-backdrop py-6 w-auto h-auto z-0" modal-id="small" size="sm" inline %}
</div>
<div>
<h3>Full width modal</h3>
{% include "ui/modal.html" class="position-relative rounded d-block show bg-surface-backdrop py-6 w-auto h-auto" modal-id="full-width" size="full-width" inline %}
{% include "ui/modal.html" class="position-relative rounded d-block show bg-surface-backdrop py-6 w-auto h-auto z-0" modal-id="full-width" size="full-width" inline %}
</div>
<div>
<h3>Scrollable modal</h3>
{% include "ui/modal.html" class="position-relative rounded d-block show bg-surface-backdrop py-6 w-auto h-auto" modal-id="scrollable" scrollable=true style="max-height: 30rem" inline %}
{% include "ui/modal.html" class="position-relative rounded d-block show bg-surface-backdrop py-6 w-auto h-auto z-0" modal-id="scrollable" scrollable=true style="max-height: 30rem" inline %}
</div>
<div>
<h3>Modal with form</h3>
{% include "ui/modal.html" class="position-relative rounded d-block show bg-surface-backdrop py-6 w-auto h-auto" modal-id="report" size="lg" inline %}
{% include "ui/modal.html" class="position-relative rounded d-block show bg-surface-backdrop py-6 w-auto h-auto z-0" modal-id="report" size="lg" inline %}
</div>
<div>
<h3>Success modal</h3>
{% include "ui/modal.html" class="position-relative rounded d-block show bg-surface-backdrop py-6 w-auto h-auto" modal-id="success" size="sm" inline %}
{% include "ui/modal.html" class="position-relative rounded d-block show bg-surface-backdrop py-6 w-auto h-auto z-0" modal-id="success" size="sm" inline %}
</div>
<div>
<h3>Danger modal</h3>
{% include "ui/modal.html" class="position-relative rounded d-block show bg-surface-backdrop py-6 w-auto h-auto" modal-id="danger" size="sm" inline %}
{% include "ui/modal.html" class="position-relative rounded d-block show bg-surface-backdrop py-6 w-auto h-auto z-0" modal-id="danger" size="sm" inline %}
</div>
<div>
<h3>Modal with simple form</h3>
{% include "ui/modal.html" class="position-relative rounded d-block show bg-surface-backdrop py-6 w-auto h-auto" modal-id="team" inline %}
{% include "ui/modal.html" class="position-relative rounded d-block show bg-surface-backdrop py-6 w-auto h-auto z-0" modal-id="team" inline %}
</div>
<div>
<h3>Modal with signature form</h3>
{% include "ui/modal.html" class="position-relative rounded d-block show bg-surface-backdrop py-6 w-auto h-auto" modal-id="signature" inline %}
{% include "ui/modal.html" class="position-relative rounded d-block show bg-surface-backdrop py-6 w-auto h-auto z-0" modal-id="signature" inline %}
</div>
<div>
<h3>New email modal</h3>
{% include "ui/modal.html" class="position-relative rounded d-block show bg-surface-backdrop py-6 w-auto h-auto z-0" modal-id="new-email" inline %}
</div>
</div>
</div>