Skip to content

Commit c9d290f

Browse files
ChugunovRomanChugunovRoman
committed
Merge branch 'master' of github.com:Figma-Linux/figma-linux
2 parents 20d3f27 + bf5b790 commit c9d290f

19 files changed

Lines changed: 188 additions & 32 deletions

File tree

‎@types/index.d.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -157,6 +157,8 @@ declare namespace Electron {
157157
on(channel: "loadCreatorTheme", listener: (event: IpcRendererEvent, theme: Themes.Theme) => void): this;
158158
on(channel: "sync-themes-start", listener: (event: IpcRendererEvent) => void): this;
159159
on(channel: "sync-themes-end", listener: (event: IpcRendererEvent) => void): this;
160+
on(channel: "did-maximized", listener: (event: IpcRendererEvent) => void): this;
161+
on(channel: "did-restored", listener: (event: IpcRendererEvent) => void): this;
160162

161163
send(channel: string, ...args: any[]): void;
162164
send(channel: "setTitle", data: { id: number; title: string }): this;
@@ -192,6 +194,8 @@ declare namespace Electron {
192194
send(channel: "set-clipboard-data", data: WebApi.SetClipboardData): this;
193195
send(channel: "set-use-zenity", value: boolean): this;
194196
send(channel: "set-settings", settings: SettingsInterface): this;
197+
send(channel: "did-maximized"): this;
198+
send(channed: "did-restored"): this;
195199

196200
invoke(channel: "writeNewExtensionToDisk", data: WebApi.WriteNewExtensionToDiskArgs): Promise<number>;
197201
invoke(channel: "getAllLocalFileExtensionIds"): Promise<number[]>;

‎src/assets/fonts/Inter.ttf‎

285 KB
Binary file not shown.

‎src/constants/_app.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -245,7 +245,7 @@ export const DEFAULT_PALETTE: Themes.Palette = {
245245
"bg-tab": "#222222",
246246
"bg-tab-hover": "#2c2c2c",
247247
"bg-tab-active": "#2c2c2c",
248-
"fg-tab": "#7A7A7A",
248+
"fg-tab": "#ffffff",
249249
"fg-tab-hover": "#ffffff",
250250
"fg-tab-active": "#ffffff",
251251
"bg-header": "#222222",

‎src/main/window/WindowManager.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -212,11 +212,13 @@ class WindowManager {
212212
E.ipcMain.on("window-minimize", () => {
213213
this.mainWindow.minimize();
214214
});
215-
E.ipcMain.on("window-maximize", () => {
215+
E.ipcMain.on("window-maximize", (event: E.IpcMainEvent) => {
216216
if (this.mainWindow.isMaximized()) {
217217
this.mainWindow.restore();
218+
event.reply("did-restored");
218219
} else {
219220
this.mainWindow.maximize();
221+
event.reply("did-maximized");
220222
}
221223
});
222224
E.ipcMain.on("closeTab", (event, id) => {

‎src/renderer/components/Tabs/index.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -139,7 +139,7 @@ class Tabs extends React.Component<TabsProps, unknown> {
139139
};
140140

141141
private mouseDownHandler = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
142-
(e.target as HTMLDivElement).style.cursor = "grabbing";
142+
(e.target as HTMLDivElement).style.cursor = "move";
143143

144144
this.isMoving = true;
145145
this.pos.x = e.pageX;
@@ -149,7 +149,7 @@ class Tabs extends React.Component<TabsProps, unknown> {
149149
window.addEventListener("mouseup", this.mouseUpHandler);
150150
};
151151
private mouseUpHandler = (e: MouseEvent) => {
152-
(e.target as HTMLDivElement).style.cursor = "grab";
152+
(e.target as HTMLDivElement).style.cursor = "default";
153153
this.isMoving = false;
154154

155155
window.removeEventListener("mousemove", this.mouseMoveHandler);

‎src/renderer/components/Tabs/style.scss‎

Lines changed: 46 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -15,12 +15,16 @@
1515
background-color: var(--bg-tab);
1616
color: var(--fg-tab);
1717
fill: var(--fg-tab);
18-
18+
1919
&:hover {
2020
background-color: var(--bg-tab-hover);
2121
color: var(--fg-tab-hover);
2222
fill: var(--fg-tab-hover);
23-
cursor: pointer;
23+
cursor: default;
24+
}
25+
26+
&:hover .tab__close{
27+
opacity: 0.4;
2428
}
2529

2630
&__text {
@@ -30,23 +34,61 @@
3034
text-overflow: clip;
3135
font-size: var(--fontControlSize);
3236
margin-right: 6px;
37+
opacity: 0.4;
38+
}
39+
40+
&:hover .tab__text {
41+
opacity: 1;
3342
}
3443

3544
&__close {
36-
height: 16px;
45+
height: 14px;
3746
color: var(--fg-tab);
3847
fill: var(--fg-tab);
48+
opacity: 0;
49+
display: inline-flex;
3950

4051
&:hover {
4152
color: var(--fg-tab-hover);
4253
fill: var(--fg-tab-hover);
43-
cursor: pointer;
54+
cursor: default;
55+
opacity: 1 !important;
4456
}
4557
}
4658

4759
&_active {
4860
background-color: var(--bg-tab-active);
4961
color: var(--fg-tab-active);
5062
fill: var(--fg-tab-active);
63+
opacity: 1;
64+
65+
.tab__text {
66+
opacity: 1;
67+
}
68+
69+
.tab__close {
70+
opacity: 0.16;
71+
}
72+
73+
74+
}
75+
76+
&_main_active {
77+
background-color: var(--bg-panel);
78+
79+
.icon {
80+
color: var(--bg-panel);
81+
filter: invert(1)
82+
}
83+
84+
&:hover {
85+
cursor: default;
86+
background-color: var(--bg-panel);
87+
88+
.icon {
89+
color: var(--bg-panel);
90+
filter: invert(1)
91+
}
92+
}
5193
}
5294
}

‎src/renderer/components/Tabs/tabs.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,8 +24,8 @@ const Tabs: React.FunctionComponent<Props> = props => {
2424
<Button className="tab__close button_clear" onClick={(e): void => props.close(e, t.id)}>
2525
<Icon
2626
color={`${props.tabs.current === t.id ? "var(--fg-tab-active)" : "var(--fg-tab)"}`}
27-
type="Close"
28-
size="16"
27+
type="CloseTab"
28+
size="14"
2929
/>
3030
</Button>
3131
</div>

‎src/renderer/components/TopPanel/index.tsx‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,17 +13,33 @@ interface TopPanelProps {
1313
views?: Views;
1414
}
1515

16+
interface TopPanelStates {
17+
isMaximized: boolean;
18+
}
19+
1620
@inject("tabs")
1721
@inject("settings")
1822
@inject("views")
1923
@observer
2024
class TopPanel extends React.Component<TopPanelProps, unknown> {
2125
props: TopPanelProps;
26+
state: TopPanelStates;
2227

2328
constructor(props: TopPanelProps) {
2429
super(props);
2530

2631
this.props = props;
32+
this.state = { isMaximized: false };
33+
}
34+
35+
componentDidMount(): void {
36+
E.ipcRenderer.on("did-maximized", () => {
37+
this.setState({ isMaximized: true });
38+
});
39+
40+
E.ipcRenderer.on("did-restored", () => {
41+
this.setState({ isMaximized: false });
42+
});
2743
}
2844

2945
private onMainTab = (e: React.MouseEvent<HTMLDivElement> & Event): void => {
@@ -75,6 +91,7 @@ class TopPanel extends React.Component<TopPanelProps, unknown> {
7591
onMainTab={this.onMainTab}
7692
openMenu={this.onOpenMenu}
7793
newTab={this.newTab}
94+
isMaximized={this.state.isMaximized}
7895
/>
7996
);
8097
}

‎src/renderer/components/TopPanel/style.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,4 +14,8 @@
1414
align-items: center;
1515
}
1616
}
17+
18+
&:hover .tab__close {
19+
opacity: 0.16;
20+
}
1721
}

‎src/renderer/components/TopPanel/toppanel.tsx‎

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ interface TopPanelProps {
77
current: number;
88
scalePanel: number;
99
visibleNewProjectBtn: boolean;
10+
isMaximized: boolean;
1011

1112
newTab(): void;
1213
onMainTab(e: React.MouseEvent<HTMLDivElement>): void;
@@ -21,12 +22,15 @@ const TopPanel: React.FunctionComponent<TopPanelProps> = props => {
2122
return (
2223
<div className="top-panel" style={{ zoom: props.scalePanel ? props.scalePanel : 1 }}>
2324
<div className="panelButtons">
24-
<Button className={`button_clear button_title${!props.current ? " tab_active" : ""}`} onClick={props.onMainTab}>
25-
<Icon color="var(--fg-tab)" type="Main" size="18" />
25+
<Button
26+
className={`button_clear button_title button_main${!props.current ? " tab_active tab_main_active" : ""}`}
27+
onClick={props.onMainTab}
28+
>
29+
<Icon color="currentColor" type="Figma" size="17" />
2630
</Button>
2731
{props.visibleNewProjectBtn ? (
2832
<Button className="button_clear button_title" onClick={props.onNewProject}>
29-
<Icon color="var(--fg-tab)" type="Plus" size="18" />
33+
<Icon color="currentColor" type="Plus" size="15" />
3034
</Button>
3135
) : (
3236
""
@@ -35,16 +39,16 @@ const TopPanel: React.FunctionComponent<TopPanelProps> = props => {
3539
<Tabs />
3640
<div className="panelButtons">
3741
<Button className="button_clear button_title" onClick={props.openMenu}>
38-
<Icon color="var(--fg-tab)" type="MenuCorner" size="18" />
42+
<Icon color="currentColor" type="MenuCorner" size="14" />
3943
</Button>
4044
<Button className="button_clear button_control" onClick={props.miniw}>
41-
<Icon color="var(--fg-header-control)" type="Minimize" size="18" />
45+
<Icon color="var(--fg-header-control)" type="Minimize" size="16" />
4246
</Button>
4347
<Button className="button_clear button_control" onClick={props.maxiw}>
44-
<Icon color="var(--fg-header-control)" type="Maximize" size="18" />
48+
<Icon color="var(--fg-header-control)" type={props.isMaximized ? "Restore" : "Maximize"} size="16" />
4549
</Button>
4650
<Button className="button_clear button_control button_close" onClick={props.closew}>
47-
<Icon color="var(--fg-header-control)" type="Close" size="18" />
51+
<Icon color="var(--fg-header-control)" type="Close" size="16" />
4852
</Button>
4953
</div>
5054
</div>

0 commit comments

Comments
 (0)