From 5f0805d39b94eb2de1b73e0f43ac8685ae900994 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Wed, 20 Dec 2017 17:49:58 +0100 Subject: [PATCH 1/1] Design modals --- .../app/core/confirm/confirm.component.html | 22 +++++---- .../shared/video-description.component.scss | 5 +- .../video-download.component.html | 45 +++++++++++------- .../video-download.component.scss | 25 ++++------ .../+video-watch/video-download.component.ts | 22 ++++++++- .../+video-watch/video-report.component.html | 22 ++++----- .../+video-watch/video-report.component.scss | 6 +++ .../+video-watch/video-report.component.ts | 3 +- .../+video-watch/video-share.component.html | 14 ++++-- .../+video-watch/video-share.component.scss | 3 ++ .../+video-watch/video-watch.component.scss | 36 +++++++------- client/src/assets/images/global/cross.svg | 12 +++++ client/src/assets/images/video/alert.svg | 6 +-- client/src/assets/images/video/blacklist.svg | 15 ++++++ .../assets/images/video/download-black.svg | 16 +++++++ client/src/assets/images/video/eye-closed.svg | 18 ------- client/src/sass/application.scss | 34 +++++++++++++- client/src/sass/include/_bootstrap.scss | 2 +- client/src/sass/include/_mixins.scss | 47 +++++++++++++++++++ server/lib/cache/videos-preview-cache.ts | 2 +- 20 files changed, 246 insertions(+), 109 deletions(-) create mode 100644 client/src/app/videos/+video-watch/video-report.component.scss create mode 100644 client/src/assets/images/global/cross.svg create mode 100644 client/src/assets/images/video/blacklist.svg create mode 100644 client/src/assets/images/video/download-black.svg delete mode 100644 client/src/assets/images/video/eye-closed.svg diff --git a/client/src/app/core/confirm/confirm.component.html b/client/src/app/core/confirm/confirm.component.html index 31b735f97..cc2c28de2 100644 --- a/client/src/app/core/confirm/confirm.component.html +++ b/client/src/app/core/confirm/confirm.component.html @@ -3,17 +3,23 @@
- -

{{ title }}

+ +

{{ title }}

-
+
+
-
- - +
+ + Cancel + + + +
diff --git a/client/src/app/videos/+video-edit/shared/video-description.component.scss b/client/src/app/videos/+video-edit/shared/video-description.component.scss index d6a5190c5..2c731bee3 100644 --- a/client/src/app/videos/+video-edit/shared/video-description.component.scss +++ b/client/src/app/videos/+video-edit/shared/video-description.component.scss @@ -2,11 +2,8 @@ @import '_mixins'; textarea { - @include peertube-input-text(100%); + @include peertube-textarea(100%, 150px); - padding: 5px 15px; - font-size: 15px; - height: 150px; margin-bottom: 15px; } diff --git a/client/src/app/videos/+video-watch/video-download.component.html b/client/src/app/videos/+video-watch/video-download.component.html index 7efc79e93..f8f17a471 100644 --- a/client/src/app/videos/+video-watch/video-download.component.html +++ b/client/src/app/videos/+video-watch/video-download.component.html @@ -1,29 +1,40 @@
-
+
- -

Download

+ +

Download video

