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

Change: #186 概要画面のkmyblue capabilities表示改善 (#252)

Browse source
This commit is contained in:
KMY（雪あすか） 2023-11-08 10:57:00 +09:00 • committed by GitHub
parent 408da2c42a
commit cfa9b1877a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 41 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

30
app/javascript/mastodon/features/about/index.jsx
View file

@ -11,6 +11,8 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
import { connect } from 'react-redux';
import { ReactComponent as ChevronRightIcon } from '@material-symbols/svg-600/outlined/chevron_right.svg';
import { ReactComponent as DisabledIcon } from '@material-symbols/svg-600/outlined/close-fill.svg';
import { ReactComponent as EnabledIcon } from '@material-symbols/svg-600/outlined/done-fill.svg';
import { ReactComponent as ExpandMoreIcon } from '@material-symbols/svg-600/outlined/expand_more.svg';
import { fetchServer, fetchExtendedDescription, fetchDomainBlocks } from 'mastodon/actions/server';
@ -101,6 +103,28 @@ class Section extends PureComponent {
}
class CapabilityIcon extends PureComponent {
static propTypes = {
intl: PropTypes.object.isRequired,
state: PropTypes.bool,
};
render () {
const { intl, state } = this.props;
if (state) {
return (
<span className='capability-icon enabled'><Icon id='check' icon={EnabledIcon} title={intl.formatMessage(messages.enabled)} />{intl.formatMessage(messages.enabled)}</span>
);
} else {
return (
<span className='capability-icon disabled'><Icon id='times' icon={DisabledIcon} title={intl.formatMessage(messages.disabled)} />{intl.formatMessage(messages.disabled)}</span>
);
}
}
}
class About extends PureComponent {
static propTypes = {
@ -201,13 +225,13 @@ class About extends PureComponent {
{!isLoading && (
<ol className='rules-list'>
<li>
<span className='rules-list__text'>{intl.formatMessage(messages.emojiReaction)}: {intl.formatMessage(isEmojiReaction ? messages.enabled : messages.disabled)}</span>
<span className='rules-list__text'>{intl.formatMessage(messages.emojiReaction)}: <CapabilityIcon state={isEmojiReaction} intl={intl} /></span>
</li>
<li>
<span className='rules-list__text'>{intl.formatMessage(messages.publicUnlistedVisibility)}: {intl.formatMessage(isPublicUnlistedVisibility ? messages.enabled : messages.disabled)}</span>
<span className='rules-list__text'>{intl.formatMessage(messages.publicUnlistedVisibility)}: <CapabilityIcon state={isPublicUnlistedVisibility} intl={intl} /></span>
</li>
<li>
<span className='rules-list__text'>{intl.formatMessage(messages.localTimeline)}: {intl.formatMessage(isLocalTimeline ? messages.enabled : messages.disabled)}</span>
<span className='rules-list__text'>{intl.formatMessage(messages.localTimeline)}: <CapabilityIcon state={isLocalTimeline} intl={intl} /></span>
</li>
</ol>
)}

14
app/javascript/styles/mastodon/about.scss
View file

@ -53,4 +53,18 @@ $fluid-breakpoint: $maximum-width + 20px;
border-bottom: 0;
}
}
.capability-icon {
svg {
transform: translateY(4px);
}
&.enabled {
color: green;
}
&.disabled {
color: red;
}
}
}