From cd83ea1b908efe594c1e03f886c0dc4742b91360 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Fri, 8 Dec 2017 14:34:17 +0100 Subject: [PATCH] Design admin data tables --- .../jobs/jobs-list/jobs-list.component.html | 36 +++---- .../jobs/jobs-list/jobs-list.component.scss | 3 + .../jobs/jobs-list/jobs-list.component.ts | 24 +++-- .../src/app/+admin/jobs/shared/job.service.ts | 7 ++ .../users/user-list/user-list.component.html | 16 +-- .../users/user-list/user-list.component.scss | 10 -- .../account-videos.component.html | 12 +-- .../account-videos.component.scss | 27 +---- .../src/app/shared/misc/button.component.scss | 27 +++++ .../shared/misc/delete-button.component.html | 4 + .../shared/misc/delete-button.component.ts | 10 ++ .../shared/misc/edit-button.component.html | 4 + .../app/shared/misc/edit-button.component.ts | 11 +++ client/src/app/shared/misc/utils.ts | 5 + client/src/app/shared/shared.module.ts | 6 ++ .../{account => global}/delete-grey.svg | 0 .../{account => global}/delete-white.svg | 0 client/src/sass/application.scss | 99 ++++++++++++++++++- 18 files changed, 214 insertions(+), 87 deletions(-) create mode 100644 client/src/app/+admin/jobs/jobs-list/jobs-list.component.scss create mode 100644 client/src/app/shared/misc/button.component.scss create mode 100644 client/src/app/shared/misc/delete-button.component.html create mode 100644 client/src/app/shared/misc/delete-button.component.ts create mode 100644 client/src/app/shared/misc/edit-button.component.html create mode 100644 client/src/app/shared/misc/edit-button.component.ts rename client/src/assets/images/{account => global}/delete-grey.svg (100%) rename client/src/assets/images/{account => global}/delete-white.svg (100%) diff --git a/client/src/app/+admin/jobs/jobs-list/jobs-list.component.html b/client/src/app/+admin/jobs/jobs-list/jobs-list.component.html index a90267172..29103c06b 100644 --- a/client/src/app/+admin/jobs/jobs-list/jobs-list.component.html +++ b/client/src/app/+admin/jobs/jobs-list/jobs-list.component.html @@ -1,18 +1,20 @@ -
-
-

Jobs list

