franpcode/Pomodoro-Timer-with-Clockify-integration
1
0
Fork 0
mirror of https://github.com/FranP-code/Pomodoro-Timer-with-Clockify-integration.git synced 2025-10-12 23:52:30 +00:00
Code Issues 1 Packages Projects Releases Wiki Activity

bugfix

Browse Source
This commit is contained in:
Francisco Pessano
2022-05-24 12:19:50 -03:00
parent bf14843c68
commit d0e02c0e05
8 changed files with 232 additions and 235 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/Loading/Loading.jsx
View File

@@ -1,10 +1,10 @@
import React from 'react' import React from 'react'
import loadingImage from './img/loading-light-theme.png' import loadingImage from './img/loading-light-theme.png'
const Loading = () => { const Loading = ({width, height}) => {
return ( return (
<> <>
<div className="loading-container"> <div className="loading-container" style={{width: width, height: height}}>
<img src={loadingImage} alt="loading"/> <img src={loadingImage} alt="loading"/>
</div> </div>
</> </>

4
src/components/Loading/loading-styles.css
View File

@@ -1,5 +1,5 @@
.loading-container { .loading-container {
width: 100%; width: auto;
height: 100%; height: unset;
background-color: #fff; background-color: #fff;
}/*# sourceMappingURL=loading-styles.css.map */ }/*# sourceMappingURL=loading-styles.css.map */

2
src/components/Loading/loading-styles.css.map
View File

@@ -1 +1 @@
{"version":3,"sources":["loading-styles.scss","loading-styles.css"],"names":[],"mappings":"AAAA;EACI,WAAA;EACA,YAAA;EAEA,sBAAA;ACAJ","file":"loading-styles.css"} {"version":3,"sources":["loading-styles.scss","loading-styles.css"],"names":[],"mappings":"AAAA;EACI,WAAA;EACA,aAAA;EAEA,sBAAA;ACAJ","file":"loading-styles.css"}

4
src/components/Loading/loading-styles.scss
View File

@@ -1,6 +1,6 @@
.loading-container { .loading-container {
width: 100%; width: auto;
height: 100%; height: unset;
background-color: #fff; background-color: #fff;
} }

207
src/pages/Main/ClockifyTaskForm/ClockifyTaskForm.jsx
View File

@@ -54,15 +54,15 @@ const ClockifyTaskForm = ({timerOn, setTimerOn, signedIn, apiKey, setApiKey, tas
if (user && user.uid) { if (user && user.uid) {
await getApiKey(user.uid) await getApiKey(user.uid)
setLoading(false)
} else { } else {
return (<></>) return(<></>)
} }
setLoading(false)
}) })
} else { } else {
setLoading(false)
} }
}, [signedIn]) }, [signedIn])
@@ -178,118 +178,115 @@ const ClockifyTaskForm = ({timerOn, setTimerOn, signedIn, apiKey, setApiKey, tas
} }
return ( return (
<> <div className='clockify-tasks-display-container'>
{ {
loading ? loading &&
<Loading /> <Loading width={"20vw"} height={"initial"}/>
: }
<div className={darkMode ? 'clockify-task-form-container dark-mode-container' : 'clockify-tasks-display-container'}> {
{ clockifyData.workspaces ?
clockifyData.workspaces ? <div className={`clockify-task-form ${(timerOn || !clockifyData.workspaces) && "disabled"}`}>
<div className={`clockify-task-form ${(timerOn || !clockifyData.workspaces) && "disabled"}`}>
<select
<select onChange={(e) => {
onChange={(e) => { changeClockifyData({workspaceID: e.target.value})
changeClockifyData({workspaceID: e.target.value}) getProjects(e.target.value)
getProjects(e.target.value) }}
}} className='workspace-selector'
className='workspace-selector' >
> <option value="0">Select a Workspace</option>
<option value="0">Select a Workspace</option> {
{ clockifyData.workspaces &&
clockifyData.workspaces && clockifyData.workspaces.map((workspace) => {
clockifyData.workspaces.map((workspace) => { return <option value={workspace.id} key={workspace.id}>{workspace.name}</option>
return <option value={workspace.id} key={workspace.id}>{workspace.name}</option> })
}) }
} </select>
</select>
<select <select
onChange={(e) => { onChange={(e) => {
changeClockifyData({projectID: e.target.value}) changeClockifyData({projectID: e.target.value})
getTasks(e.target.value) getTasks(e.target.value)
}} }}
className={`project-selector ${(!clockifyData.workspaceID) && 'disabled'}`} className={`project-selector ${(!clockifyData.workspaceID) && 'disabled'}`}
> >
<option value="0">Select a Project</option> <option value="0">Select a Project</option>
{ {
clockifyData.projects && clockifyData.projects &&
clockifyData.projects.map((project) => ( clockifyData.projects.map((project) => (
!project.archived ? !project.archived ?
<option value={project.id} key={project.id} style={{color: project.color}}>{project.name}</option> <option value={project.id} key={project.id} style={{color: project.color}}>{project.name}</option>
: null : null
)) ))
} }
</select> </select>
<select <select
onChange={(e) => changeClockifyData({taskID: e.target.value})} onChange={(e) => changeClockifyData({taskID: e.target.value})}
className={`project-selector ${(!clockifyData.projectID || (clockifyData.tasks && clockifyData.tasks.length === 0)) && 'disabled'}`} className={`project-selector ${(!clockifyData.projectID || (clockifyData.tasks && clockifyData.tasks.length === 0)) && 'disabled'}`}
> >
<option value="0">Select a Task</option> <option value="0">Select a Task</option>
{ {
clockifyData.tasks && clockifyData.tasks &&
clockifyData.tasks.map((task) => ( clockifyData.tasks.map((task) => (
task.status !== "DONE" && task.status !== "DONE" &&
<option value={task.id} key={task.id} >{task.name}</option> <option value={task.id} key={task.id} >{task.name}</option>
)) ))
} }
</select> </select>
<button <button
className={`add-task ${!clockifyData.projectID && 'disabled'}`} className={`add-task ${!clockifyData.projectID && 'disabled'}`}
onClick={() => { onClick={() => {
if (addingNewTask === "loading") { if (addingNewTask === "loading") {
return return
}
if (!addingNewTask) {
setAddingNewTask(true)
return
} else {
addNewTask()
}
}}
>
{
addingNewTask === false ?
<FontAwesomeIcon icon={faPlus} />
: addingNewTask === true ?
<FontAwesomeIcon icon={faCheck} />
: addingNewTask === "loading" &&
<Ring size={20} color="#fff" />
}
</button>
<>
{
addingNewTask &&
<input
type="text"
ref={newTask}
placeholder="Set new task name"
/>
} }
</>
if (!addingNewTask) {
setAddingNewTask(true)
return
} else {
addNewTask()
}
}}
>
{
addingNewTask === false ?
<FontAwesomeIcon icon={faPlus} />
: addingNewTask === true ?
<FontAwesomeIcon icon={faCheck} />
: addingNewTask === "loading" &&
<Ring size={20} color="#fff" />
}
</button>
<>
{
addingNewTask &&
<input <input
type="text" type="text"
ref={descriptionInput} ref={newTask}
onChange={(e) => changeClockifyData({description: e.target.value})} placeholder="Set new task name"
placeholder="Add task description"
className={!clockifyData.projectID && 'disabled'}
onKeyPress={event => {
if (event.key === 'Enter') {
setTimerOn(true)
}
}}
/> />
</div> }
: null </>
}
</div> <input
type="text"
ref={descriptionInput}
onChange={(e) => changeClockifyData({description: e.target.value})}
placeholder="Add task description"
className={!clockifyData.projectID && 'disabled'}
onKeyPress={event => {
if (event.key === 'Enter') {
setTimerOn(true)
}
}}
/>
</div>
: null
} }
</> </div>
) )
} }

