mirror of
https://github.com/owncast/owncast.git
synced 2024-11-22 04:40:37 +03:00
Add notification reminder popup component
This commit is contained in:
parent
f14b8ea8ba
commit
a1c06ec9de
7 changed files with 117 additions and 21 deletions
|
@ -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;
|
||||
}
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -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,
|
||||
};
|
||||
|
|
|
@ -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)'
|
||||
|
||||
|
|
|
@ -536,3 +536,4 @@ textarea.ant-input {
|
|||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -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;
|
|
@ -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;
|
||||
|
|
Loading…
Reference in a new issue