RanchiMall/flologsheet
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

0.0.12

Browse Source 
fix (sub-admin): bug causing error while creating sheets with spaces in name
This commit is contained in:
sairaj mote 2020-12-15 19:01:58 +05:30
parent 0bed9b3b9e
commit 66fe2d6757
6 changed files with 2016 additions and 106 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

169
components.js
View File

@ -20,7 +20,7 @@ smButton.innerHTML = `
color: rgba(var(--foreground-color), 1); color: rgba(var(--foreground-color), 1);
} }
:host([variant='primary']) .button{ :host([variant='primary']) .button{
background: hsl(var(--hue), var(--saturation), var(--lightness)); background: var(--accent-color);
color: rgba(var(--foreground-color), 1); color: rgba(var(--foreground-color), 1);
} }
:host([variant='outlined']) .button{ :host([variant='outlined']) .button{
@ -72,7 +72,7 @@ span.ripple {
position: absolute; position: absolute;
border-radius: 50%; border-radius: 50%;
transform: scale(0); transform: scale(0);
border: 1.5rem solid rgba(var(--text-color), 0.2); background: rgba(var(--text-color), 0.2);
} }
:host(:not([disabled])) .button:focus{ :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); -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);
@ -91,9 +91,6 @@ span.ripple {
-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); -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); 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:hover{
background: hsl(var(--hue), var(--saturation), calc(var(--lightness) - 10%));
}
} }
@media (hover: none){ @media (hover: none){
:host(:not([disabled])) .button:active{ :host(:not([disabled])) .button:active{
@ -146,33 +143,6 @@ 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() { connectedCallback() {
this.isDisabled = false this.isDisabled = false
@ -180,7 +150,6 @@ customElements.define('sm-button',
if (this.hasAttribute('disabled') && !this.isDisabled) if (this.hasAttribute('disabled') && !this.isDisabled)
this.isDisabled = true this.isDisabled = true
this.addEventListener('click', (e) => { this.addEventListener('click', (e) => {
this.createRipple(e)
this.dispatch() this.dispatch()
}) })
this.addEventListener('keyup', (e) => { this.addEventListener('keyup', (e) => {
@ -240,14 +209,14 @@ border: none;
} }
.icon { .icon {
fill: none; fill: none;
height: 1.6em; height: 1.6rem;
width: 1.6em; width: 1.6rem;
padding: 0.5em; padding: 0.5rem;
stroke: rgba(var(--text-color), 0.7); stroke: rgba(var(--text-color), 0.7);
stroke-width: 10; stroke-width: 10;
overflow: visible; overflow: visible;
stroke-linecap: round; stroke-linecap: round;
border-radius: 1em; border-radius: 1rem;
stroke-linejoin: round; stroke-linejoin: round;
cursor: pointer; cursor: pointer;
min-width: 0; min-width: 0;
@ -265,9 +234,9 @@ border: none;
align-items: center; align-items: center;
text-align: left; text-align: left;
position: relative; position: relative;
gap: 1em; gap: 1rem;
padding: 0.7em 1em; padding: 0.7rem 1rem;
border-radius: 0.3em; border-radius: 0.3rem;
-webkit-transition: opacity 0.3s; -webkit-transition: opacity 0.3s;
-o-transition: opacity 0.3s; -o-transition: opacity 0.3s;
transition: opacity 0.3s; transition: opacity 0.3s;
@ -278,7 +247,7 @@ border: none;
} }
.input.readonly .clear{ .input.readonly .clear{
opacity: 0 !important; opacity: 0 !important;
margin-right: -2em; margin-right: -2rem;
pointer-events: none !important; pointer-events: none !important;
} }
.readonly{ .readonly{
@ -288,7 +257,7 @@ input:focus{
caret-color: var(--accent-color); caret-color: var(--accent-color);
} }
.input:focus-within:not(.readonly){ .input:focus-within:not(.readonly){
background: rgba(var(--text-color), 0.1); box-shadow: 0 0 0 0.1rem var(--accent-color) inset;
} }
.disabled{ .disabled{
pointer-events: none; pointer-events: none;
@ -301,7 +270,7 @@ input:focus{
user-select: none; user-select: none;
opacity: .7; opacity: .7;
font-weight: 400; font-weight: 400;
font-size: 1em; font-size: 1rem;
position: absolute; position: absolute;
top: 0; top: 0;
-webkit-transition: -webkit-transform 0.3s; -webkit-transition: -webkit-transform 0.3s;
@ -338,7 +307,7 @@ input:focus{
flex: 1; flex: 1;
} }
input{ input{
font-size: 1em; font-size: 1rem;
border: none; border: none;
background: transparent; background: transparent;
outline: none; outline: none;
@ -346,15 +315,15 @@ input{
width: 100%; width: 100%;
} }
.animate-label .container input { .animate-label .container input {
-webkit-transform: translateY(0.6em); -webkit-transform: translateY(0.6rem);
-ms-transform: translateY(0.6em); -ms-transform: translateY(0.6rem);
transform: translateY(0.6em); transform: translateY(0.6rem);
} }
.animate-label .container .label { .animate-label .container .label {
-webkit-transform: translateY(-0.6em) scale(0.8); -webkit-transform: translateY(-0.6rem) scale(0.8);
-ms-transform: translateY(-0.6em) scale(0.8); -ms-transform: translateY(-0.6rem) scale(0.8);
transform: translateY(-0.6em) scale(0.8); transform: translateY(-0.6rem) scale(0.8);
opacity: 1; opacity: 1;
color: var(--accent-color) color: var(--accent-color)
} }
@ -513,7 +482,7 @@ customElements.define('sm-input',
this.shadowRoot.querySelector('.label').textContent = this.getAttribute('placeholder') this.shadowRoot.querySelector('.label').textContent = this.getAttribute('placeholder')
if (this.hasAttribute('value')) { if (this.hasAttribute('value')) {
this.input.value = this.getAttribute('value') this.input.value = this.getAttribute('value')
this.checkInput(e) this.checkInput()
} }
if (this.hasAttribute('required')) { if (this.hasAttribute('required')) {
this.input.setAttribute('required', '') this.input.setAttribute('required', '')
@ -603,14 +572,14 @@ smTextarea.innerHTML = `
} }
.icon { .icon {
fill: none; fill: none;
height: 1.6em; height: 1.6rem;
width: 1.6em; width: 1.6rem;
padding: 0.5em; padding: 0.5rem;
stroke: rgba(var(--text-color), 0.7); stroke: rgba(var(--text-color), 0.7);
stroke-width: 10; stroke-width: 10;
overflow: visible; overflow: visible;
stroke-linecap: round; stroke-linecap: round;
border-radius: 1em; border-radius: 1rem;
stroke-linejoin: round; stroke-linejoin: round;
cursor: pointer; cursor: pointer;
min-width: 0; min-width: 0;
@ -626,8 +595,8 @@ smTextarea.innerHTML = `
-ms-flex-align: center; -ms-flex-align: center;
align-items: center; align-items: center;
position: relative; position: relative;
padding: 0.7em 1em; padding: 0.7rem 1rem;
border-radius: 0.3em; border-radius: 0.3rem;
-webkit-transition: opacity 0.3s; -webkit-transition: opacity 0.3s;
-o-transition: opacity 0.3s; -o-transition: opacity 0.3s;
transition: opacity 0.3s; transition: opacity 0.3s;
@ -653,9 +622,9 @@ textarea:focus{
user-select: none; user-select: none;
opacity: .7; opacity: .7;
font-weight: 400; font-weight: 400;
font-size: 1em; font-size: 1rem;
position: absolute; position: absolute;
top: 0.9em; top: 0.9rem;
-webkit-transition: -webkit-transform 0.3s; -webkit-transition: -webkit-transform 0.3s;
transition: -webkit-transform 0.3s; transition: -webkit-transform 0.3s;
-o-transition: transform 0.3s; -o-transition: transform 0.3s;
@ -673,7 +642,7 @@ textarea:focus{
will-change: transform; will-change: transform;
} }
textarea{ textarea{
font-size: 1em; font-size: 1rem;
border: none; border: none;
background: transparent; background: transparent;
outline: none; outline: none;
@ -683,15 +652,15 @@ textarea{
line-height: 1.6; line-height: 1.6;
} }
.animate-label textarea { .animate-label textarea {
-webkit-transform: translateY(0.6em); -webkit-transform: translateY(0.6rem);
-ms-transform: translateY(0.6em); -ms-transform: translateY(0.6rem);
transform: translateY(0.6em); transform: translateY(0.6rem);
} }
.animate-label .label { .animate-label .label {
-webkit-transform: translateY(-0.6em) scale(0.8); -webkit-transform: translateY(-0.6rem) scale(0.8);
-ms-transform: translateY(-0.6em) scale(0.8); -ms-transform: translateY(-0.6rem) scale(0.8);
transform: translateY(-0.6em) scale(0.8); transform: translateY(-0.6rem) scale(0.8);
opacity: 1; opacity: 1;
color: var(--accent-color) color: var(--accent-color)
} }
@ -844,7 +813,7 @@ smTab.innerHTML = `
white-space: nowrap; white-space: nowrap;
padding: 0.4rem 0.8rem; padding: 0.4rem 0.8rem;
font-weight: 500; font-weight: 500;
word-spacing: 0.1em; word-spacing: 0.1rem;
text-align: center; text-align: center;
-webkit-transition: color 0.3s; -webkit-transition: color 0.3s;
-o-transition: color 0.3s; -o-transition: color 0.3s;
@ -1861,6 +1830,7 @@ smStripOption.innerHTML = `
padding: 0.4rem 0.8rem; padding: 0.4rem 0.8rem;
cursor: pointer; cursor: pointer;
overflow-wrap: break-word; overflow-wrap: break-word;
white-space: nowrap;
outline: none; outline: none;
border-radius: 2rem; border-radius: 2rem;
text-transform: capitalize; text-transform: capitalize;
@ -1948,14 +1918,13 @@ smPopup.innerHTML = `
right: 0; right: 0;
place-items: center; place-items: center;
background: rgba(0, 0, 0, 0.6); background: rgba(0, 0, 0, 0.6);
-webkit-transition: opacity 0.3s ease; -webkit-transition: opacity 0.3s;
-o-transition: opacity 0.3s ease; -o-transition: opacity 0.3s;
transition: opacity 0.3s ease; transition: opacity 0.3s;
z-index: 10; z-index: 10;
} }
:host(.stacked) .popup{ :host(.stacked) .popup{
-webkit-transform: scale(0.9) translateY(-2rem) !important; -webkit-transform: scale(0.9) translateY(-2rem) !important;
-ms-transform: scale(0.9) translateY(-2rem) !important;
transform: scale(0.9) translateY(-2rem) !important; transform: scale(0.9) translateY(-2rem) !important;
} }
.popup{ .popup{
@ -1964,7 +1933,6 @@ smPopup.innerHTML = `
display: flex; display: flex;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
-webkit-box-direction: normal; -webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column; flex-direction: column;
position: relative; position: relative;
-ms-flex-item-align: end; -ms-flex-item-align: end;
@ -1974,14 +1942,13 @@ smPopup.innerHTML = `
align-items: flex-start; align-items: flex-start;
width: 100%; width: 100%;
border-radius: 0.8rem 0.8rem 0 0; border-radius: 0.8rem 0.8rem 0 0;
-webkit-transform: translateY(100%); -webkit-transform: scale(1) translateY(100%);
-ms-transform: translateY(100%); transform: scale(1) translateY(100%);
transform: translateY(100%);
-webkit-transition: -webkit-transform 0.3s; -webkit-transition: -webkit-transform 0.3s;
transition: -webkit-transform 0.3s; transition: -webkit-transform 0.3s;
-o-transition: transform 0.3s; -o-transition: transform 0.3s;
transition: transform 0.3s;
transition: transform 0.3s, -webkit-transform 0.3s; transition: transform 0.3s, -webkit-transform 0.3s;
transition: transform 0.3s;
background: rgba(var(--foreground-color), 1); background: rgba(var(--foreground-color), 1);
-webkit-box-shadow: 0 -1rem 2rem #00000020; -webkit-box-shadow: 0 -1rem 2rem #00000020;
box-shadow: 0 -1rem 2rem #00000020; box-shadow: 0 -1rem 2rem #00000020;
@ -1989,7 +1956,6 @@ smPopup.innerHTML = `
} }
.container-header{ .container-header{
display: -webkit-box; display: -webkit-box;
display: -ms-flexbox;
display: flex; display: flex;
width: 100%; width: 100%;
-webkit-box-align: center; -webkit-box-align: center;
@ -1998,13 +1964,11 @@ smPopup.innerHTML = `
} }
.popup-top{ .popup-top{
display: -webkit-box; display: -webkit-box;
display: -ms-flexbox;
display: flex; display: flex;
width: 100%; width: 100%;
} }
.popup-body{ .popup-body{
display: -webkit-box; display: -webkit-box;
display: -ms-flexbox;
display: flex; display: flex;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
-webkit-box-direction: normal; -webkit-box-direction: normal;
@ -2031,35 +1995,32 @@ smPopup.innerHTML = `
align-self: center; align-self: center;
border-radius: 0.4rem; border-radius: 0.4rem;
height: auto; height: auto;
-webkit-transform: translateY(1rem); -webkit-transform: scale(1) translateY(3rem);
-ms-transform: translateY(1rem); transform: scale(1) translateY(3rem);
transform: translateY(1rem);
-webkit-box-shadow: 0 3rem 2rem -0.5rem #00000040; -webkit-box-shadow: 0 3rem 2rem -0.5rem #00000040;
box-shadow: 0 3rem 2rem -0.5rem #00000040; box-shadow: 0 3rem 2rem -0.5rem #00000040;
} }
} }
@media screen and (max-width: 640px){ @media screen and (max-width: 640px){
.popup-top{ .popup-top{
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
-webkit-box-direction: normal; -webkit-box-direction: normal;
-ms-flex-direction: column; flex-direction: column;
flex-direction: column; -webkit-box-align: center;
-webkit-box-align: center; align-items: center;
-ms-flex-align: center; }
align-items: center; .handle{
} height: 0.3rem;
.handle{ width: 2rem;
height: 0.3rem; background: rgba(var(--text-color), .2);
width: 2rem; border-radius: 1rem;
background: rgba(var(--text-color), .2); margin: 0.5rem 0;
border-radius: 1rem; }
margin: 0.5rem 0;
}
} }
</style> </style>
<div part="background" class="popup-container hide" role="dialog"> <div part="background" class="popup-container hide" role="dialog">
<div part="popup" class="popup"> <div part="popup" class="popup">
<div class="popup-top"> <div part="popup-header" class="popup-top">
<div class="handle"></div> <div class="handle"></div>
<slot name="header"></slot> <slot name="header"></slot>
</div> </div>
@ -2111,7 +2072,7 @@ customElements.define('sm-popup', class extends HTMLElement {
this.pinned = pinned this.pinned = pinned
} }
this.popupContainer.classList.remove('hide') this.popupContainer.classList.remove('hide')
this.popup.style.transform = 'translateY(0)'; this.popup.style.transform = 'none';
document.body.setAttribute('style', `overflow: hidden; top: -${window.scrollY}px`) document.body.setAttribute('style', `overflow: hidden; top: -${window.scrollY}px`)
return this.popupStack return this.popupStack
} }
@ -2119,7 +2080,7 @@ customElements.define('sm-popup', class extends HTMLElement {
if (window.innerWidth < 640) if (window.innerWidth < 640)
this.popup.style.transform = 'translateY(100%)'; this.popup.style.transform = 'translateY(100%)';
else else
this.popup.style.transform = 'translateY(1rem)'; this.popup.style.transform = 'translateY(3rem)';
this.popupContainer.classList.add('hide') this.popupContainer.classList.add('hide')
this.removeAttribute('open') this.removeAttribute('open')
if (typeof this.popupStack !== 'undefined') { if (typeof this.popupStack !== 'undefined') {
@ -2998,9 +2959,9 @@ smMenu.innerHTML = `
.moveUp{ .moveUp{
top: auto; top: auto;
bottom: 100%; bottom: 100%;
-webkit-transform: translateY(1rem); -webkit-transform: translateY(3rem);
-ms-transform: translateY(1rem); -ms-transform: translateY(3rem);
transform: translateY(1rem); transform: translateY(3rem);
} }
.moveLeft{ .moveLeft{
left: auto; left: auto;

5
css/main.css
View File

@ -725,6 +725,11 @@ td {
opacity: 0.9; opacity: 0.9;
} }
.text-field {
min-width: 20ch;
max-width: 30ch;
}
.grade-input { .grade-input {
width: 10ch; width: 10ch;
} }

2
css/main.min.css vendored
View File

File diff suppressed because one or more lines are too long

4
css/main.scss
View File

@ -716,6 +716,10 @@ td{
padding: 0.4rem 0.8rem; padding: 0.4rem 0.8rem;
opacity: 0.9; opacity: 0.9;
} }
.text-field{
min-width: 20ch;
max-width: 30ch;
}
.grade-input{ .grade-input{
width: 10ch; width: 10ch;
} }

1938
css/welcome.ai Normal file
View File

File diff suppressed because one or more lines are too long

4
index.html
View File

@ -1078,7 +1078,7 @@
function createSheet() { function createSheet() {
try { try {
let title = sheetTitleInput.value.trim().replace(" ", "_"); let title = sheetTitleInput.value.trim().replace(/ /g, "_");
let description = sheetDescriptionInput.value.trim(); let description = sheetDescriptionInput.value.trim();
let columns = [] let columns = []
let editors = [] let editors = []
@ -1221,6 +1221,8 @@
} }
function createCell(text){ function createCell(text){
let cell = document.createElement('td') let cell = document.createElement('td')
/*if(text.split(/,|:| /).length > 5)
cell.classList.add('text-field')*/
cell.textContent = text cell.textContent = text
return cell return cell
} }