From 1bdcfd5cdf74cadf760d6d35c5a355da4d2ec997 Mon Sep 17 00:00:00 2001
From: Bill <billsonnn@live.com>
Date: Wed, 18 Aug 2021 22:29:00 -0400
Subject: [PATCH] Fix layout

---
 .../NavigatorRoomSettingsView.scss            |  10 ++
 .../NavigatorRoomSettingsRightsTabView.tsx    | 125 +++++++++++++-----
 .../user-profile-icon/UserProfileIconView.tsx |  16 +++
 .../UserProfileIconView.types.ts              |   5 +
 4 files changed, 120 insertions(+), 36 deletions(-)
 create mode 100644 src/views/shared/user-profile-icon/UserProfileIconView.tsx
 create mode 100644 src/views/shared/user-profile-icon/UserProfileIconView.types.ts

diff --git a/src/views/navigator/views/room-settings/NavigatorRoomSettingsView.scss b/src/views/navigator/views/room-settings/NavigatorRoomSettingsView.scss
index 0c681ba2..b8d49327 100644
--- a/src/views/navigator/views/room-settings/NavigatorRoomSettingsView.scss
+++ b/src/views/navigator/views/room-settings/NavigatorRoomSettingsView.scss
@@ -5,6 +5,16 @@
         height: 350px;
     }
 
