add separate style for status-in-own-context

routes/_components/Avatar.html

@@ -18,6 +18,11 @@
     height: 48px;
   }
 
+  :global(.avatar.size-medium) {
+    width: 64px;
+    height: 64px;
+  }
+
   :global(.avatar.size-big) {
     width: 100px;
     height: 100px;

routes/_components/status/Status.html

@@ -5,10 +5,14 @@
   {{#if (notification && (notification.type === 'reblog' || notification.type === 'favourite')) || status.reblog}}
     <StatusHeader :notification :status :isStatusInNotification />
   {{/if}}
-  <StatusAuthor status="{{originalStatus}}" :isStatusInOwnThread :isStatusInNotification />
+  <StatusAuthorName status="{{originalStatus}}" :isStatusInOwnThread :isStatusInNotification />
-  <StatusSidebar status="{{originalStatus}}" />
+  <StatusAuthorHandle status="{{originalStatus}}" :isStatusInNotification />
+  {{#if !isStatusInOwnThread}}
+    <StatusRelativeDate status="{{originalStatus}}" :isStatusInNotification />
+  {{/if}}
+  <StatusSidebar status="{{originalStatus}}" :isStatusInOwnThread />
   {{#if originalStatus.spoiler_text}}
-    <StatusSpoiler status="{{originalStatus}}" :contextualStatusId :isStatusInNotification on:recalculateHeight />
+    <StatusSpoiler status="{{originalStatus}}" :isStatusInOwnThread :contextualStatusId :isStatusInNotification on:recalculateHeight />
   {{/if}}
   {{#if !originalStatus.spoiler_text || spoilerShown}}
     <StatusContent status="{{originalStatus}}" :isStatusInOwnThread :isStatusInNotification />
@@ -16,7 +20,10 @@
   {{#if originalStatus.media_attachments && originalStatus.media_attachments.length}}
     <StatusMediaAttachments status="{{originalStatus}}" :contextualStatusId on:recalculateHeight />
   {{/if}}
-  <StatusToolbar :status />
+  {{#if isStatusInOwnThread}}
+  <StatusAbsoluteDate status="{{originalStatus}}" />
+  {{/if}}
+  <StatusToolbar :status :isStatusInOwnThread />
 </article>
 
 <style>
@@ -25,13 +32,13 @@
     padding: 10px 20px;
     display: grid;
     grid-template-areas:
-        "....... header          header         header"
+        "....... header       header        header"
-        "sidebar author-name     author-handle  author-date"
+        "sidebar author-name  author-handle relative-date"
-        "sidebar spoiler         spoiler        spoiler"
+        "sidebar spoiler      spoiler       spoiler"
-        "sidebar spoiler-button  spoiler-button spoiler-button"
+        "sidebar spoiler-btn  spoiler-btn   spoiler-btn"
-        "sidebar content         content        content"
+        "sidebar content      content       content"
-        "media   media           media          media"
+        "media   media        media         media"
-        "....... toolbar         toolbar        toolbar";
+        "....... toolbar      toolbar       toolbar";
     grid-template-columns: min-content minmax(0, max-content) 1fr min-content;
   }
 
@@ -44,6 +51,19 @@
     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"
+      "content     content"
+      "media       media"
+      "date        date"
+      "toolbar     toolbar";
+    grid-template-columns: min-content 1fr;
+  }
+
   @media (max-width: 767px) {
     .status-article {
       padding: 10px 10px;
@@ -54,7 +74,10 @@
 <script>
   import StatusSidebar from './StatusSidebar.html'
   import StatusHeader from './StatusHeader.html'
-  import StatusAuthor from './StatusAuthor.html'
+  import StatusAuthorName from './StatusAuthorName.html'
+  import StatusAuthorHandle from './StatusAuthorHandle.html'
+  import StatusRelativeDate from './StatusRelativeDate.html'
+  import StatusAbsoluteDate from './StatusAbsoluteDate.html'
   import StatusToolbar from './StatusToolbar.html'
   import StatusMediaAttachments from './StatusMediaAttachments.html'
   import StatusContent from './StatusContent.html'
@@ -66,7 +89,10 @@
     components: {
       StatusSidebar,
       StatusHeader,
-      StatusAuthor,
+      StatusAuthorName,
+      StatusAuthorHandle,
+      StatusRelativeDate,
+      StatusAbsoluteDate,
       StatusToolbar,
       StatusMediaAttachments,
       StatusContent,

routes/_components/status/StatusAbsoluteDate.html

@@ -0,0 +1,37 @@
+<ExternalLink class="status-absolute-date" href="{{status.url}}" showIcon="true">
+  <time datetime={{createdAtDate}} title="{{formattedDate}}">{{formattedDate}}</time>
+</ExternalLink>
+<style>
+  :global(.status-absolute-date) {
+    grid-area: date;
+    font-size: 1.1em;
+    white-space: nowrap;
+    margin: 10px 5px;
+    justify-self: right;
+  }
+
+  :global(.status-absolute-date, .status-absolute-date:hover, .status-absolute-date:visited) {
+    color: var(--deemphasized-text-color);
+  }
+</style>
+<script>
+  import ExternalLink from '../ExternalLink.html'
+
+  const formatter = new Intl.DateTimeFormat('en-US', {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+    hour: '2-digit',
+    minute: '2-digit'
+  })
+
+  export default {
+    computed: {
+      createdAtDate: (status) => status.created_at,
+      formattedDate: (createdAtDate) => formatter.format(new Date(createdAtDate))
+    },
+    components: {
+      ExternalLink
+    }
+  }
+</script>

routes/_components/status/StatusAuthor.html

@@ -1,99 +0,0 @@
-<a 
-  class="status-author-name {{getClass(isStatusInNotification)}}"
-  href="/accounts/{{status.account.id}}"
->
-  {{status.account.display_name || status.account.username}}
-</a>
-<span class="status-author-handle {{getClass(isStatusInNotification)}}"
->
-    {{'@' + status.account.acct}}
-  </span>
-{{#if isStatusInOwnThread}}
-<ExternalLink class="status-author-date" href="{{status.url}}" showIcon="true">
-  <time datetime={{createdAtDate}} title="{{relativeDate}}">{{relativeDate}}</time>
-</ExternalLink>
-{{else}}
-<a class="status-author-date {{getClass(isStatusInNotification)}}"
-   href="/statuses/{{status.id}}"
->
-  <time datetime={{createdAtDate}} title="{{relativeDate}}">{{relativeDate}}</time>
-</a>
-{{/if}}
-<style>
-  .status-author {
-    grid-area: author;
-    align-items: center;
-    min-width: 0;
-  }
-
-  .status-author-name {
-    grid-area: author-name;
-    align-self: center;
-    margin-left: 5px;
-    font-size: 1.1em;
-    min-width: 0;
-    font-weight: 600;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  .status-author-name, .status-author-name:hover, .status-author-name:visited {
-    color: var(--body-text-color);
-  }
-
-  .status-author-handle {
-    grid-area: author-handle;
-    align-self: center;
-    margin-left: 5px;
-    color: var(--deemphasized-text-color);
-    font-size: 1.1em;
-    min-width: 0;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  .status-author-date {
-    grid-area: author-date;
-    align-self: center;
-    margin-left: 5px;
-    margin-right: 10px;
-    font-size: 1.1em;
-    text-align: right;
-    white-space: nowrap;
-  }
-  .status-author-date, .status-author-date:hover, .status-author-date:visited {
-    color: var(--deemphasized-text-color);
-  }
-
-  .status-author-in-notification, .status-author-in-notification:hover, .status-author-in-notification:visited {
-    color: var(--very-deemphasized-text-color);
-  }
-
-</style>
-<script>
-  import IntlRelativeFormat from 'intl-relativeformat'
-  import ExternalLink from '../ExternalLink.html'
-  import { mark, stop } from '../../_utils/marks'
-
-  const relativeFormat = new IntlRelativeFormat('en-US');
-
-  export default {
-    helpers: {
-      getClass: isStatusInNotification => isStatusInNotification ? 'status-author-in-notification' : ''
-    },
-    computed: {
-      createdAtDate: (status) => status.created_at,
-      relativeDate: (createdAtDate) => {
-        mark('compute relativeDate')
-        let res = relativeFormat.format(new Date(createdAtDate))
-        stop('compute relativeDate')
-        return res
-      }
-    },
-    components: {
-      ExternalLink
-    }
-  }
-</script>

routes/_components/status/StatusAuthorHandle.html

@@ -0,0 +1,20 @@
+<span class="status-author-handle {{isStatusInNotification ? 'status-in-notification' : '' }}">
+  {{'@' + status.account.acct}}
+</span>
+<style>
+  .status-author-handle {
+    grid-area: author-handle;
+    align-self: center;
+    margin-left: 5px;
+    color: var(--deemphasized-text-color);
+    font-size: 1.1em;
+    min-width: 0;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .status-author-handle.status-in-notification {
+    color: var(--very-deemphasized-text-color);
+  }
+</style>

routes/_components/status/StatusAuthorName.html

@@ -0,0 +1,57 @@
+<a class="status-author-name {{isStatusInNotification ? 'status-in-notification' : '' }} {{isStatusInOwnThread ? 'status-in-own-thread' : ''}}"
+   href="/accounts/{{status.account.id}}">
+  {{status.account.display_name || status.account.username}}
+</a>
+<style>
+  .status-author-name {
+    grid-area: author-name;
+    align-self: center;
+    margin-left: 5px;
+    font-size: 1.1em;
+    min-width: 0;
+    font-weight: 600;
+    white-space: nowrap;
+    overflow: hidden;
+    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);
+  }
+
+  .status-author-name.status-in-notification,
+  .status-author-name.status-in-notification:hover,
+  .status-author-name.status-in-notification:visited {
+    color: var(--very-deemphasized-text-color);
+  }
+
+</style>
+<script>
+  import IntlRelativeFormat from 'intl-relativeformat'
+  import ExternalLink from '../ExternalLink.html'
+  import { mark, stop } from '../../_utils/marks'
+
+  const relativeFormat = new IntlRelativeFormat('en-US');
+
+  export default {
+    helpers: {
+      getClass: isStatusInNotification => isStatusInNotification ? 'status-author-in-notification' : ''
+    },
+    computed: {
+      createdAtDate: (status) => status.created_at,
+      relativeDate: (createdAtDate) => {
+        mark('compute relativeDate')
+        let res = relativeFormat.format(new Date(createdAtDate))
+        stop('compute relativeDate')
+        return res
+      }
+    },
+    components: {
+      ExternalLink
+    }
+  }
+</script>

routes/_components/status/StatusRelativeDate.html

@@ -0,0 +1,43 @@
+<a class="status-relative-date {{isStatusInNotification ? 'status-in-notification' : '' }}"
+   href="/statuses/{{status.id}}">
+  <time datetime={{createdAtDate}} title="{{relativeDate}}">{{relativeDate}}</time>
+</a>
+<style>
+  .status-relative-date {
+    grid-area: relative-date;
+    align-self: center;
+    margin-left: 5px;
+    margin-right: 10px;
+    font-size: 1.1em;
+    text-align: right;
+    white-space: nowrap;
+  }
+  .status-relative-date, .status-relative-date:hover, .status-relative-date:visited {
+    color: var(--deemphasized-text-color);
+  }
+
+  .status-relative-date.status-in-notification,
+  .status-relative-date.status-in-notification:hover,
+  .status-relative-date.status-in-notification:visited {
+    color: var(--very-deemphasized-text-color);
+  }
+
+</style>
+<script>
+  import IntlRelativeFormat from 'intl-relativeformat'
+  import { mark, stop } from '../../_utils/marks'
+
+  const relativeFormat = new IntlRelativeFormat('en-US');
+
+  export default {
+    computed: {
+      createdAtDate: (status) => status.created_at,
+      relativeDate: (createdAtDate) => {
+        mark('compute relativeDate')
+        let res = relativeFormat.format(new Date(createdAtDate))
+        stop('compute relativeDate')
+        return res
+      }
+    }
+  }
+</script>

routes/_components/status/StatusSidebar.html

@@ -1,6 +1,6 @@
 <Avatar account={{status.account}}
         className="status-sidebar"
-        size="small" />
+        size="{{isStatusInOwnThread ? 'medium' : 'small'}}" />
 <style>
   :global(.status-sidebar) {
     grid-area: sidebar;

routes/_components/status/StatusSpoiler.html

@@ -1,7 +1,7 @@
-<div class="status-spoiler {{isStatusInNotification ? 'status-in-notification' : ''}}">
+<div class="status-spoiler {{isStatusInNotification ? 'status-in-notification' : ''}} {{isStatusInOwnThread ? 'status-in-own-thread' : ''}}">
-  {{status.spoiler_text}}
+  <p>{{status.spoiler_text}}</p>
 </div>
-<div class="status-spoiler-button">
+<div class="status-spoiler-button {{isStatusInOwnThread ? 'status-in-own-thread' : ''}}">
   <button type="button" on:click="onClickSpoilerButton()">
     {{spoilerShown ? 'Show less' : 'Show more'}}
   </button>
@@ -12,23 +12,31 @@
     word-wrap: break-word;
     overflow: hidden;
     white-space: pre-wrap;
-    font-size: 1.1em;
+    font-size: 0.9em;
-    margin: 5px;
+    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);
   }
 
   .status-spoiler-button {
-    grid-area: spoiler-button;
+    grid-area: spoiler-btn;
-    margin: 5px;
+    margin: 10px 5px;
+  }
+
+  .status-spoiler-button.status-in-own-thread {
   }
 
   .status-spoiler-button button {
     padding: 5px 10px;
     font-size: 1.1em;
   }
-
-  .status-spoiler.status-in-notification {
-    color: var(--very-deemphasized-text-color);
-  }
 </style>
 <script>
   import { store } from '../../_store/store'

routes/_components/status/StatusToolbar.html

@@ -1,4 +1,4 @@
-<div class="status-toolbar">
+<div class="status-toolbar {{isStatusInOwnThread ? 'status-in-own-thread' : ''}}">
   <IconButton
     label="Reply"
     href="#fa-reply"
@@ -26,6 +26,9 @@
     display: flex;
     justify-content: space-between;
   }
+  .status-toolbar.status-in-own-thread {
+    margin-left: 58px;
+  }
 </style>
 <script>