Browse Source

评论预览显示两层,微调显示界面

pull/4/head
欧醚 4 years ago
parent
commit
4f1f2540a4
5 changed files with 35 additions and 8 deletions
  1. +18
    -4
      app/javascript/mastodon/components/status.js
  2. +9
    -3
      app/javascript/mastodon/containers/status_container.js
  3. +6
    -0
      app/javascript/styles/closed-social/timeline_comments.scss
  4. +1
    -0
      app/javascript/styles/mastodon-light/variables.scss
  5. +1
    -1
      app/javascript/styles/mastodon/variables.scss

+ 18
- 4
app/javascript/mastodon/components/status.js View File

@ -298,14 +298,28 @@ class Status extends ImmutablePureComponent {
renderChildren (list) {
return list.map(id => (
return list.map(e => (
e.id ?
<div key={`comments-1-${e.id}`}>
<StatusContainer
key={e.id}
id={e.id}
onMoveUp={()=>{}}
onMoveDown={()=>{}}
contextType='comments-timeline'
/>
{ e.sonsIds &&
<div key={`comments-2-${e.id}`} className='comments-timeline-2'>{this.renderChildren(e.sonsIds)}</div>
}
</div>
:
<StatusContainer
key={id}
id={id}
key={e}
id={e}
onMoveUp={()=>{}}
onMoveDown={()=>{}}
contextType='comments-timeline'
/>
/>
));
}

+ 9
- 3
app/javascript/mastodon/containers/status_container.js View File

@ -43,10 +43,16 @@ const makeMapStateToProps = () => {
const getStatus = makeGetStatus();
const mapStateToProps = (state, props) => {
const status = getStatus(state, props);
const status = getStatus(state, props);
const sons = state.getIn(['contexts', 'replies', status.getIn(['reblog', 'id'], props.id)]);
return ({
status: getStatus(state, props),
sonsIds: props.showThread ? state.getIn(['contexts', 'replies', status.getIn(['reblog', 'id'], props.id)]) : null,
'status': status,
'sonsIds': (props.showThread && sons) ? sons.map(id => ({
'id': id,
'sonsIds' : state.getIn(['contexts', 'replies', id])
}))
:
null,
})
}

+ 6
- 0
app/javascript/styles/closed-social/timeline_comments.scss View File

@ -7,6 +7,7 @@
transform: scale(0.85);
transform-origin: 100% 0%;
margin-bottom: -32px;
margin-right:8px;
position: absolute;
z-index:9;
&:hover {
@ -15,13 +16,18 @@
mask-image: none;
z-index:99;
background: $tc-background;
box-shadow: $primary-text-color 3.2px 3.2px 8px;
}
&:active {
max-height: none;
-webkit-mask-image: none;
mask-image: none;
background: $tc-background;
box-shadow: $primary-text-color 3.2px 3.2px 8px;
}
& .comments-timeline-2 {
margin-left:40px;
}
}
.comments-timeline__wrapper {

+ 1
- 0
app/javascript/styles/mastodon-light/variables.scss View File

@ -28,6 +28,7 @@ $inverted-text-color: $black !default;
$lighter-text-color: $classic-base-color !default;
$light-text-color: #444b5d;
$tc-background: $white !default;
//Newly added colors
$account-background-color: $white !default;

+ 1
- 1
app/javascript/styles/mastodon/variables.scss View File

@ -40,7 +40,7 @@ $lighter-text-color: $ui-base-lighter-color !default;
$light-text-color: $ui-primary-color !default;
//timeline comeents
$tc-background: lighten($ui-base-color, 8%) !default;
$tc-background: $classic-base-color !default;
// Language codes that uses CJK fonts
$cjk-langs: ja, ko, zh-CN, zh-HK, zh-TW;

Loading…
Cancel
Save