Make all chat messages the same (no highlighted msg) + Put like icon to all messages
This commit is contained in:
parent
bcbe400d76
commit
cc04ede6f2
|
|
@ -105,5 +105,10 @@ export function setReplyVisibility (realm, replyVisibility) {
|
|||
}
|
||||
|
||||
if (typeof window !== "undefined") {
|
||||
window.fediloveFunctions.postStatus = postStatus;
|
||||
const _this = setInterval(function() {
|
||||
if (window.fediloveFunctions != undefined) {
|
||||
window.fediloveFunctions.postStatus = postStatus;
|
||||
clearInterval(_this);
|
||||
}
|
||||
}, 300);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,9 +12,7 @@
|
|||
{/if}
|
||||
<StatusAuthorName {...params} />
|
||||
<StatusAuthorHandle {...params} />
|
||||
{#if !isStatusInOwnThread}
|
||||
<StatusRelativeDate {...params} {...timestampParams} />
|
||||
{/if}
|
||||
<StatusRelativeDate {...params} {...timestampParams} />
|
||||
<StatusSidebar {...params} />
|
||||
{#if spoilerText}
|
||||
<StatusSpoiler {...params} {spoilerShown} on:recalculateHeight />
|
||||
|
|
@ -34,10 +32,15 @@
|
|||
{#if showPoll && (showContent || preloadHiddenContent)}
|
||||
<StatusPoll {...params} shown={showContent} />
|
||||
{/if}
|
||||
{#if isStatusInOwnThread}
|
||||
<StatusDetails {...params} {...timestampParams} />
|
||||
{/if}
|
||||
<StatusToolbar {...params} {replyShown} on:recalculateHeight />
|
||||
<div class="like-div"><a class="status-favs-reblogs status-favs"
|
||||
rel="prefetch"
|
||||
href="/statuses/{originalStatusId}"
|
||||
onclick="return api_status_fav(this,'{originalStatusId}');"
|
||||
aria-label={favoritesLabel}>
|
||||
<svg class="status-favs-reblogs-svg"><path d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"></path></svg>
|
||||
<span>{numFavs}</span>
|
||||
</a></div>
|
||||
{#if replyShown}
|
||||
<StatusComposeBox {...params} on:recalculateHeight />
|
||||
{/if}
|
||||
|
|
@ -80,24 +83,6 @@
|
|||
background-color: var(--status-direct-background);
|
||||
}
|
||||
|
||||
.status-article.status-in-own-thread {
|
||||
grid-template-areas:
|
||||
"sidebar author-name"
|
||||
"sidebar author-handle"
|
||||
"spoiler spoiler"
|
||||
"spoiler-btn spoiler-btn"
|
||||
"mentions mentions"
|
||||
"content content"
|
||||
"card card"
|
||||
"media-grp media-grp"
|
||||
"media media"
|
||||
"poll poll"
|
||||
"details details"
|
||||
"toolbar toolbar"
|
||||
"compose compose";
|
||||
grid-template-columns: min-content 1fr;
|
||||
grid-template-rows: repeat(7, max-content);
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
import StatusSidebar from './StatusSidebar.html'
|
||||
|
|
@ -105,7 +90,6 @@
|
|||
import StatusAuthorName from './StatusAuthorName.html'
|
||||
import StatusAuthorHandle from './StatusAuthorHandle.html'
|
||||
import StatusRelativeDate from './StatusRelativeDate.html'
|
||||
import StatusDetails from './StatusDetails.html'
|
||||
import StatusCard from './StatusCard.html'
|
||||
import StatusToolbar from './StatusToolbar.html'
|
||||
import StatusMediaAttachments from './StatusMediaAttachments.html'
|
||||
|
|
@ -130,6 +114,7 @@
|
|||
import { composeNewStatusMentioning } from '../../_actions/mention'
|
||||
import { createStatusOrNotificationUuid } from '../../_utils/createStatusOrNotificationUuid'
|
||||
import { addEmojiTooltips } from '../../_utils/addEmojiTooltips'
|
||||
import { formatIntl } from '../../_utils/formatIntl'
|
||||
|
||||
const INPUT_TAGS = new Set(['a', 'button', 'input', 'textarea', 'label'])
|
||||
const isUserInputElement = node => INPUT_TAGS.has(node.localName)
|
||||
|
|
@ -138,11 +123,12 @@
|
|||
|
||||
export default {
|
||||
oncreate () {
|
||||
const { elementId, isStatusInOwnThread, showContent } = this.get()
|
||||
const { elementId, showContent } = this.get()
|
||||
const { disableTapOnStatus } = this.store.get()
|
||||
if (!isStatusInOwnThread && !disableTapOnStatus) {
|
||||
// the whole <article> is clickable in this case
|
||||
registerClickDelegate(this, elementId, (e) => this.onClickOrKeydown(e))
|
||||
if (typeof window !== "undefined") {
|
||||
if (!window.location.pathname.startsWith('/statuses/')) {
|
||||
registerClickDelegate(this, elementId, (e) => this.onClickOrKeydown(e))
|
||||
}
|
||||
}
|
||||
if (!showContent) {
|
||||
scheduleIdleTask(() => {
|
||||
|
|
@ -159,7 +145,6 @@
|
|||
StatusAuthorName,
|
||||
StatusAuthorHandle,
|
||||
StatusRelativeDate,
|
||||
StatusDetails,
|
||||
StatusToolbar,
|
||||
StatusMediaAttachments,
|
||||
StatusContent,
|
||||
|
|
@ -243,9 +228,6 @@
|
|||
),
|
||||
elementId: ({ uuid }) => uuid,
|
||||
shortcutScope: ({ elementId }) => elementId,
|
||||
isStatusInOwnThread: ({ timelineType, timelineValue, originalStatusId }) => (
|
||||
(timelineType === 'status' || timelineType === 'reply') && timelineValue === originalStatusId
|
||||
),
|
||||
isStatusInNotification: ({ originalStatusId, notification }) => (
|
||||
notification && notification.status &&
|
||||
notification.type !== 'mention' && notification.status.id === originalStatusId
|
||||
|
|
@ -267,6 +249,21 @@
|
|||
originalStatus.media_attachments &&
|
||||
originalStatus.media_attachments.length
|
||||
),
|
||||
numFavs: ({ $disableFavCounts, overrideNumFavs, originalStatus }) => {
|
||||
if ($disableFavCounts) {
|
||||
return 0
|
||||
}
|
||||
if (typeof overrideNumFavs === 'number') {
|
||||
return overrideNumFavs
|
||||
}
|
||||
return originalStatus.favourites_count || 0
|
||||
},
|
||||
favoritesLabel: ({ $disableFavCounts, numFavs }) => {
|
||||
if ($disableFavCounts) {
|
||||
return 'intl.favoriteCountsHidden'
|
||||
}
|
||||
return formatIntl('intl.favoritedTimes', { count: numFavs })
|
||||
},
|
||||
originalAccountEmojis: ({ originalAccount }) => (originalAccount.emojis || []),
|
||||
originalStatusEmojis: ({ originalStatus }) => (originalStatus.emojis || []),
|
||||
originalAccountDisplayName: ({ originalAccount }) => (originalAccount.display_name || originalAccount.username),
|
||||
|
|
@ -294,15 +291,13 @@
|
|||
status.reblog ||
|
||||
timelineType === 'pinned'
|
||||
),
|
||||
className: ({ visibility, timelineType, isStatusInOwnThread, $underlineLinks, $disableTapOnStatus }) => (classname(
|
||||
className: ({ visibility, timelineType, $underlineLinks, $disableTapOnStatus }) => (classname(
|
||||
'status-article',
|
||||
'shortcut-list-item',
|
||||
'focus-fix',
|
||||
timelineType !== 'direct' && visibility === 'direct' && 'status-direct',
|
||||
timelineType !== 'search' && 'status-in-timeline',
|
||||
isStatusInOwnThread && 'status-in-own-thread',
|
||||
$underlineLinks && 'underline-links',
|
||||
!$disableTapOnStatus && !isStatusInOwnThread && 'tap-on-status'
|
||||
$underlineLinks && 'underline-links'
|
||||
)),
|
||||
content: ({ originalStatus }) => originalStatus.content || '',
|
||||
showContent: ({ spoilerText, spoilerShown }) => !spoilerText || spoilerShown,
|
||||
|
|
@ -319,7 +314,7 @@
|
|||
// The main goal here is to avoid typing by passing as many params as possible to child components.
|
||||
params: ({
|
||||
notification, notificationId, status, statusId, timelineType,
|
||||
account, accountId, uuid, isStatusInNotification, isStatusInOwnThread,
|
||||
account, accountId, uuid, isStatusInNotification,
|
||||
originalAccount, originalAccountId, visibility,
|
||||
replyVisibility, spoilerText, originalStatus, originalStatusId, inReplyToId,
|
||||
enableShortcuts, shortcutScope, originalStatusEmojis
|
||||
|
|
@ -333,7 +328,6 @@
|
|||
accountId,
|
||||
uuid,
|
||||
isStatusInNotification,
|
||||
isStatusInOwnThread,
|
||||
originalAccount,
|
||||
originalAccountId,
|
||||
visibility,
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<a id={elementId}
|
||||
class="status-author-name {isStatusInNotification ? 'status-in-notification' : '' } {isStatusInOwnThread ? 'status-in-own-thread' : ''}"
|
||||
class="status-author-name {isStatusInNotification ? 'status-in-notification' : '' }"
|
||||
rel="prefetch"
|
||||
href="/accounts/{originalAccountId}"
|
||||
title="{'@' + originalAccount.acct}"
|
||||
|
|
@ -19,10 +19,6 @@
|
|||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.status-author-name.status-in-own-thread {
|
||||
font-size: 1.3em;
|
||||
}
|
||||
|
||||
.status-author-name, .status-author-name:hover, .status-author-name:visited {
|
||||
color: var(--body-text-color);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,11 +11,6 @@
|
|||
display: none;
|
||||
}
|
||||
|
||||
.status-content.status-in-own-thread {
|
||||
font-size: 1.3em;
|
||||
margin: 20px 10px 20px 5px;
|
||||
}
|
||||
|
||||
.status-content.shown {
|
||||
display: block;
|
||||
}
|
||||
|
|
@ -107,7 +102,6 @@
|
|||
computedClass: ({ isStatusInOwnThread, isStatusInNotification, shown }) => {
|
||||
return classname(
|
||||
'status-content',
|
||||
isStatusInOwnThread && 'status-in-own-thread',
|
||||
isStatusInNotification && 'status-in-notification',
|
||||
shown && 'shown'
|
||||
)
|
||||
|
|
|
|||
|
|
@ -31,14 +31,6 @@
|
|||
<SvgIcon className="status-favs-reblogs-svg" href="#fa-retweet" />
|
||||
<span>{numReblogs}</span>
|
||||
</a>
|
||||
<a class="status-favs-reblogs status-favs"
|
||||
rel="prefetch"
|
||||
href="/statuses/{originalStatusId}"
|
||||
onclick="return api_status_fav(this,'{originalStatusId}');"
|
||||
aria-label={favoritesLabel}>
|
||||
<svg class="status-favs-reblogs-svg"><path d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"></path></svg>
|
||||
<span>{numFavs}</span>
|
||||
</a>
|
||||
</div>
|
||||
<style>
|
||||
.status-details {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
{#if mentions.length}
|
||||
<div class="status-mentions {isStatusInOwnThread ? 'status-in-own-thread' : ''}">
|
||||
<div class="status-mentions">
|
||||
<p>
|
||||
{#each mentions as mention, i}
|
||||
{#if i > 0}
|
||||
|
|
@ -25,11 +25,6 @@
|
|||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
.status-mentions.status-in-own-thread {
|
||||
font-size: 1.3em;
|
||||
margin: 20px 10px 20px 5px;
|
||||
}
|
||||
|
||||
:global(.underline-links .status-mentions a) {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -72,10 +72,6 @@
|
|||
display: block;
|
||||
}
|
||||
|
||||
.poll.status-in-own-thread {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.poll.poll-loading {
|
||||
opacity: 0.5;
|
||||
pointer-events: none;
|
||||
|
|
@ -125,10 +121,6 @@
|
|||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.status-in-own-thread .option-text {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
ul.poll-details {
|
||||
display: grid;
|
||||
grid-template-columns: max-content minmax(0, max-content) max-content;
|
||||
|
|
@ -218,9 +210,6 @@
|
|||
.poll {
|
||||
padding: 10px 5px;
|
||||
}
|
||||
.poll.status-in-own-thread {
|
||||
padding: 10px;
|
||||
}
|
||||
ul.poll-details {
|
||||
grid-gap: 5px;
|
||||
justify-content: space-between;
|
||||
|
|
@ -321,7 +310,6 @@
|
|||
classname(
|
||||
'poll',
|
||||
isStatusInNotification && 'status-in-notification',
|
||||
isStatusInOwnThread && 'status-in-own-thread',
|
||||
loading && 'poll-loading',
|
||||
shown && 'shown'
|
||||
)
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<div class="status-spoiler {isStatusInNotification ? 'status-in-notification' : ''} {isStatusInOwnThread ? 'status-in-own-thread' : ''}">
|
||||
<div class="status-spoiler {isStatusInNotification ? 'status-in-notification' : ''}">
|
||||
<p>{@html massagedSpoilerText}</p>
|
||||
</div>
|
||||
<div class="status-spoiler-button {isStatusInOwnThread ? 'status-in-own-thread' : ''}">
|
||||
<div class="status-spoiler-button">
|
||||
<button id={elementId} type="button" >
|
||||
{spoilerShown ? 'intl.showLess' : 'intl.showMore'}
|
||||
</button>
|
||||
|
|
@ -19,11 +19,6 @@
|
|||
margin: 10px 5px;
|
||||
}
|
||||
|
||||
.status-spoiler.status-in-own-thread {
|
||||
font-size: 1.3em;
|
||||
margin: 20px 5px 10px;
|
||||
}
|
||||
|
||||
.status-spoiler.status-in-notification {
|
||||
color: var(--very-deemphasized-text-color);
|
||||
}
|
||||
|
|
@ -33,9 +28,6 @@
|
|||
margin: 10px 5px;
|
||||
}
|
||||
|
||||
.status-spoiler-button.status-in-own-thread {
|
||||
}
|
||||
|
||||
.status-spoiler-button button {
|
||||
padding: 5px 10px;
|
||||
font-size: 1.1em;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<div class="status-toolbar {isStatusInOwnThread ? 'status-in-own-thread' : ''}" ref:node>
|
||||
<div class="status-toolbar" ref:node>
|
||||
<IconButton
|
||||
className="status-toolbar-reply-button"
|
||||
label={replyLabel}
|
||||
|
|
@ -49,15 +49,6 @@
|
|||
justify-content: space-between;
|
||||
pointer-events: none;
|
||||
}
|
||||
.status-toolbar.status-in-own-thread {
|
||||
margin-left: 63px; /* offset to align all toolbar items: 48px avatar + 15px margin-right */
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.status-toolbar.status-in-own-thread {
|
||||
margin-left: 53px; /* offset to align all toolbar items: 48px avatar + 5px margin-right */
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 240px) {
|
||||
:global(.status-toolbar .icon-button-svg) {
|
||||
|
|
|
|||
|
|
@ -11,7 +11,6 @@
|
|||
</div>
|
||||
<style>
|
||||
.virtual-list-item {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
|
|
|
|||
|
|
@ -169,7 +169,7 @@ div#chat-compose-global {
|
|||
font-size: 1.1em;
|
||||
color: #5b5b5b;
|
||||
width: 100%;
|
||||
min-width: 15em;
|
||||
min-width: 10em;
|
||||
max-height: 6em;
|
||||
min-height: 4.5em;
|
||||
margin: .5em 0;
|
||||
|
|
@ -210,6 +210,12 @@ div.main-content.direct {
|
|||
}
|
||||
}
|
||||
|
||||
div.timeline div.virtual-list-item {
|
||||
a.status-favs-reblogs.status-favs {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
div.timeline > div.the-list {
|
||||
|
||||
div.list-item {
|
||||
|
|
@ -229,10 +235,8 @@ div.timeline > div.the-list {
|
|||
}
|
||||
|
||||
article.status-article.partymsg {
|
||||
a.status-favs-reblogs.status-favs.liked-msg {
|
||||
svg {
|
||||
fill: red !important;
|
||||
}
|
||||
a.status-favs-reblogs.status-favs.liked-msg > svg {
|
||||
fill: red !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -242,11 +246,13 @@ div.timeline > div.the-list {
|
|||
outline: none !important;
|
||||
margin: .5em 1em;
|
||||
padding-left: .8em;
|
||||
padding-right: 2.5em;
|
||||
float: left;
|
||||
max-width: 70%;
|
||||
font-size: .94em;
|
||||
border: none;
|
||||
box-shadow: 6px 6px 6px #dbd7d7;
|
||||
min-width: 15em;
|
||||
max-width: 30em;
|
||||
|
||||
div.status-article-compose-box {
|
||||
display: none;
|
||||
|
|
@ -277,26 +283,32 @@ div.timeline > div.the-list {
|
|||
display: none;
|
||||
}
|
||||
|
||||
a.status-favs-reblogs.status-favs {
|
||||
position: fixed;
|
||||
right: 1em;
|
||||
div.like-div {
|
||||
width: 100px;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 4em;
|
||||
height: 4em;
|
||||
|
||||
svg.status-favs-reblogs-svg {
|
||||
fill: var(--deemphasized-text-color);
|
||||
width: 1.8em;
|
||||
height: 1.8em;
|
||||
a.status-favs-reblogs.status-favs {
|
||||
position: relative;
|
||||
left: .5em;
|
||||
top: -1em;
|
||||
left: 3em;
|
||||
display: flex;
|
||||
float: right;
|
||||
width: 4em;
|
||||
height: 4em;
|
||||
|
||||
svg.status-favs-reblogs-svg {
|
||||
fill: var(--deemphasized-text-color);
|
||||
width: 1.8em;
|
||||
height: 1.8em;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
span {
|
||||
visibility: collapse;
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
visibility: collapse;
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
svg.external-link-svg {
|
||||
|
|
@ -306,21 +318,6 @@ div.timeline > div.the-list {
|
|||
|
||||
}
|
||||
|
||||
article.status-in-own-thread {
|
||||
float: initial !important;
|
||||
max-width: initial !important;
|
||||
border-radius: .5em !important;
|
||||
border: 10px dotted #4e83d573;
|
||||
|
||||
a.status-author-name {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
div.status-content {
|
||||
font-size: .94em !important;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -254,6 +254,11 @@ function fedilove_customization() {
|
|||
$(this).attr('onclick', 'return false;');
|
||||
});
|
||||
|
||||
// resize likes acording to the outer parent
|
||||
$('div.main-content.chat div.the-list article.status-article').each(function(e) {
|
||||
$(this).find('div.like-div').width($(this).width());
|
||||
});
|
||||
|
||||
}, theint);
|
||||
};
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue