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

52
implementation.html
View File

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