From 75c294a6924442a8a84a5db424786793ff47a34f Mon Sep 17 00:00:00 2001
From: Vyrtsev Mikhail <reeywhaar@gmail.com>
Date: Sun, 30 Jun 2019 04:36:46 +0300
Subject: [PATCH] move thread related styles to thread component

---
 .../comment/_theme/_dark/comment_theme_dark.scss      |  8 --------
 frontend/app/components/comment/styles.ts             |  1 -
 .../thread/_theme_dark/thread_theme_dark.scss         |  7 +++++++
 frontend/app/components/thread/index.ts               |  3 +++
 .../_level/comment_level.scss => thread/thread.scss}  |  7 ++++---
 frontend/app/components/thread/thread.tsx             | 11 ++++++++---
 6 files changed, 22 insertions(+), 15 deletions(-)
 create mode 100644 frontend/app/components/thread/_theme_dark/thread_theme_dark.scss
 rename frontend/app/components/{comment/_level/comment_level.scss => thread/thread.scss} (63%)

diff --git a/frontend/app/components/comment/_theme/_dark/comment_theme_dark.scss b/frontend/app/components/comment/_theme/_dark/comment_theme_dark.scss
index 31f855b3..d6b17955 100644
--- a/frontend/app/components/comment/_theme/_dark/comment_theme_dark.scss
+++ b/frontend/app/components/comment/_theme/_dark/comment_theme_dark.scss
@@ -97,12 +97,4 @@
       }
     }
   }
-
-  & ~ .thread {
-    border-left-color: rgba(255, 255, 255, 0.35);
-  }
-
-  & ~ .thread_level_5 > .thread_level_5 {
-    border-left-color: rgba(255, 255, 255, 0.2);
-  }
 }
diff --git a/frontend/app/components/comment/styles.ts b/frontend/app/components/comment/styles.ts
index 3fa68a40..4acbc281 100644
--- a/frontend/app/components/comment/styles.ts
+++ b/frontend/app/components/comment/styles.ts
@@ -40,7 +40,6 @@ require('./__vote/_type/_up/comment__vote_type_up.scss');
 
 require('./_collapsed/comment_collapsed.scss');
 require('./_editing/comment_editing.scss');
-require('./_level/comment_level.scss');
 require('./_replying/comment_replying.scss');
 require('./_useless/comment_useless.scss');
 
diff --git a/frontend/app/components/thread/_theme_dark/thread_theme_dark.scss b/frontend/app/components/thread/_theme_dark/thread_theme_dark.scss
new file mode 100644
index 00000000..9bd1f8a9
--- /dev/null
+++ b/frontend/app/components/thread/_theme_dark/thread_theme_dark.scss
@@ -0,0 +1,7 @@
+.thread_theme_dark {
+  border-left-color: rgba(255, 255, 255, 0.35);
+}
+
+.thread_theme_dark.thread_level_6 {
+  border-left-color: rgba(255, 255, 255, 0.2);
+}
diff --git a/frontend/app/components/thread/index.ts b/frontend/app/components/thread/index.ts
index 857d107f..e4069c8f 100644
--- a/frontend/app/components/thread/index.ts
+++ b/frontend/app/components/thread/index.ts
@@ -1 +1,4 @@
 export { ConnectedThread as Thread } from './thread';
+
+require('./thread.scss');
+require('./_theme_dark/thread_theme_dark.scss');
diff --git a/frontend/app/components/comment/_level/comment_level.scss b/frontend/app/components/thread/thread.scss
similarity index 63%
rename from frontend/app/components/comment/_level/comment_level.scss
rename to frontend/app/components/thread/thread.scss
index 6cb80cbf..9117c12c 100644
--- a/frontend/app/components/comment/_level/comment_level.scss
+++ b/frontend/app/components/thread/thread.scss
@@ -1,12 +1,13 @@
-.thread > .thread {
+.thread_indented {
   padding-left: 17px;
   border-left: 1px dotted rgba(0, 0, 0, 0.15);
 }
 
-.thread_level_4 .thread {
+.thread_level_5,
+.thread_level_6 {
   padding-left: 5px;
 }
 
-.thread_level_5 > .thread_level_5 {
+.thread_level_6 {
   border-left: 1px dotted rgba(0, 0, 0, 0.08);
 }
diff --git a/frontend/app/components/thread/thread.tsx b/frontend/app/components/thread/thread.tsx
index 5d37127f..d51ebf25 100644
--- a/frontend/app/components/thread/thread.tsx
+++ b/frontend/app/components/thread/thread.tsx
@@ -4,7 +4,7 @@ import { connect } from 'preact-redux';
 import b from 'bem-react-helper';
 
 import { ConnectedComment as Comment } from '@app/components/comment/connected-comment';
-import { Node } from '@app/common/types';
+import { Node, Theme } from '@app/common/types';
 import { getThreadIsCollapsed } from '@app/store/thread/getters';
 import { StoreState } from '@app/store';
 
@@ -13,6 +13,7 @@ interface Props {
   data: Node;
   isCommentsDisabled: boolean;
   level: number;
+  theme: Theme;
   mix?: string;
 
   getPreview(text: string): Promise<string>;
@@ -23,11 +24,14 @@ function Thread(props: RenderableProps<Props>) {
     collapsed,
     data: { comment, replies = [] },
     level,
+    theme,
   } = props;
 
+  const indented = level > 0;
+
   return (
     <div
-      className={b('thread', props, { level: props.level })}
+      className={b('thread', props, { level, theme, indented })}
       role={['listitem'].concat(!collapsed && replies.length ? 'list' : []).join(' ')}
       aria-expanded={!collapsed}
     >
@@ -39,7 +43,7 @@ function Thread(props: RenderableProps<Props>) {
           <ConnectedThread
             key={thread.comment.id}
             data={thread}
-            level={Math.min(level + 1, 5)}
+            level={Math.min(level + 1, 6)}
             getPreview={props.getPreview}
           />
         ))}
@@ -50,4 +54,5 @@ function Thread(props: RenderableProps<Props>) {
 export const ConnectedThread = connect((state: StoreState, props: { data: Node }) => ({
   collapsed: getThreadIsCollapsed(state, props.data.comment),
   isCommentsDisabled: !!state.info.read_only,
+  theme: state.theme,
 }))(Thread);