Skip to content

Commit

Permalink
[Glitch] Change design of metadata underneath posts in web UI
Browse files Browse the repository at this point in the history 
Port 4991198 to glitch-soc

Signed-off-by: Claire <[email protected]>
  • Loading branch information
@Gargron @ClearlyClaire
Gargron authored and ClearlyClaire committed Mar 14, 2024
1 parent 042d17d commit 6cb8205
Show file tree
Hide file tree
Showing 3 changed files with 63 additions and 52 deletions.
4 changes: 1 addition & 3 deletions app/javascript/flavours/glitch/components/edited_timestamp/index.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,7 @@ import { FormattedMessage, injectIntl } from 'react-intl';

import { connect } from 'react-redux';

import ArrowDropDownIcon from '@/material-icons/400-24px/arrow_drop_down.svg?react';
import { openModal } from 'flavours/glitch/actions/modal';
import { Icon } from 'flavours/glitch/components/icon';
import InlineAccount from 'flavours/glitch/components/inline_account';
import { RelativeTimestamp } from 'flavours/glitch/components/relative_timestamp';

Expand Down Expand Up @@ -67,7 +65,7 @@ class EditedTimestamp extends PureComponent {
return (
<DropdownMenu statusId={statusId} renderItem={this.renderItem} scrollable renderHeader={this.renderHeader} onItemClick={this.handleItemClick}>
<button className='dropdown-menu__text-button'>
<FormattedMessage id='status.edited' defaultMessage='Edited {date}' values={{ date: intl.formatDate(timestamp, { month: 'short', day: '2-digit', hour: '2-digit', minute: '2-digit' }) }} /> <Icon id='caret-down' icon={ArrowDropDownIcon} />
<FormattedMessage id='status.edited' defaultMessage='Edited {date}' values={{ date: <span className='animated-number'>{intl.formatDate(timestamp, { month: 'short', day: '2-digit', hour: '2-digit', minute: '2-digit' })}</span> }} />
</button>
</DropdownMenu>
);
Expand Down
66 changes: 34 additions & 32 deletions app/javascript/flavours/glitch/features/status/components/detailed_status.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,13 @@
import PropTypes from 'prop-types';

import { FormattedDate } from 'react-intl';
import { FormattedDate, FormattedMessage } from 'react-intl';

import classNames from 'classnames';
import { Link, withRouter } from 'react-router-dom';

import ImmutablePropTypes from 'react-immutable-proptypes';
import ImmutablePureComponent from 'react-immutable-pure-component';


import RepeatIcon from '@/material-icons/400-24px/repeat.svg?react';
import StarIcon from '@/material-icons/400-24px/star-fill.svg?react';
import { AnimatedNumber } from 'flavours/glitch/components/animated_number';
import AttachmentList from 'flavours/glitch/components/attachment_list';
import EditedTimestamp from 'flavours/glitch/components/edited_timestamp';
Expand Down Expand Up @@ -133,10 +130,7 @@ class DetailedStatus extends ImmutablePureComponent {

let applicationLink = '';
let reblogLink = '';
const reblogIcon = 'retweet';
const reblogIconComponent = RepeatIcon;
let favouriteLink = '';
let edited = '';

// Depending on user settings, some media are considered as parts of the
// contents (affected by CW) while other will be displayed outside of the
Expand Down Expand Up @@ -239,55 +233,49 @@ class DetailedStatus extends ImmutablePureComponent {
}

if (status.get('application')) {
applicationLink = <> · <a className='detailed-status__application' href={status.getIn(['application', 'website'])} target='_blank' rel='noopener noreferrer'>{status.getIn(['application', 'name'])}</a></>;
applicationLink = <>·<a className='detailed-status__application' href={status.getIn(['application', 'website'])} target='_blank' rel='noopener noreferrer'>{status.getIn(['application', 'name'])}</a></>;
}

const visibilityLink = <> · <VisibilityIcon visibility={status.get('visibility')} /></>;
const visibilityLink = <>·<VisibilityIcon visibility={status.get('visibility')} /></>;

if (!['unlisted', 'public'].includes(status.get('visibility'))) {
reblogLink = null;
} else if (this.props.history) {
reblogLink = (
<>
{' · '}
<Link to={`/@${status.getIn(['account', 'acct'])}/${status.get('id')}/reblogs`} className='detailed-status__link'>
<Icon id={reblogIcon} icon={reblogIconComponent} />
<span className='detailed-status__reblogs'>
<AnimatedNumber value={status.get('reblogs_count')} />
</span>
</Link>
</>
<Link to={`/@${status.getIn(['account', 'acct'])}/${status.get('id')}/reblogs`} className='detailed-status__link'>
<span className='detailed-status__reblogs'>
<AnimatedNumber value={status.get('reblogs_count')} />
</span>
<FormattedMessage id='status.reblogs' defaultMessage='{count, plural, one {boost} other {boosts}}' values={{ count: status.get('reblogs_count') }} />
</Link>
);
} else {
reblogLink = (
<>
{' · '}
<a href={`/interact/${status.get('id')}?type=reblog`} className='detailed-status__link' onClick={this.handleModalLink}>
<Icon id={reblogIcon} icon={reblogIconComponent} />
<span className='detailed-status__reblogs'>
<AnimatedNumber value={status.get('reblogs_count')} />
</span>
</a>
</>
<a href={`/interact/${status.get('id')}?type=reblog`} className='detailed-status__link' onClick={this.handleModalLink}>
<span className='detailed-status__reblogs'>
<AnimatedNumber value={status.get('reblogs_count')} />
</span>
<FormattedMessage id='status.reblogs' defaultMessage='{count, plural, one {boost} other {boosts}}' values={{ count: status.get('reblogs_count') }} />
</a>
);
}

if (this.props.history) {
favouriteLink = (
<Link to={`/@${status.getIn(['account', 'acct'])}/${status.get('id')}/favourites`} className='detailed-status__link'>
<Icon id='star' icon={StarIcon} />
<span className='detailed-status__favorites'>
<AnimatedNumber value={status.get('favourites_count')} />
</span>
<FormattedMessage id='status.favourites' defaultMessage='{count, plural, one {favorite} other {favorites}}' values={{ count: status.get('favourites_count') }} />
</Link>
);
} else {
favouriteLink = (
<a href={`/interact/${status.get('id')}?type=favourite`} className='detailed-status__link' onClick={this.handleModalLink}>
<Icon id='star' icon={StarIcon} />
<span className='detailed-status__favorites'>
<AnimatedNumber value={status.get('favourites_count')} />
</span>
<FormattedMessage id='status.favourites' defaultMessage='{count, plural, one {favorite} other {favorites}}' values={{ count: status.get('favourites_count') }} />
</a>
);
}
Expand Down Expand Up @@ -330,9 +318,23 @@ class DetailedStatus extends ImmutablePureComponent {
/>

<div className='detailed-status__meta'>
<a className='detailed-status__datetime' href={status.get('url')} target='_blank' rel='noopener noreferrer'>
<FormattedDate value={new Date(status.get('created_at'))} year='numeric' month='short' day='2-digit' hour='2-digit' minute='2-digit' />
</a>{edited}{visibilityLink}{applicationLink}{reblogLink} · {favouriteLink}
<div className='detailed-status__meta__line'>
<a className='detailed-status__datetime' href={status.get('url')} target='_blank' rel='noopener noreferrer'>
<FormattedDate value={new Date(status.get('created_at'))} year='numeric' month='short' day='2-digit' hour='2-digit' minute='2-digit' />
</a>

{visibilityLink}

{applicationLink}
</div>

{status.get('edited_at') && <div className='detailed-status__meta__line'><EditedTimestamp statusId={status.get('id')} timestamp={status.get('edited_at')} /></div>}

<div className='detailed-status__meta__line'>
{reblogLink}
·
{favouriteLink}
</div>
</div>
</div>
</div>
Expand Down
45 changes: 28 additions & 17 deletions app/javascript/flavours/glitch/styles/components.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1871,15 +1871,35 @@ body > [data-popper-placement] {
}

.detailed-status__meta {
margin-top: 16px;
margin-top: 24px;
color: $dark-text-color;
font-size: 14px;
line-height: 18px;

&__line {
border-bottom: 1px solid var(--background-border-color);
padding: 8px 0;
display: flex;
align-items: center;
gap: 8px;

&:first-child {
padding-top: 0;
}

&:last-child {
padding-bottom: 0;
border-bottom: 0;
}
}

.icon {
width: 15px;
height: 15px;
vertical-align: middle;
width: 18px;
height: 18px;
}

.animated-number {
color: $secondary-text-color;
}
}

Expand Down Expand Up @@ -1923,19 +1943,6 @@ body > [data-popper-placement] {
color: inherit;
text-decoration: none;
gap: 6px;
position: relative;
top: 0.145em;

.icon {
top: 0;
}
}

.detailed-status__favorites,
.detailed-status__reblogs {
font-weight: 500;
font-size: 12px;
line-height: 18px;
}

.domain {
Expand Down Expand Up @@ -2506,6 +2513,10 @@ a.account__display-name {
outline: 1px dotted;
}

&:hover {
text-decoration: underline;
}

.icon {
width: 15px;
height: 15px;
Expand Down

0 comments on commit 6cb8205

Please sign in to comment.