0.0.10

2020-11-05 00:33:43 +05:30 · 2020-11-05 00:33:43 +05:30 · 95a7c8dd5d
commit 95a7c8dd5d
parent 2f76dc2cc7
5 changed files with 179 additions and 31 deletions
--- a/components.js
+++ b/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) => {
--- a/css/main.css
+++ b/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 {
-  position: absolute;
-  right: 0.5rem;
-  content: " ▼";
+th.descending::after,
+th.ascending::after {
+  display: inline-flex;
+  justify-self: flex-end;
+  position: relative;
+  margin-left: auto;
  font-size: 0.8rem;
 }

-th:not(.descending)::after {
-  position: absolute;
-  right: 0.5rem;
+th.descending::after {
+  content: " ▼";
+}
+
+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);
--- a/css/main.min.css
+++ b/css/main.min.css
--- a/css/main.scss
+++ b/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{
-    position: absolute;
-    right: 0.5rem;
-    content: " \25BC";
+th.descending::after,
+th.ascending::after{
+    display: inline-flex;
+    justify-self: flex-end;
+    position: relative;
+    margin-left: auto;
    font-size: 0.8rem;
 }
-th:not(.descending)::after{
-    position: absolute;
-    right: 0.5rem;
+th.descending::after{
+    content: " \25BC";
+}
+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);
--- a/index.html
+++ b/index.html
@ -281,7 +281,7 @@
            <div class="info">
                <h4>RanchiMall</h4>
                <h1>LogSheet</h1>
-                <p>Open &bull; Distributed &bull; Reliable</p>
+                <p>Open &bull; Distributed &bull; Reliable</p>  
            </div>
            <div class="sign-in-box flex direction-column"> 
                <sm-tab-header target="user_entry">
@ -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'))
-                        e.target.closest('th').classList.toggle('descending')
+                        let trgt = e.target.closest('th')
+                        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))