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

added close button

Browse Source
This commit is contained in:
Harry Stuart 2022-11-29 22:02:38 +11:00
parent abd8c2536a
commit 78acccd0ac
1 changed files with 112 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

169
implementation.html
View File

@ -1,9 +1,15 @@
<html> <html>
<head> <head>
<style>
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');
</style>
</head> </head>
<body> <body>
<div style="height: 50px; width: 10000px; background-color: blue;"></div> <div style="height: 50px; width: 10000px; background-color: blue;"></div>
<button id="button"></button> <button id="button"></button>
<span class="material-symbols-rounded">
close
</span>
<p>Nice thanks man awesome</p> <p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p> <p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p> <p>Nice thanks man awesome</p>
@ -47,17 +53,14 @@
<template id="x-widget-template"> <template id="x-widget-template">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Alexandria:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@48,300,0,0" />
<style> <style>
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');
* { * {
box-sizing: border-box; box-sizing: border-box;
--icon-default-dim: 60px; --icon-default-dim: 60px;
--form-default-width: 350px; --form-default-width: 450px;
--form-default-height: 500px; --form-default-height: 600px;
--side-margin: 20px; --side-margin: 20px;
--site-falcon-purple: #AE55E7; --site-falcon-purple: #AE55E7;
} }
@ -68,7 +71,7 @@
position: fixed; position: fixed;
visibility: visible; visibility: visible;
opacity: 1; opacity: 1;
transition: top 0.3s ease 0s, left 0.3s ease 0s, scale 0.2s ease, transform 0.5s ease, visibility 0s linear 0.5s, opacity 0.5s linear; transition: top 0.3s ease 0s, left 0.3s ease 0s, scale 0.2s ease, transform 0.5s ease, visibility 0s linear 0.3s, opacity 0.3s linear;
} }
#icon.location-top-left { #icon.location-top-left {
@ -107,11 +110,11 @@
border: 0px; border: 0px;
border-radius: 10px 10px 10px 10px; border-radius: 10px 10px 10px 10px;
box-shadow: 0 4px 16px rgb(0 0 0 / 25%); box-shadow: 0 4px 16px rgb(0 0 0 / 25%);
border-radius: 15px; border-radius: 12px;
position: fixed; position: fixed;
visibility: visible; visibility: visible;
opacity: 1; opacity: 1;
transition: transform 0.5s ease, visibility 0s linear 0.5s, opacity 0.5s linear; transition: transform 0.6s ease, visibility 0s linear 0.3s, opacity 0.3s linear;
} }
#form.location-top-left { #form.location-top-left {
@ -138,20 +141,43 @@
top: 0px; top: 0px;
width: 100%; width: 100%;
height: 60px; height: 60px;
background-color: var(--site-falcon-purple); background-image: linear-gradient(#a544e3, var(--site-falcon-purple));
border-radius: 15px 15px 0px 0px; border-radius: 12px 12px 0px 0px;
border: 0px; border: 0px;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
display: flex; display: flex;
} }
.form-header-buttons {
cursor: pointer;
user-select: none;
color: white;
margin-left: 16px;
font-size: 26px;
transition: scale 0.2s ease;
}
.form-header-buttons:hover {
scale: 1.1;
}
#form-button-help {
margin-left: 16px;
}
#form-button-close {
margin-right: 16px;
}
#form-title { #form-title {
font-family: Alexandria, sans-serif; font-family: "Alexandria", sans-serif;
font-weight: 400; font-weight: 400;
font-size: 24px; font-size: 24px;
color: white; color: white;
text-align: center; text-align: center;
user-select: none;
flex-grow: 1;
} }
#form-content-container { #form-content-container {
@ -197,8 +223,12 @@
margin-top: 15px; margin-top: 15px;
} }
#input-name:not(#input-name[value=""]), #input-comment:not(#input-comment[value=""]) {
font-size: 16px;
}
.md-input, .label-md-input > div { .md-input, .label-md-input > div {
font-family: Alexandria, sans-serif; font-family: "Alexandria", sans-serif;
font-weight: 300; font-weight: 300;
font-size: 16px; font-size: 16px;
} }
@ -249,18 +279,33 @@
background-color: #ececec; background-color: #ececec;
border: 2px solid #d3d3d3; border: 2px solid #d3d3d3;
border-left: 0px; border-left: 0px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
cursor: pointer;
user-select: none;
transition: background-color 0.15s ease;
}
.severity-option .material-symbols-rounded {
color: #5A5A5A;
}
.severity-option .material-symbols-rounded:not(:first-child) {
margin-left: -12px;
color: #5A5A5A;
} }
.severity-option:hover:not(.selected) { .severity-option:hover:not(.selected) {
background-color: #e0e0e0; background-color: #e0e0e0;
cursor: pointer;
} }
.severity-option.selected { .severity-option.selected {
background-color: #d3d3d3; background-color: #d3d3d3;
} }
#select-severity-container :first-child { #select-severity-container > :first-child {
border-left: 2px solid #d3d3d3; border-left: 2px solid #d3d3d3;
border-radius: 4px 0px 0px 4px; border-radius: 4px 0px 0px 4px;
} }
@ -292,12 +337,12 @@
#icon.hidden.location-bottom-left, #form.hidden.location-bottom-left, #icon.hidden.location-bottom-left, #form.hidden.location-bottom-left,
#icon.hidden.location-bottom-right, #form.hidden.location-bottom-right { #icon.hidden.location-bottom-right, #form.hidden.location-bottom-right {
transform: translateY(200%); transform: translateY(100%);
} }
#icon.hidden.location-top-left, #form.hidden.location-top-left, #icon.hidden.location-top-left, #form.hidden.location-top-left,
#icon.hidden.location-top-right, #form.hidden.location-top-right { #icon.hidden.location-top-right, #form.hidden.location-top-right {
transform: translateY(-200%); transform: translateY(-100%);
} }
#icon.hidden { #icon.hidden {
@ -311,9 +356,15 @@
<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">
help
</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">
close
</span>
</div> </div>
<div id="form-content-container"> <div id="form-content-container">
<div id="input-name-container"> <div id="input-name-container">
@ -330,34 +381,34 @@
</label> </label>
</div> </div>
<div id="select-severity-container"> <div id="select-severity-container">
<div class="severity-option" id="option-low-severity"> <div title="Info" class="severity-option selected" id="option-no-severity">
<!-- <span class="material-symbols-rounded"> <span class="material-symbols-rounded">
priority_high info
</span> -->
</div>
<div class="severity-option" id="option-medium-severity">
<!-- <span class="material-symbols-rounded">
priority_high
</span> </span>
</div>
<div title="Low Priority" class="severity-option" id="option-low-severity">
<span class="material-symbols-rounded"> <span class="material-symbols-rounded">
priority_high priority_high
</span> -->
</div>
<div class="severity-option" id="option-high-severity">
<!-- <span class="material-symbols-rounded">
priority_high
</span> </span>
</div>
<div title="Medium Priority" class="severity-option" id="option-medium-severity">
<span class="material-symbols-rounded"> <span class="material-symbols-rounded">
priority_high priority_high
</span> </span>
<span class="material-symbols-rounded"> <span class="material-symbols-rounded">
priority_high priority_high
</span> --> </span>
</div> </div>
<div class="severity-option selected" id="option-no-severity"> <div title="High Priority" class="severity-option" id="option-high-severity">
<!-- <span class="material-symbols-rounded"> <span class="material-symbols-rounded">
campaign priority_high
</span> --> </span>
<span class="material-symbols-rounded">
priority_high
</span>
<span class="material-symbols-rounded">
priority_high
</span>
</div> </div>
</div> </div>
<div id="input-comment-container"> <div id="input-comment-container">
@ -390,7 +441,6 @@
super(); super();
const shadowRoot = this.attachShadow({mode: 'open'}); const shadowRoot = this.attachShadow({mode: 'open'});
let v = document.getElementById("x-widget-template").content.cloneNode(true);
shadowRoot.appendChild(document.getElementById("x-widget-template").content.cloneNode(true)); shadowRoot.appendChild(document.getElementById("x-widget-template").content.cloneNode(true));
this.#icon = this.#createIcon(); this.#icon = this.#createIcon();
@ -403,22 +453,10 @@
} }
connectedCallback() { connectedCallback() {
let test = document.getElementById("button"); this.#renderInitial();
test.style.position = "absolute";
test.style.top = "100px";
test.style.left = "100px";
test.textContent = "show icon";
test.onclick = (e) => {
if (!this.#form.classList.contains("hidden")) {
this.#renderIcon({visibility: "visible"});
this.#renderForm({visibility: "hidden"});
}
};
this.#render();
} }
#render() { #renderInitial() {
if (this.isConnected) { if (this.isConnected) {
this.#renderIcon({visibility: "visible"}); this.#renderIcon({visibility: "visible"});
this.#renderForm({visibility: "hidden"}); this.#renderForm({visibility: "hidden"});
@ -440,6 +478,12 @@
#createForm() { #createForm() {
let form = this.shadowRoot.getElementById("form"); let form = this.shadowRoot.getElementById("form");
let buttonHelp = this.shadowRoot.getElementById("form-button-help");
buttonHelp.addEventListener("click", (e) => this.#onFormHelpButtonClicked(e));
let buttonClose = this.shadowRoot.getElementById("form-button-close");
buttonClose.addEventListener("click", (e) => this.#onFormCloseButtonClicked(e));
let inputName = this.shadowRoot.getElementById("input-name"); let inputName = this.shadowRoot.getElementById("input-name");
inputName.addEventListener("input", (e) => this.#onNameInput(e)); inputName.addEventListener("input", (e) => this.#onNameInput(e));
@ -509,6 +553,17 @@
} }
} }
#onFormHelpButtonClicked(e) {
console.log("help pressed");
}
#onFormCloseButtonClicked(e) {
if (!this.#form.classList.contains("hidden")) {
this.#renderIcon({visibility: "visible"});
this.#renderForm({visibility: "hidden"});
}
}
#onNameInput(e) { #onNameInput(e) {
let inputName = this.shadowRoot.getElementById("input-name"); let inputName = this.shadowRoot.getElementById("input-name");
@ -605,22 +660,22 @@
#snapToCorner(anchorX, anchorY) { #snapToCorner(anchorX, anchorY) {
let locationChanged = false; let locationChanged = false;
if (anchorX < window.innerWidth / 5) { if (anchorX < window.innerWidth / 2) {
if (this.#location != "top-left" && anchorY < window.innerHeight / 5) { if (this.#location != "top-left" && anchorY < window.innerHeight / 2) {
this.#location = "top-left"; this.#location = "top-left";
locationChanged = true; locationChanged = true;
} }
else if (this.#location != "bottom-left" && anchorY > window.innerHeight - window.innerHeight / 5) { else if (this.#location != "bottom-left" && anchorY > window.innerHeight - window.innerHeight / 2) {
this.#location = "bottom-left"; this.#location = "bottom-left";
locationChanged = true; locationChanged = true;
} }
} }
else if (anchorX > window.innerWidth - window.innerWidth / 5) { else if (anchorX > window.innerWidth - window.innerWidth / 2) {
if (this.#location != "top-right" && anchorY < window.innerHeight / 5) { if (this.#location != "top-right" && anchorY < window.innerHeight / 2) {
this.#location = "top-right"; this.#location = "top-right";
locationChanged = true; locationChanged = true;
} }
else if (this.#location != "bottom-right" && anchorY > window.innerHeight - window.innerHeight / 5) { else if (this.#location != "bottom-right" && anchorY > window.innerHeight - window.innerHeight / 2) {
this.#location = "bottom-right"; this.#location = "bottom-right";
locationChanged = true; locationChanged = true;
} }