Add popups to show followers, members, and memberships on profiles

pfrazee · Apr 15, 2021 · fdda314 · fdda314 · vercel · Apr 15, 2021
1 parent 8175f16
commit fdda314
Show file tree

Hide file tree

Showing 5 changed files with 155 additions and 27 deletions.
diff --git a/static/js/com/popups/general.js b/static/js/com/popups/general.js
@@ -0,0 +1,55 @@
+/* globals beaker */
+import { html } from '../../../vendor/lit-element/lit-element.js'
+import { BasePopup } from './base.js'
+import '../custom-html.js'
+
+// exported api
+// =
+
+export class GeneralPopup extends BasePopup {
+  static get properties () {
+    return {
+    }
+  }
+
+  constructor (opts) {
+    super()
+    this.renderFn = opts.render
+  }
+
+  get shouldShowHead () {
+    return false
+  }
+
+  get shouldCloseOnEscape () {
+    return true
+  }
+
+  get shouldCloseOnOuterClick () {
+    return true
+  }
+
+  get maxWidth () {
+    return '710px'
+  }
+
+  // management
+  //
+
+  static async create (opts) {
+    return BasePopup.create(GeneralPopup, opts)
+  }
+
+  static destroy () {
+    return BasePopup.destroy('general-popup')
+  }
+
+  // rendering
+  // =
+
+  renderBody () {
+    return this.renderFn()
+  }
+}
+
+customElements.define('general-popup', GeneralPopup)
diff --git a/static/js/ctzn-tags/community-members-list.js b/static/js/ctzn-tags/community-members-list.js
@@ -12,7 +12,8 @@ export class CommunityMembersList extends LitElement {
       members: {type: Array},
       roles: {type: Array},
       followedMembers: {type: Array},
-      isExpanded: {type: Boolean}
+      isExpanded: {type: Boolean},
+      renderOpts: {type: Boolean}
     }
   }
 
