From 3c0d543ea19328746f696581c9da4330bde841a6 Mon Sep 17 00:00:00 2001
From: Nolan Lawson <nolan@nolanlawson.com>
Date: Sat, 31 Mar 2018 16:51:18 -0700
Subject: [PATCH] refactor account profile

---
 routes/_components/AccountProfile.html        | 318 ------------------
 .../_components/profile/AccountProfile.html   |  98 ++++++
 .../profile/AccountProfileDetails.html        |  63 ++++
 .../profile/AccountProfileFollow.html         |  72 ++++
 .../profile/AccountProfileHeader.html         |  84 +++++
 .../profile/AccountProfileNote.html           |  45 +++
 routes/_pages/accounts/[accountId].html       |   2 +-
 7 files changed, 363 insertions(+), 319 deletions(-)
 delete mode 100644 routes/_components/AccountProfile.html
 create mode 100644 routes/_components/profile/AccountProfile.html
 create mode 100644 routes/_components/profile/AccountProfileDetails.html
 create mode 100644 routes/_components/profile/AccountProfileFollow.html
 create mode 100644 routes/_components/profile/AccountProfileHeader.html
 create mode 100644 routes/_components/profile/AccountProfileNote.html

diff --git a/routes/_components/AccountProfile.html b/routes/_components/AccountProfile.html
deleted file mode 100644
index 5da765e9..00000000
--- a/routes/_components/AccountProfile.html
+++ /dev/null
@@ -1,318 +0,0 @@
-<div class="account-profile {{headerIsMissing ? 'header-is-missing' : ''}}"
-     style="background-image: url({{$autoplayGifs ? account.header : account.header_static}});">
-  <div class="account-profile-grid-wrapper">
-    <div class="account-profile-backdrop"></div>
-    <div class="account-profile-grid">
-      <div class="account-profile-avatar">
-        <Avatar :account size="big" />
-      </div>
-      <div class="account-profile-name">
-        <ExternalLink href="{{account.url}}" showIcon="true" normalIconColor="true">
-          {{account.display_name || account.acct}}
-        </ExternalLink>
-      </div>
-      <div class="account-profile-username">
-        {{'@' + account.acct}}
-      </div>
-      <div class="account-profile-followed-by">
-        {{#if relationship && relationship.followed_by}}
-        <span>
-          Follows you
-        </span>
-        {{/if}}
-      </div>
-      <div class="account-profile-follow">
-        {{#if verifyCredentials && relationship && verifyCredentials.id !== relationship.id}}
-          <IconButton
-            label="{{followLabel}}"
-            href="{{followIcon}}"
-            pressable="true"
-            pressed="{{following}}"
-            big="true"
-            on:click="onFollowButtonClick(event)"
-            animation="{{animateFollowButton && followButtonAnimation}}"
-          />
-        {{/if}}
-      </div>
-      <div class="account-profile-note">
-        {{{massagedNote}}}
-      </div>
-      <div class="account-profile-details">
-        <div class="account-profile-details-item">
-          <span class="account-profile-details-item-title">
-            Toots
-          </span>
-          <span class="account-profile-details-item-datum">
-            {{account.statuses_count || 0}}
-          </span>
-        </div>
-        <div class="account-profile-details-item">
-          <span class="account-profile-details-item-title">
-            Follows
-          </span>
-          <span class="account-profile-details-item-datum">
-            {{account.following_count || 0}}
-          </span>
-        </div>
-        <div class="account-profile-details-item">
-          <span class="account-profile-details-item-title">
-            Followers
-          </span>
-          <span class="account-profile-details-item-datum">
-            {{account.followers_count || 0}}
-          </span>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-<style>
-  .account-profile {
-    position: relative;
-    background-size: cover;
-    background-position: center;
-    padding-top: 175px;
-  }
-
-  .account-profile.header-is-missing {
-    padding-top: 0;
-    background-color: #ccc;
-  }
-
-  .account-profile-backdrop {
-    position: absolute;
-    left: 0;
-    top: 0;
-    bottom: 0;
-    right: 0;
-    z-index: 5;
-  }
-
-  .account-profile-grid {
-    display: grid;
-    grid-template-areas: "avatar     name        followed-by   follow"
-                         "avatar     username    username      follow"
-                         "avatar     note        note          follow"
-                         "details    details     details       details";
-    grid-template-columns: min-content auto 1fr min-content;
-    grid-column-gap: 10px;
-    grid-row-gap: 5px;
-    padding: 20px;
-    justify-content: center;
-    z-index: 10;
-    position: relative;
-  }
-
-  @supports (-webkit-backdrop-filter: blur(1px) saturate(1%)) or (backdrop-filter: blur(1px) saturate(1%)) {
-    :global(.account-profile-grid-wrapper) {
-      -webkit-backdrop-filter: blur(7px) saturate(110%);
-      backdrop-filter: blur(7px) saturate(110%);
-      background-color: rgba(255, 255, 255, 0.7);
-    }
-  }
-
-  @supports not ((-webkit-backdrop-filter: blur(1px) saturate(1%)) or (backdrop-filter: blur(1px) saturate(1%))) {
-    :global(.account-profile-grid-wrapper) {
-      background-color: rgba(255, 255, 255, 0.9);
-    }
-  }
-
-  .account-profile-followed-by {
-    grid-area: followed-by;
-    align-self: center;
-    text-transform: uppercase;
-    color: var(--deemphasized-text-color);
-    font-size: 0.8em;
-  }
-  .account-profile-followed-by span {
-    background: rgba(30, 30, 30, 0.2);
-    border-radius: 4px;
-    padding: 3px 5px;
-    white-space: nowrap;
-  }
-  .account-profile-avatar {
-    grid-area: avatar;
-  }
-
-  .account-profile-username {
-    grid-area: username;
-    color: var(--deemphasized-text-color);
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    align-self: center;
-  }
-
-  .account-profile-follow {
-    grid-area: follow;
-    align-self: flex-start;
-  }
-  .account-profile-name {
-    grid-area: name;
-    font-size: 1.5em;
-    align-self: center;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    min-width: 0;
-  }
-  :global(.account-profile-name a) {
-    color: var(--body-text-color);
-    text-decoration: none;
-  }
-  :global(.account-profile-name a:hover) {
-    color: var(--body-text-color);
-    text-decoration: underline;
-  }
-  .account-profile-note {
-    grid-area: note;
-    padding: 10px 0;
-    font-size: 0.9em;
-    word-wrap: break-word;
-    overflow: hidden;
-    white-space: pre-wrap;
-  }
-
-  :global(.account-profile-note p) {
-    margin: 0 0 20px;
-  }
-
-  :global(.account-profile-note p:first-child) {
-    margin: 0 0 20px;
-  }
-
-  :global(.account-profile-note p:last-child) {
-    margin: 0;
-  }
-
-  .account-profile-details {
-    grid-area: details;
-    display: flex;
-    margin: 0 5px;
-  }
-
-  .account-profile-details-item {
-    flex: 1;
-    display: flex;
-    flex-direction: row;
-    padding: 5px;
-    justify-content: center;
-    font-size: 1.1em;
-  }
-
-  .account-profile-details-item:hover {
-    background: var(--button-bg-hover);
-    cursor: pointer;
-  }
-
-  .account-profile-details-item:active {
-    background: var(--button-bg-active);
-  }
-
-  .account-profile-details-item-title {
-    text-transform: uppercase;
-    color: var(--deemphasized-text-color);
-    margin-right: 5px;
-  }
-
-  .account-profile-details-item-datum {
-    color: var(--body-text-color);
-    margin-left: 5px;
-    font-weight: 600;
-  }
-
-  @media (max-width: 767px) {
-    .account-profile-name {
-      font-size: 1.3em;
-    }
-    .account-profile-grid {
-      display: grid;
-      grid-template-areas: "avatar     name          follow"
-                           "avatar     username      follow"
-                           "avatar     followed-by   follow"
-                           "note       note          note"
-                           "details    details       details";
-      grid-template-columns: min-content minmax(auto, 1fr) min-content;
-      grid-template-rows: min-content min-content 1fr min-content;
-      padding: 10px;
-    }
-    .account-profile-note {
-      padding: 5px 0;
-    }
-    .account-profile-username {
-      font-size: 1.1em;
-    }
-    .account-profile-name, .account-profile-username {
-      align-self: flex-start;
-    }
-  }
-</style>
-<script>
-  import IconButton from './IconButton.html'
-  import ExternalLink from './ExternalLink.html'
-  import Avatar from './Avatar.html'
-  import { store } from '../_store/store'
-  import { setAccountFollowed } from '../_actions/follow'
-  import { database } from '../_database/database'
-  import { FOLLOW_BUTTON_ANIMATION } from '../_static/animations'
-
-  export default {
-    methods: {
-      async onFollowButtonClick(e) {
-        e.preventDefault()
-        e.stopPropagation()
-        let accountId = this.get('accountId')
-        let instanceName = this.store.get('currentInstance')
-        let following = this.get('following')
-        let followRequested = this.get('followRequested')
-        this.set({animateFollowButton: true})
-        await setAccountFollowed(accountId, !(following || followRequested))
-        let relationship = await database.getRelationship(instanceName, accountId)
-        this.set({relationship})
-      }
-    },
-    store: () => store,
-    data: () => ({
-      followButtonAnimation: FOLLOW_BUTTON_ANIMATION
-    }),
-    computed: {
-      accountId: (account) => account.id,
-      headerIsMissing: (account) => account.header.endsWith('missing.png'),
-      note: (account) => account.note,
-      massagedNote: (note) => {
-        // GNU Social / Pleroma don't add <p> tags
-        if (!note.startsWith('<p>')) {
-          note = `<p>${note}</p>`
-        }
-        return note
-      },
-      following: (relationship) => relationship && relationship.following,
-      followRequested: (relationship, account) => {
-        return relationship && relationship.requested && account && account.locked
-      },
-      followLabel: (following, followRequested) => {
-        if (following) {
-          return 'Unfollow'
-        } else if (followRequested) {
-          return 'Unfollow (follow requested)'
-        } else {
-          return 'Follow'
-        }
-      },
-      followIcon: (following, followRequested) => {
-        if (following) {
-          return '#fa-user-times'
-        } else if (followRequested) {
-          return '#fa-hourglass'
-        } else {
-          return '#fa-user-plus'
-        }
-      }
-    },
-    components: {
-      IconButton,
-      ExternalLink,
-      Avatar
-    }
-  }
-</script>
\ No newline at end of file
diff --git a/routes/_components/profile/AccountProfile.html b/routes/_components/profile/AccountProfile.html
new file mode 100644
index 00000000..bca468e6
--- /dev/null
+++ b/routes/_components/profile/AccountProfile.html
@@ -0,0 +1,98 @@
+<div class="account-profile {{headerImageIsMissing ? 'header-image-is-missing' : ''}}"
+     style="background-image: url({{headerImage}});">
+  <div class="account-profile-grid-wrapper">
+    <div class="account-profile-backdrop"></div>
+    <div class="account-profile-grid">
+      <AccountProfileHeader :account :relationship :verifyCredentials />
+      <AccountProfileFollow :account :relationship :verifyCredentials />
+      <AccountProfileNote :account />
+      <AccountProfileDetails :account />
+    </div>
+  </div>
+</div>
+<style>
+  .account-profile {
+    position: relative;
+    background-size: cover;
+    background-position: center;
+    padding-top: 175px;
+  }
+
+  .account-profile.header-image-is-missing {
+    padding-top: 0;
+    background-color: #ccc;
+  }
+
+  .account-profile-backdrop {
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    z-index: 5;
+  }
+
+  .account-profile-grid {
+    display: grid;
+    grid-template-areas: "avatar     name        followed-by   follow"
+                         "avatar     username    username      follow"
+                         "avatar     note        note          follow"
+                         "details    details     details       details";
+    grid-template-columns: min-content auto 1fr min-content;
+    grid-column-gap: 10px;
+    grid-row-gap: 5px;
+    padding: 20px;
+    justify-content: center;
+    z-index: 10;
+    position: relative;
+  }
+
+  @supports (-webkit-backdrop-filter: blur(1px) saturate(1%)) or (backdrop-filter: blur(1px) saturate(1%)) {
+    :global(.account-profile-grid-wrapper) {
+      -webkit-backdrop-filter: blur(7px) saturate(110%);
+      backdrop-filter: blur(7px) saturate(110%);
+      background-color: rgba(255, 255, 255, 0.7);
+    }
+  }
+
+  @supports not ((-webkit-backdrop-filter: blur(1px) saturate(1%)) or (backdrop-filter: blur(1px) saturate(1%))) {
+    :global(.account-profile-grid-wrapper) {
+      background-color: rgba(255, 255, 255, 0.9);
+    }
+  }
+
+  @media (max-width: 767px) {
+    .account-profile-grid {
+      display: grid;
+      grid-template-areas: "avatar     name          follow"
+                           "avatar     username      follow"
+                           "avatar     followed-by   follow"
+                           "note       note          note"
+                           "details    details       details";
+      grid-template-columns: min-content minmax(auto, 1fr) min-content;
+      grid-template-rows: min-content min-content 1fr min-content;
+      padding: 10px;
+    }
+  }
+</style>
+<script>
+  import AccountProfileHeader from './AccountProfileHeader.html'
+  import AccountProfileFollow from './AccountProfileFollow.html'
+  import AccountProfileNote from './AccountProfileNote.html'
+  import AccountProfileDetails from './AccountProfileDetails.html'
+  import { store } from '../../_store/store'
+
+  export default {
+    store: () => store,
+    computed: {
+      headerImageIsMissing: (account) => account.header.endsWith('missing.png'),
+      headerImage: ($autoplayGifs, account) => $autoplayGifs ? account.header : account.header_static
+    },
+    components: {
+      AccountProfileHeader,
+      AccountProfileFollow,
+      AccountProfileNote,
+      AccountProfileDetails
+    }
+  }
+</script>
\ No newline at end of file
diff --git a/routes/_components/profile/AccountProfileDetails.html b/routes/_components/profile/AccountProfileDetails.html
new file mode 100644
index 00000000..0fef84ad
--- /dev/null
+++ b/routes/_components/profile/AccountProfileDetails.html
@@ -0,0 +1,63 @@
+<div class="account-profile-details">
+  <div class="account-profile-details-item">
+          <span class="account-profile-details-item-title">
+            Toots
+          </span>
+    <span class="account-profile-details-item-datum">
+            {{account.statuses_count || 0}}
+          </span>
+  </div>
+  <div class="account-profile-details-item">
+          <span class="account-profile-details-item-title">
+            Follows
+          </span>
+    <span class="account-profile-details-item-datum">
+            {{account.following_count || 0}}
+          </span>
+  </div>
+  <div class="account-profile-details-item">
+          <span class="account-profile-details-item-title">
+            Followers
+          </span>
+    <span class="account-profile-details-item-datum">
+            {{account.followers_count || 0}}
+          </span>
+  </div>
+</div>
+<style>
+  .account-profile-details {
+    grid-area: details;
+    display: flex;
+    margin: 0 5px;
+  }
+
+  .account-profile-details-item {
+    flex: 1;
+    display: flex;
+    flex-direction: row;
+    padding: 5px;
+    justify-content: center;
+    font-size: 1.1em;
+  }
+
+  .account-profile-details-item:hover {
+    background: var(--button-bg-hover);
+    cursor: pointer;
+  }
+
+  .account-profile-details-item:active {
+    background: var(--button-bg-active);
+  }
+
+  .account-profile-details-item-title {
+    text-transform: uppercase;
+    color: var(--deemphasized-text-color);
+    margin-right: 5px;
+  }
+
+  .account-profile-details-item-datum {
+    color: var(--body-text-color);
+    margin-left: 5px;
+    font-weight: 600;
+  }
+</style>
\ No newline at end of file
diff --git a/routes/_components/profile/AccountProfileFollow.html b/routes/_components/profile/AccountProfileFollow.html
new file mode 100644
index 00000000..71888261
--- /dev/null
+++ b/routes/_components/profile/AccountProfileFollow.html
@@ -0,0 +1,72 @@
+<div class="account-profile-follow">
+  {{#if verifyCredentials && relationship && verifyCredentials.id !== relationship.id}}
+    <IconButton
+      label="{{followLabel}}"
+      href="{{followIcon}}"
+      pressable="true"
+      pressed="{{following}}"
+      big="true"
+      on:click="onFollowButtonClick(event)"
+      animation="{{animateFollowButton && followButtonAnimation}}"
+    />
+  {{/if}}
+</div>
+<style>
+  .account-profile-follow {
+    grid-area: follow;
+    align-self: flex-start;
+  }
+</style>
+<script>
+  import IconButton from '../IconButton.html'
+  import { FOLLOW_BUTTON_ANIMATION } from '../../_static/animations'
+  import { store } from '../../_store/store'
+  import { setAccountFollowed } from '../../_actions/follow'
+
+  export default {
+    methods: {
+      async onFollowButtonClick(e) {
+        e.preventDefault()
+        e.stopPropagation()
+        let accountId = this.get('accountId')
+        let instanceName = this.store.get('currentInstance')
+        let following = this.get('following')
+        let followRequested = this.get('followRequested')
+        this.set({animateFollowButton: true})
+        await setAccountFollowed(accountId, !(following || followRequested))
+      }
+    },
+    store: () => store,
+    data: () => ({
+      followButtonAnimation: FOLLOW_BUTTON_ANIMATION
+    }),
+    computed: {
+      accountId: (account) => account.id,
+      following: (relationship) => relationship && relationship.following,
+      followRequested: (relationship, account) => {
+        return relationship && relationship.requested && account && account.locked
+      },
+      followLabel: (following, followRequested) => {
+        if (following) {
+          return 'Unfollow'
+        } else if (followRequested) {
+          return 'Unfollow (follow requested)'
+        } else {
+          return 'Follow'
+        }
+      },
+      followIcon: (following, followRequested) => {
+        if (following) {
+          return '#fa-user-times'
+        } else if (followRequested) {
+          return '#fa-hourglass'
+        } else {
+          return '#fa-user-plus'
+        }
+      }
+    },
+    components: {
+      IconButton
+    }
+  }
+</script>
\ No newline at end of file
diff --git a/routes/_components/profile/AccountProfileHeader.html b/routes/_components/profile/AccountProfileHeader.html
new file mode 100644
index 00000000..1375518e
--- /dev/null
+++ b/routes/_components/profile/AccountProfileHeader.html
@@ -0,0 +1,84 @@
+<div class="account-profile-avatar">
+  <Avatar :account size="big" />
+</div>
+<div class="account-profile-name">
+  <ExternalLink href="{{account.url}}" showIcon="true" normalIconColor="true">
+    {{account.display_name || account.acct}}
+  </ExternalLink>
+</div>
+<div class="account-profile-username">
+  {{'@' + account.acct}}
+</div>
+<div class="account-profile-followed-by">
+  {{#if relationship && relationship.followed_by}}
+    <span class="account-profile-followed-by-span">Follows you</span>
+  {{/if}}
+</div>
+<style>
+  .account-profile-followed-by {
+    grid-area: followed-by;
+    align-self: center;
+    text-transform: uppercase;
+    color: var(--deemphasized-text-color);
+    font-size: 0.8em;
+  }
+  .account-profile-followed-by-span {
+    background: rgba(30, 30, 30, 0.2);
+    border-radius: 4px;
+    padding: 3px 5px;
+    white-space: nowrap;
+  }
+  .account-profile-avatar {
+    grid-area: avatar;
+  }
+
+  .account-profile-username {
+    grid-area: username;
+    color: var(--deemphasized-text-color);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    align-self: center;
+  }
+
+  .account-profile-name {
+    grid-area: name;
+    font-size: 1.5em;
+    align-self: center;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    min-width: 0;
+  }
+  :global(.account-profile-name a) {
+    color: var(--body-text-color);
+    text-decoration: none;
+  }
+  :global(.account-profile-name a:hover) {
+    color: var(--body-text-color);
+    text-decoration: underline;
+  }
+
+  @media (max-width: 767px) {
+    .account-profile-name {
+      font-size: 1.3em;
+    }
+    .account-profile-username {
+      font-size: 1.1em;
+    }
+    .account-profile-name, .account-profile-username {
+      align-self: flex-start;
+    }
+  }
+</style>
+<script>
+  import Avatar from '../Avatar.html'
+  import ExternalLink from '../ExternalLink.html'
+
+  export default {
+    components: {
+      Avatar,
+      ExternalLink
+    }
+  }
+</script>
\ No newline at end of file
diff --git a/routes/_components/profile/AccountProfileNote.html b/routes/_components/profile/AccountProfileNote.html
new file mode 100644
index 00000000..eb543c55
--- /dev/null
+++ b/routes/_components/profile/AccountProfileNote.html
@@ -0,0 +1,45 @@
+<div class="account-profile-note">
+  {{{massagedNote}}}
+</div>
+<style>
+  .account-profile-note {
+    grid-area: note;
+    padding: 10px 0;
+    font-size: 0.9em;
+    word-wrap: break-word;
+    overflow: hidden;
+    white-space: pre-wrap;
+  }
+
+  :global(.account-profile-note p) {
+    margin: 0 0 20px;
+  }
+
+  :global(.account-profile-note p:first-child) {
+    margin: 0 0 20px;
+  }
+
+  :global(.account-profile-note p:last-child) {
+    margin: 0;
+  }
+
+  @media (max-width: 767px) {
+    .account-profile-note {
+      padding: 5px 0;
+    }
+  }
+</style>
+<script>
+  export default {
+    computed: {
+      note: (account) => account.note,
+      massagedNote: (note) => {
+        // GNU Social / Pleroma don't add <p> tags
+        if (!note.startsWith('<p>')) {
+          note = `<p>${note}</p>`
+        }
+        return note
+      },
+    }
+  }
+</script>
\ No newline at end of file
diff --git a/routes/_pages/accounts/[accountId].html b/routes/_pages/accounts/[accountId].html
index 585465a8..3525e35e 100644
--- a/routes/_pages/accounts/[accountId].html
+++ b/routes/_pages/accounts/[accountId].html
@@ -25,7 +25,7 @@
   import HiddenFromSSR from '../../_components/HiddenFromSSR'
   import DynamicPageBanner from '../../_components/DynamicPageBanner.html'
   import { updateProfileAndRelationship } from '../../_actions/accounts'
-  import AccountProfile from '../../_components/AccountProfile.html'
+  import AccountProfile from '../../_components/profile/AccountProfile.html'
   import PinnedStatuses from '../../_components/timeline/PinnedStatuses.html'
 
   export default {