Skip to content
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

Edit help page for hidden rows #499

Merged
merged 10 commits into from
May 31, 2022
Merged

Edit help page for hidden rows #499

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
5b6c7c2
add section for hidden rows
HenrikeW May 25, 2022
a583c78
adjust other sections on help page
HenrikeW May 25, 2022
04ea4ae
remove errors from components on help page
HenrikeW May 25, 2022
8e95d39
update limitations section
HenrikeW May 30, 2022
4eac32b
use eyes as hide icons
HenrikeW May 30, 2022
3e85c6d
remove placeholder in quickadd
HenrikeW May 30, 2022
4727ef9
try to please the JS linter
HenrikeW May 30, 2022
f1b3865
adjust help text to new symbols
HenrikeW May 30, 2022
1ef5eb4
fix misplaced whitespace
HenrikeW May 30, 2022
5fe2708
move title attribute from img to button
HenrikeW May 30, 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
91 changes: 44 additions & 47 deletions frontend/src/components/QuickAdd.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -110,56 +110,53 @@ export const QuickAdd = ({
<div>
<h2> Add a new row</h2>
<div className="row">
<label htmlFor="input-issue"
className="col-3 input-label hidden">
Issue e.g. 3499
</label>
<label
htmlFor="select-activity"
className="col-3 select-label hidden"
>Select activity
</label>
<label htmlFor="input-issue" className="col-3 input-label hidden">
Issue e.g. 3499
</label>
<label htmlFor="select-activity" className="col-3 select-label hidden">
Select activity
</label>
</div>
<div className="row">
<input
id="input-issue"
className={getSearchClasses()}
type="number"
min={0}
onChange={(e) => {
setSearch(e.target.value);
setIssue(null);
}}
placeholder="e.g. 3499"
title={(issue && issue.subject) || ""}
/>
<img
className={search === "" ? "validation-icon hiden" : "validation-icon"}
src={getValidationIconSrc()}
alt="Validity"
aria-label="Indicator for validity of issue number - x for not valid, check for valid."
/>
<select
className="col-3 footer-field"
name="activity"
id="select-activity"
onChange={handleSetActivity}
style={{ width: "50%" }}
>
{activities &&
activities.map((activity) => {
return (
<option value={activity.id} key={activity.id}>
{activity.name}
</option>
);
})}
</select>
<button className="col-3 basic-button plus-button" onClick={handleAdd}>
<img src={plus} alt="Add line" />
</button>
<input
id="input-issue"
className={getSearchClasses()}
type="number"
min={0}
onChange={(e) => {
setSearch(e.target.value);
setIssue(null);
}}
title={(issue && issue.subject) || ""}
/>
<img
className={
search === "" ? "validation-icon hiden" : "validation-icon"
}
src={getValidationIconSrc()}
alt="Validity"
aria-label="Indicator for validity of issue number - x for not valid, check for valid."
/>
<select
className="col-3 footer-field"
name="activity"
id="select-activity"
onChange={handleSetActivity}
style={{ width: "50%" }}
>
{activities &&
activities.map((activity) => {
return (
<option value={activity.id} key={activity.id}>
{activity.name}
</option>
);
})}
</select>
<button className="col-3 basic-button plus-button" onClick={handleAdd}>
<img src={plus} alt="Add line" />
</button>
</div>

</div>
);
};
14 changes: 7 additions & 7 deletions frontend/src/components/Row.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,8 @@ import { Cell } from "./Cell";
import fillStar from "../icons/star-fill.svg";
import star from "../icons/star.svg";
import grip from "../icons/grip-vertical.svg";
import x from "../icons/x.svg";
import doubleUp from "../icons/chevron-double-up.svg";
import eyeSlash from "../icons/eye-slash.svg";
import eye from "../icons/eye.svg";
import { dateFormat } from "../utils";
import { SNOWPACK_PUBLIC_REDMINE_URL } from "../utils";

