fix(ui): fix for active tab instances counting, few style fixes
This commit is contained in:
nick-delirium
parent
111d6a1b54
commit
e6377d03df
7 changed files with 50 additions and 57 deletions
|
|
@ -19,7 +19,7 @@ function SubHeader() {
|
|||
return (
|
||||
<>
|
||||
<div className="w-full px-4 pt-2 flex items-center border-b min-h-3">
|
||||
{tabs.map((tab, i) => (
|
||||
{Array.from(tabs).map((tab, i) => (
|
||||
<React.Fragment key={tab}>
|
||||
<Tab i={i} tab={tab} currentTab={tabs.length === 1 ? tab : currentTab} />
|
||||
</React.Fragment>
|
||||
|
|
|
|||
|
|
@ -15,10 +15,11 @@ function Tab({ i, tab, currentTab, changeTab }: Props) {
|
|||
style={{ marginBottom: '-2px' }}
|
||||
onClick={() => changeTab?.(tab)}
|
||||
className={cn(
|
||||
'self-end py-1 px-4 cursor-pointer',
|
||||
'self-end py-1 px-4 text-sm',
|
||||
changeTab && 'cursor-pointer',
|
||||
currentTab === tab
|
||||
? 'border-gray-light border-t border-l border-r !border-b-white bg-white rounded-tl rounded-tr font-semibold'
|
||||
: 'cursor-pointer border-gray-light !border-b !border-t-0 !border-l-0 !border-r-0'
|
||||
: 'cursor-pointer border-gray-light !border-b !border-t-transparent !border-l-transparent !border-r-transparent'
|
||||
)}
|
||||
>
|
||||
Tab {i + 1}
|
||||
|
|
|
|||
|
|
@ -130,18 +130,22 @@ class EventGroupWrapper extends React.Component {
|
|||
}
|
||||
}
|
||||
|
||||
function TabChange({ from, to }) { return (
|
||||
<div className={'text-center p-2 bg-gray-lightest w-full my-2 flex items-center gap-2 justify-center'}>
|
||||
<span>Tab change:</span>
|
||||
<span className={'font-semibold'}>
|
||||
{from}
|
||||
</span>
|
||||
<Icon name={"arrow-right-short"} size={18} color={"gray-dark"}/>
|
||||
<span className={'font-semibold'}>
|
||||
{to}
|
||||
</span>
|
||||
</div>
|
||||
)
|
||||
function TabChange({ from, to }) {
|
||||
if (!from) {
|
||||
return null;
|
||||
}
|
||||
return (
|
||||
<div className={'text-center p-2 bg-gray-lightest w-full my-2 flex items-center gap-2 justify-center'}>
|
||||
<span>Tab change:</span>
|
||||
<span style={{ fontWeight: 500 }}>
|
||||
{from}
|
||||
</span>
|
||||
<Icon name={"arrow-right-short"} size={18} color={"gray-dark"}/>
|
||||
<span style={{ fontWeight: 500 }}>
|
||||
{to}
|
||||
</span>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default EventGroupWrapper;
|
||||
|
|
|
|||
|
|
@ -101,7 +101,7 @@ function SubHeader(props) {
|
|||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
{tabs.map((tab, i) => (
|
||||
{Array.from(tabs).map((tab, i) => (
|
||||
<React.Fragment key={tab}>
|
||||
<Tab
|
||||
i={i}
|
||||
|
|
|
|||
|
|
@ -12,6 +12,10 @@ export default class ListWalker<T extends Timed> {
|
|||
this.list.push(m);
|
||||
}
|
||||
|
||||
unshift(m: T): void {
|
||||
this.list.unshift(m)
|
||||
}
|
||||
|
||||
insert(m: T): void {
|
||||
let index = this.list.findIndex(om => om.time > m.time)
|
||||
if (index === -1) {
|
||||
|
|
@ -130,30 +134,6 @@ export default class ListWalker<T extends Timed> {
|
|||
return changed ? this.list[ this.p - 1 ] : null;
|
||||
}
|
||||
|
||||
moveGetLastDebug(t: number, index?: number): T | null {
|
||||
let key: string = "time"; //TODO
|
||||
let val = t;
|
||||
if (index) {
|
||||
key = "_index";
|
||||
val = index;
|
||||
}
|
||||
|
||||
let changed = false;
|
||||
while (this.p < this.length && this.list[this.p][key] <= val) {
|
||||
this.moveNext()
|
||||
changed = true;
|
||||
}
|
||||
while (this.p > 0 && this.list[ this.p - 1 ][key] > val) {
|
||||
this.movePrev()
|
||||
changed = true;
|
||||
}
|
||||
|
||||
// console.log(this.list[this.p - 1])
|
||||
return changed ? this.list[ this.p - 1 ] : null;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* Moves over the messages starting from the current+1 to the last one with the time <= t
|
||||
* applying callback on each of them
|
||||
|
|
|
|||
|
|
@ -49,7 +49,7 @@ export interface State extends ScreenState {
|
|||
firstVisualEvent: number;
|
||||
messagesProcessed: boolean;
|
||||
currentTab: string;
|
||||
tabs: string[];
|
||||
tabs: Set<string>;
|
||||
tabChangeEvents: { tabId: string; timestamp: number; tabName: string }[];
|
||||
}
|
||||
|
||||
|
|
@ -75,7 +75,7 @@ export default class MessageManager {
|
|||
messagesProcessed: false,
|
||||
messagesLoading: false,
|
||||
currentTab: '',
|
||||
tabs: [],
|
||||
tabs: new Set(),
|
||||
tabChangeEvents: [],
|
||||
};
|
||||
|
||||
|
|
@ -179,8 +179,8 @@ export default class MessageManager {
|
|||
// Moving mouse and setting :hover classes on ready view
|
||||
this.mouseMoveManager.move(t);
|
||||
const lastClick = this.clickManager.moveGetLast(t);
|
||||
// getting clicks happened during last 600ms
|
||||
if (!!lastClick && t - lastClick.time < 600) {
|
||||
// happened during last 600ms
|
||||
this.screen.cursor.click();
|
||||
}
|
||||
const lastThrashing = this.mouseThrashingManager.moveGetLast(t);
|
||||
|
|
@ -188,19 +188,22 @@ export default class MessageManager {
|
|||
this.screen.cursor.shake();
|
||||
}
|
||||
|
||||
const activeTabs = this.state.get().tabs;
|
||||
if (tabId && !activeTabs.includes(tabId)) {
|
||||
this.state.update({ tabs: activeTabs.concat(tabId) });
|
||||
}
|
||||
|
||||
if (tabId && this.activeTab !== tabId) {
|
||||
this.state.update({ currentTab: tabId });
|
||||
this.activeTab = tabId;
|
||||
if (tabId) {
|
||||
if (this.activeTab !== tabId) {
|
||||
this.state.update({ currentTab: tabId });
|
||||
this.activeTab = tabId;
|
||||
}
|
||||
const activeTabs = this.state.get().tabs;
|
||||
if (activeTabs.length !== this.activeTabManager.tabInstances.size) {
|
||||
this.state.update({ tabs: this.activeTabManager.tabInstances });
|
||||
}
|
||||
}
|
||||
|
||||
if (this.tabs[this.activeTab]) {
|
||||
this.tabs[this.activeTab].move(t);
|
||||
} else {
|
||||
// should we add ui error here?
|
||||
console.error(
|
||||
'missing tab state',
|
||||
this.tabs,
|
||||
|
|
@ -276,11 +279,11 @@ export default class MessageManager {
|
|||
switch (msg.tp) {
|
||||
case MType.CreateDocument:
|
||||
if (!this.firstVisualEventSet) {
|
||||
this.activeTabManager.append({ tp: MType.TabChange, tabId: msg.tabId, time: 0 });
|
||||
this.activeTabManager.unshift({ tp: MType.TabChange, tabId: msg.tabId, time: 0 });
|
||||
this.state.update({
|
||||
firstVisualEvent: msg.time,
|
||||
currentTab: msg.tabId,
|
||||
tabs: [msg.tabId],
|
||||
tabs: new Set([msg.tabId]),
|
||||
});
|
||||
this.firstVisualEventSet = true;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,16 +3,21 @@ import type { TabChange } from '../messages';
|
|||
|
||||
export default class ActiveTabManager extends ListWalker<TabChange> {
|
||||
currentTime = 0;
|
||||
tabInstances: Set<string> = new Set();
|
||||
|
||||
moveReady(t: number): Promise<string | null> {
|
||||
|
||||
if (t < this.currentTime) {
|
||||
this.reset()
|
||||
}
|
||||
this.currentTime = t
|
||||
const msg = this.moveGetLastDebug(t)
|
||||
// console.log('move', t, msg, this.list)
|
||||
const msg = this.moveGetLast(t)
|
||||
|
||||
return Promise.resolve(msg?.tabId || null)
|
||||
if (msg) {
|
||||
const ids = this.listNow.map(m => m.tabId);
|
||||
this.tabInstances = new Set(ids)
|
||||
return Promise.resolve(msg.tabId)
|
||||
} else {
|
||||
return Promise.resolve(null);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue