diff --git a/frontend/src/components/HeaderUser.tsx b/frontend/src/components/HeaderUser.tsx index 59236670..f888c46c 100644 --- a/frontend/src/components/HeaderUser.tsx +++ b/frontend/src/components/HeaderUser.tsx @@ -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(false); - - const showSettingsClickHandle = () => { - setShowUserSettings(!showUserSettings); - }; - const logout = async (e) => { const logout = await logoutBackend(); if (logout) setUser(null); }; - const showSettings = () => { - return ( - - ); - }; - return ( -
- - {username} - {showUserSettings ? ( - - - - ) : ( - - - - )} +
+ ); }; diff --git a/frontend/src/icons/exclamation-triangle.svg b/frontend/src/icons/exclamation-triangle.svg new file mode 100644 index 00000000..3a6d0df4 --- /dev/null +++ b/frontend/src/icons/exclamation-triangle.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/frontend/src/icons/overview.png b/frontend/src/icons/overview.png deleted file mode 100644 index e67d7e8a..00000000 Binary files a/frontend/src/icons/overview.png and /dev/null differ diff --git a/frontend/src/icons/weektravel.png b/frontend/src/images/weektravel.png similarity index 100% rename from frontend/src/icons/weektravel.png rename to frontend/src/images/weektravel.png diff --git a/frontend/src/index.css b/frontend/src/index.css index aa537ee1..75f8dbba 100644 --- a/frontend/src/index.css +++ b/frontend/src/index.css @@ -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 */ @@ -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 { @@ -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 { @@ -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; } -} +} \ No newline at end of file diff --git a/frontend/src/pages/Help.tsx b/frontend/src/pages/Help.tsx index b3d14360..204e926b 100644 --- a/frontend/src/pages/Help.tsx +++ b/frontend/src/pages/Help.tsx @@ -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); @@ -47,12 +46,12 @@ export const Help = () => { updated_on: "2020-01-01", }; return ( -
-
+ <> +

How do I use the urdr service?

-
-
+ +

Introduction

The purpose of this website is to ease the process of logging time on @@ -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.

-
- overview of urdr -

What is a row?

Within the context of the urdr system, we refer to a row as to the @@ -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.

{ 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 "Add new row" 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 "Add new row"{" "} + feature.

{}}>

Adding or updating time entries

@@ -193,7 +190,33 @@ export const Help = () => { className="weektravel-img" />
- -
+

Known limitations

+

Double time entries

+

+ 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.{" "} + + In this case, the number of hours displayed as sum will not match + what you actually see on the page. + +

+

Hidden rows with time entries

+

+ 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.{" "} + + In this case, the number of hours displayed as sum will not match + what you actually see on the page. + +

+ + ); }; diff --git a/frontend/src/pages/Report.tsx b/frontend/src/pages/Report.tsx index 36c8c40e..2af934ff 100644 --- a/frontend/src/pages/Report.tsx +++ b/frontend/src/pages/Report.tsx @@ -5,6 +5,8 @@ import { getISOWeek, getISOWeekYear, setISOWeek, + isPast, + addDays, } from "date-fns"; import { Row } from "../components/Row"; import { HeaderRow } from "../components/HeaderRow"; @@ -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(); @@ -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([ @@ -667,13 +677,37 @@ export const Report = () => { ); })}
- +
+ + {/* Only show warnings for weeks that have passed. + It must be at least Saturday. */} + {isPast(addDays(currentWeekArray[4], 1)) && ( + { + )} +