Skip to content

Commit cb79c84

Browse files
queadquead
committed
1.9 - Adding window icons for mac and windows
1 parent a058766 commit cb79c84

File tree

10 files changed

+377
-151
lines changed

10 files changed

+377
-151
lines changed

‎dist/assets/css/main.css

Lines changed: 89 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -784,9 +784,64 @@ input[type="radio"]:checked + label .round-check:after {
784784
margin-left: 10px;
785785
}
786786

787+
.mac-controls {
788+
display: flex;
789+
position: absolute;
790+
left: 10px;
791+
top: 10px;
792+
z-index: 9999;
793+
}
794+
795+
.mac-controls button {
796+
background: transparent;
797+
border: none;
798+
outline: 0;
799+
display: block;
800+
height: 14px;
801+
width: 14px;
802+
padding: 0;
803+
cursor: pointer;
804+
}
805+
806+
.mac-controls button + button {
807+
margin-left: 5px;
808+
}
809+
810+
#mac-close {
811+
background-image: url("../img/ui/mac-sprites.png");
812+
background-size: 62px auto;
813+
background-position: 0 0;
814+
background-repeat: no-repeat;
815+
}
816+
817+
#mac-close:active {
818+
background-position: 0 -16px;
819+
}
820+
821+
#mac-minimize {
822+
background-image: url("../img/ui/mac-sprites.png");
823+
background-size: 62px auto;
824+
background-position: -16px 0;
825+
background-repeat: no-repeat;
826+
}
827+
828+
#mac-minimize:active {
829+
background-position: -16px -16px;
830+
}
831+
832+
#mac-maximize {
833+
background-image: url("../img/ui/mac-sprites.png");
834+
background-size: 62px auto;
835+
background-position: -32px 0;
836+
background-repeat: no-repeat;
837+
}
838+
839+
#mac-maximize:active {
840+
background-position: -32px -16px;
841+
}
842+
787843
.win-controls {
788-
margin-left: auto;
789-
display: none;
844+
display: flex;
790845
height: 25px;
791846
position: absolute;
792847
right: 0;
@@ -800,22 +855,15 @@ input[type="radio"]:checked + label .round-check:after {
800855
outline: 0;
801856
padding: 0 8px;
802857
display: block;
803-
font-size: 10px;
804-
}
805-
806-
.win-controls button span {
807-
transition: all 0.1s ease-out;
808-
color: var(--c-black);
809-
}
810-
811-
.win-controls button:active span {
812-
color: rgba(0, 0, 0, 0.5);
813858
}
814859

815860
#win-close {
816861
background-color: var(--c-primary-active);
862+
background-image: url("../img/ui/win-close.png");
863+
background-repeat: no-repeat;
864+
background-position: center center;
865+
background-size: 18px auto;
817866
width: 40px;
818-
transform: scale(1);
819867
}
820868

821869
#win-close span {
@@ -824,10 +872,31 @@ input[type="radio"]:checked + label .round-check:after {
824872

825873
#win-close:active {
826874
background-color: var(--c-primary-active-focus);
875+
background-size: 14px auto;
827876
}
828877

829-
#win-close:active span {
830-
transform: scale(0.8);
878+
#win-maximize {
879+
background-image: url("../img/ui/win-maxim.png");
880+
background-repeat: no-repeat;
881+
background-position: center center;
882+
background-size: 13px auto;
883+
width: 30px;
884+
}
885+
886+
#win-maximize:active {
887+
background-color: var(--c-light-gray);
888+
}
889+
890+
#win-minimize {
891+
background-image: url("../img/ui/win-minim.png");
892+
background-repeat: no-repeat;
893+
background-position: center center;
894+
background-size: 13px auto;
895+
width: 32px;
896+
}
897+
898+
#win-minimize:active {
899+
background-color: var(--c-light-gray);
831900
}
832901

833902
#logo {
@@ -899,6 +968,11 @@ input[type="radio"]:checked + label .round-check:after {
899968
transform: rotate(180deg);
900969
}
901970

