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

src/routes/_actions/compose.js

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

src/routes/_components/status/Status.html

@@ -12,9 +12,7 @@
   {/if}
   <StatusAuthorName {...params} />
   <StatusAuthorHandle {...params} />
-  {#if !isStatusInOwnThread}
+  <StatusRelativeDate {...params} {...timestampParams} />
-    <StatusRelativeDate {...params} {...timestampParams} />
-  {/if}
   <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) {
+      if (typeof window !== "undefined") {
-        // the whole <article> is clickable in this case
+        if (!window.location.pathname.startsWith('/statuses/')) {
-        registerClickDelegate(this, elementId, (e) => this.onClickOrKeydown(e))
+          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'
-        $underlineLinks && 'underline-links',
-        !$disableTapOnStatus && !isStatusInOwnThread && 'tap-on-status'
       )),
       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,

src/routes/_components/status/StatusAuthorName.html

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

src/routes/_components/status/StatusContent.html

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

src/routes/_components/status/StatusDetails.html

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

src/routes/_components/status/StatusMentions.html

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

src/routes/_components/status/StatusPoll.html

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

src/routes/_components/status/StatusSpoiler.html

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

src/routes/_components/status/StatusToolbar.html

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

src/routes/_components/virtualList/VirtualListItem.html

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

src/scss/themes/ozark.scss

@@ -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 {
+      a.status-favs-reblogs.status-favs.liked-msg > svg {
-        svg {
+        fill: red !important;
-          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 {
+      div.like-div {
-        position: fixed;
+        width: 100px;
-        right: 1em;
+        position: absolute;
         bottom: 0;
-        width: 4em;
-        height: 4em;
 
-        svg.status-favs-reblogs-svg {
+        a.status-favs-reblogs.status-favs {
-          fill: var(--deemphasized-text-color);
-          width: 1.8em;
-          height: 1.8em;
           position: relative;
-          left: .5em;
+          left: 3em;
-          top: -1em;
+          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;
-      }
-    }
-
   }
 }
 

static/fedilove-no-react.js

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