overflow_backup_2018_0455/overflow_app
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

notification

Browse Source
This commit is contained in:
insanity 2017-07-21 15:58:39 +09:00
parent 4a50fe2cd6
commit abac644b42
2 changed files with 42 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/ts/@overflow/app/views/layout/LogoBar.tsx
View File

@ -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>
);

68
src/ts/@overflow/commons/react/component/Notification.tsx
View File

@ -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>
);
}