37
src/pages/Main/ClockifyTaskForm/clockify-task-form.css
View File

@@ -1,28 +1,28 @@
.clockify-task-form { .clockify-tasks-display-container {
width: 20vw; width: 20vw;
position: absolute; position: absolute;
top: 60vh; top: 60vh;
left: 2.5vw; left: 2.5vw;
} }
.clockify-task-form input::-moz-placeholder { .clockify-tasks-display-container .clockify-task-form input::-moz-placeholder {
font-family: "Arial", sans-serif; font-family: "Arial", sans-serif;
} }
.clockify-task-form input:-ms-input-placeholder { .clockify-tasks-display-container .clockify-task-form input:-ms-input-placeholder {
font-family: "Arial", sans-serif; font-family: "Arial", sans-serif;
} }
.clockify-task-form select, .clockify-task-form select option, .clockify-task-form input, .clockify-task-form input::placeholder { .clockify-tasks-display-container .clockify-task-form select, .clockify-tasks-display-container .clockify-task-form select option, .clockify-tasks-display-container .clockify-task-form input, .clockify-tasks-display-container .clockify-task-form input::placeholder {
font-family: "Arial", sans-serif; font-family: "Arial", sans-serif;
} }
.clockify-task-form.loading-container { .clockify-tasks-display-container .clockify-task-form.loading-container {
width: 20vw; width: 20vw;
height: auto; height: auto;
background: none; background: none;
} }
.clockify-task-form .workspace-selector, .clockify-task-form .project-selector { .clockify-tasks-display-container .clockify-task-form .workspace-selector, .clockify-tasks-display-container .clockify-task-form .project-selector {
width: 15vw; width: 15vw;
height: 5vh; height: 5vh;
} }
.clockify-task-form .add-task { .clockify-tasks-display-container .clockify-task-form .add-task {
width: 3.5vh; width: 3.5vh;
height: 3.5vh; height: 3.5vh;
margin-left: 0.5vh; margin-left: 0.5vh;
@@ -32,18 +32,18 @@
color: #fff; color: #fff;
cursor: pointer; cursor: pointer;
} }
.clockify-task-form .add-task:hover { .clockify-tasks-display-container .clockify-task-form .add-task:hover {
filter: brightness(90%); filter: brightness(90%);
} }
.clockify-task-form .add-task:active { .clockify-tasks-display-container .clockify-task-form .add-task:active {
filter: brightness(110%); filter: brightness(110%);
} }
.clockify-task-form select { .clockify-tasks-display-container .clockify-task-form select {
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
.clockify-task-form input[type=text] { .clockify-tasks-display-container .clockify-task-form input[type=text] {
width: 15vw; width: 15vw;
height: 3vw; height: 3vw;
font-size: 12pt; font-size: 12pt;
@@ -51,7 +51,7 @@
padding: 1px 2px; padding: 1px 2px;
box-sizing: border-box; box-sizing: border-box;
} }
.clockify-task-form.disabled, .clockify-task-form .disabled { .clockify-tasks-display-container .clockify-task-form.disabled, .clockify-tasks-display-container .clockify-task-form .disabled {
-webkit-user-select: none; -webkit-user-select: none;
-moz-user-select: none; -moz-user-select: none;
-ms-user-select: none; -ms-user-select: none;
@@ -60,37 +60,36 @@
pointer-events: none; pointer-events: none;
opacity: 0.3; opacity: 0.3;
} }
@media (max-width: 991.98px) { @media (max-width: 991.98px) {
.clockify-tasks-display { .clockify-tasks-display-container .clockify-tasks-display {
position: initial; position: initial;
width: auto; width: auto;
display: flex; display: flex;
justify-content: space-around; justify-content: space-around;
padding: 3vh 5vw; padding: 3vh 5vw;
} }
.clockify-tasks-display.loading-container { .clockify-tasks-display-container .clockify-tasks-display.loading-container {
width: 90%; width: 90%;
height: auto; height: auto;
} }
.clockify-tasks-display .workspace-selector, .clockify-tasks-display .project-selector, .clockify-tasks-display input[type=text] { .clockify-tasks-display-container .clockify-tasks-display .workspace-selector, .clockify-tasks-display-container .clockify-tasks-display .project-selector, .clockify-tasks-display-container .clockify-tasks-display input[type=text] {
width: 20vw; width: 20vw;
height: 5vw; height: 5vw;
} }
} }
@media (max-width: 576px) { @media (max-width: 576px) {
.clockify-tasks-display { .clockify-tasks-display-container .clockify-tasks-display {
position: initial; position: initial;
width: auto; width: auto;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
} }
.clockify-tasks-display.loading-container { .clockify-tasks-display-container .clockify-tasks-display.loading-container {
width: 90%; width: 90%;
height: auto; height: auto;
} }
.clockify-tasks-display .workspace-selector, .clockify-tasks-display .project-selector, .clockify-tasks-display input[type=text] { .clockify-tasks-display-container .clockify-tasks-display .workspace-selector, .clockify-tasks-display-container .clockify-tasks-display .project-selector, .clockify-tasks-display-container .clockify-tasks-display input[type=text] {
width: 70%; width: 70%;
height: 4vh; height: 4vh;
margin-top: 1vh; margin-top: 1vh;

2
src/pages/Main/ClockifyTaskForm/clockify-task-form.css.map
View File

@@ -1 +1 @@
{"version":3,"sources":["clockify-task-form.scss","clockify-task-form.css"],"names":[],"mappings":"AAAA;EAEI,WAAA;EACA,kBAAA;EAEA,SAAA;EACA,WAAA;ACDJ;ADGI;EACI,gCAAA;ACDR;ADAI;EACI,gCAAA;ACDR;ADAI;EACI,gCAAA;ACDR;ADII;EACI,WAAA;EACA,YAAA;EACA,gBAAA;ACFR;ADKI;EACI,WAAA;EACA,WAAA;ACHR;ADMI;EACI,YAAA;EACA,aAAA;EAEA,kBAAA;EAEA,eAAA;EAEA,wCAAA;EACA,mBAAA;EAEA,WAAA;EAEA,eAAA;ACTR;ADWQ;EACI,uBAAA;ACTZ;ADYQ;EACI,wBAAA;ACVZ;ADcI;EACI,gBAAA;EACA,mBAAA;EACA,uBAAA;ACZR;ADeI;EACI,WAAA;EACA,WAAA;EAEA,eAAA;EAEA,aAAA;EACA,gBAAA;EAEA,sBAAA;AChBR;ADmBI;EACI,yBAAA;KAAA,sBAAA;MAAA,qBAAA;UAAA,iBAAA;EACA,eAAA;EACA,oBAAA;EACA,YAAA;ACjBR;;ADqBA;EAEI;IACI,iBAAA;IACA,WAAA;IAEA,aAAA;IACA,6BAAA;IAEA,gBAAA;ECrBN;EDuBM;IACI,UAAA;IACA,YAAA;ECrBV;EDwBM;IACI,WAAA;IACA,WAAA;ECtBV;AACF;AD2BA;EAEI;IACI,iBAAA;IACA,WAAA;IAEA,aAAA;IACA,sBAAA;IACA,mBAAA;EC3BN;ED6BM;IACI,UAAA;IACA,YAAA;EC3BV;ED8BM;IACI,UAAA;IACA,WAAA;IACA,eAAA;EC5BV;AACF","file":"clockify-task-form.css"} {"version":3,"sources":["clockify-task-form.scss","clockify-task-form.css"],"names":[],"mappings":"AAAA;EACI,WAAA;EACA,kBAAA;EAEA,SAAA;EACA,WAAA;ACAJ;ADGQ;EACI,gCAAA;ACDZ;ADAQ;EACI,gCAAA;ACDZ;ADAQ;EACI,gCAAA;ACDZ;ADIQ;EACI,WAAA;EACA,YAAA;EACA,gBAAA;ACFZ;ADKQ;EACI,WAAA;EACA,WAAA;ACHZ;ADMQ;EACI,YAAA;EACA,aAAA;EAEA,kBAAA;EAEA,eAAA;EAEA,wCAAA;EACA,mBAAA;EAEA,WAAA;EAEA,eAAA;ACTZ;ADWY;EACI,uBAAA;ACThB;ADYY;EACI,wBAAA;ACVhB;ADcQ;EACI,gBAAA;EACA,mBAAA;EACA,uBAAA;ACZZ;ADeQ;EACI,WAAA;EACA,WAAA;EAEA,eAAA;EAEA,aAAA;EACA,gBAAA;EAEA,sBAAA;AChBZ;ADmBQ;EACI,yBAAA;KAAA,sBAAA;MAAA,qBAAA;UAAA,iBAAA;EACA,eAAA;EACA,oBAAA;EACA,YAAA;ACjBZ;ADqBI;EAEI;IACI,iBAAA;IACA,WAAA;IAEA,aAAA;IACA,6BAAA;IAEA,gBAAA;ECtBV;EDwBU;IACI,UAAA;IACA,YAAA;ECtBd;EDyBU;IACI,WAAA;IACA,WAAA;ECvBd;AACF;AD4BI;EAEI;IACI,iBAAA;IACA,WAAA;IAEA,aAAA;IACA,sBAAA;IACA,mBAAA;EC5BV;ED8BU;IACI,UAAA;IACA,YAAA;EC5Bd;ED+BU;IACI,UAAA;IACA,WAAA;IACA,eAAA;EC7Bd;AACF","file":"clockify-task-form.css"}

207
src/pages/Main/ClockifyTaskForm/clockify-task-form.scss
View File

@@ -1,119 +1,120 @@
.clockify-task-form { .clockify-tasks-display-container {
width: 20vw; width: 20vw;
position: absolute; position: absolute;
top: 60vh; top: 60vh;
left: 2.5vw; left: 2.5vw;
select, select option, input, input::placeholder { .clockify-task-form {
font-family: 'Arial', sans-serif; select, select option, input, input::placeholder {
} font-family: 'Arial', sans-serif;
&.loading-container {
width: 20vw;
height: auto;
background: none;
}
.workspace-selector, .project-selector {
width: 15vw;
height: 5vh;
}
.add-task {
width: 3.5vh;
height: 3.5vh;
margin-left: 0.5vh;
display: inline;
background-color: var(--main-text-color);
border-radius: 100%;
color: #fff;
cursor: pointer;
&:hover {
filter: brightness(90%);
} }
&:active {
filter: brightness(110%);
}
}
select {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
input[type=text] {
width: 15vw;
height: 3vw;
font-size: 12pt;
outline: none;
padding: 1px 2px;
box-sizing: border-box;
}
&.disabled, .disabled {
user-select: none;
cursor: initial;
pointer-events: none;
opacity: 0.3;
}
}
@media (max-width: 991.98px) {
.clockify-tasks-display {
position: initial;
width: auto;
display: flex;
justify-content:space-around;
padding: 3vh 5vw;
&.loading-container { &.loading-container {
width: 90%;
height: auto;
}
.workspace-selector, .project-selector, input[type=text] {
width: 20vw; width: 20vw;
height: 5vw;
}
}
}
@media (max-width: 576px) {
.clockify-tasks-display {
position: initial;
width: auto;
display: flex;
flex-direction: column;
align-items: center;
&.loading-container {
width: 90%;
height: auto; height: auto;
background: none;
}
.workspace-selector, .project-selector {
width: 15vw;
height: 5vh;
} }
.workspace-selector, .project-selector, input[type=text] { .add-task {
width: 70%; width: 3.5vh;
height: 4vh; height: 3.5vh;
margin-top: 1vh;
margin-left: 0.5vh;
display: inline;
background-color: var(--main-text-color);
border-radius: 100%;
color: #fff;
cursor: pointer;
&:hover {
filter: brightness(90%);
}
&:active {
filter: brightness(110%);
}
}
select {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
input[type=text] {
width: 15vw;
height: 3vw;
font-size: 12pt;
outline: none;
padding: 1px 2px;
box-sizing: border-box;
}
&.disabled, .disabled {
user-select: none;
cursor: initial;
pointer-events: none;
opacity: 0.3;
}
}
@media (max-width: 991.98px) {
.clockify-tasks-display {
position: initial;
width: auto;
display: flex;
justify-content:space-around;
padding: 3vh 5vw;
&.loading-container {
width: 90%;
height: auto;
}
.workspace-selector, .project-selector, input[type=text] {
width: 20vw;
height: 5vw;
}
}
}
@media (max-width: 576px) {
.clockify-tasks-display {
position: initial;
width: auto;
display: flex;
flex-direction: column;
align-items: center;
&.loading-container {
width: 90%;
height: auto;
}
.workspace-selector, .project-selector, input[type=text] {
width: 70%;
height: 4vh;
margin-top: 1vh;
}
} }
} }
} }