Skip to content
This repository was archived by the owner on Mar 13, 2025. It is now read-only.

Commit 714c26f

Browse files
maxceemmaxceem
authored
Merge pull request #59 from MadOPcode/dev
Fixes and improvements
2 parents 6de41de + b2cc7a9 commit 714c26f

File tree

31 files changed

+464
-88
lines changed

31 files changed

+464
-88
lines changed

‎src/assets/images/icon-checkmark-circled.svg

+5
Loading

‎src/components/Content/styles.module.scss

+2-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,8 @@
44
padding: 0 10px;
55

66
@include desktop {
7-
flex: 1 1 auto;
7+
flex: 1 1 0;
88
padding: 0 35px;
9+
min-width: 0;
910
}
1011
}

‎src/components/Icons/CheckmarkCircled/index.jsx

+61
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
import React, { useEffect, useState } from "react";
2+
import PT from "prop-types";
3+
import cn from "classnames";
4+
import Icon from "../../../assets/images/icon-checkmark-circled.svg";
5+
import styles from "./styles.module.scss";
6+
7+
/**
8+
* Displays an animated checkmark inside circle. After the specified timeout
9+
* the checkmark is faded out and after fade transition ends the onTimeout
10+
* is called.
11+
*
12+
* @param {Object} props component properties
13+
* @param {string} [props.className] class name to be added to root element
14+
* @param {() => void} props.onTimeout
15+
* @param {number} props.timeout timeout milliseconds
16+
* @returns {JSX.Element}
17+
*/
18+
const CheckmarkCircled = ({ className, onTimeout, timeout = 2000 }) => {
19+
const [isAnimated, setIsAnimated] = useState(false);
20+
const [isTimedOut, setIsTimedOut] = useState(false);
21+
22+
useEffect(() => {
23+
setIsAnimated(true);
24+
}, []);
25+
26+
useEffect(() => {
27+
setIsTimedOut(false);
28+
let timeoutId = setTimeout(() => {
29+
timeoutId = 0;
30+
setIsTimedOut(true);
31+
}, Math.max(timeout, /* total CSS animation duration */ 1200));
32+
return () => {
33+
if (timeoutId) {
34+
clearTimeout(timeoutId);
35+
}
36+
};
37+
}, [timeout]);
38+
39+
return (
40+
<span
41+
className={cn(
42+
styles.container,
43+
{ [styles.fadeOut]: isTimedOut },
44+
className
45+
)}
46+
onTransitionEnd={isTimedOut ? onTimeout : null}
47+
>
48+
<Icon
49+
className={cn(styles.checkmark, { [styles.animated]: isAnimated })}
50+
/>
51+
</span>
52+
);
53+
};
54+
55+
CheckmarkCircled.propTypes = {
56+
className: PT.string,
57+
onTimeout: PT.func.isRequired,
58+
timeout: PT.number,
59+
};
60+
61+
export default CheckmarkCircled;

‎src/components/Icons/CheckmarkCircled/styles.module.scss

+79
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
@import "styles/variables";
2+
3+
.container {
4+
display: inline-block;
5+
width: 30px;
6+
height: 30px;
7+
opacity: 1;
8+
transition: opacity 0.2s ease;
9+
}
10+
11+
.checkmark {
12+
display: block;
13+
width: auto;
14+
height: 100%;
15+
border-radius: 999px;
16+
stroke-width: 2;
17+
stroke: $primary-color;
18+
stroke-miterlimit: 10;
19+
box-shadow: inset 0px 0px 0px $primary-color;
20+
animation-play-state: paused;
21+
animation: /*checkmark-circled-fill 0.4s ease-in-out 0.4s forwards,*/ checkmark-circled-scale
22+
0.3s ease-in-out 0.9s both;
23+
24+
:global(.checkmark__circle) {
25+
stroke-dasharray: 166;
26+
stroke-dashoffset: 166;
27+
stroke-width: 2;
28+
stroke-miterlimit: 10;
29+
stroke: $primary-color;
30+
fill: rgba(255, 255, 255, 0);
31+
animation-play-state: paused;
32+
animation: checkmark-circled-stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1)
33+
forwards;
34+
}
35+
36+
:global(.checkmark__check) {
37+
transform-origin: 50% 50%;
38+
stroke-dasharray: 48;
39+
stroke-dashoffset: 48;
40+
animation-play-state: paused;
41+
animation: checkmark-circled-stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s
42+
forwards;
43+
}
44+
}
45+
46+
.animated {
47+
animation-play-state: running;
48+
49+
:global(.checkmark__circle),
50+
:global(.checkmark__check) {
51+
animation-play-state: running;
52+
}
53+
}
54+
55+
.fadeOut {
56+
opacity: 0;
57+
}
58+
59+
@keyframes checkmark-circled-stroke {
60+
100% {
61+
stroke-dashoffset: 0;
62+
}
63+
}
64+
65+
@keyframes checkmark-circled-scale {
66+
0%,
67+
100% {
68+
transform: none;
69+
}
70+
50% {
71+
transform: scale3d(1.1, 1.1, 1);
72+
}
73+
}
74+
75+
@keyframes checkmark-circled-fill {
76+
100% {
77+
box-shadow: inset 0px 0px 0px 10px $primary-color;
78+
}
79+
}

