شريط علامات التبويب في Discours للجوال

GitHub repository:

Screenshots


Installation

Follow the instructions in this howto topic:

Customization

See the readme file in the theme’s GitHub repository.

Ideas to improve this theme are very welcome :slightly_smiling_face:


Update 24/12/2018:

You no longer need to overwrite any code in order to customize this theme. It’s now shipped with theme settings that allow customization for each of the 6 tabs with ability to disable any tab. See the readme file for details.

77 إعجابًا

Hey, I love this plugin. But I need to make the bar visible for logged out users too.

Is there a way to do this? Maybe something like

body:not(.logged-in) .d-tab-bar-theme {
    display: block
}
إعجاب واحد (1)

Hi Ben

The component’s JS code expects in several places that there is a logged in user, so CSS wouldn’t be enough to show the bar for anonymous users. My recommendation here is to fork the component and modify it to make it show up to anonymous users.

4 إعجابات

How to add a + new post button to the bar?

Hi Peter,

Discourse core has this neat route /new-topic that exists to make it possible to open the composer via a URL. So, all you need to do is use that route as the URL for the tab that should open the composer.

13 إعجابًا

This component is very useful and our forum users truly like it.

One of the most requested features is to display unread notifications badge and unread PMs badge on the keys at the bottom of the screen.

Does the Discourse JavaScript API allow us to do this?

7 إعجابات

Hi Nildarar,

I’m glad to here that your community enjoys this component and finds it useful, thanks! I support adding this feature to the component, but I can’t implement it right now (maybe in a few months). Though if someone else feels like working on this feature in the meantime, I’d be totally happy to merge a pull request with this feature.

Yes, the data needed is exposed in the currentUser object which is easily accessible. Most of the work for this feature would be 1) figuring out which tab(s) to display the badges on and 2) positioning the badges correctly with CSS.

8 إعجابات

Thanks @Osama
Based on your guidance, I found these objects.

<script type="text/discourse-plugin" version="0.8">
    let currentUser = api.getCurrentUser();
    console.log(currentUser);
</script>

// unread_high_priority_notifications: 2
// unread_notifications: 7
// unread_private_messages: 2

Is there a way we can register a function in an event or should we find out about this through the following trick?

$('.header-dropdown-toggle current-user').bind('DOMSubtreeModified', function(){
  console.log('changed');
});
5 إعجابات

Yes these are the correct properties that we need to consume, but with Discourse being an Ember application, we typically don’t subscribe to DOM events to update the UI. Instead, we should use what Ember calls ‘computed’ properties.

The component already defines a computed property here, so you can use that as an example. Once you’ve defined your computed property that determines whether or not the notifications badge should be displayed (based on the currentUser.unread_high_priority_notifications etc. properties), you will need to use your computed property in the Handlebars template in the same link at the bottom.

Note: implementing this feature in a separate component is tricky, so everything I said here assumes that you’re implementing this in the component itself, not a separate component.

8 إعجابات

Thank you, let me try :wink::+1:

6 إعجابات

شريط التبويب يظهر بخلفية بيضاء حتى في الوضع الداكن. لقد قمت بالتحديث من النسخة التجريبية 2.7.0 بيتا 1 إلى النسخة التجريبية 2.7.0 بيتا 3، وبعد ذلك بدأ ظهور الخلفية البيضاء. قبل ذلك، كان كل شيء يعمل بشكل ممتاز. حاولت أيضًا إزالة جميع مكونات السمة الأخرى وإزالة جميع التخصيصات للتأكد من عدم وجود أي شيء يتسبب في هذه المشكلة مع شريط التبويب. ولكن حتى في نسخة Discourse الأساسية، يظهر شريط التبويب بخلفية بيضاء في الوضع الداكن. هل يمكن لأحد النظر في هذا الأمر من فضلك؟

5 إعجابات

لقد دفعتُ إصلاحًا لهذه المشكلة. شكرًا لإخباري!

9 إعجابات

يبدو أن هذا التبويب يتسبب في تغطية شريط تقدم الموضوع لزر الرد في بعض الحالات (على سبيل المثال، يمكنني تكرار هذه المشكلة باستخدام Chrome لمحاكاة iPhone SE)

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

4 إعجابات

لدي مشكلة مماثلة. زر “جدول المحتويات” لا يظهر عند تفعيل شريط التنقل الجوال. سيكون من الرائع ألا نضطر للاختيار بين الميزتين لأننا نحب كليهما!

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

@haroldfy لا أستطيع إعادة إنتاج هذه المشكلة هنا في Meta أو منشئ السمات. ربما لديك سمات أو تخصيصات أخرى تتداخل؟ يمكنني إلقاء نظرة إذا كان موقعك عامًا.

@littleviolette أحاول تجنب إضافة كود يستهدف عناصر مكون آخر قدر الإمكان. في هذه الحالة، يمكنك إنشاء مكون منفصل يحتوي على هذا CSS لدفع زر ToC فوق الشريط:

html:not(.anon) .d-toc-toggle {
  margin-bottom: 55px;
}
8 إعجابات

شكرًا لك على متابعتك لهذا الأمر. الموقع خاص، وسأحاول تعطيل التخصيصات الأخرى والتصحيح من هناك.

4 إعجابات

أعتقد أنني اكتشفت خطأً، ولا يمكنني إنتاجه إلا في إصدار PWA من موقعي على iOS (يبدو أنه يعمل بشكل جيد على Android وعلى Safari في iOS).

من المفترض أن يكون شريط التبويب مقفلاً دائمًا، أليس كذلك؟ هذا هو شكله عندما يكون صحيحًا:

ثم أقوم بإلغاء قفل شاشتي، وأنتقل إلى وضع الأفقي، ثم أعود إلى الوضع العمودي، ثم أتمرّر قليلاً للأعلى، وعندها يحدث هذا:

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

واجهتُ نفس المشكلة @haroldfy @littleviolette. يمكنك إصلاحها باستخدام:

html:not(.anon) #topic-progress-wrapper.docked{
margin-bottom:0!important;
}
7 إعجابات

شريط التبويب يتعارض أيضًا مع ميزة تصفية المنشورات الأساسية التي تضع تذييلًا ثابتًا (posts-filtered-notice) عند التصفية.

على أي حال، شكرًا لك على هذا الإصدار الرائع من TC :slight_smile:

5 إعجابات

مكون سمة رائع، شكرًا لك

لديّ طلب وأود التحقق مما إذا كان هناك اهتمام بميزة ‘التمرير للإخفاء’؟

بشكل أساسي، يختفي الشريط السفلي تلقائيًا عندما يقوم المستخدم بالتمرير لأسفل، ثم يظهر مرة أخرى عندما يتمرر للأعلى

مثال وجدته هنا

ستوفر هذه الميزة بحكمة مساحة شاشة ثمينة على الأجهزة المحمولة، وتجربة استهلاك المحتوى أفضل مع مساحة أكبر

9 إعجابات