- - - - - - - - - - -
+
+
Jobs list
+ + + + + + + + 
{{ job.handlerInputData }}
+ + + + + + diff --git a/client/src/app/+admin/jobs/jobs-list/jobs-list.component.scss b/client/src/app/+admin/jobs/jobs-list/jobs-list.component.scss new file mode 100644 index 000000000..9dde13216 --- /dev/null +++ b/client/src/app/+admin/jobs/jobs-list/jobs-list.component.scss @@ -0,0 +1,3 @@ +pre { + font-size: 13px; +} diff --git a/client/src/app/+admin/jobs/jobs-list/jobs-list.component.ts b/client/src/app/+admin/jobs/jobs-list/jobs-list.component.ts index 88fe259fb..f93847f29 100644 --- a/client/src/app/+admin/jobs/jobs-list/jobs-list.component.ts +++ b/client/src/app/+admin/jobs/jobs-list/jobs-list.component.ts @@ -1,22 +1,24 @@ -import { Component } from '@angular/core' +import { Component, OnInit } from '@angular/core' import { NotificationsService } from 'angular2-notifications' import { SortMeta } from 'primeng/primeng' import { Job } from '../../../../../../shared/index' import { RestPagination, RestTable } from '../../../shared' +import { viewportHeight } from '../../../shared/misc/utils' import { JobService } from '../shared' import { RestExtractor } from '../../../shared/rest/rest-extractor.service' @Component({ selector: 'my-jobs-list', templateUrl: './jobs-list.component.html', - styleUrls: [ ] + styleUrls: [ './jobs-list.component.scss' ] }) -export class JobsListComponent extends RestTable { +export class JobsListComponent extends RestTable implements OnInit { jobs: Job[] = [] totalRecords = 0 - rowsPerPage = 10 + rowsPerPage = 20 sort: SortMeta = { field: 'createdAt', order: 1 } pagination: RestPagination = { count: this.rowsPerPage, start: 0 } + scrollHeight = '' constructor ( private notificationsService: NotificationsService, @@ -26,10 +28,14 @@ export class JobsListComponent extends RestTable { super() } + ngOnInit () { + // 270 -> headers + footer... + this.scrollHeight = (viewportHeight() - 380) + 'px' + } + protected loadData () { this.jobsService .getJobs(this.pagination, this.sort) - .map(res => this.restExtractor.applyToResultListData(res, this.formatJob.bind(this))) .subscribe( resultList => { this.jobs = resultList.data @@ -39,12 +45,4 @@ export class JobsListComponent extends RestTable { err => this.notificationsService.error('Error', err.message) ) } - - private formatJob (job: Job) { - const handlerInputData = JSON.stringify(job.handlerInputData) - - return Object.assign(job, { - handlerInputData - }) - } } diff --git a/client/src/app/+admin/jobs/shared/job.service.ts b/client/src/app/+admin/jobs/shared/job.service.ts index 49f1ab6f5..0cfbdbbea 100644 --- a/client/src/app/+admin/jobs/shared/job.service.ts +++ b/client/src/app/+admin/jobs/shared/job.service.ts @@ -25,6 +25,13 @@ export class JobService { return this.authHttp.get>(JobService.BASE_JOB_URL, { params }) .map(res => this.restExtractor.convertResultListDateToHuman(res)) + .map(res => this.restExtractor.applyToResultListData(res, this.prettyPrintData)) .catch(err => this.restExtractor.handleError(err)) } + + private prettyPrintData (obj: Job) { + const handlerInputData = JSON.stringify(obj.handlerInputData, null, 2) + + return Object.assign(obj, { handlerInputData }) + } } diff --git a/client/src/app/+admin/users/user-list/user-list.component.html b/client/src/app/+admin/users/user-list/user-list.component.html index a100ddfaa..5a19edfde 100644 --- a/client/src/app/+admin/users/user-list/user-list.component.html +++ b/client/src/app/+admin/users/user-list/user-list.component.html @@ -1,4 +1,4 @@ -
+
Users list
@@ -17,16 +17,10 @@ - - - - - - - - - - + + + + diff --git a/client/src/app/+admin/users/user-list/user-list.component.scss b/client/src/app/+admin/users/user-list/user-list.component.scss index 54ecb61b4..8b22f67ff 100644 --- a/client/src/app/+admin/users/user-list/user-list.component.scss +++ b/client/src/app/+admin/users/user-list/user-list.component.scss @@ -1,12 +1,3 @@ -.sub-header { - display: flex; - align-items: center; - margin-bottom: 30px; - - .admin-sub-title { - flex-grow: 1; - } - .add-button { @include peertube-button-link; @include orange-button; @@ -18,4 +9,3 @@ background-image: url('../../../../assets/images/admin/add.svg'); } } -} diff --git a/client/src/app/account/account-videos/account-videos.component.html b/client/src/app/account/account-videos/account-videos.component.html index 030c2f19c..641fcb38a 100644 --- a/client/src/app/account/account-videos/account-videos.component.html +++ b/client/src/app/account/account-videos/account-videos.component.html @@ -22,7 +22,7 @@ Cancel - + Delete @@ -30,15 +30,9 @@
- - - Delete - + - - - Edit - +
diff --git a/client/src/app/account/account-videos/account-videos.component.scss b/client/src/app/account/account-videos/account-videos.component.scss index 083918e29..670fe992c 100644 --- a/client/src/app/account/account-videos/account-videos.component.scss +++ b/client/src/app/account/account-videos/account-videos.component.scss @@ -6,17 +6,7 @@ } } -.action-button { - @include peertube-button-link; - - font-size: 15px; - font-weight: $font-semibold; - color: #585858; - background-color: #E5E5E5; - - &:hover { - background-color: #EFEFEF; - } +/deep/ .action-button { &.action-button-delete { margin-right: 10px; @@ -32,21 +22,8 @@ } .icon { - @include icon(21px); - - position: relative; - top: -2px; - - &.icon-edit { - background-image: url('../../../assets/images/global/edit.svg'); - } - - &.icon-delete-grey { - background-image: url('../../../assets/images/account/delete-grey.svg'); - } - &.icon-delete-white { - background-image: url('../../../assets/images/account/delete-white.svg'); + background-image: url('../../../assets/images/global/delete-white.svg'); } } } diff --git a/client/src/app/shared/misc/button.component.scss b/client/src/app/shared/misc/button.component.scss new file mode 100644 index 000000000..5fcae4f10 --- /dev/null +++ b/client/src/app/shared/misc/button.component.scss @@ -0,0 +1,27 @@ +.action-button { + @include peertube-button-link; + + font-size: 15px; + font-weight: $font-semibold; + color: #585858; + background-color: #E5E5E5; + + &:hover { + background-color: #EFEFEF; + } + + .icon { + @include icon(21px); + + position: relative; + top: -2px; + + &.icon-edit { + background-image: url('../../../assets/images/global/edit.svg'); + } + + &.icon-delete-grey { + background-image: url('../../../assets/images/global/delete-grey.svg'); + } + } +} diff --git a/client/src/app/shared/misc/delete-button.component.html b/client/src/app/shared/misc/delete-button.component.html new file mode 100644 index 000000000..3db483882 --- /dev/null +++ b/client/src/app/shared/misc/delete-button.component.html @@ -0,0 +1,4 @@ + + + Delete + diff --git a/client/src/app/shared/misc/delete-button.component.ts b/client/src/app/shared/misc/delete-button.component.ts new file mode 100644 index 000000000..e04039f69 --- /dev/null +++ b/client/src/app/shared/misc/delete-button.component.ts @@ -0,0 +1,10 @@ +import { Component } from '@angular/core' + +@Component({ + selector: 'my-delete-button', + styleUrls: [ './button.component.scss' ], + templateUrl: './delete-button.component.html' +}) + +export class DeleteButtonComponent { +} diff --git a/client/src/app/shared/misc/edit-button.component.html b/client/src/app/shared/misc/edit-button.component.html new file mode 100644 index 000000000..6e9564bd7 --- /dev/null +++ b/client/src/app/shared/misc/edit-button.component.html @@ -0,0 +1,4 @@ + + + Edit + diff --git a/client/src/app/shared/misc/edit-button.component.ts b/client/src/app/shared/misc/edit-button.component.ts new file mode 100644 index 000000000..201a618ec --- /dev/null +++ b/client/src/app/shared/misc/edit-button.component.ts @@ -0,0 +1,11 @@ +import { Component, Input } from '@angular/core' + +@Component({ + selector: 'my-edit-button', + styleUrls: [ './button.component.scss' ], + templateUrl: './edit-button.component.html' +}) + +export class EditButtonComponent { + @Input() routerLink = [] +} diff --git a/client/src/app/shared/misc/utils.ts b/client/src/app/shared/misc/utils.ts index 2b5c3686e..df9e0381a 100644 --- a/client/src/app/shared/misc/utils.ts +++ b/client/src/app/shared/misc/utils.ts @@ -13,6 +13,11 @@ function getParameterByName (name: string, url: string) { return decodeURIComponent(results[2].replace(/\+/g, ' ')) } +function viewportHeight () { + return Math.max(document.documentElement.clientHeight, window.innerHeight || 0) +} + export { + viewportHeight, getParameterByName } diff --git a/client/src/app/shared/shared.module.ts b/client/src/app/shared/shared.module.ts index 74f6f579d..d0e163f69 100644 --- a/client/src/app/shared/shared.module.ts +++ b/client/src/app/shared/shared.module.ts @@ -12,6 +12,8 @@ import { SharedModule as PrimeSharedModule } from 'primeng/components/common/sha import { DataTableModule } from 'primeng/components/datatable/datatable' import { AUTH_INTERCEPTOR_PROVIDER } from './auth' +import { DeleteButtonComponent } from './misc/delete-button.component' +import { EditButtonComponent } from './misc/edit-button.component' import { FromNowPipe } from './misc/from-now.pipe' import { LoaderComponent } from './misc/loader.component' import { NumberFormatterPipe } from './misc/number-formatter.pipe' @@ -44,6 +46,8 @@ import { VideoService } from './video/video.service' LoaderComponent, VideoThumbnailComponent, VideoMiniatureComponent, + DeleteButtonComponent, + EditButtonComponent, NumberFormatterPipe, FromNowPipe ], @@ -66,6 +70,8 @@ import { VideoService } from './video/video.service' LoaderComponent, VideoThumbnailComponent, VideoMiniatureComponent, + DeleteButtonComponent, + EditButtonComponent, NumberFormatterPipe, FromNowPipe diff --git a/client/src/assets/images/account/delete-grey.svg b/client/src/assets/images/global/delete-grey.svg similarity index 100% rename from client/src/assets/images/account/delete-grey.svg rename to client/src/assets/images/global/delete-grey.svg diff --git a/client/src/assets/images/account/delete-white.svg b/client/src/assets/images/global/delete-white.svg similarity index 100% rename from client/src/assets/images/account/delete-white.svg rename to client/src/assets/images/global/delete-white.svg diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss index e7b4024a7..5277e2070 100644 --- a/client/src/sass/application.scss +++ b/client/src/sass/application.scss @@ -92,6 +92,16 @@ label { } } +.admin-sub-header { + display: flex; + align-items: center; + margin-bottom: 30px; + + .admin-sub-title { + flex-grow: 1; + } +} + .admin-sub-title { font-size: 20px; font-weight: bold; @@ -139,11 +149,96 @@ label { // ngprime data table customizations p-datatable { + font-size: 15px !important; + + .ui-datatable-scrollable-header { + background-color: #fff !important; + } + + .ui-widget-content { + border: none !important; + } + + .ui-datatable-virtual-table { + border-top: none !important; + } + + td { + border: 1px solid #E5E5E5 !important; + padding: 15px; + } + + tr { + background-color: #fff !important; + height: 46px; + + &:hover { + background-color: #f0f0f0 !important; + } + + &:not(:hover) { + .action-cell * { + display: none !important; + } + } + + &:first-child td { + border-top: none !important; + } + } + + th { + border: none !important; + border-bottom: 1px solid #f0f0f0 !important; + text-align: left !important; + padding: 5px 0 5px 15px !important; + font-weight: $font-semibold !important; + color: #000 !important; + + &.ui-state-active, &.ui-sortable-column:hover { + background-color: #f0f0f0 !important; + border: 1px solid #f0f0f0 !important; + } + } + .action-cell { + width: 250px !important; + padding: 0 !important; text-align: center; + } - .glyphicon { - cursor: pointer; + p-paginator { + overflow: hidden; + display: block; + padding-top: 2px; + border: 1px solid #f0f0f0 !important; + border-top: none !important; + + .ui-paginator-bottom { + position: relative; + border: none !important; + border-top: 1px solid #f0f0f0 !important; + box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.16); + height: 40px; + display: flex; + justify-content: center; + align-items: center; + + a { + color: #000 !important; + font-weight: $font-semibold !important; + margin-right: 20px !important; + outline: 0 !important; + border-radius: 3px !important; + padding: 5px 2px !important; + + &.ui-state-active { + &, &:hover, &:active, &:focus { + color: #fff !important; + background-color: $orange-color !important; + } + } + } } } } -- 2.41.0