Skip to content

Commit

Permalink
#333: Merged develop and fixed conflicts in index css
Browse files Browse the repository at this point in the history
  • Loading branch information
@KattisLej
KattisLej committed May 20, 2022
2 parents 4719282 + b313e68 commit 1b0cf56
Show file tree
Hide file tree
Showing 7 changed files with 147 additions and 110 deletions.
70 changes: 12 additions & 58 deletions frontend/src/components/HeaderUser.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,74 +1,28 @@
import "../index.css";
import React, { useState } from "react";
import { SNOWPACK_PUBLIC_API_URL } from "../utils";
import down from "../icons/caret-down-fill.svg";
import { AuthContext } from "../components/AuthProvider";

export const HeaderUser = ({ username }: { username: string }) => {
const { logoutBackend, setUser } = React.useContext(AuthContext);

const [showUserSettings, setShowUserSettings] = useState<boolean>(false);

const showSettingsClickHandle = () => {
setShowUserSettings(!showUserSettings);
};

const logout = async (e) => {
const logout = await logoutBackend();
if (logout) setUser(null);
};

const showSettings = () => {
return (
<ul className="settings-box" aria-labelledby="dropdownMenuLink">
<li className="settings-list-item">
<a className="dropdown-item settings-list-link" href="/report">
Report time
</a>
<a className="dropdown-item settings-list-link" href="/help">
Help
</a>
<a className="dropdown-item settings-list-link" onClick={logout}>
Logout
</a>
</li>
</ul>
);
};

return (
<div className="p-2 settings-wrapper">
<a
className="btn dropdown-button"
onClick={showSettingsClickHandle}
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded={showUserSettings}
>
{username}
{showUserSettings ? (
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
fill="currentColor"
viewBox="0 0 16 16"
>
<path d="m7.247 4.86-4.796 5.481c-.566.647-.106 1.659.753 1.659h9.592a1 1 0 0 0 .753-1.659l-4.796-5.48a1 1 0 0 0-1.506 0z" />
</svg>
) : (
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
fill="currentColor"
viewBox="0 0 16 16"
>
<path d="M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z" />
</svg>
)}
<nav className="nav-wrapper">
<div className="nav-user">{username}</div>
<div className="nav-bar">|</div>
<button type="button" className="nav-item" onClick={logout}>
Log out
</button>
<a className="nav-item" href="/help">
Help
</a>
<a className="nav-item" href="/report">
Report time
</a>
{showUserSettings ? showSettings() : null}
</div>
</nav>
);
};
4 changes: 4 additions & 0 deletions frontend/src/icons/exclamation-triangle.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file removed frontend/src/icons/overview.png
View file
Binary file not shown.
0 frontend/src/icons/weektravel.png → frontend/src/images/weektravel.png
View file
File renamed without changes
80 changes: 51 additions & 29 deletions frontend/src/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -194,33 +194,41 @@ Other button classes are defined further down together with other classes for th
height: 2rem;
}

