mailwolt/resources/views/livewire/ui/webmail/mail-view.blade.php

217 lines
13 KiB
PHP

<div>
@php
$isSpam = in_array($folder, ['Junk', 'Spam']);
$isTrash = $folder === 'Trash';
$isDraft = $folder === 'Drafts';
$isArchive = $folder === 'Archive';
$flagged = $message['flagged'] ?? false;
@endphp
<div class="mbx-page-header">
<div class="mbx-page-title" style="flex:1;min-width:0;overflow:hidden;">
{{-- Favorit-Stern --}}
<button wire:click="toggleFlag"
style="background:none;border:none;cursor:pointer;padding:0 6px 0 0;flex-shrink:0;
color:{{ $flagged ? '#f59e0b' : 'var(--mw-b2)' }};font-size:16px;line-height:1;"
title="{{ $flagged ? 'Markierung entfernen' : 'Als Favorit markieren' }}"></button>
<span style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">
{{ $message['subject'] ?? '(kein Betreff)' }}
</span>
</div>
<div class="mbx-page-actions" style="gap:6px;">
<a href="{{ route('ui.webmail.inbox', ['folder' => $folder]) }}" wire:navigate class="mbx-btn-mute"> Zurück</a>
@if($isDraft)
<a href="{{ route('ui.webmail.compose', ['draftUid' => $uid, 'draftFolder' => $folder]) }}"
wire:navigate class="mbx-btn-primary">Weiter bearbeiten</a>
@else
<a href="{{ route('ui.webmail.compose', ['replyUid' => $uid, 'replyFolder' => $folder]) }}"
wire:navigate class="mbx-btn-primary">
<svg width="11" height="11" viewBox="0 0 14 14" fill="none">
<path d="M1 13L13 1l-3 12-3.5-4.5L1 13Z" stroke="currentColor" stroke-width="1.3" stroke-linejoin="round"/>
</svg>
Antworten
</a>
@endif
{{-- Weitere Aktionen Dropdown --}}
<div style="position:relative;" x-data="{ open: false, moveSub: false }" @click.outside="open=false; moveSub=false">
<button @click="open=!open" class="mbx-btn-mute" style="gap:4px;">
Aktionen
<svg width="10" height="10" viewBox="0 0 14 14" fill="none">
<path d="M3 5l4 4 4-4" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</button>
<div x-show="open" x-cloak x-transition
style="position:absolute;right:0;top:calc(100% + 4px);z-index:50;min-width:190px;
background:var(--mw-bg);border:1px solid var(--mw-b1);border-radius:8px;
box-shadow:0 4px 20px rgba(0,0,0,.15);padding:4px;display:flex;flex-direction:column;gap:1px;">
{{-- Favorit --}}
<button wire:click="toggleFlag" @click="open=false"
style="display:flex;align-items:center;gap:8px;padding:7px 10px;border:none;background:none;
cursor:pointer;border-radius:5px;font-size:12.5px;color:var(--mw-t2);width:100%;text-align:left;"
onmouseover="this.style.background='var(--mw-bg3)'" onmouseout="this.style.background='none'">
<span style="color:#f59e0b;font-size:14px;"></span>
{{ $flagged ? 'Markierung entfernen' : 'Als Favorit markieren' }}
</button>
{{-- Als ungelesen markieren --}}
@if(!$isDraft)
<button wire:click="markUnseen" @click="open=false"
style="display:flex;align-items:center;gap:8px;padding:7px 10px;border:none;background:none;
cursor:pointer;border-radius:5px;font-size:12.5px;color:var(--mw-t2);width:100%;text-align:left;"
onmouseover="this.style.background='var(--mw-bg3)'" onmouseout="this.style.background='none'">
<svg width="12" height="12" viewBox="0 0 14 14" fill="none">
<rect x=".5" y="2.5" width="13" height="9" rx="1.5" stroke="currentColor" stroke-width="1.2"/>
<path d="M.5 5l6.5 4 6.5-4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/>
</svg>
Als ungelesen markieren
</button>
@endif
@if($isSpam)
<button wire:click="notSpam" @click="open=false"
style="display:flex;align-items:center;gap:8px;padding:7px 10px;border:none;background:none;
cursor:pointer;border-radius:5px;font-size:12.5px;color:var(--mw-t2);width:100%;text-align:left;"
onmouseover="this.style.background='var(--mw-bg3)'" onmouseout="this.style.background='none'">
Kein Spam in Posteingang
</button>
@elseif(!$isDraft && !$isTrash)
<button wire:click="markSpam" @click="open=false"
style="display:flex;align-items:center;gap:8px;padding:7px 10px;border:none;background:none;
cursor:pointer;border-radius:5px;font-size:12.5px;color:var(--mw-t2);width:100%;text-align:left;"
onmouseover="this.style.background='var(--mw-bg3)'" onmouseout="this.style.background='none'">
<svg width="12" height="12" viewBox="0 0 14 14" fill="none">
<circle cx="7" cy="7" r="5.5" stroke="currentColor" stroke-width="1.2"/>
<path d="M7 4.5v3" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/>
<circle cx="7" cy="10" r=".7" fill="currentColor"/>
</svg>
Als Spam markieren
</button>
@endif
{{-- Verschieben nach --}}
@if(!$isDraft)
@php
$moveTargets = [
'INBOX' => 'Posteingang',
'Sent' => 'Gesendet',
'Archive' => 'Archiv',
'Junk' => 'Spam',
'Trash' => 'Papierkorb',
];
$moveTargets = array_filter($moveTargets, fn($k) => $k !== $folder, ARRAY_FILTER_USE_KEY);
@endphp
<div style="position:relative;">
<button @click.stop="moveSub=!moveSub"
style="display:flex;align-items:center;justify-content:space-between;gap:8px;padding:7px 10px;
border:none;background:none;cursor:pointer;border-radius:5px;font-size:12.5px;
color:var(--mw-t2);width:100%;text-align:left;"
onmouseover="this.style.background='var(--mw-bg3)'" onmouseout="this.style.background='none'">
<span style="display:flex;align-items:center;gap:8px;">
<svg width="12" height="12" viewBox="0 0 14 14" fill="none">
<path d="M1 7h10M8 4l3 3-3 3" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Verschieben nach
</span>
<svg width="8" height="8" viewBox="0 0 14 14" fill="none">
<path d="M5 3l4 4-4 4" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</button>
<div x-show="moveSub" x-cloak x-transition
style="position:absolute;right:calc(100% + 4px);top:0;z-index:60;min-width:160px;
background:var(--mw-bg);border:1px solid var(--mw-b1);border-radius:8px;
box-shadow:0 4px 20px rgba(0,0,0,.15);padding:4px;display:flex;flex-direction:column;gap:1px;">
@foreach($moveTargets as $key => $label)
<button wire:click="moveTo('{{ $key }}')" @click="open=false; moveSub=false"
style="display:flex;align-items:center;padding:7px 10px;border:none;background:none;
cursor:pointer;border-radius:5px;font-size:12.5px;color:var(--mw-t2);width:100%;text-align:left;"
onmouseover="this.style.background='var(--mw-bg3)'" onmouseout="this.style.background='none'">
{{ $label }}
</button>
@endforeach
</div>
</div>
@endif
<div style="height:1px;background:var(--mw-b1);margin:3px 0;"></div>
<button wire:click="delete" @click="open=false"
wire:confirm="{{ $isTrash ? 'Endgültig löschen?' : 'In Papierkorb?' }}"
style="display:flex;align-items:center;gap:8px;padding:7px 10px;border:none;background:none;
cursor:pointer;border-radius:5px;font-size:12.5px;color:var(--mw-rd);width:100%;text-align:left;"
onmouseover="this.style.background='var(--mw-rdbg)'" onmouseout="this.style.background='none'">
<svg width="12" height="12" viewBox="0 0 14 14" fill="none">
<path d="M2 3.5h10M5 3.5V2h4v1.5M5.5 6v4.5M8.5 6v4.5" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/>
<path d="M3 3.5l.7 8h6.6l.7-8" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/>
</svg>
{{ $isTrash ? 'Endgültig löschen' : 'In Papierkorb' }}
</button>
</div>
</div>
</div>
</div>
{{-- Meta-Info --}}
<div style="margin:10px 0;padding:10px 14px;background:var(--mw-bg4);border:1px solid var(--mw-b2);
border-radius:8px;font-size:12px;color:var(--mw-t3);display:flex;gap:20px;flex-wrap:wrap;">
<span>
<span style="color:var(--mw-t4);">Von:</span>
<strong style="color:var(--mw-t2);">{{ $message['from_name'] ?: $message['from'] }}</strong>
@if($message['from_name']) &lt;{{ $message['from'] }}&gt; @endif
</span>
<span><span style="color:var(--mw-t4);">An:</span> {{ $message['to'] ?? '' }}</span>
<span>
<span style="color:var(--mw-t4);">Datum:</span>
{{ isset($message['date']) ? \Carbon\Carbon::parse($message['date'])->format('d.m.Y H:i') : '—' }}
</span>
@if($flagged)
<span style="color:#f59e0b;"> Markiert</span>
@endif
</div>
@if(!empty($message['attachments']))
<div style="margin-bottom:10px;padding:8px 14px;background:var(--mw-bg4);border:1px solid var(--mw-b2);
border-radius:8px;display:flex;gap:8px;flex-wrap:wrap;align-items:center;">
<span style="font-size:11.5px;color:var(--mw-t4);">Anhänge:</span>
@foreach($message['attachments'] as $att)
<span class="mbx-badge-mute">{{ $att['name'] }} ({{ round($att['size'] / 1024, 1) }} KB)</span>
@endforeach
</div>
@endif
{{-- Nachrichteninhalt --}}
<div class="mbx-section" style="padding:0;overflow:hidden;">
@if(!empty($message['html']) && !$isSpam)
<iframe id="mail-frame"
srcdoc="{{ $message['html'] }}"
sandbox="allow-same-origin allow-popups"
style="width:100%;border:none;display:block;min-height:200px;"
onload="(function(f){
try {
var h = f.contentDocument.documentElement.scrollHeight;
f.style.height = (h + 32) + 'px';
} catch(e) {}
})(this)">
</iframe>
@elseif(!empty($message['html']) && $isSpam)
<div style="padding:8px 16px;background:var(--mw-rdbg);border-bottom:1px solid var(--mw-rdbd);
font-size:12px;color:var(--mw-rd);display:flex;align-items:center;gap:8px;">
<svg width="13" height="13" viewBox="0 0 14 14" fill="none">
<circle cx="7" cy="7" r="5.5" stroke="currentColor" stroke-width="1.2"/>
<path d="M7 4.5v3" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/>
<circle cx="7" cy="10" r=".7" fill="currentColor"/>
</svg>
HTML-Inhalt wurde aus Sicherheitsgründen blockiert (Spam-Ordner).
</div>
<div style="padding:20px 24px;white-space:pre-wrap;font-size:13px;line-height:1.7;color:var(--mw-t2);">{{ $message['text'] ?: strip_tags($message['html']) }}</div>
@elseif(!empty($message['text']))
<div style="padding:20px 24px;white-space:pre-wrap;font-size:13px;line-height:1.7;color:var(--mw-t2);font-family:inherit;">{{ $message['text'] }}</div>
@else
<div style="padding:40px;text-align:center;color:var(--mw-t4);">Kein Inhalt</div>
@endif
</div>
</div>