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;
} }

15
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,12 +178,11 @@ 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"}`}>
@@ -288,8 +287,6 @@ const ClockifyTaskForm = ({timerOn, setTimerOn, signedIn, apiKey, setApiKey, tas
: null : null
} }
</div> </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"}

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

@@ -1,11 +1,11 @@
.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 {
select, select option, input, input::placeholder { select, select option, input, input::placeholder {
font-family: 'Arial', sans-serif; font-family: 'Arial', sans-serif;
} }
@@ -117,3 +117,4 @@
} }
} }
} }
}