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

Date picker schedule css 

Improve smoothness of inner chat animation
master
Eduard Kuzmenko 4 years ago
parent
cbd9c28d3e
commit
be0e8f545d
6 changed files with 107 additions and 16 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      src/components/transition.ts
  2. 45
      src/lib/appManagers/appImManager.ts
  3. 47
      src/scss/partials/_chat.scss
  4. 2
      src/scss/partials/_chatMarkupTooltip.scss
  5. 4
      src/scss/partials/_leftSidebar.scss
  6. 23
      src/scss/partials/popups/_datePicker.scss

2
src/components/transition.ts
Unescape View File

@ -53,7 +53,7 @@ function slideTabs(tabContent: HTMLElement, prevTabContent: HTMLElement, toRight
}; };
} */ } */
export const TransitionSlider = (content: HTMLElement, type: 'tabs' | 'navigation' | 'zoom-fade'/* | 'counter' */, transitionTime: number, onTransitionEnd?: (id: number) => void) => { export const TransitionSlider = (content: HTMLElement, type: 'tabs' | 'navigation' | 'zoom-fade' | 'none'/* | 'counter' */, transitionTime: number, onTransitionEnd?: (id: number) => void) => {
let animationFunction: TransitionFunction = null; let animationFunction: TransitionFunction = null;
switch(type) { switch(type) {

45
src/lib/appManagers/appImManager.ts
Unescape View File

@ -1,6 +1,5 @@
//import apiManager from '../mtproto/apiManager'; //import apiManager from '../mtproto/apiManager';
import animationIntersector from '../../components/animationIntersector'; import animationIntersector from '../../components/animationIntersector';
import { horizontalMenu } from '../../components/horizontalMenu';
import appSidebarLeft from "../../components/sidebarLeft"; import appSidebarLeft from "../../components/sidebarLeft";
import appSidebarRight, { AppSidebarRight, RIGHT_COLUMN_ACTIVE_CLASSNAME } from '../../components/sidebarRight'; import appSidebarRight, { AppSidebarRight, RIGHT_COLUMN_ACTIVE_CLASSNAME } from '../../components/sidebarRight';
import mediaSizes, { ScreenSize } from '../../helpers/mediaSizes'; import mediaSizes, { ScreenSize } from '../../helpers/mediaSizes';
@ -22,13 +21,13 @@ import appStickersManager from './appStickersManager';
import appWebPagesManager from './appWebPagesManager'; import appWebPagesManager from './appWebPagesManager';
import { cancelEvent, getFilesFromEvent, placeCaretAtEnd } from '../../helpers/dom'; import { cancelEvent, getFilesFromEvent, placeCaretAtEnd } from '../../helpers/dom';
import PopupNewMedia from '../../components/popups/newMedia'; import PopupNewMedia from '../../components/popups/newMedia';
import { TransitionSlider } from '../../components/transition';
import { numberWithCommas } from '../../helpers/number'; import { numberWithCommas } from '../../helpers/number';
import MarkupTooltip from '../../components/chat/markupTooltip'; import MarkupTooltip from '../../components/chat/markupTooltip';
import { isTouchSupported } from '../../helpers/touchSupport'; import { isTouchSupported } from '../../helpers/touchSupport';
import appPollsManager from './appPollsManager'; import appPollsManager from './appPollsManager';
import SetTransition from '../../components/singleTransition'; import SetTransition from '../../components/singleTransition';
import ChatDragAndDrop from '../../components/chat/dragAndDrop'; import ChatDragAndDrop from '../../components/chat/dragAndDrop';
import { debounce } from '../../helpers/schedulers';
//console.log('appImManager included33!'); //console.log('appImManager included33!');
@ -42,7 +41,7 @@ export class AppImManager {
public columnEl = document.getElementById('column-center') as HTMLDivElement; public columnEl = document.getElementById('column-center') as HTMLDivElement;
public chatsContainer: HTMLElement; public chatsContainer: HTMLElement;
public chatsSelectTab: ReturnType<typeof horizontalMenu>; //public chatsSelectTab: ReturnType<typeof horizontalMenu>;
public offline = false; public offline = false;
public updateStatusInterval = 0; public updateStatusInterval = 0;
@ -58,7 +57,9 @@ export class AppImManager {
public hideRightSidebar = false; public hideRightSidebar = false;
private chats: Chat[] = []; private chats: Chat[] = [];
private prevTab: HTMLElement;
private chatsSelectTabDebounced: () => void;
public markupTooltip: MarkupTooltip; public markupTooltip: MarkupTooltip;
get myId() { get myId() {
@ -119,19 +120,19 @@ export class AppImManager {
this.chatsContainer = document.createElement('div'); this.chatsContainer = document.createElement('div');
this.chatsContainer.classList.add('chats-container', 'tabs-container'); this.chatsContainer.classList.add('chats-container', 'tabs-container');
this.chatsSelectTab = TransitionSlider(this.chatsContainer, 'navigation', 250, (id) => { this.columnEl.append(this.chatsContainer);
this.chatsSelectTabDebounced = debounce(() => {
const topbar = this.chat.topbar; const topbar = this.chat.topbar;
if(topbar.pinnedMessage) { // * буду молиться богам, чтобы это ничего не сломало, но это исправляет получение пиннеда после анимации if(topbar.pinnedMessage) { // * буду молиться богам, чтобы это ничего не сломало, но это исправляет получение пиннеда после анимации
topbar.pinnedMessage.setCorrectIndex(0); topbar.pinnedMessage.setCorrectIndex(0);
} }
apiManager.setQueueId(this.chat.bubbles.lazyLoadQueue.queueId); apiManager.setQueueId(this.chat.bubbles.lazyLoadQueue.queueId);
}); }, 250, false, true);
this.columnEl.append(this.chatsContainer);
this.createNewChat(); this.createNewChat();
this.chatsSelectTab(0); this.chatsSelectTab(this.chat.container);
window.addEventListener('hashchange', (e) => { window.addEventListener('hashchange', (e) => {
const hash = location.hash; const hash = location.hash;
@ -169,6 +170,20 @@ export class AppImManager {
//apiUpdatesManager.attach(); //apiUpdatesManager.attach();
} }
private chatsSelectTab(tab: HTMLElement) {
if(this.prevTab === tab) {
return;
}
if(this.prevTab) {
this.prevTab.classList.remove('active');
this.chatsSelectTabDebounced();
}
tab.classList.add('active');
this.prevTab = tab;
}
private init() { private init() {
document.addEventListener('paste', this.onDocumentPaste, true); document.addEventListener('paste', this.onDocumentPaste, true);
@ -498,9 +513,16 @@ export class AppImManager {
return this.setPeer(peerId, lastMsgId); return this.setPeer(peerId, lastMsgId);
} }
// * don't reset peer if returning
if(peerId === chat.peerId && mediaSizes.activeScreen === ScreenSize.mobile && document.body.classList.contains(LEFT_COLUMN_ACTIVE_CLASSNAME)) {
this.selectTab(1);
return false;
}
if(peerId || mediaSizes.activeScreen !== ScreenSize.mobile) { if(peerId || mediaSizes.activeScreen !== ScreenSize.mobile) {
const result = chat.setPeer(peerId, lastMsgId); const result = chat.setPeer(peerId, lastMsgId);
// * wait for cached render
const promise = result?.cached ? result.promise : Promise.resolve(); const promise = result?.cached ? result.promise : Promise.resolve();
if(peerId) { if(peerId) {
promise.then(() => { promise.then(() => {
@ -511,6 +533,9 @@ export class AppImManager {
this.hideRightSidebar = false; this.hideRightSidebar = false;
} }
setTimeout(() => {
this.chatsSelectTab(this.chat.container);
}, 0);
this.selectTab(1); this.selectTab(1);
}, 0); }, 0);
}); });
@ -537,7 +562,7 @@ export class AppImManager {
this.chat.setType(type); this.chat.setType(type);
} }
this.chatsSelectTab(this.chat.container); //this.chatsSelectTab(this.chat.container);
return this.setPeer(peerId, lastMsgId); return this.setPeer(peerId, lastMsgId);
} }

47
src/scss/partials/_chat.scss
Unescape View File

@ -444,12 +444,57 @@ $chat-helper-size: 39px;
} }
.chat { .chat {
display: flex; display: flex !important;
// padding: 200px; // padding: 200px;
width: 100%; width: 100%;
align-items: center; align-items: center;
//overflow: hidden; //overflow: hidden;
flex-direction: column; flex-direction: column;
//z-index: 1;
&:not(.active):not(:last-child) {
filter: brightness(.8);
}
@include respond-to(no-floating-left-sidebar) {
&:not(.active) {
transform: translate3d(calc((100vw - min(calc(100vw * .4), 420px)) * -.25), 0, 0);
&:last-child { // * 420px - max left sidebar width, .4 - left sidebar width percents
transform: translate3d(calc(100vw - min(calc(100vw * .4), 420px)), 0, 0);
}
}
}
@include respond-to(large-screens) {
&:not(.active) {
transform: translate3d(calc((#{$large-screen} - var(--right-column-width)) * -.25), 0, 0);
&:last-child {
transform: translate3d(calc(#{$large-screen} - var(--right-column-width)), 0, 0);
}
}
}
@include respond-to(only-medium-screens) {
&:not(.active) {
transform: translate3d(-25vw, 0, 0);
&:last-child {
transform: translate3d(75vw, 0, 0);
}
}
}
@include respond-to(until-floating-left-sidebar) {
&:not(.active) {
transform: translate3d(-25vw, 0, 0);
&:last-child {
transform: translate3d(100vw, 0, 0);
}
}
}
&-background { &-background {
overflow: hidden; overflow: hidden;

2
src/scss/partials/_chatMarkupTooltip.scss
Unescape View File

@ -21,7 +21,7 @@
top: 0; top: 0;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: start; justify-content: flex-start;
//width: 420px; //width: 420px;
width: #{$widthRegular + $widthLink}; width: #{$widthRegular + $widthLink};
height: 100%; height: 100%;

4
src/scss/partials/_leftSidebar.scss
Unescape View File

@ -62,7 +62,7 @@
border-bottom: none; border-bottom: none;
ul { ul {
justify-content: start; justify-content: flex-start;
z-index: 0; z-index: 0;
} }
@ -552,7 +552,7 @@
p { p {
height: unset; height: unset;
justify-content: start; justify-content: flex-start;
} }
p:last-child { p:last-child {

23
src/scss/partials/popups/_datePicker.scss
Unescape View File

@ -1,5 +1,6 @@
.popup-date-picker { .popup-date-picker {
$parent: ".popup"; $parent: ".popup";
user-select: none;
#{$parent} { #{$parent} {
&-container { &-container {
@ -114,6 +115,9 @@
.popup-schedule { .popup-schedule {
.popup-header { .popup-header {
justify-content: space-between; justify-content: space-between;
margin-top: 5px;
margin-bottom: 17px;
margin-left: 0;
.btn-icon { .btn-icon {
font-size: 22px; font-size: 22px;
@ -127,10 +131,15 @@
.popup-container { .popup-container {
min-width: 420px; min-width: 420px;
width: 420px; width: 420px;
padding: 4px 16px 16px 16px;
} }
.date-picker { .date-picker {
&-month { &-month {
margin-right: -20px;
margin-left: 2px;
width: unset;
&-title { &-title {
font-weight: 500; font-weight: 500;
font-size: 20px; font-size: 20px;
@ -138,8 +147,12 @@
} }
.btn-icon { .btn-icon {
justify-self: auto;
font-weight: 500; font-weight: 500;
font-size: 15px; font-size: 14px;
width: 36px;
height: 36px;
margin-top: -4px;
} }
&-date:disabled { &-date:disabled {
@ -153,6 +166,10 @@
} }
} }
&-months {
margin-bottom: 14px;
}
&-time { &-time {
display: flex; display: flex;
justify-content: center; justify-content: center;
@ -182,4 +199,8 @@
} }
} }
} }
.btn-primary {
font-weight: normal;
}
} }
Write Preview
Loading…
Cancel
Save