Skip to content

Commit 7264543

Browse files
DevanitiDevaniti
committed
Updated UI of GUI
1 parent 7847269 commit 7264543

File tree

17 files changed

+129
-34
lines changed

17 files changed

+129
-34
lines changed

‎source/GUI/html/database.svg

Lines changed: 1 addition & 0 deletions
Loading

‎source/GUI/html/default.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎source/GUI/html/github-mark.svg

Lines changed: 1 addition & 0 deletions
Loading

‎source/GUI/html/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
<!doctype html><html><head><title>D3d12infoGUI Report</title><meta charset="UTF-8"><script src="reports.js"></script><script defer="defer" src="default.js"></script></head><body><noscript>This app requires javascript to run</noscript><main><div class="ReportTable"><div id="ListContainer"></div><div id="SearchBarPropertiesContainer"></div><div id="HeaderContainer"></div><div id="ReportContainer"></div></div></main></body></html>
1+
<!doctype html><html><head><title>D3d12infoGUI Report</title><meta charset="UTF-8"><script src="reports.js"></script><script defer="defer" src="default.js"></script></head><body><noscript>This app requires javascript to run</noscript><div class="header"><div style="width:.5em"></div><div class="headerText">D3d12infoGUI Report</div><div style="width:1em"></div><a class="headerLink" href="https://d3d12infodb.boolka.dev/"><div class="headerText">Online Database</div><img class="icon" src="database.svg"></a><div style="width:1em"></div><div class="flexRight"><a class="headerLink" href="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/Devaniti/D3d12infoGUI"><div class="headerText">D3d12infoGUI on GitHub</div><img class="icon" src="github-mark.svg"> </a><a class="headerLink" href="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/sawickiap/D3d12info"><div class="headerText">D3d12info on GitHub</div><img class="icon" src="github-mark.svg"></a><div class="headerLink gui-tooltip"><div class="headerText">About</div><img class="tooltipicon" src="info.svg"><div class="gui-tooltiptext" style="width:35vw;left:70%;transform:translateX(-100%)">D3d12infoGUI is a tool for querying support for various Direct3D 12 features.<br>In this report you can find data about all D3D12 capable GPUs in your local machine.<br>There's also community-driven online database listing same information for various hardware which you can open via "Online Database" link in the header.<br>You can submit your reports to the online database with one of the submit buttons if database doesn't contain equivalent data already.<br>If database contains equivalent report, or if you just submitted one of your reports, you can then open it online and share the link to your report.<br>Those reports don't contain any personal information, you can see full contents of those reports on this page before submitting.</div></div><div style="width:3em"></div></div><div style="width:.5em"></div></div><main><div class="ReportTable"><div id="ListContainer"></div><div id="SearchBarPropertiesContainer"></div><div id="HeaderContainer"></div><div id="ReportContainer"></div></div></main></body></html>

‎source/frontend/assets/css/main.css

