Skip to content

Commit e0af00e

Browse files
RandomFractalsRandomFractals
committed
#182 moved data view inline css to new data.view.css stylesheet
+ switched to loading perspective-viewer styles from loca /web/styles folder instead of unpkg.com for faster data view loading
1 parent d1ae61c commit e0af00e

File tree

2 files changed

+87
-89
lines changed

2 files changed

+87
-89
lines changed

‎web/data.view.html‎

Lines changed: 2 additions & 89 deletions
Original file line numberDiff line numberDiff line change
@@ -13,99 +13,12 @@
1313
<meta name="description" content="Data Preview">
1414
<base href="https://github.com/RandomFractals/vscode-data-preview" target="_blank" />
1515
<title>Data Preview</title>
16-
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
16+
<link rel="stylesheet" href="{styles}/perspective-viewer/{theme}.css">
17+
<link rel="stylesheet" href="{styles}/data.view.css">
1718
<script src="{scripts}/perspective.js"></script>
1819
<script src="https://unpkg.com/@finos/[email protected]/dist/umd/perspective-viewer.js"></script>
1920
<script src="{scripts}/perspective-viewer-hypergrid.js"></script>
2021
<script src="{scripts}/perspective-viewer-{charts}.js"></script>
21-
<link rel="stylesheet" href="https://unpkg.com/@finos/[email protected]/dist/umd/{theme}.css">
22-
<style>
23-
body {
24-
margin: 0px;
25-
padding: 0px;
26-
overflow: hidden;
27-
}
28-
#data-preview-icon {
29-
color: orange;
30-
font-weight: bold;
31-
font-size: 11pt;
32-
}
33-
#toolbar {
34-
margin: 0px;
35-
margin-top: 5px;
36-
padding: 0px;
37-
padding-left: 7px;
38-
font-size: 10pt;
39-
font-weight: normal;
40-
display: inline-block;
41-
white-space: nowrap;
42-
}
43-
#toolbar-left {
44-
width: calc(100% - 140);
45-
}
46-
#toolbar-right {
47-
position: absolute;
48-
top: 7px;
49-
right: 0px;
50-
width: 150px;
51-
height: 32px;
52-
padding-left: 5px;
53-
background-color: var(--vscode-editor-background);
54-
}
55-
#toolbar a {
56-
color: dodgerblue;
57-
text-decoration: none;
58-
padding: 2px 5px 2px 5px;
59-
}
60-
#title {
61-
margin: 0px;
62-
padding: 0px;
63-
}
64-
#data-url-input {
65-
width: 200px;
66-
color: var(--vscode-editor-foreground);
67-
background-color: var(--vscode-editor-background);
68-
border: 1px solid #999;
69-
}
70-
#data-viewer {
71-
position: absolute;
72-
top: 30px;
73-
bottom: 0;
74-
left: 0;
75-
right: 0;
76-
}
77-
#data-view-console-text {
78-
color: var(--vscode-editor-foreground);
79-
background-color: var(--vscode-editor-background);
80-
width: 100%;
81-
height: calc(100% - 32px);
82-
position: absolute;
83-
top: 32px;
84-
bottom: 0;
85-
left: 0;
86-
right: 0;
87-
display: block;
88-
z-index: 100;
89-
}
90-
.hidden {
91-
display: none;
92-
}
93-
.label {
94-
color: var(--vscode-editor-foreground);
95-
}
96-
select {
97-
color: var(--vscode-editor-foreground);
98-
background-color: var(--vscode-editor-background);
99-
}
100-
perspective-viewer {
101-
/* --select--color: var(--vscode-editor-foreground); */
102-
/* --select--background-color: var(--vscode-editor-background); */
103-
--select--padding: 0px 5px 0px 5px;
104-
--hypergrid--padding: 2px;
105-
--hypergrid-scrollbar--width: 18px;
106-
--hypergrid-scrollbar--border-radius: 0px;
107-
}
108-
</style>
10922
</head>
11023
<body>
11124
<div id="toolbar">

‎web/styles/data.view.css‎

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
body {
2+
margin: 0px;
3+
padding: 0px;
4+
overflow: hidden;
5+
}
6+
#data-preview-icon {
7+
color: orange;
8+
font-weight: bold;
9+
font-size: 11pt;
10+
}
11+
#toolbar {
12+
margin: 0px;
13+
margin-top: 5px;
14+
padding: 0px;
15+
padding-left: 7px;
16+
font-size: 10pt;
17+
font-weight: normal;
18+
display: inline-block;
19+
white-space: nowrap;
20+
}
21+
#toolbar-left {
22+
width: calc(100% - 140);
23+
}
24+
#toolbar-right {
25+
position: absolute;
26+
top: 7px;
27+
right: 0px;
28+
width: 150px;
29+
height: 32px;
30+
padding-left: 5px;
31+
background-color: var(--vscode-editor-background);
32+
}
33+
#toolbar a {
34+
color: dodgerblue;
35+
text-decoration: none;
36+
padding: 2px 5px 2px 5px;
37+
}
38+
#title {
39+
margin: 0px;
40+
padding: 0px;
41+
}
42+
#data-url-input {
43+
width: 200px;
44+
color: var(--vscode-editor-foreground);
45+
background-color: var(--vscode-editor-background);
46+
border: 1px solid #999;
47+
}
48+
#data-viewer {
49+
position: absolute;
50+
top: 30px;
51+
bottom: 0;
52+
left: 0;
53+
right: 0;
54+
}
55+
#data-view-console-text {
56+
color: var(--vscode-editor-foreground);
57+
background-color: var(--vscode-editor-background);
58+
width: 100%;
59+
height: calc(100% - 32px);
60+
position: absolute;
61+
top: 32px;
62+
bottom: 0;
63+
left: 0;
64+
right: 0;
65+
display: block;
66+
z-index: 100;
67+
}
68+
.hidden {
69+
display: none;
70+
}
71+
.label {
72+
color: var(--vscode-editor-foreground);
73+
}
74+
select {
75+
color: var(--vscode-editor-foreground);
76+
background-color: var(--vscode-editor-background);
77+
}
78+
perspective-viewer {
79+
/* --select--color: var(--vscode-editor-foreground); */
80+
/* --select--background-color: var(--vscode-editor-background); */
81+
--select--padding: 0px 5px 0px 5px;
82+
--hypergrid--padding: 2px;
83+
--hypergrid-scrollbar--width: 18px;
84+
--hypergrid-scrollbar--border-radius: 0px;
85+
}

0 commit comments

Comments
 (0)