Skip to content

Commit 548bcc4

Browse files
ra3orbladera3orblade
authored
Merge pull request #1982 from anyproto/feature/JS-8836-tab-tooltip-style
Feature/JS-8836: Tab tooltip style
2 parents cb2e042 + 96919ef commit 548bcc4

File tree

13 files changed

+135
-44
lines changed

13 files changed

+135
-44
lines changed

‎dist/img/icon/default/archive.svg‎

Lines changed: 5 additions & 0 deletions
Loading

‎dist/img/icon/default/graph.svg‎

Lines changed: 7 additions & 0 deletions
Loading

‎dist/img/icon/default/settings.svg‎

Lines changed: 3 additions & 0 deletions
Loading

‎dist/js/tabs.js‎

Lines changed: 15 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,15 @@ $(() => {
2828
const TOOLTIP_DELAY = 650;
2929
const TOOLTIP_DELAY_SHORT = 50;
3030

31+
const tooltipReset = () => {
32+
window.clearTimeout(tooltipTimeout);
33+
window.clearTimeout(tooltipHideTimeout);
34+
if (tooltipVisible) {
35+
tooltipVisible = false;
36+
electron.Api(winId, 'tabHideTooltip');
37+
};
38+
};
39+
3140
// Tab detach state
3241
let windowBounds = null;
3342
let draggedTabId = null;
@@ -267,6 +276,7 @@ $(() => {
267276

268277
tab.find('.icon.close').off('click').on('click', (e) => {
269278
e.stopPropagation();
279+
tooltipReset();
270280
electron.Api(winId, 'removeTab', [ item.id, true ]);
271281
});
272282

@@ -290,6 +300,8 @@ $(() => {
290300
isPinned: Boolean(item.data.isPinned),
291301
offsetLeft: offset.left,
292302
width: tab.outerWidth(),
303+
objectName: item.data.title || '',
304+
action: item.data.action || '',
293305
};
294306

295307
tooltipTimeout = window.setTimeout(() => {
@@ -385,12 +397,7 @@ $(() => {
385397
draggedTabId = $(evt.item).attr('data-id');
386398

387399
// Hide tooltip on drag start
388-
window.clearTimeout(tooltipTimeout);
389-
window.clearTimeout(tooltipHideTimeout);
390-
if (tooltipVisible) {
391-
tooltipVisible = false;
392-
electron.Api(winId, 'tabHideTooltip');
393-
};
400+
tooltipReset();
394401

395402
const item = $(evt.item);
396403
item.css('visibility', 'hidden');
@@ -486,12 +493,7 @@ $(() => {
486493
};
487494

488495
// Hide tooltip on tabs update
489-
window.clearTimeout(tooltipTimeout);
490-
window.clearTimeout(tooltipHideTimeout);
491-
if (tooltipVisible) {
492-
tooltipVisible = false;
493-
electron.Api(winId, 'tabHideTooltip');
494-
};
496+
tooltipReset();
495497

496498
container.empty();
497499

@@ -558,6 +560,7 @@ $(() => {
558560
electron.on('remove-tab', (e, id) => {
559561
if (isDragging) return;
560562

563+
tooltipReset();
561564
container.find(`#tab-${id}`).remove();
562565
resize();
563566
setTimeout(() => initSortable(), 10);

‎src/scss/component/preview/common.scss‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,9 @@
2626
}
2727

2828
&.isTab { width: auto; }
29+
&.isTab {
30+
.content { border-radius: 16px; box-shadow: none; border: 1px solid var(--color-shape-secondary); }
31+
}
2932
}
3033
.previewWrapper.passThrough { pointer-events: none; }
3134

‎src/scss/component/preview/tab.scss‎

Lines changed: 18 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,26 @@
11

2-
.previewTab { padding: 4px 8px; display: flex; flex-direction: column; gap: 4px; }
2+
.previewTab {
3+
padding: 16px 32px 16px 16px; display: flex; flex-direction: column; gap: 12px;
4+
min-width: 288px; max-width: 360px;
5+
}
36
.previewTab {
47
.previewHeader,
5-
.previewObject { display: flex; gap: 0px 6px; align-items: center; height: auto; }
8+
.previewObject { display: flex; align-items: center; height: auto; flex-wrap: nowrap; }
69
.previewHeader,
710
.previewObject {
811
.iconObject { flex-shrink: 0; }
912
}
13+
14+
.previewHeader { gap: 0px 6px; }
15+
.previewHeader {
16+
.iconObject { border-radius: 3px; }
17+
}
18+
19+
.previewObject { gap: 0px 12px; }
20+
.previewObject {
21+
.side.right { @include text-overflow-nw; }
22+
.iconObject { flex-shrink: 0; border-radius: 8px !important; background-color: var(--color-shape-highlight-medium) !important; }
23+
.name { font-weight: 500; @include text-overflow-nw; }
24+
.type { @include text-small; color: var(--color-text-secondary); }
25+
}
1026
}

‎src/ts/component/preview/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -222,7 +222,7 @@ const PreviewIndex = observer(forwardRef(() => {
222222
};
223223

224224
case I.PreviewType.Tab: {
225-
content = <PreviewTab spaceview={initialObject} object={preview.relatedObject} position={position} />;
225+
content = <PreviewTab spaceview={initialObject} data={preview.relatedData} position={position} />;
226226
break;
227227
};
228228
};

‎src/ts/component/preview/tab.tsx‎

Lines changed: 67 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,58 +1,103 @@
11
import React, { forwardRef, useEffect, useRef, useState } from 'react';
22
import { observer } from 'mobx-react';
3-
import { ObjectName, IconObject } from 'Component';
4-
import { U, I } from 'Lib';
3+
import { ObjectName, IconObject, Label } from 'Component';
4+
import { U, I, translate, S } from 'Lib';
55

66
interface Props {
77
spaceview?: any;
8-
object?: any;
8+
data?: any;
99
position?: () => void;
1010
};
1111

1212
const PreviewTab = observer(forwardRef<{}, Props>((props, ref) => {
1313

1414
const {
1515
spaceview = {},
16-
object,
16+
data,
1717
position,
1818
} = props;
1919

20-
const [ dummy, setDummy ] = useState(0);
21-
const objectRef = useRef(object);
20+
const { object, name, action } = data;
21+
const [ displayObject, setDisplayObject ] = useState<any>(null);
22+
const [ displayObjectType, setDisplayObjectType ] = useState<any>(null);
23+
const cancelRef = useRef(false);
2224

2325
useEffect(() => {
24-
if (!object?.id || (object?.layout == I.ObjectLayout.SpaceView)) {
25-
objectRef.current = {};
26-
setDummy(dummy + 1);
27-
return;
26+
cancelRef.current = false;
27+
setDisplayObject(null);
28+
setDisplayObjectType(null);
29+
load();
30+
31+
return () => {
32+
cancelRef.current = true;
2833
};
34+
}, [ object?.id, action, spaceview.targetSpaceId ]);
35+
36+
useEffect(position);
2937

30-
let cancelled = false;
38+
const load = () => {
39+
const isChat = (object?.layout == I.ObjectLayout.SpaceView) && (spaceview.isOneToOne || spaceview.isChat);
3140

32-
objectRef.current = object;
41+
if (isChat) {
42+
setDisplayObject({ layout: I.ObjectLayout.Chat, name: translate('commonMainChat') });
43+
} else
44+
if (action && name) {
45+
objectByAction();
46+
} else {
47+
loadObject();
48+
};
49+
};
50+
51+
const objectByAction = () => {
52+
const layouts = {
53+
navigation: I.ObjectLayout.Navigation,
54+
graph: I.ObjectLayout.Graph,
55+
archive: I.ObjectLayout.Archive,
56+
settings: I.ObjectLayout.Settings,
57+
};
3358

59+
if (layouts[action]) {
60+
setDisplayObject({ layout: layouts[action], name });
61+
} else {
62+
loadObject();
63+
};
64+
};
65+
66+
const loadObject = () => {
67+
if (!object || !object.id) {
68+
return;
69+
};
3470
U.Object.getById(object.id, { spaceId: spaceview.targetSpaceId }, (loaded: any) => {
35-
if (loaded && !cancelled) {
36-
objectRef.current = loaded;
37-
setDummy(dummy + 1);
71+
if (loaded && !cancelRef.current) {
72+
setDisplayObject(loaded);
73+
loadType(loaded.type)
3874
};
3975
});
76+
};
4077

41-
return () => { cancelled = true; };
42-
}, [ object?.id ]);
43-
44-
useEffect(position);
78+
const loadType = (id: string) => {
79+
U.Object.getById(id, { spaceId: spaceview.targetSpaceId }, (loaded: any) => {
80+
if (loaded && !cancelRef.current) {
81+
setDisplayObjectType(loaded);
82+
};
83+
});
84+
};
4585

4686
return (
4787
<div className="previewTab">
4888
<div className="previewHeader">
4989
<IconObject object={spaceview} />
5090
<ObjectName object={spaceview} />
5191
</div>
52-
{objectRef.current && objectRef.current.name ? (
92+
{displayObject?.name ? (
5393
<div className="previewObject">
54-
<IconObject object={objectRef.current} />
55-
<ObjectName object={objectRef.current} />
94+
<div className="side left">
95+
<IconObject object={displayObject} size={48} iconSize={28} />
96+
</div>
97+
<div className="side right">
98+
<ObjectName object={displayObject} />
99+
{displayObjectType ? <Label className="type" text={displayObjectType.name} /> : ''}
100+
</div>
56101
</div>
57102
) : null}
58103
</div>

‎src/ts/interface/preview.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ export interface Preview {
3939
withPlural?: boolean;
4040
typeX?: I.MenuDirection.Left | I.MenuDirection.Center | I.MenuDirection.Right;
4141
noOffset?: boolean;
42-
relatedObject?: any;
42+
relatedData?: any;
4343
delay?: number;
4444
x?: number;
4545
y?: number;

‎src/ts/lib/keyboard.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1369,7 +1369,7 @@ class Keyboard {
13691369

13701370
if (title) {
13711371
U.Data.setWindowTitleText(title);
1372-
U.Data.setTabTitleText(title);
1372+
U.Data.setTabTitleText(title, action);
13731373
} else {
13741374
U.Data.setWindowTitle(rootId, rootId);
13751375
U.Data.setTabTitle(rootId, rootId);

0 commit comments

Comments
 (0)