Skip to content

Commit 3aaed04

Browse files
jaclarkejaclarke
committed
Update design of query editor tab
1 parent 2d36d21 commit 3aaed04

File tree

19 files changed

+834
-579
lines changed

19 files changed

+834
-579
lines changed

‎shared/common/newui/copyButton/index.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import {Button} from "../button";
88

99
export interface CopyButtonProps {
1010
className?: string;
11-
content: string;
11+
content: string | (() => string);
1212
mini?: boolean;
1313
}
1414

@@ -25,7 +25,7 @@ export function CopyButton({className, content, mini}: CopyButtonProps) {
2525
}, [copied]);
2626

2727
const onCopy = () => {
28-
navigator.clipboard?.writeText(content);
28+
navigator.clipboard?.writeText(typeof content === 'string' ? content : content());
2929
setCopied(true);
3030
};
3131

‎shared/common/newui/iconToggle/iconToggle.module.scss

+80
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
@import "@edgedb/common/mixins.scss";
2+
3+
.iconToggle {
4+
display: flex;
5+
background: var(--Grey95);
6+
border: 1px solid var(--Grey90);
7+
border-radius: 8px;
8+
font-family: "Roboto Flex Variable", sans-serif;
9+
line-height: 16px;
10+
11+
&.disabled {
12+
opacity: 0.4;
13+
pointer-events: none;
14+
}
15+
16+
@include darkTheme {
17+
background: var(--Grey16);
18+
border-color: var(--Grey14);
19+
}
20+
}
21+
22+
.option {
23+
position: relative;
24+
width: 32px;
25+
height: 32px;
26+
display: flex;
27+
align-items: center;
28+
justify-content: center;
29+
cursor: pointer;
30+
31+
svg {
32+
color: var(--Grey55);
33+
z-index: 1;
34+
35+
@include darkTheme {
36+
color: var(--Grey65);
37+
}
38+
}
39+
40+
&.selected:before {
41+
content: "";
42+
position: absolute;
43+
inset: 2px;
44+
border-radius: 6px;
45+
background: #fff;
46+
box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.16);
47+
48+
@include darkTheme {
49+
background: var(--Grey30);
50+
box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.4);
51+
}
52+
}
53+
54+
&.disabled {
55+
opacity: 0.3;
56+
pointer-events: none;
57+
}
58+
59+
.label {
60+
position: absolute;
61+
top: calc(100% + 2px);
62+
white-space: nowrap;
63+
background: var(--panel_background);
64+
padding: 6px 10px;
65+
border-radius: 6px;
66+
color: var(--secondary_text_color);
67+
font-weight: 500;
68+
font-size: 13px;
69+
border: 1px solid var(--panel_border);
70+
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.08);
71+
opacity: 0;
72+
pointer-events: none;
73+
transition: opacity 0.15s linear;
74+
}
75+
76+
&:hover .label {
77+
opacity: 1;
78+
transition-delay: 0.4s;
79+
}
80+
}

‎shared/common/newui/iconToggle/index.tsx

+40
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import cn from "@edgedb/common/utils/classNames";
2+
3+
import styles from "./iconToggle.module.scss";
4+
5+
export interface IconToggleProps<OptionKey extends string | number> {
6+
options: {
7+
key: OptionKey;
8+
label: string;
9+
icon: JSX.Element;
10+
disabled?: boolean;
11+
}[];
12+
selectedOption: OptionKey;
13+
onSelectOption: (key: OptionKey) => void;
14+
disabled?: boolean;
15+
}
16+
17+
export function IconToggle<OptionKey extends string | number = any>({
18+
options,
19+
selectedOption,
20+
onSelectOption,
21+
disabled,
22+
}: IconToggleProps<OptionKey>) {
23+
return (
24+
<div className={cn(styles.iconToggle, {[styles.disabled]: !!disabled})}>
25+
{options.map((option) => (
26+
<div
27+
key={option.key}
28+
className={cn(styles.option, {
29+
[styles.selected]: option.key === selectedOption,
30+
[styles.disabled]: !!option.disabled,
31+
})}
32+
onClick={() => onSelectOption(option.key)}
33+
>
34+
{option.icon}
35+
<div className={styles.label}>{option.label}</div>
36+
</div>
37+
))}
38+
</div>
39+
);
40+
}

‎shared/common/newui/icons/index.tsx

