mirrors/phanpy
1
0
Fork 0
mirror of https://github.com/cheeaun/phanpy.git synced 2025-03-14 04:08:32 +03:00
Code Issues Projects Releases Packages Wiki Activity

Fix text-expander positioning bug

Browse source 
Also fix related bugs
This commit is contained in:
Lim Chee Aun 2023-01-29 21:45:59 +08:00
parent 09272e8407
commit cc2d4d4cc1
2 changed files with 27 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
src/components/compose.css
View file

@ -199,21 +199,22 @@
#compose-container text-expander {
position: relative;
display: block;
}
#compose-container .text-expander-menu {
color: var(--text-color);
background-color: var(--bg-color);
position: absolute;
margin: 0 0 0 -8px;
margin-top: 2em;
padding: 0;
list-style: none;
border: 1px solid var(--outline-color);
/* box-shadow: 0 0 12px var(--outline-color); */
box-shadow: 0 4px 24px var(--drop-shadow-color);
border-radius: 8px;
overflow: hidden;
top: 0 !important;
z-index: 100;
min-width: 50vw;
min-width: 10em;
max-width: 90vw;
}
#compose-container .text-expander-menu li {
white-space: nowrap;
@ -235,10 +236,16 @@
width: 2.2em;
height: 2.2em;
}
#compose-container .text-expander-menu li:is(:hover, :focus) {
#compose-container .text-expander-menu li:is(:hover, :focus, [aria-selected]) {
color: var(--bg-color);
background-color: var(--link-color);
}
#compose-container
.text-expander-menu:hover
li[aria-selected]:not(:hover, :focus) {
color: var(--text-color);
background-color: var(--bg-color);
}
#compose-container .media-attachments {
background-color: var(--bg-faded-color);

15
src/components/compose.jsx
View file

@ -63,6 +63,21 @@ const menu = document.createElement('ul');
menu.role = 'listbox';
menu.className = 'text-expander-menu';
// Set IntersectionObserver on menu, reposition it because text-expander doesn't handle it
const windowMargin = 16;
const observer = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
const { left, width } = entry.boundingClientRect;
const { innerWidth } = window;
if (left + width > innerWidth) {
menu.style.left = innerWidth - width - windowMargin + 'px';
}
}
});
});
observer.observe(menu);
const DEFAULT_LANG = 'en';
// https://github.com/mastodon/mastodon/blob/c4a429ed47e85a6bbf0d470a41cc2f64cf120c19/app/javascript/mastodon/features/compose/util/counter.js