From e722ae0e7e7b1658062319ee26b37a5880bd5fb7 Mon Sep 17 00:00:00 2001 From: Ahmed Shatat Date: Sat, 28 Jul 2018 17:18:14 +0300 Subject: [PATCH 1/5] header front-end with notifications --- frontend/src/components/Header/Header.js | 0 .../Header/HeaderTitle/HeaderTitle.js | 20 +++++++ .../Header/HeaderTitle/careandshare.png | Bin 0 -> 36698 bytes .../Notification/Notification.js | 18 +++++++ .../Header/Notifications/Notifications.js | 0 .../components/Header/Notifications/index.js | 39 ++++++++++++++ .../components/Header/Notifications/style.css | 50 +++++++++++++++++ frontend/src/components/Header/index.js | 29 ++++++++++ frontend/src/components/Header/style.css | 51 ++++++++++++++++++ 9 files changed, 207 insertions(+) delete mode 100644 frontend/src/components/Header/Header.js create mode 100755 frontend/src/components/Header/HeaderTitle/careandshare.png delete mode 100644 frontend/src/components/Header/Notifications/Notifications.js create mode 100644 frontend/src/components/Header/Notifications/index.js create mode 100644 frontend/src/components/Header/Notifications/style.css create mode 100644 frontend/src/components/Header/index.js create mode 100644 frontend/src/components/Header/style.css diff --git a/frontend/src/components/Header/Header.js b/frontend/src/components/Header/Header.js deleted file mode 100644 index e69de29..0000000 diff --git a/frontend/src/components/Header/HeaderTitle/HeaderTitle.js b/frontend/src/components/Header/HeaderTitle/HeaderTitle.js index e69de29..6fa312c 100644 --- a/frontend/src/components/Header/HeaderTitle/HeaderTitle.js +++ b/frontend/src/components/Header/HeaderTitle/HeaderTitle.js @@ -0,0 +1,20 @@ +import React, { Component } from 'react'; +import logo from './careandshare.png'; + +import ('../style.css'); + +class Title extends Component { + state = { + + } + + render(){ + return( + + logo + + ) + } +} + +export default Title; \ No newline at end of file diff --git a/frontend/src/components/Header/HeaderTitle/careandshare.png b/frontend/src/components/Header/HeaderTitle/careandshare.png new file mode 100755 index 0000000000000000000000000000000000000000..10dae4cdebc35b2ddaa68329f3503229e57531a7 GIT binary patch literal 36698 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 +

{this.props.name} wants to connect with you!

