flashii/mami
1
0
Fork 0
Code Pull requests Releases Activity

Improved animation quality for users and settings sidebars.

Browse source
This commit is contained in:
flash 2024-01-22 22:35:10 +00:00
parent f539c46954
commit a72e605097
3 changed files with 76 additions and 41 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/mami.css/setting.css
View file

@ -3,10 +3,6 @@ select {
accent-color: currentcolor;
}
.setting__category {
transition: max-height .2s;
}
.setting__category-title {
font-size: 2em;
line-height: 1.1em;

85
src/mami.js/ui/settings.jsx
View file

@ -1,3 +1,4 @@
#include animate.js
#include common.js
#include emotes.js
#include utility.js
@ -462,31 +463,55 @@ Umi.UI.Settings = (function() {
const createCategory = function(category) {
const catHeader = <div class={['setting__category-title', `setting__category-title--${category.name}`]} style={{ cursor: 'pointer' }}>{category.title}</div>;
const catBody = <div class={['setting__category', `setting__category--${category.name}`]} style={{ overflow: 'hidden' }}/>;
const catContainer = <div>{catHeader}{catBody}</div>;
catHeader.onclick = () => {
if(catBody.dataset.mamiClosed) {
delete catBody.dataset.mamiClosed;
catBody.style.maxHeight = null;
const meow = catBody.clientHeight;
catBody.style.maxHeight = '0';
setTimeout(function() {
catBody.style.maxHeight = meow.toString() + 'px';
}, 50);
} else {
catBody.dataset.mamiClosed = 1;
if(!catBody.style.maxHeight) {
catBody.style.maxHeight = catBody.clientHeight.toString() + 'px';
setTimeout(function() {
catBody.style.maxHeight = '0';
}, 50);
} else catBody.style.maxHeight = '0';
}
};
if(catContainer.dataset.mamiAnimRun === 'yes')
return;
catContainer.dataset.mamiAnimRun = 'yes';
if(category.collapse) {
catBody.dataset.mamiClosed = 1;
catBody.style.maxHeight = '0';
}
let start, update, end, height;
if(catContainer.dataset.mamiIsClosed === 'yes') {
catContainer.dataset.mamiIsClosed = 'no';
start = () => {
const curHeight = catBody.style.height;
catBody.style.height = null;
height = catBody.clientHeight;
catBody.style.height = curHeight;
};
update = t => {
catBody.style.height = `${height * t}px`;
};
end = () => {
catBody.style.height = null;
catContainer.dataset.mamiAnimRun = 'no';
};
} else {
catContainer.dataset.mamiIsClosed = 'yes';
start = () => {
height = catBody.clientHeight;
};
update = t => {
catBody.style.height = `${height - (height * t)}px`;
};
end = () => {
catBody.style.height = '0';
catContainer.dataset.mamiAnimRun = 'no';
};
}
// todo: actually make cancellable
MamiAnimate({
duration: 500,
easing: 'easeOutExpo',
start: start,
update: update,
end: end,
});
};
if(category.warning)
catBody.appendChild(<div style={{ fontSize: '.9em', lineHeight: '1.4em', margin: '5px', padding: '5px', backgroundColor: 'darkred', border: '2px solid red', borderRadius: '5px' }}>{category.warning}</div>);
@ -495,10 +520,7 @@ Umi.UI.Settings = (function() {
for(const item of category.items)
catBody.appendChild(createSetting(item));
return <div>
{catHeader}
{catBody}
</div>;
return catContainer;
};
return {
@ -506,8 +528,15 @@ Umi.UI.Settings = (function() {
const html = Umi.UI.Menus.Get('settings');
$rc(html);
for(const category of items)
html.appendChild(createCategory(category));
for(const category of items) {
const elem = createCategory(category);
html.appendChild(elem);
// only a little bit of hacking, stan
if(category.collapse)
elem.firstChild.click();
}
html.appendChild(createCopyright());
},

28
src/mami.js/ui/users.js
View file

@ -13,9 +13,7 @@ Umi.UI.Users = (function() {
userOptions = $i(prefix + '-options-wrapper'),
closedClass = 'sidebar__user-options--hidden',
isClosed = userOptions.classList.contains(closedClass);
let update = null,
start = null,
end = null;
let start, update, end, height;
if(prefix in toggleTimeouts) {
clearTimeout(toggleTimeouts[prefix]);
@ -29,21 +27,33 @@ Umi.UI.Users = (function() {
toggleUser(id);
}, 300000);
start = function() {
start = () => {
userOptions.classList.remove(closedClass);
const curHeight = userOptions.style.height;
userOptions.style.height = null;
height = userOptions.clientHeight;
userOptions.style.height = curHeight;
};
update = function(t) {
userOptions.style.maxHeight = (230 * t).toString() + 'px';
userOptions.style.height = `${height * t}px`;
};
end = () => {
userOptions.style.height = null;
};
} else {
end = function() {
userOptions.classList.add(closedClass);
start = () => {
height = userOptions.clientHeight;
};
update = function(t) {
userOptions.style.maxHeight = (230 - (230 * t)).toString() + 'px';
update = t => {
userOptions.style.height = `${height - (height * t)}px`;
};
end = () => {
userOptions.style.height = '0';
userOptions.classList.add(closedClass);
};
}
// todo: actually make cancellable
MamiAnimate({
duration: 500,
easing: 'easeOutExpo',