aboutsummaryrefslogtreecommitdiffhomepage
path: root/client
diff options
context:
space:
mode:
authorChocobozzz <florian.bigard@gmail.com>2017-12-01 09:20:19 +0100
committerChocobozzz <florian.bigard@gmail.com>2017-12-01 10:55:56 +0100
commitb33f657c304b77938c1f68164d8e754787f5aae5 (patch)
tree93c47cfff0124a1084e7c5344969a82ed60ee926 /client
parentfef2c7164e025b12a64185dbab058ef4129733c6 (diff)
downloadPeerTube-b33f657c304b77938c1f68164d8e754787f5aae5.tar.gz
PeerTube-b33f657c304b77938c1f68164d8e754787f5aae5.tar.zst
PeerTube-b33f657c304b77938c1f68164d8e754787f5aae5.zip
Begin new menu design
Diffstat (limited to 'client')
-rw-r--r--client/config/webpack.common.js2
-rw-r--r--client/package.json3
-rw-r--r--client/src/app/app.component.html18
-rw-r--r--client/src/app/app.component.scss63
-rw-r--r--client/src/app/app.component.ts17
-rw-r--r--client/src/app/app.module.ts6
-rw-r--r--client/src/app/core/core.module.ts8
-rw-r--r--client/src/app/core/index.ts1
-rw-r--r--client/src/app/core/menu/menu.component.html55
-rw-r--r--client/src/app/core/menu/menu.component.scss51
-rw-r--r--client/src/app/menu/index.ts (renamed from client/src/app/core/menu/index.ts)0
-rw-r--r--client/src/app/menu/menu-admin.component.html (renamed from client/src/app/core/menu/menu-admin.component.html)0
-rw-r--r--client/src/app/menu/menu-admin.component.ts (renamed from client/src/app/core/menu/menu-admin.component.ts)4
-rw-r--r--client/src/app/menu/menu.component.html48
-rw-r--r--client/src/app/menu/menu.component.scss131
-rw-r--r--client/src/app/menu/menu.component.ts (renamed from client/src/app/core/menu/menu.component.ts)15
-rw-r--r--client/src/app/shared/search/search.component.html26
-rw-r--r--client/src/app/shared/search/search.component.scss51
-rw-r--r--client/src/assets/logo.pngbin838 -> 0 bytes
-rw-r--r--client/src/assets/logo.svg118
-rw-r--r--client/src/assets/menu/administration.svg14
-rw-r--r--client/src/assets/menu/recently-added.svg13
-rw-r--r--client/src/assets/menu/trending.svg16
-rw-r--r--client/src/sass/_variables.scss15
-rw-r--r--client/src/sass/application.scss8
-rw-r--r--client/yarn.lock10
26 files changed, 431 insertions, 262 deletions
diff --git a/client/config/webpack.common.js b/client/config/webpack.common.js
index 9cd33d2ed..583f4ba07 100644
--- a/client/config/webpack.common.js
+++ b/client/config/webpack.common.js
@@ -153,7 +153,7 @@ module.exports = function (options) {
153 ] 153 ]
154 }, 154 },
155 { test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, use: 'url-loader?limit=10000&minetype=application/font-woff' }, 155 { test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, use: 'url-loader?limit=10000&minetype=application/font-woff' },
156 { test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, use: 'file-loader' }, 156 { test: /\.(otf|ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, use: 'url-loader?limit=10000' },
157 157
158 /* Raw loader support for *.html 158 /* Raw loader support for *.html
159 * Returns file content as string 159 * Returns file content as string
diff --git a/client/package.json b/client/package.json
index 39b3185cc..c551c995a 100644
--- a/client/package.json
+++ b/client/package.json
@@ -70,7 +70,7 @@
70 "markdown-it": "^8.4.0", 70 "markdown-it": "^8.4.0",
71 "ng-router-loader": "^2.0.0", 71 "ng-router-loader": "^2.0.0",
72 "ngc-webpack": "3.2.2", 72 "ngc-webpack": "3.2.2",
73 "ngx-bootstrap": "1.9.3", 73 "ngx-bootstrap": "2.0.0-beta.9",
74 "ngx-chips": "1.5.3", 74 "ngx-chips": "1.5.3",
75 "node-sass": "^4.1.1", 75 "node-sass": "^4.1.1",
76 "normalize.css": "^7.0.0", 76 "normalize.css": "^7.0.0",
@@ -86,6 +86,7 @@
86 "sass-resources-loader": "^1.2.1", 86 "sass-resources-loader": "^1.2.1",
87 "script-ext-html-webpack-plugin": "^1.3.2", 87 "script-ext-html-webpack-plugin": "^1.3.2",
88 "source-map-loader": "^0.2.1", 88 "source-map-loader": "^0.2.1",
89 "source-sans-pro": "^2.0.10",
89 "standard": "^10.0.0", 90 "standard": "^10.0.0",
90 "string-replace-loader": "^1.0.3", 91 "string-replace-loader": "^1.0.3",
91 "style-loader": "^0.19.0", 92 "style-loader": "^0.19.0",
diff --git a/client/src/app/app.component.html b/client/src/app/app.component.html
index 8a826e783..f4672c7ec 100644
--- a/client/src/app/app.component.html
+++ b/client/src/app/app.component.html
@@ -1,7 +1,7 @@
1<div class="container-fluid"> 1<div class="container-fluid">
2 <div class="row header"> 2 <div class="row header">
3 3
4 <div class="col-md-2 col-sm-3 col-xs-3 top-left-block" [ngClass]="{ 'border-bottom': isMenuDisplayed === false }"> 4 <div class="top-left-block" [ngClass]="{ 'border-bottom': isMenuDisplayed === false }">
5 <div class="hamburger-block" (click)="toggleMenu()"> 5 <div class="hamburger-block" (click)="toggleMenu()">
6 <span class="glyphicon glyphicon-menu-hamburger"></span> 6 <span class="glyphicon glyphicon-menu-hamburger"></span>
7 </div> 7 </div>
@@ -11,15 +11,13 @@
11 </div> 11 </div>
12 </div> 12 </div>
13 13
14 <!-- Used for the fixed title --> 14 <div class="header-right">
15 <div class="col-md-2 col-sm-3 col-xs-3 fake-title-block"></div> 15 <my-search></my-search>
16 16 </div>
17 <!-- We need to reset col-md-* because my-search is in fixed position -->
18 <my-search class="col-md-10 col-sm-9 col-xs-9"></my-search>
19 </div> 17 </div>
20 18
21 <div class="row"> 19 <div class="row sub-header-container">
22 <div class="col-md-2 col-sm-3 col-xs-3 title-menu-left"> 20 <div class="title-menu-left">
23 21
24 <div class="title-menu-left-block menu"> 22 <div class="title-menu-left-block menu">
25 <my-menu *ngIf="isMenuDisplayed && isInAdmin() === false"></my-menu> 23 <my-menu *ngIf="isMenuDisplayed && isInAdmin() === false"></my-menu>
@@ -27,10 +25,6 @@
27 </div> 25 </div>
28 </div> 26 </div>
29 27
30 <!-- Used for the fixed menu -->
31 <div class="fake-menu col-md-2 col-sm-3 col-xs-3">
32 </div>
33
34 <div class="main-col" [ngClass]="getMainColClasses()"> 28 <div class="main-col" [ngClass]="getMainColClasses()">
35 29
36 <div class="main-row"> 30 <div class="main-row">
diff --git a/client/src/app/app.component.scss b/client/src/app/app.component.scss
index a656d5c29..28e86097c 100644
--- a/client/src/app/app.component.scss
+++ b/client/src/app/app.component.scss
@@ -2,10 +2,23 @@
2 min-height: calc(100vh - #{$header-height} - #{$footer-height} - #{$footer-margin}); 2 min-height: calc(100vh - #{$header-height} - #{$footer-height} - #{$footer-margin});
3} 3}
4 4
5.main-col {
6 margin-left: $menu-width;
7
8 &.expanded {
9 margin-left: 0;
10 }
11}
12
13.sub-header-container {
14 margin-top: $header-height;
15}
16
5.title-menu-left { 17.title-menu-left {
6 position: fixed; 18 position: fixed;
7 height: calc(100vh - #{$header-height}); 19 height: calc(100vh - #{$header-height});
8 padding: 0; 20 padding: 0;
21 width: $menu-width;
9 22
10 .title-menu-left-block.menu { 23 .title-menu-left-block.menu {
11 height: 100%; 24 height: 100%;
@@ -14,35 +27,28 @@
14 27
15.header { 28.header {
16 height: $header-height; 29 height: $header-height;
17 30 position: fixed;
18 .fake-title-block { 31 width: 100%;
19 display: inline-block; 32 background-color: #fff;
20 } 33 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16);
34 display: flex;
21 35
22 .top-left-block { 36 .top-left-block {
23 z-index: 100; 37 width: $menu-width;
24 background-color: #fff; 38 z-index: 1001;
25 border-right: 1px solid $header-border-color;
26 height: $header-height; 39 height: $header-height;
27 line-height: $header-height; 40 line-height: $header-height;
28 margin-top: 0; 41 margin-top: 0;
29 margin-bottom: 0; 42 margin-bottom: 0;
30 display: flex; 43 display: flex;
31 position: fixed;
32 padding: 0; 44 padding: 0;
33 45
34 &.border-bottom {
35 border-bottom: 1px solid $header-border-color;
36 }
37
38 .hamburger-block { 46 .hamburger-block {
39 margin-right: 15px; 47 margin-right: 10px;
40 margin-left: 15px; 48 margin-left: 25px;
41 49
42 .glyphicon { 50 .glyphicon {
43 cursor: pointer; 51 cursor: pointer;
44 position: relative;
45 top: 4px;
46 } 52 }
47 } 53 }
48 54
@@ -50,12 +56,9 @@
50 a { 56 a {
51 color: inherit !important; 57 color: inherit !important;
52 display: block; 58 display: block;
53 background: url('../assets/logo.png') no-repeat; 59 background: url('../assets/logo.svg') no-repeat;
54 background-size: contain; 60 width: 24px;
55 background-position: center; 61 height: 24px;
56 height: 100%;
57 margin: auto;
58 width: 135px;
59 62
60 &:hover { 63 &:hover {
61 color: inherit !important; 64 color: inherit !important;
@@ -122,17 +125,11 @@
122 } 125 }
123 } 126 }
124 127
125 my-search { 128 .header-right {
126 position: fixed; 129 text-align: right;
127 z-index: 1000; 130 height: $header-height;
128 // Fix col-md-* padding 131 margin-left: $menu-width;
129 padding: 0; 132 flex-grow: 1;
130 }
131
132 .search-col {
133 height: 100%;
134 margin-left: -15px;
135 padding: 0;
136 } 133 }
137} 134}
138 135
diff --git a/client/src/app/app.component.ts b/client/src/app/app.component.ts
index 9b699fafd..b1818c298 100644
--- a/client/src/app/app.component.ts
+++ b/client/src/app/app.component.ts
@@ -1,8 +1,6 @@
1import { Component, OnInit } from '@angular/core' 1import { Component, OnInit } from '@angular/core'
2import { Router } from '@angular/router' 2import { Router } from '@angular/router'
3
4import { AuthService, ServerService } from './core' 3import { AuthService, ServerService } from './core'
5import { UserService } from './shared'
6 4
7@Component({ 5@Component({
8 selector: 'my-app', 6 selector: 'my-app',
@@ -62,20 +60,9 @@ export class AppComponent implements OnInit {
62 } 60 }
63 61
64 getMainColClasses () { 62 getMainColClasses () {
65 const colSizes = {
66 md: 10,
67 sm: 9,
68 xs: 9
69 }
70
71 // Take all width is the menu is not displayed 63 // Take all width is the menu is not displayed
72 if (this.isMenuDisplayed === false) { 64 if (this.isMenuDisplayed === false) return [ 'expanded' ]
73 Object.keys(colSizes).forEach(col => colSizes[col] = 12)
74 }
75
76 const classes = []
77 Object.keys(colSizes).forEach(col => classes.push(`col-${col}-${colSizes[col]}`))
78 65
79 return classes 66 return []
80 } 67 }
81} 68}
diff --git a/client/src/app/app.module.ts b/client/src/app/app.module.ts
index e71641e0d..342589003 100644
--- a/client/src/app/app.module.ts
+++ b/client/src/app/app.module.ts
@@ -20,6 +20,7 @@ import { LoginModule } from './login'
20import { SignupModule } from './signup' 20import { SignupModule } from './signup'
21import { SharedModule } from './shared' 21import { SharedModule } from './shared'
22import { VideosModule } from './videos' 22import { VideosModule } from './videos'
23import { MenuComponent, MenuAdminComponent } from './menu'
23 24
24export function metaFactory (): MetaLoader { 25export function metaFactory (): MetaLoader {
25 return new MetaStaticLoader({ 26 return new MetaStaticLoader({
@@ -47,7 +48,10 @@ const APP_PROVIDERS = [
47@NgModule({ 48@NgModule({
48 bootstrap: [ AppComponent ], 49 bootstrap: [ AppComponent ],
49 declarations: [ 50 declarations: [
50 AppComponent 51 AppComponent,
52
53 MenuComponent,
54 MenuAdminComponent
51 ], 55 ],
52 imports: [ 56 imports: [
53 BrowserModule, 57 BrowserModule,
diff --git a/client/src/app/core/core.module.ts b/client/src/app/core/core.module.ts
index c4ce2b637..75262e6cf 100644
--- a/client/src/app/core/core.module.ts
+++ b/client/src/app/core/core.module.ts
@@ -26,17 +26,13 @@ import { throwIfAlreadyLoaded } from './module-import-guard'
26 ], 26 ],
27 27
28 declarations: [ 28 declarations: [
29 ConfirmComponent, 29 ConfirmComponent
30 MenuComponent,
31 MenuAdminComponent
32 ], 30 ],
33 31
34 exports: [ 32 exports: [
35 SimpleNotificationsModule, 33 SimpleNotificationsModule,
36 34
37 ConfirmComponent, 35 ConfirmComponent
38 MenuComponent,
39 MenuAdminComponent
40 ], 36 ],
41 37
42 providers: [ 38 providers: [
diff --git a/client/src/app/core/index.ts b/client/src/app/core/index.ts
index 8358261ae..3c01e05aa 100644
--- a/client/src/app/core/index.ts
+++ b/client/src/app/core/index.ts
@@ -1,6 +1,5 @@
1export * from './auth' 1export * from './auth'
2export * from './server' 2export * from './server'
3export * from './confirm' 3export * from './confirm'
4export * from './menu'
5export * from './routing' 4export * from './routing'
6export * from './core.module' 5export * from './core.module'
diff --git a/client/src/app/core/menu/menu.component.html b/client/src/app/core/menu/menu.component.html
deleted file mode 100644
index fcde23fdd..000000000
--- a/client/src/app/core/menu/menu.component.html
+++ /dev/null
@@ -1,55 +0,0 @@
1<menu>
2 <div class="panel-block">
3 <div class="block-title">Account</div>
4
5 <div id="panel-user-login" class="panel-button">
6 <a *ngIf="!isLoggedIn" routerLink="/login" routerLinkActive="active">
7 <span class="hidden-xs glyphicon glyphicon-log-in"></span>
8 Login
9 </a>
10
11 <a *ngIf="isLoggedIn" (click)="logout()">
12 <span class="hidden-xs glyphicon glyphicon-log-out"></span>
13 Logout
14 </a>
15 </div>
16
17 <a *ngIf="!isLoggedIn && isRegistrationAllowed()" routerLink="/signup" routerLinkActive="active">
18 <span class="hidden-xs glyphicon glyphicon-user"></span>
19 Signup
20 </a>
21
22 <a *ngIf="isLoggedIn" routerLink="/account" routerLinkActive="active">
23 <span class="hidden-xs glyphicon glyphicon-user"></span>
24 My account
25 </a>
26
27 <a *ngIf="isLoggedIn" routerLink="/videos/mine" routerLinkActive="active">
28 <span class="hidden-xs glyphicon glyphicon-folder-open"></span>
29 My videos
30 </a>
31 </div>
32
33 <div class="panel-block">
34 <div class="block-title">Videos</div>
35
36 <a routerLink="/videos/list" routerLinkActive="active">
37 <span class="hidden-xs glyphicon glyphicon-list"></span>
38 See videos
39 </a>
40
41 <a *ngIf="isLoggedIn" routerLink="/videos/upload" routerLinkActive="active">
42 <span class="hidden-xs glyphicon glyphicon-cloud-upload"></span>
43 Upload a video
44 </a>
45 </div>
46
47 <div *ngIf="userHasAdminAccess" class="panel-block">
48 <div class="block-title">Other</div>
49
50 <a [routerLink]="getFirstAdminRouteAvailable()" routerLinkActive="active">
51 <span class="hidden-xs glyphicon glyphicon-cog"></span>
52 Administration
53 </a>
54 </div>
55</menu>
diff --git a/client/src/app/core/menu/menu.component.scss b/client/src/app/core/menu/menu.component.scss
deleted file mode 100644
index 45679c310..000000000
--- a/client/src/app/core/menu/menu.component.scss
+++ /dev/null
@@ -1,51 +0,0 @@
1menu {
2 background-color: $black-background;
3 padding: 15px;
4 margin: 0;
5 height: 100%;
6 white-space: nowrap;
7 text-overflow: ellipsis;
8 overflow: hidden;
9 z-index: 1000;
10
11 @media screen and (max-width: 550px) {
12 font-size: 90%;
13 }
14
15 @media screen and (min-width: 1200px) {
16 padding: 25px;
17 }
18
19 .panel-block {
20 margin-bottom: 15px;
21 }
22
23 .block-title {
24 text-transform: uppercase;
25 font-weight: bold;
26 color: $menu-color-block;
27 margin-bottom: 10px;
28 }
29
30 a {
31 display: block;
32 margin-left: 5px;
33 height: 30px;
34 color: $menu-color-link;
35 cursor: pointer;
36 transition: color 0.3s;
37
38 &:hover, &:focus {
39 text-decoration: none !important;
40 outline: none !important;
41 }
42
43 .glyphicon {
44 margin-right: 15px;
45 }
46
47 &:hover, &.active {
48 color: #fff;
49 }
50 }
51}
diff --git a/client/src/app/core/menu/index.ts b/client/src/app/menu/index.ts
index c905ed20a..c905ed20a 100644
--- a/client/src/app/core/menu/index.ts
+++ b/client/src/app/menu/index.ts
diff --git a/client/src/app/core/menu/menu-admin.component.html b/client/src/app/menu/menu-admin.component.html
index 9857b2e3e..9857b2e3e 100644
--- a/client/src/app/core/menu/menu-admin.component.html
+++ b/client/src/app/menu/menu-admin.component.html
diff --git a/client/src/app/core/menu/menu-admin.component.ts b/client/src/app/menu/menu-admin.component.ts
index ea8d5f57c..1babf5eb6 100644
--- a/client/src/app/core/menu/menu-admin.component.ts
+++ b/client/src/app/menu/menu-admin.component.ts
@@ -1,7 +1,7 @@
1import { Component } from '@angular/core' 1import { Component } from '@angular/core'
2 2
3import { AuthService } from '../auth/auth.service' 3import { AuthService } from '../core/auth/auth.service'
4import { UserRight } from '../../../../../shared' 4import { UserRight } from '../../../../shared'
5 5
6@Component({ 6@Component({
7 selector: 'my-menu-admin', 7 selector: 'my-menu-admin',
diff --git a/client/src/app/menu/menu.component.html b/client/src/app/menu/menu.component.html
new file mode 100644
index 000000000..bb0caaef5
--- /dev/null
+++ b/client/src/app/menu/menu.component.html
@@ -0,0 +1,48 @@
1<menu>
2 <div *ngIf="isLoggedIn" class="logged-in-block">
3 <div class="logged-in-info">
4 <div class="logged-in-username">{{ user.username }}</div>
5 <div class="logged-in-email">{{ user.email }}</div>
6 </div>
7
8 <div class="logged-in-more" dropdown placement="right" container="body">
9 <span class="glyphicon glyphicon-option-vertical" dropdownToggle></span>
10
11 <ul *dropdownMenu class="dropdown-menu">
12 <li>
13 <a (click)="logout($event)" class="dropdown-item" title="Log out" href="#">
14 Log out
15 </a>
16 </li>
17 </ul>
18 </div>
19 </div>
20
21 <div *ngIf="!isLoggedIn" class="button-block">
22 <a routerLink="/login"class="login-button">Login</a>
23 <a *ngIf="isRegistrationAllowed()" routerLink="/signup" class="create-account-button">Create an account</a>
24 </div>
25
26 <div class="panel-block">
27 <div class="block-title">Videos</div>
28
29 <a routerLink="/videos/list" routerLinkActive="active">
30 <span class="icon icon-videos-trending"></span>
31 Trending
32 </a>
33
34 <a routerLink="/videos/list" routerLinkActive="active">
35 <span class="icon icon-videos-recently-added"></span>
36 Recently added
37 </a>
38 </div>
39
40 <div *ngIf="userHasAdminAccess" class="panel-block">
41 <div class="block-title">More</div>
42
43 <a [routerLink]="getFirstAdminRouteAvailable()" routerLinkActive="active">
44 <span class="icon icon-administration"></span>
45 Administration
46 </a>
47 </div>
48</menu>
diff --git a/client/src/app/menu/menu.component.scss b/client/src/app/menu/menu.component.scss
new file mode 100644
index 000000000..8a4910605
--- /dev/null
+++ b/client/src/app/menu/menu.component.scss
@@ -0,0 +1,131 @@
1menu {
2 background-color: $black-background;
3 margin: 0;
4 padding: 0;
5 height: 100%;
6 white-space: nowrap;
7 text-overflow: ellipsis;
8 overflow: hidden;
9 z-index: 1000;
10 color: $menu-color;
11
12 @media screen and (max-width: 550px) {
13 font-size: 90%;
14 }
15
16 .logged-in-block {
17 height: 100px;
18 background-color: rgba(255, 255, 255, 0.15);
19 display: flex;
20 align-items: center;
21 justify-content: center;
22 margin-bottom: 35px;
23
24 .logged-in-info {
25 flex-grow: 1;
26 margin-left: 40px;
27
28 .logged-in-username {
29 font-size: 16px;
30 font-weight: $font-semibold;
31 }
32
33 .logged-in-email {
34 font-size: 13px;
35 color: #C6C6C6;
36 }
37 }
38
39 .logged-in-more {
40 margin-right: 20px;
41
42 .glyphicon {
43 cursor: pointer;
44 font-size: 18px;
45 }
46 }
47 }
48
49 .button-block {
50 margin: 30px 25px 35px 25px;
51
52 .login-button, .create-account-button {
53 font-weight: $font-semibold;
54 font-size: 15px;
55 height: $button-height;
56 line-height: $button-height;
57 width: 190px;
58 border-radius: 3px;
59 text-align: center;
60
61 &.login-button {
62 background-color: $orange-color;
63 margin-bottom: 10px;
64 }
65
66 &.create-account-button {
67 background-color: rgba(255, 255, 255, 0.25);
68 }
69 }
70 }
71
72 .block-title {
73 text-transform: uppercase;
74 font-weight: $font-bold; // Bold
75 font-size: 13px;
76 margin-bottom: 25px;
77 }
78
79 .panel-block {
80 margin-bottom: 45px;
81 margin-left: 26px;
82
83 a {
84 display: flex;
85
86 .icon {
87 width: 22px;
88 height: 22px;
89 display: inline-block;
90 margin-right: 18px;
91 background-size: contain;
92
93 &.icon-videos-trending {
94 position: relative;
95 top: -2px;
96 background-image: url('../../assets/menu/trending.svg');
97 }
98
99 &.icon-videos-recently-added {
100 width: 23px;
101 height: 23px;
102 position: relative;
103 top: -1px;
104 background-image: url('../../assets/menu/recently-added.svg');
105 }
106
107 &.icon-administration {
108 width: 23px;
109 height: 23px;
110
111 background-image: url('../../assets/menu/administration.svg');
112 }
113 }
114 }
115 }
116
117 a {
118 color: $menu-color;
119 height: 22px;
120 line-height: 22px;
121 display: block;
122 font-size: 16px;
123 cursor: pointer;
124 margin-bottom: 15px;
125
126 &:hover, &:focus {
127 text-decoration: none !important;
128 outline: none !important;
129 }
130 }
131}
diff --git a/client/src/app/core/menu/menu.component.ts b/client/src/app/menu/menu.component.ts
index d2bd71534..4c35bb3a5 100644
--- a/client/src/app/core/menu/menu.component.ts
+++ b/client/src/app/menu/menu.component.ts
@@ -1,9 +1,8 @@
1import { Component, OnInit } from '@angular/core' 1import { Component, OnInit } from '@angular/core'
2import { Router } from '@angular/router' 2import { Router } from '@angular/router'
3 3import { UserRight } from '../../../../shared/models/users/user-right.enum'
4import { AuthService, AuthStatus } from '../auth' 4import { AuthService, AuthStatus, ServerService } from '../core'
5import { ServerService } from '../server' 5import { User } from '../shared/users/user.model'
6import { UserRight } from '../../../../../shared/models/users/user-right.enum'
7 6
8@Component({ 7@Component({
9 selector: 'my-menu', 8 selector: 'my-menu',
@@ -11,6 +10,7 @@ import { UserRight } from '../../../../../shared/models/users/user-right.enum'
11 styleUrls: [ './menu.component.scss' ] 10 styleUrls: [ './menu.component.scss' ]
12}) 11})
13export class MenuComponent implements OnInit { 12export class MenuComponent implements OnInit {
13 user: User
14 isLoggedIn: boolean 14 isLoggedIn: boolean
15 userHasAdminAccess = false 15 userHasAdminAccess = false
16 16
@@ -29,16 +29,19 @@ export class MenuComponent implements OnInit {
29 29
30 ngOnInit () { 30 ngOnInit () {
31 this.isLoggedIn = this.authService.isLoggedIn() 31 this.isLoggedIn = this.authService.isLoggedIn()
32 if (this.isLoggedIn === true) this.user = this.authService.getUser()
32 this.computeIsUserHasAdminAccess() 33 this.computeIsUserHasAdminAccess()
33 34
34 this.authService.loginChangedSource.subscribe( 35 this.authService.loginChangedSource.subscribe(
35 status => { 36 status => {
36 if (status === AuthStatus.LoggedIn) { 37 if (status === AuthStatus.LoggedIn) {
37 this.isLoggedIn = true 38 this.isLoggedIn = true
39 this.user = this.authService.getUser()
38 this.computeIsUserHasAdminAccess() 40 this.computeIsUserHasAdminAccess()
39 console.log('Logged in.') 41 console.log('Logged in.')
40 } else if (status === AuthStatus.LoggedOut) { 42 } else if (status === AuthStatus.LoggedOut) {
41 this.isLoggedIn = false 43 this.isLoggedIn = false
44 this.user = undefined
42 this.computeIsUserHasAdminAccess() 45 this.computeIsUserHasAdminAccess()
43 console.log('Logged out.') 46 console.log('Logged out.')
44 } else { 47 } else {
@@ -78,7 +81,9 @@ export class MenuComponent implements OnInit {
78 return this.routesPerRight[right] 81 return this.routesPerRight[right]
79 } 82 }
80 83
81 logout () { 84 logout (event: Event) {
85 event.preventDefault()
86
82 this.authService.logout() 87 this.authService.logout()
83 // Redirect to home page 88 // Redirect to home page
84 this.router.navigate(['/videos/list']) 89 this.router.navigate(['/videos/list'])
diff --git a/client/src/app/shared/search/search.component.html b/client/src/app/shared/search/search.component.html
index 75e9dfa59..0e3de150c 100644
--- a/client/src/app/shared/search/search.component.html
+++ b/client/src/app/shared/search/search.component.html
@@ -1,22 +1,6 @@
1<div class="input-group"> 1<input
2 type="text" id="search-video" name="search-video" placeholder="Search"
3 [(ngModel)]="searchCriteria.value" (keyup.enter)="doSearch()"
4>
2 5
3 <span class="hidden-xs input-group-addon icon-addon"> 6<a routerLink="/videos/upload">Upload</a>
4 <span class="glyphicon glyphicon-search"></span>
5 </span>
6
7 <input
8 type="text" id="search-video" name="search-video" class="form-control" placeholder="Search" class="form-control"
9 [(ngModel)]="searchCriteria.value" (keyup.enter)="doSearch()"
10 >
11
12 <div class="input-group-btn" dropdown placement="bottom right">
13 <button id="simple-btn-keyboard-nav" type="button" class="btn btn-default" dropdownToggle>
14 {{ getStringChoice(searchCriteria.field) }} <span class="caret"></span>
15 </button>
16 <ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="simple-btn-keyboard-nav" *dropdownMenu>
17 <li *ngFor="let choice of choiceKeys" class="dropdown-item" role="menu-item">
18 <a class="dropdown-item" href="#" (click)="choose($event, choice)">{{ getStringChoice(choice) }}</a>
19 </li>
20 </ul>
21 </div>
22</div>
diff --git a/client/src/app/shared/search/search.component.scss b/client/src/app/shared/search/search.component.scss
index 583f9586f..e69de29bb 100644
--- a/client/src/app/shared/search/search.component.scss
+++ b/client/src/app/shared/search/search.component.scss
@@ -1,51 +0,0 @@
1.icon-addon {
2 background-color: #fff;
3 border-radius: 0;
4 border-color: $header-border-color;
5 border-width: 0 0 1px 0;
6 text-align: right;
7
8 .glyphicon-search {
9 width: 30px;
10 font-size: 20px;
11 }
12}
13
14input, button, .input-group {
15 height: 100%;
16}
17
18input, .input-group-btn {
19 border-radius: 0;
20 border-top: none;
21 border-left: none;
22}
23
24input {
25 height: $header-height;
26 border-right: none;
27 font-weight: bold;
28 box-shadow: none;
29
30 &, &:focus {
31 border-bottom: 1px solid $header-border-color !important;
32 outline: none !important;
33 box-shadow: none !important;
34 }
35}
36
37button {
38
39 &, &:hover, &:focus, &:active, &:visited {
40 background-color: #fff !important;
41 border-color: $header-border-color !important;
42 color: #858585 !important;
43 outline: none !important;
44
45 height: $header-height;
46 border-width: 0 0 1px 0;
47 font-weight: bold;
48 text-decoration: none;
49 box-shadow: none;
50 }
51}
diff --git a/client/src/assets/logo.png b/client/src/assets/logo.png
deleted file mode 100644
index c1d77a24c..000000000
--- a/client/src/assets/logo.png
+++ /dev/null
Binary files differ
diff --git a/client/src/assets/logo.svg b/client/src/assets/logo.svg
new file mode 100644
index 000000000..8777acd5b
--- /dev/null
+++ b/client/src/assets/logo.svg
@@ -0,0 +1,118 @@
1<?xml version="1.0" encoding="UTF-8" standalone="no"?>
2<svg
3 xmlns:dc="http://purl.org/dc/elements/1.1/"
4 xmlns:cc="http://creativecommons.org/ns#"
5 xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
6 xmlns:svg="http://www.w3.org/2000/svg"
7 xmlns="http://www.w3.org/2000/svg"
8 xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
9 xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
10 viewBox="2799 -911 16 22"
11 version="1.1"
12 id="svg13"
13 sodipodi:docname="logo.svg"
14 width="16"
15 height="22"
16 inkscape:version="0.92.2 5c3e80d, 2017-08-06">
17 <metadata
18 id="metadata17">
19 <rdf:RDF>
20 <cc:Work
21 rdf:about="">
22 <dc:format>image/svg+xml</dc:format>
23 <dc:type
24 rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
25 <dc:title></dc:title>
26 </cc:Work>
27 </rdf:RDF>
28 </metadata>
29 <sodipodi:namedview
30 pagecolor="#ffffff"
31 bordercolor="#666666"
32 borderopacity="1"
33 objecttolerance="10"
34 gridtolerance="10"
35 guidetolerance="10"
36 inkscape:pageopacity="0"
37 inkscape:pageshadow="2"
38 inkscape:window-width="1916"
39 inkscape:window-height="1040"
40 id="namedview15"
41 showgrid="false"
42 inkscape:zoom="29.790476"
43 inkscape:cx="-1.1827326"
44 inkscape:cy="12.088"
45 inkscape:window-x="0"
46 inkscape:window-y="18"
47 inkscape:window-maximized="0"
48 inkscape:current-layer="svg13" />
49 <defs
50 id="defs4">
51 <style
52 id="style2">
53 .cls-3 {
54 fill: #211f20;
55 }
56
57 .cls-4 {
58 fill: #737373;
59 }
60
61 .cls-5 {
62 fill: #f1680d;
63 }
64
65 .cls-6 {
66 fill: #fff;
67 }
68 </style>
69 </defs>
70 <g
71 id="Artboard_1"
72 data-name="Artboard – 1"
73 class="cls-1"
74 transform="translate(0.03356777,-1.9929667)">
75 <g
76 id="Symbol_3_1"
77 data-name="Symbol 3 – 1"
78 transform="translate(2759,-975)">
79 <g
80 id="Group_44"
81 data-name="Group 44"
82 transform="translate(0,2.333)">
83 <path
84 id="Path_4"
85 data-name="Path 4"
86 class="cls-3"
87 d="m -949,-500 v 10.667 l 8,-5.333"
88 transform="translate(989,564)"
89 inkscape:connector-curvature="0"
90 style="fill:#211f20" />
91 <path
92 id="Path_5"
93 data-name="Path 5"
94 class="cls-4"
95 d="m -949,-500 v 10.667 l 8,-5.333"
96 transform="translate(989,574.667)"
97 inkscape:connector-curvature="0"
98 style="fill:#737373" />
99 <path
100 id="Path_6"
101 data-name="Path 6"
102 class="cls-5"
103 d="m -949,-500 v 10.667 l 8,-5.333"
104 transform="translate(997,569.333)"
105 inkscape:connector-curvature="0"
106 style="fill:#f1680d" />
107 <path
108 id="Path_7"
109 data-name="Path 7"
110 class="cls-6"
111 d="M 0,0 V 10.667 L 8,5.333 Z"
112 transform="rotate(180,24,40)"
113 inkscape:connector-curvature="0"
114 style="fill:#ffffff" />
115 </g>
116 </g>
117 </g>
118</svg>
diff --git a/client/src/assets/menu/administration.svg b/client/src/assets/menu/administration.svg
new file mode 100644
index 000000000..b6da837d2
--- /dev/null
+++ b/client/src/assets/menu/administration.svg
@@ -0,0 +1,14 @@
1<?xml version="1.0" encoding="UTF-8"?>
2<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
3 <!-- Generator: Sketch 43.2 (39069) - http://www.bohemiancoding.com/sketch -->
4 <title>filter</title>
5 <desc>Created with Sketch.</desc>
6 <defs></defs>
7 <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
8 <g id="Artboard-4" transform="translate(-444.000000, -247.000000)" fill="#808080">
9 <g id="70" transform="translate(444.000000, 247.000000)">
10 <path d="M8.82929429,17 L20.0066023,17 C20.5552407,17 21,17.4438648 21,18 C21,18.5522847 20.5550537,19 20.0066023,19 L8.82929429,19 C8.41745788,20.1651924 7.30621883,21 6,21 C4.34314575,21 3,19.6568542 3,18 C3,16.3431458 4.34314575,15 6,15 C7.30621883,15 8.41745788,15.8348076 8.82929429,17 Z M9.17070571,13 L3.99339768,13 C3.44475929,13 3,12.5561352 3,12 C3,11.4477153 3.44494629,11 3.99339768,11 L9.17070571,11 C9.58254212,9.83480763 10.6937812,9 12,9 C13.3062188,9 14.4174579,9.83480763 14.8292943,11 L20.0066023,11 C20.5552407,11 21,11.4438648 21,12 C21,12.5522847 20.5550537,13 20.0066023,13 L14.8292943,13 C14.4174579,14.1651924 13.3062188,15 12,15 C10.6937812,15 9.58254212,14.1651924 9.17070571,13 Z M15.1659641,6.98648118 C15.1124525,6.99537358 15.05751,7 15.0014977,7 L3.99850233,7 C3.44704472,7 3,6.55613518 3,6 C3,5.44771525 3.44748943,5 3.99850233,5 L15.0014977,5 C15.0575314,5 15.1124871,5.00458274 15.1660053,5.01340035 C15.5740343,3.84121344 16.6887792,3 18,3 C19.6568542,3 21,4.34314575 21,6 C21,7.65685425 19.6568542,9 18,9 C16.688735,9 15.5739592,8.15872988 15.1659641,6.98648118 Z M18,7 C18.5522847,7 19,6.55228475 19,6 C19,5.44771525 18.5522847,5 18,5 C17.4477153,5 17,5.44771525 17,6 C17,6.55228475 17.4477153,7 18,7 Z M12,13 C12.5522847,13 13,12.5522847 13,12 C13,11.4477153 12.5522847,11 12,11 C11.4477153,11 11,11.4477153 11,12 C11,12.5522847 11.4477153,13 12,13 Z M6,19 C6.55228475,19 7,18.5522847 7,18 C7,17.4477153 6.55228475,17 6,17 C5.44771525,17 5,17.4477153 5,18 C5,18.5522847 5.44771525,19 6,19 Z" id="Combined-Shape"></path>
11 </g>
12 </g>
13 </g>
14</svg>
diff --git a/client/src/assets/menu/recently-added.svg b/client/src/assets/menu/recently-added.svg
new file mode 100644
index 000000000..6473837f8
--- /dev/null
+++ b/client/src/assets/menu/recently-added.svg
@@ -0,0 +1,13 @@
1<?xml version="1.0" encoding="UTF-8"?>
2<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
3 <defs></defs>
4 <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
5 <g id="Artboard-4" transform="translate(-92.000000, -115.000000)">
6 <g id="2" transform="translate(92.000000, 115.000000)">
7 <circle id="Oval-1" stroke="#808080" stroke-width="2" cx="12" cy="12" r="10"></circle>
8 <rect id="Rectangle-1" fill="#808080" x="11" y="7" width="2" height="10" rx="1"></rect>
9 <rect id="Rectangle-1" fill="#808080" x="7" y="11" width="10" height="2" rx="1"></rect>
10 </g>
11 </g>
12 </g>
13</svg>
diff --git a/client/src/assets/menu/trending.svg b/client/src/assets/menu/trending.svg
new file mode 100644
index 000000000..ffc65cc04
--- /dev/null
+++ b/client/src/assets/menu/trending.svg
@@ -0,0 +1,16 @@
1<?xml version="1.0" encoding="UTF-8"?>
2<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
3 <!-- Generator: Sketch 43.2 (39069) - http://www.bohemiancoding.com/sketch -->
4 <title>graph</title>
5 <desc>Created with Sketch.</desc>
6 <defs></defs>
7 <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
8 <g id="Artboard-4" transform="translate(-444.000000, -203.000000)" stroke-width="2" stroke="#808080">
9 <g id="50" transform="translate(444.000000, 203.000000)">
10 <polyline id="Path-96" points="3 3 3 21.006249 21.0246733 21.006249"></polyline>
11 <polyline id="Path-101" points="6 18 11 12 14 13 19 7"></polyline>
12 <polygon id="Path-102" points="20 9 20 6 17 6"></polygon>
13 </g>
14 </g>
15 </g>
16</svg>
diff --git a/client/src/sass/_variables.scss b/client/src/sass/_variables.scss
index f0ffb43ba..640746722 100644
--- a/client/src/sass/_variables.scss
+++ b/client/src/sass/_variables.scss
@@ -1,12 +1,19 @@
1$font-regular: 400;
2$font-semibold: 600;
3$font-bold: 700;
4
1$grey-color: #555; 5$grey-color: #555;
6$orange-color: #F1680D;
2 7
3$black-background: #1d2125; 8$black-background: #000;
4$grey-background: #f6f2f2; 9$grey-background: #f6f2f2;
5 10
6$menu-color-link: #9cabb8; 11$button-height: 30px;
7$menu-color-block: #686f77; 12
13$menu-color: #fff;
14$menu-width: 240px;
8 15
9$header-height: 65px; 16$header-height: 50px;
10$header-border-color: #e9eff6; 17$header-border-color: #e9eff6;
11 18
12$footer-height: 30px; 19$footer-height: 30px;
diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss
index 47e1b6df0..58f07612b 100644
--- a/client/src/sass/application.scss
+++ b/client/src/sass/application.scss
@@ -1,3 +1,5 @@
1$FontPathSourceSansPro: "../fonts/source-sans-pro";
2@import '~source-sans-pro/source-sans-pro';
1@import '~primeng/resources/themes/bootstrap/theme.css'; 3@import '~primeng/resources/themes/bootstrap/theme.css';
2@import '~primeng/resources/primeng.css'; 4@import '~primeng/resources/primeng.css';
3@import '~video.js/dist/video-js.css'; 5@import '~video.js/dist/video-js.css';
@@ -7,6 +9,12 @@
7 display: none !important; 9 display: none !important;
8} 10}
9 11
12body {
13 font-family: 'Source Sans Pro';
14 font-weight: $font-regular;
15 color: #000;
16}
17
10input.readonly { 18input.readonly {
11 /* Force blank on readonly inputs */ 19 /* Force blank on readonly inputs */
12 background-color: #fff !important; 20 background-color: #fff !important;
diff --git a/client/yarn.lock b/client/yarn.lock
index c5a47bb89..8f148e431 100644
--- a/client/yarn.lock
+++ b/client/yarn.lock
@@ -4708,9 +4708,9 @@ ngc-webpack@3.2.2:
4708 source-map "^0.5.6" 4708 source-map "^0.5.6"
4709 ts-node "^3.2.0" 4709 ts-node "^3.2.0"
4710 4710
4711ngx-bootstrap@1.9.3: 4711ngx-bootstrap@2.0.0-beta.9:
4712 version "1.9.3" 4712 version "2.0.0-beta.9"
4713 resolved "https://registry.yarnpkg.com/ngx-bootstrap/-/ngx-bootstrap-1.9.3.tgz#28e75d14fb1beaee609383d7694de4eb3ba03b26" 4713 resolved "https://registry.yarnpkg.com/ngx-bootstrap/-/ngx-bootstrap-2.0.0-beta.9.tgz#9aa7c88269534e7a5440481f31b137549f749796"
4714 4714
4715ngx-chips@1.5.3: 4715ngx-chips@1.5.3:
4716 version "1.5.3" 4716 version "1.5.3"
@@ -6602,6 +6602,10 @@ source-map@^0.6.1, source-map@~0.6.1:
6602 version "0.6.1" 6602 version "0.6.1"
6603 resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263" 6603 resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
6604 6604
6605source-sans-pro@^2.0.10:
6606 version "2.0.10"
6607 resolved "https://registry.yarnpkg.com/source-sans-pro/-/source-sans-pro-2.0.10.tgz#c1ca859cf164a088944c5e83745085e87cd533a9"
6608
6605spdx-correct@~1.0.0: 6609spdx-correct@~1.0.0:
6606 version "1.0.2" 6610 version "1.0.2"
6607 resolved "https://registry.yarnpkg.com/spdx-correct/-/spdx-correct-1.0.2.tgz#4b3073d933ff51f3912f03ac5519498a4150db40" 6611 resolved "https://registry.yarnpkg.com/spdx-correct/-/spdx-correct-1.0.2.tgz#4b3073d933ff51f3912f03ac5519498a4150db40"
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-22 21:25:25 +0000