+
+ + +
+ + ); + } +} + +export default Notification; \ No newline at end of file diff --git a/frontend/src/components/Header/Notifications/Notifications.js b/frontend/src/components/Header/Notifications/Notifications.js deleted file mode 100644 index e69de29..0000000 diff --git a/frontend/src/components/Header/Notifications/index.js b/frontend/src/components/Header/Notifications/index.js new file mode 100644 index 0000000..d8b9f5b --- /dev/null +++ b/frontend/src/components/Header/Notifications/index.js @@ -0,0 +1,39 @@ +import React, { Component } from 'react'; +import FontAwesomeIcon from 'react-fontawesome' + +import Notification from './Notification/Notification'; + +import('./style.css'); + +class Notifications extends Component { + state = { + toggle: false, + } + + toggleNotification = (e) => { + this.setState(prevState => ({ + toggle: !prevState.toggle + })); + } + + render () { + const notifications = this.props.connectReq.length? this.props.connectReq.map(element => { + return + }):

You have no notifications

; + + return( + + + + + {this.state.toggle? +
+ {notifications} +
: '' + } + + ); + } +} + +export default Notifications; \ No newline at end of file diff --git a/frontend/src/components/Header/Notifications/style.css b/frontend/src/components/Header/Notifications/style.css new file mode 100644 index 0000000..31c7630 --- /dev/null +++ b/frontend/src/components/Header/Notifications/style.css @@ -0,0 +1,50 @@ +.notifications { + width: 320px; + min-height: 100px; + background-color: #DFE2DB; + padding: 10px; + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; + position: absolute; + top: 30px; + z-index: 1; +} + +.notifications .wrapper { + background-color: rgba(255, 255, 255, 0.8); + width: 300px; + height: 110px; + display: flex; + justify-content: center; + align-items: center; + flex-wrap: wrap; + margin-top: 7px; +} + +.notifications .wrapper div { + display: flex; + width: 80%; + justify-content: space-evenly; +} +.notifications .wrapper p { + width: 80%; + text-align: center; +} +.notifications .wrapper button { + cursor: pointer; + width: 90px; + height: 35px; + text-align: center; + border-radius: 18px; + background-color: #48A1AF; + border: none; +} +.notifications .wrapper button:hover { + box-shadow: 0 2px 5px -2px #000; +} + +.notifications .wrapper button:nth-child(2) { + background-color: #848484; +} \ No newline at end of file diff --git a/frontend/src/components/Header/index.js b/frontend/src/components/Header/index.js new file mode 100644 index 0000000..648162b --- /dev/null +++ b/frontend/src/components/Header/index.js @@ -0,0 +1,29 @@ +import React, { Component } from 'react'; +import FontAwesomeIcon from 'react-fontawesome' + +import HeaderTitle from './HeaderTitle/HeaderTitle'; +import Notifications from './Notifications'; + +import ('./style.css') + +class Header extends Component { + + + render(){ + return( +
+ + + + + + + + + +
+ ); + } +} + +export default Header; \ No newline at end of file diff --git a/frontend/src/components/Header/style.css b/frontend/src/components/Header/style.css new file mode 100644 index 0000000..2cbedab --- /dev/null +++ b/frontend/src/components/Header/style.css @@ -0,0 +1,51 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +.App { + width: 375px; + height: 667px; + max-width: 375px; + max-height: 667px; + margin: 0 auto; +} + +.App-header { + position: relative; + display: flex; + justify-content: center; + align-items: center; + width: 100%; + height: 120px; + background-color: #48A1AF; + box-shadow: 0px 4px 10px -6px #000; +} + +.App-header a { + position: absolute; + font-size: 24px; + margin: 5px; + cursor: pointer; +} + +.App-header .menu { + left: 0; + top: 0; +} + +.App-header .angle-left { + left: 0; + bottom: 0; +} + +.App-header .notification { + font-size: 18px; + right: 0; + top: 0; +} + +.App-header-title { + width: 200px; +} \ No newline at end of file From 8d659f802fe32a40335086b0b908ba751905a473 Mon Sep 17 00:00:00 2001 From: Ahmed Shatat Date: Sat, 28 Jul 2018 17:39:04 +0300 Subject: [PATCH 2/5] add notification number --- .../src/components/Header/Notifications/index.js | 7 ++++--- .../src/components/Header/Notifications/style.css | 14 ++++++++++++++ 2 files changed, 18 insertions(+), 3 deletions(-) diff --git a/frontend/src/components/Header/Notifications/index.js b/frontend/src/components/Header/Notifications/index.js index d8b9f5b..ce315b4 100644 --- a/frontend/src/components/Header/Notifications/index.js +++ b/frontend/src/components/Header/Notifications/index.js @@ -17,14 +17,15 @@ class Notifications extends Component { } render () { - const notifications = this.props.connectReq.length? this.props.connectReq.map(element => { + const { connectReq } = this.props; + const notifications = connectReq.length? connectReq.map(element => { return }):

You have no notifications

; - + const bell = (connectReq.length && !this.state.toggle)?
{connectReq.length}
: ; return( - + {bell} {this.state.toggle?
diff --git a/frontend/src/components/Header/Notifications/style.css b/frontend/src/components/Header/Notifications/style.css index 31c7630..aa3897b 100644 --- a/frontend/src/components/Header/Notifications/style.css +++ b/frontend/src/components/Header/Notifications/style.css @@ -47,4 +47,18 @@ .notifications .wrapper button:nth-child(2) { background-color: #848484; +} + +.notification .num { + display: block; + width: 20px; + height: 20px; + border-radius: 50%; + background-color: #FC2E2E; + color: #fff; + text-align: center; + font-size: 19px; + position: absolute; + right: 10px; + top: 8px; } \ No newline at end of file From 45642011525af05fd74867bc7d1931ded12c1f7a Mon Sep 17 00:00:00 2001 From: Ahmed Shatat Date: Sat, 28 Jul 2018 18:06:53 +0300 Subject: [PATCH 3/5] add dynamic header --- frontend/src/components/Header/HeaderTitle/HeaderTitle.js | 8 +++----- frontend/src/components/Header/Notifications/index.js | 3 +++ frontend/src/components/Header/index.js | 2 +- frontend/src/components/Header/style.css | 6 ++++++ 4 files changed, 13 insertions(+), 6 deletions(-) diff --git a/frontend/src/components/Header/HeaderTitle/HeaderTitle.js b/frontend/src/components/Header/HeaderTitle/HeaderTitle.js index 6fa312c..1bb33b3 100644 --- a/frontend/src/components/Header/HeaderTitle/HeaderTitle.js +++ b/frontend/src/components/Header/HeaderTitle/HeaderTitle.js @@ -4,14 +4,12 @@ import logo from './careandshare.png'; import ('../style.css'); class Title extends Component { - state = { - - } - render(){ + const { title } = this.props; + return( - logo + {title?

{title}

:logo} ) } diff --git a/frontend/src/components/Header/Notifications/index.js b/frontend/src/components/Header/Notifications/index.js index ce315b4..7364777 100644 --- a/frontend/src/components/Header/Notifications/index.js +++ b/frontend/src/components/Header/Notifications/index.js @@ -18,10 +18,13 @@ class Notifications extends Component { render () { const { connectReq } = this.props; + const notifications = connectReq.length? connectReq.map(element => { return }):

You have no notifications

; + const bell = (connectReq.length && !this.state.toggle)?
{connectReq.length}
: ; + return( diff --git a/frontend/src/components/Header/index.js b/frontend/src/components/Header/index.js index 648162b..231fb00 100644 --- a/frontend/src/components/Header/index.js +++ b/frontend/src/components/Header/index.js @@ -13,7 +13,7 @@ class Header extends Component { return(
- + diff --git a/frontend/src/components/Header/style.css b/frontend/src/components/Header/style.css index 2cbedab..7332b47 100644 --- a/frontend/src/components/Header/style.css +++ b/frontend/src/components/Header/style.css @@ -28,6 +28,12 @@ font-size: 24px; margin: 5px; cursor: pointer; + text-decoration: none; + color: #000; +} + +.App-header h1 { + font-size: 30px; } .App-header .menu { From 10773ec572ae126e4a2423a4cf738d53b290ea83 Mon Sep 17 00:00:00 2001 From: Ahmed Shatat Date: Sat, 28 Jul 2018 20:37:51 +0300 Subject: [PATCH 4/5] add transition to notification menu CSS --- frontend/src/components/Header/Notifications/index.js | 6 ++++-- frontend/src/components/Header/Notifications/style.css | 8 +++++++- 2 files changed, 11 insertions(+), 3 deletions(-) diff --git a/frontend/src/components/Header/Notifications/index.js b/frontend/src/components/Header/Notifications/index.js index 7364777..bd06d34 100644 --- a/frontend/src/components/Header/Notifications/index.js +++ b/frontend/src/components/Header/Notifications/index.js @@ -30,10 +30,12 @@ class Notifications extends Component { {bell} - {this.state.toggle? + {this.state.toggle?
{notifications} -
: '' +
:
+ {notifications} +
} ); diff --git a/frontend/src/components/Header/Notifications/style.css b/frontend/src/components/Header/Notifications/style.css index aa3897b..a3b96f9 100644 --- a/frontend/src/components/Header/Notifications/style.css +++ b/frontend/src/components/Header/Notifications/style.css @@ -10,6 +10,12 @@ position: absolute; top: 30px; z-index: 1; + transition: all 0.5s ease; +} + +.hidden { + transform: translate(50%, -50%) scale(0); + transition: all 0.5s ease; } .notifications .wrapper { @@ -61,4 +67,4 @@ position: absolute; right: 10px; top: 8px; -} \ No newline at end of file +} From 40e0f1477cc72007c1f76835781b34211447cf47 Mon Sep 17 00:00:00 2001 From: Ahmed Shatat Date: Sun, 29 Jul 2018 16:33:03 +0300 Subject: [PATCH 5/5] fix: fix style loading error and statless component --- .../Header/HeaderTitle/HeaderTitle.js | 8 +-- .../Notification/Notification.js | 11 ++-- .../Notifications/Notification/style.css | 39 +++++++++++ .../components/Header/Notifications/index.js | 26 ++++---- .../components/Header/Notifications/style.css | 65 ++++--------------- frontend/src/components/Header/index.js | 7 +- frontend/src/components/Header/style.css | 2 +- 7 files changed, 76 insertions(+), 82 deletions(-) create mode 100644 frontend/src/components/Header/Notifications/Notification/style.css diff --git a/frontend/src/components/Header/HeaderTitle/HeaderTitle.js b/frontend/src/components/Header/HeaderTitle/HeaderTitle.js index 1bb33b3..693a58b 100644 --- a/frontend/src/components/Header/HeaderTitle/HeaderTitle.js +++ b/frontend/src/components/Header/HeaderTitle/HeaderTitle.js @@ -3,16 +3,12 @@ import logo from './careandshare.png'; import ('../style.css'); -class Title extends Component { - render(){ - const { title } = this.props; - +const Title = ({ title }) => { return( {title?

{title}

:logo} - ) - } + ); } export default Title; \ No newline at end of file diff --git a/frontend/src/components/Header/Notifications/Notification/Notification.js b/frontend/src/components/Header/Notifications/Notification/Notification.js index 9eccaec..0aa5fe2 100644 --- a/frontend/src/components/Header/Notifications/Notification/Notification.js +++ b/frontend/src/components/Header/Notifications/Notification/Notification.js @@ -1,18 +1,17 @@ import React , { Component } from 'react'; -class Notification extends Component { - - render(){ +import './style.css'; + +const Notification = ({name}) => { return ( -
-

{this.props.name} wants to connect with you!

+
+

{name} wants to connect with you!

); - } } export default Notification; \ No newline at end of file diff --git a/frontend/src/components/Header/Notifications/Notification/style.css b/frontend/src/components/Header/Notifications/Notification/style.css new file mode 100644 index 0000000..2575ad3 --- /dev/null +++ b/frontend/src/components/Header/Notifications/Notification/style.css @@ -0,0 +1,39 @@ +.notification-wrapper { + background-color: rgba(255, 255, 255, 0.8); + width: 300px; + height: 110px; + display: flex; + justify-content: center; + align-items: center; + flex-wrap: wrap; + margin-top: 7px; +} + +.notification-wrapper div { + display: flex; + width: 80%; + justify-content: space-evenly; +} + +.notification-wrapper p { + width: 80%; + text-align: center; +} + +.notification-wrapper button { + cursor: pointer; + width: 90px; + height: 35px; + text-align: center; + border-radius: 18px; + background-color: #48A1AF; + border: none; +} + +.notification-wrapper button:hover { + box-shadow: 0 2px 5px -2px #000; +} + +.notification-wrapper button:nth-child(2) { + background-color: #848484; +} diff --git a/frontend/src/components/Header/Notifications/index.js b/frontend/src/components/Header/Notifications/index.js index bd06d34..478a554 100644 --- a/frontend/src/components/Header/Notifications/index.js +++ b/frontend/src/components/Header/Notifications/index.js @@ -3,40 +3,38 @@ import FontAwesomeIcon from 'react-fontawesome' import Notification from './Notification/Notification'; -import('./style.css'); +import './style.css'; class Notifications extends Component { state = { - toggle: false, + show: false, } toggleNotification = (e) => { this.setState(prevState => ({ - toggle: !prevState.toggle + show: !prevState.show })); } render () { const { connectReq } = this.props; - + const { show } = this.state; + const notifications = connectReq.length? connectReq.map(element => { return }):

You have no notifications

; - const bell = (connectReq.length && !this.state.toggle)?
{connectReq.length}
: ; - return( - {bell} - - {this.state.toggle? -
- {notifications} -
:
- {notifications} +
+ {(connectReq.length && !show)?{connectReq.length}:''} +
- } + +
+ {notifications} +
); } diff --git a/frontend/src/components/Header/Notifications/style.css b/frontend/src/components/Header/Notifications/style.css index a3b96f9..fe808f5 100644 --- a/frontend/src/components/Header/Notifications/style.css +++ b/frontend/src/components/Header/Notifications/style.css @@ -1,3 +1,17 @@ +.notification .num { + display: block; + width: 20px; + height: 20px; + border-radius: 50%; + background-color: #FC2E2E; + color: #fff; + text-align: center; + font-size: 19px; + position: absolute; + right: 10px; + top: 8px; +} + .notifications { width: 320px; min-height: 100px; @@ -17,54 +31,3 @@ transform: translate(50%, -50%) scale(0); transition: all 0.5s ease; } - -.notifications .wrapper { - background-color: rgba(255, 255, 255, 0.8); - width: 300px; - height: 110px; - display: flex; - justify-content: center; - align-items: center; - flex-wrap: wrap; - margin-top: 7px; -} - -.notifications .wrapper div { - display: flex; - width: 80%; - justify-content: space-evenly; -} -.notifications .wrapper p { - width: 80%; - text-align: center; -} -.notifications .wrapper button { - cursor: pointer; - width: 90px; - height: 35px; - text-align: center; - border-radius: 18px; - background-color: #48A1AF; - border: none; -} -.notifications .wrapper button:hover { - box-shadow: 0 2px 5px -2px #000; -} - -.notifications .wrapper button:nth-child(2) { - background-color: #848484; -} - -.notification .num { - display: block; - width: 20px; - height: 20px; - border-radius: 50%; - background-color: #FC2E2E; - color: #fff; - text-align: center; - font-size: 19px; - position: absolute; - right: 10px; - top: 8px; -} diff --git a/frontend/src/components/Header/index.js b/frontend/src/components/Header/index.js index 231fb00..19e7529 100644 --- a/frontend/src/components/Header/index.js +++ b/frontend/src/components/Header/index.js @@ -4,21 +4,20 @@ import FontAwesomeIcon from 'react-fontawesome' import HeaderTitle from './HeaderTitle/HeaderTitle'; import Notifications from './Notifications'; -import ('./style.css') +import './style.css'; class Header extends Component { - render(){ return(
- + - +
diff --git a/frontend/src/components/Header/style.css b/frontend/src/components/Header/style.css index 7332b47..7ae84d5 100644 --- a/frontend/src/components/Header/style.css +++ b/frontend/src/components/Header/style.css @@ -4,7 +4,7 @@ box-sizing: border-box; } -.App { +#root { width: 375px; height: 667px; max-width: 375px;