Flatten threads: add UI components to messages
- A quote is added to messages to show which was the previous message in
the reply chain.
- A "reply" button is added to messages to allow users to compose a
comment which is added at the end of the reply chain.
- A bug is fixed in calculating the parent reply ID in the extra info
object. Now parent reply means the first message in a reply chain,
while previous reply means the previous message in the reply chain.
Bug: twpowertools:153
Change-Id: I699507ade52e80287dd634e61f835d53af6a904d
diff --git a/src/static/css/ccdarktheme.css b/src/static/css/ccdarktheme.css
index 0282658..a793a51 100644
--- a/src/static/css/ccdarktheme.css
+++ b/src/static/css/ccdarktheme.css
@@ -40,6 +40,9 @@
--TWPT-md-ripple-hover-state-layer-color: white;
--TWPT-md-ripple-pressed-state-layer-color: white;
--TWPT-custom-md-icon-color: var(--TWPT-subtle-button-background);
+
+ /* TWPT features variables */
+ --TWPT-dark-flatten-replies-more-bg: rgba(89, 89, 89, 0.9);
}
body {
diff --git a/src/static/css/flatten_threads.css b/src/static/css/flatten_threads.css
new file mode 100644
index 0000000..8a06ef3
--- /dev/null
+++ b/src/static/css/flatten_threads.css
@@ -0,0 +1,12 @@
+body.TWPT-flattenthreads-enabled ec-thread sc-tailwind-thread-message-message-list:last-child sc-tailwind-thread-message-message-actions {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ gap: 0.75rem;
+ margin-top: 1rem;
+}
+
+body.TWPT-flattenthreads-enabled ec-thread sc-tailwind-thread-message-message-list:last-child sc-tailwind-thread-message-message-actions > * {
+ margin: 0;
+ padding: 0;
+}
diff --git a/src/static/css/thread_toolbar.css b/src/static/css/thread_toolbar.css
index cd1ac48..4c1b35f 100644
--- a/src/static/css/thread_toolbar.css
+++ b/src/static/css/thread_toolbar.css
@@ -4,6 +4,28 @@
}
/* Hide reply button when a thread is flattened, since it might not work correctly */
-body.TWPT-flattenthreads-enabled ec-thread sc-tailwind-thread-message-message-list:last-child .scTailwindThreadMessageMessagecardsub-content {
- display: none;
+@supports selector(:has(div)) {
+ body.TWPT-flattenthreads-enabled ec-thread sc-tailwind-thread-message-message-list:last-child .scTailwindThreadMessageMessagecardsub-content:not(:has(.scTailwindThreadMessageMessagecardreply-editor)) {
+ display: none;
+ }
+}
+/* Fallback support for browsers which do not support :has(...) */
+@supports not selector(:has(div)) {
+ body.TWPT-flattenthreads-enabled ec-thread sc-tailwind-thread-message-message-list:last-child .scTailwindThreadMessageMessagecardsub-content .scTailwindThreadMessageMessagecardaction {
+ padding: 0;
+ }
+
+ body.TWPT-flattenthreads-enabled ec-thread sc-tailwind-thread-message-message-list:last-child .scTailwindThreadMessageMessagecardsub-content .scTailwindThreadMessageMessagecardaction .scTailwindThreadMessageMessagecardadd-comment {
+ display: none;
+ }
+
+ body.TWPT-flattenthreads-enabled ec-thread sc-tailwind-thread-message-message-list:last-child .scTailwindThreadMessageMessagecardsub-content .scTailwindThreadMessageMessagecardaction .scTailwindThreadMessageMessagecardreply-editor {
+ margin: 0.5rem;
+ }
+
+ @media (min-width: 37.5rem) {
+ body.TWPT-flattenthreads-enabled ec-thread sc-tailwind-thread-message-message-list:last-child .scTailwindThreadMessageMessagecardsub-content .scTailwindThreadMessageMessagecardaction .scTailwindThreadMessageMessagecardreply-editor {
+ margin: 0.5rem 3.5rem;
+ }
+ }
}