r4sas/tweb-i2p
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

impoved search & media upload & scroll & preloaders

Browse Source
This commit is contained in:
Eduard Kuzmenko 2020-02-07 21:17:39 +07:00
parent e91e725327
commit 558c168a8e
14 changed files with 280 additions and 151 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

110
src/components/misc.ts
View File

@ -7,6 +7,7 @@ import appStickersManager from "../lib/appManagers/appStickersManager";
import appDocsManager from "../lib/appManagers/appDocsManager";
import {AppImManager} from "../lib/appManagers/appImManager";
import {AppMediaViewer} from '../lib/appManagers/appMediaViewer';
import { RichTextProcessor } from "../lib/richtextprocessor";
export type MTDocument = {
_: 'document',
@ -24,7 +25,9 @@ export type MTDocument = {
type?: string,
h?: number,
w?: number
w?: number,
file_name?: string,
file?: File
};
export type MTPhotoSize = {
@ -100,7 +103,7 @@ export function putPreloader(elem: Element) {
}
export class ProgressivePreloader {
private preloader: HTMLDivElement = null;
public preloader: HTMLDivElement = null;
private circle: SVGCircleElement = null;
private progress = 0;
constructor(elem?: Element, private cancelable = true) {
@ -108,9 +111,11 @@ export class ProgressivePreloader {
this.preloader.classList.add('preloader-container');
this.preloader.innerHTML = `
<svg xmlns="http://www.w3.org/2000/svg" class="preloader-circular" viewBox="25 25 50 50">
<circle class="preloader-path-new" cx="50" cy="50" r="23" fill="none" stroke-miterlimit="10"/>
</svg>`;
<div class="you-spin-me-round">
<svg xmlns="http://www.w3.org/2000/svg" class="preloader-circular" viewBox="25 25 50 50">
<circle class="preloader-path-new" cx="50" cy="50" r="23" fill="none" stroke-miterlimit="10"/>
</svg>
</div>`;
if(cancelable) {
this.preloader.innerHTML += `
@ -122,15 +127,15 @@ export class ProgressivePreloader {
this.preloader.classList.add('preloader-swing');
}
this.circle = this.preloader.firstElementChild.firstElementChild as SVGCircleElement;
this.circle = this.preloader.firstElementChild.firstElementChild.firstElementChild as SVGCircleElement;
if(elem) {
this.attach(elem);
}
}
public attach(elem: Element) {
if(this.cancelable) {
public attach(elem: Element, reset = true) {
if(this.cancelable && reset) {
this.setProgress(0);
}
@ -168,7 +173,7 @@ export class ProgressivePreloader {
let totalLength = this.circle.getTotalLength();
console.log('setProgress', (percents / 100 * totalLength));
this.circle.style.strokeDasharray = '' + (percents / 100 * totalLength);
this.circle.style.strokeDasharray = '' + Math.max(5, percents / 100 * totalLength) + ', 200';
}
}
@ -313,16 +318,17 @@ export function wrapDocument(doc: MTDocument, withTime = false): HTMLDivElement
let iconDiv = document.createElement('div');
iconDiv.classList.add('tgico-document');
let attributeFilename: {
_: 'documentAttributeFilename',
file_name: string
} = doc.attributes.find((a: any) => a._ == "documentAttributeFilename");
let extSplitted = attributeFilename ? attributeFilename.file_name.split('.') : '';
let extSplitted = doc.file_name ? doc.file_name.split('.') : '';
let ext = '';
ext = extSplitted.length > 1 && Array.isArray(extSplitted) ? extSplitted.pop().toLowerCase() : 'file';
let ext2 = ext;
if(doc.type == 'photo') {
docDiv.classList.add('photo');
ext2 = `<img src="${URL.createObjectURL(doc.file)}">`;
}
let fileName = attributeFilename ? attributeFilename.file_name : 'Unknown.file';
let fileName = doc.file_name || 'Unknown.file';
let size = formatBytes(doc.size);
if(withTime) {
@ -334,7 +340,7 @@ export function wrapDocument(doc: MTDocument, withTime = false): HTMLDivElement
}
docDiv.innerHTML = `
<div class="document-ico ext-${ext}">${ext}</div>
<div class="document-ico ext-${ext}">${ext2}</div>
<div class="document-name">${fileName}</div>
<div class="document-size">${size}</div>
`;
@ -347,18 +353,84 @@ export function scrollable(el: HTMLDivElement, x = false, y = true) {
container.classList.add('scrollable');
if(x) container.classList.add('scrollable-x');
if(y) container.classList.add('scrollable-y');
let type = x ? 'width' : 'height';
let side = x ? 'left' : 'top';
let scrollType = x ? 'scrollWidth' : 'scrollHeight';
let scrollSide = x ? 'scrollLeft' : 'scrollTop';
container.addEventListener('mouseover', () => {
container.classList.add('active');
resize();
/* container.classList.add('active');
container.addEventListener('mouseout', () => {
container.classList.remove('active');
}, {once: true});
}, {once: true}); */
});
let thumb = document.createElement('div');
thumb.className = 'scrollbar-thumb';
// @ts-ignore
thumb.style[type] = '30px';
let resize = () => {
// @ts-ignore
scrollHeight = container[scrollType];
let rect = container.getBoundingClientRect();
// @ts-ignore
height = rect[type];
if(!height || height == scrollHeight) {
thumbHeight = 0;
// @ts-ignore
thumb.style[type] = thumbHeight + 'px';
return;
}
//if(!height) return;
let divider = scrollHeight / height / 0.5;
thumbHeight = height / divider;
if(thumbHeight < 20) thumbHeight = 20;
// @ts-ignore
thumb.style[type] = thumbHeight + 'px';
// @ts-ignore
console.log('onresize', thumb.style[type], thumbHeight, height);
};
let scrollHeight = -1;
let height = 0;
let thumbHeight = 0;
window.addEventListener('resize', resize);
//container.addEventListener('DOMNodeInserted', resize);
container.addEventListener('scroll', (e) => {
// @ts-ignore
if(container[scrollType] != scrollHeight || thumbHeight == 0) {
resize();
}
// @ts-ignore
let value = container[scrollSide] / (scrollHeight - height) * 100;
let maxValue = 100 - (thumbHeight / height * 100);
console.log('onscroll', container.scrollHeight, thumbHeight, height, value, maxValue);
// @ts-ignore
thumb.style[side] = (value >= maxValue ? maxValue : value) + '%';
});
Array.from(el.children).forEach(c => container.append(c));
el.append(container);//container.append(el);
container.parentElement.append(thumb);
resize();
return container;
}

10
src/components/pageIm.ts
View File

@ -176,9 +176,9 @@ let initEmoticonsDropdown = (pageEl: HTMLDivElement,
let prevCategoryIndex = 1;
let menu = contentEmojiDiv.nextElementSibling as HTMLUListElement;
let emojiScroll = scrollable(contentEmojiDiv);
emojiScroll.onscroll = (e) => {
emojiScroll.addEventListener('scroll', (e) => {
prevCategoryIndex = emoticonsContentOnScroll(menu, heights, prevCategoryIndex, emojiScroll);
};
});
emoticonsMenuOnClick(menu, heights, emojiScroll);
}
@ -342,12 +342,12 @@ let initEmoticonsDropdown = (pageEl: HTMLDivElement,
let prevCategoryIndex = 0;
let stickersScroll = scrollable(contentStickersDiv);
stickersScroll.onscroll = (e) => {
stickersScroll.addEventListener('scroll', (e) => {
lazyLoadQueue.check();
lottieLoader.checkAnimations();
prevCategoryIndex = emoticonsContentOnScroll(menu, heights, prevCategoryIndex, stickersScroll);
};
});
emoticonsMenuOnClick(menu, heights, stickersScroll);
@ -423,7 +423,7 @@ export default () => import('../lib/services').then(services => {
}
};
chatsScroll.onscroll = onScroll;
chatsScroll.addEventListener('scroll', onScroll);
window.addEventListener('resize', () => {
setTimeout(onScroll, 0);
});

2
src/lib/appManagers/appDocsManager.ts
View File

@ -34,7 +34,7 @@ class AppDocsManager {
apiDoc.attributes.forEach((attribute: any) => {
switch(attribute._) {
case 'documentAttributeFilename':
apiDoc.file_name = attribute.file_name
apiDoc.file_name = RichTextProcessor.wrapPlainText(attribute.file_name);
break;
case 'documentAttributeAudio':

48
src/lib/appManagers/appImManager.ts
View File

@ -15,6 +15,7 @@ import lottieLoader from "../lottieLoader";
import appMediaViewer from "./appMediaViewer";
import appSidebarLeft from "./appSidebarLeft";
import appChatsManager from "./appChatsManager";
import appMessagesIDsManager from "./appMessagesIDsManager";
console.log('appImManager included!');
@ -352,8 +353,16 @@ export class AppImManager {
let max = Math.max(...readed);
let min = Math.min(...readed);
if(this.peerID < 0) {
max = appMessagesIDsManager.getMessageIDInfo(max)[0];
min = appMessagesIDsManager.getMessageIDInfo(min)[0];
}
//appMessagesManager.readMessages(readed);
appMessagesManager.readHistory(this.peerID, max, min);
appMessagesManager.readHistory(this.peerID, max, min).catch((err: any) => {
this.log.error('readHistory err:', err);
appMessagesManager.readHistory(this.peerID, max, min);
});
}
if(this.scroll.scrollHeight - (this.scroll.scrollTop + this.scroll.offsetHeight) == 0/* <= 5 */) {
@ -422,7 +431,7 @@ export class AppImManager {
public setScroll(scroll: HTMLDivElement) {
this.scroll = scroll;
this.scrollPosition = new ScrollPosition(this.chatInner);
this.scroll.onscroll = this.onScroll.bind(this);
this.scroll.addEventListener('scroll', this.onScroll.bind(this));
}
public setPeerStatus() {
@ -759,6 +768,41 @@ export class AppImManager {
let processingWebPage = false;
switch(message.media._) {
case 'messageMediaPending': {
let pending = message.media;
let preloader = pending.preloader as ProgressivePreloader;
switch(pending.type) {
case 'photo': {
if(pending.size < 1e6) {
let img = new Image();
img.src = URL.createObjectURL(pending.file);
attachmentDiv.append(img);
preloader.attach(attachmentDiv, false);
break;
}
}
case 'audio':
case 'document': {
let docDiv = wrapDocument(pending);
let icoDiv = docDiv.querySelector('.document-ico');
preloader.attach(icoDiv, false);
messageDiv.classList.remove('message-empty');
messageDiv.append(docDiv);
processingWebPage = true;
break;
}
}
break;
}
case 'messageMediaPhoto': {
let photo = message.media.photo;
this.log('messageMediaPhoto', photo);

10
src/lib/appManagers/appMediaViewer.ts
View File

@ -166,14 +166,18 @@ export class AppMediaViewer {
appDialogsManager.loadDialogPhoto(this.author.avatarEl, message.fromID);
this.overlaysDiv.classList.add('active');
container.classList.add('loading');
if(isVideo) {
//this.preloader.attach(container);
//this.preloader.setProgress(75);
this.log('will wrap video');
wrapVideo.call(this, media, container, message, false, this.preloader);
wrapVideo.call(this, media, container, message, false, this.preloader).then(() => {
container.classList.remove('loading');
});
} else {
let size = appPhotosManager.setAttachmentSize(media.id, container, appPhotosManager.windowW, appPhotosManager.windowH);
@ -195,6 +199,8 @@ export class AppMediaViewer {
let image = new Image();
image.src = URL.createObjectURL(blob);
container.append(image);
container.classList.remove('loading');
container.style.width = '';
container.style.height = '';

47
src/lib/appManagers/appMessagesManager.ts
View File

@ -13,7 +13,7 @@ import AppStorage from '../storage';
import AppPeersManager from "./appPeersManager";
import ServerTimeManager from "../mtproto/serverTimeManager";
import apiFileManager, { CancellablePromise } from "../mtproto/apiFileManager";
import { MTDocument } from "../../components/misc";
import { MTDocument, ProgressivePreloader } from "../../components/misc";
import appDocsManager from "./appDocsManager";
type HistoryStorage = {
@ -438,11 +438,15 @@ export class AppMessagesManager {
flags |= 256;
}
let preloader = new ProgressivePreloader(null, true);
var media = {
_: 'messageMediaPending',
type: attachType,
file_name: fileName || apiFileName,
size: file.size,
file: file,
preloader: preloader,
progress: {
percent: 1,
total: file.size,
@ -451,6 +455,11 @@ export class AppMessagesManager {
}
};
preloader.preloader.onclick = () => {
console.log('cancelling upload', media);
media.progress.cancel();
};
var message: any = {
_: 'message',
id: messageID,
@ -592,9 +601,10 @@ export class AppMessagesManager {
});
uploadPromise.notify = (progress: {done: number, total: number}) => {
// console.log('upload progress', progress)
console.log('upload progress', progress);
media.progress.done = progress.done;
media.progress.percent = Math.max(1, Math.floor(100 * progress.done / progress.total));
preloader.setProgress(media.progress.percent); // lol, nice
$rootScope.$broadcast('history_update', {peerID: peerID});
};
@ -604,10 +614,13 @@ export class AppMessagesManager {
uploadPromise.cancel();
this.cancelPendingMessage(randomIDS);
}
}
};
// @ts-ignore
uploadPromise['finally'](() => deferred.resolve());
uploadPromise['finally'](() => {
deferred.resolve();
preloader.detach();
});
});
this.sendFilePromise = deferred;
@ -626,7 +639,7 @@ export class AppMessagesManager {
public cancelPendingMessage(randomID: string) {
var pendingData = this.pendingByRandomID[randomID];
console.log('pending', randomID, pendingData);
console.log('cancelPendingMessage', randomID, pendingData);
if(pendingData) {
var peerID = pendingData[0];
@ -656,7 +669,7 @@ export class AppMessagesManager {
}
public async getConversation(peerID: number) {
var foundDialog = this.getDialogByPeerID(peerID)
var foundDialog = this.getDialogByPeerID(peerID);
if(foundDialog.length) {
return foundDialog[0];
}
@ -675,11 +688,11 @@ export class AppMessagesManager {
if(isSearch) {
if(!limit || this.cachedResults.query !== query) {
this.cachedResults.query = query
this.cachedResults.query = query;
var results: any = SearchIndexManager.search(query, this.dialogsIndex);
this.cachedResults.dialogs = []
this.cachedResults.dialogs = [];
this.dialogsStorage.dialogs.forEach((dialog: any) => {
if(results[dialog.peerID]) {
this.cachedResults.dialogs.push(dialog);
@ -701,11 +714,7 @@ export class AppMessagesManager {
}
}
if(
isSearch ||
this.allDialogsLoaded ||
curDialogStorage.dialogs.length >= offset + limit
) {
if(isSearch || this.allDialogsLoaded || curDialogStorage.dialogs.length >= offset + limit) {
return Promise.resolve({
dialogs: curDialogStorage.dialogs.slice(offset, offset + limit)
});
@ -1888,7 +1897,7 @@ export class AppMessagesManager {
this.newDialogsToHandle = {};
}
public readHistory(peerID: number, maxID = 0, minID = 0) {
public readHistory(peerID: number, maxID = 0, minID = 0): Promise<boolean> {
// console.trace('start read')
var isChannel = AppPeersManager.isChannel(peerID);
var historyStorage = this.historiesStorage[peerID];
@ -1896,7 +1905,7 @@ export class AppMessagesManager {
if(!foundDialog || !foundDialog.unread_count) {
if(!historyStorage || !historyStorage.history.length) {
return false;
return Promise.resolve(false);
}
let messageID, message;
@ -1911,12 +1920,12 @@ export class AppMessagesManager {
}
if(!foundUnread) {
return false;
return Promise.resolve(false);
}
}
if(historyStorage.readPromise) {
return historyStorage.readPromise;
return historyStorage.readPromise as Promise<boolean>;
}
var apiPromise: any;
@ -1958,7 +1967,11 @@ export class AppMessagesManager {
console.warn('readPromise:', index, historyStorage.history[index != -1 ? index : 0]);
foundDialog.read_inbox_max_id = historyStorage.history[index != -1 ? index : 0];
}
return true;
}
return false;
/* if(foundDialog) {
// console.log('done read history', peerID)
foundDialog.unread_count = 0

2
src/lib/appManagers/appSidebarLeft.ts
View File

@ -31,7 +31,7 @@ class AppSidebarLeft {
this.listsContainer = scrollable(this.searchContainer);
this.searchMessagesList = document.createElement('ul');
this.listsContainer.onscroll = this.onSidebarScroll.bind(this);
this.listsContainer.addEventListener('scroll', this.onSidebarScroll.bind(this));
this.searchContainer.append(this.listsContainer);

2
src/lib/appManagers/appSidebarRight.ts
View File

@ -117,7 +117,7 @@ class AppSidebarRight {
public setScroll(scroll: HTMLDivElement) {
this.sidebarScroll = scroll;
this.sidebarScroll.onscroll = this.onSidebarScroll.bind(this);
this.sidebarScroll.addEventListener('scroll', this.onSidebarScroll.bind(this));
/* this.sidebarScroll.options({
callbacks: {
onScroll: this.onSidebarScroll.bind(this)

6
src/lib/mtproto/apiFileManager.ts
View File

@ -52,7 +52,7 @@ export class ApiFileManager {
let promise = new Promise((resolve, reject) => {
// WARNING deferred!
downloadPull.push({cb: cb, deferred: {resolve, reject}, activeDelta: activeDelta});
});
}).catch(() => {});
setTimeout(() => {
this.downloadCheck(dcID);
@ -83,7 +83,9 @@ export class ApiFileManager {
data.deferred.resolve(result);
}, (error: any) => {
this.log.error('downloadCheck error:', error);
if(error) {
this.log.error('downloadCheck error:', error);
}
this.downloadActives[dcID] -= activeDelta;
this.downloadCheck(dcID);

3
src/lib/services.ts
View File

@ -11,6 +11,7 @@ import AppProfileManager from './appManagers/appProfileManager';
import AppImManager from './appManagers/appImManager';
import AppPeersManager from './appManagers/appPeersManager';
import AppStickersManager from './appManagers/appStickersManager';
import AppDocsManager from './appManagers/appDocsManager';
import AppSidebarRight from './appManagers/appSidebarRight';
import AppSidebarLeft from './appManagers/appSidebarLeft';
//import AppSharedMediaManager from './appManagers/appSharedMediaManager';
@ -26,6 +27,7 @@ export const appProfileManager = AppProfileManager;
export const appImManager = AppImManager;
export const appPeersManager = AppPeersManager;
export const appStickersManager = AppStickersManager;
export const appDocsManager = AppDocsManager;
//export const appSharedMediaManager = AppSharedMediaManager;
export const appSidebarRight = AppSidebarRight;
export const appSidebarLeft = AppSidebarLeft;
@ -38,6 +40,7 @@ export const appSidebarLeft = AppSidebarLeft;
appPeersManager,
appProfileManager,
appPhotosManager,
appDocsManager,
appDialogsManager,
appImManager,

72
src/scss/partials/_chat.scss
View File

@ -153,17 +153,13 @@
max-height: 100%;
flex: 1 1 auto; /* Lets middle column shrink/grow to available width */
overflow: hidden;
position: relative;
&:not(.scrolled-down) {
-webkit-mask-image: -webkit-linear-gradient(bottom, transparent, #000 20px);
mask-image: linear-gradient(0deg, transparent 0, #000 20px);
}
/* .os-content {
display: flex;
align-items: flex-end;
} */
.preloader {
width: 100%;
height: 100%;
@ -185,11 +181,6 @@
box-sizing: border-box;
min-height: 100%;
justify-content: flex-end;
& > * {
display: flex;
padding: 5px 0;
}
}
.service {
@ -200,7 +191,6 @@
.service-msg {
color: #fff;
background-color: rgba(#000, 0.22);
/* font-weight: 500; */
padding: 0 8px;
line-height: 24px;
font-size: 15px;
@ -210,8 +200,7 @@
}
.bubble {
/* max-width: 480px; */
/* max-height: 50vh; */
min-width: 60px;
max-width: 85%;
border-radius: 12px;
box-shadow: 0 1px 2px 0 rgba(16, 35, 47, 0.15);
@ -225,19 +214,8 @@
&.photo, &.video {
width: min-content;
/* .message {
width: min-content;
max-width: min-content;
/* .time {
max-width: min-content;
overflow: hidden;
}
} */
.box.web {
width: min-content;
/* max-width: min-content; */
max-width: 100%;
}
}
@ -245,6 +223,7 @@
&.webpage {
.time {
float: none;
width: 0;
}
}
@ -316,18 +295,9 @@
box-shadow: none;
max-width: 300px;
max-height: 300px;
/* width: 300px; // new
height: 300px; // new */
/* min-height: 250px; */
/* .attachment {
min-width: auto;
} */
.message.message-empty {
display: none;
/* border-radius: 12px; */
}
&:hover .message.message-empty {
@ -351,6 +321,7 @@
display: flex; // lol
justify-content: center;
position: relative;
img, video {
width: auto;
@ -378,11 +349,6 @@
}
}
/* * + .attachment {
border-top-left-radius: 0;
border-top-right-radius: 0;
} */
.box {
font-size: .95rem;
margin: .25rem;
@ -400,15 +366,8 @@
margin-bottom: 5px;
max-width: 100%;
overflow: hidden;
/* max-width: 320px; */
/* width: max-content; */
/* .quote {
// box-sizing: border-box;
} */
.preview {
/* height: 100px; */
max-height: 100%;
max-width: 100%;
border-radius: 4px;
@ -416,11 +375,10 @@
overflow: hidden;
user-select: none;
cursor: pointer;
position: relative;
img, video {
max-width: 100%;
/* width: auto;
height: auto; */
width: 100%;
height: 100%;
}
@ -466,7 +424,6 @@
.message {
font-size: 1rem;
/* padding: .25rem .6rem; */
padding: 0 .6rem .2675rem .6rem;
padding-top: 0;
overflow: hidden;
@ -483,13 +440,13 @@
}
&.message-empty {
/* display: none; */
position: absolute;
bottom: .1rem;
right: .1rem;
border-radius: 12px;
background-color: rgba(0, 0, 0, .3);
padding: .0rem .3rem;
background-color: rgba(0, 0, 0, .4);
padding: 0 .3rem;
z-index: 2;
.time {
color: #fff;
@ -501,10 +458,6 @@
}
}
/* &:hover .message-empty {
display: block;
} */
.time {
font-size: .8rem;
user-select: none;
@ -540,7 +493,7 @@
}
}
/* &.forwarded */.name {
.name {
cursor: pointer;
}
@ -570,7 +523,6 @@
background-repeat: no-repeat repeat;
content: '';
background-size: 11px 20px;
/* background-position: -2px -2px; */
}
}
@ -580,7 +532,9 @@
.in,
.out {
display: flex;
flex-direction: column;
padding: 5px 0;
}
.in {
@ -771,6 +725,8 @@
width: 1%;
max-height: inherit;
flex: 1 1 auto;
position: relative;
overflow: hidden;
}
.btn-icon {
@ -801,7 +757,7 @@
font-size: .95rem;
/* height: 100%; */
max-height: 30rem;
overflow-y: auto;
overflow-y: none;
resize: none;
border: none;
outline: none;

1
src/scss/partials/_leftSidebar.scss
View File

@ -13,6 +13,7 @@
#chats-container {
max-height: 100%;
overflow: hidden;
position: relative;
}
#search-container {

15
src/scss/partials/_mediaViewer.scss
View File

@ -90,11 +90,26 @@
display: flex;
align-items: center;
justify-content: center;
&.loading {
img, video {
object-fit: cover;
width: 100%;
height: 100%;
}
}
}
img, video {
max-height: calc(100vh - 100px);
max-width: calc(100vw - 16px);
}
img {
object-fit: contain;
}
video {
width: 100%;
height: 100%;
object-fit: cover;

103
src/scss/style.scss
View File

@ -285,11 +285,19 @@ input {
color: #fff;
font-weight: 500;
letter-spacing: 1px;
text-align: center;
font-size: 1.1rem;
padding-top: 1.5rem;
display: flex;
justify-content: center;
background-size: contain;
background-image: url('../assets/img/doc-in.svg');
overflow: hidden;
text-overflow: ellipsis;
}
&:not(.photo) {
.document-ico {
padding-top: 1.5rem;
background-image: url('../assets/img/doc-in.svg');
}
}
.document-name {
@ -305,6 +313,11 @@ input {
padding-right: 32px;
line-height: 1.3;
}
.preloader-container {
width: 42px;
height: 42px;
}
}
.page-signUp {
@ -719,11 +732,17 @@ $width: 100px;
height: 50px;
/* cursor: pointer; */
.preloader-circular {
cursor: pointer;
background-color: rgba(0, 0, 0, .5);
border-radius: 50%;
.you-spin-me-round {
width: 100%;
height: 100%;
animation: rotate 2s linear infinite;
}
.preloader-circular {
animation: none;
cursor: pointer;
background-color: rgba(0, 0, 0, .7);
border-radius: 50%;
width: 100%;
height: 100%;
}
@ -731,11 +750,10 @@ $width: 100px;
.preloader-path-new {
stroke-dasharray: 5, 200;
stroke-dashoffset: 0;
//animation: dash 1.5s ease-in-out infinite/* , color 6s ease-in-out infinite */;
transition: stroke-dasharray 400ms ease-in-out;
stroke-linecap: round;
stroke: white;
stroke-width: 1.5;
/* transition: .1s all; */
}
&.preloader-swing {
@ -1078,32 +1096,9 @@ $width: 100px;
}
}
div.scrollable-y::-webkit-scrollbar {
/* width: 4px; */
width: 10px;
}
/* ::-webkit-scrollbar-track {
} */
div.scrollable-y::-webkit-scrollbar-thumb {
border: 2px solid rgba(0, 0, 0, 0);
background-clip: padding-box;
}
::-webkit-scrollbar-thumb {
opacity: 0;
transition: .2s ease-in-out;
}
div.scrollable.active::-webkit-scrollbar-thumb {
border-radius: $border-radius;
background-color: rgba(0, 0, 0, 0.4);
opacity: 1;
div.scrollable::-webkit-scrollbar {
width: 0;
height: 0;
}
::-webkit-scrollbar-button {
@ -1121,25 +1116,45 @@ div.scrollable.active::-webkit-scrollbar-thumb {
overflow-y: hidden;
overflow-x: hidden;
max-height: 100%;
position: relative;
&.scrollable-x {
overflow-x: auto;
overflow-x: overlay;
}
&.scrollable-y {
overflow-y: auto;
overflow-y: overlay;
}
&.scrollable-x ~ .scrollbar-thumb {
top: auto;
right: auto;
width: auto;
height: 4px;
bottom: 0px;
}
}
div.scrollable-x::-webkit-scrollbar {
height: 4px;
.scrollbar-thumb {
position: absolute;
top: 0;
right: 2px;
width: 4px;
//margin-left: 2px;
background-color: #000;
cursor: grab;
opacity: 0;
transition-property: opacity,width,right;
transition-duration: .2s;
transition-timing-function: ease-in-out;
border-radius: $border-radius;
z-index: 2;
}
/* div.scrollable-x::-webkit-scrollbar-thumb {
border: none;
} */
:hover > .scrollbar-thumb {
opacity: .4;
}
.menu-horizontal {
width: 100%;
@ -1204,6 +1219,7 @@ div.scrollable-x::-webkit-scrollbar {
padding: 7.5px;
max-width: 100%;
overflow: hidden;
position: relative;
}
}
}
@ -1242,10 +1258,11 @@ div.scrollable-x::-webkit-scrollbar {
//display: none;
width: 0%;
/* grid-column: 3; */
position: relative;
transition: .2s ease-in-out;
> div {
> .scrollable {
min-width: 25vw;
}
}