nogafam
/
fedilove-ui
1
0
Fork 0
Code Issues 1 Pull Requests Projects Releases Wiki Activity

Make all chat messages the same (no highlighted msg) + Put like icon to all messages

This commit is contained in:
Bofh 2020-12-30 12:04:02 +01:00
parent bcbe400d76
commit cc04ede6f2
12 changed files with 82 additions and 134 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/routes/_actions/compose.js
View File

@ -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);
}

72
src/routes/_components/status/Status.html
View File

@ -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,

6
src/routes/_components/status/StatusAuthorName.html
View File

@ -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);
}

6
src/routes/_components/status/StatusContent.html
View File

@ -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'
)

8
src/routes/_components/status/StatusDetails.html
View File

@ -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 {

7
src/routes/_components/status/StatusMentions.html
View File

@ -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;
}

12
src/routes/_components/status/StatusPoll.html
View File

@ -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'
)

12
src/routes/_components/status/StatusSpoiler.html
View File

@ -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;

11
src/routes/_components/status/StatusToolbar.html
View File

@ -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) {

1
src/routes/_components/virtualList/VirtualListItem.html
View File

@ -11,7 +11,6 @@
</div>
<style>
.virtual-list-item {
position: absolute;
width: 100%;
opacity: 0;
pointer-events: none;

69
src/scss/themes/ozark.scss
View File

@ -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;
}
}
}
}

5
static/fedilove-no-react.js
View File

@ -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);
};