+    .user-rights-container {
+
+        .row {
+    
+            .col:nth-child(even) {
+                //background: $light !important;
+            }
+        }
+    }
+
     .list-container {
         max-height: 100px;
         min-height: 100px;
diff --git a/src/views/navigator/views/room-settings/views/tab-rights/NavigatorRoomSettingsRightsTabView.tsx b/src/views/navigator/views/room-settings/views/tab-rights/NavigatorRoomSettingsRightsTabView.tsx
index 30f0a160..4b63cc4d 100644
--- a/src/views/navigator/views/room-settings/views/tab-rights/NavigatorRoomSettingsRightsTabView.tsx
+++ b/src/views/navigator/views/room-settings/views/tab-rights/NavigatorRoomSettingsRightsTabView.tsx
@@ -2,6 +2,7 @@ import { RemoveAllRightsMessageComposer, RoomGiveRightsComposer, RoomTakeRightsC
 import { FC, useCallback, useMemo } from 'react';
 import { LocalizeText } from '../../../../../../api';
 import { SendMessageHook } from '../../../../../../hooks';
+import { UserProfileIconView } from '../../../../../shared/user-profile-icon/UserProfileIconView';
 import { NavigatorRoomSettingsTabViewProps } from '../../NavigatorRoomSettingsView.types';
 
 export const NavigatorRoomSettingsRightsTabView: FC<NavigatorRoomSettingsTabViewProps> = props =>
@@ -52,48 +53,100 @@ export const NavigatorRoomSettingsRightsTabView: FC<NavigatorRoomSettingsTabView
     }, [roomSettingsData]);
 
     return (
-        <>
+        <div className="d-flex flex-column h-100 overflow-hidden user-rights">
             <div className="row">
-                <div className="col-6">
-                    <div className="fw-bold mb-2">{LocalizeText('navigator.flatctrls.userswithrights', ['displayed', 'total'], [roomSettingsData.usersWithRights.size.toString(), roomSettingsData.usersWithRights.size.toString()])}</div>
-                </div>
-                <div className="col-6">
-                    <div className="fw-bold mb-2">{LocalizeText('navigator.flatctrls.friends', ['displayed', 'total'], [friendsWithoutRights.size.toString(), friendsWithoutRights.size.toString()])}</div>
+                <div className="col">
+                    filter
                 </div>
             </div>
             <div className="row h-100">
-                <div className="col-6">
-                    <div className="list-container rights justify-content-center align-items-center">
-                        {
-                            Array.from(roomSettingsData.usersWithRights.entries()).map(([id, name], index) =>
-                            {
-                                return <div key={index} className={'list-item flex-row'} >
-                                    <span className="w-100" >{name}</span> 
-                                    <button className="btn btn-danger btn-sm rights-button" onClick={ () => removeUserRights(id) }>
-                                                <i className="fas fa-times" />
-                                    </button>
-                                </div>
-                            })
-                        }
+                <div className="col-6 d-flex flex-column h-100">
+                    <div className="fw-bold mb-1">{ LocalizeText('navigator.flatctrls.userswithrights', [ 'displayed', 'total' ], [ roomSettingsData.usersWithRights.size.toString(), roomSettingsData.usersWithRights.size.toString() ]) }</div>
+                    <div className="d-flex flex-column justify-content-between rounded bg-white h-100 overflow-hidden px-2 py-1 user-rights-container">
+                        <div className="row row-cols-1 overflow-auto">
+                            { Array.from(roomSettingsData.usersWithRights.entries()).map(([id, name], index) =>
+                                {
+                                    return (
+                                        <div key={index} className="d-flex align-items-center col w-100" onClick={ () => removeUserRights(id) }>
+                                            <div className="d-flex align-items-center me-2">
+                                                <UserProfileIconView userName={ name } />
+                                                <span>{ name }</span>
+                                            </div>
+                                            <i className="fas fa-caret-right fw-bold text-black me-2" />
+                                        </div>
+                                    );
+                                })
+                            }
+                        </div>
+                        <button className="btn btn-danger btn-sm w-100" disabled={ !roomSettingsData.usersWithRights.size } onClick={ removeAllRights } >{ LocalizeText('navigator.flatctrls.clear') }</button>
                     </div>
-                    <button className={'btn btn-danger btn-sm w-100' + ((roomSettingsData.usersWithRights.size < 1) ? ' disabled' : '')} onClick={ removeAllRights } >{ LocalizeText('navigator.flatctrls.clear') }</button>
                 </div>
-                <div className="col-6">
-                    <div className="list-container h-100 friends-rights">
-                        {
-                            Array.from(friendsWithoutRights.entries()).map(([id, name], index) =>
-                            {
-                                return <div key={index} className={'list-item flex-row'} >
-                                    <span className="w-100">{name}</span>
-                                    <button className="btn btn-success btn-sm rights-button" onClick={ () => giveUserRights(id, name) }>
-                                                <i className="fas fa-chevron-left" />
-                                    </button>
-                                </div>
-                            })
-                        }
+                <div className="col-6 d-flex flex-column h-100">
+                    <div className="fw-bold mb-1">{ LocalizeText('navigator.flatctrls.friends', [ 'displayed', 'total' ], [ friendsWithoutRights.size.toString(), friendsWithoutRights.size.toString() ]) }</div>
+                    <div className="d-flex flex-column rounded bg-white h-100 overflow-hidden px-2 py-1 user-rights-container">
+                        <div className="row row-cols-1 overflow-auto">
+                            { Array.from(friendsWithoutRights.entries()).map(([id, name], index) =>
+                                {
+                                    return (
+                                        <div key={index} className="d-flex align-items-center col w-100" onClick={ () => giveUserRights(id, name) }>
+                                            <i className="fas fa-caret-left fw-bold text-black me-2" />
+                                            <div className="d-flex align-items-center">
+                                                <UserProfileIconView userName={ name } />
+                                                <span>{ name }</span>
+                                            </div>
+                                        </div>
+                                    );
+                                })
+                            }
+                        </div>
                     </div>
-                </div >
-            </div >
-        </>
+                </div>
+            </div>
+        </div>
+            // <div className="row h-100">
+            //     <div className="col-6">
+            //         <div className="fw-bold mb-2">{LocalizeText('navigator.flatctrls.userswithrights', ['displayed', 'total'], [roomSettingsData.usersWithRights.size.toString(), roomSettingsData.usersWithRights.size.toString()])}</div>
+            //     </div>
+            //     <div className="col-6">
+            //         <div className="fw-bold mb-2">{LocalizeText('navigator.flatctrls.friends', ['displayed', 'total'], [friendsWithoutRights.size.toString(), friendsWithoutRights.size.toString()])}</div>
+            //     </div>
+            // </div>
+            // <div className="row h-100">
+            //     <div className="col-6 d-flex flex-column h-100">
+            //         <div className="row row-cols-1 g-0 overflow-auto">
+            //             {
+            //                 Array.from(roomSettingsData.usersWithRights.entries()).map(([id, name], index) =>
+            //                 {
+            //                     return (
+            //                         <div key={ index } className="col">
+            //                             <span className="w-100" >{name}</span> 
+            //                             <button className="btn btn-danger btn-sm rights-button" onClick={ () => removeUserRights(id) }>
+            //                                 <i className="fas fa-times" />
+            //                             </button>
+            //                         </div>
+            //                     );
+            //                 })
+            //             }
+            //         </div>
+            //         <button className={'btn btn-danger btn-sm w-100' + ((roomSettingsData.usersWithRights.size < 1) ? ' disabled' : '')} onClick={ removeAllRights } >{ LocalizeText('navigator.flatctrls.clear') }</button>
+            //     </div>
+            //     <div className="col-6 d-flex flex-column h-100">
+            //         <div className="row row-cols-1 g-0 overflow-auto bg-white h-100">
+            //             {
+            //                 Array.from(friendsWithoutRights.entries()).map(([id, name], index) =>
+            //                 {
+            //                     return (
+            //                         <div key={index} className="col">
+            //                             <span className="w-100">{name}</span>
+            //                             <button className="btn btn-success btn-sm rights-button" onClick={ () => giveUserRights(id, name) }>
+            //                                 <i className="fas fa-chevron-left" />
+            //                             </button>
+            //                         </div>
+            //                     );
+            //                 })
+            //             }
+            //         </div>
+            //     </div >
+            // </div >
     );
 }
diff --git a/src/views/shared/user-profile-icon/UserProfileIconView.tsx b/src/views/shared/user-profile-icon/UserProfileIconView.tsx
new file mode 100644
index 00000000..6d1c2dc6
--- /dev/null
+++ b/src/views/shared/user-profile-icon/UserProfileIconView.tsx
@@ -0,0 +1,16 @@
+import { FC, useCallback } from 'react';
+import { UserProfileIconViewProps } from './UserProfileIconView.types';
+
+export const UserProfileIconView: FC<UserProfileIconViewProps> = props =>
+{
+    const { userId = -1, userName = null } = props;
+
+    const visitProfile = useCallback(() =>
+    {
+
+    }, [ userId, userName ]);
+
+    return (
+        <i className="icon icon-user-profile me-1 cursor-pointer" onClick={ visitProfile } />
+    );
+}
diff --git a/src/views/shared/user-profile-icon/UserProfileIconView.types.ts b/src/views/shared/user-profile-icon/UserProfileIconView.types.ts
new file mode 100644
index 00000000..1662dfa8
--- /dev/null
+++ b/src/views/shared/user-profile-icon/UserProfileIconView.types.ts
@@ -0,0 +1,5 @@
+export interface UserProfileIconViewProps
+{
+    userId?: number;
+    userName?: string;
+}