Skip to content

Commit 25a801a

Browse files
jacomyaljacomyal
committed
[gephi-lite] Refines 'Save workspace' modal
1 parent 6f22da8 commit 25a801a

File tree

7 files changed

+85
-68
lines changed

7 files changed

+85
-68
lines changed

‎packages/gephi-lite/src/components/common-icons.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@ import {
3232
PiCursor,
3333
PiCursorFill,
3434
PiDotsThreeVerticalBold,
35+
PiDownload,
3536
PiFunnel,
3637
PiFunnelFill,
3738
PiGear,
@@ -108,6 +109,7 @@ export const DataCreationIcon = PiPlusCircle;
108109
export const DataCreationIconFill = PiPlusCircleFill;
109110
export const DataIcon = PiTable;
110111
export const DataIconFill = PiTableFill;
112+
export const DownloadIcon = PiDownload;
111113
export const EditIcon = PiPencilSimpleLine;
112114
export const EditIconFill = PiPencilSimpleLineFill;
113115
export const ExitFullScreenIcon = PiCornersIn;

‎packages/gephi-lite/src/components/modals/open/OpenModal.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,7 @@ export const OpenModal: FC<ModalProps<{ initialOpenedTab?: string }>> = ({
5959
selected={selectedOpen?.id}
6060
onSelectedChange={(item) => setSelectedOpen(item)}
6161
/>
62-
<div className="selected-component-wrapper gl-p-3">
62+
<div className="selected-component-wrapper">
6363
<selectedOpen.component id="openForm" onStatusChange={setStatus} />
6464
</div>
6565
</>

‎packages/gephi-lite/src/components/modals/save/SaveAsModal.tsx‎

Lines changed: 6 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -40,31 +40,18 @@ export const SaveAsModal: FC<ModalProps<unknown>> = ({ cancel }) => {
4040

4141
return (
4242
<Modal
43-
className="modal-lg"
43+
className="modal-lg modal-save-graph"
44+
bodyClassName="p-0"
4445
title={<span className="gl-px-2">{t("graph.save.title").toString()}</span>}
4546
onClose={() => cancel()}
4647
doNotPreserveData
4748
>
48-
<div className="d-flex align-items-stretch">
49-
<div className="border-end pe-3 me-3">
50-
<SideMenu
51-
menu={SAVE_COLLECTION_MENU}
52-
selected={selected?.id}
53-
onSelectedChange={(item) => setSelected(item)}
54-
/>
55-
</div>
56-
<div className="flex-grow-1">
49+
<>
50+
<SideMenu menu={SAVE_COLLECTION_MENU} selected={selected?.id} onSelectedChange={(item) => setSelected(item)} />
51+
<div className="selected-component-wrapper">
5752
<selected.component id="saveForm" onStatusChange={setStatus} />
5853
</div>
59-
</div>
60-
<div className="gl-gap-2 d-flex">
61-
<button title={t("common.cancel").toString()} className="gl-btn gl-btn-outline" onClick={() => cancel()}>
62-
{t("common.cancel").toString()}
63-
</button>
64-
<button form="saveForm" className="gl-btn gl-btn-fill" disabled={status.type === "loading"}>
65-
{t("common.save").toString()}
66-
</button>
67-
</div>
54+
</>
6855
</Modal>
6956
);
7057
};

‎packages/gephi-lite/src/components/modals/save/SaveCloudFileForm.tsx‎

Lines changed: 37 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { FC, useCallback, useEffect, useState } from "react";
22
import { useTranslation } from "react-i18next";
3+
import { PiCloudArrowUp } from "react-icons/pi";
34

45
import { useCloudProvider } from "../../../core/cloud/useCloudProvider";
56
import { useFile, useFileActions } from "../../../core/context/dataContexts";
@@ -64,53 +65,54 @@ export const SaveCloudFileForm: FC<SaveCloudFileFormProps> = ({ id, onStatusChan
6465
{user ? (
6566
<form
6667
id={id}
68+
className="h-100 d-flex flex-column gl-gap-1"
6769
onSubmit={(e) => {
6870
e.preventDefault();
6971
onSubmit();
7072
}}
7173
>
7274
{error && <p className="text-center text-danger">{t("graph.save.github.error").toString()}</p>}
7375

74-
<div className="mb-3">
75-
<label htmlFor="filename" className="form-label">
76-
{t("graph.save.github.field.filename").toString()}
77-
</label>
76+
<label htmlFor="filename" className="form-label">
77+
{t("graph.save.github.field.filename").toString()}
78+
</label>
79+
<input
80+
id="filename"
81+
className="form-control mb-2"
82+
type="string"
83+
value={filename}
84+
onChange={(e) => setFilename(e.target.value)}
85+
required={true}
86+
/>
87+
88+
<label htmlFor="description" className="form-label">
89+
{t("graph.save.github.field.description").toString()}
90+
</label>
91+
<textarea
92+
id="description"
93+
className="form-control mb-2 flex-grow-1"
94+
value={description}
95+
rows={3}
96+
onChange={(e) => setDescription(e.target.value)}
97+
/>
98+
99+
<div className="form-check mb-2">
78100
<input
79-
id="filename"
80-
className="form-control"
81-
type="string"
82-
value={filename}
83-
onChange={(e) => setFilename(e.target.value)}
84-
required={true}
101+
className="form-check-input"
102+
type="checkbox"
103+
id="isPublic"
104+
checked={isPublic}
105+
onChange={(e) => setIsPublic(e.target.checked)}
85106
/>
86-
</div>
87-
88-
<div className="mb-3">
89-
<label htmlFor="description" className="form-label">
90-
{t("graph.save.github.field.description").toString()}
107+
<label className="form-check-label" htmlFor="isPublic">
108+
{t("graph.save.github.field.isPublic").toString()}
91109
</label>
92-
<textarea
93-
id="description"
94-
className="form-control"
95-
value={description}
96-
rows={3}
97-
onChange={(e) => setDescription(e.target.value)}
98-
/>
99110
</div>
100111

101-
<div className="mb-3">
102-
<div className="form-check">
103-
<input
104-
className="form-check-input"
105-
type="checkbox"
106-
id="isPublic"
107-
checked={isPublic}
108-
onChange={(e) => setIsPublic(e.target.checked)}
109-
/>
110-
<label className="form-check-label" htmlFor="isPublic">
111-
{t("graph.save.github.field.isPublic").toString()}
112-
</label>
113-
</div>
112+
<div className="gl-gap-2 d-flex justify-content-end">
113+
<button form="saveForm" className="gl-btn gl-btn-outline" disabled={loading}>
114+
<PiCloudArrowUp /> {t("common.save").toString()}
115+
</button>
114116
</div>
115117

116118
{loading && <Loader />}

‎packages/gephi-lite/src/components/modals/save/SaveLocally.tsx‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { useFile, useFileActions } from "../../../core/context/dataContexts";
66
import { getFilename } from "../../../core/file/utils";
77
import { useNotifications } from "../../../core/notifications";
88
import type { AsyncStatus } from "../../../utils/promises";
9+
import { DownloadIcon } from "../../common-icons";
910

1011
interface SaveCLocallyProps {
1112
id?: string;
@@ -36,10 +37,13 @@ export const SaveLocally: FC<SaveCLocallyProps> = ({ id, onStatusChange }) => {
3637
}, [current?.filename, onStatusChange, exportAsGephiLite, notify, t]);
3738

3839
return (
39-
<div id={id} className="d-flex flex-column justify-content-center align-items-center">
40+
<div
41+
id={id}
42+
className="h-100 d-flex flex-column align-items-center justify-content-center justify-content-center align-items-center"
43+
>
4044
<p>{t("graph.save.local.description")}</p>
41-
<button className="gl-btn gl-btn-fill " onClick={download}>
42-
{t("common.download")}
45+
<button className="gl-btn gl-btn-outline " onClick={download}>
46+
<DownloadIcon /> {t("common.download")}
4347
</button>
4448
</div>
4549
);

‎packages/gephi-lite/src/locales/dev.json‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -440,20 +440,20 @@
440440
}
441441
},
442442
"save": {
443-
"title": "Save as...",
443+
"title": "Save workspace as...",
444444
"github": {
445-
"title": "On Github",
445+
"title": "Save on GitHub",
446446
"field": {
447447
"filename": "Filename",
448448
"description": "Description",
449-
"isPublic": "Create a public gist"
449+
"isPublic": "Create a public Gist"
450450
},
451451
"success": "File '{{filename}}' has been successfully saved",
452452
"error": "An error occurred while saving your graph. Please check your connectivity or try later."
453453
},
454454
"local": {
455-
"title": "Locally",
456-
"description": "Click below to download the file",
455+
"title": "Save locally",
456+
"description": "Click below to download the workspace as a JSON file",
457457
"success": "Graph has been saved locally",
458458
"error": "Failed to save the graph locally"
459459
}

‎packages/gephi-lite/src/styles/_modals.scss‎

Lines changed: 27 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
1-
.modal-open-graph {
1+
.modal-open-graph,
2+
.modal-save-graph {
23
.selected-component-wrapper {
4+
@extend .gl-p-3;
35
flex-grow: 1;
46
overflow: auto;
5-
height: 60dvh;
67
}
78

89
.modal-body {
@@ -16,9 +17,6 @@
1617
}
1718

1819
@include media-breakpoint-down(md) {
19-
.selected-component-wrapper {
20-
height: 70dvh;
21-
}
2220
.modal-body {
2321
flex-direction: column;
2422
}
@@ -30,3 +28,27 @@
3028
}
3129
}
3230
}
31+
32+
.modal-open-graph {
33+
.selected-component-wrapper {
34+
height: 60dvh;
35+
}
36+
37+
@include media-breakpoint-down(md) {
38+
.selected-component-wrapper {
39+
height: 70dvh;
40+
}
41+
}
42+
}
43+
44+
.modal-save-graph {
45+
.selected-component-wrapper {
46+
height: 40dvh;
47+
}
48+
49+
@include media-breakpoint-down(md) {
50+
.selected-component-wrapper {
51+
height: 70dvh;
52+
}
53+
}
54+
}

0 commit comments

Comments
 (0)