From abac644b42d7f83bbc3b67db18939a9c5621af46 Mon Sep 17 00:00:00 2001
From: insanity <insanity@loafle.com>
Date: Fri, 21 Jul 2017 15:58:39 +0900
Subject: [PATCH] notification

---
 src/ts/@overflow/app/views/layout/LogoBar.tsx | 21 ++++--
 .../commons/react/component/Notification.tsx  | 68 ++++++++-----------
 2 files changed, 42 insertions(+), 47 deletions(-)

diff --git a/src/ts/@overflow/app/views/layout/LogoBar.tsx b/src/ts/@overflow/app/views/layout/LogoBar.tsx
index 94cf6d3..494ea26 100644
--- a/src/ts/@overflow/app/views/layout/LogoBar.tsx
+++ b/src/ts/@overflow/app/views/layout/LogoBar.tsx
@@ -1,5 +1,11 @@
 import * as React from 'react';
-import { Menu, Header, Container } from 'semantic-ui-react';
+import {
+  Menu,
+  Header,
+  Container,
+  Popup,
+} from 'semantic-ui-react';
+import { Notification } from '@overflow/commons/react/component/Notification';
 
 export class LogoBar extends React.Component<any, any> {
 
@@ -19,17 +25,20 @@ export class LogoBar extends React.Component<any, any> {
 
   public render(): JSX.Element {
     return (
-      <Container fluid style={{background:'#f8f8f8', 'paddingRight':'7px'}}>
+      <Container fluid style={{ background: '#f8f8f8', 'paddingRight': '7px' }}>
         <Menu borderless secondary >
           <Menu.Item name='logo'>
-             {/* <Image src='https://lh3.googleusercontent.com/EaEViB7RYr3Rhhez8zY0TYsNsS5Rv2i63kyiQ5ym0rhQh38KRXBh7BDFo4mjDTDU_Hm6FAVg35247ZM1wE6cO-TuBP4wxYW2SG4hYoojqkUomu587xg3t50VGUSceK17-LUZhM-5XoCsXUXBHtfXVMqMZ2rUb23tgm7Kuv7eTgZZz0o9_dB0lApoi57EBVBNX8_qIDSH3YmGfvqhnKeh5AYnnBG_QXlTg1JExwtMehCe8KgXs4-vLuVicPCCuJ2AXSoWFpVXL9TVhrrMOkeuGd-6PGAFiNxeTG6NylQKwbQikx3Mx7KmGq3iSc8mqp0AmwjptG2DtS7nqwNaAZAi1DtraHYgJcE_tfpEgnZfFSWmVYQYcUe98pfZR11OfJErdJxE3w-mL1b4MoyufB0VkSlFM1BpMlfP3OsnnDIdNAXthT6MuLtI2iLv_CNeoDKi3fdH-zIcSmoArgAFrAo0-9oYUfvQDdaC_8MMddc97b_L78fzFOPRGIf52Ajr-Ia6sjdyDFdJ46-wPKfMW8XHnFfA96NsIcA-HYRZ7GTteJOzVq6HEabwnurZdTxdmCjzGHcb7OEu00DkVMhM6WbWZ0L8HWpIk92sy-sKbprHe-9oh_9WaxJzPrlG=w180-h30-no'
+            {/* <Image src='https://lh3.googleusercontent.com/EaEViB7RYr3Rhhez8zY0TYsNsS5Rv2i63kyiQ5ym0rhQh38KRXBh7BDFo4mjDTDU_Hm6FAVg35247ZM1wE6cO-TuBP4wxYW2SG4hYoojqkUomu587xg3t50VGUSceK17-LUZhM-5XoCsXUXBHtfXVMqMZ2rUb23tgm7Kuv7eTgZZz0o9_dB0lApoi57EBVBNX8_qIDSH3YmGfvqhnKeh5AYnnBG_QXlTg1JExwtMehCe8KgXs4-vLuVicPCCuJ2AXSoWFpVXL9TVhrrMOkeuGd-6PGAFiNxeTG6NylQKwbQikx3Mx7KmGq3iSc8mqp0AmwjptG2DtS7nqwNaAZAi1DtraHYgJcE_tfpEgnZfFSWmVYQYcUe98pfZR11OfJErdJxE3w-mL1b4MoyufB0VkSlFM1BpMlfP3OsnnDIdNAXthT6MuLtI2iLv_CNeoDKi3fdH-zIcSmoArgAFrAo0-9oYUfvQDdaC_8MMddc97b_L78fzFOPRGIf52Ajr-Ia6sjdyDFdJ46-wPKfMW8XHnFfA96NsIcA-HYRZ7GTteJOzVq6HEabwnurZdTxdmCjzGHcb7OEu00DkVMhM6WbWZ0L8HWpIk92sy-sKbprHe-9oh_9WaxJzPrlG=w180-h30-no'
             style={{width:'120px'}} onClick={this.handleLogoClick} />  */}
           </Menu.Item>
-          <Menu.Item
+          <Popup trigger={<Menu.Item
             position='right'
             icon='bell'
-            onClick={this.handleNotiClick}
-          />
+          />}
+            on='click' basic wide >
+            <Notification />
+          </Popup>
+
         </Menu>
       </Container>
     );
diff --git a/src/ts/@overflow/commons/react/component/Notification.tsx b/src/ts/@overflow/commons/react/component/Notification.tsx
index a96985f..5765dd2 100644
--- a/src/ts/@overflow/commons/react/component/Notification.tsx
+++ b/src/ts/@overflow/commons/react/component/Notification.tsx
@@ -1,8 +1,8 @@
 import * as React from 'react';
 import {
     Container,
-    Card,
-    Feed,
+    List,
+    Header,
 } from 'semantic-ui-react';
 
 export interface Props {
@@ -23,45 +23,31 @@ export class Notification extends React.Component<Props, State> {
     public render(): JSX.Element {
 
         return (
-            <Container>
-                <Card fluid>
-                    <Card.Content>
-                        <Card.Header>User Notifications</Card.Header>
-                    </Card.Content>
-                    <Card.Content>
-                        <Feed>
-                            <Feed.Event>
-                                <Feed.Label icon='task' />
-                                <Feed.Content>
-                                    <Feed.Date content='1 day ago' />
-                                    <Feed.Summary>
-                                        You added <a>Jenny Hess</a> to your <a>coworker</a> group.
-                                    </Feed.Summary>
-                                </Feed.Content>
-                            </Feed.Event>
-
-                            <Feed.Event>
-                                <Feed.Label icon='privacy' />
-                                <Feed.Content>
-                                    <Feed.Date content='3 days ago' />
-                                    <Feed.Summary>
-                                        You added <a>Molly Malone</a> as a friend.
-                                    </Feed.Summary>
-                                </Feed.Content>
-                            </Feed.Event>
-
-                            <Feed.Event>
-                                <Feed.Label icon='alarm' />
-                                <Feed.Content>
-                                    <Feed.Date content='4 days ago' />
-                                    <Feed.Summary>
-                                        You added <a>Elliot Baker</a> to your <a>musicians</a> group.
-                                     </Feed.Summary>
-                                </Feed.Content>
-                            </Feed.Event>
-                        </Feed>
-                    </Card.Content>
-                </Card>
+            <Container fluid>
+                <Header as='h4' content='User Notifications'/>
+                <List divided relaxed>
+                    <List.Item>
+                        <List.Icon name='github' size='large' verticalAlign='middle' />
+                        <List.Content>
+                            <List.Header as='a'>Semantic-Org/Semantic-UI</List.Header>
+                            <List.Description as='a'>Updated 10 mins ago</List.Description>
+                        </List.Content>
+                    </List.Item>
+                    <List.Item>
+                        <List.Icon name='github' size='large' verticalAlign='middle' />
+                        <List.Content>
+                            <List.Header as='a'>Semantic-Org/Semantic-UI-Docs</List.Header>
+                            <List.Description as='a'>Updated 22 mins ago</List.Description>
+                        </List.Content>
+                    </List.Item>
+                    <List.Item>
+                        <List.Icon name='github' size='large' verticalAlign='middle' />
+                        <List.Content>
+                            <List.Header as='a'>Semantic-Org/Semantic-UI-Meteor</List.Header>
+                            <List.Description as='a'>Updated 34 mins ago</List.Description>
+                        </List.Content>
+                    </List.Item>
+                </List>
             </Container>
         );
     }