-
- +
+ +
+ +
+
+ + +
+ +
+ + +
+
- - - Torrent file - - - - Download - +
+ + Cancel + - - +
diff --git a/client/src/app/videos/+video-watch/video-download.component.scss b/client/src/app/videos/+video-watch/video-download.component.scss index 7eac3d1c9..5fca82135 100644 --- a/client/src/app/videos/+video-watch/video-download.component.scss +++ b/client/src/app/videos/+video-watch/video-download.component.scss @@ -1,26 +1,17 @@ @import '_variables'; @import '_mixins'; -.resolution-block:not(:first-child) { - margin-top: 30px; -} - -.orange-button-link { - margin-right: 10px; +.peertube-select-container { + @include peertube-select-container(130px); } -label { - display: block; -} - -.icon { - @include icon(21px); +.download-type { + margin-top: 30px; - margin-right: 5px; - position: relative; - top: -1px; + .peertube-radio-container { + @include peertube-radio-container; - &.icon-download { - background-image: url('../../../assets/images/video/download-white.svg'); + display: inline-block; + margin-right: 30px; } } diff --git a/client/src/app/videos/+video-watch/video-download.component.ts b/client/src/app/videos/+video-watch/video-download.component.ts index 095df1698..44ece986c 100644 --- a/client/src/app/videos/+video-watch/video-download.component.ts +++ b/client/src/app/videos/+video-watch/video-download.component.ts @@ -1,4 +1,4 @@ -import { Component, Input, ViewChild } from '@angular/core' +import { Component, Input, OnInit, ViewChild } from '@angular/core' import { ModalDirective } from 'ngx-bootstrap/modal' import { VideoDetails } from '../../shared/video/video-details.model' @@ -7,15 +7,22 @@ import { VideoDetails } from '../../shared/video/video-details.model' templateUrl: './video-download.component.html', styleUrls: [ './video-download.component.scss' ] }) -export class VideoDownloadComponent { +export class VideoDownloadComponent implements OnInit { @Input() video: VideoDetails = null @ViewChild('modal') modal: ModalDirective + downloadType: 'direct' | 'torrent' = 'torrent' + resolution = -1 + constructor () { // empty } + ngOnInit () { + this.resolution = this.video.files[0].resolution + } + show () { this.modal.show() } @@ -23,4 +30,15 @@ export class VideoDownloadComponent { hide () { this.modal.hide() } + + download () { + const file = this.video.files.find(f => f.resolution === this.resolution) + if (!file) { + console.error('Could not find file with resolution %d.', this.resolution) + return + } + + const link = this.downloadType === 'direct' ? file.fileUrl : file.torrentUrl + window.open(link) + } } diff --git a/client/src/app/videos/+video-watch/video-report.component.html b/client/src/app/videos/+video-watch/video-report.component.html index 20474bab4..a9a7beb48 100644 --- a/client/src/app/videos/+video-watch/video-report.component.html +++ b/client/src/app/videos/+video-watch/video-report.component.html @@ -1,32 +1,30 @@
-
+
- -

Report video

+ +

Report video

- -
{{ formErrors.reason }}
-
+
+ + Cancel + +
diff --git a/client/src/app/videos/+video-watch/video-report.component.scss b/client/src/app/videos/+video-watch/video-report.component.scss new file mode 100644 index 000000000..09d273b35 --- /dev/null +++ b/client/src/app/videos/+video-watch/video-report.component.scss @@ -0,0 +1,6 @@ +@import '_variables'; +@import '_mixins'; + +textarea { + @include peertube-textarea(100%, 60px); +} diff --git a/client/src/app/videos/+video-watch/video-report.component.ts b/client/src/app/videos/+video-watch/video-report.component.ts index b94e4144e..ece14754a 100644 --- a/client/src/app/videos/+video-watch/video-report.component.ts +++ b/client/src/app/videos/+video-watch/video-report.component.ts @@ -7,7 +7,8 @@ import { VideoDetails } from '../../shared/video/video-details.model' @Component({ selector: 'my-video-report', - templateUrl: './video-report.component.html' + templateUrl: './video-report.component.html', + styleUrls: [ './video-report.component.scss' ] }) export class VideoReportComponent extends FormReactive implements OnInit { @Input() video: VideoDetails = null diff --git a/client/src/app/videos/+video-watch/video-share.component.html b/client/src/app/videos/+video-watch/video-share.component.html index e99eccbfe..85cf10a6c 100644 --- a/client/src/app/videos/+video-watch/video-share.component.html +++ b/client/src/app/videos/+video-watch/video-share.component.html @@ -1,12 +1,10 @@
-
+
- -

Share

+ +

Share

@@ -37,6 +35,12 @@
The url is not secured (no HTTPS), so the embed video won't work on HTTPS websites (web browsers block non secured HTTP requests on HTTPS websites).
+ +
+ + Cancel + +
diff --git a/client/src/app/videos/+video-watch/video-share.component.scss b/client/src/app/videos/+video-watch/video-share.component.scss index e69de29bb..184e09027 100644 --- a/client/src/app/videos/+video-watch/video-share.component.scss +++ b/client/src/app/videos/+video-watch/video-share.component.scss @@ -0,0 +1,3 @@ +.action-button-cancel { + margin-right: 0 !important; +} diff --git a/client/src/app/videos/+video-watch/video-watch.component.scss b/client/src/app/videos/+video-watch/video-watch.component.scss index e742e1329..205a4333c 100644 --- a/client/src/app/videos/+video-watch/video-watch.component.scss +++ b/client/src/app/videos/+video-watch/video-watch.component.scss @@ -101,27 +101,27 @@ .action-more { display: inline-block; - .dropdown-menu .icon { - display: inline-block; - background-repeat: no-repeat; - background-size: contain; - width: 21px; - height: 21px; - vertical-align: middle; - margin-right: 5px; - position: relative; - top: -1px; + .dropdown-menu .dropdown-item { + padding: 6px 24px; - &.icon-download { - background-image: url('../../../assets/images/video/download-grey.svg'); - } + .icon { + @include icon(24px); - &.icon-alert { - background-image: url('../../../assets/images/video/alert.svg'); - } + margin-right: 10px; + position: relative; + top: -1px; + + &.icon-download { + background-image: url('../../../assets/images/video/download-black.svg'); + } + + &.icon-alert { + background-image: url('../../../assets/images/video/alert.svg'); + } - &.icon-blacklist { - background-image: url('../../../assets/images/video/eye-closed.svg'); + &.icon-blacklist { + background-image: url('../../../assets/images/video/blacklist.svg'); + } } } } diff --git a/client/src/assets/images/global/cross.svg b/client/src/assets/images/global/cross.svg new file mode 100644 index 000000000..d47a75996 --- /dev/null +++ b/client/src/assets/images/global/cross.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/client/src/assets/images/video/alert.svg b/client/src/assets/images/video/alert.svg index 6d3af029f..5b43534ad 100644 --- a/client/src/assets/images/video/alert.svg +++ b/client/src/assets/images/video/alert.svg @@ -7,9 +7,9 @@ - - - + + + diff --git a/client/src/assets/images/video/blacklist.svg b/client/src/assets/images/video/blacklist.svg new file mode 100644 index 000000000..431c73816 --- /dev/null +++ b/client/src/assets/images/video/blacklist.svg @@ -0,0 +1,15 @@ + + + + no + Created with Sketch. + + + + + + + + + + diff --git a/client/src/assets/images/video/download-black.svg b/client/src/assets/images/video/download-black.svg new file mode 100644 index 000000000..501836746 --- /dev/null +++ b/client/src/assets/images/video/download-black.svg @@ -0,0 +1,16 @@ + + + + download + Created with Sketch. + + + + + + + + + + + diff --git a/client/src/assets/images/video/eye-closed.svg b/client/src/assets/images/video/eye-closed.svg deleted file mode 100644 index c5b739659..000000000 --- a/client/src/assets/images/video/eye-closed.svg +++ /dev/null @@ -1,18 +0,0 @@ - - - - - - - - - - - - - - - - - - diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss index a1c222c31..0d96d5ec0 100644 --- a/client/src/sass/application.scss +++ b/client/src/sass/application.scss @@ -258,9 +258,39 @@ p-datatable { .modal { .modal-header { border-bottom: none; + margin-bottom: 5px; - .title-page-single { - margin: 0; + .modal-title { + font-size: 20px; + font-weight: $font-semibold; + } + + .close { + @include icon(24px); + + position: relative; + right: -1px; + float: right; + background-image: url('../assets/images/global/cross.svg'); + } + } + + .inputs { + margin-top: 40px; + margin-bottom: 0; + text-align: right; + + .action-button-cancel { + @include peertube-button; + @include grey-button; + + display: inline-block; + margin-right: 10px; + } + + .action-button-submit { + @include peertube-button; + @include orange-button; } } } diff --git a/client/src/sass/include/_bootstrap.scss b/client/src/sass/include/_bootstrap.scss index 3857bb521..4f0e2893e 100644 --- a/client/src/sass/include/_bootstrap.scss +++ b/client/src/sass/include/_bootstrap.scss @@ -37,7 +37,7 @@ //@import "~bootstrap-sass/assets/stylesheets/bootstrap/panels"; //@import "~bootstrap-sass/assets/stylesheets/bootstrap/responsive-embed"; //@import "~bootstrap-sass/assets/stylesheets/bootstrap/wells"; -@import "~bootstrap-sass/assets/stylesheets/bootstrap/close"; +//@import "~bootstrap-sass/assets/stylesheets/bootstrap/close"; // Components w/ JavaScript @import "~bootstrap-sass/assets/stylesheets/bootstrap/modals"; diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss index a07bd5d28..252cf2173 100644 --- a/client/src/sass/include/_mixins.scss +++ b/client/src/sass/include/_mixins.scss @@ -22,6 +22,14 @@ } } +@mixin peertube-textarea ($width, $height) { + @include peertube-input-text($width); + + height: $height; + padding: 5px 15px; + font-size: 15px; +} + @mixin orange-button { &, &:active, &:focus { color: #fff; @@ -101,6 +109,7 @@ overflow: hidden; background: #fff; position: relative; + font-size: 15px; &:after { top: 50%; @@ -149,6 +158,44 @@ } } +// Thanks: https://codepen.io/triss90/pen/XNEdRe/ +@mixin peertube-radio-container { + input[type="radio"] { + display: none; + + & + label { + font-weight: $font-regular; + cursor: pointer; + + &:before { + position: relative; + top: -2px; + content: ''; + background: #fff; + border-radius: 100%; + border: 1px solid #000; + display: inline-block; + width: 15px; + height: 15px; + vertical-align: middle; + cursor: pointer; + text-align: center; + margin-right: 10px; + } + } + + &:checked + label:before { + background-color: #000; + box-shadow: inset 0 0 0 4px #fff; + } + + &:focus + label:before { + outline: none; + border-color: #000; + } + } +} + @mixin peertube-checkbox ($border-width) { display: none; diff --git a/server/lib/cache/videos-preview-cache.ts b/server/lib/cache/videos-preview-cache.ts index 28908b186..0eb43efcc 100644 --- a/server/lib/cache/videos-preview-cache.ts +++ b/server/lib/cache/videos-preview-cache.ts @@ -47,7 +47,7 @@ class VideosPreviewCache { } private async loadPreviews (key: string) { - const video = await VideoModel.loadByUUID(key) + const video = await VideoModel.loadByUUIDAndPopulateAccountAndServerAndTags(key) if (!video) return undefined if (video.isOwned()) throw new Error('Cannot load preview of owned video.') -- 2.41.0