دمج مجامع مشاكل Jira داخل أزرار المواضيع

مرحبًا :wave:

بدأت اليوم في تطبيق جامعي للمشكلات في منتدانا، وأود مشاركة مكون السمة البسيط للغاية الذي أنشأته.

في النهاية، سيظهر بهذا الشكل.


ما الذي تحتاجه

  • جامع مشكلات Jira
  • بعض المعرفة بـ JavaScript

الحصول على معرف جامع المشكلات

لكي يعمل الجامع، نحتاج إلى معرفه (ID).

انتقل إلى جامع المشكلات الذي تختاره واستخرج معلمة collectorId من عنوان URL

https://tosdr.atlassian.net/secure/ViewCollector!default.jspa?projectKey=BE&collectorId=176cb88e

في حالتي، هو 176cb88e

أنشئ مكون سمة جديدًا

واستخدم الكود التالي في قسم \u003c/head\u003e

استبدل المفاتيح التالية بقيمها

  • MY_COLLECTOR_ID -\u003e 176cb88e
  • REPLACE_ME_AJAX -\u003e مصدر السكربت من قسم “تضمين جامع المشكلات هذا” -\u003e “تضمين في JavaScript” الخاص بجامع مشكلات Jira الخاص بك
  • MY_PROJECT_KEY -\u003e بمفتاح مشروع جامع المشكلات الخاص بك، إذا كنت تنوي إدراج عدة جامعات للمشكلات.
\u003cscript type="text/discourse-plugin" version="0.8"\u003e
api.decorateCooked(() =\u003e {
    window.ATL_JQ_PAGE_PROPS = $.extend(window.ATL_JQ_PAGE_PROPS, {
        'MY_COLLECTOR_ID': {
            "triggerFunction": function(showCollectorDialog) {
                jQuery(document).on('click', "[data-wrap='jira-bug-MY_PROJECT_KEY'] \u003e p", function(e) {
                    e.preventDefault();
                    showCollectorDialog();
                });
            }
        }
    });
});
\u003c/script\u003e
\u003cscript\u003e
$(document).ready(function() {
    jQuery.ajax({
        url: "REPLACE_ME_AJAX",
        type: "get",
        cache: true,
        dataType: "script"
    });
});
\u003c/script\u003e

لقد أنشأت زرين CSS فقط لاحتياجاتي، فلا تتردد في إضافة المزيد

[data-wrap*="jira-bug-"] {
    p {
        border-radius: 2em;
    \tbox-sizing: border-box;
    \tdisplay: inline-flex;
    \talign-items: center;
    \tjustify-content: center;
    \tmargin: 0;
    \tpadding: 0.53em 0.8em;
    \tborder: none;
    \tfont-weight: normal;
    \tmargin: 1px;
    \tfont-size: var(--font-0);
    \tline-height: normal;
    \tcolor: var(--primary-low);
    \tbackground: var(--danger);
    \tcursor: pointer;
    \ttransition: all 0.25s;
    }
    p:hover {
     \tcolor: #000;
    \tbackground: #fff;
    \tborder-color: #0060df;
    }
}

[data-wrap*="jira-feature"] {
    p {
        border-radius: 2em;
    \tbox-sizing: border-box;
    \tdisplay: inline-flex;
    \talign-items: center;
    \tjustify-content: center;
    \tmargin: 0;
    \tpadding: 0.53em 0.8em;
    \tborder: none;
    \tmargin: 1px;
    \tfont-weight: normal;
    \tfont-size: var(--font-0);
    \tline-height: normal;
    \tcolor: var(--secondary-low);
    \tbackground: var(--success-medium);
    \tcursor: pointer;
    \ttransition: all 0.25s;
    }
    p:hover {
     \tcolor: #000;
    \tbackground: #fff;
    \tborder-color: #0060df;
    }
}

الآن، الانتقال إلى تضمين جامع المشكلات في المنشورات:

[wrap=jira-bug-MY_PROJECT_KEY]
:bug: الإبلاغ عن خلل
[/wrap]


[wrap=jira-feature-MY_PROJECT_KEY]
:bulb: اقتراح ميزة
[/wrap]

هذا كل شيء! الآن أصبح لديك جامع مشكلات يعمل كزر في منشورك!

3 إعجابات