Skip to content

Commit 0b39e02

Browse files
queadquead
committed
2.0 - Preparing UI&UX for windows app
1 parent 600b4b2 commit 0b39e02

File tree

13 files changed

+215
-42
lines changed

13 files changed

+215
-42
lines changed

‎dist/assets/css/main.css

Lines changed: 44 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ body {
4848
margin: 0;
4949
padding: 0;
5050
cursor: default;
51-
-webkit-app-region: drag;
51+
-webkit-app-region: no-drag;
5252
overflow: hidden;
5353
animation: loading-animation 2s 1;
5454
}
@@ -913,8 +913,34 @@ input[type="radio"]:checked + label .round-check:after {
913913
font-size: 11px;
914914
}
915915

916+
.header-bar {
917+
-webkit-app-region: drag;
918+
text-align: center;
919+
position: relative;
920+
height: 26px;
921+
}
922+
923+
.header-bar:before {
924+
content: '';
925+
background-color: var(--c-black);
926+
height: 100%;
927+
width: 100%;
928+
position: absolute;
929+
left: 0;
930+
top: 0;
931+
}
932+
933+
.header-bar h1 {
934+
margin: 0;
935+
font-size: 12px;
936+
position: relative;
937+
z-index: 1;
938+
padding: 4px 0;
939+
color: rgba(255, 255, 255, 0.7);
940+
}
941+
916942
.mac-controls {
917-
display: flex;
943+
display: none;
918944
position: absolute;
919945
left: 10px;
920946
top: 10px;
@@ -970,7 +996,7 @@ input[type="radio"]:checked + label .round-check:after {
970996
}
971997

972998
.win-controls {
973-
display: flex;
999+
display: none;
9741000
height: 25px;
9751001
position: absolute;
9761002
right: 0;
@@ -984,6 +1010,7 @@ input[type="radio"]:checked + label .round-check:after {
9841010
outline: 0;
9851011
padding: 0 8px;
9861012
display: block;
1013+
cursor: pointer;
9871014
}
9881015

9891016
#win-close {
@@ -1021,7 +1048,7 @@ input[type="radio"]:checked + label .round-check:after {
10211048
background-repeat: no-repeat;
10221049
background-position: center center;
10231050
background-size: 13px auto;
1024-
width: 32px;
1051+
width: 20px;
10251052
}
10261053

10271054
#win-minimize:active {
@@ -1089,8 +1116,7 @@ input[type="radio"]:checked + label .round-check:after {
10891116
color: var(--c-primary);
10901117
}
10911118

1092-
.mac-controls,
1093-
.win-controls {
1119+
.header-bar {
10941120
display: none;
10951121
}
10961122

@@ -2056,3 +2082,15 @@ iframe {
20562082
color: var(--c-black);
20572083
border-color: rgba(0, 0, 0, 0.1);
20582084
}
2085+
2086+
.application .app {
2087+
height: calc(100% - 26px);
2088+
}
2089+
2090+
.application .header-bar {
2091+
display: block;
2092+
}
2093+
2094+
.app-win .win-controls {
2095+
display: flex;
2096+
}

‎dist/index.html

Lines changed: 17 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -10,17 +10,20 @@
1010
<link rel="stylesheet" href="assets/css/main.css">
1111
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
1212
</head>
13-
<body>
13+
<body class="application app-win">
1414
<header>
15-
<div class="win-controls">
16-
<button id="win-minimize"></button>
17-
<button id="win-maximize"></button>
18-
<button id="win-close"></button>
19-
</div>
20-
<div class="mac-controls">
21-
<button id="mac-close"></button>
22-
<button id="mac-minimize"></button>
23-
<button id="mac-maximize"></button>
15+
<div class="header-bar">
16+
<h1>YouTube Player v1.9.1</h1>
17+
<div class="win-controls">
18+
<button id="win-minimize"></button>
19+
<button id="win-maximize"></button>
20+
<button id="win-close"></button>
21+
</div>
22+
<div class="mac-controls">
23+
<button id="mac-close"></button>
24+
<button id="mac-minimize"></button>
25+
<button id="mac-maximize"></button>
26+
</div>
2427
</div>
2528
</header>
2629
<app-yt>
@@ -31,6 +34,10 @@
3134
</app-yt>
3235

3336
<script>
37+
setTimeout(function(){
38+
var iframeElement = document.getElementsByTagName("iframe")[0];
39+
iframeElement.addEventListener('click', function(event) { clic(this.id); }, false);
40+
}, 3000);
3441
/*
3542
// Reload pentru NWJS (DE EDITAT)
3643
var path = 'assets/',

‎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.

‎scss/_app.scss

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
.application {
2+
#app-container > .container {
3+
height: calc(100% - 26px);
4+
}
5+
.header-bar {
6+
display: block;
7+
}
8+
}
9+
10+
.app-win {
11+
.win-controls {
12+
display: flex;
13+
}
14+
}

‎scss/_common.scss

Lines changed: 22 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -126,8 +126,29 @@
126126
opacity: 0;
127127
visibility: hidden;
128128
transition: opacity 0.1s ease-out, visibility 0.1s ease-out, height 0.1s ease-out 0.1s;
129+
position: relative;
130+
height: 270px;
131+
width: 100%;
132+
.cover-controls,
133+
.cover-image {
134+
display: block;
135+
position: absolute;
136+
cursor: pointer;
137+
}
138+
.cover-image {
139+
top: 0;
140+
left: 0;
141+
width: 100%;
142+
height: 225px;
143+
}
144+
.cover-controls {
145+
width: 100%;
146+
right: 0;
147+
bottom: 0;
148+
width: 160px;
149+
height: 35px;
150+
}
129151
&.active {
130-
height: 270px;
131152
opacity: 1;
132153
visibility: visible;
133154
transition: opacity 0.1s ease-out 0.3s, visibility 0.1s ease-out 0.1s, height 0.1s ease-out;

‎scss/_global.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ body {
1818
margin: 0;
1919
padding: 0;
2020
cursor: default;
21-
-webkit-app-region: drag;
21+
-webkit-app-region: no-drag;
2222
overflow: hidden;
2323
animation: loading-animation 2s 1;
2424
@media screen and (max-width: 991px) {

‎scss/_header.scss

Lines changed: 29 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,29 @@
1+
.header-bar {
2+
-webkit-app-region: drag;
3+
text-align: center;
4+
position: relative;
5+
height: 26px;
6+
&:before {
7+
content: '';
8+
background-color: var(--c-black);
9+
height: 100%;
10+
width: 100%;
11+
position: absolute;
12+
left: 0;
13+
top: 0;
14+
}
15+
h1 {
16+
margin: 0;
17+
font-size: $f-12;
18+
position: relative;
19+
z-index: 1;
20+
padding: 4px 0;
21+
color: rgba(255, 255, 255, 0.7);
22+
}
23+
}
24+
125
.mac-controls {
2-
display: flex;
26+
display: none;
327
position: absolute;
428
left: 10px;
529
top: 10px;
@@ -50,7 +74,7 @@
5074
}
5175

5276
.win-controls {
53-
display: flex;
77+
display: none;
5478
height: 25px;
5579
position: absolute;
5680
right: 0;
@@ -62,6 +86,7 @@
6286
outline: 0;
6387
padding: 0 8px;
6488
display: block;
89+
cursor: pointer;
6590
}
6691
}
6792

@@ -97,7 +122,7 @@
97122
background-repeat: no-repeat;
98123
background-position: center center;
99124
background-size: 13px auto;
100-
width: 32px;
125+
width: 20px;
101126
&:active {
102127
background-color: var(--c-light-gray);
103128
}
@@ -157,7 +182,6 @@
157182
}
158183
}
159184

160-
.mac-controls,
161-
.win-controls {
185+
.header-bar {
162186
display: none;
163187
}

‎scss/main.scss

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,4 +17,6 @@
1717

1818
#app-container.light-mode {
1919
@import 'theme/light';
20-
}
20+
}
21+
22+
@import 'app';

‎src/app/app.component.html

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -72,6 +72,8 @@ <h2>Player</h2>
7272
</div>
7373
<div class="app-content">
7474
<div id="youtube-player" *ngIf="feedVideos" [ngClass]="{'active': displayVideoPlayer }">
75+
<div class="cover-image" (click)="playPauseVideo()"></div>
76+
<div class="cover-controls"></div>
7577
<youtube-player [videoId]="currentVideo.id" (ready)="savePlayer($event)" (change)="onStateChange($event)" [playerVars]="playerVars()"></youtube-player>
7678
</div>
7779
<div *ngIf="currentVideo.id" class="current-video-all">

0 commit comments

Comments
 (0)