gitea/nas
1
0
Fork 2
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

Support wide custom emojis

Browse source
This commit is contained in:
KMY 2023-03-08 16:32:54 +09:00
parent 92df4674ff
commit 3557d2c135
7 changed files with 36 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

6
app/javascript/mastodon/components/status_action_bar.jsx
View file

@ -369,13 +369,17 @@ class StatusActionBar extends ImmutablePureComponent {
<IconButton className='status__action-bar__button' title={intl.formatMessage(messages.hide)} icon='eye' onClick={this.handleHideClick} />
);
const emojiPickerButton = (
<IconButton className='status__action-bar__button' icon='smile-o' />
);
return (
<div className='status__action-bar'>
<IconButton className='status__action-bar__button' title={replyTitle} icon={status.get('in_reply_to_account_id') === status.getIn(['account', 'id']) ? 'reply' : replyIcon} onClick={this.handleReplyClick} counter={status.get('replies_count')} obfuscateCount />
<IconButton className={classNames('status__action-bar__button', { reblogPrivate })} disabled={!publicStatus && !reblogPrivate} active={status.get('reblogged')} title={reblogTitle} icon='retweet' onClick={this.handleReblogClick} counter={withCounters ? status.get('reblogs_count') : undefined} />
<IconButton className='status__action-bar__button star-icon' animate active={status.get('favourited')} title={intl.formatMessage(messages.favourite)} icon='star' onClick={this.handleFavouriteClick} counter={withCounters ? status.get('favourites_count') : undefined} />
<IconButton className='status__action-bar__button bookmark-icon' disabled={!signedIn} active={status.get('bookmarked')} title={intl.formatMessage(messages.bookmark)} icon='bookmark' onClick={this.handleBookmarkClick} />
<EmojiPickerDropdown onPickEmoji={this.handleEmojiPick} />
<EmojiPickerDropdown onPickEmoji={this.handleEmojiPick} button={emojiPickerButton} />
{shareButton}

2
app/javascript/mastodon/components/status_emoji_reactions_bar.jsx
View file

@ -73,7 +73,7 @@ class StatusEmojiReactionsBar extends React.PureComponent {
render () {
const { emojiReactions } = this.props;
const emojiButtons = Array.from(emojiReactions).map((emoji, index) => (
const emojiButtons = Array.from(emojiReactions).filter(emoji => emoji.get('count') != 0).map((emoji, index) => (
<EmojiReactionButton
key={index}
name={emoji.get('name')}

6
app/javascript/mastodon/features/status/components/action_bar.jsx
View file

@ -267,6 +267,10 @@ class ActionBar extends React.PureComponent {
<div className='detailed-status__button'><IconButton title={intl.formatMessage(messages.share)} icon='share-alt' onClick={this.handleShare} /></div>
);
const emojiPickerButton = (
<IconButton icon='smile-o' />
);
let replyIcon;
if (status.get('in_reply_to_id', null) === null) {
replyIcon = 'reply';
@ -293,7 +297,7 @@ class ActionBar extends React.PureComponent {
<div className='detailed-status__button' ><IconButton className={classNames({ reblogPrivate })} disabled={!publicStatus && !reblogPrivate} active={status.get('reblogged')} title={reblogTitle} icon='retweet' onClick={this.handleReblogClick} /></div>
<div className='detailed-status__button'><IconButton className='star-icon' animate active={status.get('favourited')} title={intl.formatMessage(messages.favourite)} icon='star' onClick={this.handleFavouriteClick} /></div>
<div className='detailed-status__button'><IconButton className='bookmark-icon' disabled={!signedIn} active={status.get('bookmarked')} title={intl.formatMessage(messages.bookmark)} icon='bookmark' onClick={this.handleBookmarkClick} /></div>
<div className='detailed-status__button'><EmojiPickerDropdown onPickEmoji={this.handleEmojiPick} /></div>
<div className='detailed-status__button'><EmojiPickerDropdown onPickEmoji={this.handleEmojiPick} button={emojiPickerButton} /></div>
{shareButton}

22
app/javascript/styles/mastodon/components.scss
View file

@ -802,7 +802,8 @@ body > [data-popper-placement] {
vertical-align: middle;
object-fit: contain;
margin: -0.2ex 0.15em 0.2ex;
width: 16px;
min-width: 16px;
max-width: min(8em, 100%);
height: 16px;
img {
@ -878,7 +879,8 @@ body > [data-popper-placement] {
}
.emojione {
width: 20px;
min-width: 20px;
max-width: min(8em, 100%);
height: 20px;
margin: -3px 0 0;
}
@ -959,7 +961,8 @@ body > [data-popper-placement] {
overflow-y: auto;
.emojione {
width: 20px;
min-width: 20px;
max-width: min(8em, 100%);
height: 20px;
margin: -3px 0 0;
}
@ -1334,7 +1337,8 @@ body > [data-popper-placement] {
line-height: 24px;
.emojione {
width: 24px;
min-width: 24px;
max-width: min(8em, 100%);
height: 24px;
margin: -1px 0 0;
}
@ -4122,6 +4126,10 @@ a.status-card.compact:hover {
text-align: center;
}
.detailed-status__button .emoji-button {
padding: 0;
}
.column-settings__outer {
background: lighten($ui-base-color, 8%);
padding: 15px;
@ -5871,7 +5879,8 @@ a.status-card.compact:hover {
line-height: 24px;
.emojione {
width: 24px;
min-width: 24px;
max-width: min(8em, 100%);
height: 24px;
margin: -1px 0 0;
}
@ -7222,7 +7231,8 @@ noscript {
}
.emojione {
width: 22px;
min-width: 22px;
max-width: min(8em, 100%);
height: 22px;
}

5
app/javascript/styles/mastodon/emoji_picker.scss
View file

@ -166,6 +166,11 @@
.emoji-mart-category .emoji-mart-emoji {
cursor: pointer;
&.emoji-mart-emoji-custom img {
width: auto !important;
min-width: 22px;
}
span {
z-index: 1;
position: relative;

3
app/javascript/styles/mastodon/tables.scss
View file

@ -299,7 +299,8 @@ a.table-action-link {
margin-right: 10px;
.emojione {
width: 32px;
min-width: 32px;
max-width: min(8em, 100%);
height: 32px;
}
}

3
app/javascript/styles/mastodon/widgets.scss
View file

@ -36,7 +36,8 @@
font-weight: 400;
.emojione {
width: 20px;
min-width: 20px;
max-width: min(8em, 100%);
height: 20px;
margin: -3px 0 0;
margin-left: 0.075em;