Skip to content

About Modal #51

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
AccessiT3ch merged 4 commits into from
Dec 14, 2022
Merged

About Modal #51

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
1449570
Move About content into Modal component
AccessiT3ch Dec 13, 2022
6ab38d2
Move about button into sidebar header
AccessiT3ch Dec 14, 2022
ddd26b3
Change menu icon to bars
AccessiT3ch Dec 14, 2022
f31e03d
Add focus styling to about app button
AccessiT3ch Dec 14, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
78 changes: 78 additions & 0 deletions src/components/AboutModal/AboutModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,78 @@
import React, { FC, ReactElement } from "react";
import { Modal } from "react-bootstrap";
import { ABOUT_APP_HEADER } from "../../strings";

export const ABOUT_BODY =
"This is a simple app to help you keep track of your logs. Highly customizable logs allow you to track anything you want!";
export const ABOUT_DATA_HEADER = "Data Usage";
export const ABOUT_DATA_BODY_1 =
"This app uses local storage to store your logs, no data is sent to a server. Your data is never sold to anyone, EVER.";
export const ABOUT_DATA_BODY_2 =
"If you want to delete your personal data, just delete the Log / Entry. To completely clear the App data, clear your browser's local storage via the browser inspector tools.";
export const ABOUT_ISSUES_HEADER = "Report Issues";
export const ABOUT_ISSUES_BODY =
"If you find any issues with the app, please report them on the GitHub issues page.";
export const ABOUT_ISSUES_LINK =
"https://github.com/AccessiTech/tracker/issues";
export const ABOUT_FEATURES_HEADER = "Feature Requests";
export const ABOUT_FEATURES_BODY =
"If you have any feature requests, please feel free to start (or join) a discussion on Github!";
export const ABOUT_FEATURES_LINK =
"https://github.com/AccessiTech/tracker/discussions";
export const GITHUB_ISSUES = "GitHub Issues";
export const GITHUB_DISCUSSIONS = "GitHub Discussions";

export interface AboutModalProps {
show: boolean;
onHide: () => void;
}
export const AboutModal: FC<AboutModalProps> = ({
show,
onHide,
}): ReactElement => {
return (
<Modal id="aboutModal" show={show} onHide={onHide}>
<Modal.Header closeButton>
<h3>{ABOUT_APP_HEADER}</h3>
</Modal.Header>
<Modal.Body>
<p>{ABOUT_BODY}</p>
<h4>{ABOUT_DATA_HEADER}</h4>
<p>{ABOUT_DATA_BODY_1}</p>
<p>{ABOUT_DATA_BODY_2}</p>
<h4>{ABOUT_ISSUES_HEADER}</h4>
<p>
{ABOUT_ISSUES_BODY}
<a
href={ABOUT_ISSUES_LINK}
title={GITHUB_ISSUES}
target={"_blank"}
rel={"noreferrer"}
>
<i
className="fa fa-arrow-up-right-from-square"
aria-hidden="true"
></i>
<span className="visible_hidden">{GITHUB_ISSUES}</span>
</a>
</p>
<h4>{ABOUT_FEATURES_HEADER}</h4>
<p>
{ABOUT_FEATURES_BODY}
<a
href={ABOUT_FEATURES_LINK}
title={GITHUB_DISCUSSIONS}
target={"_blank"}
rel={"noreferrer"}
>
<i
className="fa fa-arrow-up-right-from-square"
aria-hidden="true"
></i>
<span className="visible_hidden">{GITHUB_DISCUSSIONS}</span>
</a>
</p>
</Modal.Body>
</Modal>
);
};
2 changes: 2 additions & 0 deletions src/components/AboutModal/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
export { AboutModal } from "./AboutModal";
export type { AboutModalProps } from "./AboutModal";
6 changes: 3 additions & 3 deletions src/components/Header/Header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import React from "react";
import { FC, ReactElement } from "react";
import { Button } from "react-bootstrap";
import { useNavigate } from "react-router-dom";
import { OUTLINE_SECONDARY, SIDEBAR_HEADER } from "../../strings";
import { OUTLINE_SECONDARY, ABOUT_APP_HEADER } from "../../strings";
import { ToggleSidebar } from "../Sidebar";
import "./header.scss";

