From 0ee3c0a3b4ad3998a16a19004ba3f42b6a0b9352 Mon Sep 17 00:00:00 2001 From: codecalm Date: Thu, 28 Aug 2025 23:32:04 +0200 Subject: [PATCH] new emails page --- core/scss/_variables.scss | 10 +- preview/pages/email-inbox.html | 193 +++++++++++++++++++ preview/pages/modals.html | 27 +-- shared/data/mails.json | 202 ++++++++++++++++++++ shared/data/menu.json | 5 + shared/includes/parts/modals/new-email.html | 27 +++ shared/includes/ui/wysiwyg.html | 4 +- 7 files changed, 451 insertions(+), 17 deletions(-) create mode 100644 preview/pages/email-inbox.html create mode 100644 shared/data/mails.json create mode 100644 shared/includes/parts/modals/new-email.html diff --git a/core/scss/_variables.scss b/core/scss/_variables.scss index 919ce1be3..583c6ac70 100644 --- a/core/scss/_variables.scss +++ b/core/scss/_variables.scss @@ -285,15 +285,15 @@ $gray-colors: ( $theme-colors: map-merge($theme-colors, map-merge($extra-colors, ())); // BACKDROPS -$backdrop-opacity: 24% !default; +$backdrop-opacity: .32 !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: ( 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)), ) !default; -// Borders +// Borders $border-width: 1px !default; $border-width-wide: 2px !default; @@ -749,9 +749,9 @@ $list-group-item-padding-y: $card-cap-padding-y !default; $list-group-item-padding-x: $card-cap-padding-x !default; // Modals -$modal-backdrop-opacity: 0.24 !default; +$modal-backdrop-opacity: $backdrop-opacity !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; diff --git a/preview/pages/email-inbox.html b/preview/pages/email-inbox.html new file mode 100644 index 000000000..2765bcf7e --- /dev/null +++ b/preview/pages/email-inbox.html @@ -0,0 +1,193 @@ +--- +title: Email inbox +page-header: Inbox +page-menu: extra.email-inbox +layout: default +permalink: email-inbox.html +page-libs: [ hugerte] +--- + +
+
+ + +
+
+
+
+ +
+ +
+ {% 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 %} +
+ +
+ +
+ Move to + Social + Promotions + Updates + Forums +
+
+ +
+ +
+ Label as: + Updates + Social + Promotions + Forums +
+
+ +
+ +
+ More Options : + Mark as Unread + Add to Tasks + Add Star + Mute +
+
+
+ +
+ +
+ +
+
+ Showing 1 - {{ mails | size }} of {{ mails | size }} +
+
+
+ + +
+
+
+
+
+
+
+ +{% include "ui/modal.html" modal-id="new-email" %} \ No newline at end of file diff --git a/preview/pages/modals.html b/preview/pages/modals.html index 2e65b42a2..5301b9484 100644 --- a/preview/pages/modals.html +++ b/preview/pages/modals.html @@ -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] ---
@@ -22,49 +22,54 @@ page-libs: [signature_pad] Danger modal Modal with simple form Modal with signature form + New email modal

Simple modal

- {% 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 %}

Large modal

- {% 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 %}

Small modal

- {% 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 %}

Full width modal

- {% 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 %}

Scrollable modal

- {% 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 %}

Modal with form

- {% 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 %}

Success modal

- {% 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 %}

Danger modal

- {% 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 %}

Modal with simple form

- {% 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 %}

Modal with signature form

- {% 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 %} +
+
+

New email modal

+ {% 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 %}
diff --git a/shared/data/mails.json b/shared/data/mails.json new file mode 100644 index 000000000..8074e53bd --- /dev/null +++ b/shared/data/mails.json @@ -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" + } +] diff --git a/shared/data/menu.json b/shared/data/menu.json index d4d526f30..268e8f903 100644 --- a/shared/data/menu.json +++ b/shared/data/menu.json @@ -231,6 +231,11 @@ "title": "Chat", "url": "chat.html" }, + "email-inbox": { + "title": "Email inbox", + "url": "email-inbox.html", + "badge": "New" + }, "cookie-banner": { "title": "Cookie banner", "url": "cookie-banner.html" diff --git a/shared/includes/parts/modals/new-email.html b/shared/includes/parts/modals/new-email.html new file mode 100644 index 000000000..258c59dfe --- /dev/null +++ b/shared/includes/parts/modals/new-email.html @@ -0,0 +1,27 @@ +
+

New Message

+ +
+ +
+
+
+ + +
+
+ + +
+
+ + {% include "ui/wysiwyg.html" id="email-message" %} +
+
+
+
+ + +
\ No newline at end of file diff --git a/shared/includes/ui/wysiwyg.html b/shared/includes/ui/wysiwyg.html index 1f2ec60ed..d4423122c 100644 --- a/shared/includes/ui/wysiwyg.html +++ b/shared/includes/ui/wysiwyg.html @@ -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; }' } - 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.content_css = 'dark'; }