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

الدعم
1

Just a quick question, I am in the process of upgrading to 2.8.beta4 and I am just curious if there is a way to keep the old PM style, rather than have the new bubbles. Thanks!

3 إعجابات
2

Hi Zac :slightly_smiling_face:

It is possible with override the current css if you really want to. Try something like this :thinking:
This will looks like the default Discourse Light theme. Probably the best option is remove the archetype-private_message class from body with js. That keeps the custom theme style.

COMMON

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

DESKTOP

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

MOBILE

.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;
  }
}
7 إعجابات
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 لأنها تظهر للحظة عند التحميل، ولكن هذا على الأقل يمنعها من البقاء بطريقة بسيطة جدًا يجب أن تعمل بغض النظر عن التغييرات المستقبلية على سماتك.

إعجاب واحد (1)
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");
    }
  });
إعجابَين (2)
5

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

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