Lines changed: 34 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ a:hover {
3434
.icon {
3535
width: 1.5em;
3636
height: 1.5em;
37-
margin-right: 0.2em;
37+
margin-left: 0.2em;
3838
}
3939

4040
.headerLink {
@@ -76,6 +76,33 @@ a:hover {
7676
vertical-align: middle;
7777
}
7878

79+
.gui-tooltip {
80+
position: relative;
81+
}
82+
83+
.gui-tooltip .gui-tooltiptext {
84+
visibility: hidden;
85+
background-color: #ffffff;
86+
color: #000000;
87+
text-align: center;
88+
border-radius: 0.4em;
89+
border-color: #7f7f7f;
90+
border-style: solid;
91+
border-width: 0.1em;
92+
padding: 0.3em;
93+
margin: 0 0.2em;
94+
font-size: initial;
95+
font-family: initial;
96+
97+
position: absolute;
98+
z-index: 1;
99+
top: 110%;
100+
}
101+
102+
.gui-tooltip:hover .gui-tooltiptext {
103+
visibility: visible;
104+
}
105+
79106
@media (prefers-color-scheme: dark) {
80107
body {
81108
color: #e1e1e1;
@@ -101,4 +128,10 @@ a:hover {
101128
filter: invert(1);
102129
}
103130

131+
.gui-tooltip .gui-tooltiptext {
132+
background-color: #232323;
133+
color: #ffffff;
134+
border-color: #7f7f7f;
135+
}
136+
104137
}

‎source/frontend/assets/css/report_table.css

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,7 @@ td:nth-of-type(even) {
6767

6868
button {
6969
margin: auto;
70-
width: 9.2em;
70+
width: 11.5em;
7171
background-color: #029c07;
7272
border: none;
7373
color: white;
@@ -77,7 +77,7 @@ button {
7777
text-align: center;
7878
text-decoration: none;
7979
display: inline-block;
80-
font-size: 1.3em;
80+
font-size: 1.1em;
8181
}
8282

8383
button:disabled {

‎source/frontend/assets/html_gui/index.html

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,40 @@
99

1010
<body>
1111
<noscript>This app requires javascript to run</noscript>
12+
<div class="header">
13+
<div style="width: 0.5em"></div>
14+
<div class="headerText">D3d12infoGUI Report</div>
15+
<div style="width: 1.0em"></div>
16+
<a class="headerLink" href="https://d3d12infodb.boolka.dev/">
17+
<div class="headerText">Online Database</div>
18+
<img class="icon" src="../icons/database.svg">
19+
</a>
20+
<div style="width: 1em"></div>
21+
<div class="flexRight">
22+
<a class="headerLink" href="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/Devaniti/D3d12infoGUI">
23+
<div class="headerText">D3d12infoGUI on GitHub</div>
24+
<img class="icon" src="../icons/github-mark.svg">
25+
</a>
26+
<a class="headerLink" href="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/sawickiap/D3d12info">
27+
<div class="headerText">D3d12info on GitHub</div>
28+
<img class="icon" src="../icons/github-mark.svg">
29+
</a>
30+
<div class="headerLink gui-tooltip">
31+
<div class="headerText">About</div>
32+
<img class="tooltipicon" src="../icons/info.svg">
33+
<div class="gui-tooltiptext" style="width: 35vw;left: 70%;transform: translateX(-100%);">
34+
D3d12infoGUI is a tool for querying support for various Direct3D 12 features.<br>
35+
In this report you can find data about all D3D12 capable GPUs in your local machine.<br>
36+
There's also community-driven online database listing same information for various hardware which you can open via "Online Database" link in the header.<br>
37+
You can submit your reports to the online database with one of the submit buttons if database doesn't contain equivalent data already.<br>
38+
If database contains equivalent report, or if you just submitted one of your reports, you can then open it online and share the link to your report.<br>
39+
Those reports don't contain any personal information, you can see full contents of those reports on this page before submitting.
40+
</div>
41+
</div>
42+
<div style="width: 3em"></div>
43+
</div>
44+
<div style="width: 0.5em"></div>
45+
</div>
1246
<main>
1347
<div class="ReportTable">
1448
<div id="ListContainer"></div>

‎source/frontend/assets/html_website/header.html

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,21 +6,21 @@
66
</a>
77
<div style="width: 1em"></div>
88
<a class="headerLink" href="https://github.com/Devaniti/D3d12infoGUI/releases/latest">
9-
<img class="icon" src="../icons/download.svg">
109
<div class="headerText">GUI</div>
10+
<img class="icon" src="../icons/download.svg">
1111
</a>
1212
<a class="headerLink" href="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/Devaniti/D3d12infoGUI">
13-
<img class="icon" src="../icons/github-mark.svg">
1413
<div class="headerText">Source</div>
14+
<img class="icon" src="../icons/github-mark.svg">
1515
</a>
1616
<div style="width: 1em"></div>
1717
<a class="headerLink" href="https://github.com/sawickiap/D3d12info/releases/latest">
18-
<img class="icon" src="../icons/download.svg">
1918
<div class="headerText">CLI</div>
19+
<img class="icon" src="../icons/download.svg">
2020
</a>
2121
<a class="headerLink" href="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/sawickiap/D3d12info">
22-
<img class="icon" src="../icons/github-mark.svg">
2322
<div class="headerText">Source</div>
23+
<img class="icon" src="../icons/github-mark.svg">
2424
</a>
2525
<div class="flexRight">
2626
<a class="headerLink" href="FeatureTable.html">

‎source/frontend/assets/icons/database.svg

Lines changed: 1 addition & 0 deletions
Loading

‎source/frontend/assets/js/gui.mjs

Lines changed: 43 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
import ReportContainer from './report_container.mjs';
2-
import * as Server from './server.mjs';
3-
import * as HTML from './html.mjs';
41
import * as FormatTable from './format_table.mjs';
5-
import * as Properties from './properties.mjs';
62
import Globals from './globals.mjs';
3+
import * as HTML from './html.mjs';
4+
import * as Properties from './properties.mjs';
5+
import ReportContainer from './report_container.mjs';
6+
import * as Server from './server.mjs';
77

88
const SubmissionIDs = [[], []]
99

@@ -69,6 +69,40 @@ function SubmitAllReports() {
6969
UpdateList()
7070
}
7171

72+
function AddSubmitAllButton(tableBody, tableWidth) {
73+
const lastRow = document.createElement("tr")
74+
lastRow.style.textAlign = "center"
75+
76+
const cell = document.createElement("td")
77+
cell.colSpan = tableWidth
78+
79+
let submitButton = document.createElement("button")
80+
submitButton.classList.add("gui-tooltip")
81+
submitButton.disabled = !HaveUnsubmittedReports()
82+
submitButton.onclick = () => {
83+
SubmitAllReports()
84+
};
85+
86+
const buttonText = document.createTextNode("Submit all reports to online database")
87+
submitButton.appendChild(buttonText)
88+
89+
let tooltipIcon = document.createElement("img")
90+
tooltipIcon.classList.add("tooltipicon")
91+
tooltipIcon.style = "filter: brightness(1.5);"
92+
tooltipIcon.src = "info.svg"
93+
submitButton.appendChild(tooltipIcon)
94+
95+
const tooltipText = document.createElement("div")
96+
tooltipText.classList.add("gui-tooltiptext")
97+
tooltipText.style = "width: 25vw;left: 50%;transform: translateX(-50%)"
98+
tooltipText.textContent = "Allows other users to see capabilities of your GPU and sharing of your reports via link to the online database. Those reports don't contain any personal information, you can see full contents of those reports on this page before submitting."
99+
submitButton.appendChild(tooltipText)
100+
101+
cell.appendChild(submitButton)
102+
lastRow.appendChild(cell)
103+
tableBody.appendChild(lastRow)
104+
}
105+
72106
function UpdateList() {
73107
const listContainer = document.getElementById("ListContainer")
74108

@@ -87,20 +121,9 @@ function UpdateList() {
87121
if (IsPreviewAvailable())
88122
header.push("Header.Using preview Agility SDK")
89123

90-
header.push("Online link")
124+
header.push("Database status")
91125

92126
const firstRow = document.createElement("tr")
93-
const cell = document.createElement("td")
94-
cell.colSpan = header.length
95-
let submitButton = document.createElement("button")
96-
submitButton.disabled = !HaveUnsubmittedReports();
97-
submitButton.onclick = () => {
98-
SubmitAllReports()
99-
}
100-
const buttonText = document.createTextNode("Submit all reports")
101-
submitButton.appendChild(buttonText)
102-
cell.appendChild(submitButton)
103-
firstRow.appendChild(cell)
104127
tableBody.appendChild(firstRow)
105128

106129
const secondRow = document.createElement("tr")
@@ -117,7 +140,7 @@ function UpdateList() {
117140
header.forEach(collumn => {
118141
const cell = document.createElement("td")
119142
switch (collumn) {
120-
case "Online link":
143+
case "Database status":
121144
switch (SubmissionIDs[retailIndex][index]) {
122145
case null:
123146
{
@@ -129,7 +152,7 @@ function UpdateList() {
129152
{
130153
let link = document.createElement("a")
131154
link.href = "#"
132-
link.textContent = "Submit"
155+
link.textContent = "Not present, click here to submit"
133156
link.onclick = () => {
134157
SubmissionIDs[retailIndex][index] = null;
135158
UpdateList();
@@ -171,6 +194,8 @@ function UpdateList() {
171194
tableBody.appendChild(row)
172195
});
173196

197+
AddSubmitAllButton(tableBody, header.length)
198+
174199
table.appendChild(tableBody)
175200
listContainer.appendChild(table)
176201
}

0 commit comments

Comments
 (0)