Expand Down Expand Up @@ -44,9 +44,9 @@ export const Header: FC<HeaderProps> = ({
className="sidebar__button_toggle"
variant={OUTLINE_SECONDARY}
onClick={() => toggleSidebar(true)}
title={SIDEBAR_HEADER}
title={ABOUT_APP_HEADER}
>
<i>i</i>
<i className="fa fa-bars fa-lg" aria-hidden="true"></i>
</Button>
</header>
);
Expand Down
102 changes: 16 additions & 86 deletions src/components/Sidebar/Sidebar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,29 +1,10 @@
import React, { useState } from "react";
import { FC, ReactElement } from "react";
import { Accordion, Offcanvas } from "react-bootstrap";
import { END, SIDEBAR_HEADER } from "../../strings";
import { Button, Offcanvas } from "react-bootstrap";
import { ABOUT_APP_HEADER, END, LINK_SECONDARY } from "../../strings";
import "./sidebar.scss";
import { GoogleAuthButton } from "../GoogleAuth";

export const SIDEBAR_BODY =
"This is a simple app to help you keep track of your logs. Highly customizable logs allow you to track anything you want!";
export const SIDEBAR_DATA_HEADER = "Data Usage";
export const SIDEBAR_DATA_BODY_1 =
"This app uses local storage to store your logs, no data is sent to a server. Your data is never sold to anyone, EVER.";
export const SIDEBAR_DATA_BODY_2 =
"If you want to delete your personal data, just delete the Log / Entry. To completely clear the App data, clear your browser's local storage via the browser inspector tools.";
export const SIDEBAR_ISSUES_HEADER = "Report Issues";
export const SIDEBAR_ISSUES_BODY =
"If you find any issues with the app, please report them on the GitHub issues page.";
export const SIDEBAR_ISSUES_LINK =
"https://github.com/AccessiTech/tracker/issues";
export const SIDEBAR_FEATURES_HEADER = "Feature Requests";
export const SIDEBAR_FEATURES_BODY =
"If you have any feature requests, please feel free to start (or join) a discussion on Github!";
export const SIDEBAR_FEATURES_LINK =
"https://github.com/AccessiTech/tracker/discussions";
export const GITHUB_ISSUES = "GitHub Issues";
export const GITHUB_DISCUSSIONS = "GitHub Discussions";
import { AboutModal } from "../AboutModal";

/**
* Sidebar Component
Expand All @@ -44,12 +25,13 @@ export const Sidebar: FC<SidebarProps> = ({
toggleSidebar,
}): ReactElement => {
const [credentials, setCredentials] = useState(null) as any;

const [showAbout, setShowAbout] = useState(false) as any;
return (
<Offcanvas
show={showSidebar}
onHide={() => toggleSidebar(false)}
placement={END}
className="sidebar"
>
<Offcanvas.Header closeButton>
<GoogleAuthButton
Expand All @@ -61,71 +43,19 @@ export const Sidebar: FC<SidebarProps> = ({
setCredentials(null);
}}
/>
<Button
variant={LINK_SECONDARY}
onClick={() => {
setShowAbout(true);
}}
className="sidebar__about_btn"
title={ABOUT_APP_HEADER}
>
<i className="fa fa-info fa-lg" aria-hidden="true"></i>
</Button>
</Offcanvas.Header>
<Offcanvas.Body className="sidebar__body_container">
<Accordion flush defaultActiveKey={"0"}>
<Accordion.Item eventKey="0">
<Accordion.Header>
<h4>{SIDEBAR_HEADER}</h4>
</Accordion.Header>
<Accordion.Body>
<p>{SIDEBAR_BODY}</p>
</Accordion.Body>
</Accordion.Item>
<Accordion.Item eventKey="1">
<Accordion.Header>
<h4>{SIDEBAR_DATA_HEADER}</h4>
</Accordion.Header>
<Accordion.Body>
<p>{SIDEBAR_DATA_BODY_1}</p>
<p>{SIDEBAR_DATA_BODY_2}</p>
</Accordion.Body>
</Accordion.Item>
<Accordion.Item eventKey="2">
<Accordion.Header>
<h4>{SIDEBAR_ISSUES_HEADER}</h4>
</Accordion.Header>
<Accordion.Body>
<p>
{SIDEBAR_ISSUES_BODY}
<a
href={SIDEBAR_ISSUES_LINK}
title={GITHUB_ISSUES}
target={"_blank"}
rel={"noreferrer"}
>
<i
className="fa fa-arrow-up-right-from-square"
aria-hidden="true"
></i>
<span className="visible_hidden">{GITHUB_ISSUES}</span>
</a>
</p>
</Accordion.Body>
</Accordion.Item>
<Accordion.Item eventKey="3">
<Accordion.Header>
<h4>{SIDEBAR_FEATURES_HEADER}</h4>
</Accordion.Header>
<Accordion.Body>
<p>
{SIDEBAR_FEATURES_BODY}
<a
href={SIDEBAR_FEATURES_LINK}
title={GITHUB_DISCUSSIONS}
target={"_blank"}
rel={"noreferrer"}
>
<i
className="fa fa-arrow-up-right-from-square"
aria-hidden="true"
></i>
<span className="visible_hidden">{GITHUB_DISCUSSIONS}</span>
</a>
</p>
</Accordion.Body>
</Accordion.Item>
</Accordion>
<AboutModal show={showAbout} onHide={() => setShowAbout(false)} />
</Offcanvas.Body>
<p className="sidebar__p_version text-muted">
Version: {process.env.REACT_APP_VERSION}
Expand Down
25 changes: 25 additions & 0 deletions src/components/Sidebar/sidebar.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,29 @@
@import "../../variables.scss";
.sidebar {
.offcanvas-header {
justify-content: flex-end;

button:first-of-type {
margin-right: auto;
}

.sidebar__about_btn {
margin-right: 0.25rem;
opacity: 0.5;
i {
vertical-align: 0;
}
&:hover,
&:active,
&:focus {
opacity: 1;
}
&:focus {
box-shadow: 0 0 0 0.25rem rgb(13 110 253 / 25%);
}
}
}
}
.sidebar__p_version {
font-size: 0.9rem;
margin: 1rem 1rem 0.75rem;
Expand Down
4 changes: 3 additions & 1 deletion src/strings.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,9 +11,11 @@ export const OUTLINE_PRIMARY = `outline-${PRIMARY}`;
export const OUTLINE_SECONDARY = `outline-${SECONDARY}`;
export const OUTLINE_DANGER = `outline-${DANGER}`;
export const OUTLINE_DARK = `outline-${DARK}`;
export const OUTLINE_INFO = `outline-${INFO}`;
export const TEXT_DANGER = `text-${DANGER}`;
export const TEXT_MUTED = `text-${MUTED}`;
export const TEXT_SUCCESS = `text-${SUCCESS}`;
export const LINK_SECONDARY = `link-${SECONDARY}`;
export const TYPE = "type";
export const SUBMIT = "submit";
export const RESET = "reset";
Expand Down Expand Up @@ -96,7 +98,7 @@ export const NONE_LABEL = "None";
export const STEPS_LABEL = "Steps";
export const CREATE_LABEL = "Create";
export const UPDATE_LABEL = "Update";
export const SIDEBAR_HEADER = "About the App";
export const ABOUT_APP_HEADER = "About the App";
export const OOPS = "Oops!";
export const LOG_NOT_FOUND = "Log not found";
export const DATA = "Data";
Expand Down