مكون زر تسجيل الخروج في قائمة الأعلى

مطور
1

سأقوم بتجميع ونشر مكون سمة على GitHub لإضافة زر تسجيل خروج إلى القائمة العلوية إذا أمكن لأحد إخباري بكيفية تحديث رمز @pfaffman هنا…

:pray: :pray: :pray:

(في الوقت الحالي، اتباع تلك التعليمات وتمكين المكون يؤدي فقط إلى اختفاء القائمة العلوية بأكملها :crying_cat_face: )

إعجاب واحد (1)
2

شيء من هذا القبيل. لا تتردد في التعديل حسب احتياجاتك.

import DButton from "discourse/components/d-button";
import routeAction from "discourse/helpers/route-action";
import { apiInitializer } from "discourse/lib/api";

export default apiInitializer("1.28.0", (api) => {
  if (api.getCurrentUser()) {
    api.headerIcons.add(
      "logout",
      `<template>
        <li class="logout">
          <DButton
            @action={{routeAction "logout"}}
            class="btn-flat icon"
            @icon="sign-out-alt"
            @title="user.log_out"
            @label="user.log_out"
          />
        </li>
      </template>`,
      { before: "auth" }
    );
  }
});

.d-header-icons .logout {
  margin-left: 1em;

  button.icon {
    width: auto;

    padding-left: 0.5em;
    padding-right: 0.5em;

    svg {
      margin-right: 0.2em;
      width: 1em;
    }
  }
}

image

3 إعجابات
3

حسنًا، لقد قمت بتطبيقه، لكنني سأقدر أي اختبار قبل تقديمه إلى Meta…

(لقد انتهى بي الأمر باستخدام Central Theme Header User Icons - #4 by carson الخاص بـ Carson كنقطة انطلاق)

discourse-header-logout-button
discourse-header-logout-button3792×1850 317 KB

إعجابَين (2)
4

لا أوصي باستخدام عنصر واجهة مستخدم؛ سيختفي في النهاية كجزء من التحديث الأساسي.
وينطبق الشيء نفسه على api.addToHeaderIcons؛ لقد تم إيقافه الآن لصالح api.headerIcons.add.

إليك بعض الاقتراحات:

  • أشجعك على استخدام GitHub - discourse/discourse-theme-skeleton: Template for Discourse themes كمرجع عند إنشاء مكون سمة. يحتوي على أحدث ملفات التكوين. إنه مفيد لتدقيق/تنسيق التعليمات البرمجية وهو ممارسة جيدة للحصول على هيكل قياسي.

  • عند استخدام بناء الجملة \u003ctemplate\u003e، أعد تسمية الملف بـ .gjs (glimmer JS)؛ وإلا فقد لا يعمل.

  • في مثالي، يمكنك نقل القالب إلى ملفه الخاص، على سبيل المثال:
    /javascripts/discourse/components/logout-header-button.gjs

import DButton from "discourse/components/d-button";
import routeAction from "discourse/helpers/route-action";

const LogoutHeaderButton = \u003ctemplate\u003e
  \u003cli class="logout"\u003e
    \u003cDButton
      @action={{routeAction "logout"}}
      class="btn-flat icon"
      @icon="sign-out-alt"
      @title="user.log_out"
      @label="user.log_out"
    /\u003e
  \u003c/li\u003e
\u003c/template\u003e;

export default LogoutHeaderButton;

ثم، في المُهيئ، يمكنك استيراد المكون واستخدامه كمعلمة في headerIcons:

import LogoutHeaderButton from "../components/logout-header-button";

export default apiInitializer("1.28.0", (api) =\u003e {
  if (api.getCurrentUser()) {
    api.headerIcons.add("logout", LogoutHeaderButton, { before: "auth" });
  }
});
  • يمكن تعديل موقع الزر. يمكنك قراءة الوثائق:

https://github.com/discourse/discourse/blob/main/app/assets/javascripts/discourse/app/lib/plugin-api.gjs#L1838-L1886

أخبرني إذا كانت لديك أسئلة. يمكنني دائمًا تقديم طلب سحب لاحقًا إذا كنت بحاجة إلى مثال. :+1:

3 إعجابات
5

رائع ببساطة. شكراً جزيلاً لك على تخصيص الوقت لإرشادي!

إعجاب واحد (1)
6

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.