kopia lustrzana https://gitlab.com/soapbox-pub/soapbox
StatusActionBar: update icons
rodzic
23b14f605b
commit
a0de32bcb0
|
@ -106,6 +106,7 @@ export default class IconButton extends React.PureComponent {
|
||||||
title,
|
title,
|
||||||
text,
|
text,
|
||||||
emoji,
|
emoji,
|
||||||
|
...rest
|
||||||
} = this.props;
|
} = this.props;
|
||||||
|
|
||||||
const classes = classNames(className, 'icon-button', {
|
const classes = classNames(className, 'icon-button', {
|
||||||
|
@ -138,7 +139,7 @@ export default class IconButton extends React.PureComponent {
|
||||||
<div style={style}>
|
<div style={style}>
|
||||||
{emoji
|
{emoji
|
||||||
? <div className='icon-button__emoji' dangerouslySetInnerHTML={{ __html: emojify(emoji) }} aria-hidden='true' />
|
? <div className='icon-button__emoji' dangerouslySetInnerHTML={{ __html: emojify(emoji) }} aria-hidden='true' />
|
||||||
: <Icon id={icon} iconset={iconset} fixedWidth aria-hidden='true' />}
|
: <Icon id={icon} {...rest} aria-hidden='true' />}
|
||||||
</div>
|
</div>
|
||||||
{text && <span className='icon_button__text'>{text}</span>}
|
{text && <span className='icon_button__text'>{text}</span>}
|
||||||
</button>
|
</button>
|
||||||
|
@ -167,7 +168,7 @@ export default class IconButton extends React.PureComponent {
|
||||||
<div style={style}>
|
<div style={style}>
|
||||||
{emoji
|
{emoji
|
||||||
? <div className='icon-button__emoji' style={{ transform: `rotate(${rotate}deg)` }} dangerouslySetInnerHTML={{ __html: emojify(emoji) }} aria-hidden='true' />
|
? <div className='icon-button__emoji' style={{ transform: `rotate(${rotate}deg)` }} dangerouslySetInnerHTML={{ __html: emojify(emoji) }} aria-hidden='true' />
|
||||||
: <Icon id={icon} iconset={iconset} style={{ transform: `rotate(${rotate}deg)` }} fixedWidth aria-hidden='true' />}
|
: <Icon id={icon} {...rest} style={{ transform: `rotate(${rotate}deg)` }} aria-hidden='true' />}
|
||||||
</div>
|
</div>
|
||||||
{text && <span className='icon_button__text'>{text}</span>}
|
{text && <span className='icon_button__text'>{text}</span>}
|
||||||
</button>
|
</button>
|
||||||
|
|
|
@ -401,21 +401,11 @@ class StatusActionBar extends ImmutablePureComponent {
|
||||||
}[meEmojiReact] || messages.favourite);
|
}[meEmojiReact] || messages.favourite);
|
||||||
|
|
||||||
const menu = this._makeMenu(publicStatus);
|
const menu = this._makeMenu(publicStatus);
|
||||||
let reblogIcon = 'retweet';
|
|
||||||
let replyIcon;
|
|
||||||
let replyTitle;
|
let replyTitle;
|
||||||
|
|
||||||
if (status.get('visibility') === 'direct') {
|
|
||||||
reblogIcon = 'envelope';
|
|
||||||
} else if (status.get('visibility') === 'private') {
|
|
||||||
reblogIcon = 'lock';
|
|
||||||
}
|
|
||||||
|
|
||||||
if (status.get('in_reply_to_id', null) === null) {
|
if (status.get('in_reply_to_id', null) === null) {
|
||||||
replyIcon = 'reply';
|
|
||||||
replyTitle = intl.formatMessage(messages.reply);
|
replyTitle = intl.formatMessage(messages.reply);
|
||||||
} else {
|
} else {
|
||||||
replyIcon = 'reply-all';
|
|
||||||
replyTitle = intl.formatMessage(messages.replyAll);
|
replyTitle = intl.formatMessage(messages.replyAll);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -426,11 +416,11 @@ class StatusActionBar extends ImmutablePureComponent {
|
||||||
return (
|
return (
|
||||||
<div className='status__action-bar'>
|
<div className='status__action-bar'>
|
||||||
<div className='status__action-bar__counter'>
|
<div className='status__action-bar__counter'>
|
||||||
<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} />
|
<IconButton className='status__action-bar-button' title={replyTitle} src={require('feather-icons/dist/icons/message-circle.svg')} onClick={this.handleReplyClick} />
|
||||||
{replyCount !== 0 && <Link to={`/@${status.getIn(['account', 'acct'])}/posts/${status.get('id')}`} className='detailed-status__link'>{replyCount}</Link>}
|
{replyCount !== 0 && <Link to={`/@${status.getIn(['account', 'acct'])}/posts/${status.get('id')}`} className='detailed-status__link'>{replyCount}</Link>}
|
||||||
</div>
|
</div>
|
||||||
<div className='status__action-bar__counter'>
|
<div className='status__action-bar__counter'>
|
||||||
<IconButton className='status__action-bar-button' disabled={!publicStatus} active={status.get('reblogged')} pressed={status.get('reblogged')} title={!publicStatus ? intl.formatMessage(messages.cannot_reblog) : intl.formatMessage(messages.reblog)} icon={reblogIcon} onClick={this.handleReblogClick} />
|
<IconButton className='status__action-bar-button' disabled={!publicStatus} active={status.get('reblogged')} pressed={status.get('reblogged')} title={!publicStatus ? intl.formatMessage(messages.cannot_reblog) : intl.formatMessage(messages.reblog)} src={require('feather-icons/dist/icons/repeat.svg')} onClick={this.handleReblogClick} />
|
||||||
{reblogCount !== 0 && <Link to={`/@${status.getIn(['account', 'acct'])}/posts/${status.get('id')}/reblogs`} className='detailed-status__link'>{reblogCount}</Link>}
|
{reblogCount !== 0 && <Link to={`/@${status.getIn(['account', 'acct'])}/posts/${status.get('id')}/reblogs`} className='detailed-status__link'>{reblogCount}</Link>}
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
|
@ -450,7 +440,7 @@ class StatusActionBar extends ImmutablePureComponent {
|
||||||
animate
|
animate
|
||||||
active={Boolean(meEmojiReact)}
|
active={Boolean(meEmojiReact)}
|
||||||
title={meEmojiTitle}
|
title={meEmojiTitle}
|
||||||
icon='thumbs-up'
|
src={require('@tabler/icons/icons/thumb-up.svg')}
|
||||||
emoji={meEmojiReact}
|
emoji={meEmojiReact}
|
||||||
onClick={this.handleLikeButtonClick}
|
onClick={this.handleLikeButtonClick}
|
||||||
/>
|
/>
|
||||||
|
|
|
@ -128,6 +128,10 @@
|
||||||
@media (max-width: 455px) {
|
@media (max-width: 455px) {
|
||||||
position: static;
|
position: static;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.svg-icon {
|
||||||
|
height: 24px !important;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.detailed-status__wrapper .emoji-react-selector {
|
.detailed-status__wrapper .emoji-react-selector {
|
||||||
|
|
|
@ -128,7 +128,8 @@
|
||||||
|
|
||||||
.status__wrapper {
|
.status__wrapper {
|
||||||
@include standard-panel;
|
@include standard-panel;
|
||||||
margin: 5px 0;
|
margin-bottom: 15px;
|
||||||
|
padding: 15px 0 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.slist > .item-list > article {
|
.slist > .item-list > article {
|
||||||
|
@ -354,6 +355,15 @@
|
||||||
color: var(--brand-color);
|
color: var(--brand-color);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.svg-icon {
|
||||||
|
width: 24px;
|
||||||
|
height: 20px;
|
||||||
|
|
||||||
|
svg {
|
||||||
|
stroke-width: 2px;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.status__action-bar-button {
|
.status__action-bar-button {
|
||||||
|
|
|
@ -28,6 +28,10 @@
|
||||||
margin-right: 5px;
|
margin-right: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.icon-with-counter__counter {
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
hr {
|
hr {
|
||||||
border: 0;
|
border: 0;
|
||||||
height: 1px;
|
height: 1px;
|
||||||
|
|
|
@ -734,7 +734,7 @@
|
||||||
position: absolute;
|
position: absolute;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
right: -5px;
|
right: -5px;
|
||||||
top: -12px;
|
top: -9px;
|
||||||
min-width: 16px;
|
min-width: 16px;
|
||||||
height: 16px;
|
height: 16px;
|
||||||
padding: 1px 3px 0;
|
padding: 1px 3px 0;
|
||||||
|
|
|
@ -66,6 +66,7 @@
|
||||||
"babel-plugin-react-intl": "^7.5.20",
|
"babel-plugin-react-intl": "^7.5.20",
|
||||||
"babel-plugin-transform-react-remove-prop-types": "^0.4.24",
|
"babel-plugin-transform-react-remove-prop-types": "^0.4.24",
|
||||||
"blurhash": "^1.0.0",
|
"blurhash": "^1.0.0",
|
||||||
|
"bootstrap-icons": "^1.5.0",
|
||||||
"bowser": "^2.11.0",
|
"bowser": "^2.11.0",
|
||||||
"browserslist": "^4.16.6",
|
"browserslist": "^4.16.6",
|
||||||
"cheerio": "^1.0.0-rc.10",
|
"cheerio": "^1.0.0-rc.10",
|
||||||
|
@ -83,6 +84,7 @@
|
||||||
"es6-symbol": "^3.1.1",
|
"es6-symbol": "^3.1.1",
|
||||||
"escape-html": "^1.0.3",
|
"escape-html": "^1.0.3",
|
||||||
"exif-js": "^2.3.0",
|
"exif-js": "^2.3.0",
|
||||||
|
"feather-icons": "^4.28.0",
|
||||||
"fork-awesome": "https://github.com/alexgleason/Fork-Awesome#c23fd34246a9f33c4bf24ea095a4cf26e7abe265",
|
"fork-awesome": "https://github.com/alexgleason/Fork-Awesome#c23fd34246a9f33c4bf24ea095a4cf26e7abe265",
|
||||||
"html-webpack-harddisk-plugin": "^2.0.0",
|
"html-webpack-harddisk-plugin": "^2.0.0",
|
||||||
"html-webpack-plugin": "^5.3.2",
|
"html-webpack-plugin": "^5.3.2",
|
||||||
|
|
|
@ -48,6 +48,21 @@ module.exports = [{
|
||||||
generator: {
|
generator: {
|
||||||
dataUrl: content => svgToMiniDataURI(content.toString()),
|
dataUrl: content => svgToMiniDataURI(content.toString()),
|
||||||
},
|
},
|
||||||
|
}, {
|
||||||
|
test: /\.svg$/,
|
||||||
|
type: 'asset/inline',
|
||||||
|
include: resolve('node_modules', 'bootstrap-icons'),
|
||||||
|
generator: {
|
||||||
|
dataUrl: content => svgToMiniDataURI(content.toString()),
|
||||||
|
},
|
||||||
|
}, {
|
||||||
|
|
||||||
|
test: /\.svg$/,
|
||||||
|
type: 'asset/inline',
|
||||||
|
include: resolve('node_modules', 'feather-icons'),
|
||||||
|
generator: {
|
||||||
|
dataUrl: content => svgToMiniDataURI(content.toString()),
|
||||||
|
},
|
||||||
}, {
|
}, {
|
||||||
test: /\.svg$/,
|
test: /\.svg$/,
|
||||||
type: 'asset/inline',
|
type: 'asset/inline',
|
||||||
|
|
23
yarn.lock
23
yarn.lock
|
@ -2478,6 +2478,11 @@ boolbase@^1.0.0, boolbase@~1.0.0:
|
||||||
resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e"
|
resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e"
|
||||||
integrity sha1-aN/1++YMUes3cl6p4+0xDcwed24=
|
integrity sha1-aN/1++YMUes3cl6p4+0xDcwed24=
|
||||||
|
|
||||||
|
bootstrap-icons@^1.5.0:
|
||||||
|
version "1.5.0"
|
||||||
|
resolved "https://registry.yarnpkg.com/bootstrap-icons/-/bootstrap-icons-1.5.0.tgz#2cb19da148aa9105cb3174de2963564982d3dc55"
|
||||||
|
integrity sha512-44feMc7DE1Ccpsas/1wioN8ewFJNquvi5FewA06wLnqct7CwMdGDVy41ieHaacogzDqLfG8nADIvMNp9e4bfbA==
|
||||||
|
|
||||||
bowser@^2.11.0:
|
bowser@^2.11.0:
|
||||||
version "2.11.0"
|
version "2.11.0"
|
||||||
resolved "https://registry.yarnpkg.com/bowser/-/bowser-2.11.0.tgz#5ca3c35757a7aa5771500c70a73a9f91ef420a8f"
|
resolved "https://registry.yarnpkg.com/bowser/-/bowser-2.11.0.tgz#5ca3c35757a7aa5771500c70a73a9f91ef420a8f"
|
||||||
|
@ -2969,16 +2974,16 @@ core-js-pure@^3.16.0:
|
||||||
resolved "https://registry.yarnpkg.com/core-js-pure/-/core-js-pure-3.17.3.tgz#98ea3587188ab7ef4695db6518eeb71aec42604a"
|
resolved "https://registry.yarnpkg.com/core-js-pure/-/core-js-pure-3.17.3.tgz#98ea3587188ab7ef4695db6518eeb71aec42604a"
|
||||||
integrity sha512-YusrqwiOTTn8058JDa0cv9unbXdIiIgcgI9gXso0ey4WgkFLd3lYlV9rp9n7nDCsYxXsMDTjA4m1h3T348mdlQ==
|
integrity sha512-YusrqwiOTTn8058JDa0cv9unbXdIiIgcgI9gXso0ey4WgkFLd3lYlV9rp9n7nDCsYxXsMDTjA4m1h3T348mdlQ==
|
||||||
|
|
||||||
|
core-js@^3.1.3, core-js@^3.6.5:
|
||||||
|
version "3.18.0"
|
||||||
|
resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.18.0.tgz#9af3f4a6df9ba3428a3fb1b171f1503b3f40cc49"
|
||||||
|
integrity sha512-WJeQqq6jOYgVgg4NrXKL0KLQhi0CT4ZOCvFL+3CQ5o7I6J8HkT5wd53EadMfqTDp1so/MT1J+w2ujhWcCJtN7w==
|
||||||
|
|
||||||
core-js@^3.15.2:
|
core-js@^3.15.2:
|
||||||
version "3.17.3"
|
version "3.17.3"
|
||||||
resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.17.3.tgz#8e8bd20e91df9951e903cabe91f9af4a0895bc1e"
|
resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.17.3.tgz#8e8bd20e91df9951e903cabe91f9af4a0895bc1e"
|
||||||
integrity sha512-lyvajs+wd8N1hXfzob1LdOCCHFU4bGMbqqmLn1Q4QlCpDqWPpGf+p0nj+LNrvDDG33j0hZXw2nsvvVpHysxyNw==
|
integrity sha512-lyvajs+wd8N1hXfzob1LdOCCHFU4bGMbqqmLn1Q4QlCpDqWPpGf+p0nj+LNrvDDG33j0hZXw2nsvvVpHysxyNw==
|
||||||
|
|
||||||
core-js@^3.6.5:
|
|
||||||
version "3.18.0"
|
|
||||||
resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.18.0.tgz#9af3f4a6df9ba3428a3fb1b171f1503b3f40cc49"
|
|
||||||
integrity sha512-WJeQqq6jOYgVgg4NrXKL0KLQhi0CT4ZOCvFL+3CQ5o7I6J8HkT5wd53EadMfqTDp1so/MT1J+w2ujhWcCJtN7w==
|
|
||||||
|
|
||||||
core-util-is@~1.0.0:
|
core-util-is@~1.0.0:
|
||||||
version "1.0.3"
|
version "1.0.3"
|
||||||
resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.3.tgz#a6042d3634c2b27e9328f837b965fac83808db85"
|
resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.3.tgz#a6042d3634c2b27e9328f837b965fac83808db85"
|
||||||
|
@ -4214,6 +4219,14 @@ fb-watchman@^2.0.0:
|
||||||
dependencies:
|
dependencies:
|
||||||
bser "2.1.1"
|
bser "2.1.1"
|
||||||
|
|
||||||
|
feather-icons@^4.28.0:
|
||||||
|
version "4.28.0"
|
||||||
|
resolved "https://registry.yarnpkg.com/feather-icons/-/feather-icons-4.28.0.tgz#e1892a401fe12c4559291770ff6e68b0168e760f"
|
||||||
|
integrity sha512-gRdqKESXRBUZn6Nl0VBq2wPHKRJgZz7yblrrc2lYsS6odkNFDnA4bqvrlEVRUPjE1tFax+0TdbJKZ31ziJuzjg==
|
||||||
|
dependencies:
|
||||||
|
classnames "^2.2.5"
|
||||||
|
core-js "^3.1.3"
|
||||||
|
|
||||||
file-entry-cache@^6.0.1:
|
file-entry-cache@^6.0.1:
|
||||||
version "6.0.1"
|
version "6.0.1"
|
||||||
resolved "https://registry.yarnpkg.com/file-entry-cache/-/file-entry-cache-6.0.1.tgz#211b2dd9659cb0394b073e7323ac3c933d522027"
|
resolved "https://registry.yarnpkg.com/file-entry-cache/-/file-entry-cache-6.0.1.tgz#211b2dd9659cb0394b073e7323ac3c933d522027"
|
||||||
|
|
Ładowanie…
Reference in New Issue