From 1d07f51039625c2eafa7eb0b1b6d5a7f8cf00e41 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?M=C3=A9lanie=20Chauvel?= <perso@hack-libre.org>
Date: Tue, 27 Oct 2020 03:00:47 +0100
Subject: [PATCH] Make visibility icon clickable as part of the time of a toot
(#15053)
- Makes permalink to a toot more easily clickable
- Fix clicking between icon and time in fact clicking the display name
- Fix clicking slightly under time in fact clicking the display name
---
app/javascript/mastodon/components/status.js | 6 ++++--
.../mastodon/features/ui/components/boost_modal.js | 5 +++--
app/javascript/styles/mastodon/components.scss | 5 ++---
app/views/statuses/_simple_status.html.haml | 4 ++--
4 files changed, 11 insertions(+), 9 deletions(-)
diff --git a/app/javascript/mastodon/components/status.js b/app/javascript/mastodon/components/status.js
index c1e1cd172a..be4f0bcca3 100644
--- a/app/javascript/mastodon/components/status.js
+++ b/app/javascript/mastodon/components/status.js
@@ -460,8 +460,10 @@ class Status extends ImmutablePureComponent {
<div className={classNames('status', `status-${status.get('visibility')}`, { 'status-reply': !!status.get('in_reply_to_id'), muted: this.props.muted })} data-id={status.get('id')}>
<div className='status__expand' onClick={this.handleExpandClick} role='presentation' />
<div className='status__info'>
- <a href={status.get('url')} className='status__relative-time' target='_blank' rel='noopener noreferrer'><RelativeTimestamp timestamp={status.get('created_at')} /></a>
- <span className='status__visibility-icon'><Icon id={visibilityIcon.icon} title={visibilityIcon.text} /></span>
+ <a href={status.get('url')} className='status__relative-time' target='_blank' rel='noopener noreferrer'>
+ <span className='status__visibility-icon'><Icon id={visibilityIcon.icon} title={visibilityIcon.text} /></span>
+ <RelativeTimestamp timestamp={status.get('created_at')} />
+ </a>
<a onClick={this.handleAccountClick} data-id={status.getIn(['account', 'id'])} href={status.getIn(['account', 'url'])} title={status.getIn(['account', 'acct'])} className='status__display-name' target='_blank' rel='noopener noreferrer'>
<div className='status__avatar'>
diff --git a/app/javascript/mastodon/features/ui/components/boost_modal.js b/app/javascript/mastodon/features/ui/components/boost_modal.js
index 00c0481f3a..963bb5dc4b 100644
--- a/app/javascript/mastodon/features/ui/components/boost_modal.js
+++ b/app/javascript/mastodon/features/ui/components/boost_modal.js
@@ -75,9 +75,10 @@ class BoostModal extends ImmutablePureComponent {
<div className={classNames('status', `status-${status.get('visibility')}`, 'light')}>
<div className='boost-modal__status-header'>
<div className='boost-modal__status-time'>
- <a href={status.get('url')} className='status__relative-time' target='_blank' rel='noopener noreferrer'><RelativeTimestamp timestamp={status.get('created_at')} /></a>
+ <a href={status.get('url')} className='status__relative-time' target='_blank' rel='noopener noreferrer'>
+ <span className='status__visibility-icon'><Icon id={visibilityIcon.icon} title={visibilityIcon.text} /></span>
+ <RelativeTimestamp timestamp={status.get('created_at')} /></a>
</div>
- <span className='status__visibility-icon'><Icon id={visibilityIcon.icon} title={visibilityIcon.text} /></span>
<a onClick={this.handleAccountClick} href={status.getIn(['account', 'url'])} className='status__display-name'>
<div className='status__avatar'>
diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
index 7dc50ea971..28f2a27a68 100644
--- a/app/javascript/styles/mastodon/components.scss
+++ b/app/javascript/styles/mastodon/components.scss
@@ -1067,16 +1067,15 @@
}
.status__relative-time,
-.status__visibility-icon,
.notification__relative_time {
color: $dark-text-color;
float: right;
font-size: 14px;
+ padding-bottom: 1px;
}
.status__visibility-icon {
- margin-left: 4px;
- margin-right: 4px;
+ padding: 0 4px;
}
.status__display-name {
diff --git a/app/views/statuses/_simple_status.html.haml b/app/views/statuses/_simple_status.html.haml
index 336c1f2c82..7408749cca 100644
--- a/app/views/statuses/_simple_status.html.haml
+++ b/app/views/statuses/_simple_status.html.haml
@@ -1,10 +1,10 @@
.status{ class: "status-#{status.visibility}" }
.status__info
= link_to ActivityPub::TagManager.instance.url_for(status), class: 'status__relative-time u-url u-uid', target: stream_link_target, rel: 'noopener noreferrer' do
+ %span.status__visibility-icon><
+ = visibility_icon status
%time.time-ago{ datetime: status.created_at.iso8601, title: l(status.created_at) }= l(status.created_at)
%data.dt-published{ value: status.created_at.to_time.iso8601 }
- %span.status__visibility-icon
- = visibility_icon status
.p-author.h-card
= link_to ActivityPub::TagManager.instance.url_for(status.account), class: 'status__display-name u-url', target: stream_link_target, rel: 'noopener noreferrer' do
--
GitLab