Skip to content

feat(frontend): add icon support, make ui more consistent #442

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
thesophiaxu merged 2 commits into from
Apr 13, 2022
Merged

feat(frontend): add icon support, make ui more consistent #442

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b659e70
feat(frontend): add icon support, make ui more consistent
thesophiaxu Apr 12, 2022
9e99f61
fix: more polish with electron & backlinks
thesophiaxu Apr 12, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/default-packages/unigraph.home/executables/readSomethingNew.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ return (
window.wsnavigator(
`/library/object?uid=${
window.unigraph.getNamespaceMap()['$/entity/read_later'].uid
}&viewer=${'dynamic-view-detailed'}&type=${
}&viewer=${'dynamic-view-detailed'}&name=Read Later&type=${
window.unigraph.getNamespaceMap()['$/entity/read_later'].uid['unigraph.id']
}`,
)
Expand Down
2 changes: 1 addition & 1 deletion packages/unigraph-dev-explorer/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@
"dragselect": "^2.3.0",
"eslint-webpack-plugin": "^2.5.2",
"file-loader": "6.1.1",
"flexlayout-react": "^0.5.5",
"flexlayout-react": "^0.6.9",
"fs-extra": "^9.0.1",
"history": "^5.3.0",
"html-webpack-plugin": "4.5.0",
Expand Down
83 changes: 71 additions & 12 deletions packages/unigraph-dev-explorer/src/Workspace.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,15 +6,15 @@ import React from 'react';

import LocalizationProvider from '@mui/lab/LocalizationProvider';

import FlexLayout, { Action, Actions, DockLocation, Model, Node, TabNode } from 'flexlayout-react';
import { Action, Actions, DockLocation, Model, Node, TabNode, Layout } from 'flexlayout-react';
import 'flexlayout-react/style/light.css';
import './workspace.css';
import { Container, CssBaseline, ListItem, Popover, Typography } from '@mui/material';
import { ThemeProvider, Theme, StyledEngineProvider, createTheme } from '@mui/material/styles';

import { isJsonString } from 'unigraph-dev-common/lib/utils/utils';
import { getRandomInt } from 'unigraph-dev-common/lib/api/unigraph';
import { Menu, Details } from '@mui/icons-material';
import { Menu, Details, Home } from '@mui/icons-material';
import { DndProvider } from 'react-dnd';
import { HTML5Backend } from 'react-dnd-html5-backend';

Expand Down Expand Up @@ -280,13 +280,14 @@ const setTitleOnRenderTab = (model: Model) => {
const providedTheme = createTheme(globalTheme);

export function WorkSpace(this: any) {
const json = {
const json: any = {
global: {
tabSetTabStripHeight: 40,
tabEnableRename: false,
splitterSize: 1,
splitterExtra: 12,
tabEnableRenderOnDemand: true,
enableUseVisibility: true,
},
borders: [
{
Expand Down Expand Up @@ -372,11 +373,23 @@ export function WorkSpace(this: any) {
() => (node: Node, config: any) => ({
// @ts-expect-error: using private API
viewId: node._attributes.id,
setTitle: (title: string) => {
if (config.customTitle) {
setTitle: (title: string, icon?: any, renamerId?: string) => {
// @ts-expect-error: using private API
const currNode = window.layoutModel.getNodeById(node._attributes.id);
// @ts-expect-error: using private API
const curRenamer = currNode._attributes.config?.renamerId;
if (config.customTitle || !title?.length || (curRenamer && curRenamer !== renamerId)) {
return false;
}
return false;
return window.layoutModel.doAction(
// @ts-expect-error: using private API
Actions.updateNodeAttributes(node._attributes.id, {
name: title,
icon: icon || '',
// @ts-expect-error: using private API
config: { ...currNode._attributes.config, renamerId },
}),
);
},
setMaximize: (val: boolean) => false,
isVisible: () =>
Expand Down Expand Up @@ -448,7 +461,7 @@ export function WorkSpace(this: any) {
);
};

const [model] = React.useState(FlexLayout.Model.fromJson(json));
const [model] = React.useState(Model.fromJson(json));

const memoMDFn: any = {};
const getMouseDownFn = (id: string) => {
Expand Down Expand Up @@ -486,10 +499,11 @@ export function WorkSpace(this: any) {
<MobileBar />
</div>

<FlexLayout.Layout
<Layout
model={model}
factory={factory}
popoutURL="./popout_page.html"
iconFactory={() => '' as any}
onAction={(action: Action) => {
if (
action.type === 'FlexLayout_SelectTab' &&
Expand All @@ -508,8 +522,9 @@ export function WorkSpace(this: any) {
.setValue(node.isVisible());
setTitleOnRenderTab(model);
const nodeId = node.getId();
const nodeIcon = node.getIcon();
if (nodeId === 'app-drawer') {
renderValues.content = (
renderValues.leading = (
<Menu
style={{
verticalAlign: 'middle',
Expand All @@ -518,9 +533,10 @@ export function WorkSpace(this: any) {
key="icon"
/>
);
renderValues.content = '';
}
if (nodeId === 'inspector-pane') {
renderValues.content = (
renderValues.leading = (
<Details
style={{
verticalAlign: 'middle',
Expand All @@ -529,15 +545,18 @@ export function WorkSpace(this: any) {
key="icon"
/>
);
renderValues.content = '';
}
if (nodeId === 'category-pane') {
renderValues.content = [
renderValues.leading = (
<Icon
path={mdiTagMultipleOutline}
size={1}
style={{ verticalAlign: 'middle' }}
key="icon"
/>,
/>
);
renderValues.content = [
<Typography
style={{
marginLeft: '4px',
Expand All @@ -548,6 +567,31 @@ export function WorkSpace(this: any) {
</Typography>,
];
}
if (!renderValues.leading && typeof nodeIcon === 'string') {
// Render icon
if (/^\p{Extended_Pictographic}$/u.test(nodeIcon)) {
// is emoji
renderValues.leading = nodeIcon;
} else {
// is svg icon
// TODO
renderValues.leading = (
<div
style={{
minWidth: '16px',
minHeight: '16px',
backgroundImage: `url("${
nodeIcon.startsWith('data:image/svg+xml,')
? ''
: 'data:image/svg+xml,'
}${nodeIcon}")`,
opacity: 0.54,
}}
/>
);
}
}
const isFirstRender = !document.getElementById(`tabId${nodeId}`);
renderValues.buttons.push(<div id={`tabId${nodeId}`} key={`tabId${nodeId}`} />);
setTimeout(() => {
const el = document.getElementById(`tabId${nodeId}`);
Expand All @@ -558,6 +602,20 @@ export function WorkSpace(this: any) {
el.parentElement.addEventListener('mousedown', fn);
}
}, 0);
window.queueMicrotask(() => {
const el = document.getElementById(`tabId${nodeId}`);

if (el && el.parentElement && !isFirstRender) {
el.parentElement.classList.add('rendered_tab_button');
}
});
setTimeout(() => {
const el = document.getElementById(`tabId${nodeId}`);

if (el && el.parentElement && isFirstRender) {
el.parentElement.classList.add('rendered_tab_button');
}
});
}}
onRenderTabSet={(tabSetNode, renderValues) => {
if (tabSetNode.getType() === 'tabset') {
Expand All @@ -576,6 +634,7 @@ export function WorkSpace(this: any) {
{
uid,
name: node.getName(),
icon: node.getIcon(),
env: 'react-explorer',
view: node.getComponent(),
props: JSON.stringify({
Expand Down
Loading