From 473ddfaa85d4a0f433d4d8c05e308596e7a37f2c Mon Sep 17 00:00:00 2001
From: Nolan Lawson <nolan@nolanlawson.com>
Date: Fri, 9 Feb 2018 22:55:11 -0800
Subject: [PATCH] add separate style for status-in-own-context

---
 routes/_components/Avatar.html                |  5 +
 routes/_components/status/Status.html         | 52 +++++++---
 .../status/StatusAbsoluteDate.html            | 37 +++++++
 routes/_components/status/StatusAuthor.html   | 99 -------------------
 .../status/StatusAuthorHandle.html            | 20 ++++
 .../_components/status/StatusAuthorName.html  | 57 +++++++++++
 .../status/StatusRelativeDate.html            | 43 ++++++++
 routes/_components/status/StatusSidebar.html  |  2 +-
 routes/_components/status/StatusSpoiler.html  | 30 +++---
 routes/_components/status/StatusToolbar.html  |  5 +-
 10 files changed, 225 insertions(+), 125 deletions(-)
 create mode 100644 routes/_components/status/StatusAbsoluteDate.html
 delete mode 100644 routes/_components/status/StatusAuthor.html
 create mode 100644 routes/_components/status/StatusAuthorHandle.html
 create mode 100644 routes/_components/status/StatusAuthorName.html
 create mode 100644 routes/_components/status/StatusRelativeDate.html

diff --git a/routes/_components/Avatar.html b/routes/_components/Avatar.html
index 8181217..b0ac208 100644
--- a/routes/_components/Avatar.html
+++ b/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;
diff --git a/routes/_components/status/Status.html b/routes/_components/status/Status.html
index d84eb1d..846c9d9 100644
--- a/routes/_components/status/Status.html
+++ b/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 />
-  <StatusSidebar status="{{originalStatus}}" />
+  <StatusAuthorName status="{{originalStatus}}" :isStatusInOwnThread :isStatusInNotification />
+  <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"
-        "sidebar author-name     author-handle  author-date"
-        "sidebar spoiler         spoiler        spoiler"
-        "sidebar spoiler-button  spoiler-button spoiler-button"
-        "sidebar content         content        content"
-        "media   media           media          media"
-        "....... toolbar         toolbar        toolbar";
+        "....... header       header        header"
+        "sidebar author-name  author-handle relative-date"
+        "sidebar spoiler      spoiler       spoiler"
+        "sidebar spoiler-btn  spoiler-btn   spoiler-btn"
+        "sidebar content      content       content"
+        "media   media        media         media"
+        "....... 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,
diff --git a/routes/_components/status/StatusAbsoluteDate.html b/routes/_components/status/StatusAbsoluteDate.html
new file mode 100644
index 0000000..061024f
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/routes/_components/status/StatusAuthor.html b/routes/_components/status/StatusAuthor.html
deleted file mode 100644
index 0a8998e..0000000
--- a/routes/_components/status/StatusAuthor.html
+++ /dev/null
@@ -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>
\ No newline at end of file
diff --git a/routes/_components/status/StatusAuthorHandle.html b/routes/_components/status/StatusAuthorHandle.html
new file mode 100644
index 0000000..1398226
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/routes/_components/status/StatusAuthorName.html b/routes/_components/status/StatusAuthorName.html
new file mode 100644
index 0000000..b9dd738
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/routes/_components/status/StatusRelativeDate.html b/routes/_components/status/StatusRelativeDate.html
new file mode 100644
index 0000000..4cedfa2
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/routes/_components/status/StatusSidebar.html b/routes/_components/status/StatusSidebar.html
index fcb6da2..6f1e4d1 100644
--- a/routes/_components/status/StatusSidebar.html
+++ b/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;
diff --git a/routes/_components/status/StatusSpoiler.html b/routes/_components/status/StatusSpoiler.html
index fcbb51c..6fe6f32 100644
--- a/routes/_components/status/StatusSpoiler.html
+++ b/routes/_components/status/StatusSpoiler.html
@@ -1,7 +1,7 @@
-<div class="status-spoiler {{isStatusInNotification ? 'status-in-notification' : ''}}">
-  {{status.spoiler_text}}
+<div class="status-spoiler {{isStatusInNotification ? 'status-in-notification' : ''}} {{isStatusInOwnThread ? 'status-in-own-thread' : ''}}">
+  <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;
-    margin: 5px;
+    font-size: 0.9em;
+    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;
-    margin: 5px;
+    grid-area: spoiler-btn;
+    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'
diff --git a/routes/_components/status/StatusToolbar.html b/routes/_components/status/StatusToolbar.html
index 21dab0b..13051e8 100644
--- a/routes/_components/status/StatusToolbar.html
+++ b/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>