+152
Original file line numberDiff line numberDiff line change
@@ -705,3 +705,155 @@ export function FilterIcon({className}: {className?: string}) {
705705
</svg>
706706
);
707707
}
708+
709+
export function RunIcon() {
710+
return (
711+
<svg
712+
width="24"
713+
height="24"
714+
viewBox="0 0 24 24"
715+
fill="none"
716+
xmlns="http://www.w3.org/2000/svg"
717+
>
718+
<path
719+
d="M7 5.57143L17 12L7 18.4286V5.57143Z"
720+
stroke="currentColor"
721+
strokeWidth="1.5"
722+
strokeLinecap="round"
723+
strokeLinejoin="round"
724+
/>
725+
</svg>
726+
);
727+
}
728+
729+
export function SplitViewIcon(props: {
730+
className?: string;
731+
style?: React.CSSProperties;
732+
}) {
733+
return (
734+
<svg
735+
width="24"
736+
height="24"
737+
viewBox="0 0 24 24"
738+
fill="none"
739+
xmlns="http://www.w3.org/2000/svg"
740+
{...props}
741+
>
742+
<rect
743+
x="5.75"
744+
y="5.75"
745+
width="12.5"
746+
height="4.5"
747+
rx="1.25"
748+
stroke="currentColor"
749+
strokeWidth="1.5"
750+
/>
751+
<rect
752+
x="5.75"
753+
y="13.75"
754+
width="12.5"
755+
height="4.5"
756+
rx="1.25"
757+
stroke="currentColor"
758+
strokeWidth="1.5"
759+
/>
760+
</svg>
761+
);
762+
}
763+
764+
export function TreeViewIcon() {
765+
return (
766+
<svg
767+
width="24"
768+
height="24"
769+
viewBox="0 0 24 24"
770+
fill="none"
771+
xmlns="http://www.w3.org/2000/svg"
772+
>
773+
<rect
774+
x="9.75"
775+
y="8.75"
776+
width="10.5"
777+
height="3.5"
778+
rx="1.25"
779+
stroke="currentColor"
780+
strokeWidth="1.5"
781+
/>
782+
<rect
783+
x="9.75"
784+
y="15.75"
785+
width="10.5"
786+
height="3.5"
787+
rx="1.25"
788+
stroke="currentColor"
789+
strokeWidth="1.5"
790+
/>
791+
<path
792+
d="M9.5 17.5H8.5C6.84315 17.5 5.5 16.1569 5.5 14.5V7.5"
793+
stroke="currentColor"
794+
strokeWidth="1.5"
795+
strokeLinecap="round"
796+
/>
797+
<path
798+
d="M9.5 10.5H8.5C6.84315 10.5 5.5 9.15685 5.5 7.5V7.5"
799+
stroke="currentColor"
800+
strokeWidth="1.5"
801+
strokeLinecap="round"
802+
/>
803+
<circle
804+
cx="5.5"
805+
cy="5.5"
806+
r="1.75"
807+
stroke="currentColor"
808+
strokeWidth="1.5"
809+
/>
810+
</svg>
811+
);
812+
}
813+
814+
export function TableViewIcon() {
815+
return (
816+
<svg
817+
width="24"
818+
height="24"
819+
viewBox="0 0 24 24"
820+
fill="none"
821+
xmlns="http://www.w3.org/2000/svg"
822+
>
823+
<rect
824+
x="3.75"
825+
y="3.75"
826+
width="16.5"
827+
height="16"
828+
rx="1.25"
829+
stroke="currentColor"
830+
strokeWidth="1.5"
831+
/>
832+
<path
833+
d="M4 9H20M9.5 4V19.5M4 14.5H20"
834+
stroke="currentColor"
835+
strokeWidth="1.5"
836+
/>
837+
</svg>
838+
);
839+
}
840+
841+
export function HistoryIcon() {
842+
return (
843+
<svg
844+
width="24"
845+
height="24"
846+
viewBox="0 0 24 24"
847+
fill="none"
848+
xmlns="http://www.w3.org/2000/svg"
849+
>
850+
<path
851+
d="M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 14.4853 4.00736 16.7353 5.63604 18.364M11 7.6V13L14.6 14.8M5.63604 18.364L6.5 14.5M5.63604 18.364L1.5 17.5"
852+
stroke="currentColor"
853+
strokeWidth="1.5"
854+
strokeLinecap="round"
855+
strokeLinejoin="round"
856+
/>
857+
</svg>
858+
);
859+
}

‎shared/common/newui/index.ts

+1
Original file line numberDiff line numberDiff line change
@@ -7,3 +7,4 @@ export * from "./icons";
77
export * from "./logos";
88
export * from "./infoTooltip";
99
export * from "./modal";
10+
export * from "./iconToggle";

‎shared/common/ui/splitView/index.tsx

+1-5
Original file line numberDiff line numberDiff line change
@@ -98,8 +98,7 @@ export default observer(function SplitView({
9898
>
9999
{views.map((view, viewIndex) => {
100100
const lastView = viewIndex === views.length - 1;
101-
const margins =
102-
3 + (viewIndex === 0 ? -1.5 : 0) + (lastView ? -1.5 : 0);
101+
const margins = 2 + (viewIndex === 0 ? -1 : 0) + (lastView ? -1 : 0);
103102
const size = {
104103
[childSizeKey]: `calc(${state.sizes[viewIndex]}%${
105104
margins ? ` - ${margins}px` : ""
@@ -117,7 +116,6 @@ export default observer(function SplitView({
117116
{!lastView ? (
118117
<Resizer
119118
direction={state.direction}
120-
onFlip={() => state.flipSplitDirection()}
121119
onResizeStart={(e) =>
122120
resizeHandler(e, {
123121
viewIndex,
@@ -134,15 +132,13 @@ export default observer(function SplitView({
134132

135133
interface ResizerProps {
136134
direction: SplitViewDirection;
137-
onFlip: () => void;
138135
onResizeStart: (event: React.MouseEvent) => void;
139136
}
140137

141138
function Resizer({onResizeStart}: ResizerProps) {
142139
return (
143140
<div className={styles.resizer}>
144141
<div className={styles.grabHandle} onMouseDown={onResizeStart}></div>
145-
{/* <div className={styles.resizerFlip} onClick={onFlip}></div> */}
146142
<div className={styles.resizerIndicator} />
147143
</div>
148144
);

‎shared/common/ui/splitView/model.ts

+3-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,9 @@ export enum SplitViewDirection {
77

88
@model("SplitViewState")
99
export class SplitViewState extends Model({
10-
direction: prop<SplitViewDirection>(SplitViewDirection.horizontal),
10+
direction: prop<SplitViewDirection>(
11+
SplitViewDirection.horizontal
12+
).withSetter(),
1113
sizes: prop<[number, number]>(() => [50, 50]).withSetter(),
1214
activeViewIndex: prop<0 | 1>(0).withSetter(),
1315
}) {

0 commit comments

Comments
 (0)