Skip to content

Commit b205de7

Browse files
LarsZocherLarsZocher
committed
Added title buttons and updated steam user page
1 parent dda7691 commit b205de7

File tree

8 files changed

+269
-37
lines changed

8 files changed

+269
-37
lines changed

‎assets/css/app.css

Lines changed: 72 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,8 @@ div {
3737
height: 35px;
3838
background: transparent;
3939
width: 100%;
40-
-webkit-app-region: drag; }
40+
-webkit-app-region: drag;
41+
position: relative; }
4142

4243
#navbar {
4344
list-style-type: none;
@@ -78,6 +79,51 @@ div {
7879
bottom: 0;
7980
top: 0; }
8081

82+
#window-controls {
83+
display: grid;
84+
grid-template-columns: repeat(3, 46px);
85+
position: absolute;
86+
top: 0;
87+
right: 0;
88+
height: 30px;
89+
font-family: "Segoe MDL2 Assets";
90+
font-size: 10px; }
91+
92+
#window-controls {
93+
-webkit-app-region: no-drag; }
94+
95+
#window-controls .button {
96+
grid-row: 1 / span 1;
97+
display: flex;
98+
justify-content: center;
99+
align-items: center;
100+
width: 100%;
101+
height: 100%; }
102+
103+
#window-controls .button {
104+
user-select: none;
105+
cursor: default;
106+
color: #BBB; }
107+
108+
#window-controls .button:hover {
109+
background: rgba(255, 255, 255, 0.2);
110+
color: #FFF; }
111+
112+
#window-controls #min-button {
113+
grid-column: 1; }
114+
115+
#window-controls #max-button, #window-controls #restore-button {
116+
grid-column: 2; }
117+
118+
#window-controls #restore-button {
119+
display: none; }
120+
121+
#window-controls #close-button {
122+
grid-column: 3; }
123+
124+
#window-controls #close-button:hover {
125+
background: #E81123; }
126+
81127
::-webkit-scrollbar {
82128
width: 7px;
83129
height: 7px; }
@@ -253,26 +299,26 @@ div {
253299
top: 0;
254300
bottom: 0;
255301
right: 0;
256-
left: 0; }
302+
left: 0;
303+
transition: transform .3s linear; }
257304
#user-list-c .user .user-back::after {
258305
content: '';
259306
background: rgba(0, 0, 0, 0.4);
260307
position: absolute;
261308
top: 0;
262309
bottom: 0;
263310
right: 0;
264-
left: 0; }
311+
left: 0;
312+
transition: background .3s linear; }
265313
#user-list-c .user .user-name {
266-
transition: bottom .15s ease-in-out;
314+
transition: bottom .15s ease-in-out, background .3s linear;
267315
position: absolute;
268316
bottom: -20%;
269317
background: #00000090;
270318
height: 60%;
271319
text-align: start;
272320
width: 100%;
273321
padding-left: 5%; }
274-
#user-list-c .user .user-name.active {
275-
background: #004ad38c; }
276322
#user-list-c .user .user-btns {
277323
position: absolute;
278324
bottom: 10%;
@@ -296,6 +342,13 @@ div {
296342
bottom: 0%; }
297343
#user-list-c .user:hover .user-btns {
298344
opacity: 1; }
345+
#user-list-c .user.active .user-name {
346+
background: #00405e98;
347+
color: #FFF; }
348+
#user-list-c .user.active .user-back {
349+
transform: scale(1.05); }
350+
#user-list-c .user.active .user-back::after {
351+
background: rgba(0, 0, 0, 0.1); }
299352

300353
.code-area {
301354
width: 300px;
@@ -311,7 +364,13 @@ div {
311364
height: 100%;
312365
line-height: 150px;
313366
text-align: center;
314-
font-size: 32px; }
367+
font-size: 32px;
368+
font-weight: bold; }
369+
.code-area #current-user {
370+
position: absolute;
371+
left: 25px;
372+
top: 20px;
373+
font-size: 20px; }
315374
.code-area #code-time {
316375
position: absolute;
317376
top: 0;
@@ -397,20 +456,20 @@ div {
397456
font-size: 40px;
398457
line-height: 40px;
399458
padding-bottom: 7px;
400-
width: 340px; }
459+
width: 340px;
460+
text-align: center; }
401461
.notrades #secret:focus {
402462
border-bottom: 1px solid #006faf;
403-
box-shadow: 0 1px 0 0 #006faf;
404-
text-align: center; }
463+
box-shadow: 0 1px 0 0 #006faf; }
405464
.notrades #captcha {
406465
color: #FFF;
407466
font-size: 40px;
408467
line-height: 40px;
409-
padding-bottom: 7px; }
468+
padding-bottom: 7px;
469+
text-align: center; }
410470
.notrades #captcha:focus {
411471
border-bottom: 1px solid #006faf;
412-
box-shadow: 0 1px 0 0 #006faf;
413-
text-align: center; }
472+
box-shadow: 0 1px 0 0 #006faf; }
414473

