Skip to content

Commit 8fc1f1d

Browse files
texodustexodus
committed
Fix perspective-workspace CSS
Signed-off-by: Andrew Stein <steinlink@gmail.com>
1 parent 4d4f80c commit 8fc1f1d

6 files changed

Lines changed: 107 additions & 46 deletions

File tree

‎examples/blocks/src/nypd/index.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212

1313
import perspective from "/node_modules/@finos/perspective/dist/cdn/perspective.js";
1414

15-
let DATA_URL = "nypdccrb.arrow";
15+
let DATA_URL = "../../dist/nypd/nypdccrb.arrow";
1616

1717
let LAYOUTS = localStorage.getItem("layouts")
1818
? JSON.parse(localStorage.getItem("layouts"))

‎packages/perspective-workspace/build.js‎

Lines changed: 20 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -107,36 +107,37 @@ async function build_all() {
107107
builder3.compile().get("injected.css")
108108
);
109109

110-
const builder = new BuildCss("./src/themes");
111-
add(
112-
builder,
113-
"icons.less",
114-
"@finos/perspective-viewer/src/themes/icons.less"
115-
);
116-
add(builder, "intl.less", "@finos/perspective-viewer/src/themes/intl.less");
117-
add(builder, "pro.less", "@finos/perspective-viewer/src/themes/pro.less");
118-
add(builder, "output.scss", "./src/themes/pro.less");
119-
fs.writeFileSync("dist/css/pro.css", builder.compile().get("output.css"));
110+
const pro = new BuildCss("./src/themes");
111+
add(pro, "icons.less", "@finos/perspective-viewer/src/themes/icons.less");
112+
add(pro, "intl.less", "@finos/perspective-viewer/src/themes/intl.less");
113+
add(pro, "pro.less", "@finos/perspective-viewer/src/themes/pro.less");
114+
add(pro, "output.scss", "./src/themes/pro.less");
115+
fs.writeFileSync("dist/css/pro.css", pro.compile().get("output.css"));
120116

121-
const builder2 = new BuildCss("./src/themes");
117+
const pro_dark = new BuildCss("./src/themes");
122118
add(
123-
builder2,
119+
pro_dark,
124120
"icons.less",
125121
"@finos/perspective-viewer/src/themes/icons.less"
126122
);
127123
add(
128-
builder2,
124+
pro_dark,
129125
"intl.less",
130126
"@finos/perspective-viewer/src/themes/intl.less"
131127
);
132-
add(builder2, "pro.less", "@finos/perspective-viewer/src/themes/pro.less");
133-
add(builder2, "@finos/perspective-viewer/src/themes/pro-dark.less");
134-
add(builder2, "pro-workspace.less", "./src/themes/pro.less");
135-
add(builder2, "@finos/perspective-viewer/src/themes/variables.less");
136-
add(builder2, "output.scss", "./src/themes/pro-dark.less");
128+
add(pro_dark, "pro.less", "@finos/perspective-viewer/src/themes/pro.less");
129+
add(
130+
pro_dark,
131+
"pro-dark.less",
132+
"@finos/perspective-viewer/src/themes/pro-dark.less"
133+
);
134+
// add(builder2, "@finos/perspective-viewer/src/themes/pro-dark.less");
135+
// add(builder2, "pro-workspace.less", "./src/themes/pro.less");
136+
// add(builder2, "@finos/perspective-viewer/src/themes/variables.less");
137+
add(pro_dark, "output.scss", "./src/themes/pro-dark.less");
137138
fs.writeFileSync(
138139
"dist/css/pro-dark.css",
139-
builder2.compile().get("output.css")
140+
pro_dark.compile().get("output.css")
140141
);
141142

142143
await Promise.all(BUILD.map(build)).catch(() => process.exit(1));

‎packages/perspective-workspace/src/themes/pro-dark.less‎

Lines changed: 71 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,11 @@
1010
// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
1111
// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
1212

