Harry/site-falcon
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added clear form

Browse Source
This commit is contained in:
Harry Stuart 2022-12-02 23:57:35 +11:00
parent b3f35d1a81
commit f3797e0f5f
1 changed files with 46 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
implementation.html
View File

@ -164,7 +164,7 @@
display: flex;
}
.form-header-buttons {
.form-header-button {
cursor: pointer;
user-select: none;
color: white;
@ -173,7 +173,7 @@
transition: scale 0.2s ease;
}
.form-header-buttons:hover {
.form-header-button:hover {
scale: 1.1;
}
@ -431,21 +431,41 @@
user-select: none;
}
#button-submit {
#footer-buttons-container {
width: 100%;
display: flex;
flex-direction: row;
}
#footer-buttons-container .form-footer-button {
width: 45%;
height: calc(var(--unit-spacing) * 6);
border-radius: calc(var(--unit-spacing) / 2);
background-color: var(--site-falcon-purple-1);
font-family: "Alexandria", sans-serif;
font-weight: 400;
font-size: 20px;
color: white;
border: 0px;
cursor: pointer;
user-select: none;
transition: background-color 0.15s ease;
}
#button-clear-form {
margin-right: auto;
color: var(--site-falcon-grey-4);
background-color: var(--site-falcon-grey-1);
}
#button-clear-form:hover {
background-color: var(--site-falcon-grey-2);
}
#button-submit {
margin-left: auto;
color: white;
background-color: var(--site-falcon-purple-1);
}
#button-submit:hover {
background-color: var(--site-falcon-purple-2);
}
@ -475,13 +495,13 @@
<div id="form">
<div id="form-header">
<span id="form-button-help" class="material-symbols-rounded form-header-buttons">
<span id="form-button-help" class="material-symbols-rounded form-header-button">
help
</span>
<div id="form-title">
New Ticket
</div>
<span id="form-button-close" class="material-symbols-rounded form-header-buttons">
<span id="form-button-close" class="material-symbols-rounded form-header-button">
close
</span>
</div>
@ -556,9 +576,14 @@
delete
</span>
</div>
<button id="button-submit">
Submit
</button>
<div id="footer-buttons-container">
<button id="button-clear-form" class="form-footer-button">
Clear
</button>
<button id="button-submit" class="form-footer-button">
Submit
</button>
</div>
</div>
</div>
</template>
@ -656,6 +681,9 @@
let buttonDeleteSnapshot = this.shadowRoot.getElementById("button-delete-snapshot");
buttonDeleteSnapshot.addEventListener("click", (e) => this.#onDeleteSnapshotButtonClicked(e));
let buttonClearForm = this.shadowRoot.getElementById("button-clear-form");
buttonClearForm.addEventListener("click", (e) => this.#onClearFormButtonClicked(e));
let buttonSubmit = this.shadowRoot.getElementById("button-submit");
buttonSubmit.addEventListener("click", (e) => this.#onSubmitButtonClicked(e));
@ -924,6 +952,14 @@
this.shadowRoot.getElementById("button-delete-snapshot").classList.remove("snapshot-taken");
}
#onClearFormButtonClicked(e){
let inputName = this.shadowRoot.getElementById("input-name");
inputName.setAttribute("value", "");
inputName.value = null;
this.#resetForm();
}
#onSubmitButtonClicked(e) {
this.#renderIcon({visibility: "visible"});
this.#renderForm({visibility: "hidden"});