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

[ابومازن]

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

شرحنا اليوم يتمثل في كيفية تغيير شكل المرفقات من الشكل التقليدي إلى شكل قائمة
المعلومات
اسم الشرح : كيفية تغيير طريقة عرض المرفقات
توافق الشرح: xf2.1
الشرح

ندخل إلى لوحة التحكم -==> المظهر -==> القوالب
نختار الستايل الذي نريد تعديله
نبحث عن قالب : message_macros
ثم نبحث داخله عن هذا الكود

<xf:macro name="attachments" arg-attachments="!" arg-message="!" arg-canView="!">
    <xf:if contentcheck="true">
        <xf:css src="attachments.less" />
        <section class="message-attachments">
            <h4 class="block-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="message-attachments">
            <h4 class="block-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>

وفي قالب : attachments.less قم بإضافة الكود التالي

.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; }
    }
}

النتيجة
قبل التعديل

بعد التعديل

وبهذا ينتهي شرحنا لهذا اليوم

 

[عبدالله المنشاوى]

الله ينور عليك ياغالي
سلمت يداك ​

 

[ايمن مغازى]

بارك الله فيك

 

[الهمام]

بارك الله فيك

 

[zoro1]

كل الشكر والتقدير لك اخى الكريم للجهد الطيب وللموضوعات المميزة
وجزاك الله كل خير اخى الكريم
وتقبل مرورى يا غالى
.................
​