13-
@import url("ref://pro-workspace.less");
14-
@import url("ref://@finos/perspective-viewer/src/themes/pro-dark.less");
15-
@import url("ref://@finos/perspective-viewer/src/themes/variables.less");
13+
@grey60: #c5c9d0;
14+
@grey500: #3b3f46;
15+
@grey600: #2f3136;
16+
@grey700: #2a2c2f;
17+
@grey800: #242526;
1618

1719
perspective-workspace,
1820
perspective-workspace[theme="Pro Dark"],
@@ -41,8 +43,6 @@ perspective-workspace perspective-viewer[settings] {
4143
perspective-workspace {
4244
@include perspective-workspace-pro-base;
4345
@include perspective-viewer-pro-dark--colors;
44-
--column-drag-handle--mask-image: url("../../../../rust/perspective-viewer/src/svg/drag-handle.svg");
45-
--bookmarks--mask-image: url("../../../../rust/perspective-viewer/src/svg/bookmark-icon.svg");
4646

4747
background-color: #000202;
4848
color: white;
@@ -63,12 +63,70 @@ perspective-viewer[theme="Pro Dark"].workspace-master-widget {
6363
}
6464

6565
.p-Menu {
66-
// font-family: "ui-monospace", "SFMono-Regular", "SF Mono", "Menlo", "Consolas", "Liberation Mono", monospace;
67-
// font-weight: 300 !important;
68-
background: @grey700 !important;
69-
color: white !important;
70-
border: 1px solid @grey500 !important;
71-
72-
font-family: "ui-monospace", "SFMono-Regular", "SF Mono", "Menlo", "Consolas", "Liberation Mono", monospace;
66+
font-family: "ui-monospace", "SFMono-Regular", "SF Mono", "Menlo",
67+
"Consolas", "Liberation Mono", monospace;
7368
font-weight: 300;
74-
}
69+
background: @grey700 !important;
70+
color: white !important;
71+
border: 1px solid @grey500 !important;
72+
}
73+
74+
@mixin perspective-workspace-pro-base {
75+
font-family: "ui-monospace", "SFMono-Regular", "SF Mono", "Menlo",
76+
"Consolas", "Liberation Mono", monospace;
77+
--open-settings-button--content: "expand_more";
78+
--close-settings-button--content: "expand_less";
79+
--close-button--content: "\2715";
80+
--master-divider--background-color: #243136;
81+
--menu-maximize--content: "fullscreen";
82+
--menu-minimize--content: "fullscreen_exit";
83+
--menu-duplicate--content: "call_split";
84+
--menu-master--content: "cast";
85+
--menu-detail--content: "notes";
86+
--menu-export--content: "file_download";
87+
--menu-copy--content: "file_copy";
88+
--menu-reset--content: "autorenew";
89+
--menu-link--content: "link";
90+
--menu-unlink--content: "link_off";
91+
--menu-newmenu--content: "add";
92+
--menu-close--content: "close";
93+
--menu-new--content: "description";
94+
--menu-newview--content: "file_copy";
95+
96+
--workspace-tabbar--border: 1px solid var(--inactive--color);
97+
--workspace-tabbar--border-width: 0px 1px 1px 1px;
98+
--workspace-tabbar--border-radius: 0px 0px 6px 6px;
99+
--workspace-tabbar--border-color: var(--inactive--color);
100+
--workspace-tabbar-tab--border-width: 1px 1px 0px 1px;
101+
}
102+
103+
@mixin perspective-viewer-pro-dark--colors {
104+
background-color: #242526;
105+
color: white;
106+
--icon--color: white;
107+
--active--color: #2770a9;
108+
--error--color: #ff9485;
109+
--inactive--color: #61656e;
110+
--inactive--border-color: #4c505b;
111+
--plugin--background: #242526;
112+
--modal-target--background: rgba(255, 255, 255, 0.05);
113+
--active--background: rgba(39, 113, 170, 0.5);
114+
--expression--operator-color: #c5c9d0;
115+
--expression--function-color: #22a0ce;
116+
--expression--error-color: rgb(255, 136, 136);
117+
--calendar--filter: invert(1);
118+
--warning--color: #242526;
119+
--warning--background: var(--icon--color);
120+
121+
--select-arrow--background-image: var(
122+
--select-arrow-light--background-image
123+
);
124+
125+
// Syntax
126+
--code-editor-symbol--color: white;
127+
--code-editor-literal--color: #7dc3f0;
128+
--code-editor-operator--color: rgb(23, 166, 123);
129+
--code-editor-comment--color: rgb(204, 120, 48);
130+
--code-editor-column--color: #e18ee1;
131+
// --code-editor-unknown--color: rgb(204, 120, 48);
132+
}

‎packages/perspective-workspace/src/themes/pro.less‎

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -21,14 +21,12 @@ perspective-indicator[theme="Pro Light"] {
2121
perspective-workspace {
2222
@include perspective-workspace-pro-base;
2323
@include perspective-viewer-pro--colors;
24-
background-color: #DADADA;
25-
--column-drag-handle--mask-image: url("../../../../rust/perspective-viewer/src/svg/drag-handle.svg");
26-
--bookmarks--mask-image: url("../../../../rust/perspective-viewer/src/svg/bookmark-icon.svg");
24+
background-color: #dadada;
2725
}
2826

2927
.p-Menu {
3028
@include perspective-viewer-pro--colors;
31-
background-color: #FFFFFF;
29+
background-color: #ffffff;
3230
}
3331

3432
perspective-workspace perspective-viewer[settings] {
@@ -49,14 +47,16 @@ perspective-viewer[theme="Pro Light"].workspace-master-widget {
4947
background-color: #f2f4f6;
5048
--plugin--background: #f2f4f6;
5149
regular-table {
52-
td, th {
50+
td,
51+
th {
5352
border-color: #e0e4e9;
5453
}
5554
}
5655
}
5756

5857
@mixin perspective-workspace-pro-base {
59-
font-family: "ui-monospace", "SFMono-Regular", "SF Mono", "Menlo", "Consolas", "Liberation Mono", monospace;
58+
font-family: "ui-monospace", "SFMono-Regular", "SF Mono", "Menlo",
59+
"Consolas", "Liberation Mono", monospace;
6060
--open-settings-button--content: "expand_more";
6161
--close-settings-button--content: "expand_less";
6262
--close-button--content: "\2715";
@@ -84,7 +84,8 @@ perspective-viewer[theme="Pro Light"].workspace-master-widget {
8484
}
8585

8686
.p-Menu {
87-
font-family: "ui-monospace", "SFMono-Regular", "SF Mono", "Menlo", "Consolas", "Liberation Mono", monospace;
87+
font-family: "ui-monospace", "SFMono-Regular", "SF Mono", "Menlo",
88+
"Consolas", "Liberation Mono", monospace;
8889
font-weight: 300;
8990
color: #161616;
90-
}
91+
}

‎rust/perspective-viewer/src/themes/icons.less‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111
// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
1212

1313
perspective-viewer,
14+
perspective-workspace,
1415
perspective-copy-menu,
1516
perspective-export-menu,
1617
perspective-dropdown,
@@ -77,6 +78,10 @@ perspective-string-column-style {
7778
--overflow-hint-icon--content: "!";
7879
--reset-button-icon--content: "refresh";
7980
--save-button-icon--content: "save";
81+
82+
// Workspace
83+
--column-drag-handle--mask-image: url("../svg/drag-handle.svg");
84+
--bookmarks--mask-image: url("../svg/bookmark-icon.svg");
8085
}
8186

8287
@mixin perspective-viewer-base--datagrid {

‎rust/perspective-viewer/src/themes/pro-dark.less‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111
// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
1212

1313
@import "icons.less";
14+
@import "intl.less";
1415

1516
@import url("ref://pro.less");
1617

@@ -72,11 +73,6 @@ perspective-string-column-style[theme="Pro Dark"] {
7273
--select-arrow-light--background-image
7374
);
7475

75-
// Column type indicators
76-
--float--column-type--color: #7dc3f0;
77-
--string--column-type--color: #ff9485;
78-
--date--column-type--color: @green50;
79-
--boolean--column-type--color: @orange50;
8076

8177
// Syntax
8278
--code-editor-symbol--color: white;

0 commit comments

Comments
 (0)