Expand Down Expand Up @@ -56,13 +56,13 @@ export const Row = ({
type="button"
className="star-button"
onClick={() => onToggleHide(topic)}
title={"Stop hiding"}
>
<img
src={doubleUp}
className="unhide-icon"
src={eye}
className="eye-icon"
role="button"
alt={"Stop hiding"}
title={"Stop hiding"}
/>
</button>
) : (
Expand All @@ -73,8 +73,8 @@ export const Row = ({
title={"Hide this row"}
>
<img
src={x}
className="hide-icon"
src={eyeSlash}
className="eye-icon"
role="button"
alt={"Hide this row"}
/>
Expand Down
4 changes: 0 additions & 4 deletions frontend/src/icons/chevron-double-up.svg
View file
Open in desktop

This file was deleted.

4 changes: 4 additions & 0 deletions frontend/src/icons/eye.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion frontend/src/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -398,7 +398,7 @@ Other button classes are defined further down together with other classes for th
margin-top: 0.5rem;
}

.unhide-icon {
.eye-icon {
width: 1.5rem;
margin-top: 0.2rem;
}
Expand Down
69 changes: 49 additions & 20 deletions frontend/src/pages/Help.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,8 +55,7 @@ export const Help = () => {
<h2 className="help-subtitle">Introduction</h2>
<p className="help-info">
The purpose of this website is to ease the process of logging time on
the
<a href="https://projects.nbis.se"> NBIS Redmine instance</a>. The
the <a href="https://projects.nbis.se">NBIS Redmine instance</a>. The
usual procedure for logging time with Redmine involves selecting an
issue and an activity for reporting your time. In urdr, issues are
strictly linked to valid activities, thus making it simpler to do time
Expand Down Expand Up @@ -86,12 +85,13 @@ export const Help = () => {
drag–and–drop handle icon at the left-most position of the row.
</p>
<Row
key={1}
topic={exampleIAP}
days={[new Date()]}
rowHours={[1]}
rowEntries={[exampleEntry]}
getRowSum={() => 1}
onHide={() => {}}
onToggleHide={() => {}}
isFav={true}
onToggleFav={() => {}}
onCellUpdate={() => {}}
Expand All @@ -101,37 +101,60 @@ 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 red cross button to the far left.
can be hidden after clicking on the hide button to the far left.
</p>
<Row
key={2}
topic={exampleIAP}
days={[new Date()]}
rowHours={[1]}
rowHours={[2]}
rowEntries={[exampleEntry]}
getRowSum={() => 1}
onHide={() => {}}
getRowSum={() => 2}
onToggleHide={() => {}}
isFav={false}
onToggleFav={() => {}}
onCellUpdate={() => {}}
></Row>
<h2 className="help-subtitle">Hidden rows</h2>
<p className="help-info">
Below all rows that are visible by default you find a button saying
"Show hidden rows". Clicking the button will open a section below that
lists all rows you have ever hidden. You can make a row a favorite by
clicking on the star, or move it up to the list of recent rows by
clicking on the eye symbol. You can also move a row back from the list
of hidden rows to the list of recent rows by using the "Adding new
rows" feature (see below). You can collapse the whole section again by
clicking on the button again.
</p>
<Row
key={3}
topic={exampleIAP}
days={[new Date()]}
rowHours={[3]}
rowEntries={[exampleEntry]}
getRowSum={() => 3}
onToggleHide={() => {}}
isHidden={true}
onToggleFav={() => {}}
onCellUpdate={() => {}}
></Row>
<h2 className="help-subtitle">Adding new rows</h2>
<p className="help-info">
In order to add a new row, it is necessary to first enter a valid
issue number and then select an activity, which will be linked to the
issue. After clicking on the plus button, a new row will be appended
to the bottom of the list of recent rows.
</p>
<QuickAdd addIssueActivity={() => {}}></QuickAdd>
<h2 className="help-subtitle">The sum row</h2>
<p className="help-info">
A cell in the sum row shows the sum of all time entries logged on
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 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.
sum also contains entries that have been hidden from the list of
recent rows. In case the number displayed in a sum field doesn't seem
to fit to the time entries displayed above, check the section with
hidden rows.
</p>
<QuickAdd addIssueActivity={() => {}}></QuickAdd>
<h2 className="help-subtitle">Adding or updating time entries</h2>
<p className="help-info">
One may log time by simply clicking on the cell corresponding to the
Expand All @@ -153,6 +176,8 @@ export const Help = () => {
comments={""}
entryId={1}
onCellUpdate={() => {}}
onFocusRow={() => {}}
onBlurRow={() => {}}
/>
</div>
<p className="help-info">
Expand All @@ -167,6 +192,8 @@ export const Help = () => {
comments={"Test comment"}
entryId={1}
onCellUpdate={() => {}}
onFocusRow={() => {}}
onBlurRow={() => {}}
/>
</div>
<h2 className="help-subtitle">Time travelling</h2>
Expand Down Expand Up @@ -206,14 +233,16 @@ export const Help = () => {
</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.{" "}
If you hide a row in urdr, 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 in the rows shown by default. You need
to expand the list of hidden rows to see it. However, the time entries
in hidden rows will be included in the sum row in the bottom of the
spreadsheet regardless if the hidden rows list is expanded or not.{" "}
<b>
In this case, the number of hours displayed as sum will not match
what you actually see on the page.
what you actually see on the page, unless you expand the list of
hidden rows.
</b>
</p>
</main>
Expand Down