Accordion and friend-list clean-up

src/layout/card/NitroCardView.scss

@@ -2,6 +2,7 @@ $nitro-card-header-height: 33px;
 $nitro-card-tabs-height: 33px;
 $nitro-card-top-height: $nitro-card-header-height + $nitro-card-tabs-height;
 
+@import './accordion/NitroCardAccordionView';
 @import './content/NitroCardContentView';
 @import './header/NitroCardHeaderView';
 @import './simple-header/NitroCardSimpleHeaderView';

src/layout/card/accordion/NitroCardAccordionView.scss

@@ -0,0 +1 @@
+@import './item/NitroCardAccordionItemView';

src/layout/card/accordion/NitroCardAccordionView.tsx

@@ -0,0 +1,13 @@
+import { FC } from 'react';
+import { NitroCardAccordionViewProps } from './NitroCardAccordionView.types';
+
+export const NitroCardAccordionView: FC<NitroCardAccordionViewProps> = props =>
+{
+    const { className = '' } = props;
+
+    return (
+        <div className={ "nitro-card-accordion bg-light text-black " + className }>
+            { props.children }
+        </div>
+    );
+}

src/layout/card/accordion/NitroCardAccordionView.types.ts

@@ -0,0 +1,4 @@
+export interface NitroCardAccordionViewProps
+{
+    className?: string;
+}

src/layout/card/accordion/item/NitroCardAccordionItemView.scss

@@ -0,0 +1,15 @@
+.nitro-card-accordion-item {
+    .nitro-card-accordion-item-header {
+        border-bottom: 1px solid rgba($black, 0.2);
+    }
+
+    &.active {
+        > .nitro-card-accordion-item-header {
+            background: rgba($white, 0.5);
+        }
+    }
+
+    .nitro-card-accordion-item-content {
+        background: rgba($black, 0.1);
+    }
+}

src/layout/card/accordion/item/NitroCardAccordionItemView.tsx

@@ -0,0 +1,25 @@
+import { FC, useState } from 'react';
+import { NitroCardAccordionItemViewProps } from './NitroCardAccordionItemView.types';
+
+export const NitroCardAccordionItemView: FC<NitroCardAccordionItemViewProps> = props =>
+{
+    const { className = '', headerClassName = '', contentClassName = '', headerText = '' } = props;
+
+    const [ isExpanded, setIsExpanded ] = useState(false);
+
+    return (
+        <div className={ 'nitro-card-accordion-item ' + className + (isExpanded ? ' active' : '') }>
+            <div className={ 'nitro-card-accordion-item-header px-2 py-1 d-flex ' + headerClassName } onClick={ () => setIsExpanded((value) => !value) }>
+                <div className="w-100">
+                    { headerText }
+                </div>
+                <div className="justify-self-center">
+                    <i className={ 'fas fa-caret-' + (isExpanded ? 'up' : 'down') } />
+                </div>
+            </div>
+            <div className={ 'nitro-card-accordion-item-content ' + contentClassName + (!isExpanded ? ' d-none' : '') }>
+                { props.children }
+            </div>
+        </div>
+    );
+}

src/layout/card/accordion/item/NitroCardAccordionItemView.types.ts

@@ -0,0 +1,7 @@
+export interface NitroCardAccordionItemViewProps
+{
+    className?: string;
+    headerClassName?: string;
+    contentClassName?: string;
+    headerText: string;
+}

src/views/friend-list/FriendListView.tsx

@@ -1,23 +1,25 @@
 import { MessengerInitComposer } from 'nitro-renderer';
 import React, { FC, useCallback, useEffect, useState } from 'react';
 import { FriendListEvent } from '../../events';
-import { DraggableWindow } from '../../hooks/draggable-window/DraggableWindow';
 import { useUiEvent } from '../../hooks/events/ui/ui-event';
 import { SendMessageHook } from '../../hooks/messages/message-event';
+import { NitroCardHeaderView, NitroCardView } from '../../layout';
+import { NitroCardAccordionItemView } from '../../layout/card/accordion/item/NitroCardAccordionItemView';
+import { NitroCardAccordionView } from '../../layout/card/accordion/NitroCardAccordionView';
 import { LocalizeText } from '../../utils/LocalizeText';
 import { FriendListMessageHandler } from './FriendListMessageHandler';
 import { FriendListTabs, FriendListViewProps, IFriendListContext } from './FriendListView.types';
