mirror of
https://github.com/tabler/tabler.git
synced 2025-12-21 17:34:25 +04:00
new emails page
This commit is contained in:
codecalm
@@ -285,9 +285,9 @@ $gray-colors: (
|
|||||||
$theme-colors: map-merge($theme-colors, map-merge($extra-colors, ()));
|
$theme-colors: map-merge($theme-colors, map-merge($extra-colors, ()));
|
||||||
|
|
||||||
// BACKDROPS
|
// BACKDROPS
|
||||||
$backdrop-opacity: 24% !default;
|
$backdrop-opacity: .32 !default;
|
||||||
$backdrop-blur: 4px !default;
|
$backdrop-blur: 4px !default;
|
||||||
$backdrop-bg: var(--#{$prefix}gray-800) !default;
|
$backdrop-bg: light-dark(var(--#{$prefix}gray-800), var(--#{$prefix}black)) !default;
|
||||||
$backdrops: (
|
$backdrops: (
|
||||||
dark: color-mix(in srgb, var(--#{$prefix}color-dark), transparent var(--#{$prefix}backdrop-opacity)),
|
dark: color-mix(in srgb, var(--#{$prefix}color-dark), transparent var(--#{$prefix}backdrop-opacity)),
|
||||||
light: color-mix(in srgb, var(--#{$prefix}color-light), transparent var(--#{$prefix}backdrop-opacity)),
|
light: color-mix(in srgb, var(--#{$prefix}color-light), transparent var(--#{$prefix}backdrop-opacity)),
|
||||||
@@ -749,9 +749,9 @@ $list-group-item-padding-y: $card-cap-padding-y !default;
|
|||||||
$list-group-item-padding-x: $card-cap-padding-x !default;
|
$list-group-item-padding-x: $card-cap-padding-x !default;
|
||||||
|
|
||||||
// Modals
|
// Modals
|
||||||
$modal-backdrop-opacity: 0.24 !default;
|
$modal-backdrop-opacity: $backdrop-opacity !default;
|
||||||
$modal-backdrop-bg: $backdrop-bg !default;
|
$modal-backdrop-bg: $backdrop-bg !default;
|
||||||
$modal-backdrop-blur: 4px !default;
|
$modal-backdrop-blur: $backdrop-blur !default;
|
||||||
|
|
||||||
$modal-fade-transform: translate(0, -1rem) !default;
|
$modal-fade-transform: translate(0, -1rem) !default;
|
||||||
|
|
||||||
|
|||||||
193
preview/pages/email-inbox.html
Normal file
193
preview/pages/email-inbox.html
Normal 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 }} –
|
||||||
|
<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" %}
|
||||||
@@ -4,7 +4,7 @@ page-header: Modals
|
|||||||
page-menu: base.modals
|
page-menu: base.modals
|
||||||
layout: default
|
layout: default
|
||||||
permalink: modals.html
|
permalink: modals.html
|
||||||
page-libs: [signature_pad]
|
page-libs: [signature_pad, hugerte]
|
||||||
---
|
---
|
||||||
|
|
||||||
<div class="card">
|
<div class="card">
|
||||||
@@ -22,49 +22,54 @@ page-libs: [signature_pad]
|
|||||||
<a href="#modal-danger" class="nav-link">Danger modal</a>
|
<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-team" class="nav-link">Modal with simple form</a>
|
||||||
<a href="#modal-signature" class="nav-link">Modal with signature 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>
|
</div>
|
||||||
<div class="col">
|
<div class="col">
|
||||||
<div class="space-y-6">
|
<div class="space-y-6">
|
||||||
<div>
|
<div>
|
||||||
<h3>Simple modal</h3>
|
<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>
|
||||||
<div>
|
<div>
|
||||||
<h3>Large modal</h3>
|
<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>
|
||||||
<div>
|
<div>
|
||||||
<h3>Small modal</h3>
|
<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>
|
||||||
<div>
|
<div>
|
||||||
<h3>Full width modal</h3>
|
<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>
|
||||||
<div>
|
<div>
|
||||||
<h3>Scrollable modal</h3>
|
<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>
|
||||||
<div>
|
<div>
|
||||||
<h3>Modal with form</h3>
|
<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>
|
||||||
<div>
|
<div>
|
||||||
<h3>Success modal</h3>
|
<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>
|
||||||
<div>
|
<div>
|
||||||
<h3>Danger modal</h3>
|
<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>
|
||||||
<div>
|
<div>
|
||||||
<h3>Modal with simple form</h3>
|
<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>
|
||||||
<div>
|
<div>
|
||||||
<h3>Modal with signature form</h3>
|
<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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
202
shared/data/mails.json
Normal file
202
shared/data/mails.json
Normal file
@@ -0,0 +1,202 @@
|
|||||||
|
[
|
||||||
|
{
|
||||||
|
"id": "e1",
|
||||||
|
"sender": "Lucas, me (4)",
|
||||||
|
"senderEmail": "lucas@example.com",
|
||||||
|
"subject": "Direct message on Twitter",
|
||||||
|
"preview": "@LucasKriebel - Very cool :) You have a new direct message. Open Twitter to read and reply now.",
|
||||||
|
"labels": ["Social"],
|
||||||
|
"starred": true,
|
||||||
|
"date": "2025-08-27T11:49:00Z"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "e2",
|
||||||
|
"sender": "Acme Support",
|
||||||
|
"senderEmail": "support@acme.io",
|
||||||
|
"subject": "Your ticket #48213 has been updated",
|
||||||
|
"preview": "Hi, we've added a detailed note to your request regarding billing. Please review the update and let us know if anything looks off.",
|
||||||
|
"labels": ["Updates"],
|
||||||
|
"starred": false,
|
||||||
|
"date": "2025-08-26T09:15:00Z"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "e3",
|
||||||
|
"sender": "Marketing Weekly",
|
||||||
|
"senderEmail": "news@marketingweekly.com",
|
||||||
|
"subject": "10 growth tactics you can try today",
|
||||||
|
"preview": "We curated a list of actionable ideas from top marketers to boost acquisition, retention, and activation this quarter.",
|
||||||
|
"labels": ["Promotions"],
|
||||||
|
"starred": false,
|
||||||
|
"date": "2025-08-25T17:02:00Z"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "e4",
|
||||||
|
"sender": "GitHub",
|
||||||
|
"senderEmail": "noreply@github.com",
|
||||||
|
"subject": "[tabler] New issue assigned to you",
|
||||||
|
"preview": "Issue #3294: Update email inbox page to use data file. Please triage, add labels, and provide an estimate.",
|
||||||
|
"labels": ["Important", "Updates"],
|
||||||
|
"starred": true,
|
||||||
|
"date": "2025-08-25T08:41:00Z"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "e5",
|
||||||
|
"sender": "me (2), Stripe",
|
||||||
|
"senderEmail": "no-reply@stripe.com",
|
||||||
|
"subject": "Payout scheduled",
|
||||||
|
"preview": "A payout of $1,248.32 is scheduled for tomorrow. Funds typically arrive within 2 business days.",
|
||||||
|
"labels": ["Updates"],
|
||||||
|
"starred": false,
|
||||||
|
"date": "2025-08-24T12:30:00Z"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "e6",
|
||||||
|
"sender": "Figma",
|
||||||
|
"senderEmail": "team@figma.com",
|
||||||
|
"subject": "You were invited to a file",
|
||||||
|
"preview": "Anna shared ‘Inbox redesign v3’ with you. Review the latest components and leave feedback in comments.",
|
||||||
|
"labels": ["Social"],
|
||||||
|
"starred": false,
|
||||||
|
"date": "2025-08-24T07:58:00Z"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "e7",
|
||||||
|
"sender": "Calendly",
|
||||||
|
"senderEmail": "no-reply@calendly.com",
|
||||||
|
"subject": "Event confirmed for Fri 3 PM",
|
||||||
|
"preview": "Your meeting with Chris is confirmed for this Friday at 3 PM. A calendar invite with the video link was attached.",
|
||||||
|
"labels": ["Updates"],
|
||||||
|
"starred": false,
|
||||||
|
"date": "2025-08-23T14:21:00Z"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "e8",
|
||||||
|
"sender": "Twitter",
|
||||||
|
"senderEmail": "notify@twitter.com",
|
||||||
|
"subject": "New followers this week",
|
||||||
|
"preview": "You gained 27 new followers. See who followed you and engage with their posts to grow reach.",
|
||||||
|
"labels": ["Social"],
|
||||||
|
"starred": false,
|
||||||
|
"date": "2025-08-23T06:12:00Z"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "e9",
|
||||||
|
"sender": "Product Hunt",
|
||||||
|
"senderEmail": "hello@producthunt.com",
|
||||||
|
"subject": "Today's top launches",
|
||||||
|
"preview": "Catch up on trending products you might like. Today's list features tools for design and developer productivity.",
|
||||||
|
"labels": ["Promotions"],
|
||||||
|
"starred": false,
|
||||||
|
"date": "2025-08-22T19:33:00Z"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "e10",
|
||||||
|
"sender": "Notion",
|
||||||
|
"senderEmail": "team@notion.so",
|
||||||
|
"subject": "Weekly summary: Inbox project",
|
||||||
|
"preview": "3 tasks completed, 2 comments, 1 new page added. Click through to see highlights and next steps.",
|
||||||
|
"labels": ["Updates"],
|
||||||
|
"starred": false,
|
||||||
|
"date": "2025-08-22T08:00:00Z"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "e11",
|
||||||
|
"sender": "AWS",
|
||||||
|
"senderEmail": "no-reply@aws.amazon.com",
|
||||||
|
"subject": "Billing alert threshold reached",
|
||||||
|
"preview": "Your usage exceeded the alert threshold for this month. Consider upgrading your plan or adjusting limits.",
|
||||||
|
"labels": ["Important"],
|
||||||
|
"starred": true,
|
||||||
|
"date": "2025-08-21T18:45:00Z"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "e12",
|
||||||
|
"sender": "LinkedIn",
|
||||||
|
"senderEmail": "messages-noreply@linkedin.com",
|
||||||
|
"subject": "Someone viewed your profile",
|
||||||
|
"preview": "See who looked at your profile this week. Strengthen your network by following up with recent viewers.",
|
||||||
|
"labels": ["Social"],
|
||||||
|
"starred": false,
|
||||||
|
"date": "2025-08-21T10:27:00Z"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "e13",
|
||||||
|
"sender": "Google Alerts",
|
||||||
|
"senderEmail": "noreply-alerts@google.com",
|
||||||
|
"subject": "Alert for: Tabler UI",
|
||||||
|
"preview": "New articles mentioning Tabler UI were found. Skim the summaries and set alerts for related keywords.",
|
||||||
|
"labels": ["Updates"],
|
||||||
|
"starred": false,
|
||||||
|
"date": "2025-08-20T16:14:00Z"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "e14",
|
||||||
|
"sender": "Medium",
|
||||||
|
"senderEmail": "noreply@medium.com",
|
||||||
|
"subject": "Stories you might like",
|
||||||
|
"preview": "Handpicked stories based on your reading history. Discover deep dives on design systems and UX workflows.",
|
||||||
|
"labels": ["Promotions"],
|
||||||
|
"starred": false,
|
||||||
|
"date": "2025-08-20T07:05:00Z"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "e15",
|
||||||
|
"sender": "Slack",
|
||||||
|
"senderEmail": "feedback@slack.com",
|
||||||
|
"subject": "Missed messages in #design",
|
||||||
|
"preview": "You have 14 unread messages across 3 channels. Catch up now to keep the conversation moving.",
|
||||||
|
"labels": ["Updates"],
|
||||||
|
"starred": false,
|
||||||
|
"date": "2025-08-19T21:43:00Z"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "e16",
|
||||||
|
"sender": "Sentry",
|
||||||
|
"senderEmail": "alerts@sentry.io",
|
||||||
|
"subject": "New error: TypeError in preview",
|
||||||
|
"preview": "Tabler preview threw TypeError: cannot read properties of undefined. Investigate stack trace and recent commits.",
|
||||||
|
"labels": ["Important", "Updates"],
|
||||||
|
"starred": true,
|
||||||
|
"date": "2025-08-19T11:20:00Z"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "e17",
|
||||||
|
"sender": "Dribbble",
|
||||||
|
"senderEmail": "no-reply@dribbble.com",
|
||||||
|
"subject": "New shots from designers you follow",
|
||||||
|
"preview": "A fresh batch of inspiration is here. Explore new shots and save your favorites to collections.",
|
||||||
|
"labels": ["Social"],
|
||||||
|
"starred": false,
|
||||||
|
"date": "2025-08-18T15:37:00Z"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "e18",
|
||||||
|
"sender": "Airbnb",
|
||||||
|
"senderEmail": "express@airbnb.com",
|
||||||
|
"subject": "Plan your next getaway",
|
||||||
|
"preview": "Deals on stays you'll love this fall. Flexible dates and free cancellation on many options.",
|
||||||
|
"labels": ["Promotions"],
|
||||||
|
"starred": false,
|
||||||
|
"date": "2025-08-18T06:50:00Z"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "e19",
|
||||||
|
"sender": "Google Calendar",
|
||||||
|
"senderEmail": "calendar-notification@google.com",
|
||||||
|
"subject": "Reminder: Standup in 10 minutes",
|
||||||
|
"preview": "Daily standup starts at 9:30 AM. Share yesterday's progress, today's plan, and blockers.",
|
||||||
|
"labels": ["Updates"],
|
||||||
|
"starred": false,
|
||||||
|
"date": "2025-08-17T09:20:00Z"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "e20",
|
||||||
|
"sender": "Superstore",
|
||||||
|
"senderEmail": "offers@superstore.com",
|
||||||
|
"subject": "Exclusive 25% off for you",
|
||||||
|
"preview": "Save big on electronics this weekend only. Limited quantities—use code WEEKEND25 at checkout.",
|
||||||
|
"labels": ["Promotions"],
|
||||||
|
"starred": false,
|
||||||
|
"date": "2025-08-16T13:00:00Z"
|
||||||
|
}
|
||||||
|
]
|
||||||
@@ -231,6 +231,11 @@
|
|||||||
"title": "Chat",
|
"title": "Chat",
|
||||||
"url": "chat.html"
|
"url": "chat.html"
|
||||||
},
|
},
|
||||||
|
"email-inbox": {
|
||||||
|
"title": "Email inbox",
|
||||||
|
"url": "email-inbox.html",
|
||||||
|
"badge": "New"
|
||||||
|
},
|
||||||
"cookie-banner": {
|
"cookie-banner": {
|
||||||
"title": "Cookie banner",
|
"title": "Cookie banner",
|
||||||
"url": "cookie-banner.html"
|
"url": "cookie-banner.html"
|
||||||
|
|||||||
27
shared/includes/parts/modals/new-email.html
Normal file
27
shared/includes/parts/modals/new-email.html
Normal file
@@ -0,0 +1,27 @@
|
|||||||
|
<div class="modal-header">
|
||||||
|
<h4 class="modal-title">New Message</h4>
|
||||||
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="modal-body">
|
||||||
|
<form>
|
||||||
|
<div class="mb-3">
|
||||||
|
<label class="form-label">To</label>
|
||||||
|
<input type="text" class="form-control" placeholder="Example@email.com">
|
||||||
|
</div>
|
||||||
|
<div class="mb-3">
|
||||||
|
<label class="form-label">Subject</label>
|
||||||
|
<input type="text" class="form-control" placeholder="Your subject">
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label class="form-label">Message</label>
|
||||||
|
{% include "ui/wysiwyg.html" id="email-message" %}
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
<div class="modal-footer">
|
||||||
|
<button type="button" class="btn" data-bs-dismiss="modal">Cancel</button>
|
||||||
|
<button type="button" class="btn btn-primary ms-auto" data-bs-dismiss="modal">
|
||||||
|
{% include "ui/icon.html" icon="send" %} Send Message
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
@@ -25,7 +25,9 @@
|
|||||||
content_style: 'body { font-family: -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif; font-size: 14px; -webkit-font-smoothing: antialiased; }'
|
content_style: 'body { font-family: -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif; font-size: 14px; -webkit-font-smoothing: antialiased; }'
|
||||||
}
|
}
|
||||||
|
|
||||||
if (localStorage.getItem("tablerTheme") === 'dark') {
|
// check current theme is light or dark
|
||||||
|
const theme = document.documentElement.getAttribute('data-bs-theme');
|
||||||
|
if (theme === 'dark') {
|
||||||
options.skin = 'oxide-dark';
|
options.skin = 'oxide-dark';
|
||||||
options.content_css = 'dark';
|
options.content_css = 'dark';
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user