شرح تغيير طريقة عرض المرفقات

<xf:macro name="attachments" arg-attachments="!" arg-message="!" arg-canView="!">
    <xf:if contentcheck="true">
        <xf:css src="attachments.less" />
        <section class="m-attachments">
            <h4 class="b-textHeader">{{ phrase('attachments') }}</h4>
            <ul class="attachmentList">
                <xf:contentcheck>
                    <xf:foreach loop="$attachments" value="$attachment" if="!$message.isAttachmentEmbedded($attachment)">
                        <xf:macro template="attachment_macros" name="attachment_list_item"
                            arg-attachment="{$attachment}"
                            arg-canView="{$canView}" />
                    </xf:foreach>
                </xf:contentcheck>
            </ul>
        </section>
    </xf:if>
</xf:macro>

<xf:macro name="attachments" arg-attachments="!" arg-message="!" arg-canView="!">
    <xf:if contentcheck="true">
        <xf:css src="attachments.less" />
        <section class="m-attachments">
            <h4 class="b-textHeader">{{ phrase('attachments') }}</h4>
            <xf:contentcheck>
            <xf:if contentcheck="true">
            <ul class="attachmentList">
                <xf:contentcheck>
                    <xf:foreach loop="$attachments" value="$attachment" if="!$message.isAttachmentEmbedded($attachment) AND $attachment.has_thumbnail">
                        <xf:macro template="attachment_macros" name="attachment_list_item"
                            arg-attachment="{$attachment}"
                            arg-canView="{$canView}" />
                    </xf:foreach>
                </xf:contentcheck>
            </ul>
            </xf:if>
         
            <xf:if contentcheck="true">
            <ul class="attachmentList attachmentListCustom">
                <xf:contentcheck>
                    <xf:foreach loop="$attachments" value="$attachment" if="!$message.isAttachmentEmbedded($attachment) AND !$attachment.has_thumbnail">
                        <xf:macro template="attachment_macros" name="attachment_list_item"
                            arg-attachment="{$attachment}"
                            arg-canView="{$canView}" />
                    </xf:foreach>
                </xf:contentcheck>
            </ul>
            </xf:if>
         
            </xf:contentcheck>
        </section>
    </xf:if>
</xf:macro>

.attachmentList.attachmentListCustom
{
    .xf-minorBlockContent();
    display: block;
    padding: @xf-paddingMedium @xf-paddingLarge;
    margin-top: @xf-elementSpacer;
    .attachment
    {
        display: block;
        width: auto;
        background-color: transparent;
        border-width: 0;
        padding: 5px 0;
        margin: 0;
        > div { display: inline-block; }
        i { width: 24px; text-align: center; }
        i:before { font-size: 22px; }
        .attachment-icon.attachment-icon--img img { max-height: 24px; }
        .attachment-name { margin-top: 0; }
        &:first-of-type { padding-top: 0; }
        &:last-of-type { padding-bottom: 0; }
    }
}

<span class="file-name" title="{$attachment.filename}">{$attachment.filename}</span>

<span class="file-name" title="{$attachment.filename}">{$attachment.filename|substr(0,30)}</span>

<xf:macro name="attachment_list_item" arg-attachment="!" arg-canView="!">
    <li class="attachment">
        <xf:if is="$attachment.has_thumbnail">
            <xf:macro template="lightbox_macros" name="setup" arg-canViewAttachments="{$canView}" />

            <div class="attachment-icon attachment-icon--img">
                <a href="{{ link('attachments', $attachment) }}" target="_blank" class="{{ $canView ? 'js-lbImage' : '' }}">
                    <img src="{$attachment.thumbnail_url}" alt="{$attachment.filename}" />
                </a>
            </div>
        <xf:else />
            <div class="attachment-icon" data-extension="{$attachment.extension}">
                <a href="{{ link('attachments', $attachment) }}" target="_blank"><i aria-hidden="true"></i></a>
            </div>
        </xf:if>
        <div class="attachment-name" style="width:100px!important;">
            <a href="{{ link('attachments', $attachment) }}" target="_blank" title="{$attachment.filename}">{$attachment.filename}</a>
        </div>
        <div class="attachment-details">
            <span class="attachment-details-size">{$attachment.file_size|file_size}</span>
            <span class="attachment-details-views">{{ phrase('views:') }} {$attachment.view_count|number}</span>
        </div>
    </li>
</xf:macro>

<xf:macro name="attachment_list_item" arg-attachment="!" arg-canView="!">
    <li class="attachment">
        <xf:if is="$attachment.has_thumbnail">
            <xf:macro template="lightbox_macros" name="setup" arg-canViewAttachments="{$canView}" />

            <div class="attachment-icon attachment-icon--img">
                <a href="{{ link('attachments', $attachment) }}" target="_blank" class="{{ $canView ? 'js-lbImage' : '' }}">
                    <img src="{$attachment.thumbnail_url}" alt="{$attachment.filename}" />
                </a>
            </div>
        <xf:else />
            <div class="attachment-icon" data-extension="{$attachment.extension}">
                <a href="{{ link('attachments', $attachment) }}" target="_blank"><i aria-hidden="true"></i></a>
            </div>
        </xf:if>
        <div class="attachment-name" style="width:100px!important;">
            <a href="{{ link('attachments', $attachment) }}" target="_blank" title="{$attachment.filename}">{$attachment.filename}</a>
        </div>
        <div class="attachment-details">
            <span class="attachment-details-size">{$attachment.file_size|file_size}</span>
            <span class="attachment-details-views">{{ phrase('views:') }} {$attachment.view_count|number}</span>
        </div>
    </li>
</xf:macro>

{$attachment.filename|substr(0,30)}