miklo
/
soapbox
sforkowany z mirror/soapbox
1
0
Forkuj 0
Kod Zgłoszenia Oczekujące zmiany Packages Projekty Wydania Wiki Aktywność

StatusActionBar: update icons

profile-avatar-switcher
Alex Gleason 2021-09-20 20:49:24 -05:00
rodzic 23b14f605b
commit a0de32bcb0
Nie znaleziono w bazie danych klucza dla tego podpisu
ID klucza GPG: 7211D1F99744FBB7
9 zmienionych plików z 61 dodań i 22 usunięć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

5
app/soapbox/components/icon_button.js
Wyświetl plik

@ -106,6 +106,7 @@ export default class IconButton extends React.PureComponent {
title,
text,
emoji,
...rest
} = this.props;
const classes = classNames(className, 'icon-button', {
@ -138,7 +139,7 @@ export default class IconButton extends React.PureComponent {
<div style={style}>
{emoji
? <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>
{text && <span className='icon_button__text'>{text}</span>}
</button>
@ -167,7 +168,7 @@ export default class IconButton extends React.PureComponent {
<div style={style}>
{emoji
? <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>
{text && <span className='icon_button__text'>{text}</span>}
</button>

16
app/soapbox/components/status_action_bar.js
Wyświetl plik

@ -401,21 +401,11 @@ class StatusActionBar extends ImmutablePureComponent {
}[meEmojiReact] || messages.favourite);
const menu = this._makeMenu(publicStatus);
let reblogIcon = 'retweet';
let replyIcon;
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) {
replyIcon = 'reply';
replyTitle = intl.formatMessage(messages.reply);
} else {
replyIcon = 'reply-all';
replyTitle = intl.formatMessage(messages.replyAll);
}
@ -426,11 +416,11 @@ class StatusActionBar extends ImmutablePureComponent {
return (
<div className='status__action-bar'>
<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>}
</div>
<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>}
</div>
<div
@ -450,7 +440,7 @@ class StatusActionBar extends ImmutablePureComponent {
animate
active={Boolean(meEmojiReact)}
title={meEmojiTitle}
icon='thumbs-up'
src={require('@tabler/icons/icons/thumb-up.svg')}
emoji={meEmojiReact}
onClick={this.handleLikeButtonClick}
/>

4
app/styles/components/emoji-reacts.scss
Wyświetl plik

@ -128,6 +128,10 @@
@media (max-width: 455px) {
position: static;
}
.svg-icon {
height: 24px !important;
}
}
.detailed-status__wrapper .emoji-react-selector {

12
app/styles/components/status.scss
Wyświetl plik

@ -128,7 +128,8 @@
.status__wrapper {
@include standard-panel;
margin: 5px 0;
margin-bottom: 15px;
padding: 15px 0 10px;
}
.slist > .item-list > article {
@ -354,6 +355,15 @@
color: var(--brand-color);
}
}
.svg-icon {
width: 24px;
height: 20px;
svg {
stroke-width: 2px;
}
}
}
.status__action-bar-button {

4
app/styles/navigation.scss
Wyświetl plik

@ -28,6 +28,10 @@
margin-right: 5px;
}
.icon-with-counter__counter {
right: 0;
}
hr {
border: 0;
height: 1px;

2
app/styles/ui.scss
Wyświetl plik

@ -734,7 +734,7 @@
position: absolute;
box-sizing: border-box;
right: -5px;
top: -12px;
top: -9px;
min-width: 16px;
height: 16px;
padding: 1px 3px 0;

2
package.json
Wyświetl plik

@ -66,6 +66,7 @@
"babel-plugin-react-intl": "^7.5.20",
"babel-plugin-transform-react-remove-prop-types": "^0.4.24",
"blurhash": "^1.0.0",
"bootstrap-icons": "^1.5.0",
"bowser": "^2.11.0",
"browserslist": "^4.16.6",
"cheerio": "^1.0.0-rc.10",
@ -83,6 +84,7 @@
"es6-symbol": "^3.1.1",
"escape-html": "^1.0.3",
"exif-js": "^2.3.0",
"feather-icons": "^4.28.0",
"fork-awesome": "https://github.com/alexgleason/Fork-Awesome#c23fd34246a9f33c4bf24ea095a4cf26e7abe265",
"html-webpack-harddisk-plugin": "^2.0.0",
"html-webpack-plugin": "^5.3.2",

15
webpack/rules/assets.js
Wyświetl plik

@ -48,6 +48,21 @@ module.exports = [{
generator: {
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$/,
type: 'asset/inline',

23
yarn.lock
Wyświetl plik

@ -2478,6 +2478,11 @@ boolbase@^1.0.0, boolbase@~1.0.0:
resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e"
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:
version "2.11.0"
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"
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:
version "3.17.3"
resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.17.3.tgz#8e8bd20e91df9951e903cabe91f9af4a0895bc1e"
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:
version "1.0.3"
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:
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:
version "6.0.1"
resolved "https://registry.yarnpkg.com/file-entry-cache/-/file-entry-cache-6.0.1.tgz#211b2dd9659cb0394b073e7323ac3c933d522027"