0.0.10

components.js

@@ -40,6 +40,7 @@ smButton.innerHTML = `
     border-radius: 10rem;
 }
 .button {
+    position: relative;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
@@ -65,6 +66,13 @@ smButton.innerHTML = `
     background: rgba(var(--text-color), 0.1); 
     -webkit-tap-highlight-color: transparent;
     outline: none;
+    overflow: hidden;
+}
+span.ripple {
+    position: absolute;
+    border-radius: 50%;
+    transform: scale(0);
+    border: 1.5rem solid rgba(var(--text-color), 0.2);
 }
 :host(:not([disabled])) .button:focus{
     -webkit-box-shadow: 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.2rem 0.8rem rgba(0, 0, 0, 0.2);
@@ -75,14 +83,6 @@ smButton.innerHTML = `
             box-shadow: 0 0 0 1px rgba(var(--text-color), 0.2) inset, 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.4rem 0.8rem rgba(0, 0, 0, 0.2);
 }
 @media (hover: hover){
-    :host(:not([disabled])) .button:active{
-        -webkit-box-shadow: none !important;
-                box-shadow: none !important;
-    }
-    :host([variant='outlined']) .button:active{
-        -webkit-box-shadow: 0 0 0 1px rgba(var(--text-color), 0.2) inset !important;
-                box-shadow: 0 0 0 1px rgba(var(--text-color), 0.2) inset !important;
-    }
     :host(:not([disabled])) .button:hover{
         -webkit-box-shadow: 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.2rem 0.8rem rgba(0, 0, 0, 0.12);
                 box-shadow: 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.2rem 0.8rem rgba(0, 0, 0, 0.12);
@@ -91,9 +91,6 @@ smButton.innerHTML = `
         -webkit-box-shadow: 0 0 0 1px rgba(var(--text-color), 0.2) inset, 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.4rem 0.8rem rgba(0, 0, 0, 0.12);
                 box-shadow: 0 0 0 1px rgba(var(--text-color), 0.2) inset, 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.4rem 0.8rem rgba(0, 0, 0, 0.12);
     }
-    :host([variant="primary"]:not([disabled])) .button:active{
-        background: hsl(var(--hue), var(--saturation), calc(var(--lightness) - 20%)) !important;
-    }
     :host([variant="primary"]:not([disabled])) .button:hover{
         background: hsl(var(--hue), var(--saturation), calc(var(--lightness) - 10%));
     }
@@ -149,6 +146,33 @@ customElements.define('sm-button',
                 }))
             }
         }
