كيفية التخلص من فقاعات الرسائل في الرسائل الخاصة

الدعم
1

سؤال سريع، أنا في عملية الترقية إلى 2.8.beta4 وأتساءل فقط عما إذا كان هناك طريقة للحفاظ على نمط الرسائل القديمة بدلاً من الفقاعات الجديدة. شكرًا!

2

مرحبًا زاك :slightly_smiling_face:

من الممكن تجاوز تنسيقات CSS الحالية إذا كنت ترغب في ذلك حقًا. جرّب شيئًا مثل هذا :thinking:
سيبدو هذا مشابهًا لمظهر Discourse الافتراضي الفاتح. ربما تكون أفضل خيار هو إزالة فئة archetype-private_message من body باستخدام JavaScript. هذا يحافظ على نمط المظهر المخصص.

عامة

.archetype-private_message {
  .topic-avatar,
  .topic-body {
    border-top: 1px solid var(--primary-low);
  }
  .topic-body {
    .cooked {
	  box-sizing: unset;
	  border: none;
	  margin-top: 0;
	  margin-left: 0;
	  padding: 1em 11px 0.25em 11px;
	  border-radius: 0;
	}
	&.highlighted {
	  animation: background-fade-highlight 2.5s ease-out;
	  .cooked {
	    animation: none;
	  }
	}
  }
  .post-menu-area {
    margin-top: 0;
  }
  .small-action-desc.timegap {
	flex-wrap: wrap;
	flex: 1 1 100%;
	align-items: center;
	padding: 1em 0;
	text-transform: uppercase;
	font-weight: bold;
	font-size: var(--font-down-1);
	color: var(--primary-medium);
  }
  .current-user-post,
  .current-user-post:not(.moderator) {
    .topic-body {
      .cooked {
        background: none;
	    border: none;
      }
      &.highlighted {
	    animation: background-fade-highlight 2.5s ease-out;
	    .cooked {
	      animation: none;
	    }
	  }
    }
  }
  .topic-map {
	border: 1px solid var(--primary-low);
	border-top: none;
	border-radius: 0;
    padding: 0;
	section {
	  border-top: 1px solid var(--primary-low)
	}
	.map:first-of-type .buttons .btn {
	  border: 0;
	  border-left: 1px solid var(--primary-low);
	  border-top: 1px solid transparent;
	  border-radius: 0;
	}
	.participants .user {
	  border: 1px solid var(--primary-low);
      border-radius: 0.25em;
      padding: 0;
      background: none;
	}
  }
}

سطح المكتب

.archetype-private_message {
  .topic-map {
    margin: 20px 0 20px 11px;
  }
}

الجوال

.archetype-private_message {
  .topic-post {
    margin: 0;
    article {
       border-top: 1px solid var(--primary-low); 
    }
  }
  .topic-body,
  .topic-avatar {
    border-top: none;
  }
  .topic-body {
    flex: unset;
  }
  .boxed .contents {
    padding: 10px 0 0 0;
  }
  .topic-map {
    margin: 0;
  }
}
3

بصفتي مبتدئًا تمامًا في جافاسكريبت، ما هي أفضل طريقة للقيام بذلك؟ تبدو حلقة while أو دالة تكرارية لا نهائية غير مثالية.

يبدو حلي الحالي كالتالي:

<script type="text/discourse-plugin" version="0.8">

    api.onPageChange(() =>{
        window.onload = noBubbles();
    });

    async function noBubbles()
    {
        var elements = document.getElementsByClassName('archetype-private_message');
        
        while(elements.length > 0){
            elements[0].classList.remove('archetype-private_message');
        }
    }
</script>

هذا يبدو أنيقًا بشكل معقول لعيون المبتدئين لدي، لكنني متأكد من أن شخصًا ما سيكون لديه طريقة أكثر كفاءة هههه
لا يزال يتعين عليك التراجع يدويًا عن الكثير من فقاعات الفقاعات باستخدام CSS لأنها تظهر للحظة عند التحميل، ولكن هذا على الأقل يمنعها من البقاء بطريقة بسيطة جدًا يجب أن تعمل بغض النظر عن التغييرات المستقبلية على سماتك.

4

سأجرب شيئًا كهذا ولكن لا أعرف ما إذا كان لهذا التغيير أي آثار جانبية. CSS هو دائمًا الأكثر أمانًا والأسهل للتغيير. لهذا السبب نشرت ذلك.

لا أتذكر ما كانت عليه فئة body قبل التغييرات ولكنني استبدلتها للتو بـ archetype-regular بدلاً من إزالة فئة archetype-private_message لأن هناك بعض CSS العام لفئة [class*=\"archetype-\"] لذلك نحتفظ بها في الرسائل الخاصة أيضًا.

رأس


  const body = document.querySelector("body");
  api.onPageChange(() => {
    if (body.classList.contains("archetype-private_message")) {
      body.classList.replace("archetype-private_message", "archetype-regular");
    }
  });
5

على حد علمي، يعمل بشكل رائع!