Add notification reminder popup component

This commit is contained in:
Gabe Kangas 2022-05-16 20:06:48 -07:00
parent f14b8ea8ba
commit a1c06ec9de
No known key found for this signature in database
GPG key ID: 9A56337728BC81EA
7 changed files with 117 additions and 21 deletions

View file

@ -0,0 +1,22 @@
.contentbutton {
background-color: transparent;
border: none;
text-align: left;
cursor: pointer;
}
.closebutton {
position: absolute;
right: 10px;
top: 10px;
background-color: transparent;
border: none;
font-size: 20px;
cursor: pointer;
}
.title {
border-bottom: none;
font-weight: bold;
padding-left: 5px;
}

View file

@ -1,6 +1,60 @@
/* eslint-disable @typescript-eslint/no-unused-vars */
interface Props {}
import { Popover } from 'antd';
import { CloseOutlined } from '@ant-design/icons';
import React, { useState } from 'react';
import s from './NotifyReminderPopup.module.scss';
interface Props {
visible: boolean;
children: React.ReactNode[];
notificationClicked: () => void;
notificationClosed: () => void;
}
export default function NotifyReminderPopup(props: Props) {
return <div>Popup reminder goes here</div>;
const { children, visible, notificationClicked, notificationClosed } = props;
const [visiblePopup, setVisiblePopup] = useState(visible);
const title = <div className={s.title}>Stay updated!</div>;
const popupStyle = {
borderRadius: '5px',
cursor: 'pointer',
paddingTop: '10px',
paddingRight: '10px',
fontSize: '16px',
};
const popupClicked = e => {
e.stopPropagation();
notificationClicked();
};
const popupClosed = e => {
e.stopPropagation();
setVisiblePopup(false);
notificationClosed();
};
const content = (
<button type="button" onClick={popupClicked} className={s.contentbutton}>
<button type="button" className={s.closebutton} onClick={popupClosed}>
<CloseOutlined />
</button>
Click and never miss
<br />
future streams!
</button>
);
return (
<Popover
placement="topLeft"
defaultVisible={visiblePopup}
visible={visiblePopup}
destroyTooltipOnHide
title={title}
content={content}
overlayInnerStyle={popupStyle}
>
{children}
</Popover>
);
}

View file

@ -1,8 +1,17 @@
/* eslint-disable no-alert */
import React from 'react';
import { ComponentStory, ComponentMeta } from '@storybook/react';
import NotifyReminder from '../components/ui/NotifyReminderPopup/NotifyReminderPopup';
import Mock from './assets/mocks/notify-popup.png';
const Example = args => (
<div style={{ margin: '20px', marginTop: '130px' }}>
<NotifyReminder {...args}>
<button type="button">notify button</button>
</NotifyReminder>
</div>
);
export default {
title: 'owncast/Notify Reminder',
component: NotifyReminder,
@ -14,13 +23,26 @@ export default {
docs: {
description: {
component: `After visiting the page three times this popup reminding you that you can register for live stream notifications shows up.
Clicking it will make the notificaiton modal display. Clicking the "X" will hide the modal and make it never show again.`,
Clicking it will make the notification modal display. Clicking the "X" will hide the modal and make it never show again.`,
},
},
},
} as ComponentMeta<typeof NotifyReminder>;
const Template: ComponentStory<typeof NotifyReminder> = args => <NotifyReminder {...args} />;
const Template: ComponentStory<typeof NotifyReminder> = args => <Example {...args} />;
export const Example = Template.bind({});
Example.args = {};
export const Active = Template.bind({});
Active.args = {
visible: true,
notificationClicked: () => {
alert('notification clicked');
},
notificationClosed: () => {
alert('notification closed');
},
};
export const InActive = Template.bind({});
InActive.args = {
visible: false,
};

View file

@ -9,7 +9,7 @@ text-color-secondry:
link-color:
value: 'var(--theme-link-color)'
popover-background:
value: 'var(--theme-background)'
value: '{color.owncast.purple.700.value}'
background-color-light:
value: 'var(--theme-background-secondary)'

View file

@ -536,3 +536,4 @@ textarea.ant-input {
display: block;
}
}

View file

@ -1,10 +1,11 @@
// Do not edit directly
// Generated on Sat, 07 May 2022 17:24:18 GMT
// Generated on Tue, 17 May 2022 02:47:26 GMT
@text-color: var(--theme-text-color);
@text-color-secondry: var(--theme-text-color-secondary);
@link-color: var(--theme-link-color);
@popover-background: var(--theme-background);
@popover-background: #6941c6;
@background-color-light: var(--theme-background-secondary);
@primary-color: #9e77ed;
@info-color: #667085;
@ -19,12 +20,10 @@
@theme-text-color: #d0d5dd; // The color of the text in the application.
@theme-text-color-secondary: #667085;
@theme-link-color: #9e77ed;
@theme-font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
'Segoe UI Symbol', 'Noto Color Emoji';
@theme-font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
@theme-background: #1b1a26; // The main background color of the page.
@theme-background-secondary: #16151f; // A secondary background color used in sections and controls.
@theme-rounded-corners: 5px; // The radius of rounded corners.
@theme-rounded-corners: 5px; // The radius of rounded corners used in places.
@theme-success-color: #12b76a;
@theme-info-color: #d6bbfb;
@theme-warning-color: #f79009;
@ -59,9 +58,7 @@
@color-owncast-logo-blue: #2086e1;
@color-owncast-background: #1b1a26;
@color-owncast-background-secondary: #16151f;
@font-owncast-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
'Segoe UI Symbol', 'Noto Color Emoji';
@font-owncast-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
@owncast-purple: #7871ff;
@owncast-purple-25: rgba(120, 113, 255, 0.25);
@owncast-purple-50: rgba(120, 113, 255, 0.5);
@ -74,4 +71,4 @@
@purple-dark: #42307d;
@default-link-color: #6941c6;
@default-bg-color: #1b1a26;
@default-text-color: #f2f4f7;
@default-text-color: #f2f4f7;

View file

@ -1,13 +1,13 @@
/**
* Do not edit directly
* Generated on Sat, 07 May 2022 17:24:18 GMT
* Generated on Tue, 17 May 2022 02:47:26 GMT
*/
:root {
--text-color: var(--theme-text-color);
--text-color-secondry: var(--theme-text-color-secondary);
--link-color: var(--theme-link-color);
--popover-background: var(--theme-background);
--popover-background: #6941c6;
--background-color-light: var(--theme-background-secondary);
--primary-color: #9e77ed;
--info-color: #667085;
@ -27,7 +27,7 @@
'Segoe UI Symbol', 'Noto Color Emoji';
--theme-background: #1b1a26; /* The main background color of the page. */
--theme-background-secondary: #16151f; /* A secondary background color used in sections and controls. */
--theme-rounded-corners: 5px; /* The radius of rounded corners. */
--theme-rounded-corners: 5px; /* The radius of rounded corners used in places. */
--theme-success-color: #12b76a;
--theme-info-color: #d6bbfb;
--theme-warning-color: #f79009;