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

Style selector logic added

Browse Source
This commit is contained in:
Francisco Pessano
2021-09-20 19:15:45 -03:00
parent e4df25e1b9
commit a9e9e1483e
7 changed files with 51 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
public/css_styles/styles.css
View File

@@ -193,10 +193,12 @@
.style-selector-show {
opacity: 100%;
pointer-events: auto;
}
.style-selector-hidden {
opacity: 0%;
pointer-events: none;
}
.go-down {

2
public/css_styles/styles.css.map
View File

@@ -1 +1 @@
{"version":3,"sourceRoot":"","sources":["../sass_styles/_header.scss","../sass_styles/styles.scss","../sass_styles/_banner-login.scss","../sass_styles/_mainPomodoro.scss","../sass_styles/_styleSelector.scss","../sass_styles/_goDownArrow.scss","../sass_styles/_aboutThis.scss","../sass_styles/_historyButton.scss"],"names":[],"mappings":"AACA;EACI,kBCqCS;EDnCT;EACA;EACA;EACA;EAEA;;AAEA;EACI;EAEA;ECXJ;EACA;EAQA;EACA;EACA;;ADKA;EACI;EAEA;ECnBJ;EACA;EAQA;EACA;EACA;;ADYI;EACI;;AAGA;AAAA;AAAA;AAAA;AAAA;EAKI;EACA;EACA;;AAKA;EACI;EACA;;;AE5CpB;EACI;EACA;EDMA;ECFA;EACA;EACA;EAEA;EAEA;;AAGA;EDGA;EACA;;ACAA;EAEI;EAEA;EACA;;AAEA;EDHJ;EACA;EACA;ECIQ;EACA;EACA;EAEA;;AAIJ;EACI;EACA;;AAGJ;EACI;EACA;;;AC5CZ;EAEI;EACA;EACA;EACA;EAEA;;AAEA;EAEI;EACA;EFJJ;EEOI;EACA;EAEA,OFsBO;;AEnBX;EAEI;EACA;EACA;EFjBJ;;AEqBI;EACI;EFZR;EACA;EEeQ,OFMG;;AEHP;EACI;EFpBR;EACA;EEuBQ,OFFG;EEIH;EACA;;AAIR;EF1BA;EACA;EACA;EAtBA;EACA;EEiDI;EACA;EACA;EAEA,YFjBO;EEkBP;EAEA;EACA;;;AC7DR;EAEI;EAEA;EACA;EAEA;EAEA;EACA;EAEA;EAEA;EAgFA;;AA9EA;EHRA;EGUI,OHsBO;EGrBP;EACA;EAEA;EAIA;EACA;;AAMA;EACI;EACA;EAEA;;AAEA;EACI;EACA;EACA;;AAEA;EHpCZ;EGsCgB;;AAGJ;EHzCZ;EG2CgB,OHXL;EGYK;;AAMZ;EACI;EACA;;AAGJ;EACI;EACA;;AAEA;EACI;;AAKR;EACI;EAEA;EACA;EAEA;EACA;EACA;EAEA;;AAGJ;EAEI,kBH/CE;;;AGwDN;EACI;;;AAGJ;EACI;;;ACtGZ;EACI;EACA;EAEA;EACA;;AAGA;EACI;EACA;EAEA;;AAEA;EACI;;;ACfZ;EACI;EAEA;EACA;;AAEA;EAEI;;AAEA;EACI;ELRR;EACA;EAQA;EACA;EACA;EKEQ;;AAEA;EACI;EACA;EACA;;AAKZ;EAEI;;AAEA;EACI;;AAGI;ELtBZ;EACA;EACA;EANA;EK6BgB;;AAGJ;ELtBZ;EACA;EAXA;EKmCgB;EACA;EACA;;;AC7CpB;ENuBI;EACA;EACA;EMtBA;EACA;EAEA;EAEA;EACA;EACA;EAEA;EACA;EAEA;EAEA,kBNwBU;;AMtBV;ENUA;EMHI;EACA;;ANIJ;EACI;;AMVA;EACI;;AAQR;EACI;;AAIJ;EACI;IACI;;EAIJ;IACI;;;;ANSZ;EACI;EACA;;;AAGJ;EACI;EACA,kBAtBe","file":"styles.css"}
{"version":3,"sourceRoot":"","sources":["../sass_styles/_header.scss","../sass_styles/styles.scss","../sass_styles/_banner-login.scss","../sass_styles/_mainPomodoro.scss","../sass_styles/_styleSelector.scss","../sass_styles/_goDownArrow.scss","../sass_styles/_aboutThis.scss","../sass_styles/_historyButton.scss"],"names":[],"mappings":"AACA;EACI,kBCqCS;EDnCT;EACA;EACA;EACA;EAEA;;AAEA;EACI;EAEA;ECXJ;EACA;EAQA;EACA;EACA;;ADKA;EACI;EAEA;ECnBJ;EACA;EAQA;EACA;EACA;;ADYI;EACI;;AAGA;AAAA;AAAA;AAAA;AAAA;EAKI;EACA;EACA;;AAKA;EACI;EACA;;;AE5CpB;EACI;EACA;EDMA;ECFA;EACA;EACA;EAEA;EAEA;;AAGA;EDGA;EACA;;ACAA;EAEI;EAEA;EACA;;AAEA;EDHJ;EACA;EACA;ECIQ;EACA;EACA;EAEA;;AAIJ;EACI;EACA;;AAGJ;EACI;EACA;;;AC5CZ;EAEI;EACA;EACA;EACA;EAEA;;AAEA;EAEI;EACA;EFJJ;EEOI;EACA;EAEA,OFsBO;;AEnBX;EAEI;EACA;EACA;EFjBJ;;AEqBI;EACI;EFZR;EACA;EEeQ,OFMG;;AEHP;EACI;EFpBR;EACA;EEuBQ,OFFG;EEIH;EACA;;AAIR;EF1BA;EACA;EACA;EAtBA;EACA;EEiDI;EACA;EACA;EAEA,YFjBO;EEkBP;EAEA;EACA;;;AC7DR;EAEI;EAEA;EACA;EAEA;EAEA;EACA;EAEA;EAEA;EAgFA;;AA9EA;EHRA;EGUI,OHsBO;EGrBP;EACA;EAEA;EAIA;EACA;;AAMA;EACI;EACA;EAEA;;AAEA;EACI;EACA;EACA;;AAEA;EHpCZ;EGsCgB;;AAGJ;EHzCZ;EG2CgB,OHXL;EGYK;;AAMZ;EACI;EACA;;AAGJ;EACI;EACA;;AAEA;EACI;;AAKR;EACI;EAEA;EACA;EAEA;EACA;EACA;EAEA;;AAGJ;EAEI,kBH/CE;;;AGwDN;EACI;EACA;;;AAGJ;EACI;EACA;;;ACxGZ;EACI;EACA;EAEA;EACA;;AAGA;EACI;EACA;EAEA;;AAEA;EACI;;;ACfZ;EACI;EAEA;EACA;;AAEA;EAEI;;AAEA;EACI;ELRR;EACA;EAQA;EACA;EACA;EKEQ;;AAEA;EACI;EACA;EACA;;AAKZ;EAEI;;AAEA;EACI;;AAGI;ELtBZ;EACA;EACA;EANA;EK6BgB;;AAGJ;ELtBZ;EACA;EAXA;EKmCgB;EACA;EACA;;;AC7CpB;ENuBI;EACA;EACA;EMtBA;EACA;EAEA;EAEA;EACA;EACA;EAEA;EACA;EAEA;EAEA,kBNwBU;;AMtBV;ENUA;EMHI;EACA;;ANIJ;EACI;;AMVA;EACI;;AAQR;EACI;;AAIJ;EACI;IACI;;EAIJ;IACI;;;;ANSZ;EACI;EACA;;;AAGJ;EACI;EACA,kBAtBe","file":"styles.css"}

2
public/sass_styles/_styleSelector.scss
View File

@@ -97,8 +97,10 @@
.style-selector-show {
opacity: 100%;
pointer-events: auto;
}
.style-selector-hidden {
opacity: 0%;
pointer-events: none;
}

4
src/components/MainPomodoro.jsx
View File

@@ -16,8 +16,6 @@ const MainPomodoro = () => {
setDisplayHidden(!displayHidden)
}
console.log(timerOn)
return (
<>
<div className="main-pomodoro">
@@ -39,7 +37,7 @@ const MainPomodoro = () => {
}</button>
</div>
<StyleSelector displayHidden={displayHidden}/>
<StyleSelector displayHidden={displayHidden} style={style} setStyle={setStyle}/>
</>

24
src/components/MainPomodoroTimer.jsx
View File

@@ -7,6 +7,14 @@ const MainPomodoroTimer = (props) => {
const [seconds, setSeconds] = useState('60')
const setTimeStyle = () => {
if (props.style === 'Can I play, Daddy?') {
const minutes = 10
const seconds = 0
setMinutes(minutes)
setSeconds(seconds)
}
if (props.style === 'Regular'){
@@ -17,6 +25,22 @@ const MainPomodoroTimer = (props) => {
setSeconds(seconds)
}
if (props.style === 'Creative work') {
const minutes = 50
const seconds = 0
setMinutes(minutes)
setSeconds(seconds)
}
if (props.style === 'Last minute delivery') {
const minutes = 90
const seconds = 0
setMinutes(minutes)
setSeconds(seconds)
}
}

19
src/components/StyleSelectionChildren.jsx
View File

@@ -2,9 +2,24 @@ import React from 'react'
const StyleSelectionChildren = (props) => {
return (
<div className="style-container">
<div
className="style-container"
onClick = { (e) => {
props.setStyle(props.title)
}}
>
<span class="checkbox__input">
<input id={`input-${props.number}`} type="checkbox"></input>
<input
id={`input-${props.number}`}
type="checkbox"
checked=
{
props.style === props.title ? true : false
}
>
</input>
<span className="checkbox_control"></span>
</span>
<label for={`input-${props.number}`}>

8
src/components/StyleSelector.jsx
View File

@@ -7,10 +7,10 @@ const StyleSelector = (props) => {
<h2>Select Style</h2>
<div className="style-selection-container">
<StyleSelectionChildren number={1} title={"Title 1"} times={"Times|Times"}/>
<StyleSelectionChildren number={2} title={"Title 2"} times={"Times|Times"}/>
<StyleSelectionChildren number={3} title={"Title 3"} times={"Times|Times"}/>
<StyleSelectionChildren number={4} title={"Title 4"} times={"Times|Times"}/>
<StyleSelectionChildren number={1} title={"Can I play, Daddy?"} times={"10 min. | 5 min. | 15 min."} style={props.style} setStyle={props.setStyle}/>
<StyleSelectionChildren number={2} title={"Regular"} times={"25 min. | 5 min. | 15 min."} style={props.style} setStyle={props.setStyle}/>
<StyleSelectionChildren number={3} title={"Creative work"} times={"50 min. | 10 min. | 20 min."} style={props.style} setStyle={props.setStyle}/>
<StyleSelectionChildren number={4} title={"Last minute delivery"} times={"90 min. | 15 min. | 30 min."} style={props.style} setStyle={props.setStyle}/>
</div>
</div>
)