diff options
author | Chocobozzz <florian.bigard@gmail.com> | 2017-12-07 10:02:01 +0100 |
---|---|---|
committer | Chocobozzz <florian.bigard@gmail.com> | 2017-12-07 10:02:01 +0100 |
commit | 7b272fd73f1ea67e83c1924f2cc33503b8759811 (patch) | |
tree | 5c171a051c25878bd8010eab0f3ed503efe0da1c /client/src/app/videos/+video-watch | |
parent | 41c3dfac99c41d2daec2a55554bb517ed5d59fc4 (diff) | |
download | PeerTube-7b272fd73f1ea67e83c1924f2cc33503b8759811.tar.gz PeerTube-7b272fd73f1ea67e83c1924f2cc33503b8759811.tar.zst PeerTube-7b272fd73f1ea67e83c1924f2cc33503b8759811.zip |
Fix dropdown menu in video watch
Diffstat (limited to 'client/src/app/videos/+video-watch')
-rw-r--r-- | client/src/app/videos/+video-watch/video-watch.component.html | 34 | ||||
-rw-r--r-- | client/src/app/videos/+video-watch/video-watch.component.scss | 92 |
2 files changed, 72 insertions, 54 deletions
diff --git a/client/src/app/videos/+video-watch/video-watch.component.html b/client/src/app/videos/+video-watch/video-watch.component.html index 88d89f9e4..583da4685 100644 --- a/client/src/app/videos/+video-watch/video-watch.component.html +++ b/client/src/app/videos/+video-watch/video-watch.component.html | |||
@@ -14,18 +14,12 @@ | |||
14 | <div class="video-info-name">{{ video.name }}</div> | 14 | <div class="video-info-name">{{ video.name }}</div> |
15 | 15 | ||
16 | <div class="video-info-actions"> | 16 | <div class="video-info-actions"> |
17 | <div class="action-button"> | 17 | <div *ngIf="isUserLoggedIn()" [ngClass]="{ 'activated': userRating === 'like' }" class="action-button"> |
18 | <span | 18 | <span class="icon icon-like" title="Like this video" (click)="setLike()"></span> |
19 | class="icon icon-like" title="Like this video" | ||
20 | [ngClass]="{ 'interactive': isUserLoggedIn(), 'activated': userRating === 'like' }" (click)="setLike()" | ||
21 | ></span> | ||
22 | </div> | 19 | </div> |
23 | 20 | ||
24 | <div class="action-button"> | 21 | <div *ngIf="isUserLoggedIn()" [ngClass]="{ 'activated': userRating === 'dislike' }" class="action-button"> |
25 | <span | 22 | <span class="icon icon-dislike" title="Dislike this video" (click)="setDislike()"></span> |
26 | class="icon icon-dislike" title="Dislike this video" | ||
27 | [ngClass]="{ 'interactive': isUserLoggedIn(), 'activated': userRating === 'dislike' }" (click)="setDislike()" | ||
28 | ></span> | ||
29 | </div> | 23 | </div> |
30 | 24 | ||
31 | <div (click)="showShareModal()" class="action-button"> | 25 | <div (click)="showShareModal()" class="action-button"> |
@@ -39,33 +33,21 @@ | |||
39 | </div> | 33 | </div> |
40 | 34 | ||
41 | <ul *dropdownMenu class="dropdown-menu" id="more-menu" role="menu" aria-labelledby="single-button"> | 35 | <ul *dropdownMenu class="dropdown-menu" id="more-menu" role="menu" aria-labelledby="single-button"> |
42 | <li *ngIf="canUserUpdateVideo()" role="menuitem"> | ||
43 | <a class="dropdown-item" title="Update this video" href="#" [routerLink]="[ '/videos/edit', video.uuid ]"> | ||
44 | <span class="glyphicon glyphicon-pencil"></span> Update | ||
45 | </a> | ||
46 | </li> | ||
47 | |||
48 | <li role="menuitem"> | 36 | <li role="menuitem"> |
49 | <a class="dropdown-item" title="Download the video" href="#" (click)="showDownloadModal($event)"> | 37 | <a class="dropdown-item" title="Download the video" href="#" (click)="showDownloadModal($event)"> |
50 | <span class="glyphicon glyphicon-download-alt"></span> Download | 38 | <span class="icon icon-download"></span> Download |
51 | </a> | 39 | </a> |
52 | </li> | 40 | </li> |
53 | 41 | ||
54 | <li *ngIf="isUserLoggedIn()" role="menuitem"> | 42 | <li *ngIf="isUserLoggedIn()" role="menuitem"> |
55 | <a class="dropdown-item" title="Report this video" href="#" (click)="showReportModal($event)"> | 43 | <a class="dropdown-item" title="Report this video" href="#" (click)="showReportModal($event)"> |
56 | <span class="glyphicon glyphicon-alert"></span> Report | 44 | <span class="icon icon-alert"></span> Report |
57 | </a> | ||
58 | </li> | ||
59 | |||
60 | <li *ngIf="isVideoRemovable()" role="menuitem"> | ||
61 | <a class="dropdown-item" title="Delete this video" href="#" (click)="removeVideo($event)"> | ||
62 | <span class="glyphicon glyphicon-remove"></span> Delete | ||
63 | </a> | 45 | </a> |
64 | </li> | 46 | </li> |
65 | 47 | ||
66 | <li *ngIf="isVideoBlacklistable()" role="menuitem"> | 48 | <li *ngIf="isVideoBlacklistable()" role="menuitem"> |
67 | <a class="dropdown-item" title="Blacklist this video" href="#" (click)="blacklistVideo($event)"> | 49 | <a class="dropdown-item" title="Blacklist this video" href="#" (click)="blacklistVideo($event)"> |
68 | <span class="glyphicon glyphicon-eye-close"></span> Blacklist | 50 | <span class="icon icon-blacklist"></span> Blacklist |
69 | </a> | 51 | </a> |
70 | </li> | 52 | </li> |
71 | </ul> | 53 | </ul> |
@@ -78,7 +60,7 @@ | |||
78 | {{ video.createdAt | myFromNow }} - {{ video.views | myNumberFormatter }} views | 60 | {{ video.createdAt | myFromNow }} - {{ video.views | myNumberFormatter }} views |
79 | </div> | 61 | </div> |
80 | 62 | ||
81 | <div class="video-info-likes-dislikes-bar"> | 63 | <div *ngIf="video.likes !== 0 || video.dislikes !== 0" class="video-info-likes-dislikes-bar"> |
82 | <div class="likes-bar" [ngStyle]="{ 'width.%': video.likesPercent }"></div> | 64 | <div class="likes-bar" [ngStyle]="{ 'width.%': video.likesPercent }"></div> |
83 | </div> | 65 | </div> |
84 | </div> | 66 | </div> |
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 d7f47ed75..3f36410f4 100644 --- a/client/src/app/videos/+video-watch/video-watch.component.scss +++ b/client/src/app/videos/+video-watch/video-watch.component.scss | |||
@@ -6,6 +6,11 @@ | |||
6 | #video-element { | 6 | #video-element { |
7 | width: 888px; | 7 | width: 888px; |
8 | height: 500px; | 8 | height: 500px; |
9 | |||
10 | // VideoJS create an inner video player | ||
11 | video { | ||
12 | outline: 0; | ||
13 | } | ||
9 | } | 14 | } |
10 | } | 15 | } |
11 | 16 | ||
@@ -38,47 +43,78 @@ | |||
38 | .video-info-actions { | 43 | .video-info-actions { |
39 | .action-button { | 44 | .action-button { |
40 | @include peertube-button; | 45 | @include peertube-button; |
46 | @include grey-button; | ||
41 | 47 | ||
42 | font-size: 15px; | 48 | font-size: 15px; |
43 | font-weight: $font-semibold; | 49 | font-weight: $font-semibold; |
44 | color: #585858; | ||
45 | background-color: #E5E5E5; | ||
46 | display: inline-block; | 50 | display: inline-block; |
47 | padding: 0 10px 0 10px; | 51 | padding: 0 10px 0 10px; |
48 | 52 | ||
49 | &:hover { | 53 | .icon { |
50 | background-color: #EFEFEF; | 54 | display: inline-block; |
55 | background-repeat: no-repeat; | ||
56 | background-size: contain; | ||
57 | width: 21px; | ||
58 | height: 21px; | ||
59 | vertical-align: middle; | ||
60 | position: relative; | ||
61 | top: -2px; | ||
62 | |||
63 | &.icon-like { | ||
64 | background-image: url('../../../assets/images/video/like-grey.svg'); | ||
65 | } | ||
66 | |||
67 | &.icon-dislike { | ||
68 | background-image: url('../../../assets/images/video/dislike-grey.svg'); | ||
69 | } | ||
70 | |||
71 | &.icon-share { | ||
72 | background-image: url('../../../assets/images/video/share.svg'); | ||
73 | } | ||
74 | |||
75 | &.icon-more { | ||
76 | background-image: url('../../../assets/images/video/more.svg'); | ||
77 | } | ||
51 | } | 78 | } |
52 | } | ||
53 | 79 | ||
54 | .action-more { | 80 | &.activated { |
55 | display: inline-block; | 81 | @include orange-button; |
56 | } | ||
57 | 82 | ||
58 | .icon { | 83 | .icon-like { |
59 | display: inline-block; | 84 | background-image: url('../../../assets/images/video/like-white.svg'); |
60 | background-repeat: no-repeat; | 85 | } |
61 | background-size: contain; | ||
62 | width: 21px; | ||
63 | height: 21px; | ||
64 | vertical-align: middle; | ||
65 | position: relative; | ||
66 | top: -2px; | ||
67 | |||
68 | &.icon-like { | ||
69 | background-image: url('../../../assets/images/video/like.svg'); | ||
70 | } | ||
71 | 86 | ||
72 | &.icon-dislike { | 87 | .icon-dislike { |
73 | background-image: url('../../../assets/images/video/dislike.svg'); | 88 | background-image: url('../../../assets/images/video/dislike-white.svg'); |
89 | } | ||
74 | } | 90 | } |
91 | } | ||
75 | 92 | ||
76 | &.icon-share { | 93 | .action-more { |
77 | background-image: url('../../../assets/images/video/share.svg'); | 94 | display: inline-block; |
78 | } | ||
79 | 95 | ||
80 | &.icon-more { | 96 | .dropdown-menu .icon { |
81 | background-image: url('../../../assets/images/video/more.svg'); | 97 | display: inline-block; |
98 | background-repeat: no-repeat; | ||
99 | background-size: contain; | ||
100 | width: 21px; | ||
101 | height: 21px; | ||
102 | vertical-align: middle; | ||
103 | margin-right: 5px; | ||
104 | position: relative; | ||
105 | top: -1px; | ||
106 | |||
107 | &.icon-download { | ||
108 | background-image: url('../../../assets/images/video/download.svg'); | ||
109 | } | ||
110 | |||
111 | &.icon-alert { | ||
112 | background-image: url('../../../assets/images/video/alert.svg'); | ||
113 | } | ||
114 | |||
115 | &.icon-blacklist { | ||
116 | background-image: url('../../../assets/images/video/eye-closed.svg'); | ||
117 | } | ||
82 | } | 118 | } |
83 | } | 119 | } |
84 | } | 120 | } |