aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/modal
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2021-04-14 16:39:37 +0200
committerChocobozzz <me@florianbigard.com>2021-04-14 16:39:37 +0200
commit266947e5efc7ff30b0020beb5a74e4d4fc696fa5 (patch)
tree66c2e0f463e373d971d290d9ff3b07b9528ebf27 /client/src/app/modal
parent251a82ffbb62c575d7aeb260dff22409dae39d73 (diff)
downloadPeerTube-266947e5efc7ff30b0020beb5a74e4d4fc696fa5.tar.gz
PeerTube-266947e5efc7ff30b0020beb5a74e4d4fc696fa5.tar.zst
PeerTube-266947e5efc7ff30b0020beb5a74e4d4fc696fa5.zip
Refactor modal buttons style
Diffstat (limited to 'client/src/app/modal')
-rw-r--r--client/src/app/modal/confirm.component.html4
-rw-r--r--client/src/app/modal/confirm.component.scss2
-rw-r--r--client/src/app/modal/custom-modal.component.html6
-rw-r--r--client/src/app/modal/custom-modal.component.scss10
-rw-r--r--client/src/app/modal/instance-config-warning-modal.component.html5
-rw-r--r--client/src/app/modal/instance-config-warning-modal.component.scss12
-rw-r--r--client/src/app/modal/quick-settings-modal.component.scss24
-rw-r--r--client/src/app/modal/quick-settings-modal.component.ts3
-rw-r--r--client/src/app/modal/welcome-modal.component.html4
-rw-r--r--client/src/app/modal/welcome-modal.component.scss53
10 files changed, 31 insertions, 92 deletions
diff --git a/client/src/app/modal/confirm.component.html b/client/src/app/modal/confirm.component.html
index dbc8c23e3..f07501726 100644
--- a/client/src/app/modal/confirm.component.html
+++ b/client/src/app/modal/confirm.component.html
@@ -17,13 +17,13 @@
17 17
18 <div class="modal-footer inputs"> 18 <div class="modal-footer inputs">
19 <input 19 <input
20 type="button" role="button" i18n-value value="Cancel" class="action-button action-button-cancel" 20 type="button" role="button" i18n-value value="Cancel" class="peertube-button grey-button"
21 (click)="dismiss()" (key.enter)="dismiss()" 21 (click)="dismiss()" (key.enter)="dismiss()"
22 > 22 >
23 23
24 <input 24 <input
25 ngbAutofocus 25 ngbAutofocus
26 type="submit" [value]="confirmButtonText" class="action-button-submit" [disabled]="isConfirmationDisabled()" 26 type="submit" [value]="confirmButtonText" class="peertube-button orange-button" [disabled]="isConfirmationDisabled()"
27 (click)="close()" (key.enter)="confirm()" 27 (click)="close()" (key.enter)="confirm()"
28 > 28 >
29 </div> 29 </div>
diff --git a/client/src/app/modal/confirm.component.scss b/client/src/app/modal/confirm.component.scss
index ed226bc09..69978f212 100644
--- a/client/src/app/modal/confirm.component.scss
+++ b/client/src/app/modal/confirm.component.scss
@@ -17,5 +17,3 @@ input[type=text] {
17.form-group { 17.form-group {
18 margin: 20px 0; 18 margin: 20px 0;
19} 19}
20
21
diff --git a/client/src/app/modal/custom-modal.component.html b/client/src/app/modal/custom-modal.component.html
index 06ecc2743..cdfbfbb6a 100644
--- a/client/src/app/modal/custom-modal.component.html
+++ b/client/src/app/modal/custom-modal.component.html
@@ -3,17 +3,17 @@
3 <h4 class="modal-title">{{title}}</h4> 3 <h4 class="modal-title">{{title}}</h4>
4 <my-global-icon *ngIf="close" iconName="cross" aria-label="Close" role="button" (click)="onCloseClick()"></my-global-icon> 4 <my-global-icon *ngIf="close" iconName="cross" aria-label="Close" role="button" (click)="onCloseClick()"></my-global-icon>
5 </div> 5 </div>
6 6
7 <div class="modal-body" [innerHTML]="content"></div> 7 <div class="modal-body" [innerHTML]="content"></div>
8 8
9 <div *ngIf="hasCancel() || hasConfirm()" class="modal-footer inputs"> 9 <div *ngIf="hasCancel() || hasConfirm()" class="modal-footer inputs">
10 <input 10 <input
11 *ngIf="hasCancel()" type="button" role="button" value="{{cancel.value}}" class="action-button action-button-cancel" 11 *ngIf="hasCancel()" type="button" role="button" value="{{cancel.value}}" class="peertube-button grey-button"
12 (click)="onCancelClick()" (key.enter)="onCancelClick()" 12 (click)="onCancelClick()" (key.enter)="onCancelClick()"
13 > 13 >
14 14
15 <input 15 <input
16 *ngIf="hasConfirm()" type="button" role="button" value="{{confirm.value}}" class="action-button action-button-confirm" 16 *ngIf="hasConfirm()" type="button" role="button" value="{{confirm.value}}" class="peertube-button orange-button"
17 (click)="onConfirmClick()" (key.enter)="onConfirmClick()" 17 (click)="onConfirmClick()" (key.enter)="onConfirmClick()"
18 > 18 >
19 </div> 19 </div>
diff --git a/client/src/app/modal/custom-modal.component.scss b/client/src/app/modal/custom-modal.component.scss
index a7fa30cf5..d6ef772b2 100644
--- a/client/src/app/modal/custom-modal.component.scss
+++ b/client/src/app/modal/custom-modal.component.scss
@@ -8,13 +8,3 @@
8li { 8li {
9 margin-bottom: 10px; 9 margin-bottom: 10px;
10} 10}
11
12.action-button-cancel {
13 @include peertube-button;
14 @include grey-button;
15}
16
17.action-button-confirm {
18 @include peertube-button;
19 @include orange-button;
20}
diff --git a/client/src/app/modal/instance-config-warning-modal.component.html b/client/src/app/modal/instance-config-warning-modal.component.html
index 498adfeff..f085aa9de 100644
--- a/client/src/app/modal/instance-config-warning-modal.component.html
+++ b/client/src/app/modal/instance-config-warning-modal.component.html
@@ -35,10 +35,11 @@
35 </my-peertube-checkbox> 35 </my-peertube-checkbox>
36 36
37 <input 37 <input
38 type="button" role="button" i18n-value value="Close" class="action-button action-button-cancel" 38 type="button" role="button" i18n-value value="Close" class="peertube-button grey-button"
39 (click)="hide()" (key.enter)="hide()" 39 (click)="hide()" (key.enter)="hide()"
40 > 40 >
41 <a i18n class="action-button action-button-configure" ngbAutofocus 41
42 <a i18n class="peertube-button-link orange-button" ngbAutofocus
42 href="/admin/config/edit-custom" target="_blank" rel="noopener noreferrer"> 43 href="/admin/config/edit-custom" target="_blank" rel="noopener noreferrer">
43 Configure 44 Configure
44 </a> 45 </a>
diff --git a/client/src/app/modal/instance-config-warning-modal.component.scss b/client/src/app/modal/instance-config-warning-modal.component.scss
index cc97d64e4..8d734c628 100644
--- a/client/src/app/modal/instance-config-warning-modal.component.scss
+++ b/client/src/app/modal/instance-config-warning-modal.component.scss
@@ -1,10 +1,6 @@
1@import '_mixins'; 1@import '_mixins';
2@import '_variables'; 2@import '_variables';
3 3
4.action-button-cancel {
5 margin-right: 0 !important;
6}
7
8.modal-body { 4.modal-body {
9 font-size: 15px; 5 font-size: 15px;
10} 6}
@@ -18,11 +14,3 @@ li {
18 margin: 0 auto 50px; 14 margin: 0 auto 50px;
19 width: 25%; 15 width: 25%;
20} 16}
21
22.action-button-configure {
23 display: inline-block;
24
25 @include peertube-button;
26 @include orange-button;
27 @include disable-default-a-behaviour;
28}
diff --git a/client/src/app/modal/quick-settings-modal.component.scss b/client/src/app/modal/quick-settings-modal.component.scss
deleted file mode 100644
index b0e256744..000000000
--- a/client/src/app/modal/quick-settings-modal.component.scss
+++ /dev/null
@@ -1,24 +0,0 @@
1@import '_mixins';
2
3.modal-button {
4 @include disable-default-a-behaviour;
5 transform: translateY(2px);
6
7 button {
8 @include peertube-button;
9 @include grey-button;
10 @include button-with-icon(18px, 4px, -1px);
11
12 my-global-icon {
13 @include apply-svg-color(#585858);
14 }
15 }
16
17 & + .modal-button {
18 margin-left: 1rem;
19 }
20}
21
22.quick-settings-title {
23 @include in-content-small-title;
24}
diff --git a/client/src/app/modal/quick-settings-modal.component.ts b/client/src/app/modal/quick-settings-modal.component.ts
index 95726ab63..99859a1a5 100644
--- a/client/src/app/modal/quick-settings-modal.component.ts
+++ b/client/src/app/modal/quick-settings-modal.component.ts
@@ -8,8 +8,7 @@ import { NgbModalRef } from '@ng-bootstrap/ng-bootstrap/modal/modal-ref'
8 8
9@Component({ 9@Component({
10 selector: 'my-quick-settings', 10 selector: 'my-quick-settings',
11 templateUrl: './quick-settings-modal.component.html', 11 templateUrl: './quick-settings-modal.component.html'
12 styleUrls: [ './quick-settings-modal.component.scss' ]
13}) 12})
14export class QuickSettingsModalComponent extends FormReactive implements OnInit { 13export class QuickSettingsModalComponent extends FormReactive implements OnInit {
15 @ViewChild('modal', { static: true }) modal: NgbModal 14 @ViewChild('modal', { static: true }) modal: NgbModal
diff --git a/client/src/app/modal/welcome-modal.component.html b/client/src/app/modal/welcome-modal.component.html
index 19bf3a1ea..f5d2b8799 100644
--- a/client/src/app/modal/welcome-modal.component.html
+++ b/client/src/app/modal/welcome-modal.component.html
@@ -71,12 +71,12 @@
71 71
72 <div class="modal-footer inputs"> 72 <div class="modal-footer inputs">
73 <input 73 <input
74 type="button" role="button" i18n-value value="Remind me later" class="action-button action-button-understood" 74 type="button" role="button" i18n-value value="Remind me later" class="peertube-button grey-button"
75 (click)="hide()" (key.enter)="hide()" 75 (click)="hide()" (key.enter)="hide()"
76 > 76 >
77 77
78 <a i18n (click)="doNotOpenAgain(); hide()" (key.enter)="doNotOpenAgain(); hide()" 78 <a i18n (click)="doNotOpenAgain(); hide()" (key.enter)="doNotOpenAgain(); hide()"
79 class="configure-instance-button" href="/admin/config/edit-custom" target="_blank" 79 class="peertube-button-link orange-button" href="/admin/config/edit-custom" target="_blank"
80 rel="noopener noreferrer" ngbAutofocus> 80 rel="noopener noreferrer" ngbAutofocus>
81 Configure my instance 81 Configure my instance
82 </a> 82 </a>
diff --git a/client/src/app/modal/welcome-modal.component.scss b/client/src/app/modal/welcome-modal.component.scss
index a93dbcef9..28d5dc49c 100644
--- a/client/src/app/modal/welcome-modal.component.scss
+++ b/client/src/app/modal/welcome-modal.component.scss
@@ -47,43 +47,30 @@ li {
47 47
48.columns { 48.columns {
49 display: flex; 49 display: flex;
50}
50 51
51 .link-block { 52.link-block {
52 @include disable-default-a-behaviour; 53 @include disable-default-a-behaviour;
53
54 color: pvar(--mainForegroundColor);
55 padding: 10px;
56 transition: background-color 0.2s ease-in;
57 flex-basis: 33%;
58
59 &:hover {
60 background-color: rgba(0, 0, 0, 0.05);
61 }
62 54
63 .link-title { 55 color: pvar(--mainForegroundColor);
64 font-size: 16px; 56 padding: 10px;
65 font-weight: $font-semibold; 57 transition: background-color 0.2s ease-in;
66 display: flex; 58 flex-basis: 33%;
67 justify-content: center;
68 margin-bottom: 5px;
69 }
70 59
71 .link-title, 60 &:hover {
72 div { 61 background-color: rgba(0, 0, 0, 0.05);
73 text-align: center;
74 }
75 } 62 }
76}
77 63
78.configure-instance-button { 64 .link-title {
79 @include peertube-button; 65 font-size: 16px;
80 @include orange-button; 66 font-weight: $font-semibold;
81 @include disable-default-a-behaviour; 67 display: flex;
82 68 justify-content: center;
83 display: inline-block; 69 margin-bottom: 5px;
84} 70 }
85 71
86.action-button-understood { 72 .link-title,
87 @include peertube-button; 73 div {
88 @include grey-button; 74 text-align: center;
75 }
89} 76}