@@ -22,13 +23,22 @@ export class CommunityMembersList extends LitElement {
 
   constructor () {
     super()
+    this.setAttribute('ctzn-elem', '1')
     this.view = undefined
     this.userId = undefined
     this.members = undefined
     this.canBan = undefined
     this.followedMembers = undefined
     this.isExpanded = false
-    this.setAttribute('ctzn-elem', '1')
+    this.renderOpts = {expandedOnly: false}
+  }
+
+  get showExpanded () {
+    return this.isExpanded || this.renderOpts?.expandedOnly
+  }
+
+  get canToggleExpanded () {
+    return !this.renderOpts?.expandedOnly && this.members?.length
   }
 
   setContextState (state) {
@@ -91,16 +101,16 @@ export class CommunityMembersList extends LitElement {
     return html`
       <div class="bg-white sm:rounded my-1 ${this.members ? 'pb-1' : ''}">
         <div
-          class="px-5 py-3 sm:rounded ${this.members?.length ? 'cursor-pointer hov:hover:text-blue-600' : ''}"
-          @click=${this.members?.length ? this.onToggleExpanded : undefined}
+          class="px-5 py-3 sm:rounded ${this.canToggleExpanded ? 'cursor-pointer hov:hover:text-blue-600' : ''}"
+          @click=${this.canToggleExpanded ? this.onToggleExpanded : undefined}
         >
           <div class="flex items-center justify-between">
             <span>
               <span class="text-lg font-medium mr-1">Members</span>
               <span class="text-gray-500 font-bold">${this.members?.length || '0'}</span>
             </span>
-            ${this.members?.length ? html`
-              <span class="fas fa-angle-${this.isExpanded ? 'up' : 'down'}"></span>
+            ${this.canToggleExpanded ? html`
+              <span class="fas fa-angle-${this.showExpanded ? 'up' : 'down'}"></span>
             ` : ''}
           </div>
           ${this.followedMembers?.length ? html`
@@ -115,7 +125,7 @@ export class CommunityMembersList extends LitElement {
             </div>
           ` : ''}
         </div>
-        ${this.isExpanded ? html`
+        ${this.showExpanded ? html`
           <div class="sm:mx-2 mb-1 sm:rounded px-1 py-1 bg-gray-100">
             <app-members-list
               .members=${this.members}

diff --git a/static/js/ctzn-tags/community-memberships-list.js b/static/js/ctzn-tags/community-memberships-list.js
@@ -11,7 +11,8 @@ export class CommunityMembershipsList extends LitElement {
       userId: {type: String, attribute: 'user-id'},
       memberships: {type: Array},
       sharedCommunities: {type: Array},
-      isExpanded: {type: Boolean}
+      isExpanded: {type: Boolean},
+      renderOpts: {type: Boolean}
     }
   }
 
@@ -27,6 +28,15 @@ export class CommunityMembershipsList extends LitElement {
     this.memberships = undefined
     this.sharedCommunities = undefined
     this.isExpanded = false
+    this.renderOpts = {expandedOnly: false}
+  }
+
+  get showExpanded () {
+    return this.isExpanded || this.renderOpts?.expandedOnly
+  }
+
+  get canToggleExpanded () {
+    return !this.renderOpts?.expandedOnly && this.memberships?.length
   }
 
   setContextState (state) {
@@ -72,15 +82,15 @@ export class CommunityMembershipsList extends LitElement {
     return html`
       <div class="bg-white sm:rounded my-1 ${this.memberships ? 'pb-1' : ''}">
         <div
-          class="px-5 py-3 sm:rounded ${this.memberships?.length ? 'cursor-pointer hov:hover:text-blue-600' : ''}"
-          @click=${this.memberships?.length ? this.onToggleExpanded : undefined}
+          class="px-5 py-3 sm:rounded ${this.canToggleExpanded ? 'cursor-pointer hov:hover:text-blue-600' : ''}"
+          @click=${this.canToggleExpanded ? this.onToggleExpanded : undefined}
         >
           <div class="flex items-center justify-between">
             <span>
               <span class="text-lg font-medium mr-1">Communities</span>
               <span class="text-gray-500 font-bold">${this.memberships?.length || '0'}</span>
             </span>
-            ${this.memberships?.length ? html`
+            ${this.canToggleExpanded ? html`
               <span class="fas fa-angle-${this.isExpanded ? 'up' : 'down'}"></span>
             ` : ''}
           </div>
@@ -96,7 +106,7 @@ export class CommunityMembershipsList extends LitElement {
             </div>
           ` : ''}
         </div>
-        ${this.isExpanded ? html`
+        ${this.showExpanded ? html`
         <div class="sm:mx-2 mb-1 sm:rounded px-1 py-1 bg-gray-100">
             ${repeat(this.memberships || [], (membership, i) => {
               const userId = membership.value.community.userId

diff --git a/static/js/ctzn-tags/followers-list.js b/static/js/ctzn-tags/followers-list.js
@@ -11,7 +11,8 @@ export class FollowersList extends LitElement {
       userId: {type: String, attribute: 'user-id'},
       followers: {type: Array},
       sharedFollowers: {type: Array},
-      isExpanded: {type: Boolean}
+      isExpanded: {type: Boolean},
+      renderOpts: {type: Boolean}
     }
   }
 
@@ -27,6 +28,15 @@ export class FollowersList extends LitElement {
     this.followers = undefined
     this.sharedFollowers = undefined
     this.isExpanded = false
+    this.renderOpts = {expandedOnly: false}
+  }
+
+  get showExpanded () {
+    return this.isExpanded || this.renderOpts?.expandedOnly
+  }
+
+  get canToggleExpanded () {
+    return !this.renderOpts?.expandedOnly && this.followers?.length
   }
 
   setContextState (state) {
@@ -69,16 +79,16 @@ export class FollowersList extends LitElement {
     return html`
       <div class="bg-white sm:rounded my-1 ${this.followers ? 'pb-1' : ''}">
         <div
-          class="px-5 py-3 sm:rounded ${this.followers?.length ? 'cursor-pointer hov:hover:text-blue-600' : ''}"
-          @click=${this.followers?.length ? this.onToggleExpanded : undefined}
+          class="px-5 py-3 sm:rounded ${this.canToggleExpanded ? 'cursor-pointer hov:hover:text-blue-600' : ''}"
+          @click=${this.canToggleExpanded ? this.onToggleExpanded : undefined}
         >
           <div class="flex items-center justify-between">
             <span>
               <span class="text-lg font-medium mr-1">Followers</span>
               <span class="text-gray-500 font-bold">${this.followers?.length || '0'}</span>
             </span>
-            ${this.followers?.length ? html`
-              <span class="fas fa-angle-${this.isExpanded ? 'up' : 'down'}"></span>
+            ${this.canToggleExpanded ? html`
+              <span class="fas fa-angle-${this.showExpanded ? 'up' : 'down'}"></span>
             ` : ''}
           </div>
           ${this.sharedFollowers?.length ? html`
@@ -93,7 +103,7 @@ export class FollowersList extends LitElement {
             </div>
           ` : ''}
         </div>
-        ${this.isExpanded ? html`
+        ${this.showExpanded ? html`
           <div class="sm:mx-2 mb-1 sm:rounded px-1 py-1 bg-gray-100">
             <app-simple-user-list .ids=${this.followers} empty-message="${this.userId} has no followers."></app-simple-user-list>
           </div>

diff --git a/static/js/views/user.js b/static/js/views/user.js
@@ -1,13 +1,8 @@
 import { LitElement, html } from '../../vendor/lit-element/lit-element.js'
 import { unsafeHTML } from '../../vendor/lit-element/lit-html/directives/unsafe-html.js'
 import { ComposerPopup } from '../com/popups/composer.js'
-import { EditRolePopup } from '../com/popups/edit-role.js'
-import { EditCommunityConfigPopup } from '../com/popups/edit-community-config.js'
 import { ViewMediaPopup } from '../com/popups/view-media.js'
-import { InvitePopup } from '../com/popups/invite.js'
-import { BanPopup } from '../com/popups/ban.js'
-import { ManageBansPopup } from '../com/popups/manage-bans.js'
-import { TransferItemPopup } from '../com/popups/transfer-item.js'
+import { GeneralPopup } from '../com/popups/general.js'
 import * as contextMenu from '../com/context-menu.js'
 import * as toast from '../com/toast.js'
 import {
@@ -339,19 +334,28 @@ class CtznUser extends LitElement {
         <div>
           ${this.isCitizen ? html`
             <div class="bg-white text-center pb-4">
-              <span class="bg-gray-50 font-semibold px-2 py-1 rounded text-gray-500">
+              <span
+                class="bg-gray-50 font-semibold px-2 py-1 rounded text-gray-500 hov:hover:bg-gray-100 cursor-pointer"
+                @click=${this.onClickViewFollowers}
+              >
                 <span class="fas fa-fw fa-user"></span>
                 ${nFollowers} ${pluralize(nFollowers, 'Follower')}
               </span>
-              <span class="ml-1 bg-gray-50 font-semibold px-2 py-1 rounded text-gray-500">
+              <span
+                class="ml-1 bg-gray-50 font-semibold px-2 py-1 rounded text-gray-500 hov:hover:bg-gray-100 cursor-pointer"
+                @click=${this.onClickViewCommunities}
+              >
                 <span class="fas fa-fw fa-users"></span>
                 ${nCommunities} ${nCommunities === 1 ? 'Community' : 'Communities'}
               </span>
             </div>
           ` : ''}
           ${this.isCommunity ? html`
             <div class="bg-white text-center pb-4">
-              <span class="bg-gray-50 font-bold px-2 py-1 rounded text-gray-500">
+              <span
+                class="bg-gray-50 font-bold px-2 py-1 rounded text-gray-500 hov:hover:bg-gray-100 cursor-pointer"
+                @click=${this.onClickViewMembers}
+              >
                 <span class="fas fa-users"></span>
                 ${nMembers} ${pluralize(nMembers, 'Member')}
               </span>
@@ -703,6 +707,45 @@ class CtznUser extends LitElement {
     }
   }
 
+  onClickViewFollowers (e) {
+    e.preventDefault()
+    e.stopPropagation()
+    GeneralPopup.create({
+      render: () => html`
+        <ctzn-followers-list
+          user-id=${this.userId}
+          .renderOpts=${{expandedOnly: true}}
+        ></ctzn-followers-list>
+      `
+    })
+  }
+
+  onClickViewCommunities (e) {
+    e.preventDefault()
+    e.stopPropagation()
+    GeneralPopup.create({
+      render: () => html`
+        <ctzn-community-memberships-list
+          user-id=${this.userId}
+          .renderOpts=${{expandedOnly: true}}
+        ></ctzn-community-memberships-list>
+      `
+    })
+  }
+
+  onClickViewMembers (e) {
+    e.preventDefault()
+    e.stopPropagation()
+    GeneralPopup.create({
+      render: () => html`
+        <ctzn-community-members-list
+          user-id=${this.userId}
+          .renderOpts=${{expandedOnly: true}}
+        ></ctzn-community-members-list>
+      `
+    })
+  }
+
   onClickControlsMenu (e) {
     e.preventDefault()
     e.stopPropagation()