nogafam
/
fedilove-ui
1
0
Fork 0
Code Issues 1 Pull Requests Projects Releases Wiki Activity

Improved account images navigation (not yet 100% rock-solid)

This commit is contained in:
Bofh 2021-01-03 19:32:11 +01:00
parent 0b2ac35e96
commit 213af5e91e
3 changed files with 79 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/routes/_components/status/Status.html
View File

@ -126,7 +126,8 @@
const { elementId, showContent } = this.get()
const { disableTapOnStatus } = this.store.get()
if (typeof window !== "undefined") {
if (!window.location.pathname.startsWith('/statuses/')) {
if (!window.location.pathname.startsWith('/statuses/') &&
!window.location.pathname.startsWith('/accounts')) {
registerClickDelegate(this, elementId, (e) => this.onClickOrKeydown(e))
}
}

27
src/scss/themes/ozark.scss
View File

@ -19,6 +19,9 @@ $nav-a-bg-hover: lighten($nav-bg, 25%);
$nav-a-border: #ffa700;
$nav-a-border-hover: #fff;
$nav-active-bg: lighten($nav-a-selected-bg-hover, 15%);
$button-primary: #ff1b3b;
$button-primary-hover: lighten($button-primary, 25%);
$button-primary-active: lighten($button-primary, 10%);
$main-border: #ececec;
$article-bg: #fff;
$deemphasized-text-color: #939393;
@ -32,9 +35,9 @@ $deemphasized-text-color: #939393;
--banner-fill: #{$nav-bg};
--action-button-fill-color: #000;
--button-primary-border: transparent;
--button-primary-bg: #{$nav-bg};
--button-primary-bg-hover: #{$nav-a-bg-hover};
--button-primary-bg-active: #{$nav-a-selected-bg};
--button-primary-bg: #{$button-primary};
--button-primary-bg-hover: #{$button-primary-hover};
--button-primary-bg-active: #{$button-primary-active};
--main-bg: #{$main-bg-color};
--nav-bg: #{$nav-bg};
--nav-text-color: #{$nav-text-color};
@ -63,6 +66,16 @@ nav#main-nav > ul.main-nav-ul {
color: #fff !important;
}
span.nav-link-badge {
width: .8em;
height: .8em;
background: red;
position: relative;
top: -1.2em;
left: .5em;
border: none !important;
}
svg.nav-link-svg.active {
fill: var(--nav-svg-fill-hover) !important;
}
@ -148,18 +161,18 @@ body.meet, body.account {
}
div#prev {
padding-right: 20%;
padding-right: 10%;
svg {
left: -.8em;
}
}
div#prev:focus, div#prev:active {
background-image: linear-gradient(to right, #fdfdfd1f, transparent);
background-image: linear-gradient(to right, #7574744a, transparent);
}
div#next {
padding-left: 20%;
padding-left: 10%;
right: 0;
svg {
@ -168,7 +181,7 @@ body.meet, body.account {
}
}
div#next:focus, div#next:active {
background-image: linear-gradient(to right, transparent, #fdfdfd1f);
background-image: linear-gradient(to right, transparent, #7574744a);
}
}

70
static/fedilove-no-react.js
View File

@ -61,37 +61,74 @@ function api_send_message() {
var fediloveUI = {
registerSwipeOnElement: function(selector, cbackFunc) {
var touchsurface = document.querySelector(selector),startX,startY,dist,threshold = 150,allowedTime = 200,elapsedTime,startTime;
var touchsurface;
if (typeof selector == "string")
touchsurface = document.querySelector(selector);
else if (typeof selector == "object")
touchsurface = selector;
else return true;
var startX,startY,dist,threshold = 30,allowedTime = 200,elapsedTime,startTime;
touchsurface.addEventListener('touchstart', function(e){
var touchobj = e.changedTouches[0]; dist = 0; startX = touchobj.pageX; startY = touchobj.pageY;
const touchobj = e.changedTouches[0]; dist = 0; startX = touchobj.pageX; startY = touchobj.pageY;
startTime = new Date().getTime(); e.preventDefault();
}, false);
touchsurface.addEventListener('touchmove', function(e){ e.preventDefault() }, false);
touchsurface.addEventListener('touchend', function(e){
var touchobj = e.changedTouches[0]; dist = touchobj.pageX - startX; elapsedTime = new Date().getTime() - startTime;
var swiperightBol = (elapsedTime <= allowedTime && dist >= threshold && Math.abs(touchobj.pageY - startY) <= 100);
const touchobj = e.changedTouches[0]; dist = touchobj.pageX - startX; elapsedTime = new Date().getTime() - startTime;
if (Math.abs(dist) < 20) { return e.preventDefault(); }
const swiperightBol = (elapsedTime <= allowedTime && dist >= threshold);
cbackFunc(swiperightBol); e.preventDefault();
}, false);
},
meetAccountImageDirection: function(direction) {
if (fediloveUI.meetAccountImageLocked) return;
fediloveUI.meetAccountImageLocked = true;
var dontMove = false;
if (direction === 'prev')
fediloveData.meetAccountCurrentImg -= 1;
else if (direction === 'next')
fediloveData.meetAccountCurrentImg += 1;
const last = $('div.virtual-list > div.virtual-list-item').length - 1;
if (fediloveData.meetAccountCurrentImg > last)
fediloveData.meetAccountCurrentImg = last;
else if (fediloveData.meetAccountCurrentImg < 0)
fediloveData.meetAccountCurrentImg = 0;
else
dontMove = true;
const last = $('div.virtual-list > div.virtual-list-item').length - 1;
if (fediloveData.meetAccountCurrentImg > last) {
fediloveData.meetAccountCurrentImg = last > 0 ? last : 0;
dontMove = true;
} else if (fediloveData.meetAccountCurrentImg < 0) {
fediloveData.meetAccountCurrentImg = 0;
dontMove = true;
}
document.querySelector('#meet-navigation > #profile-nav > #next').style = '';
document.querySelector('#meet-navigation > #profile-nav > #prev').style = '';
if (fediloveData.meetAccountCurrentImg === last)
document.querySelector('#meet-navigation > #profile-nav > #next').style = 'display: none';
else if (fediloveData.meetAccountCurrentImg === 0)
document.querySelector('#meet-navigation > #profile-nav > #prev').style = 'display: none';
else {
document.querySelector('#meet-navigation > #profile-nav > #next').style = '';
document.querySelector('#meet-navigation > #profile-nav > #prev').style = '';
}
const _setSelectedVisible = function() {
if ($('div.virtual-list > div.virtual-list-item')[fediloveData.meetAccountCurrentImg] !== undefined) {
$('div.virtual-list > div.virtual-list-item').attr('style', 'display: none');
$('div.virtual-list > div.virtual-list-item')[fediloveData.meetAccountCurrentImg].style = '';
}
fediloveUI.meetAccountImageLocked = false;
};
if (dontMove === false) {
if (direction === 'next')
$('div.virtual-list')[0].style.animation = 'dismissMeet .25s linear 1';
else if (direction === 'prev')
$('div.virtual-list')[0].style.animation = 'acceptMeet .25s linear 1';
setTimeout(function() {
if ($('div.virtual-list')[0] !== undefined) {
$('div.virtual-list')[0].style.animation = '';
_setSelectedVisible();
}
}, 220);
} else { _setSelectedVisible() }
},
meetPageGoToCurrentAccount: function(isRightSwipe) {
isRightSwipe = isRightSwipe || false;
@ -191,6 +228,7 @@ var fediloveFunctions = {
var fediloveData = {
chatAvatarCache: undefined,
meetAccountCurrentImg: 0,
meetAccountImageLocked: false,
gotEmojifyTextFunction: false,
composeTxtKeypressEvent: false
};
@ -420,6 +458,12 @@ function fedilove_customization() {
};
cloneBackSvg('#meet-navigation > #profile-nav > #prev');
cloneBackSvg('#meet-navigation > #profile-nav > #next');
fediloveUI.meetAccountImageDirection(null);
fediloveUI.registerSwipeOnElement('main.infinite-scroll-page', function(isRightSwipe) {
if (isRightSwipe)
fediloveUI.meetAccountImageDirection('prev');
else fediloveUI.meetAccountImageDirection('next');
});
}
else if (window.location.pathname == '/federated')
{