-import { FriendListTabsContentView } from './tabs-content/FriendListTabsContentView';
+import { FriendListFriendsView } from './friends/FriendListFriendsView';
-import { FriendListTabsSelectorView } from './tabs-selector/FriendListTabsSelectorView';
 import { MessengerSettings } from './utils/MessengerSettings';
 
 export const FriendListContext = React.createContext<IFriendListContext>(null);
 
 export const FriendListView: FC<FriendListViewProps> = props =>
 {
+    const tabs = [  FriendListTabs.FRIENDS, FriendListTabs.REQUESTS, FriendListTabs.SEARCH ];
+
     const [ isVisible, setIsVisible ]                   = useState(false);
     const [ currentTab, setCurrentTab ]                 = useState<string>(null);
-    const [ tabs, setTabs ]                             = useState<string[]>([  FriendListTabs.FRIENDS, FriendListTabs.REQUESTS, FriendListTabs.SEARCH ]);
     const [ messengerSettings, setMessengerSettings ]   = useState<MessengerSettings>(null);
 
     const onFriendListEvent = useCallback((event: FriendListEvent) =>
@@ -51,26 +53,24 @@ export const FriendListView: FC<FriendListViewProps> = props =>
         SendMessageHook(new MessengerInitComposer());
     }, []);
 
-    function hideFriendList(): void
-    {
-        setIsVisible(false);
-    }
-
     return (
         <FriendListContext.Provider value={{ currentTab: currentTab, onSetCurrentTab: setCurrentTab }}>
             <FriendListMessageHandler setMessengerSettings={ setMessengerSettings }  />
-            { isVisible && <DraggableWindow handle=".drag-handler">
+            { isVisible &&
-                <div className="nitro-friend-list d-flex flex-column bg-primary border border-black shadow rounded">
+                <NitroCardView className="nitro-friend-list">
-                    <div className="drag-handler d-flex justify-content-between align-items-center px-3 pt-3">
+                    <NitroCardHeaderView headerText={ LocalizeText('friendlist.friends') } onCloseClick={ event => setIsVisible(false) } />
-                        <div className="h6 m-0">{ LocalizeText('friendlist.friends') }</div>
+                    <NitroCardAccordionView>
-                        <button type="button" className="close" onClick={ hideFriendList }>
+                        <NitroCardAccordionItemView headerText="Friends" contentClassName="ps-3">
-                            <i className="fas fa-times"></i>
+                            <FriendListFriendsView />
-                        </button>
+                        </NitroCardAccordionItemView>
-                    </div>
+                        <NitroCardAccordionItemView headerText="Friend Requests" contentClassName="ps-3">
-                    <FriendListTabsSelectorView tabs={ tabs } />
+                            abc
-                    <FriendListTabsContentView />
+                        </NitroCardAccordionItemView>
-                </div>
+                        <NitroCardAccordionItemView headerText="Search" contentClassName="ps-3">
-            </DraggableWindow> }
+                            abc
+                        </NitroCardAccordionItemView>
+                    </NitroCardAccordionView>
+                </NitroCardView> }
         </FriendListContext.Provider>
     );
 }

src/views/friend-list/friends/FriendListFriendsView.tsx

@@ -0,0 +1,36 @@
+import { FC, useContext, useState } from 'react';
+import { NitroCardAccordionItemView } from '../../../layout/card/accordion/item/NitroCardAccordionItemView';
+import { NitroCardAccordionView } from '../../../layout/card/accordion/NitroCardAccordionView';
+import { FriendListContext } from '../FriendListView';
+import { FriendListFriendsViewProps } from './FriendListFriendsView.types';
+
+export const FriendListFriendsView: FC<FriendListFriendsViewProps> = props =>
+{
+    const friendListContext = useContext(FriendListContext);
+
+    const [ isOnlineFriendsExtended, setIsOnlineFriendsExtended ] = useState(false);
+    const [ isOfflineFriendsExtended, setIsOfflineFriendsExtended ] = useState(false);
+
+    function toggleOnlineFriends(): void
+    {
+        setIsOnlineFriendsExtended(value => !value);
+    }
+
+    function toggleOfflineFriends(): void
+    {
+        setIsOfflineFriendsExtended(value => !value);
+    }
+
+    return (
+        <>
+            <NitroCardAccordionView>
+                <NitroCardAccordionItemView headerText="Friends (0)">
+                    abc
+                </NitroCardAccordionItemView>
+                <NitroCardAccordionItemView headerText="Offline Friends (0)">
+                    abc
+                </NitroCardAccordionItemView>
+            </NitroCardAccordionView>
+        </>
+    );
+}

src/views/friend-list/friends/FriendListFriendsView.types.ts

@@ -0,0 +1,2 @@
+export interface FriendListFriendsViewProps
+{}

src/views/friend-list/tabs-content/FriendListTabsContentView.tsx

