sforkowany z mirror/soapbox
Style the StatusInteractionBar
rodzic
3547fd093a
commit
c8f89ce8c1
|
@ -9,22 +9,37 @@ export class StatusInteractionBar extends React.Component {
|
|||
status: ImmutablePropTypes.map,
|
||||
}
|
||||
|
||||
render() {
|
||||
getNormalizedReacts = () => {
|
||||
const { status } = this.props;
|
||||
const emojiReacts = status.getIn(['pleroma', 'emoji_reactions']);
|
||||
const favouritesCount = status.get('favourites_count');
|
||||
return reduceEmoji(emojiReacts, favouritesCount).reverse();
|
||||
}
|
||||
|
||||
render() {
|
||||
const emojiReacts = this.getNormalizedReacts();
|
||||
const count = emojiReacts.reduce((acc, cur) => (
|
||||
acc + cur.get('count')
|
||||
), 0);
|
||||
|
||||
if (count < 1) return null;
|
||||
|
||||
return (
|
||||
<div className='emoji-reacts'>
|
||||
{reduceEmoji(emojiReacts, favouritesCount).map((e, i) => (
|
||||
<span className='emoji-react' key={i}>
|
||||
<span
|
||||
className='emoji-react--emoji'
|
||||
dangerouslySetInnerHTML={{ __html: emojify(e.get('name')) }}
|
||||
/>
|
||||
<span className='emoji-react--count'>{e.get('count')}</span>
|
||||
</span>
|
||||
))}
|
||||
<div className='emoji-reacts-container'>
|
||||
<div className='emoji-reacts'>
|
||||
{emojiReacts.map((e, i) => (
|
||||
<span className='emoji-react' key={i}>
|
||||
<span
|
||||
className='emoji-react__emoji'
|
||||
dangerouslySetInnerHTML={{ __html: emojify(e.get('name')) }}
|
||||
/>
|
||||
<span className='emoji-react__count'>{e.get('count')}</span>
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
<div className='emoji-reacts__count'>
|
||||
{count}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -32,6 +32,7 @@
|
|||
@import 'gabsocial/components/group-sidebar-panel';
|
||||
@import 'gabsocial/components/sidebar-menu';
|
||||
@import 'gabsocial/components/hotkeys-modal';
|
||||
@import 'gabsocial/components/emoji-reacts';
|
||||
|
||||
@import 'gabsocial/polls';
|
||||
@import 'gabsocial/introduction';
|
||||
|
|
|
@ -0,0 +1,49 @@
|
|||
.emoji-react {
|
||||
display: inline-block;
|
||||
transition: 0.1s;
|
||||
|
||||
&__emoji {
|
||||
img {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
filter: drop-shadow(2px 0 0 #fff); // FIXME: Use theme color
|
||||
}
|
||||
}
|
||||
|
||||
&__count {
|
||||
display: none;
|
||||
}
|
||||
|
||||
+ .emoji-react {
|
||||
margin-right: -8px;
|
||||
}
|
||||
}
|
||||
|
||||
.emoji-reacts {
|
||||
display: inline-flex;
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
.emoji-reacts-container {
|
||||
display: inline-flex;
|
||||
|
||||
&:hover {
|
||||
.emoji-react {
|
||||
margin: 0;
|
||||
|
||||
&__count {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
|
||||
.emoji-reacts__count {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.emoji-reacts__count,
|
||||
.emoji-react__count {
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
}
|
Ładowanie…
Reference in New Issue