971+
.mac-controls,
972+
.win-controls {
973+
display: none;
974+
}
975+
902976
#settingsForm {
903977
margin-top: 0;
904978
}

‎dist/index.html

Lines changed: 57 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -13,66 +13,71 @@
1313
</head>
1414
<body>
1515
<header>
16-
<div class="win-controls">
17-
<button id="win-minimize"><span class="fa fa-window-minimize"></span></button>
18-
<button id="win-maximize"><span class="fa fa-window-maximize"></span></button>
19-
<button id="win-close"><span class="fa fa-close"></span></button>
20-
</div>
21-
</header>
22-
<app-yt>
23-
<div class="loading-app">
24-
<i class="fa fa-circle-o-notch fa-spin fa-2x fa-fw"></i>
25-
<span class="sr-only">Loading...</span>
26-
</div>
27-
</app-yt>
16+
<div class="win-controls">
17+
<button id="win-minimize"></button>
18+
<button id="win-maximize"></button>
19+
<button id="win-close"></button>
20+
</div>
21+
<div class="mac-controls">
22+
<button id="mac-close"></button>
23+
<button id="mac-minimize"></button>
24+
<button id="mac-maximize"></button>
25+
</div>
26+
</header>
27+
<app-yt>
28+
<div class="loading-app">
29+
<i class="fa fa-circle-o-notch fa-spin fa-2x fa-fw"></i>
30+
<span class="sr-only">Loading...</span>
31+
</div>
32+
</app-yt>
2833

29-
<script>
30-
/*
31-
// Reload pentru NWJS (DE EDITAT)
32-
var path = 'assets/',
33-
fs = require('fs');
34-
35-
var maximized = false;
34+
<script>
35+
/*
36+
// Reload pentru NWJS (DE EDITAT)
37+
var path = 'assets/',
38+
fs = require('fs');
39+
40+
var maximized = false;
3641
37-
var win = nw.Window.get();
38-
39-
win.on('blur', function() {
40-
//console.log('blur');
41-
});
42+
var win = nw.Window.get();
43+
44+
win.on('blur', function() {
45+
//console.log('blur');
46+
});
4247
43-
win.on('focus', function() {
44-
//console.log('focused');
45-
});
48+
win.on('focus', function() {
49+
//console.log('focused');
50+
});
4651
47-
// Top functions
48-
49-
document.getElementById('win-minimize').onclick = function(){
50-
win.minimize();
51-
};
52+
// Top functions
53+
54+
document.getElementById('win-minimize').onclick = function(){
55+
win.minimize();
56+
};
5257
53-
document.getElementById('win-maximize').onclick = function(){
54-
if (maximized) {
55-
win.maximize();
56-
maximized = true;
57-
} else {
58-
win.unmaximize();
59-
maximized = false;
60-
}
61-
};
58+
document.getElementById('win-maximize').onclick = function(){
59+
if (maximized) {
60+
win.maximize();
61+
maximized = true;
62+
} else {
63+
win.unmaximize();
64+
maximized = false;
65+
}
66+
};
6267
63-
document.getElementById('win-close').onclick = function(){
64-
win.close();
65-
};
68+
document.getElementById('win-close').onclick = function(){
69+
win.close();
70+
};
6671
67-
win.on('maximize', function() {
68-
maximized = true;
69-
});
72+
win.on('maximize', function() {
73+
maximized = true;
74+
});
7075
71-
win.on('unmaximize', function() {
72-
maximized = false;
73-
});*/
74-
76+
win.on('unmaximize', function() {
77+
maximized = false;
78+
});*/
79+
7580

76-
</script>
81+
</script>
7782
<script type="text/javascript" src="inline.bundle.js"></script><script type="text/javascript" src="polyfills.bundle.js"></script><script type="text/javascript" src="styles.bundle.js"></script><script type="text/javascript" src="vendor.bundle.js"></script><script type="text/javascript" src="main.bundle.js"></script></body>
7883
</html>

‎dist/inline.bundle.js.map

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

0 commit comments

Comments
 (0)