415474
.steam-bottom {
416475
display: grid;

‎assets/js/imageUtils.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
function $(id) {
1+
function $image(id) {
22
return !id || id.nodeType === 1 ? id : document.getElementById(id);
33
}
44
function isType(o,t) { return (typeof o).indexOf(t.charAt(0).toLowerCase()) === 0;}
@@ -7,7 +7,7 @@ function isType(o,t) { return (typeof o).indexOf(t.charAt(0).toLowerCase()) =
77
function image(src,cfg) { var img, prop, target;
88
cfg = cfg || (isType(src,'o') ? src : {});
99

10-
img = $(src);
10+
img = $image(src);
1111
if (img) {
1212
src = cfg.src || img.src;
1313
} else {
@@ -26,7 +26,7 @@ function image(src,cfg) { var img, prop, target;
2626
// pull from cache)
2727
img.src = src;
2828

29-
target = $(cfg.target);
29+
target = $image(cfg.target);
3030
if (target) {
3131
target.insertBefore(img, $(cfg.insertBefore) || null);
3232
}

‎assets/js/steam.js

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -222,11 +222,16 @@ async function openSteam() {
222222
});
223223
}
224224

225+
var user_cache = {};
226+
225227
async function getSteamUserInfo(steamId){
228+
if(user_cache[steamId]){
229+
console.log("user from cache");
230+
return user_cache[steamId];
231+
}
226232
let p = new Promise((res, rej) => {
227233
var xmlhttp = new XMLHttpRequest();
228234
xmlhttp.onreadystatechange = function () {
229-
console.log("done");
230235
//console.log(this.responseText);
231236
if (this.readyState == 4 && this.status == 200) {
232237
if(this.responseText == "null"){
@@ -235,13 +240,14 @@ async function getSteamUserInfo(steamId){
235240
}
236241
var parser = new DOMParser();
237242
var xml = parser.parseFromString(this.responseText,"text/xml");
243+
user_cache[steamId] = xml;
238244
res(xml);
239245
}
240246
};
241247
xmlhttp.open("GET", "https://steamcommunity.com/profiles/"+steamId+"?xml=1", true);
242248
xmlhttp.send();
243249
});
244-
return await p;;
250+
return await p;
245251
}
246252

247253
async function timeout(time){

‎assets/js/titleButtons.js

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
const remote = require('electron').remote;
2+
3+
(function handleWindowControls() {
4+
// When document has loaded, initialise
5+
document.onreadystatechange = () => {
6+
if (document.readyState == "complete") {
7+
init();
8+
}
9+
};
10+
11+
function init() {
12+
let window = remote.getCurrentWindow();
13+
const minButton = document.getElementById('min-button'),
14+
maxButton = document.getElementById('max-button'),
15+
restoreButton = document.getElementById('restore-button'),
16+
closeButton = document.getElementById('close-button');
17+
18+
minButton.addEventListener("click", event => {
19+
window = remote.getCurrentWindow();
20+
window.minimize();
21+
});
22+
23+
maxButton.addEventListener("click", event => {
24+
window = remote.getCurrentWindow();
25+
window.maximize();
26+
toggleMaxRestoreButtons();
27+
});
28+
29+
restoreButton.addEventListener("click", event => {
30+
window = remote.getCurrentWindow();
31+
window.unmaximize();
32+
toggleMaxRestoreButtons();
33+
});
34+
35+
// Toggle maximise/restore buttons when maximisation/unmaximisation
36+
// occurs by means other than button clicks e.g. double-clicking
37+
// the title bar:
38+
toggleMaxRestoreButtons();
39+
window.on('maximize', toggleMaxRestoreButtons);
40+
window.on('unmaximize', toggleMaxRestoreButtons);
41+
42+
closeButton.addEventListener("click", event => {
43+
window = remote.getCurrentWindow();
44+
window.close();
45+
});
46+
47+
function toggleMaxRestoreButtons() {
48+
window = remote.getCurrentWindow();
49+
if (window.isMaximized()) {
50+
maxButton.style.display = "none";
51+
restoreButton.style.display = "flex";
52+
} else {
53+
restoreButton.style.display = "none";
54+
maxButton.style.display = "flex";
55+
}
56+
}
57+
}
58+
})();

‎assets/pages/mainWindow.html

Lines changed: 23 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,11 +10,27 @@
1010
<script src="../js/imageUtils.js"></script>
1111
<script src="../js/apps.js"></script>
1212
<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.2/rollups/aes.js"></script>
13+
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"></script>
1314
</head>
1415

1516
<body>
1617
<div id="head">
17-
<div id="header"></div>
18+
<div id="header">
19+
<div id="window-controls">
20+
<div class="button" id="min-button">
21+
<span>&#xE921;</span>
22+
</div>
23+
<div class="button" id="max-button">
24+
<span>&#xE922;</span>
25+
</div>
26+
<div class="button" id="restore-button">
27+
<span>&#xE923;</span>
28+
</div>
29+
<div class="button" id="close-button">
30+
<span>&#xE8BB;</span>
31+
</div>
32+
</div>
33+
</div>
1834
<div id="navbar-container">
1935
<ul id="navbar">
2036
<li>
@@ -27,13 +43,18 @@
2743
<div class="navbar-header" onclick="loadPage('users.html', this)">Users</div>
2844
</li>
2945
<li>
30-
<div class="navbar-header" onclick="window.loadDataUser()">Load data</div>
46+
<div class="navbar-header" onclick="window.loadDataUser()">Settings</div>
3147
</li>
3248
</ul>
3349
</div>
3450
</div>
3551
<div id="content"></div>
3652
<script>
53+
try {
54+
$ = jQuery = module.exports;
55+
} catch(e) {}
56+
57+
require('../js/titleButtons.js');
3758
app_loadData();
3859

3960
const SteamAuth = require("steamauth");

0 commit comments

Comments
 (0)