.settings-wrapper {
position: relative;
.nav-wrapper {
display: flex;
flex-direction: row;
align-items: center;
margin-right: 2rem;
}

.settings-box {
position: absolute;
right: 1rem;
top: 3.3rem;
background-color: hsl(186deg 30% 94%);
padding: 0.8rem;
border-radius: 5px;
box-shadow: 0 5px 15px 0 hsla(0deg 0% 0% 15%);
.nav-user {
align-items: center;
padding: 0.3rem 0.8rem;
border: none;
border-radius: 4px;
color: hsl(185deg 92% 11%);
background-color: hsl(76deg 55% 77%);
}

.settings-list-item {
list-style-type: none;
cursor: pointer;
.nav-bar {
padding: 0.3rem 0.8rem;
border: none;
color: hsl(185deg 92% 11%);
background-color: transparent;
}

.settings-list-link {
padding: 0.3rem 2.5rem 0.3rem 0.8rem;
.nav-item {
padding: 0.3rem 0.8rem;
border: none;
border-radius: 3px;
border-radius: 4px;
color: hsl(185deg 92% 11%);
background-color: transparent;
text-decoration: none;
}

.settings-list-link:hover {
background-color: hsl(186deg 30% 86%);
.nav-item:hover {
background-color: hsl(76deg 55% 77%);
color: hsl(185deg 92% 11%);
}

/* LOGIN */
Expand Down Expand Up @@ -569,7 +577,6 @@ Other button classes are defined further down together with other classes for th
background-color: hsl(0deg 0% 97%);
padding: 0 3rem 3rem;
position: relative;
margin: 100px 0;
}

.help-title {
Expand All @@ -581,20 +588,20 @@ Other button classes are defined further down together with other classes for th

.help-subtitle {
font-size: 1.5rem;
margin-top: 1.5rem;
padding-top: 1.5rem;
color: hsl(186deg 92% 11%);
}

.help-info {
font-size: 1.2rem;
margin-top: 1.5rem;
.help-h3 {
font-size: 1.25rem;
font-weight: 700;
padding-top: 1.5rem;
color: hsl(186deg 92% 11%);
}

.overview-img {
height: 30rem;
width: 65rem;
margin-right: 1rem;
margin-top: 2rem;
.help-info {
font-size: 1.2rem;
margin-top: 1rem;
}

.weektravel-img {
Expand All @@ -609,8 +616,23 @@ Other button classes are defined further down together with other classes for th
justify-content: center;
}

.feedback-check {
position: absolute;
top: 0;
right: 0;
width: 1.5rem;
}

.feedback-warning {
position: absolute;
top: 3px;
right: 3px;
width: 0.7rem;

}

@media (max-width: 992px) {
.hidden{
visibility: hidden;
}
}
}
53 changes: 38 additions & 15 deletions frontend/src/pages/Help.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,7 @@ import { Row } from "../components/Row";
import { Cell } from "../components/Cell";
import { IssueActivityPair, FetchedTimeEntry } from "../model";
import { QuickAdd } from "../components/QuickAdd";
import weektravel from "../icons/weektravel.png";
import overview from "../icons/overview.png";
import weektravel from "../images/weektravel.png";

export const Help = () => {
const context = React.useContext(AuthContext);
Expand Down Expand Up @@ -47,12 +46,12 @@ export const Help = () => {
updated_on: "2020-01-01",
};
return (
<main>
<div className="usr-header">
<>
<header className="usr-header">
<h1 className="help-title">How do I use the urdr service?</h1>
<HeaderUser username={context.user ? context.user.login : ""} />
</div>
<div className="help-wrapper">
</header>
<main className="help-wrapper">
<h2 className="help-subtitle">Introduction</h2>
<p className="help-info">
The purpose of this website is to ease the process of logging time on
Expand All @@ -69,9 +68,6 @@ export const Help = () => {
Below, you find the time entries grid, and the bottom bar including
the feature for adding new rows and saving your changes.
</p>
<div className="centered">
<img src={overview} alt="overview of urdr" className="overview-img" />
</div>
<h2 className="help-subtitle">What is a row?</h2>
<p className="help-info">
Within the context of the urdr system, we refer to a row as to the
Expand Down Expand Up @@ -105,7 +101,7 @@ export const Help = () => {
have most recently logged time on, based on the week you are currently
looking at. Thus, recent rows change as you navigate across different
weeks or as you add new time entries. If desired, these type of rows
can be hidden after clicking on the eye button.
can be hidden after clicking on the red cross button to the far left.
</p>
<Row
topic={exampleIAP}
Expand All @@ -130,9 +126,10 @@ export const Help = () => {
different rows on the corresponding day. It is worth noting that the
sum also contains entries that have been hidden from list of recent
rows. In case the number displayed in a sum field doesn't seem to fit
to the time entries displayed above, you have probably hidden a row
that contained a time entry for that day. You can easily make it
visible again by using the <b>"Add new row"</b> feature.
to the time entries displayed above, you might have hidden a row that
contained a time entry for that day (see "Known limitations"). You can
easily make it visible again by using the <b>"Add new row"</b>{" "}
feature.
</p>
<QuickAdd addIssueActivity={() => {}}></QuickAdd>
<h2 className="help-subtitle">Adding or updating time entries</h2>
Expand Down Expand Up @@ -193,7 +190,33 @@ export const Help = () => {
className="weektravel-img"
/>
</div>
</div>
</main>
<h2 className="help-subtitle">Known limitations</h2>
<h3 className="help-h3">Double time entries</h3>
<p className="help-info">
In Redmine it's possible to create two time entries for the same
issue-activity pair per day. You might have done that in the past, and
for example had two different comments on the different time entries.
As urdr only has one cell per day and row (i.e. issue-activity pair),
you will only see one of these entries displayed in the interface. The
sum row and column however will contain both entries.{" "}
<b>
In this case, the number of hours displayed as sum will not match
what you actually see on the page.
</b>
</p>
<h3 className="help-h3">Hidden rows with time entries</h3>
<p className="help-info">
If you hide a row in urdr, it will be permanently hidden unless you
add it again manually. It stays hidden even when you time travel. If
you move to a week in which the hidden row has time entries, the row
will still not be displayed. The time entries however will be included
in the sum row in the bottom of the spreadsheet.{" "}
<b>
In this case, the number of hours displayed as sum will not match
what you actually see on the page.
</b>
</p>
</main>
</>
);
};
50 changes: 42 additions & 8 deletions frontend/src/pages/Report.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,8 @@ import {
getISOWeek,
getISOWeekYear,
setISOWeek,
isPast,
addDays,
} from "date-fns";
import { Row } from "../components/Row";
import { HeaderRow } from "../components/HeaderRow";
Expand All @@ -29,6 +31,8 @@ import { AuthContext } from "../components/AuthProvider";
import { useParams } from "react-router-dom";
import ClimbingBoxLoader from "react-spinners/ClimbingBoxLoader";
import LoadingOverlay from "react-loading-overlay-ts";
import warning from "../icons/exclamation-triangle.svg";
import check from "../icons/check.svg";

const beforeUnloadHandler = (event) => {
event.preventDefault();
Expand Down Expand Up @@ -66,7 +70,13 @@ export const Report = () => {
// If not, display a warning message and revert to current year/week.
const yearnum = Number(urlparams.year);
const weeknum = Number(urlparams.week);
if (!isNaN(yearnum) && !isNaN(weeknum) && weeknum >= 1 && weeknum <= 53) {
if (
!isNaN(yearnum) &&
yearnum > 0 &&
!isNaN(weeknum) &&
weeknum >= 1 &&
weeknum <= 53
) {
day = setISOWeek(new Date(yearnum, 7, 7), weeknum);
} else {
setToastList([
Expand Down Expand Up @@ -667,13 +677,37 @@ export const Report = () => {
);
})}
<div className="col-1 cell-container">
<input
aria-label="total of hours spent during the week"
type="text"
className="cell not-outline"
value={getTotalHoursWeek()}
readOnly
/>
<div className="comment-container">
<input
aria-label="total of hours spent during the week"
type="text"
className="cell not-outline"
value={getTotalHoursWeek()}
readOnly
/>
{/* Only show warnings for weeks that have passed.
It must be at least Saturday. */}
{isPast(addDays(currentWeekArray[4], 1)) && (
<img
src={getTotalHoursWeek() === 40 ? check : warning}
alt={
getTotalHoursWeek() === 40
? "check: 40 hours logged this week"
: "warning: less or more than 40 hours logged this week"
}
className={
getTotalHoursWeek() === 40
? "feedback-check"
: "feedback-warning"
}
title={
getTotalHoursWeek() === 40
? "40 hours logged"
: "less or more than 40 hours logged"
}
/>
)}
</div>
</div>
</div>
</section>
Expand Down

0 comments on commit 1b0cf56

Please sign in to comment.