@@ -1,18 +0,0 @@
-import { FC, useContext } from 'react';
-import { FriendListContext } from '../FriendListView';
-import { FriendListTabs } from '../FriendListView.types';
-import { FriendListTabsContentViewProps } from './FriendListTabsContentView.types';
-import { FriendListTabFriendsView } from './friends/FriendListTabFriendsView';
-
-export const FriendListTabsContentView: FC<FriendListTabsContentViewProps> = props =>
-{
-    const friendListContext = useContext(FriendListContext);
-    
-    return (
-        <div className="px-3 pb-3">
-            { friendListContext && friendListContext.currentTab && friendListContext.currentTab === FriendListTabs.FRIENDS && <FriendListTabFriendsView /> }
-            { friendListContext && friendListContext.currentTab && friendListContext.currentTab === FriendListTabs.REQUESTS }
-            { friendListContext && friendListContext.currentTab && friendListContext.currentTab === FriendListTabs.SEARCH }
-        </div>
-    );
-}

src/views/friend-list/tabs-content/FriendListTabsContentView.types.ts

@@ -1,2 +0,0 @@
-export interface FriendListTabsContentViewProps
-{}

src/views/friend-list/tabs-content/friends/FriendListTabFriendsView.tsx

@@ -1,35 +0,0 @@
-import classNames from 'classnames';
-import { FC, useContext, useState } from 'react';
-import { FriendListContext } from '../../FriendListView';
-import { FriendListTabFriendsViewProps } from './FriendListTabFriendsView.types';
-
-export const FriendListTabFriendsView: FC<FriendListTabFriendsViewProps> = props =>
-{
-    const friendListContext = useContext(FriendListContext);
-
-    const [ isOnlineFriendsExtended, setIsOnlineFriendsExtended ] = useState(false);
-    const [ isOfflineFriendsExtended, setIsOfflineFriendsExtended ] = useState(false);
-
-    function toggleOnlineFriends(): void
-    {
-        setIsOnlineFriendsExtended(value => !value);
-    }
-
-    function toggleOfflineFriends(): void
-    {
-        setIsOfflineFriendsExtended(value => !value);
-    }
-
-    return (
-        <div>
-            <div className="d-flex mb-2 small">
-                <i className={ "fas " + classNames({ 'fa-plus': !isOnlineFriendsExtended, 'fa-minus': isOnlineFriendsExtended })} onClick={ toggleOnlineFriends }></i>
-                <div className="align-self-center w-100 ml-2">Friends (0)</div>
-            </div>
-            <div className="d-flex mb-2 small">
-                <i className={ "fas " + classNames({ 'fa-plus': !isOfflineFriendsExtended, 'fa-minus': isOfflineFriendsExtended })} onClick={ toggleOfflineFriends }></i>
-                <div className="align-self-center w-100 ml-2">Offline Friends (0)</div>
-            </div>
-        </div>
-    );
-}

src/views/friend-list/tabs-content/friends/FriendListTabFriendsView.types.ts

@@ -1,2 +0,0 @@
-export interface FriendListTabFriendsViewProps
-{}

src/views/friend-list/tabs-selector/FriendListTabsSelectorView.tsx

@@ -1,18 +0,0 @@
-import { FC } from 'react';
-import { FriendListTabsSelectorViewProps } from './FriendListTabsSelectorView.types';
-import { FriendListTabView } from './tab/FriendListTabView';
-
-export const FriendListTabsSelectorView: FC<FriendListTabsSelectorViewProps> = props =>
-{
-    return (
-        <div className="p-3">
-            { props.tabs &&
-                <div className="btn-group w-100">
-                    { props.tabs.map((tab, index) =>
-                        {
-                            return <FriendListTabView key={ index } tab={ tab } />
-                        }) }
-                </div> }
-        </div>
-    );
-}

src/views/friend-list/tabs-selector/FriendListTabsSelectorView.types.ts

@@ -1,4 +0,0 @@
-export interface FriendListTabsSelectorViewProps
-{
-    tabs: string[];
-}

src/views/friend-list/tabs-selector/tab/FriendListTabView.tsx

@@ -1,18 +0,0 @@
-import classNames from 'classnames';
-import { FC, useContext } from 'react';
-import { LocalizeText } from '../../../../utils/LocalizeText';
-import { FriendListContext } from '../../FriendListView';
-import { FriendListTabViewProps } from './FriendListTabView.types';
-
-export const FriendListTabView: FC<FriendListTabViewProps> = props =>
-{
-    const friendListContext = useContext(FriendListContext);
-
-    return (
-        <button type="button" 
-        className={ 'btn btn-secondary btn-sm ' + classNames({ 'active': friendListContext.currentTab === props.tab })}
-        onClick={ () => friendListContext.onSetCurrentTab(props.tab) }>
-            { LocalizeText(props.tab) }
-        </button>
-    );
-}

src/views/friend-list/tabs-selector/tab/FriendListTabView.types.ts

@@ -1,4 +0,0 @@
-export interface FriendListTabViewProps
-{
-    tab: string;
-}