‎src/components/Popup/index.jsx

+6-2
Original file line numberDiff line numberDiff line change
@@ -35,12 +35,16 @@ const Popup = ({
3535
return (
3636
<div
3737
ref={setPopperElement}
38-
className={cn(compStyles.container, styles.container, className)}
38+
className={cn(compStyles.container, className)}
3939
style={styles.popper}
4040
{...attributes.popper}
4141
>
4242
{children}
43-
<div className="popup-arrow" ref={setArrowElement} style={styles.arrow} />
43+
<div
44+
className={compStyles.popupArrow}
45+
ref={setArrowElement}
46+
style={styles.arrow}
47+
/>
4448
</div>
4549
);
4650
};

‎src/components/Popup/styles.module.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
background: #fff;
88
box-shadow: $popover-box-shadow;
99

10-
:global(.popup-arrow) {
10+
.popupArrow {
1111
display: none;
1212
}
1313
}

‎src/components/SelectField/styles.module.scss

+4-2
Original file line numberDiff line numberDiff line change
@@ -104,14 +104,16 @@
104104

105105
.medium {
106106
:global(.custom__value-container) {
107-
margin-top: 4px;
107+
margin-top: 2px;
108+
margin-bottom: 2px;
108109
padding: 6px 15px;
109110
}
110111
}
111112

112113
.small {
113114
:global(.custom__value-container) {
114-
margin-top: 2px;
115+
margin-top: 1px;
116+
margin-bottom: 1px;
115117
padding: 2px 7px 2px 13px;
116118
}
117119

‎src/decls/svg.d.ts

+4-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
1-
declare module '*.svg' {
2-
const value: string;
1+
declare module "*.svg" {
2+
const value: import("react").FunctionComponent<
3+
React.SVGAttributes<SVGElement>
4+
>;
35
export default value;
46
}

‎src/routes/WorkPeriods/components/PaymentErrorDetails/styles.module.scss

-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@
22

33
.container {
44
display: block;
5-
max-width: 480px;
65
text-align: left;
76
}
87

‎src/routes/WorkPeriods/components/PeriodDetails/index.jsx

+4-4
Original file line numberDiff line numberDiff line change
@@ -104,12 +104,12 @@ const PeriodDetails = ({ className, details, isDisabled, isFailed }) => {
104104
</div>
105105
</div>
106106
</div>
107-
<div className={styles.billingAccountSection}>
107+
<div className={styles.billingAccountsSection}>
108108
<div className={styles.sectionLabel}>Billing Account</div>
109109
<SelectField
110-
className={
111-
billingAccountsError ? styles.billingAccountsError : ""
112-
}
110+
className={cn(styles.billingAccountsSelect, {
111+
[styles.billingAccountsError]: billingAccountsError,
112+
})}
113113
id={`rb_bil_acc_${periodId}`}
114114
isDisabled={billingAccountsIsDisabled}
115115
size="small"

‎src/routes/WorkPeriods/components/PeriodDetails/styles.module.scss

+5-1
Original file line numberDiff line numberDiff line change
@@ -69,10 +69,14 @@
6969
color: #e90c5a;
7070
}
7171

72-
.billingAccountSection {
72+
.billingAccountsSection {
7373
margin-top: 13px;
7474
}
7575

76+
.billingAccountsSelect {
77+
min-width: 368px;
78+
}
79+
7680
.billingAccountsError {
7781
color: #e90c5a;
7882
}

‎src/routes/WorkPeriods/components/PeriodItem/index.jsx

+13-8
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ import PT from "prop-types";
44
import cn from "classnames";
55
import debounce from "lodash/debounce";
66
import Checkbox from "components/Checkbox";
7-
import IntegerField from "components/IntegerField";
87
import ProjectName from "components/ProjectName";
98
import PaymentError from "../PaymentError";
109
import PaymentStatus from "../PaymentStatus";
@@ -13,6 +12,7 @@ import PeriodDetails from "../PeriodDetails";
1312
import { PAYMENT_STATUS } from "constants/workPeriods";
1413
import {
1514
setWorkPeriodWorkingDays,
15+
toggleWorkingDaysUpdated,
1616
toggleWorkPeriod,
1717
} from "store/actions/workPeriods";
1818
import {
@@ -23,6 +23,7 @@ import { useUpdateEffect } from "utils/hooks";
2323
import { formatUserHandleLink, formatWeeklyRate } from "utils/formatters";
2424
import { stopPropagation } from "utils/misc";
2525
import styles from "./styles.module.scss";
26+
import PeriodWorkingDays from "../PeriodWorkingDays";
2627

2728
/**
2829
* Displays the working period data row to be used in PeriodList component.
@@ -57,6 +58,10 @@ const PeriodItem = ({
5758
dispatch(toggleWorkPeriodDetails(item));
5859
}, [dispatch, item]);
5960

61+
const onWorkingDaysUpdateHintTimeout = useCallback(() => {
62+
dispatch(toggleWorkingDaysUpdated(item.id, false));
63+
}, [dispatch, item.id]);
64+
6065
const onWorkingDaysChange = useCallback(
6166
(daysWorked) => {
6267
dispatch(setWorkPeriodWorkingDays(item.id, daysWorked));
@@ -141,19 +146,19 @@ const PeriodItem = ({
141146
<PaymentStatus status={data.paymentStatus} />
142147
</td>
143148
<td className={styles.daysWorked}>
144-
<IntegerField
145-
className={styles.daysWorkedControl}
149+
<PeriodWorkingDays
150+
updateHintTimeout={2000}
151+
controlName={`wp_wrk_days_${item.id}`}
152+
data={data}
146153
isDisabled={isDisabled}
147-
name={`wp_wrk_days_${item.id}`}
148-
onChange={onWorkingDaysChange}
149-
maxValue={5}
150-
minValue={data.daysPaid}
151-
value={data.daysWorked}
154+
onWorkingDaysChange={onWorkingDaysChange}
155+
onWorkingDaysUpdateHintTimeout={onWorkingDaysUpdateHintTimeout}
152156
/>
153157
</td>
154158
</tr>
155159
{details && (
156160
<PeriodDetails
161+
className={styles.periodDetails}
157162
details={details}
158163
isDisabled={isDisabled}
159164
isFailed={isFailed}

‎src/routes/WorkPeriods/components/PeriodItem/styles.module.scss

+20-8
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
@import "styles/mixins";
22
@import "styles/variables";
33

4-
tr.container {
4+
.container {
55
> td {
6-
padding-left: 17px;
7-
padding-right: 17px;
6+
padding-left: 15px;
7+
padding-right: 15px;
88
background: #fff;
99
}
1010

@@ -40,8 +40,22 @@ tr.container {
4040
}
4141
}
4242

43+
.periodDetails {
44+
+ .container.hasDetails {
45+
> td {
46+
&.toggle {
47+
padding-top: 12px;
48+
}
49+
50+
&.daysWorked {
51+
padding-top: 5px;
52+
}
53+
}
54+
}
55+
}
56+
4357
td.toggle {
44-
padding: 12px 20px 12px 15px;
58+
padding: 12px 18px 12px 15px;
4559
line-height: 15px;
4660
}
4761

@@ -67,6 +81,8 @@ td.teamName {
6781

6882
td.startDate,
6983
td.endDate {
84+
padding-left: 10px;
85+
padding-right: 10px;
7086
white-space: nowrap;
7187
}
7288

@@ -90,7 +106,3 @@ td.paymentTotal {
90106
td.daysWorked {
91107
padding: 5px 10px;
92108
}
93-
94-
.daysWorkedControl {
95-
width: 100px;
96-
}

‎src/routes/WorkPeriods/components/PeriodList/index.jsx

+7-1
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,13 @@ const PeriodList = ({ className }) => {
3232

3333
return (
3434
<ProjectNameContextProvider>
35-
<div className={cn(styles.container, className)}>
35+
<div
36+
className={cn(
37+
styles.container,
38+
{ [styles.hasItems]: periods.length },
39+
className
40+
)}
41+
>
3642
<table className={styles.table}>
3743
<thead>
3844
<PeriodListHead />

0 commit comments

Comments
 (0)