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 loadingImage from './img/loading-light-theme.png'
const Loading = () => {
const Loading = ({width, height}) => {
return (
<>
<div className="loading-container">
<div className="loading-container" style={{width: width, height: height}}>
<img src={loadingImage} alt="loading"/>
</div>
</>

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

@@ -1,5 +1,5 @@
.loading-container {
width: 100%;
height: 100%;
width: auto;
height: unset;
background-color: #fff;
}/*# 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 {
width: 100%;
height: 100%;
width: auto;
height: unset;
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) {
await getApiKey(user.uid)
setLoading(false)
} else {
return (<></>)
return(<></>)
}
setLoading(false)
})
} else {
setLoading(false)
}
}, [signedIn])
@@ -178,118 +178,115 @@ const ClockifyTaskForm = ({timerOn, setTimerOn, signedIn, apiKey, setApiKey, tas
}
return (
<>
<div className='clockify-tasks-display-container'>
{
loading ?
<Loading />
:
<div className={darkMode ? 'clockify-task-form-container dark-mode-container' : 'clockify-tasks-display-container'}>
{
clockifyData.workspaces ?
<div className={`clockify-task-form ${(timerOn || !clockifyData.workspaces) && "disabled"}`}>
<select
onChange={(e) => {
changeClockifyData({workspaceID: e.target.value})
getProjects(e.target.value)
}}
className='workspace-selector'
>
<option value="0">Select a Workspace</option>
{
clockifyData.workspaces &&
clockifyData.workspaces.map((workspace) => {
return <option value={workspace.id} key={workspace.id}>{workspace.name}</option>
})
}
</select>
loading &&
<Loading width={"20vw"} height={"initial"}/>
}
{
clockifyData.workspaces ?
<div className={`clockify-task-form ${(timerOn || !clockifyData.workspaces) && "disabled"}`}>
<select
onChange={(e) => {
changeClockifyData({workspaceID: e.target.value})
getProjects(e.target.value)
}}
className='workspace-selector'
>
<option value="0">Select a Workspace</option>
{
clockifyData.workspaces &&
clockifyData.workspaces.map((workspace) => {
return <option value={workspace.id} key={workspace.id}>{workspace.name}</option>
})
}
</select>
<select
onChange={(e) => {
changeClockifyData({projectID: e.target.value})
getTasks(e.target.value)
}}
className={`project-selector ${(!clockifyData.workspaceID) && 'disabled'}`}
>
<option value="0">Select a Project</option>
{
clockifyData.projects &&
clockifyData.projects.map((project) => (
!project.archived ?
<option value={project.id} key={project.id} style={{color: project.color}}>{project.name}</option>
: null
))
}
</select>
<select
onChange={(e) => {
changeClockifyData({projectID: e.target.value})
getTasks(e.target.value)
}}
className={`project-selector ${(!clockifyData.workspaceID) && 'disabled'}`}
>
<option value="0">Select a Project</option>
{
clockifyData.projects &&
clockifyData.projects.map((project) => (
!project.archived ?
<option value={project.id} key={project.id} style={{color: project.color}}>{project.name}</option>
: null
))
}
</select>
<select
onChange={(e) => changeClockifyData({taskID: e.target.value})}
className={`project-selector ${(!clockifyData.projectID || (clockifyData.tasks && clockifyData.tasks.length === 0)) && 'disabled'}`}
>
<option value="0">Select a Task</option>
{
clockifyData.tasks &&
clockifyData.tasks.map((task) => (
task.status !== "DONE" &&
<option value={task.id} key={task.id} >{task.name}</option>
))
}
</select>
<button
className={`add-task ${!clockifyData.projectID && 'disabled'}`}
onClick={() => {
<select
onChange={(e) => changeClockifyData({taskID: e.target.value})}
className={`project-selector ${(!clockifyData.projectID || (clockifyData.tasks && clockifyData.tasks.length === 0)) && 'disabled'}`}
>
<option value="0">Select a Task</option>
{
clockifyData.tasks &&
clockifyData.tasks.map((task) => (
task.status !== "DONE" &&
<option value={task.id} key={task.id} >{task.name}</option>
))
}
</select>
<button
className={`add-task ${!clockifyData.projectID && 'disabled'}`}
onClick={() => {
if (addingNewTask === "loading") {
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 === "loading") {
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={descriptionInput}
onChange={(e) => changeClockifyData({description: e.target.value})}
placeholder="Add task description"
className={!clockifyData.projectID && 'disabled'}
onKeyPress={event => {
if (event.key === 'Enter') {
setTimerOn(true)
}
}}
ref={newTask}
placeholder="Set new task name"
/>
</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;
position: absolute;
top: 60vh;
left: 2.5vw;
}
.clockify-task-form input::-moz-placeholder {
.clockify-tasks-display-container .clockify-task-form input::-moz-placeholder {
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;
}
.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;
}
.clockify-task-form.loading-container {
.clockify-tasks-display-container .clockify-task-form.loading-container {
width: 20vw;
height: auto;
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;
height: 5vh;
}
.clockify-task-form .add-task {
.clockify-tasks-display-container .clockify-task-form .add-task {
width: 3.5vh;
height: 3.5vh;
margin-left: 0.5vh;
@@ -32,18 +32,18 @@
color: #fff;
cursor: pointer;
}
.clockify-task-form .add-task:hover {
.clockify-tasks-display-container .clockify-task-form .add-task:hover {
filter: brightness(90%);
}
.clockify-task-form .add-task:active {
.clockify-tasks-display-container .clockify-task-form .add-task:active {
filter: brightness(110%);
}
.clockify-task-form select {
.clockify-tasks-display-container .clockify-task-form select {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.clockify-task-form input[type=text] {
.clockify-tasks-display-container .clockify-task-form input[type=text] {
width: 15vw;
height: 3vw;
font-size: 12pt;
@@ -51,7 +51,7 @@
padding: 1px 2px;
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;
-moz-user-select: none;
-ms-user-select: none;
@@ -60,37 +60,36 @@
pointer-events: none;
opacity: 0.3;
}
@media (max-width: 991.98px) {
.clockify-tasks-display {
.clockify-tasks-display-container .clockify-tasks-display {
position: initial;
width: auto;
display: flex;
justify-content: space-around;
padding: 3vh 5vw;
}
.clockify-tasks-display.loading-container {
.clockify-tasks-display-container .clockify-tasks-display.loading-container {
width: 90%;
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;
height: 5vw;
}
}
@media (max-width: 576px) {
.clockify-tasks-display {
.clockify-tasks-display-container .clockify-tasks-display {
position: initial;
width: auto;
display: flex;
flex-direction: column;
align-items: center;
}
.clockify-tasks-display.loading-container {
.clockify-tasks-display-container .clockify-tasks-display.loading-container {
width: 90%;
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%;
height: 4vh;
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;
position: absolute;
top: 60vh;
left: 2.5vw;
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%);
.clockify-task-form {
select, select option, input, input::placeholder {
font-family: 'Arial', sans-serif;
}
&: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;
background: none;
}
.workspace-selector, .project-selector {
width: 15vw;
height: 5vh;
}
.workspace-selector, .project-selector, input[type=text] {
width: 70%;
height: 4vh;
margin-top: 1vh;
.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 {
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;
}
}
}
}