Skip to content

Commit 98b990a

Browse files
ItsNotGoodNameItsNotGoodName
committed
refactor(web): attachment card component
1 parent c691d9b commit 98b990a

6 files changed

+115
-26
lines changed

‎web/components/attachment_card.templ

+20-9
Original file line numberDiff line numberDiff line change
@@ -3,23 +3,34 @@ package components
33
import (
44
"github.com/ItsNotGoodName/smtpbridge/web/routes"
55
"github.com/ItsNotGoodName/smtpbridge/internal/models"
6+
"github.com/ItsNotGoodName/smtpbridge/web/icons"
67
)
78

89
type AttachmentCardProps struct {
910
Attachment models.Attachment
1011
}
1112

1213
templ AttachmentCard(props AttachmentCardProps) {
13-
<div class="card card-compact bg-base-100 border-base-200 w-full border sm:w-80">
14-
if props.Attachment.IsImage() {
15-
<figure><img src={ routes.AttachmentFile(props.Attachment.FileName()).URLString() } alt={ props.Attachment.Name }/></figure>
16-
}
17-
<div class="card-body">
18-
<h2 class="card-title break-all">{ props.Attachment.Name }</h2>
19-
<div class="card-actions justify-end">
20-
<a hx-boost="false" href={ routes.AttachmentFile(props.Attachment.FileName()).URLQuery("download=1") } class="btn btn-primary">Download</a>
14+
<div class="w-full sm:w-80">
15+
<div class="card card-compact bg-base-100 border-base-200 border">
16+
if props.Attachment.IsImage() {
17+
<figure class="bg-base-content"><img src={ routes.AttachmentFile(props.Attachment.FileName()).URLString() } alt={ props.Attachment.Name }/></figure>
18+
}
19+
<div class="flex-1 p-2 flex flex-col justify-end gap-2">
20+
<p class="break-all font-bold">{ props.Attachment.Name }</p>
21+
<div class="join flex justify-end">
22+
<a class="join-item btn tooltip flex items-center" data-tip="Envelope" href={ routes.Envelope(props.Attachment.MessageID).URLQuery("tab=" + routes.EnvelopeTabAttachments.String()) }>
23+
@icons.Mail("h-5 w-5")
24+
</a>
25+
<a class="join-item btn tooltip flex items-center" data-tip="View" hx-boost="false" href={ routes.AttachmentFile(props.Attachment.FileName()).URL() }>
26+
@icons.Eye("h-5 w-5")
27+
</a>
28+
<a class="join-item btn tooltip flex items-center" data-tip="Download" hx-boost="false" href={ routes.AttachmentFile(props.Attachment.FileName()).URLQuery("download=1") }>
29+
@icons.Download("h-5 w-5")
30+
</a>
31+
</div>
2132
</div>
22-
</div>
33+
</div>
2334
</div>
2435
}
2536

‎web/components/attachment_card_templ.go

+43-9
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎web/components/envelope_tab.templ

+4-4
Original file line numberDiff line numberDiff line change
@@ -13,20 +13,20 @@ type EnvelopeTabProps struct {
1313
}
1414

1515
templ EnvelopeTab(props EnvelopeTabProps) {
16-
<div id="tabs" hx-target="#tabs" hx-swap="innerHTML">
16+
<div id="tabs">
1717
<div class="flex">
1818
<div class="border-base-200 w-4 border-b"></div>
1919
<div class="tabs" role="tablist">
20-
<a class={ "tab tab-lifted", templ.KV("tab-active", props.Tab == routes.EnvelopeTabText) } hx-get={ routes.EnvelopeTabComponent(props.Envelope.Message.ID, routes.EnvelopeTabText).URLString() } aria-controls="tab-content" role="tab">
20+
<a class={ "tab tab-lifted", templ.KV("tab-active", props.Tab == routes.EnvelopeTabText) } hx-get={ routes.EnvelopeTabComponent(props.Envelope.Message.ID, routes.EnvelopeTabText).URLString() } aria-controls="tab-content" role="tab" hx-target="#tabs" hx-swap="innerHTML">
2121
Text
2222
</a>
2323
if props.Envelope.Message.HTML != "" {
24-
<a class={ "tab tab-lifted", templ.KV("tab-active", props.Tab == routes.EnvelopeTabHTML) } hx-get={ routes.EnvelopeTabComponent(props.Envelope.Message.ID, routes.EnvelopeTabHTML).URLString() } aria-controls="tab-content" role="tab">
24+
<a class={ "tab tab-lifted", templ.KV("tab-active", props.Tab == routes.EnvelopeTabHTML) } hx-get={ routes.EnvelopeTabComponent(props.Envelope.Message.ID, routes.EnvelopeTabHTML).URLString() } aria-controls="tab-content" role="tab" hx-target="#tabs" hx-swap="innerHTML">
2525
HTML
2626
</a>
2727
}
2828
if len(props.Envelope.Attachments) != 0 {
29-
<a class={ "tab tab-lifted flex gap-2", templ.KV("tab-active", props.Tab == routes.EnvelopeTabAttachments) } hx-get={ routes.EnvelopeTabComponent(props.Envelope.Message.ID, routes.EnvelopeTabAttachments).URLString() } aria-controls="tab-content" role="tab">
29+
<a class={ "tab tab-lifted flex gap-2", templ.KV("tab-active", props.Tab == routes.EnvelopeTabAttachments) } hx-get={ routes.EnvelopeTabComponent(props.Envelope.Message.ID, routes.EnvelopeTabAttachments).URLString() } aria-controls="tab-content" role="tab" hx-target="#tabs" hx-swap="innerHTML">
3030
Attachments
3131
<div class="badge badge-primary">
3232
<td>{ strconv.Itoa(len(props.Envelope.Attachments)) }</td>

‎web/components/envelope_tab_templ.go

+4-4
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎web/icons/icons.templ

+5
Original file line numberDiff line numberDiff line change
@@ -88,3 +88,8 @@ templ ArrowDownS(class any) {
8888
<svg class={ class, "fill-current" } xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M11.9997 13.1714L16.9495 8.22168L18.3637 9.63589L11.9997 15.9999L5.63574 9.63589L7.04996 8.22168L11.9997 13.1714Z"></path></svg>
8989
}
9090

91+
// https://remixicon.com/icon/download-line
92+
templ Download(class any) {
93+
<svg class={ class, "fill-current" } xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 19H21V21H3V19ZM13 13.1716L19.0711 7.1005L20.4853 8.51472L12 17L3.51472 8.51472L4.92893 7.1005L11 13.1716V2H13V13.1716Z"></path></svg>
94+
}
95+

‎web/icons/icons_templ.go

+39
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)