added default value to task description input

This commit is contained in:
2022-11-24 20:08:17 -03:00
parent ad22842f86
commit 6b2c17777c
4 changed files with 31 additions and 7 deletions

View File

@@ -18,6 +18,7 @@ const ClockifyTaskForm = ({timerOn, setTimerOn, signedIn, apiKey, setApiKey, tas
const descriptionInput = useRef("")
const [loading, setLoading] = useState(true)
const [suggestProjectName, setSuggestProjectName] = useState()
let newTask = useRef("")
const [addingNewTask, setAddingNewTask] = useState(false)
@@ -242,7 +243,10 @@ const ClockifyTaskForm = ({timerOn, setTimerOn, signedIn, apiKey, setApiKey, tas
</select>
<select
onChange={(e) => changeClockifyData({taskID: e.target.value})}
onChange={(e) => {
setSuggestProjectName(e.target.options[e.target.selectedIndex].text)
changeClockifyData({taskID: e.target.value})
}}
className={`project-selector ${(!clockifyData.projectID || (clockifyData.tasks && clockifyData.tasks.length === 0)) && 'disabled'}`}
>
<option value="0">Select a Task</option>
@@ -296,13 +300,24 @@ const ClockifyTaskForm = ({timerOn, setTimerOn, signedIn, apiKey, setApiKey, tas
type="text"
ref={descriptionInput}
onChange={(e) => changeClockifyData({description: e.target.value})}
placeholder="Add task description"
className={!clockifyData.projectID && 'disabled'}
onKeyPress={event => {
placeholder={suggestProjectName ? false : "Add task description"}
disabled={!clockifyData.projectID }
className={suggestProjectName && 'suggestion-placeholder'}
onKeyDown={event => {
if (event.key === 'Enter') {
if (event.target.value === suggestProjectName) {
setSuggestProjectName(undefined)
}
setTimerOn(true)
event.target.blur()
return
}
if (suggestProjectName) {
event.target.value = ''
setSuggestProjectName(undefined)
}
}}
value={suggestProjectName}
/>
</div>
: null

View File

@@ -57,7 +57,11 @@
padding: 1px 2px;
box-sizing: border-box;
}
.clockify-tasks-display-container .clockify-task-form.disabled, .clockify-tasks-display-container .clockify-task-form .disabled {
.clockify-tasks-display-container .clockify-task-form input[type=text].suggestion-placeholder {
color: #bbb;
font-weight: bold;
}
.clockify-tasks-display-container .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;

View File

@@ -1 +1 @@
{"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;ADKY;EACI,WAAA;EACA,mBAAA;EACA,gBAAA;EACA,iBAAA;ACHhB;ADOQ;EACI,YAAA;EACA,aAAA;EAEA,kBAAA;EAEA,eAAA;EAEA,qCAAA;EACA,mBAAA;EAEA,WAAA;EAEA,eAAA;ACVZ;ADYY;EACI,uBAAA;ACVhB;ADaY;EACI,wBAAA;ACXhB;ADeQ;EACI,gBAAA;EACA,mBAAA;EACA,uBAAA;ACbZ;ADgBQ;EACI,WAAA;EACA,WAAA;EAEA,eAAA;EAEA,aAAA;EACA,gBAAA;EAEA,sBAAA;ACjBZ;ADoBQ;EACI,yBAAA;KAAA,sBAAA;MAAA,qBAAA;UAAA,iBAAA;EACA,eAAA;EACA,oBAAA;EACA,YAAA;AClBZ;;ADuBA;EAEI;IACI,gBAAA;IACA,WAAA;IAEA,gBAAA;ECtBN;EDwBM;IACI,aAAA;IACA,mBAAA;IACA,eAAA;IACA,8BAAA;IAEA,gBAAA;ECvBV;EDyBU;IACI,WAAA;IACA,gBAAA;IACA,WAAA;IACA,gBAAA;ECvBd;ED0BU;IACI,kBAAA;ECxBd;ED2BU;IACI,eAAA;ECzBd;ED4BU;IACI,WAAA;IACA,kBAAA;IACA,gBAAA;EC1Bd;AACF;AD+BA;EAEI;IACI,iBAAA;IACA,WAAA;IAEA,aAAA;IACA,sBAAA;IACA,mBAAA;EC/BN;EDiCM;IACI,UAAA;IACA,YAAA;EC/BV;EDkCM;IACI,UAAA;IACA,WAAA;IACA,eAAA;EChCV;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;ADKY;EACI,WAAA;EACA,mBAAA;EACA,gBAAA;EACA,iBAAA;ACHhB;ADOQ;EACI,YAAA;EACA,aAAA;EAEA,kBAAA;EAEA,eAAA;EAEA,qCAAA;EACA,mBAAA;EAEA,WAAA;EAEA,eAAA;ACVZ;ADYY;EACI,uBAAA;ACVhB;ADaY;EACI,wBAAA;ACXhB;ADeQ;EACI,gBAAA;EACA,mBAAA;EACA,uBAAA;ACbZ;ADgBQ;EACI,WAAA;EACA,WAAA;EAEA,eAAA;EAEA,aAAA;EACA,gBAAA;EAEA,sBAAA;ACjBZ;ADmBY;EACI,WAAA;EACA,iBAAA;ACjBhB;ADqBQ;EACI,yBAAA;KAAA,sBAAA;MAAA,qBAAA;UAAA,iBAAA;EACA,eAAA;EACA,oBAAA;EACA,YAAA;ACnBZ;;ADwBA;EAEI;IACI,gBAAA;IACA,WAAA;IAEA,gBAAA;ECvBN;EDyBM;IACI,aAAA;IACA,mBAAA;IACA,eAAA;IACA,8BAAA;IAEA,gBAAA;ECxBV;ED0BU;IACI,WAAA;IACA,gBAAA;IACA,WAAA;IACA,gBAAA;ECxBd;ED2BU;IACI,kBAAA;ECzBd;ED4BU;IACI,eAAA;EC1Bd;ED6BU;IACI,WAAA;IACA,kBAAA;IACA,gBAAA;EC3Bd;AACF;ADgCA;EAEI;IACI,iBAAA;IACA,WAAA;IAEA,aAAA;IACA,sBAAA;IACA,mBAAA;EChCN;EDkCM;IACI,UAAA;IACA,YAAA;EChCV;EDmCM;IACI,UAAA;IACA,WAAA;IACA,eAAA;ECjCV;AACF","file":"clockify-task-form.css"}

View File

@@ -68,9 +68,14 @@
padding: 1px 2px;
box-sizing: border-box;
&.suggestion-placeholder {
color: #bbb;
font-weight: bold
}
}
&.disabled, .disabled {
&.disabled, .disabled, *:disabled {
user-select: none;
cursor: initial;
pointer-events: none;