+        createRipple(event){
+            const target = this.shadowRoot.querySelector('.button')
+            const ripple = target.querySelector('.ripple');
+            const circle = document.createElement("span");
+            const diameter = Math.max(target.clientWidth, target.clientHeight);
+            const radius = diameter / 2;
+            circle.style.width = circle.style.height = `${diameter}px`;
+            circle.style.left = `${event.clientX - (target.offsetLeft + radius)}px`;
+            circle.style.top = `${event.clientY - (target.offsetTop + radius)}px`;
+            circle.classList.add("ripple"); 
+            const rippleAnimation =  circle.animate([
+
+                {
+                    transform: 'scale(4)',
+                    opacity: 0
+                }
+            ],
+                {
+                    duration: 400,
+                    fill: "forwards",
+                    easing: 'ease-in'
+                })
+            target.append(circle);
+            rippleAnimation.onfinish = () => {
+                circle.remove()
+            }
+        }
 
         connectedCallback() {
             this.isDisabled = false
@@ -156,6 +180,7 @@ customElements.define('sm-button',
             if (this.hasAttribute('disabled') && !this.isDisabled)
                 this.isDisabled = true
             this.addEventListener('click', (e) => {
+                this.createRipple(e)
                 this.dispatch()
             })
             this.addEventListener('keyup', (e) => {

css/main.css

@@ -172,6 +172,20 @@ strong {
   text-transform: capitalize;
 }
 
+span.ripple {
+  position: absolute;
+  border-radius: 50%;
+  transform: scale(0);
+  animation: ripple 0.6s linear;
+  background: rgba(var(--text-color), 0.1);
+}
+
+@keyframes ripple {
+  to {
+    transform: scale(4);
+    opacity: 0;
+  }
+}
 .icon {
   height: 1.2rem;
   width: 1.2rem;
@@ -701,6 +715,7 @@ th {
   padding: 1rem 0.8rem;
   white-space: nowrap;
   box-shadow: 0 0.2rem 0.4rem #00000020;
+  cursor: pointer;
 }
 
 tr:nth-of-type(2n) {
@@ -716,18 +731,21 @@ td {
   width: 10ch;
 }
 
-th.descending::after {
+th.descending::after,
-  position: absolute;
+th.ascending::after {
-  right: 0.5rem;
+  display: inline-flex;
-  content: " ▼";
+  justify-self: flex-end;
+  position: relative;
+  margin-left: auto;
   font-size: 0.8rem;
 }
 
-th:not(.descending)::after {
+th.descending::after {
-  position: absolute;
+  content: " ▼";
-  right: 0.5rem;
+}
+
+th.ascending::after {
   content: " ▲";
-  font-size: 0.8rem;
 }
 
 #group_by::part(popup) {
@@ -768,6 +786,27 @@ th:not(.descending)::after {
     transform: translateX(0);
   }
 }
+.placeholder {
+  animation: placeholder-loading 0.6s infinite alternate;
+  padding: 1.5rem 0;
+  width: 100%;
+  margin: 1.5rem;
+  border-radius: 0.5rem;
+  background: rgba(var(--text-color), 0.06);
+}
+.placeholder#sheet_container {
+  width: calc(100% - 3rem);
+  height: calc(100% - 3rem);
+}
+
+@keyframes placeholder-loading {
+  from {
+    opacity: 0.4;
+  }
+  to {
+    opacity: 1;
+  }
+}
 #people_container {
   overflow: auto;
   max-height: calc(100vh - 3.6rem);

css/main.scss

@@ -165,6 +165,19 @@ strong{
     text-transform: capitalize;
 }
 
+span.ripple {
+    position: absolute;
+    border-radius: 50%;
+    transform: scale(0);
+    animation: ripple 0.6s linear;
+    background: rgba(var(--text-color), 0.1);
+}
+@keyframes ripple {
+    to {
+      transform: scale(4);
+      opacity: 0;
+    }
+}
 .icon{
     height: 1.2rem;
     width: 1.2rem;
@@ -694,6 +707,7 @@ th{
     padding: 1rem 0.8rem;
     white-space: nowrap;
     box-shadow: 0 0.2rem 0.4rem #00000020;
+    cursor: pointer;
 }
 tr{
     &:nth-of-type(2n){
@@ -707,17 +721,19 @@ td{
 .grade-input{
     width: 10ch;
 }
-th.descending::after{
+th.descending::after,
-    position: absolute;
+th.ascending::after{
-    right: 0.5rem;
+    display: inline-flex;
-    content: " \25BC";
+    justify-self: flex-end;
+    position: relative;
+    margin-left: auto;
     font-size: 0.8rem;
 }
-th:not(.descending)::after{
+th.descending::after{
-    position: absolute;
+    content: " \25BC";
-    right: 0.5rem;
+}
+th.ascending::after{
     content: ' \25B2';
-    font-size: 0.8rem;
 }
 
 #group_by{
@@ -760,6 +776,28 @@ th:not(.descending)::after{
     }
 }
 
+.placeholder{
+    animation: placeholder-loading 0.6s infinite alternate;
+    padding: 1.5rem 0;
+    width: 100%;
+    margin: 1.5rem;
+    border-radius: 0.5rem;
+    background: rgba(var(--text-color), 0.06);
+    &#sheet_container{
+        width: calc(100% - 3rem);
+        height: calc(100% - 3rem);
+    }
+}
+
+@keyframes placeholder-loading{
+    from{
+        opacity: 0.4;
+    }
+    to{
+        opacity: 1;
+    }
+}
+
 #people_container{
     overflow: auto;
     max-height: calc(100vh - 3.6rem);

index.html

@@ -710,6 +710,7 @@
                     }
                 }
             })
+            let currentTableHeader
             document.addEventListener('click', e => {
                 try {
                     if(e.target.closest('#add_new_sheet'))
@@ -719,13 +720,45 @@
                     else if (e.target.closest(".person-card"))
                         copyToLogInput(e.target.closest(".person-card").dataset.floId)
                     else if (e.target.closest("th")){
-                        sortTable(e.target.closest("th").cellIndex, e.target.closest('th').classList.contains('descending'))
+                        let trgt = e.target.closest('th')
-                        e.target.closest('th').classList.toggle('descending')
+                        if(currentTableHeader && currentTableHeader !== trgt)
+                            currentTableHeader.classList.remove('ascending', 'descending')
+                        sortTable(trgt.cellIndex, trgt.classList.contains('descending'))
+                        if(trgt.classList.contains('descending'))
+                            trgt.classList.add('ascending')
+                        else
+                            trgt.classList.remove('ascending')
+                        trgt.classList.toggle('descending')
+                        currentTableHeader = trgt
+                    }
+                    else if(e.target.closest('h4')){
+                        createRipple(e)
                     }
                 } catch (error) {
                     //do nothing
                 }
             })
+            function createRipple(event){
+                const target = event.target.closest('h4')
+                const ripple = target.querySelector('.ripple');
+                if (ripple) {
+                    ripple.remove();
+                }
+                const ogOverflow = target.style.overflow
+                target.style.overflow = 'hidden'
+                console.log(target.getBoundingClientRect(), event)
+                const circle = document.createElement("span");
+                const diameter = Math.max(target.clientWidth, target.clientHeight);
+                const radius = diameter / 2;
+                circle.style.width = circle.style.height = `${diameter}px`;
+                circle.style.left = `${event.clientX - radius}px`;
+                circle.style.top = `${event.clientY - radius}px`;
+                circle.classList.add("ripple"); 
+                target.append(circle);
+                circle.onanimationend = () => {
+                    target.style.overflow = ogOverflow
+                }
+            }
             const observer = new IntersectionObserver((entries, observer) => {
                 entries.forEach(entry => {
                     if(entry.isIntersecting){
@@ -914,6 +947,9 @@
             document.getElementById(page).classList.remove('hide-completely')
             if(page === 'home_page'){
                 tableBody.innerHTML = ''
+                sheetHeading.textContent = ''
+                sheetType.textContent = ''
+                sheetDescription.textContent = ''
                 mainHeader.classList.remove('hide-completely')
             }
             else
@@ -1103,8 +1139,18 @@
         }
 
         function viewSheet(title) {
+            sheetContainer.classList.add('placeholder')
+            sheetHeading.classList.add('placeholder')
+            sheetType.classList.add('placeholder')
+            sheetDescription.classList.add('placeholder')
+            tableHeader.classList.add('hide')
             showPage('sheet_page')
             logSheet.refreshLogs(title).then(result => {
+                sheetContainer.classList.remove('placeholder')
+                sheetHeading.classList.remove('placeholder')
+                sheetType.classList.remove('placeholder')
+                sheetDescription.classList.remove('placeholder')
+                tableHeader.classList.remove('hide')
                 let data = logSheet.viewLogs(title)
                 renderSheetView(data.title, data.description, data.editors, data.attributes, data.sheet.reverse(),
                     !data.editors || data.editors.includes(myFloID), floGlobals.subAdmins.includes(myFloID))