wassname/talk
1
0
Fork 0
mirror of https://github.com/wassname/talk.git synced 2026-07-19 11:28:50 +08:00
Code Issues Packages Projects Releases Wiki Activity

Tweak up indent level padding/margins (#3025)

Browse Source 
CORL-1186

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
This commit is contained in:
Nick Funk
2020-07-16 17:31:55 +00:00
committed by GitHub
co-authored by kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
parent 58a91c2e42
commit bb48e1fe33
9 changed files with 30 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/core/client/stream/tabs/Comments/Indent.css
+11 -11
View File
@@ -1,40 +1,40 @@
.root {
}
.root {}
.collapsed {
}
.collapsed {}
.open {
.open {}
.openPadded {
padding-left: var(--spacing-1);
}
.level1 {
margin-left: var(--spacing-5);
margin-left: var(--spacing-3);
border-left: 2px solid var(--palette-grey-600);
}
.level2 {
margin-left: calc(var(--spacing-5) + var(--spacing-2));
margin-left: calc(2 * var(--spacing-3));
border-left: 2px solid var(--palette-grey-500);
}
.level3 {
margin-left: calc(var(--spacing-5) + 2 * var(--spacing-2));
margin-left: calc(3 * var(--spacing-3));
border-left: 2px solid #8e9ba5;
}
.level4 {
margin-left: calc(var(--spacing-5) + 3 * var(--spacing-2));
margin-left: calc(4 * var(--spacing-3));
border-left: 2px solid #b8bcbd;
}
.level5 {
margin-left: calc(var(--spacing-5) + 4 * var(--spacing-2));
margin-left: calc(5 * var(--spacing-3));
border-left: 2px solid #cccfd0;
}
.level6 {
margin-left: calc(var(--spacing-5) + 5 * var(--spacing-2));
margin-left: calc(6 * var(--spacing-3));
border-left: 2px solid #e1e2e3;
}
src/core/client/stream/tabs/Comments/Indent.tsx
+2
View File
@@ -38,6 +38,8 @@ const Indent: FunctionComponent<IndentProps> = (props) => {
[styles.noBorder]: props.noBorder,
[styles.collapsed]: props.collapsed,
[styles.open]: !props.collapsed,
[styles.openPadded]:
!props.collapsed && props.level ? props.level > 0 : false,
})}
>
{props.children}
src/core/client/stream/tabs/Comments/__snapshots__/Indent.spec.tsx.snap
+2 -2
View File
@@ -19,7 +19,7 @@ exports[`renders level1 1`] = `
className="Indent-root"
>
<div
className="Indent-level1 coral coral-indent coral-indent-1 Indent-open"
className="Indent-level1 coral coral-indent coral-indent-1 Indent-open Indent-openPadded"
>
<div>
Hello World
@@ -33,7 +33,7 @@ exports[`renders without border 1`] = `
className="Indent-root"
>
<div
className="Indent-level1 coral coral-indent coral-indent-1 Indent-noBorder Indent-open"
className="Indent-level1 coral coral-indent coral-indent-1 Indent-noBorder Indent-open Indent-openPadded"
>
<div>
Hello World
src/core/client/stream/test/comments/permalink/__snapshots__/permalinkView.spec.tsx.snap
+2 -2
View File
@@ -913,7 +913,7 @@ exports[`renders permalink view 1`] = `
className="IndentedComment-open coral coral-comment-collapse-toggle-indent Indent-root"
>
<div
className="Indent-level1 coral coral-indent coral-indent-1 Indent-open"
className="Indent-level1 coral coral-indent coral-indent-1 Indent-open Indent-openPadded"
>
<div
className="Box-root Flex-root Flex-flex Flex-alignFlexStart gutter Flex-spacing-1"
@@ -1205,7 +1205,7 @@ exports[`renders permalink view 1`] = `
className="IndentedComment-open coral coral-comment-collapse-toggle-indent Indent-root"
>
<div
className="Indent-level1 coral coral-indent coral-indent-1 Indent-open"
className="Indent-level1 coral coral-indent coral-indent-1 Indent-open Indent-openPadded"
>
<div
className="Box-root Flex-root Flex-flex Flex-alignFlexStart gutter Flex-spacing-1"
src/core/client/stream/test/comments/stream/__snapshots__/postLocalReply.spec.tsx.snap
+5 -5
View File
@@ -12,7 +12,7 @@ exports[`post a reply: open reply form 1`] = `
className="IndentedComment-open coral coral-comment-collapse-toggle-indent Indent-root"
>
<div
className="Indent-level3 coral coral-indent coral-indent-3 Indent-open"
className="Indent-level3 coral coral-indent coral-indent-3 Indent-open Indent-openPadded"
>
<div
className="Box-root Flex-root Flex-flex Flex-alignFlexStart gutter Flex-spacing-1"
@@ -497,7 +497,7 @@ exports[`post a reply: optimistic response 1`] = `
className="IndentedComment-open IndentedComment-blur coral coral-comment-collapse-toggle-indent Indent-root"
>
<div
className="Indent-level3 coral coral-indent coral-indent-3 Indent-open"
className="Indent-level3 coral coral-indent coral-indent-3 Indent-open Indent-openPadded"
>
<div
className="Box-root Flex-root Flex-flex Flex-alignFlexStart gutter Flex-spacing-1"
@@ -1071,7 +1071,7 @@ exports[`renders comment stream 1`] = `
className="IndentedComment-open coral coral-comment-collapse-toggle-indent Indent-root"
>
<div
className="Indent-level1 coral coral-indent coral-indent-1 Indent-open"
className="Indent-level1 coral coral-indent coral-indent-1 Indent-open Indent-openPadded"
>
<div
className="Box-root Flex-root Flex-flex Flex-alignFlexStart gutter Flex-spacing-1"
@@ -1368,7 +1368,7 @@ exports[`renders comment stream 1`] = `
className="IndentedComment-open coral coral-comment-collapse-toggle-indent Indent-root"
>
<div
className="Indent-level2 coral coral-indent coral-indent-2 Indent-open"
className="Indent-level2 coral coral-indent coral-indent-2 Indent-open Indent-openPadded"
>
<div
className="Box-root Flex-root Flex-flex Flex-alignFlexStart gutter Flex-spacing-1"
@@ -1665,7 +1665,7 @@ exports[`renders comment stream 1`] = `
className="IndentedComment-open coral coral-comment-collapse-toggle-indent Indent-root"
>
<div
className="Indent-level3 coral coral-indent coral-indent-3 Indent-open"
className="Indent-level3 coral coral-indent coral-indent-3 Indent-open Indent-openPadded"
>
<div
className="Box-root Flex-root Flex-flex Flex-alignFlexStart gutter Flex-spacing-1"
src/core/client/stream/test/comments/stream/__snapshots__/postReply.spec.tsx.snap
+1 -1
View File
@@ -453,7 +453,7 @@ exports[`post a reply: optimistic response 1`] = `
className="IndentedComment-open IndentedComment-blur coral coral-comment-collapse-toggle-indent Indent-root"
>
<div
className="Indent-level1 coral coral-indent coral-indent-1 Indent-open"
className="Indent-level1 coral coral-indent coral-indent-1 Indent-open Indent-openPadded"
>
<div
className="Box-root Flex-root Flex-flex Flex-alignFlexStart gutter Flex-spacing-1"
src/core/client/stream/test/comments/stream/__snapshots__/renderReplies.spec.tsx.snap
+4 -4
View File
@@ -21,7 +21,7 @@ exports[`renders reply list 1`] = `
className="IndentedComment-open coral coral-comment-collapse-toggle-indent Indent-root"
>
<div
className="Indent-level1 coral coral-indent coral-indent-1 Indent-open"
className="Indent-level1 coral coral-indent coral-indent-1 Indent-open Indent-openPadded"
>
<div
className="Box-root Flex-root Flex-flex Flex-alignFlexStart gutter Flex-spacing-1"
@@ -318,7 +318,7 @@ exports[`renders reply list 1`] = `
className="IndentedComment-open coral coral-comment-collapse-toggle-indent Indent-root"
>
<div
className="Indent-level2 coral coral-indent coral-indent-2 Indent-open"
className="Indent-level2 coral coral-indent coral-indent-2 Indent-open Indent-openPadded"
>
<div
className="Box-root Flex-root Flex-flex Flex-alignFlexStart gutter Flex-spacing-1"
@@ -610,7 +610,7 @@ exports[`renders reply list 1`] = `
className="IndentedComment-open coral coral-comment-collapse-toggle-indent Indent-root"
>
<div
className="Indent-level2 coral coral-indent coral-indent-2 Indent-open"
className="Indent-level2 coral coral-indent coral-indent-2 Indent-open Indent-openPadded"
>
<div
className="Box-root Flex-root Flex-flex Flex-alignFlexStart gutter Flex-spacing-1"
@@ -905,7 +905,7 @@ exports[`renders reply list 1`] = `
className="IndentedComment-open coral coral-comment-collapse-toggle-indent Indent-root"
>
<div
className="Indent-level1 coral coral-indent coral-indent-1 Indent-open"
className="Indent-level1 coral coral-indent coral-indent-1 Indent-open Indent-openPadded"
>
<div
className="Box-root Flex-root Flex-flex Flex-alignFlexStart gutter Flex-spacing-1"
src/core/client/stream/test/comments/stream/__snapshots__/showAllReplies.spec.tsx.snap
+2 -2
View File
@@ -21,7 +21,7 @@ exports[`renders comment stream 1`] = `
className="IndentedComment-open coral coral-comment-collapse-toggle-indent Indent-root"
>
<div
className="Indent-level1 coral coral-indent coral-indent-1 Indent-open"
className="Indent-level1 coral coral-indent coral-indent-1 Indent-open Indent-openPadded"
>
<div
className="Box-root Flex-root Flex-flex Flex-alignFlexStart gutter Flex-spacing-1"
@@ -276,7 +276,7 @@ exports[`renders comment stream 1`] = `
className="Indent-root"
>
<div
className="Indent-level1 coral coral-indent coral-indent-1 Indent-noBorder Indent-open"
className="Indent-level1 coral coral-indent coral-indent-1 Indent-noBorder Indent-open Indent-openPadded"
>
<button
aria-controls="coral-comments-replyList-log--comment-0"
src/core/client/stream/test/comments/stream/__snapshots__/showConversation.spec.tsx.snap
+1 -1
View File
@@ -12,7 +12,7 @@ exports[`renders deepest comment with link 1`] = `
className="IndentedComment-open coral coral-comment-collapse-toggle-indent Indent-root"
>
<div
className="Indent-level3 coral coral-indent coral-indent-3 Indent-open"
className="Indent-level3 coral coral-indent coral-indent-3 Indent-open Indent-openPadded"
>
<div
className="Box-root Flex-root Flex-flex Flex-alignFlexStart gutter Flex-spacing-1"