From b33f657c304b77938c1f68164d8e754787f5aae5 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Fri, 1 Dec 2017 09:20:19 +0100 Subject: [PATCH] Begin new menu design --- client/config/webpack.common.js | 2 +- client/package.json | 3 +- client/src/app/app.component.html | 18 +-- client/src/app/app.component.scss | 63 ++++----- client/src/app/app.component.ts | 17 +-- client/src/app/app.module.ts | 6 +- client/src/app/core/core.module.ts | 8 +- client/src/app/core/index.ts | 1 - client/src/app/core/menu/menu.component.html | 55 -------- client/src/app/core/menu/menu.component.scss | 51 ------- client/src/app/{core => }/menu/index.ts | 0 .../{core => }/menu/menu-admin.component.html | 0 .../{core => }/menu/menu-admin.component.ts | 4 +- client/src/app/menu/menu.component.html | 48 +++++++ client/src/app/menu/menu.component.scss | 131 ++++++++++++++++++ .../src/app/{core => }/menu/menu.component.ts | 15 +- .../app/shared/search/search.component.html | 26 +--- .../app/shared/search/search.component.scss | 51 ------- client/src/assets/logo.png | Bin 838 -> 0 bytes client/src/assets/logo.svg | 118 ++++++++++++++++ client/src/assets/menu/administration.svg | 14 ++ client/src/assets/menu/recently-added.svg | 13 ++ client/src/assets/menu/trending.svg | 16 +++ client/src/sass/_variables.scss | 15 +- client/src/sass/application.scss | 8 ++ client/yarn.lock | 10 +- 26 files changed, 431 insertions(+), 262 deletions(-) delete mode 100644 client/src/app/core/menu/menu.component.html delete mode 100644 client/src/app/core/menu/menu.component.scss rename client/src/app/{core => }/menu/index.ts (100%) rename client/src/app/{core => }/menu/menu-admin.component.html (100%) rename client/src/app/{core => }/menu/menu-admin.component.ts (87%) create mode 100644 client/src/app/menu/menu.component.html create mode 100644 client/src/app/menu/menu.component.scss rename client/src/app/{core => }/menu/menu.component.ts (84%) delete mode 100644 client/src/assets/logo.png create mode 100644 client/src/assets/logo.svg create mode 100644 client/src/assets/menu/administration.svg create mode 100644 client/src/assets/menu/recently-added.svg create mode 100644 client/src/assets/menu/trending.svg 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) { ] }, { test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, use: 'url-loader?limit=10000&minetype=application/font-woff' }, - { test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, use: 'file-loader' }, + { test: /\.(otf|ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, use: 'url-loader?limit=10000' }, /* Raw loader support for *.html * 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 @@ "markdown-it": "^8.4.0", "ng-router-loader": "^2.0.0", "ngc-webpack": "3.2.2", - "ngx-bootstrap": "1.9.3", + "ngx-bootstrap": "2.0.0-beta.9", "ngx-chips": "1.5.3", "node-sass": "^4.1.1", "normalize.css": "^7.0.0", @@ -86,6 +86,7 @@ "sass-resources-loader": "^1.2.1", "script-ext-html-webpack-plugin": "^1.3.2", "source-map-loader": "^0.2.1", + "source-sans-pro": "^2.0.10", "standard": "^10.0.0", "string-replace-loader": "^1.0.3", "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 @@
-
+
@@ -11,15 +11,13 @@
- -
- - - +
+ +
-
-
+
+
@@ -27,10 +25,6 @@
- -
-
-
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 @@ min-height: calc(100vh - #{$header-height} - #{$footer-height} - #{$footer-margin}); } +.main-col { + margin-left: $menu-width; + + &.expanded { + margin-left: 0; + } +} + +.sub-header-container { + margin-top: $header-height; +} + .title-menu-left { position: fixed; height: calc(100vh - #{$header-height}); padding: 0; + width: $menu-width; .title-menu-left-block.menu { height: 100%; @@ -14,35 +27,28 @@ .header { height: $header-height; - - .fake-title-block { - display: inline-block; - } + position: fixed; + width: 100%; + background-color: #fff; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16); + display: flex; .top-left-block { - z-index: 100; - background-color: #fff; - border-right: 1px solid $header-border-color; + width: $menu-width; + z-index: 1001; height: $header-height; line-height: $header-height; margin-top: 0; margin-bottom: 0; display: flex; - position: fixed; padding: 0; - &.border-bottom { - border-bottom: 1px solid $header-border-color; - } - .hamburger-block { - margin-right: 15px; - margin-left: 15px; + margin-right: 10px; + margin-left: 25px; .glyphicon { cursor: pointer; - position: relative; - top: 4px; } } @@ -50,12 +56,9 @@ a { color: inherit !important; display: block; - background: url('../assets/logo.png') no-repeat; - background-size: contain; - background-position: center; - height: 100%; - margin: auto; - width: 135px; + background: url('../assets/logo.svg') no-repeat; + width: 24px; + height: 24px; &:hover { color: inherit !important; @@ -122,17 +125,11 @@ } } - my-search { - position: fixed; - z-index: 1000; - // Fix col-md-* padding - padding: 0; - } - - .search-col { - height: 100%; - margin-left: -15px; - padding: 0; + .header-right { + text-align: right; + height: $header-height; + margin-left: $menu-width; + flex-grow: 1; } } 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 @@ import { Component, OnInit } from '@angular/core' import { Router } from '@angular/router' - import { AuthService, ServerService } from './core' -import { UserService } from './shared' @Component({ selector: 'my-app', @@ -62,20 +60,9 @@ export class AppComponent implements OnInit { } getMainColClasses () { - const colSizes = { - md: 10, - sm: 9, - xs: 9 - } - // Take all width is the menu is not displayed - if (this.isMenuDisplayed === false) { - Object.keys(colSizes).forEach(col => colSizes[col] = 12) - } - - const classes = [] - Object.keys(colSizes).forEach(col => classes.push(`col-${col}-${colSizes[col]}`)) + if (this.isMenuDisplayed === false) return [ 'expanded' ] - return classes + return [] } } 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' import { SignupModule } from './signup' import { SharedModule } from './shared' import { VideosModule } from './videos' +import { MenuComponent, MenuAdminComponent } from './menu' export function metaFactory (): MetaLoader { return new MetaStaticLoader({ @@ -47,7 +48,10 @@ const APP_PROVIDERS = [ @NgModule({ bootstrap: [ AppComponent ], declarations: [ - AppComponent + AppComponent, + + MenuComponent, + MenuAdminComponent ], imports: [ 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' ], declarations: [ - ConfirmComponent, - MenuComponent, - MenuAdminComponent + ConfirmComponent ], exports: [ SimpleNotificationsModule, - ConfirmComponent, - MenuComponent, - MenuAdminComponent + ConfirmComponent ], 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 @@ export * from './auth' export * from './server' export * from './confirm' -export * from './menu' export * from './routing' export * 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 @@ - -
-
Account
- - - - - - Signup - - - - - My account - - - - - My videos - -
- -
-
Videos
- - - - See videos - - - - - Upload a video - -
- -
-
Other
- - - - Administration - -
- 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 @@ -menu { - background-color: $black-background; - padding: 15px; - margin: 0; - height: 100%; - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; - z-index: 1000; - - @media screen and (max-width: 550px) { - font-size: 90%; - } - - @media screen and (min-width: 1200px) { - padding: 25px; - } - - .panel-block { - margin-bottom: 15px; - } - - .block-title { - text-transform: uppercase; - font-weight: bold; - color: $menu-color-block; - margin-bottom: 10px; - } - - a { - display: block; - margin-left: 5px; - height: 30px; - color: $menu-color-link; - cursor: pointer; - transition: color 0.3s; - - &:hover, &:focus { - text-decoration: none !important; - outline: none !important; - } - - .glyphicon { - margin-right: 15px; - } - - &:hover, &.active { - color: #fff; - } - } -} diff --git a/client/src/app/core/menu/index.ts b/client/src/app/menu/index.ts similarity index 100% rename from client/src/app/core/menu/index.ts rename to 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 similarity index 100% rename from client/src/app/core/menu/menu-admin.component.html rename to 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 similarity index 87% rename from client/src/app/core/menu/menu-admin.component.ts rename to 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 @@ import { Component } from '@angular/core' -import { AuthService } from '../auth/auth.service' -import { UserRight } from '../../../../../shared' +import { AuthService } from '../core/auth/auth.service' +import { UserRight } from '../../../../shared' @Component({ 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 @@ + +
+
+
{{ user.username }}
+
{{ user.email }}
+
+ +
+ + + +
+
+ +
+ + +
+ +
+
Videos
+ + + + Trending + + + + + Recently added + +
+ +
+
More
+ + + + Administration + +
+ 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 @@ +menu { + background-color: $black-background; + margin: 0; + padding: 0; + height: 100%; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + z-index: 1000; + color: $menu-color; + + @media screen and (max-width: 550px) { + font-size: 90%; + } + + .logged-in-block { + height: 100px; + background-color: rgba(255, 255, 255, 0.15); + display: flex; + align-items: center; + justify-content: center; + margin-bottom: 35px; + + .logged-in-info { + flex-grow: 1; + margin-left: 40px; + + .logged-in-username { + font-size: 16px; + font-weight: $font-semibold; + } + + .logged-in-email { + font-size: 13px; + color: #C6C6C6; + } + } + + .logged-in-more { + margin-right: 20px; + + .glyphicon { + cursor: pointer; + font-size: 18px; + } + } + } + + .button-block { + margin: 30px 25px 35px 25px; + + .login-button, .create-account-button { + font-weight: $font-semibold; + font-size: 15px; + height: $button-height; + line-height: $button-height; + width: 190px; + border-radius: 3px; + text-align: center; + + &.login-button { + background-color: $orange-color; + margin-bottom: 10px; + } + + &.create-account-button { + background-color: rgba(255, 255, 255, 0.25); + } + } + } + + .block-title { + text-transform: uppercase; + font-weight: $font-bold; // Bold + font-size: 13px; + margin-bottom: 25px; + } + + .panel-block { + margin-bottom: 45px; + margin-left: 26px; + + a { + display: flex; + + .icon { + width: 22px; + height: 22px; + display: inline-block; + margin-right: 18px; + background-size: contain; + + &.icon-videos-trending { + position: relative; + top: -2px; + background-image: url('../../assets/menu/trending.svg'); + } + + &.icon-videos-recently-added { + width: 23px; + height: 23px; + position: relative; + top: -1px; + background-image: url('../../assets/menu/recently-added.svg'); + } + + &.icon-administration { + width: 23px; + height: 23px; + + background-image: url('../../assets/menu/administration.svg'); + } + } + } + } + + a { + color: $menu-color; + height: 22px; + line-height: 22px; + display: block; + font-size: 16px; + cursor: pointer; + margin-bottom: 15px; + + &:hover, &:focus { + text-decoration: none !important; + outline: none !important; + } + } +} diff --git a/client/src/app/core/menu/menu.component.ts b/client/src/app/menu/menu.component.ts similarity index 84% rename from client/src/app/core/menu/menu.component.ts rename to 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 @@ import { Component, OnInit } from '@angular/core' import { Router } from '@angular/router' - -import { AuthService, AuthStatus } from '../auth' -import { ServerService } from '../server' -import { UserRight } from '../../../../../shared/models/users/user-right.enum' +import { UserRight } from '../../../../shared/models/users/user-right.enum' +import { AuthService, AuthStatus, ServerService } from '../core' +import { User } from '../shared/users/user.model' @Component({ selector: 'my-menu', @@ -11,6 +10,7 @@ import { UserRight } from '../../../../../shared/models/users/user-right.enum' styleUrls: [ './menu.component.scss' ] }) export class MenuComponent implements OnInit { + user: User isLoggedIn: boolean userHasAdminAccess = false @@ -29,16 +29,19 @@ export class MenuComponent implements OnInit { ngOnInit () { this.isLoggedIn = this.authService.isLoggedIn() + if (this.isLoggedIn === true) this.user = this.authService.getUser() this.computeIsUserHasAdminAccess() this.authService.loginChangedSource.subscribe( status => { if (status === AuthStatus.LoggedIn) { this.isLoggedIn = true + this.user = this.authService.getUser() this.computeIsUserHasAdminAccess() console.log('Logged in.') } else if (status === AuthStatus.LoggedOut) { this.isLoggedIn = false + this.user = undefined this.computeIsUserHasAdminAccess() console.log('Logged out.') } else { @@ -78,7 +81,9 @@ export class MenuComponent implements OnInit { return this.routesPerRight[right] } - logout () { + logout (event: Event) { + event.preventDefault() + this.authService.logout() // Redirect to home page 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 @@ -
+ - - - - -
- - -
-
+Upload 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 @@ -.icon-addon { - background-color: #fff; - border-radius: 0; - border-color: $header-border-color; - border-width: 0 0 1px 0; - text-align: right; - - .glyphicon-search { - width: 30px; - font-size: 20px; - } -} - -input, button, .input-group { - height: 100%; -} - -input, .input-group-btn { - border-radius: 0; - border-top: none; - border-left: none; -} - -input { - height: $header-height; - border-right: none; - font-weight: bold; - box-shadow: none; - - &, &:focus { - border-bottom: 1px solid $header-border-color !important; - outline: none !important; - box-shadow: none !important; - } -} - -button { - - &, &:hover, &:focus, &:active, &:visited { - background-color: #fff !important; - border-color: $header-border-color !important; - color: #858585 !important; - outline: none !important; - - height: $header-height; - border-width: 0 0 1px 0; - font-weight: bold; - text-decoration: none; - box-shadow: none; - } -} diff --git a/client/src/assets/logo.png b/client/src/assets/logo.png deleted file mode 100644 index c1d77a24c5ef25b02dae68383983d76eb40843e0..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 838 zcmV-M1G)T(P)AL_t(o!`0VIZ=)~}0ANG1gkyMw?J-<>4y$g?L>pB- zW?O0Z8dO!ig4Ev0Y5(>H8=LWrNx&-m@S##D8GiwLX3W@M7_%S<686uH|ChB3(D-RL zRS_6RY{|+M34OQH!yv!LNuR36*|@p%|DNDdqi8gVs2Hqy8~vilVm;Pr{}@v zdj7oFnICY++6`a@!Kx%Xc|}-GJ4b={fWFg0oIiV5F}unV`P)I!%q)-W0o}R6Rm;pu z$|0sZ77{}tJH0R+r48KHNd_2-q z;O0|fJurJ#!C8fICn8(USztFF`S-%^LIPR(uwZTY-!CL@A#BZAGnj{)JC+&vIUmp3 z5SE^V5|JwxFe!0Xg)_}WtfZ}pJ}L&BrOL~;Y*|tty-vcC^W7a~sYa#KBXbtG4V!>P z`z=^(j%`b)O?I+oHIF!AAWP}2OeKgVWr3Qsm7V4qvqEcD^HV`i2P|KtQxZNih3Bh1 zDe>v_)rRHKuarBT^z$*{3l_ z4D&)g;N>=krB7K)mJ6ZG%?7dH@wGkucgNR}EauBYXY>Oke(^#K$JaCKHx#7o^cn2$ Q8vp + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + 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 @@ + + + + filter + Created with Sketch. + + + + + + + + + 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 @@ + + + + + + + + + + + + + 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 @@ + + + + graph + Created with Sketch. + + + + + + + + + + + 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 @@ +$font-regular: 400; +$font-semibold: 600; +$font-bold: 700; + $grey-color: #555; +$orange-color: #F1680D; -$black-background: #1d2125; +$black-background: #000; $grey-background: #f6f2f2; -$menu-color-link: #9cabb8; -$menu-color-block: #686f77; +$button-height: 30px; + +$menu-color: #fff; +$menu-width: 240px; -$header-height: 65px; +$header-height: 50px; $header-border-color: #e9eff6; $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 @@ +$FontPathSourceSansPro: "../fonts/source-sans-pro"; +@import '~source-sans-pro/source-sans-pro'; @import '~primeng/resources/themes/bootstrap/theme.css'; @import '~primeng/resources/primeng.css'; @import '~video.js/dist/video-js.css'; @@ -7,6 +9,12 @@ display: none !important; } +body { + font-family: 'Source Sans Pro'; + font-weight: $font-regular; + color: #000; +} + input.readonly { /* Force blank on readonly inputs */ 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: source-map "^0.5.6" ts-node "^3.2.0" -ngx-bootstrap@1.9.3: - version "1.9.3" - resolved "https://registry.yarnpkg.com/ngx-bootstrap/-/ngx-bootstrap-1.9.3.tgz#28e75d14fb1beaee609383d7694de4eb3ba03b26" +ngx-bootstrap@2.0.0-beta.9: + version "2.0.0-beta.9" + resolved "https://registry.yarnpkg.com/ngx-bootstrap/-/ngx-bootstrap-2.0.0-beta.9.tgz#9aa7c88269534e7a5440481f31b137549f749796" ngx-chips@1.5.3: version "1.5.3" @@ -6602,6 +6602,10 @@ source-map@^0.6.1, source-map@~0.6.1: version "0.6.1" resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263" +source-sans-pro@^2.0.10: + version "2.0.10" + resolved "https://registry.yarnpkg.com/source-sans-pro/-/source-sans-pro-2.0.10.tgz#c1ca859cf164a088944c5e83745085e87cd533a9" + spdx-correct@~1.0.0: version "1.0.2" resolved "https://registry.yarnpkg.com/spdx-correct/-/spdx-correct-1.0.2.tgz#4b3073d933ff51f3912f03ac5519498a4150db40" -- 2.41.0