gostfix/web/templates/maillist.html

<!-- <div class="fadeIn" style="position: absolute; top: 5pt; left: 0; right: 0; height: 10pt"></div> -->
{{range .}}
<div id="mail{{.Id}}" class="mailHeaderContainer {{if .Read}}read{{else}}unread{{end}}" style="position: relative;" onmouseover="$('#mailControlPanel{{.Id}}').show()" onmouseout="$('#mailControlPanel{{.Id}}').hide()" onclick="mailOpen('{{.Id}}');">
    <div class="mailHeader noselect">
        <div style="display: block; margin: 10px 12px;">
            <label class="cbox" onclick="event.stopPropagation();">
                <input type="checkbox" id="mailCheckbox{{.Id}}" onclick="toggleMailSelection('{{.Id}}'); event.stopPropagation(); return true;">
                <span></span>
            </label>
        </div>
        <div class="mailFrom elidedText noselect">{{.Mail.Header.From}}</div>
        <div class="mailSubject elidedText noselect">{{.Mail.Header.Subject}}</div>
        <div id="mailDate{{.Id}}" class="mailDate elidedText noselect"><script>localDate('mailDate{{.Id}}', {{.Mail.Header.Date}})</script></div>
    </div>
    {{if len .Mail.Body.Attachments}}
    <div class="noselect" style="display: flex; flex-direction: row; margin-bottom: 10px;">
        <img id="attachementIcon" style="width: 20px; margin-left: 60px; margin-right: 10px;" src="/assets/attachments.svg"/>
        {{range .Mail.Body.Attachments}}
        <div class="listAttachment" onclick="downloadAttachment({{.Id}}, {{.FileName}}); event.stopPropagation(); return false;">{{.FileName}}</div>
        {{end}}
    </div>
    {{end}}
    <div id="mailControlPanel{{.Id}}" class="mailControlPanel">
        <div style="width: 100%; height: 100%; display: flex; flex-direction: row;">
            <img id="readListIcon{{.Id}}" class="iconBtn" style="width: 20px; margin-left: 40px; margin-right: 10px;" onclick="toggleRead('{{.Id}}'); event.stopPropagation(); return false;" src="/assets/{{if .Read}}read{{else}}unread{{end}}.svg"/>
            <img id="restoreListIcon{{.Id}}" class="iconBtn" style="display: none; width: 24px; margin: auto 10px auto 0; height: 24px; flex: 0 1 auto;" onclick="restoreMail({{.Id}}, closeDetails); event.stopPropagation(); return false;" src="/assets/restore.svg"/>
            <img id="deleteListIcon" class="iconBtn" style="width: 20px; margin-right: 10px;" onclick="removeMail({{.Id}}, function(){}); event.stopPropagation(); return false;" src="/assets/remove.svg"/>
        </div>
    </div>
</div>
{{end}}
<!-- <div class="fadeOut" style="position: absolute; bottom: 5pt; left: 0; right: 0; height:10pt"></div> -->