Skip to content

Commit

Permalink
notification indicator and drop down menu added
Browse files Browse the repository at this point in the history
  • Loading branch information
@RachelDau
RachelDau committed Jan 22, 2024
1 parent 4b98337 commit 0e3102c
Show file tree
Hide file tree
Showing 14 changed files with 350 additions and 50 deletions.
5 changes: 5 additions & 0 deletions packages/app/obojobo-repository/shared/components/__snapshots__/dashboard.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,7 @@ exports[`Dashboard renders in MODE_RECENT with fewer modules than moduleCount, n
>
<div
className="repository--nav--current-user--name"
onClick={[Function]}
>
firstName lastName
</div>
Expand Down Expand Up @@ -285,6 +286,7 @@ exports[`Dashboard renders with default props 1`] = `
>
<div
className="repository--nav--current-user--name"
onClick={[Function]}
>
firstName lastName
</div>
Expand Down Expand Up @@ -504,6 +506,7 @@ exports[`Dashboard renders with mode = MODE_ALL 1`] = `
>
<div
className="repository--nav--current-user--name"
onClick={[Function]}
>
firstName lastName
</div>
Expand Down Expand Up @@ -756,6 +759,7 @@ exports[`Dashboard renders with mode = MODE_COLLECTION 1`] = `
>
<div
className="repository--nav--current-user--name"
onClick={[Function]}
>
firstName lastName
</div>
Expand Down Expand Up @@ -948,6 +952,7 @@ exports[`Dashboard renders with mode = MODE_RECENT 1`] = `
>
<div
className="repository--nav--current-user--name"
onClick={[Function]}
>
firstName lastName
</div>
Expand Down
164 changes: 164 additions & 0 deletions packages/app/obojobo-repository/shared/components/__snapshots__/repository-nav.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,86 @@ exports[`RepositoryNav does not render stats section with just canViewSystemStat
>
<div
className="repository--nav--current-user--name"
onClick={[Function]}
>
Display Name
</div>
<div
className="avatar repository--nav--current-user--avatar"
>
<div
className="avatar--image"
>
<img
alt=""
/>
</div>
</div>
</button>
<div
className="repository--nav--current-user--menu is-not-open"
>
<div
className="repository--nav--current-user--link"
>
<a
href="/profile/logout"
>
Log Out
</a>
</div>
</div>
</div>
</nav>
</div>
`;

exports[`RepositoryNav loads notifications from cookies on mount 1`] = `
<div
className="repository--section-wrapper repository--stick-to-top"
onBlur={[Function]}
onFocus={[Function]}
onMouseLeave={[Function]}
>
<nav
className="repository--nav"
>
<a
href="/"
>
<div
className="repository--nav--logo"
>
Obojobo
</div>
</a>
<div
className="repository--nav--links--link"
>
<a
href="/library"
>
Module Library
</a>
</div>
<div
className="repository--nav--links--link"
>
<a
href="/dashboard"
>
Dashboard
</a>
</div>
<div
className="repository--nav--current-user"
>
<button
onClick={[Function]}
>
<div
className="repository--nav--current-user--name"
onClick={[Function]}
>
Display Name
</div>
Expand Down Expand Up @@ -123,6 +203,7 @@ exports[`RepositoryNav renders correctly with standard expected props 1`] = `
>
<div
className="repository--nav--current-user--name"
onClick={[Function]}
>
Display Name
</div>
Expand Down Expand Up @@ -197,6 +278,88 @@ exports[`RepositoryNav renders correctly with standard expected props but no log
</div>
`;

exports[`RepositoryNav renders null when document.cookie is null 1`] = `
<div
className="repository--section-wrapper repository--stick-to-top"
onBlur={[Function]}
onFocus={[Function]}
onMouseLeave={[Function]}
>
<nav
className="repository--nav"
>
<a
href="/"
>
<div
className="repository--nav--logo"
>
Obojobo
</div>
</a>
<div
className="repository--nav--links--link"
>
<a
href="/library"
>
Module Library
</a>
</div>
<div
className="repository--nav--links--link"
>
<a
href="/dashboard"
>
Dashboard
</a>
</div>
<div
className="repository--nav--current-user"
>
<button
onClick={[Function]}
>
<div
className="repository--nav--current-user--name"
onClick={[Function]}
>
Display Name
<div
className="notification-indicator"
/>
</div>
<div
className="avatar repository--nav--current-user--avatar"
>
<div
className="avatar--image"
>
<img
alt=""
/>
</div>
</div>
</button>
<div
className="repository--nav--current-user--menu is-not-open"
>
<div
className="repository--nav--current-user--link"
>
<a
href="/profile/logout"
>
Log Out
</a>
</div>
</div>
</div>
</nav>
</div>
`;

exports[`RepositoryNav renders stats section with canViewStatsPage 1`] = `
<div
className="repository--section-wrapper repository--stick-to-top"
Expand Down Expand Up @@ -251,6 +414,7 @@ exports[`RepositoryNav renders stats section with canViewStatsPage 1`] = `
>
<div
className="repository--nav--current-user--name"
onClick={[Function]}
>
Display Name
</div>
Expand Down
6 changes: 6 additions & 0 deletions packages/app/obojobo-repository/shared/components/__snapshots__/stats.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,7 @@ exports[`Stats Renders "modules loaded" state correctly 1`] = `
>
<div
className="repository--nav--current-user--name"
onClick={[Function]}
>
firstName lastName
</div>
Expand Down Expand Up @@ -235,6 +236,7 @@ exports[`Stats Renders "modules loaded" state correctly 2`] = `
>
<div
className="repository--nav--current-user--name"
onClick={[Function]}
>
firstName lastName
</div>
Expand Down Expand Up @@ -422,6 +424,7 @@ exports[`Stats Renders "modules loading" state correctly 1`] = `
>
<div
className="repository--nav--current-user--name"
onClick={[Function]}
>
firstName lastName
</div>
Expand Down Expand Up @@ -520,6 +523,7 @@ exports[`Stats Renders correctly when assessment stat fetching has finished 1`]
>
<div
className="repository--nav--current-user--name"
onClick={[Function]}
>
firstName lastName
</div>
Expand Down Expand Up @@ -1052,6 +1056,7 @@ exports[`Stats Renders correctly when assessment stat fetching has not started o
>
<div
className="repository--nav--current-user--name"
onClick={[Function]}
>
firstName lastName
</div>
Expand Down Expand Up @@ -1258,6 +1263,7 @@ exports[`Stats Renders correctly when assessment stat fetching has started but n
>
<div
className="repository--nav--current-user--name"
onClick={[Function]}
>
firstName lastName
</div>
Expand Down
4 changes: 1 addition & 3 deletions packages/app/obojobo-repository/shared/components/layouts/default.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,9 +55,7 @@ const LayoutDefault = props => (
</head>
<body className={props.className}>
<div className="layout--wrapper">
<span id="repository-notifications" data-react-props={'{}'}>
<Notification></Notification>
</span>
<span id="repository-notifications" data-react-props={'{}'}></span>
<div className="layout--content">{props.children}</div>
<div className="layout--footer">
<Footer />
Expand Down
7 changes: 3 additions & 4 deletions packages/app/obojobo-repository/shared/components/notification.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,11 @@
import React from 'react'
import { useState, useEffect } from 'react'
import './notification.scss'

const Notification = () => {
const [notifications, setNotifications] = useState([])
const [hiddenNotifications, setHiddenNotifications] = useState([])
const [notifications, setNotifications] = React.useState([])
const [hiddenNotifications, setHiddenNotifications] = React.useState([])

useEffect(() => {
React.useEffect(() => {
if (document && document.cookie) {
const cookiePropsRaw = decodeURIComponent(document.cookie).split(';')

Expand Down
71 changes: 33 additions & 38 deletions packages/app/obojobo-repository/shared/components/notification.scss
View file
Original file line number Diff line number Diff line change
@@ -1,24 +1,48 @@
@import '../../../obojobo-document-engine/src/scss/_includes.scss';
@import '~styles/includes';

$poppin-pink: #af1b5c;
$focus-pink: #fbdae6;
$white: white;

h1 {
margin: 0;
}

p {
display: block;
}

.notification-banner {
background-color: $poppin-pink;
padding: 1em;
color: $white;
border-radius: 0.5em;
margin: 0.1em;
border-width: 0.5em;

h1 {
margin: 0;
}

p {
display: block;
}

.notification-header {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;

.notification-exit-button {
color: $poppin-pink;
background-color: $white;
border: none;
border-radius: 6em;
font-size: 0.8cm;
padding-left: 0.5em;
padding-right: 0.5em;
padding-top: 0.1em;
padding-bottom: 0.3em;
}

.notification-exit-button:hover {
color: $focus-pink;
background-color: $poppin-pink;
}
}
}

.notification-banner.hidden {
Expand All @@ -31,32 +55,3 @@ p {
transition: all 0.2s ease;
-webkit-transition: all 0.2s ease;
}

.dashboard {
margin: 0.1em;
border-width: 1em;
}

.notification-header {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}

.notification-exit-button {
color: $poppin-pink;
background-color: $white;
border: none;
border-radius: 6em;
font-size: 0.8cm;
padding-left: 0.5em;
padding-right: 0.5em;
padding-top: 0.1em;
padding-bottom: 0.3em;
}

.notification-exit-button:hover {
color: $focus-pink;
background-color: $poppin-pink;
}
Loading

0 comments on commit 0e3102c

Please sign in to comment.