aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src
diff options
context:
space:
mode:
authorGaƫtan Rizio <gaetan@rizio.fr>2018-09-04 08:57:13 +0200
committerChocobozzz <me@florianbigard.com>2018-09-04 08:57:13 +0200
commit74d63469355bad731cdd32defdc85913df3cbd5c (patch)
tree5e7a9033a507fd69c554ddc7cc6ce3f7a6416ca1 /client/src
parent2303a803aa19c2857efac9f2af2223ccae5757e2 (diff)
downloadPeerTube-74d63469355bad731cdd32defdc85913df3cbd5c.tar.gz
PeerTube-74d63469355bad731cdd32defdc85913df3cbd5c.tar.zst
PeerTube-74d63469355bad731cdd32defdc85913df3cbd5c.zip
Users can change ownership of their video [#510] (#888)
* [#510] Create a new route to get the list of user names To be able to transfer ownership to a user, we need to be able to select him from the list of users. Because the list could be too big, we add a autocomplete feature. This commit does the following: * Add a API endpoint to get a list of user names by searching its name * [#510] The user can choose the next owner of the video To be able to transfer ownership to a user, we need the owner to be able to select the user. The server can autocomplete the name of the user to give the ownership. We add a dialog for the user to actually select it. This commit does the following: * Create a modal for the owner to select the next one * Opens this modal with a button into the menu *more* * Make the dependency injection * [#510] When the user choose the next owner, create a request in database For the change of ownership to happen, we need to store the temporary requests. When the user make the request, save it to database. This commit does the following: * Create the model to persist change ownership requests * Add an API to manage ownership operations * Add a route to persist an ownership request * [#510] A user can fetch its ownership requests sent to him To be able to accept or refuse a change of ownership, the user must be able to fetch them. This commit does the following: * Add an API to list ownership for a user * Add the query to database model * [#510] A user can validate an ownership requests sent to him - server The user can accept or refuse any ownership request that was sent to him. This commit focus only on the server part. This commit does the following: * Add an API for the user to accept or refuse a video ownership * Add validators to ensure security access * Add a query to load a specific video change ownership request * [#510] A user can validate an ownership requests sent to him - web The user can accept or refuse any ownership request that was sent to him. This commit focus only on the web part. This commit does the following: * Add a page to list user ownership changes * Add actions to accept or refuse them * When accepting, show a modal requiring the channel to send the video * Correct lint - to squash * [#510] PR reviews - to squash This commit does the following: * Search parameter for user autocompletion is required from middleware directly * [#510] PR reviews - to squash with creation in database commit This commit does the following: * Add the status attribute in model * Set this attribute on instance creation * Use AccountModel method `loadLocalByName` * [#510] PR reviews - to squash with fetch ownership This commit does the following: * Add the scope `FULL` for database queries with includes * Add classic pagination middlewares * [#510] PR reviews - to squash with ownership validation - server This commit does the following: * Add a middleware to validate whether a user can validate an ownership * Change the ownership status instead of deleting the row * [#510] PR reviews - to squash with ownership validation - client This commit does the following: * Correct indentation of html files with two-spaces indentation * Use event emitter instead of function for accept event * Update the sort of ownership change table for a decreasing order by creation date * Add the status in ownership change table * Use classic method syntax * code style - to squash * Add new user right - to squash * Move the change to my-account instead of video-watch - to squash As requested in pull-request, move the action to change ownership into my videos page. The rest of the logic was not really changed. This commit does the following: - Move the modal into my video page - Create the generic component `button` to keep some styles and logic * [#510] Add tests for the new feature To avoid regression, we add tests for all api of ownership change. This commit does the following: - Create an end-to-end test for ownership change - Divide it to one test per request * [#510] Do not send twice the same request to avoid spam We can send several time the same request to change ownership. However, it will spam the user. To avoid this, we do not save a request already existing in database. This commit does the following: - Check whether the request exist in database - Add tests to verify this new condition * [#510] Change icons Change icons so they remains logic with the rest of the application. This commit does the following: - Add svg for missing icons - Add icons in `my-button` component - Use these new icons * [#510] Add control about the user quota The user should be able to accept a new video only if his quota allows it. This commit does the following: - Update the middleware to control the quota - Add tests verifying the control * Correct merge - Use new modal system - Move button to new directory `buttons` * PR reviews - to squash
Diffstat (limited to 'client/src')
-rw-r--r--client/src/app/+admin/moderation/moderation.component.scss8
-rw-r--r--client/src/app/+my-account/my-account-ownership/my-account-accept-ownership/my-account-accept-ownership.component.html34
-rw-r--r--client/src/app/+my-account/my-account-ownership/my-account-accept-ownership/my-account-accept-ownership.component.scss10
-rw-r--r--client/src/app/+my-account/my-account-ownership/my-account-accept-ownership/my-account-accept-ownership.component.ts79
-rw-r--r--client/src/app/+my-account/my-account-ownership/my-account-ownership.component.html54
-rw-r--r--client/src/app/+my-account/my-account-ownership/my-account-ownership.component.ts68
-rw-r--r--client/src/app/+my-account/my-account-routing.module.ts10
-rw-r--r--client/src/app/+my-account/my-account-videos/my-account-videos.component.html8
-rw-r--r--client/src/app/+my-account/my-account-videos/my-account-videos.component.scss10
-rw-r--r--client/src/app/+my-account/my-account-videos/my-account-videos.component.ts10
-rw-r--r--client/src/app/+my-account/my-account-videos/video-change-ownership/video-change-ownership.component.html31
-rw-r--r--client/src/app/+my-account/my-account-videos/video-change-ownership/video-change-ownership.component.scss10
-rw-r--r--client/src/app/+my-account/my-account-videos/video-change-ownership/video-change-ownership.component.ts75
-rw-r--r--client/src/app/+my-account/my-account.component.html2
-rw-r--r--client/src/app/+my-account/my-account.module.ts9
-rw-r--r--client/src/app/shared/buttons/button.component.html4
-rw-r--r--client/src/app/shared/buttons/button.component.scss12
-rw-r--r--client/src/app/shared/buttons/button.component.ts18
-rw-r--r--client/src/app/shared/forms/form-validators/index.ts2
-rw-r--r--client/src/app/shared/forms/form-validators/video-accept-ownership-validators.service.ts18
-rw-r--r--client/src/app/shared/forms/form-validators/video-change-ownership-validators.service.ts18
-rw-r--r--client/src/app/shared/shared.module.ts10
-rw-r--r--client/src/app/shared/users/user.service.ts12
-rw-r--r--client/src/app/shared/video-ownership/index.ts1
-rw-r--r--client/src/app/shared/video-ownership/video-ownership.service.ts67
-rw-r--r--client/src/assets/images/global/im-with-her.svg15
-rw-r--r--client/src/sass/include/_mixins.scss2
27 files changed, 583 insertions, 14 deletions
diff --git a/client/src/app/+admin/moderation/moderation.component.scss b/client/src/app/+admin/moderation/moderation.component.scss
index 5bb2c50a7..02ccfc8ca 100644
--- a/client/src/app/+admin/moderation/moderation.component.scss
+++ b/client/src/app/+admin/moderation/moderation.component.scss
@@ -17,8 +17,8 @@
17} 17}
18 18
19.moderation-expanded { 19.moderation-expanded {
20 word-wrap: break-word; 20 word-wrap: break-word;
21 overflow: visible !important; 21 overflow: visible !important;
22 text-overflow: unset !important; 22 text-overflow: unset !important;
23 white-space: unset !important; 23 white-space: unset !important;
24} 24}
diff --git a/client/src/app/+my-account/my-account-ownership/my-account-accept-ownership/my-account-accept-ownership.component.html b/client/src/app/+my-account/my-account-ownership/my-account-accept-ownership/my-account-accept-ownership.component.html
new file mode 100644
index 000000000..fd7d7d23b
--- /dev/null
+++ b/client/src/app/+my-account/my-account-ownership/my-account-accept-ownership/my-account-accept-ownership.component.html
@@ -0,0 +1,34 @@
1<ng-template #modal let-close="close" let-dismiss="dismiss">
2 <div class="modal-header">
3 <h4 i18n class="modal-title">Accept ownership</h4>
4 <span class="close" aria-label="Close" role="button" (click)="dismiss()"></span>
5 </div>
6
7 <div class="modal-body" [formGroup]="form">
8 <div class="form-group">
9 <label i18n for="channel">Select the target channel</label>
10 <select formControlName="channel" id="channel" class="peertube-select-container">
11 <option></option>
12 <option *ngFor="let channel of videoChannels" [value]="channel.id">{{ channel.displayName }}
13 </option>
14 </select>
15 <div *ngIf="formErrors.channel" class="form-error">
16 {{ formErrors.channel }}
17 </div>
18 </div>
19 </div>
20
21 <div class="modal-footer inputs">
22 <div class="form-group inputs">
23 <span i18n class="action-button action-button-cancel" (click)="dismiss()">
24 Cancel
25 </span>
26
27 <input
28 type="submit" i18n-value value="Submit" class="action-button-submit"
29 [disabled]="!form.valid"
30 (click)="close()"
31 >
32 </div>
33 </div>
34</ng-template>
diff --git a/client/src/app/+my-account/my-account-ownership/my-account-accept-ownership/my-account-accept-ownership.component.scss b/client/src/app/+my-account/my-account-ownership/my-account-accept-ownership/my-account-accept-ownership.component.scss
new file mode 100644
index 000000000..ad6117413
--- /dev/null
+++ b/client/src/app/+my-account/my-account-ownership/my-account-accept-ownership/my-account-accept-ownership.component.scss
@@ -0,0 +1,10 @@
1@import '_variables';
2@import '_mixins';
3
4select {
5 display: block;
6}
7
8.form-group {
9 margin: 20px 0;
10} \ No newline at end of file
diff --git a/client/src/app/+my-account/my-account-ownership/my-account-accept-ownership/my-account-accept-ownership.component.ts b/client/src/app/+my-account/my-account-ownership/my-account-accept-ownership/my-account-accept-ownership.component.ts
new file mode 100644
index 000000000..a68b452ec
--- /dev/null
+++ b/client/src/app/+my-account/my-account-ownership/my-account-accept-ownership/my-account-accept-ownership.component.ts
@@ -0,0 +1,79 @@
1import { Component, ElementRef, EventEmitter, OnInit, Output, ViewChild } from '@angular/core'
2import { NotificationsService } from 'angular2-notifications'
3import { FormReactive } from '@app/shared'
4import { FormValidatorService } from '@app/shared/forms/form-validators/form-validator.service'
5import { VideoOwnershipService } from '@app/shared/video-ownership'
6import { VideoChangeOwnership } from '../../../../../../shared/models/videos'
7import { VideoAcceptOwnershipValidatorsService } from '@app/shared/forms/form-validators'
8import { VideoChannel } from '@app/shared/video-channel/video-channel.model'
9import { VideoChannelService } from '@app/shared/video-channel/video-channel.service'
10import { I18n } from '@ngx-translate/i18n-polyfill'
11import { AuthService } from '@app/core'
12import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
13
14@Component({
15 selector: 'my-account-accept-ownership',
16 templateUrl: './my-account-accept-ownership.component.html',
17 styleUrls: [ './my-account-accept-ownership.component.scss' ]
18})
19export class MyAccountAcceptOwnershipComponent extends FormReactive implements OnInit {
20 @Output() accepted = new EventEmitter<void>()
21
22 @ViewChild('modal') modal: ElementRef
23
24 videoChangeOwnership: VideoChangeOwnership | undefined = undefined
25
26 videoChannels: VideoChannel[]
27
28 error: string = null
29
30 constructor (
31 protected formValidatorService: FormValidatorService,
32 private videoChangeOwnershipValidatorsService: VideoAcceptOwnershipValidatorsService,
33 private videoOwnershipService: VideoOwnershipService,
34 private notificationsService: NotificationsService,
35 private authService: AuthService,
36 private videoChannelService: VideoChannelService,
37 private modalService: NgbModal,
38 private i18n: I18n
39 ) {
40 super()
41 }
42
43 ngOnInit () {
44 this.videoChannels = []
45
46 this.videoChannelService.listAccountVideoChannels(this.authService.getUser().account)
47 .subscribe(videoChannels => this.videoChannels = videoChannels.data)
48
49 this.buildForm({
50 channel: this.videoChangeOwnershipValidatorsService.CHANNEL
51 })
52 }
53
54 show (videoChangeOwnership: VideoChangeOwnership) {
55 this.videoChangeOwnership = videoChangeOwnership
56 this.modalService
57 .open(this.modal)
58 .result
59 .then(() => this.acceptOwnership())
60 .catch(() => this.videoChangeOwnership = undefined)
61 }
62
63 acceptOwnership () {
64 const channel = this.form.value['channel']
65
66 const videoChangeOwnership = this.videoChangeOwnership
67 this.videoOwnershipService
68 .acceptOwnership(videoChangeOwnership.id, { channelId: channel })
69 .subscribe(
70 () => {
71 this.notificationsService.success(this.i18n('Success'), this.i18n('Ownership accepted'))
72 if (this.accepted) this.accepted.emit()
73 this.videoChangeOwnership = undefined
74 },
75
76 err => this.notificationsService.error(this.i18n('Error'), err.message)
77 )
78 }
79}
diff --git a/client/src/app/+my-account/my-account-ownership/my-account-ownership.component.html b/client/src/app/+my-account/my-account-ownership/my-account-ownership.component.html
new file mode 100644
index 000000000..379fd8bb1
--- /dev/null
+++ b/client/src/app/+my-account/my-account-ownership/my-account-ownership.component.html
@@ -0,0 +1,54 @@
1<p-table
2 [value]="videoChangeOwnerships"
3 [lazy]="true"
4 [paginator]="true"
5 [totalRecords]="totalRecords"
6 [rows]="rowsPerPage"
7 [sortField]="sort.field"
8 [sortOrder]="sort.order"
9 (onLazyLoad)="loadLazy($event)"
10>
11 <ng-template pTemplate="header">
12 <tr>
13 <th i18n>Initiator</th>
14 <th i18n>Video</th>
15 <th i18n pSortableColumn="createdAt">
16 Created
17 <p-sortIcon field="createdAt"></p-sortIcon>
18 </th>
19 <th i18n>Status</th>
20 <th i18n>Action</th>
21 </tr>
22 </ng-template>
23
24 <ng-template pTemplate="body" let-videoChangeOwnership>
25 <tr>
26 <td>
27 <a [href]="videoChangeOwnership.initiatorAccount.url" i18n-title title="Go to the account"
28 target="_blank" rel="noopener noreferrer">
29 {{ createByString(videoChangeOwnership.initiatorAccount) }}
30 </a>
31 </td>
32 <td>
33 <a [href]="videoChangeOwnership.video.url" i18n-title title="Go to the video" target="_blank"
34 rel="noopener noreferrer">
35 {{ videoChangeOwnership.video.name }}
36 </a>
37 </td>
38 <td>{{ videoChangeOwnership.createdAt }}</td>
39 <td i18n>{{ videoChangeOwnership.status }}</td>
40 <td class="action-cell">
41 <ng-container *ngIf="videoChangeOwnership.status === 'WAITING'">
42 <my-button i18n label="Accept"
43 icon="icon-tick"
44 (click)="openAcceptModal(videoChangeOwnership)"></my-button>
45 <my-button i18n label="Refuse"
46 icon="icon-cross"
47 (click)="refuse(videoChangeOwnership)">Refuse</my-button>
48 </ng-container>
49 </td>
50 </tr>
51 </ng-template>
52</p-table>
53
54<my-account-accept-ownership #myAccountAcceptOwnershipComponent (accepted)="accepted()"></my-account-accept-ownership> \ No newline at end of file
diff --git a/client/src/app/+my-account/my-account-ownership/my-account-ownership.component.ts b/client/src/app/+my-account/my-account-ownership/my-account-ownership.component.ts
new file mode 100644
index 000000000..13517b9f4
--- /dev/null
+++ b/client/src/app/+my-account/my-account-ownership/my-account-ownership.component.ts
@@ -0,0 +1,68 @@
1import { Component, OnInit, ViewChild } from '@angular/core'
2import { NotificationsService } from 'angular2-notifications'
3import { I18n } from '@ngx-translate/i18n-polyfill'
4import { RestPagination, RestTable } from '@app/shared'
5import { SortMeta } from 'primeng/components/common/sortmeta'
6import { VideoChangeOwnership } from '../../../../../shared'
7import { VideoOwnershipService } from '@app/shared/video-ownership'
8import { Account } from '@app/shared/account/account.model'
9import { MyAccountAcceptOwnershipComponent }
10from '@app/+my-account/my-account-ownership/my-account-accept-ownership/my-account-accept-ownership.component'
11
12@Component({
13 selector: 'my-account-ownership',
14 templateUrl: './my-account-ownership.component.html'
15})
16export class MyAccountOwnershipComponent extends RestTable implements OnInit {
17 videoChangeOwnerships: VideoChangeOwnership[] = []
18 totalRecords = 0
19 rowsPerPage = 10
20 sort: SortMeta = { field: 'createdAt', order: -1 }
21 pagination: RestPagination = { count: this.rowsPerPage, start: 0 }
22
23 @ViewChild('myAccountAcceptOwnershipComponent') myAccountAcceptOwnershipComponent: MyAccountAcceptOwnershipComponent
24
25 constructor (
26 private notificationsService: NotificationsService,
27 private videoOwnershipService: VideoOwnershipService,
28 private i18n: I18n
29 ) {
30 super()
31 }
32
33 ngOnInit () {
34 this.loadSort()
35 }
36
37 protected loadData () {
38 return this.videoOwnershipService.getOwnershipChanges(this.pagination, this.sort)
39 .subscribe(
40 resultList => {
41 this.videoChangeOwnerships = resultList.data
42 this.totalRecords = resultList.total
43 },
44
45 err => this.notificationsService.error(this.i18n('Error'), err.message)
46 )
47 }
48
49 createByString (account: Account) {
50 return Account.CREATE_BY_STRING(account.name, account.host)
51 }
52
53 openAcceptModal (videoChangeOwnership: VideoChangeOwnership) {
54 this.myAccountAcceptOwnershipComponent.show(videoChangeOwnership)
55 }
56
57 accepted () {
58 this.loadData()
59 }
60
61 refuse (videoChangeOwnership: VideoChangeOwnership) {
62 this.videoOwnershipService.refuseOwnership(videoChangeOwnership.id)
63 .subscribe(
64 () => this.loadData(),
65 err => this.notificationsService.error(this.i18n('Error'), err.message)
66 )
67 }
68}
diff --git a/client/src/app/+my-account/my-account-routing.module.ts b/client/src/app/+my-account/my-account-routing.module.ts
index c1c979151..4b2168e35 100644
--- a/client/src/app/+my-account/my-account-routing.module.ts
+++ b/client/src/app/+my-account/my-account-routing.module.ts
@@ -10,6 +10,7 @@ import { MyAccountVideoChannelCreateComponent } from '@app/+my-account/my-accoun
10import { MyAccountVideoChannelUpdateComponent } from '@app/+my-account/my-account-video-channels/my-account-video-channel-update.component' 10import { MyAccountVideoChannelUpdateComponent } from '@app/+my-account/my-account-video-channels/my-account-video-channel-update.component'
11import { MyAccountVideoImportsComponent } from '@app/+my-account/my-account-video-imports/my-account-video-imports.component' 11import { MyAccountVideoImportsComponent } from '@app/+my-account/my-account-video-imports/my-account-video-imports.component'
12import { MyAccountSubscriptionsComponent } from '@app/+my-account/my-account-subscriptions/my-account-subscriptions.component' 12import { MyAccountSubscriptionsComponent } from '@app/+my-account/my-account-subscriptions/my-account-subscriptions.component'
13import { MyAccountOwnershipComponent } from '@app/+my-account/my-account-ownership/my-account-ownership.component'
13 14
14const myAccountRoutes: Routes = [ 15const myAccountRoutes: Routes = [
15 { 16 {
@@ -84,6 +85,15 @@ const myAccountRoutes: Routes = [
84 title: 'Account subscriptions' 85 title: 'Account subscriptions'
85 } 86 }
86 } 87 }
88 },
89 {
90 path: 'ownership',
91 component: MyAccountOwnershipComponent,
92 data: {
93 meta: {
94 title: 'Ownership changes'
95 }
96 }
87 } 97 }
88 ] 98 ]
89 } 99 }
diff --git a/client/src/app/+my-account/my-account-videos/my-account-videos.component.html b/client/src/app/+my-account/my-account-videos/my-account-videos.component.html
index 8a6cb5c32..276d01408 100644
--- a/client/src/app/+my-account/my-account-videos/my-account-videos.component.html
+++ b/client/src/app/+my-account/my-account-videos/my-account-videos.component.html
@@ -42,7 +42,15 @@
42 <my-delete-button (click)="deleteVideo(video)"></my-delete-button> 42 <my-delete-button (click)="deleteVideo(video)"></my-delete-button>
43 43
44 <my-edit-button [routerLink]="[ '/videos', 'update', video.uuid ]"></my-edit-button> 44 <my-edit-button [routerLink]="[ '/videos', 'update', video.uuid ]"></my-edit-button>
45
46 <my-button i18n label="Change ownership"
47 className="action-button-change-ownership"
48 icon="icon-im-with-her"
49 (click)="changeOwnership($event, video)"
50 ></my-button>
45 </div> 51 </div>
46 </div> 52 </div>
47 </div> 53 </div>
48</div> 54</div>
55
56<my-video-change-ownership #videoChangeOwnershipModal></my-video-change-ownership> \ No newline at end of file
diff --git a/client/src/app/+my-account/my-account-videos/my-account-videos.component.scss b/client/src/app/+my-account/my-account-videos/my-account-videos.component.scss
index cd805be73..8d0dec07d 100644
--- a/client/src/app/+my-account/my-account-videos/my-account-videos.component.scss
+++ b/client/src/app/+my-account/my-account-videos/my-account-videos.component.scss
@@ -35,12 +35,6 @@
35 } 35 }
36} 36}
37 37
38/deep/ .action-button {
39 &.action-button-delete {
40 margin-right: 10px;
41 }
42}
43
44.video { 38.video {
45 @include row-blocks; 39 @include row-blocks;
46 40
@@ -96,6 +90,10 @@
96 90
97 .video-buttons { 91 .video-buttons {
98 min-width: 190px; 92 min-width: 190px;
93
94 *:not(:last-child) {
95 margin-right: 10px;
96 }
99 } 97 }
100} 98}
101 99
diff --git a/client/src/app/+my-account/my-account-videos/my-account-videos.component.ts b/client/src/app/+my-account/my-account-videos/my-account-videos.component.ts
index 01e1ef1da..7560f0128 100644
--- a/client/src/app/+my-account/my-account-videos/my-account-videos.component.ts
+++ b/client/src/app/+my-account/my-account-videos/my-account-videos.component.ts
@@ -1,6 +1,6 @@
1import { from as observableFrom, Observable } from 'rxjs' 1import { from as observableFrom, Observable } from 'rxjs'
2import { concatAll, tap } from 'rxjs/operators' 2import { concatAll, tap } from 'rxjs/operators'
3import { Component, OnDestroy, OnInit, Inject, LOCALE_ID } from '@angular/core' 3import { Component, OnDestroy, OnInit, Inject, LOCALE_ID, ViewChild } from '@angular/core'
4import { ActivatedRoute, Router } from '@angular/router' 4import { ActivatedRoute, Router } from '@angular/router'
5import { Location } from '@angular/common' 5import { Location } from '@angular/common'
6import { immutableAssign } from '@app/shared/misc/utils' 6import { immutableAssign } from '@app/shared/misc/utils'
@@ -14,6 +14,7 @@ import { VideoService } from '../../shared/video/video.service'
14import { I18n } from '@ngx-translate/i18n-polyfill' 14import { I18n } from '@ngx-translate/i18n-polyfill'
15import { VideoPrivacy, VideoState } from '../../../../../shared/models/videos' 15import { VideoPrivacy, VideoState } from '../../../../../shared/models/videos'
16import { ScreenService } from '@app/shared/misc/screen.service' 16import { ScreenService } from '@app/shared/misc/screen.service'
17import { VideoChangeOwnershipComponent } from './video-change-ownership/video-change-ownership.component'
17 18
18@Component({ 19@Component({
19 selector: 'my-account-videos', 20 selector: 'my-account-videos',
@@ -33,6 +34,8 @@ export class MyAccountVideosComponent extends AbstractVideoList implements OnIni
33 protected baseVideoWidth = -1 34 protected baseVideoWidth = -1
34 protected baseVideoHeight = 155 35 protected baseVideoHeight = 155
35 36
37 @ViewChild('videoChangeOwnershipModal') videoChangeOwnershipModal: VideoChangeOwnershipComponent
38
36 constructor ( 39 constructor (
37 protected router: Router, 40 protected router: Router,
38 protected route: ActivatedRoute, 41 protected route: ActivatedRoute,
@@ -133,6 +136,11 @@ export class MyAccountVideosComponent extends AbstractVideoList implements OnIni
133 ) 136 )
134 } 137 }
135 138
139 changeOwnership (event: Event, video: Video) {
140 event.preventDefault()
141 this.videoChangeOwnershipModal.show(video)
142 }
143
136 getStateLabel (video: Video) { 144 getStateLabel (video: Video) {
137 let suffix: string 145 let suffix: string
138 146
diff --git a/client/src/app/+my-account/my-account-videos/video-change-ownership/video-change-ownership.component.html b/client/src/app/+my-account/my-account-videos/video-change-ownership/video-change-ownership.component.html
new file mode 100644
index 000000000..69b198faa
--- /dev/null
+++ b/client/src/app/+my-account/my-account-videos/video-change-ownership/video-change-ownership.component.html
@@ -0,0 +1,31 @@
1<ng-template #modal let-close="close" let-dismiss="dismiss">
2 <div class="modal-header">
3 <h4 i18n class="modal-title">Change ownership</h4>
4 <span class="close" aria-label="Close" role="button" (click)="dismiss()"></span>
5 </div>
6
7 <div class="modal-body" [formGroup]="form">
8 <div class="form-group">
9 <label i18n for="next-ownership-username">Select the next owner</label>
10 <p-autoComplete formControlName="username" [suggestions]="usernamePropositions"
11 (completeMethod)="search($event)" id="next-ownership-username"></p-autoComplete>
12 <div *ngIf="formErrors.username" class="form-error">
13 {{ formErrors.username }}
14 </div>
15 </div>
16 </div>
17
18 <div class="modal-footer inputs">
19 <div class="form-group inputs">
20 <span i18n class="action-button action-button-cancel" (click)="dismiss()">
21 Cancel
22 </span>
23
24 <input
25 type="submit" i18n-value value="Submit" class="action-button-submit"
26 [disabled]="!form.valid"
27 (click)="close()"
28 />
29 </div>
30 </div>
31</ng-template>
diff --git a/client/src/app/+my-account/my-account-videos/video-change-ownership/video-change-ownership.component.scss b/client/src/app/+my-account/my-account-videos/video-change-ownership/video-change-ownership.component.scss
new file mode 100644
index 000000000..a79fec179
--- /dev/null
+++ b/client/src/app/+my-account/my-account-videos/video-change-ownership/video-change-ownership.component.scss
@@ -0,0 +1,10 @@
1@import '_variables';
2@import '_mixins';
3
4p-autocomplete {
5 display: block;
6}
7
8.form-group {
9 margin: 20px 0;
10} \ No newline at end of file
diff --git a/client/src/app/+my-account/my-account-videos/video-change-ownership/video-change-ownership.component.ts b/client/src/app/+my-account/my-account-videos/video-change-ownership/video-change-ownership.component.ts
new file mode 100644
index 000000000..0aa4c32ee
--- /dev/null
+++ b/client/src/app/+my-account/my-account-videos/video-change-ownership/video-change-ownership.component.ts
@@ -0,0 +1,75 @@
1import { Component, ElementRef, OnInit, ViewChild } from '@angular/core'
2import { NotificationsService } from 'angular2-notifications'
3import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
4import { FormReactive, UserService } from '../../../shared/index'
5import { Video } from '@app/shared/video/video.model'
6import { I18n } from '@ngx-translate/i18n-polyfill'
7import { FormValidatorService, VideoChangeOwnershipValidatorsService } from '@app/shared'
8import { VideoOwnershipService } from '@app/shared/video-ownership'
9
10@Component({
11 selector: 'my-video-change-ownership',
12 templateUrl: './video-change-ownership.component.html',
13 styleUrls: [ './video-change-ownership.component.scss' ]
14})
15export class VideoChangeOwnershipComponent extends FormReactive implements OnInit {
16 @ViewChild('modal') modal: ElementRef
17
18 usernamePropositions: string[]
19
20 error: string = null
21
22 private video: Video | undefined = undefined
23
24 constructor (
25 protected formValidatorService: FormValidatorService,
26 private videoChangeOwnershipValidatorsService: VideoChangeOwnershipValidatorsService,
27 private videoOwnershipService: VideoOwnershipService,
28 private notificationsService: NotificationsService,
29 private userService: UserService,
30 private modalService: NgbModal,
31 private i18n: I18n
32 ) {
33 super()
34 }
35
36 ngOnInit () {
37 this.buildForm({
38 username: this.videoChangeOwnershipValidatorsService.USERNAME
39 })
40 this.usernamePropositions = []
41 }
42
43 show (video: Video) {
44 this.video = video
45 this.modalService
46 .open(this.modal)
47 .result
48 .then(() => this.changeOwnership())
49 .catch((_) => _) // Called when closing (cancel) the modal without validating, do nothing
50 }
51
52 search (event) {
53 const query = event.query
54 this.userService.autocomplete(query)
55 .subscribe(
56 (usernames) => {
57 this.usernamePropositions = usernames
58 },
59
60 err => this.notificationsService.error('Error', err.message)
61 )
62 }
63
64 changeOwnership () {
65 const username = this.form.value['username']
66
67 this.videoOwnershipService
68 .changeOwnership(this.video.id, username)
69 .subscribe(
70 () => this.notificationsService.success(this.i18n('Success'), this.i18n('Ownership changed.')),
71
72 err => this.notificationsService.error(this.i18n('Error'), err.message)
73 )
74 }
75}
diff --git a/client/src/app/+my-account/my-account.component.html b/client/src/app/+my-account/my-account.component.html
index 74742649c..b79e61bef 100644
--- a/client/src/app/+my-account/my-account.component.html
+++ b/client/src/app/+my-account/my-account.component.html
@@ -9,6 +9,8 @@
9 <a i18n routerLink="/my-account/subscriptions" routerLinkActive="active" class="title-page">My subscriptions</a> 9 <a i18n routerLink="/my-account/subscriptions" routerLinkActive="active" class="title-page">My subscriptions</a>
10 10
11 <a *ngIf="isVideoImportEnabled()" i18n routerLink="/my-account/video-imports" routerLinkActive="active" class="title-page">My imports</a> 11 <a *ngIf="isVideoImportEnabled()" i18n routerLink="/my-account/video-imports" routerLinkActive="active" class="title-page">My imports</a>
12
13 <a i18n routerLink="/my-account/ownership" routerLinkActive="active" class="title-page">Ownership changes</a>
12 </div> 14 </div>
13 15
14 <div class="margin-content"> 16 <div class="margin-content">
diff --git a/client/src/app/+my-account/my-account.module.ts b/client/src/app/+my-account/my-account.module.ts
index c93f38d4b..ad21162a8 100644
--- a/client/src/app/+my-account/my-account.module.ts
+++ b/client/src/app/+my-account/my-account.module.ts
@@ -1,5 +1,6 @@
1import { TableModule } from 'primeng/table' 1import { TableModule } from 'primeng/table'
2import { NgModule } from '@angular/core' 2import { NgModule } from '@angular/core'
3import { AutoCompleteModule } from 'primeng/autocomplete'
3import { SharedModule } from '../shared' 4import { SharedModule } from '../shared'
4import { MyAccountRoutingModule } from './my-account-routing.module' 5import { MyAccountRoutingModule } from './my-account-routing.module'
5import { MyAccountChangePasswordComponent } from './my-account-settings/my-account-change-password/my-account-change-password.component' 6import { MyAccountChangePasswordComponent } from './my-account-settings/my-account-change-password/my-account-change-password.component'
@@ -7,6 +8,9 @@ import { MyAccountVideoSettingsComponent } from './my-account-settings/my-accoun
7import { MyAccountSettingsComponent } from './my-account-settings/my-account-settings.component' 8import { MyAccountSettingsComponent } from './my-account-settings/my-account-settings.component'
8import { MyAccountComponent } from './my-account.component' 9import { MyAccountComponent } from './my-account.component'
9import { MyAccountVideosComponent } from './my-account-videos/my-account-videos.component' 10import { MyAccountVideosComponent } from './my-account-videos/my-account-videos.component'
11import { VideoChangeOwnershipComponent } from './my-account-videos/video-change-ownership/video-change-ownership.component'
12import { MyAccountOwnershipComponent } from './my-account-ownership/my-account-ownership.component'
13import { MyAccountAcceptOwnershipComponent } from './my-account-ownership/my-account-accept-ownership/my-account-accept-ownership.component'
10import { MyAccountProfileComponent } from '@app/+my-account/my-account-settings/my-account-profile/my-account-profile.component' 14import { MyAccountProfileComponent } from '@app/+my-account/my-account-settings/my-account-profile/my-account-profile.component'
11import { MyAccountVideoChannelsComponent } from '@app/+my-account/my-account-video-channels/my-account-video-channels.component' 15import { MyAccountVideoChannelsComponent } from '@app/+my-account/my-account-video-channels/my-account-video-channels.component'
12import { MyAccountVideoChannelCreateComponent } from '@app/+my-account/my-account-video-channels/my-account-video-channel-create.component' 16import { MyAccountVideoChannelCreateComponent } from '@app/+my-account/my-account-video-channels/my-account-video-channel-create.component'
@@ -18,7 +22,9 @@ import { MyAccountSubscriptionsComponent } from '@app/+my-account/my-account-sub
18 22
19@NgModule({ 23@NgModule({
20 imports: [ 24 imports: [
25 TableModule,
21 MyAccountRoutingModule, 26 MyAccountRoutingModule,
27 AutoCompleteModule,
22 SharedModule, 28 SharedModule,
23 TableModule 29 TableModule
24 ], 30 ],
@@ -30,6 +36,9 @@ import { MyAccountSubscriptionsComponent } from '@app/+my-account/my-account-sub
30 MyAccountVideoSettingsComponent, 36 MyAccountVideoSettingsComponent,
31 MyAccountProfileComponent, 37 MyAccountProfileComponent,
32 MyAccountVideosComponent, 38 MyAccountVideosComponent,
39 VideoChangeOwnershipComponent,
40 MyAccountOwnershipComponent,
41 MyAccountAcceptOwnershipComponent,
33 MyAccountVideoChannelsComponent, 42 MyAccountVideoChannelsComponent,
34 MyAccountVideoChannelCreateComponent, 43 MyAccountVideoChannelCreateComponent,
35 MyAccountVideoChannelUpdateComponent, 44 MyAccountVideoChannelUpdateComponent,
diff --git a/client/src/app/shared/buttons/button.component.html b/client/src/app/shared/buttons/button.component.html
new file mode 100644
index 000000000..87a8daccf
--- /dev/null
+++ b/client/src/app/shared/buttons/button.component.html
@@ -0,0 +1,4 @@
1<span class="action-button" [ngClass]="className" [title]="getTitle()">
2 <span class="icon" [ngClass]="icon"></span>
3 <span class="button-label">{{ label }}</span>
4</span>
diff --git a/client/src/app/shared/buttons/button.component.scss b/client/src/app/shared/buttons/button.component.scss
index 343aea207..168102f09 100644
--- a/client/src/app/shared/buttons/button.component.scss
+++ b/client/src/app/shared/buttons/button.component.scss
@@ -26,6 +26,18 @@
26 &.icon-delete-grey { 26 &.icon-delete-grey {
27 background-image: url('../../../assets/images/global/delete-grey.svg'); 27 background-image: url('../../../assets/images/global/delete-grey.svg');
28 } 28 }
29
30 &.icon-im-with-her {
31 background-image: url('../../../assets/images/global/im-with-her.svg');
32 }
33
34 &.icon-tick {
35 background-image: url('../../../assets/images/global/tick.svg');
36 }
37
38 &.icon-cross {
39 background-image: url('../../../assets/images/global/cross.svg');
40 }
29 } 41 }
30} 42}
31 43
diff --git a/client/src/app/shared/buttons/button.component.ts b/client/src/app/shared/buttons/button.component.ts
new file mode 100644
index 000000000..967cb1409
--- /dev/null
+++ b/client/src/app/shared/buttons/button.component.ts
@@ -0,0 +1,18 @@
1import { Component, Input } from '@angular/core'
2
3@Component({
4 selector: 'my-button',
5 styleUrls: ['./button.component.scss'],
6 templateUrl: './button.component.html'
7})
8
9export class ButtonComponent {
10 @Input() label = ''
11 @Input() className = undefined
12 @Input() icon = undefined
13 @Input() title = undefined
14
15 getTitle () {
16 return this.title || this.label
17 }
18}
diff --git a/client/src/app/shared/forms/form-validators/index.ts b/client/src/app/shared/forms/form-validators/index.ts
index 9bc7615ca..74e385b3d 100644
--- a/client/src/app/shared/forms/form-validators/index.ts
+++ b/client/src/app/shared/forms/form-validators/index.ts
@@ -10,3 +10,5 @@ export * from './video-channel-validators.service'
10export * from './video-comment-validators.service' 10export * from './video-comment-validators.service'
11export * from './video-validators.service' 11export * from './video-validators.service'
12export * from './video-captions-validators.service' 12export * from './video-captions-validators.service'
13export * from './video-change-ownership-validators.service'
14export * from './video-accept-ownership-validators.service'
diff --git a/client/src/app/shared/forms/form-validators/video-accept-ownership-validators.service.ts b/client/src/app/shared/forms/form-validators/video-accept-ownership-validators.service.ts
new file mode 100644
index 000000000..48c7054a4
--- /dev/null
+++ b/client/src/app/shared/forms/form-validators/video-accept-ownership-validators.service.ts
@@ -0,0 +1,18 @@
1import { I18n } from '@ngx-translate/i18n-polyfill'
2import { Validators } from '@angular/forms'
3import { Injectable } from '@angular/core'
4import { BuildFormValidator } from '@app/shared'
5
6@Injectable()
7export class VideoAcceptOwnershipValidatorsService {
8 readonly CHANNEL: BuildFormValidator
9
10 constructor (private i18n: I18n) {
11 this.CHANNEL = {
12 VALIDATORS: [ Validators.required ],
13 MESSAGES: {
14 'required': this.i18n('The channel is required.')
15 }
16 }
17 }
18}
diff --git a/client/src/app/shared/forms/form-validators/video-change-ownership-validators.service.ts b/client/src/app/shared/forms/form-validators/video-change-ownership-validators.service.ts
new file mode 100644
index 000000000..087b80b44
--- /dev/null
+++ b/client/src/app/shared/forms/form-validators/video-change-ownership-validators.service.ts
@@ -0,0 +1,18 @@
1import { I18n } from '@ngx-translate/i18n-polyfill'
2import { Validators } from '@angular/forms'
3import { Injectable } from '@angular/core'
4import { BuildFormValidator } from '@app/shared'
5
6@Injectable()
7export class VideoChangeOwnershipValidatorsService {
8 readonly USERNAME: BuildFormValidator
9
10 constructor (private i18n: I18n) {
11 this.USERNAME = {
12 VALIDATORS: [ Validators.required ],
13 MESSAGES: {
14 'required': this.i18n('The username is required.')
15 }
16 }
17 }
18}
diff --git a/client/src/app/shared/shared.module.ts b/client/src/app/shared/shared.module.ts
index b96a9aa41..1e71feb86 100644
--- a/client/src/app/shared/shared.module.ts
+++ b/client/src/app/shared/shared.module.ts
@@ -12,6 +12,7 @@ import { BytesPipe, KeysPipe, NgPipesModule } from 'ngx-pipes'
12import { SharedModule as PrimeSharedModule } from 'primeng/components/common/shared' 12import { SharedModule as PrimeSharedModule } from 'primeng/components/common/shared'
13 13
14import { AUTH_INTERCEPTOR_PROVIDER } from './auth' 14import { AUTH_INTERCEPTOR_PROVIDER } from './auth'
15import { ButtonComponent } from './buttons/button.component'
15import { DeleteButtonComponent } from './buttons/delete-button.component' 16import { DeleteButtonComponent } from './buttons/delete-button.component'
16import { EditButtonComponent } from './buttons/edit-button.component' 17import { EditButtonComponent } from './buttons/edit-button.component'
17import { FromNowPipe } from './misc/from-now.pipe' 18import { FromNowPipe } from './misc/from-now.pipe'
@@ -22,6 +23,7 @@ import { RestExtractor, RestService } from './rest'
22import { UserService } from './users' 23import { UserService } from './users'
23import { VideoAbuseService } from './video-abuse' 24import { VideoAbuseService } from './video-abuse'
24import { VideoBlacklistService } from './video-blacklist' 25import { VideoBlacklistService } from './video-blacklist'
26import { VideoOwnershipService } from './video-ownership'
25import { VideoMiniatureComponent } from './video/video-miniature.component' 27import { VideoMiniatureComponent } from './video/video-miniature.component'
26import { VideoFeedComponent } from './video/video-feed.component' 28import { VideoFeedComponent } from './video/video-feed.component'
27import { VideoThumbnailComponent } from './video/video-thumbnail.component' 29import { VideoThumbnailComponent } from './video/video-thumbnail.component'
@@ -40,7 +42,8 @@ import {
40 VideoBlacklistValidatorsService, 42 VideoBlacklistValidatorsService,
41 VideoChannelValidatorsService, 43 VideoChannelValidatorsService,
42 VideoCommentValidatorsService, 44 VideoCommentValidatorsService,
43 VideoValidatorsService 45 VideoValidatorsService,
46 VideoChangeOwnershipValidatorsService, VideoAcceptOwnershipValidatorsService
44} from '@app/shared/forms' 47} from '@app/shared/forms'
45import { I18nPrimengCalendarService } from '@app/shared/i18n/i18n-primeng-calendar' 48import { I18nPrimengCalendarService } from '@app/shared/i18n/i18n-primeng-calendar'
46import { ScreenService } from '@app/shared/misc/screen.service' 49import { ScreenService } from '@app/shared/misc/screen.service'
@@ -77,6 +80,7 @@ import { OverviewService } from '@app/shared/overview'
77 VideoThumbnailComponent, 80 VideoThumbnailComponent,
78 VideoMiniatureComponent, 81 VideoMiniatureComponent,
79 VideoFeedComponent, 82 VideoFeedComponent,
83 ButtonComponent,
80 DeleteButtonComponent, 84 DeleteButtonComponent,
81 EditButtonComponent, 85 EditButtonComponent,
82 ActionDropdownComponent, 86 ActionDropdownComponent,
@@ -113,6 +117,7 @@ import { OverviewService } from '@app/shared/overview'
113 VideoThumbnailComponent, 117 VideoThumbnailComponent,
114 VideoMiniatureComponent, 118 VideoMiniatureComponent,
115 VideoFeedComponent, 119 VideoFeedComponent,
120 ButtonComponent,
116 DeleteButtonComponent, 121 DeleteButtonComponent,
117 EditButtonComponent, 122 EditButtonComponent,
118 ActionDropdownComponent, 123 ActionDropdownComponent,
@@ -135,6 +140,7 @@ import { OverviewService } from '@app/shared/overview'
135 RestService, 140 RestService,
136 VideoAbuseService, 141 VideoAbuseService,
137 VideoBlacklistService, 142 VideoBlacklistService,
143 VideoOwnershipService,
138 UserService, 144 UserService,
139 VideoService, 145 VideoService,
140 AccountService, 146 AccountService,
@@ -156,6 +162,8 @@ import { OverviewService } from '@app/shared/overview'
156 VideoCaptionsValidatorsService, 162 VideoCaptionsValidatorsService,
157 VideoBlacklistValidatorsService, 163 VideoBlacklistValidatorsService,
158 OverviewService, 164 OverviewService,
165 VideoChangeOwnershipValidatorsService,
166 VideoAcceptOwnershipValidatorsService,
159 167
160 I18nPrimengCalendarService, 168 I18nPrimengCalendarService,
161 ScreenService, 169 ScreenService,
diff --git a/client/src/app/shared/users/user.service.ts b/client/src/app/shared/users/user.service.ts
index 249c589b7..fad5b0980 100644
--- a/client/src/app/shared/users/user.service.ts
+++ b/client/src/app/shared/users/user.service.ts
@@ -1,5 +1,6 @@
1import { Observable } from 'rxjs'
1import { catchError, map } from 'rxjs/operators' 2import { catchError, map } from 'rxjs/operators'
2import { HttpClient } from '@angular/common/http' 3import { HttpClient, HttpParams } from '@angular/common/http'
3import { Injectable } from '@angular/core' 4import { Injectable } from '@angular/core'
4import { UserCreate, UserUpdateMe, UserVideoQuota } from '../../../../../shared' 5import { UserCreate, UserUpdateMe, UserVideoQuota } from '../../../../../shared'
5import { environment } from '../../../environments/environment' 6import { environment } from '../../../environments/environment'
@@ -117,4 +118,13 @@ export class UserService {
117 catchError(err => this.restExtractor.handleError(err)) 118 catchError(err => this.restExtractor.handleError(err))
118 ) 119 )
119 } 120 }
121
122 autocomplete (search: string): Observable<string[]> {
123 const url = UserService.BASE_USERS_URL + 'autocomplete'
124 const params = new HttpParams().append('search', search)
125
126 return this.authHttp
127 .get<string[]>(url, { params })
128 .pipe(catchError(res => this.restExtractor.handleError(res)))
129 }
120} 130}
diff --git a/client/src/app/shared/video-ownership/index.ts b/client/src/app/shared/video-ownership/index.ts
new file mode 100644
index 000000000..fe8902ee2
--- /dev/null
+++ b/client/src/app/shared/video-ownership/index.ts
@@ -0,0 +1 @@
export * from './video-ownership.service'
diff --git a/client/src/app/shared/video-ownership/video-ownership.service.ts b/client/src/app/shared/video-ownership/video-ownership.service.ts
new file mode 100644
index 000000000..aa9e4839a
--- /dev/null
+++ b/client/src/app/shared/video-ownership/video-ownership.service.ts
@@ -0,0 +1,67 @@
1import { catchError, map } from 'rxjs/operators'
2import { HttpClient, HttpParams } from '@angular/common/http'
3import { Injectable } from '@angular/core'
4import { environment } from '../../../environments/environment'
5import { RestExtractor, RestService } from '../rest'
6import { VideoChangeOwnershipCreate } from '../../../../../shared/models/videos'
7import { Observable } from 'rxjs/index'
8import { SortMeta } from 'primeng/components/common/sortmeta'
9import { ResultList, VideoChangeOwnership } from '../../../../../shared'
10import { RestPagination } from '@app/shared/rest'
11import { VideoChangeOwnershipAccept } from '../../../../../shared/models/videos/video-change-ownership-accept.model'
12
13@Injectable()
14export class VideoOwnershipService {
15 private static BASE_VIDEO_CHANGE_OWNERSHIP_URL = environment.apiUrl + '/api/v1/videos/'
16
17 constructor (
18 private authHttp: HttpClient,
19 private restService: RestService,
20 private restExtractor: RestExtractor
21 ) {
22 }
23
24 changeOwnership (id: number, username: string) {
25 const url = VideoOwnershipService.BASE_VIDEO_CHANGE_OWNERSHIP_URL + id + '/give-ownership'
26 const body: VideoChangeOwnershipCreate = {
27 username
28 }
29
30 return this.authHttp.post(url, body)
31 .pipe(
32 map(this.restExtractor.extractDataBool),
33 catchError(res => this.restExtractor.handleError(res))
34 )
35 }
36
37 getOwnershipChanges (pagination: RestPagination, sort: SortMeta): Observable<ResultList<VideoChangeOwnership>> {
38 const url = VideoOwnershipService.BASE_VIDEO_CHANGE_OWNERSHIP_URL + 'ownership'
39
40 let params = new HttpParams()
41 params = this.restService.addRestGetParams(params, pagination, sort)
42
43 return this.authHttp.get<ResultList<VideoChangeOwnership>>(url, { params })
44 .pipe(
45 map(res => this.restExtractor.convertResultListDateToHuman(res)),
46 catchError(res => this.restExtractor.handleError(res))
47 )
48 }
49
50 acceptOwnership (id: number, input: VideoChangeOwnershipAccept) {
51 const url = VideoOwnershipService.BASE_VIDEO_CHANGE_OWNERSHIP_URL + 'ownership/' + id + '/accept'
52 return this.authHttp.post(url, input)
53 .pipe(
54 map(this.restExtractor.extractDataBool),
55 catchError(this.restExtractor.handleError)
56 )
57 }
58
59 refuseOwnership (id: number) {
60 const url = VideoOwnershipService.BASE_VIDEO_CHANGE_OWNERSHIP_URL + 'ownership/' + id + '/refuse'
61 return this.authHttp.post(url, {})
62 .pipe(
63 map(this.restExtractor.extractDataBool),
64 catchError(this.restExtractor.handleError)
65 )
66 }
67}
diff --git a/client/src/assets/images/global/im-with-her.svg b/client/src/assets/images/global/im-with-her.svg
new file mode 100644
index 000000000..31d4754fd
--- /dev/null
+++ b/client/src/assets/images/global/im-with-her.svg
@@ -0,0 +1,15 @@
1<?xml version="1.0" encoding="UTF-8"?>
2<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">
3 <!-- Generator: Sketch 43.2 (39069) - http://www.bohemiancoding.com/sketch -->
4 <title>im-with-her</title>
5 <desc>Created with Sketch.</desc>
6 <defs></defs>
7 <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
8 <g id="Artboard-4" transform="translate(-708.000000, -467.000000)">
9 <g id="176" transform="translate(708.000000, 467.000000)">
10 <path d="M8,9 L8,3.99339768 C8,3.44494629 7.55641359,3 7.00922203,3 L2.99077797,3 C2.45097518,3 2,3.44475929 2,3.99339768 L2,20.0066023 C2,20.5550537 2.44358641,21 2.99077797,21 L7.00922203,21 C7.54902482,21 8,20.5552407 8,20.0066023 L8,15 L14,15 L14,20.0066023 C14,20.5550537 14.4435864,21 14.990778,21 L19.009222,21 C19.5490248,21 20,20.5564587 20,20.0093228 L20,15.0006104 L23,12 L20,8.99267578 L20,4.00303919 C20,3.45042467 19.5564136,3 19.009222,3 L14.990778,3 C14.4509752,3 14,3.44475929 14,3.99339768 L14,9 L8,9 Z" id="Combined-Shape" fill="#333333" opacity="0.5"></path>
11 <path d="M2,9 L14,9 L14,3.99077797 C14,3.44358641 14.3203148,3.32031476 14.7062149,3.7062149 L23,12 L14.7062149,20.2937851 C14.3161832,20.6838168 14,20.5490248 14,20.009222 L14,15 L2,15 L2,9 Z" id="Rectangle-121" fill-opacity="0.5" fill="#000000"></path>
12 </g>
13 </g>
14 </g>
15</svg> \ No newline at end of file
diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index 99225e4e5..547f03caa 100644
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -23,7 +23,7 @@
23 * @param $line-height line-height property 23 * @param $line-height line-height property
24 * @param $lines-to-show amount of lines to show 24 * @param $lines-to-show amount of lines to show
25 */ 25 */
26 @mixin ellipsis-multiline($font-size: 1rem, $line-height: 1, $lines-to-show: 2) { 26@mixin ellipsis-multiline($font-size: 1rem, $line-height: 1, $lines-to-show: 2) {
27 display: block; 27 display: block;
28 /* Fallback for non-webkit */ 28 /* Fallback for non-webkit */
29 display: -webkit-box; 29 display: -webkit-box;