OpenCloud
/
PeerTube
mirror of https://github.com/Chocobozzz/PeerTube
1
0
Fork 0
Code Issues Releases Wiki Activity

Design video watch modals

pull/159/head
Chocobozzz 2017-12-07 10:27:33 +01:00
parent 7b272fd73f
commit 0727cab0df
No known key found for this signature in database
GPG Key ID: 583A612D890159BE
15 changed files with 113 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
client/src/app/account/account-videos/account-videos.component.scss
View File

@ -32,12 +32,8 @@
}
.icon {
display: inline-block;
background-repeat: no-repeat;
background-size: contain;
width: 21px;
height: 21px;
vertical-align: middle;
@include icon(21px);
position: relative;
top: -2px;

8
client/src/app/app.component.scss
View File

@ -35,11 +35,7 @@
align-items: center;
.icon {
cursor: pointer;
width: 22px;
height: 22px;
display: inline-block;
background-size: contain;
@include icon(22px);
&.icon-menu {
background-image: url('../assets/images/header/menu.svg');
@ -59,7 +55,7 @@
.icon.icon-logo {
display: inline-block;
background: url('../assets/images/logo.svg') no-repeat;
width: 20px;
width: 23px;
height: 24px;
}
}

10
client/src/app/header/header.component.scss
View File

@ -9,13 +9,11 @@
}
.icon.icon-search {
display: inline-block;
background: url('../../assets/images/header/search.svg') no-repeat;
background-size: contain;
width: 25px;
@include icon(25px);
height: 21px;
vertical-align: middle;
cursor: pointer;
background-image: url('../../assets/images/header/search.svg');
// yolo
position: absolute;
margin-left: -50px;

6
client/src/app/menu/menu.component.scss
View File

@ -107,11 +107,9 @@ menu {
@include disable-default-a-behaviour;
.icon {
width: 22px;
height: 22px;
display: inline-block;
@include icon(22px);
margin-right: 18px;
background-size: contain;
&.icon-videos-trending {
position: relative;

6
client/src/app/shared/forms/form-validators/video-abuse.ts
View File

@ -3,8 +3,8 @@ import { Validators } from '@angular/forms'
export const VIDEO_ABUSE_REASON = {
VALIDATORS: [ Validators.required, Validators.minLength(2), Validators.maxLength(300) ],
MESSAGES: {
'required': 'Report reason name is required.',
'minlength': 'Report reson must be at least 2 characters long.',
'maxlength': 'Report reson cannot be more than 300 characters long.'
'required': 'Report reason is required.',
'minlength': 'Report reason must be at least 2 characters long.',
'maxlength': 'Report reason cannot be more than 300 characters long.'
}
}

11
client/src/app/videos/+video-watch/video-download.component.html
View File

@ -6,18 +6,19 @@
<button type="button" class="close" aria-label="Close" (click)="hide()">
<span aria-hidden="true">&times;</span>
</button>
<h4 class="modal-title">Download</h4>
<h4 class="title-page title-page-single">Download</h4>
</div>
<div class="modal-body">
<div *ngFor="let file of video.files" class="resolution-block">
<label>{{ file.resolutionLabel }}</label>
<a class="btn btn-default " target="_blank" [href]="file.torrentUrl">
<span class="glyphicon glyphicon-download"></span>
<a class="orange-button-link " target="_blank" [href]="file.torrentUrl">
<span class="icon icon-download"></span>
Torrent file
</a>
<a class="btn btn-default" target="_blank" [href]="file.fileUrl">
<span class="glyphicon glyphicon-download"></span>
<a class="orange-button-link" target="_blank" [href]="file.fileUrl">
<span class="icon icon-download"></span>
Download
</a>

23
client/src/app/videos/+video-watch/video-download.component.scss Normal file
View File

@ -0,0 +1,23 @@
.resolution-block:not(:first-child) {
margin-top: 30px;
}
.orange-button-link {
margin-right: 10px;
}
label {
display: block;
}
.icon {
@include icon(21px);
margin-right: 5px;
position: relative;
top: -1px;
&.icon-download {
background-image: url('../../../assets/images/video/download-white.svg');
}
}

2
client/src/app/videos/+video-watch/video-download.component.ts
View File

@ -5,7 +5,7 @@ import { VideoDetails } from '../../shared/video/video-details.model'
@Component({
selector: 'my-video-download',
templateUrl: './video-download.component.html',
styles: [ '.resolution-block { margin-top: 20px; }' ]
styleUrls: [ './video-download.component.scss' ]
})
export class VideoDownloadComponent {
@Input() video: VideoDetails = null

12
client/src/app/videos/+video-watch/video-report.component.html
View File

@ -6,28 +6,28 @@
<button type="button" class="close" aria-label="Close" (click)="hide()">
<span aria-hidden="true">&times;</span>
</button>
<h4 class="modal-title">Report video</h4>
<h4 class="title-page title-page-single">Report video</h4>
</div>
<div class="modal-body">
<form novalidate [formGroup]="form">
<form novalidate [formGroup]="form" (ngSubmit)="report()">
<div class="form-group">
<label for="reason">Reason</label>
<textarea
id="reason" class="form-control" placeholder="Reason..."
formControlName="reason"
formControlName="reason" [ngClass]="{ 'input-error': formErrors['reason'] }"
>
</textarea>
<div *ngIf="formErrors.reason" class="alert alert-danger">
<div *ngIf="formErrors.reason" class="form-error">
{{ formErrors.reason }}
</div>
</div>
<div class="form-group">
<input
type="button" value="Report" class="btn btn-default form-control"
[disabled]="!form.valid" (click)="report()"
type="submit" value="Report" class="orange-button"
[disabled]="!form.valid"
>
</div>
</form>

2
client/src/app/videos/+video-watch/video-share.component.html
View File

@ -6,7 +6,7 @@
<button type="button" class="close" aria-label="Close" (click)="hide()">
<span aria-hidden="true">&times;</span>
</button>
<h4 class="modal-title">Share</h4>
<h4 class="title-page title-page-single">Share</h4>
</div>
<div class="modal-body">

10
client/src/app/videos/+video-watch/video-watch.component.scss
View File

@ -51,12 +51,8 @@
padding: 0 10px 0 10px;
.icon {
display: inline-block;
background-repeat: no-repeat;
background-size: contain;
width: 21px;
height: 21px;
vertical-align: middle;
@include icon(21px);
position: relative;
top: -2px;
@ -105,7 +101,7 @@
top: -1px;
&.icon-download {
background-image: url('../../../assets/images/video/download.svg');
background-image: url('../../../assets/images/video/download-grey.svg');
}
&.icon-alert {

0
client/src/assets/images/video/download.svg → client/src/assets/images/video/download-grey.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.2 KiB

After

Width:  |  Height:  |  Size: 1.2 KiB

16
client/src/assets/images/video/download-white.svg Normal file
View File

@ -0,0 +1,16 @@
<?xml version="1.0" encoding="UTF-8"?>
<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">
<!-- Generator: Sketch 43.2 (39069) - http://www.bohemiancoding.com/sketch -->
<title>download</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round">
<g id="Artboard-4" transform="translate(-180.000000, -291.000000)" stroke="#ffffff" stroke-width="2">
<g id="84" transform="translate(180.000000, 291.000000)">
<path d="M12,3 L12,15" id="Path-58"></path>
<polyline id="Path-59" stroke-linejoin="round" transform="translate(12.000000, 14.000000) rotate(-270.000000) translate(-12.000000, -14.000000) " points="9 8 15 14 9 20"></polyline>
<path d="M3,18 L3,20.0590859 C3,20.6127331 3.44494889,21.0615528 3.99340349,21.0615528 L20.0067018,21.0615528 C20.5553434,21.0615528 21.0001052,20.6098102 21.0001051,20.0590859 L21.0001049,18" id="Path-12" stroke-linejoin="round"></path>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

16
client/src/sass/_mixins.scss
View File

@ -23,7 +23,8 @@
color: #fff;
background-color: $orange-color;
&:hover {
&:hover, &:active, &:focus, &[disabled] {
color: #fff;
background-color: $orange-hoover-color;
}
}
@ -32,7 +33,8 @@
background-color: $grey-color;
color: #585858;
&:hover {
&:hover, &:active, &:focus, &[disabled] {
color: #585858;
background-color: $grey-hoover-color;
}
}
@ -60,3 +62,13 @@
width: $size;
height: $size;
}
@mixin icon ($size) {
display: inline-block;
background-repeat: no-repeat;
background-size: contain;
width: $size;
height: $size;
vertical-align: middle;
cursor: pointer;
}

30
client/src/sass/application.scss
View File

@ -152,3 +152,33 @@ p-datatable {
color: #000 !important;
}
}
.modal {
.modal-header {
border-bottom: none;
.title-page-single {
margin: 0;
}
}
}
.orange-button {
@include peertube-button;
@include orange-button;
}
.orange-button-link {
@include peertube-button-link;
@include orange-button;
}
.grey-button {
@include peertube-button;
@include grey-button;
}
.grey-button-link {
@include peertube-button-link;
@include grey-button;
}