aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/shared/buttons
diff options
context:
space:
mode:
Diffstat (limited to 'client/src/app/shared/buttons')
-rw-r--r--client/src/app/shared/buttons/action-dropdown.component.html16
-rw-r--r--client/src/app/shared/buttons/action-dropdown.component.scss21
-rw-r--r--client/src/app/shared/buttons/action-dropdown.component.ts20
-rw-r--r--client/src/app/shared/buttons/button.component.scss43
-rw-r--r--client/src/app/shared/buttons/delete-button.component.html6
-rw-r--r--client/src/app/shared/buttons/delete-button.component.ts11
-rw-r--r--client/src/app/shared/buttons/edit-button.component.html6
-rw-r--r--client/src/app/shared/buttons/edit-button.component.ts12
8 files changed, 135 insertions, 0 deletions
diff --git a/client/src/app/shared/buttons/action-dropdown.component.html b/client/src/app/shared/buttons/action-dropdown.component.html
new file mode 100644
index 000000000..c87ba4c82
--- /dev/null
+++ b/client/src/app/shared/buttons/action-dropdown.component.html
@@ -0,0 +1,16 @@
1<div class="dropdown-root" dropdown container="body" dropup="true" placement="right" role="button">
2 <div class="action-button" dropdownToggle>
3 <span class="icon icon-action"></span>
4 </div>
5
6 <ul *dropdownMenu class="dropdown-menu" id="more-menu" role="menu" aria-labelledby="single-button">
7 <li role="menuitem" *ngFor="let action of actions">
8 <my-delete-button *ngIf="action.type === 'delete'" [label]="action.label" (click)="action.handler(entry)"></my-delete-button>
9 <my-edit-button *ngIf="action.type === 'edit'" [label]="action.label" [routerLink]="action.linkBuilder(entry)"></my-edit-button>
10
11 <a *ngIf="action.type === 'custom'" class="dropdown-item" href="#" (click)="action.handler(entry)">
12 <span *ngIf="action.iconClass" class="icon" [ngClass]="action.iconClass"></span> <ng-container>{{ action.label }}</ng-container>
13 </a>
14 </li>
15 </ul>
16</div> \ No newline at end of file
diff --git a/client/src/app/shared/buttons/action-dropdown.component.scss b/client/src/app/shared/buttons/action-dropdown.component.scss
new file mode 100644
index 000000000..cc459b972
--- /dev/null
+++ b/client/src/app/shared/buttons/action-dropdown.component.scss
@@ -0,0 +1,21 @@
1@import '_variables';
2@import '_mixins';
3
4.action-button {
5 @include peertube-button;
6 @include grey-button;
7
8 &:hover, &:active, &:focus {
9 background-color: $grey-color;
10 }
11
12 display: inline-block;
13 padding: 0 10px;
14
15 .icon-action {
16 @include icon(21px);
17
18 background-image: url('../../../assets/images/video/more.svg');
19 top: -1px;
20 }
21} \ No newline at end of file
diff --git a/client/src/app/shared/buttons/action-dropdown.component.ts b/client/src/app/shared/buttons/action-dropdown.component.ts
new file mode 100644
index 000000000..407d24b80
--- /dev/null
+++ b/client/src/app/shared/buttons/action-dropdown.component.ts
@@ -0,0 +1,20 @@
1import { Component, Input } from '@angular/core'
2
3export type DropdownAction<T> = {
4 type: 'custom' | 'delete' | 'edit'
5 label?: string
6 handler?: (T) => any
7 linkBuilder?: (T) => (string | number)[]
8 iconClass?: string
9}
10
11@Component({
12 selector: 'my-action-dropdown',
13 styleUrls: [ './action-dropdown.component.scss' ],
14 templateUrl: './action-dropdown.component.html'
15})
16
17export class ActionDropdownComponent<T> {
18 @Input() actions: DropdownAction<T>[] = []
19 @Input() entry: T
20}
diff --git a/client/src/app/shared/buttons/button.component.scss b/client/src/app/shared/buttons/button.component.scss
new file mode 100644
index 000000000..343aea207
--- /dev/null
+++ b/client/src/app/shared/buttons/button.component.scss
@@ -0,0 +1,43 @@
1@import '_variables';
2@import '_mixins';
3
4.action-button {
5 @include peertube-button-link;
6
7 font-size: 15px;
8 font-weight: $font-semibold;
9 color: #585858;
10 background-color: #E5E5E5;
11
12 &:hover {
13 background-color: #EFEFEF;
14 }
15
16 .icon {
17 @include icon(21px);
18
19 position: relative;
20 top: -2px;
21
22 &.icon-edit {
23 background-image: url('../../../assets/images/global/edit-grey.svg');
24 }
25
26 &.icon-delete-grey {
27 background-image: url('../../../assets/images/global/delete-grey.svg');
28 }
29 }
30}
31
32// In a table, try to minimize the space taken by this button
33@media screen and (max-width: 1400px) {
34 :host-context(td) {
35 .action-button {
36 padding: 0 13px;
37 }
38
39 .button-label {
40 display: none;
41 }
42 }
43}
diff --git a/client/src/app/shared/buttons/delete-button.component.html b/client/src/app/shared/buttons/delete-button.component.html
new file mode 100644
index 000000000..792490219
--- /dev/null
+++ b/client/src/app/shared/buttons/delete-button.component.html
@@ -0,0 +1,6 @@
1<span class="action-button action-button-delete" [title]="label" role="button">
2 <span class="icon icon-delete-grey"></span>
3
4 <span class="button-label" *ngIf="label">{{ label }}</span>
5 <span class="button-label" i18n *ngIf="!label">Delete</span>
6</span>
diff --git a/client/src/app/shared/buttons/delete-button.component.ts b/client/src/app/shared/buttons/delete-button.component.ts
new file mode 100644
index 000000000..cd2bcccdf
--- /dev/null
+++ b/client/src/app/shared/buttons/delete-button.component.ts
@@ -0,0 +1,11 @@
1import { Component, Input } from '@angular/core'
2
3@Component({
4 selector: 'my-delete-button',
5 styleUrls: [ './button.component.scss' ],
6 templateUrl: './delete-button.component.html'
7})
8
9export class DeleteButtonComponent {
10 @Input() label: string
11}
diff --git a/client/src/app/shared/buttons/edit-button.component.html b/client/src/app/shared/buttons/edit-button.component.html
new file mode 100644
index 000000000..7efc54ce7
--- /dev/null
+++ b/client/src/app/shared/buttons/edit-button.component.html
@@ -0,0 +1,6 @@
1<a class="action-button action-button-edit" [routerLink]="routerLink" title="Edit">
2 <span class="icon icon-edit"></span>
3
4 <span class="button-label" *ngIf="label">{{ label }}</span>
5 <span i18n class="button-label" *ngIf="!label">Edit</span>
6</a>
diff --git a/client/src/app/shared/buttons/edit-button.component.ts b/client/src/app/shared/buttons/edit-button.component.ts
new file mode 100644
index 000000000..7abaacc26
--- /dev/null
+++ b/client/src/app/shared/buttons/edit-button.component.ts
@@ -0,0 +1,12 @@
1import { Component, Input } from '@angular/core'
2
3@Component({
4 selector: 'my-edit-button',
5 styleUrls: [ './button.component.scss' ],
6 templateUrl: './edit-button.component.html'
7})
8
9export class EditButtonComponent {
10 @Input() label: string
11 @Input() routerLink = []
12}