diff options
author | Chocobozzz <me@florianbigard.com> | 2022-06-08 16:14:24 +0200 |
---|---|---|
committer | Chocobozzz <me@florianbigard.com> | 2022-06-10 09:21:00 +0200 |
commit | 4c8749cb9e1e4a8d61697434e372f342def7bc70 (patch) | |
tree | 0e1b64d119b5077113163e147b711d8db5c6dd7e /client/src/app/+admin/overview | |
parent | b89b0bfce9bb79d81f9761b07b04d0c4e5aa25c1 (diff) | |
download | PeerTube-4c8749cb9e1e4a8d61697434e372f342def7bc70.tar.gz PeerTube-4c8749cb9e1e4a8d61697434e372f342def7bc70.tar.zst PeerTube-4c8749cb9e1e4a8d61697434e372f342def7bc70.zip |
Migrate to bootstrap 5
Diffstat (limited to 'client/src/app/+admin/overview')
9 files changed, 155 insertions, 172 deletions
diff --git a/client/src/app/+admin/overview/comments/video-comment-list.component.html b/client/src/app/+admin/overview/comments/video-comment-list.component.html index 27a5d82ff..6fdefbfe2 100644 --- a/client/src/app/+admin/overview/comments/video-comment-list.component.html +++ b/client/src/app/+admin/overview/comments/video-comment-list.component.html | |||
@@ -25,7 +25,7 @@ | |||
25 | </my-action-dropdown> | 25 | </my-action-dropdown> |
26 | </div> | 26 | </div> |
27 | 27 | ||
28 | <div class="ml-auto right-form"> | 28 | <div class="ms-auto right-form"> |
29 | <my-advanced-input-filter [filters]="inputFilters" (search)="onSearch($event)"></my-advanced-input-filter> | 29 | <my-advanced-input-filter [filters]="inputFilters" (search)="onSearch($event)"></my-advanced-input-filter> |
30 | 30 | ||
31 | <my-button i18n-label label="Refresh" icon="refresh" (click)="reloadData()"></my-button> | 31 | <my-button i18n-label label="Refresh" icon="refresh" (click)="reloadData()"></my-button> |
diff --git a/client/src/app/+admin/overview/users/user-edit/user-edit.component.html b/client/src/app/+admin/overview/users/user-edit/user-edit.component.html index 772ebf272..7e0eaf280 100644 --- a/client/src/app/+admin/overview/users/user-edit/user-edit.component.html +++ b/client/src/app/+admin/overview/users/user-edit/user-edit.component.html | |||
@@ -57,7 +57,7 @@ | |||
57 | </div> | 57 | </div> |
58 | </ng-template> | 58 | </ng-template> |
59 | 59 | ||
60 | <div class="form-row" *ngIf="!isInBigView()"> <!-- hidden on large screens, as it is then displayed on the right side of the form --> | 60 | <div class="row d-xxl-none"> <!-- hidden on large screens, as it is then displayed on the right side of the form --> |
61 | <div class="col-12 col-xl-3"></div> | 61 | <div class="col-12 col-xl-3"></div> |
62 | 62 | ||
63 | <div class="col-12 col-xl-9"> | 63 | <div class="col-12 col-xl-9"> |
@@ -67,8 +67,8 @@ | |||
67 | 67 | ||
68 | <div *ngIf="error" class="alert alert-danger">{{ error }}</div> | 68 | <div *ngIf="error" class="alert alert-danger">{{ error }}</div> |
69 | 69 | ||
70 | <div class="form-row mt-4"> <!-- user grid --> | 70 | <div class="row mt-4"> <!-- user grid --> |
71 | <div class="form-group col-12 col-lg-4 col-xl-3"> | 71 | <div class="col-12 col-lg-4 col-xl-3"> |
72 | <div class="anchor" id="user"></div> <!-- user anchor --> | 72 | <div class="anchor" id="user"></div> <!-- user anchor --> |
73 | <div *ngIf="isCreation()" class="account-title" i18n>NEW USER</div> | 73 | <div *ngIf="isCreation()" class="account-title" i18n>NEW USER</div> |
74 | <div *ngIf="!isCreation() && user" class="account-title"> | 74 | <div *ngIf="!isCreation() && user" class="account-title"> |
@@ -76,150 +76,150 @@ | |||
76 | </div> | 76 | </div> |
77 | </div> | 77 | </div> |
78 | 78 | ||
79 | <div class="form-group col-12 col-lg-8 col-xl-9" [ngClass]="{ 'form-row': isInBigView() }"> | 79 | <div class="col-12 col-lg-8 col-xl-9"> |
80 | 80 | <div class="row"> | |
81 | <form role="form" (ngSubmit)="formValidated()" [formGroup]="form" [ngClass]="{ 'col-5': isInBigView() }"> | 81 | <form class="col" role="form" (ngSubmit)="formValidated()" [formGroup]="form"> |
82 | <div class="form-group" *ngIf="isCreation()"> | 82 | <div class="form-group" *ngIf="isCreation()"> |
83 | <label i18n for="username">Username</label> | 83 | <label i18n for="username">Username</label> |
84 | <input | 84 | <input |
85 | type="text" id="username" i18n-placeholder placeholder="john" class="form-control" | 85 | type="text" id="username" i18n-placeholder placeholder="john" class="form-control" |
86 | formControlName="username" [ngClass]="{ 'input-error': formErrors['username'] }" | 86 | formControlName="username" [ngClass]="{ 'input-error': formErrors['username'] }" |
87 | > | 87 | > |
88 | <div *ngIf="formErrors.username" class="form-error"> | 88 | <div *ngIf="formErrors.username" class="form-error"> |
89 | {{ formErrors.username }} | 89 | {{ formErrors.username }} |
90 | </div> | ||
90 | </div> | 91 | </div> |
91 | </div> | ||
92 | 92 | ||
93 | <div class="form-group" *ngIf="isCreation()"> | 93 | <div class="form-group" *ngIf="isCreation()"> |
94 | <label i18n for="channelName">Channel name</label> | 94 | <label i18n for="channelName">Channel name</label> |
95 | <input | 95 | <input |
96 | type="text" id="channelName" i18n-placeholder placeholder="john_channel" class="form-control" | 96 | type="text" id="channelName" i18n-placeholder placeholder="john_channel" class="form-control" |
97 | formControlName="channelName" [ngClass]="{ 'input-error': formErrors['channelName'] }" | 97 | formControlName="channelName" [ngClass]="{ 'input-error': formErrors['channelName'] }" |
98 | > | 98 | > |
99 | <div *ngIf="formErrors.channelName" class="form-error"> | 99 | <div *ngIf="formErrors.channelName" class="form-error"> |
100 | {{ formErrors.channelName }} | 100 | {{ formErrors.channelName }} |
101 | </div> | ||
101 | </div> | 102 | </div> |
102 | </div> | ||
103 | 103 | ||
104 | <div class="form-group"> | 104 | <div class="form-group"> |
105 | <label i18n for="email">Email</label> | 105 | <label i18n for="email">Email</label> |
106 | <input | 106 | <input |
107 | type="text" id="email" i18n-placeholder placeholder="mail@example.com" class="form-control" | 107 | type="text" id="email" i18n-placeholder placeholder="mail@example.com" class="form-control" |
108 | formControlName="email" [ngClass]="{ 'input-error': formErrors['email'] }" | 108 | formControlName="email" [ngClass]="{ 'input-error': formErrors['email'] }" |
109 | autocomplete="off" [readonly]="user && user.pluginAuth !== null" | 109 | autocomplete="off" [readonly]="user && user.pluginAuth !== null" |
110 | > | 110 | > |
111 | <div *ngIf="formErrors.email" class="form-error"> | 111 | <div *ngIf="formErrors.email" class="form-error"> |
112 | {{ formErrors.email }} | 112 | {{ formErrors.email }} |
113 | </div> | ||
113 | </div> | 114 | </div> |
114 | </div> | ||
115 | 115 | ||
116 | <div class="form-group" *ngIf="isCreation()"> | 116 | <div class="form-group" *ngIf="isCreation()"> |
117 | <label i18n for="password">Password</label> | 117 | <label i18n for="password">Password</label> |
118 | <my-help *ngIf="isPasswordOptional()"> | 118 | <my-help *ngIf="isPasswordOptional()"> |
119 | <ng-template ptTemplate="customHtml"> | 119 | <ng-template ptTemplate="customHtml"> |
120 | <ng-container i18n> | 120 | <ng-container i18n> |
121 | If you leave the password empty, an email will be sent to the user. | 121 | If you leave the password empty, an email will be sent to the user. |
122 | </ng-container> | 122 | </ng-container> |
123 | </ng-template> | 123 | </ng-template> |
124 | </my-help> | 124 | </my-help> |
125 | 125 | ||
126 | <my-input-toggle-hidden | 126 | <my-input-toggle-hidden |
127 | formControlName="password" inputId="password" [ngClass]="{ 'input-error': formErrors['password'] }" autocomplete="new-password" | 127 | formControlName="password" inputId="password" [ngClass]="{ 'input-error': formErrors['password'] }" autocomplete="new-password" |
128 | ></my-input-toggle-hidden> | 128 | ></my-input-toggle-hidden> |
129 | 129 | ||
130 | <div *ngIf="formErrors.password" class="form-error"> | 130 | <div *ngIf="formErrors.password" class="form-error"> |
131 | {{ formErrors.password }} | 131 | {{ formErrors.password }} |
132 | </div> | ||
132 | </div> | 133 | </div> |
133 | </div> | ||
134 | 134 | ||
135 | <div class="form-group"> | 135 | <div class="form-group"> |
136 | <label i18n for="role">Role</label> | 136 | <label i18n for="role">Role</label> |
137 | <div class="peertube-select-container"> | 137 | <div class="peertube-select-container"> |
138 | <select id="role" formControlName="role" class="form-control"> | 138 | <select id="role" formControlName="role" class="form-control"> |
139 | <option *ngFor="let role of roles" [value]="role.value"> | 139 | <option *ngFor="let role of roles" [value]="role.value"> |
140 | {{ role.label }} | 140 | {{ role.label }} |
141 | </option> | 141 | </option> |
142 | </select> | 142 | </select> |
143 | </div> | ||
144 | |||
145 | <div *ngIf="formErrors.role" class="form-error"> | ||
146 | {{ formErrors.role }} | ||
147 | </div> | ||
143 | </div> | 148 | </div> |
144 | 149 | ||
145 | <div *ngIf="formErrors.role" class="form-error"> | 150 | <div class="form-group"> |
146 | {{ formErrors.role }} | 151 | <label i18n for="videoQuota">Video quota</label> |
152 | |||
153 | <my-select-custom-value | ||
154 | id="videoQuota" | ||
155 | [items]="videoQuotaOptions" | ||
156 | formControlName="videoQuota" | ||
157 | i18n-inputSuffix inputSuffix="bytes" inputType="number" | ||
158 | [clearable]="false" | ||
159 | ></my-select-custom-value> | ||
160 | |||
161 | <div i18n class="transcoding-information" *ngIf="isTranscodingInformationDisplayed()"> | ||
162 | Transcoding is enabled. The video quota only takes into account <strong>original</strong> video size. <br /> | ||
163 | At most, this user could upload ~ {{ computeQuotaWithTranscoding() | bytes: 0 }}. | ||
164 | </div> | ||
165 | |||
166 | <div *ngIf="formErrors.videoQuota" class="form-error"> | ||
167 | {{ formErrors.videoQuota }} | ||
168 | </div> | ||
147 | </div> | 169 | </div> |
148 | </div> | ||
149 | 170 | ||
150 | <div class="form-group"> | 171 | <div class="form-group"> |
151 | <label i18n for="videoQuota">Video quota</label> | 172 | <label i18n for="videoQuotaDaily">Daily video quota</label> |
152 | |||
153 | <my-select-custom-value | ||
154 | id="videoQuota" | ||
155 | [items]="videoQuotaOptions" | ||
156 | formControlName="videoQuota" | ||
157 | i18n-inputSuffix inputSuffix="bytes" inputType="number" | ||
158 | [clearable]="false" | ||
159 | ></my-select-custom-value> | ||
160 | |||
161 | <div i18n class="transcoding-information" *ngIf="isTranscodingInformationDisplayed()"> | ||
162 | Transcoding is enabled. The video quota only takes into account <strong>original</strong> video size. <br /> | ||
163 | At most, this user could upload ~ {{ computeQuotaWithTranscoding() | bytes: 0 }}. | ||
164 | </div> | ||
165 | 173 | ||
166 | <div *ngIf="formErrors.videoQuota" class="form-error"> | 174 | <my-select-custom-value |
167 | {{ formErrors.videoQuota }} | 175 | id="videoQuotaDaily" |
168 | </div> | 176 | [items]="videoQuotaDailyOptions" |
169 | </div> | 177 | formControlName="videoQuotaDaily" |
178 | i18n-inputSuffix inputSuffix="bytes" inputType="number" | ||
179 | [clearable]="false" | ||
180 | ></my-select-custom-value> | ||
170 | 181 | ||
171 | <div class="form-group"> | 182 | <div *ngIf="formErrors.videoQuotaDaily" class="form-error"> |
172 | <label i18n for="videoQuotaDaily">Daily video quota</label> | 183 | {{ formErrors.videoQuotaDaily }} |
173 | 184 | </div> | |
174 | <my-select-custom-value | ||
175 | id="videoQuotaDaily" | ||
176 | [items]="videoQuotaDailyOptions" | ||
177 | formControlName="videoQuotaDaily" | ||
178 | i18n-inputSuffix inputSuffix="bytes" inputType="number" | ||
179 | [clearable]="false" | ||
180 | ></my-select-custom-value> | ||
181 | |||
182 | <div *ngIf="formErrors.videoQuotaDaily" class="form-error"> | ||
183 | {{ formErrors.videoQuotaDaily }} | ||
184 | </div> | 185 | </div> |
185 | </div> | ||
186 | 186 | ||
187 | <div class="form-group" *ngIf="!isCreation() && getAuthPlugins().length !== 0"> | 187 | <div class="form-group" *ngIf="!isCreation() && getAuthPlugins().length !== 0"> |
188 | <label i18n for="pluginAuth">Auth plugin</label> | 188 | <label i18n for="pluginAuth">Auth plugin</label> |
189 | 189 | ||
190 | <div class="peertube-select-container"> | 190 | <div class="peertube-select-container"> |
191 | <select id="pluginAuth" formControlName="pluginAuth" class="form-control"> | 191 | <select id="pluginAuth" formControlName="pluginAuth" class="form-control"> |
192 | <option [value]="null" i18n>None (local authentication)</option> | 192 | <option [value]="null" i18n>None (local authentication)</option> |
193 | <option *ngFor="let authPlugin of getAuthPlugins()" [value]="authPlugin">{{ authPlugin }}</option> | 193 | <option *ngFor="let authPlugin of getAuthPlugins()" [value]="authPlugin">{{ authPlugin }}</option> |
194 | </select> | 194 | </select> |
195 | </div> | ||
195 | </div> | 196 | </div> |
196 | </div> | ||
197 | 197 | ||
198 | <div class="form-group"> | 198 | <div class="form-group"> |
199 | <my-peertube-checkbox | 199 | <my-peertube-checkbox |
200 | inputName="byPassAutoBlock" formControlName="byPassAutoBlock" | 200 | inputName="byPassAutoBlock" formControlName="byPassAutoBlock" |
201 | i18n-labelText labelText="Doesn't need review before a video goes public" | 201 | i18n-labelText labelText="Doesn't need review before a video goes public" |
202 | ></my-peertube-checkbox> | 202 | ></my-peertube-checkbox> |
203 | </div> | 203 | </div> |
204 | 204 | ||
205 | <input type="submit" value="{{ getFormButtonTitle() }}" [disabled]="!form.valid"> | 205 | <input type="submit" value="{{ getFormButtonTitle() }}" [disabled]="!form.valid"> |
206 | </form> | 206 | </form> |
207 | 207 | ||
208 | <div *ngIf="isInBigView()" class="col-7"> | 208 | <div class="d-none d-xxl-block col-7"> |
209 | <ng-template *ngTemplateOutlet="dashboard"></ng-template> | 209 | <ng-template *ngTemplateOutlet="dashboard"></ng-template> |
210 | </div> | ||
210 | </div> | 211 | </div> |
211 | |||
212 | </div> | 212 | </div> |
213 | </div> | 213 | </div> |
214 | 214 | ||
215 | 215 | ||
216 | <div *ngIf="!isCreation() && user && user.pluginAuth === null" class="form-row mt-4"> <!-- danger zone grid --> | 216 | <div *ngIf="!isCreation() && user && user.pluginAuth === null" class="row mt-4"> <!-- danger zone grid --> |
217 | <div class="form-group col-12 col-lg-4 col-xl-3"> | 217 | <div class="col-12 col-lg-4 col-xl-3"> |
218 | <div class="anchor" id="danger"></div> <!-- danger zone anchor --> | 218 | <div class="anchor" id="danger"></div> <!-- danger zone anchor --> |
219 | <div i18n class="account-title account-title-danger">DANGER ZONE</div> | 219 | <div i18n class="account-title account-title-danger">DANGER ZONE</div> |
220 | </div> | 220 | </div> |
221 | 221 | ||
222 | <div class="form-group col-12 col-lg-8 col-xl-9" [ngClass]="{ 'form-row': isInBigView() }"> | 222 | <div class="col-12 col-lg-8 col-xl-9"> |
223 | 223 | ||
224 | <div class="danger-zone"> | 224 | <div class="danger-zone"> |
225 | <div class="form-group reset-password-email"> | 225 | <div class="form-group reset-password-email"> |
diff --git a/client/src/app/+admin/overview/users/user-edit/user-edit.ts b/client/src/app/+admin/overview/users/user-edit/user-edit.ts index 069b62a53..395d07423 100644 --- a/client/src/app/+admin/overview/users/user-edit/user-edit.ts +++ b/client/src/app/+admin/overview/users/user-edit/user-edit.ts | |||
@@ -46,10 +46,6 @@ export abstract class UserEdit extends FormReactive implements OnInit { | |||
46 | .concat(this.serverConfig.plugin.registeredExternalAuths.map(p => p.npmName)) | 46 | .concat(this.serverConfig.plugin.registeredExternalAuths.map(p => p.npmName)) |
47 | } | 47 | } |
48 | 48 | ||
49 | isInBigView () { | ||
50 | return this.screenService.getWindowInnerWidth() > 1600 | ||
51 | } | ||
52 | |||
53 | buildRoles () { | 49 | buildRoles () { |
54 | const authUser = this.auth.getUser() | 50 | const authUser = this.auth.getUser() |
55 | 51 | ||
diff --git a/client/src/app/+admin/overview/users/user-edit/user-password.component.html b/client/src/app/+admin/overview/users/user-edit/user-password.component.html index 1238d1839..35f36e465 100644 --- a/client/src/app/+admin/overview/users/user-edit/user-password.component.html +++ b/client/src/app/+admin/overview/users/user-edit/user-password.component.html | |||
@@ -1,20 +1,16 @@ | |||
1 | <form role="form" (ngSubmit)="formValidated()" [formGroup]="form"> | 1 | <form role="form" (ngSubmit)="formValidated()" [formGroup]="form"> |
2 | <div class="form-group"> | 2 | <div class="input-group"> |
3 | <input id="password" [attr.type]="showPassword ? 'text' : 'password'" class="form-control" | ||
4 | formControlName="password" [ngClass]="{ 'input-error': formErrors['password'] }" | ||
5 | > | ||
6 | <button class="btn btn-sm btn-outline-secondary" (click)="togglePasswordVisibility()" type="button"> | ||
7 | <ng-container *ngIf="!showPassword" i18n>Show</ng-container> | ||
8 | <ng-container *ngIf="!!showPassword" i18n>Hide</ng-container> | ||
9 | </button> | ||
10 | </div> | ||
3 | 11 | ||
4 | <div class="input-group"> | 12 | <div *ngIf="formErrors.password" class="form-error"> |
5 | <input id="password" [attr.type]="showPassword ? 'text' : 'password'" class="form-control" | 13 | {{ formErrors.password }} |
6 | formControlName="password" [ngClass]="{ 'input-error': formErrors['password'] }" | ||
7 | > | ||
8 | <div class="input-group-append"> | ||
9 | <button class="btn btn-sm btn-outline-secondary" (click)="togglePasswordVisibility()" type="button"> | ||
10 | <ng-container *ngIf="!showPassword" i18n>Show</ng-container> | ||
11 | <ng-container *ngIf="!!showPassword" i18n>Hide</ng-container> | ||
12 | </button> | ||
13 | </div> | ||
14 | </div> | ||
15 | <div *ngIf="formErrors.password" class="form-error"> | ||
16 | {{ formErrors.password }} | ||
17 | </div> | ||
18 | </div> | 14 | </div> |
19 | 15 | ||
20 | <input type="submit" value="{{ getFormButtonTitle() }}" [disabled]="!form.valid"> | 16 | <input type="submit" value="{{ getFormButtonTitle() }}" [disabled]="!form.valid"> |
diff --git a/client/src/app/+admin/overview/users/user-edit/user-password.component.scss b/client/src/app/+admin/overview/users/user-edit/user-password.component.scss index acb680682..54f782086 100644 --- a/client/src/app/+admin/overview/users/user-edit/user-password.component.scss +++ b/client/src/app/+admin/overview/users/user-edit/user-password.component.scss | |||
@@ -1,13 +1,9 @@ | |||
1 | @use '_variables' as *; | 1 | @use '_variables' as *; |
2 | @use '_mixins' as *; | 2 | @use '_mixins' as *; |
3 | 3 | ||
4 | input:not([type=submit]):not([type=checkbox]) { | 4 | input[type=text], |
5 | input[type=password] { | ||
5 | @include peertube-input-text(340px); | 6 | @include peertube-input-text(340px); |
6 | |||
7 | display: block; | ||
8 | border-top-right-radius: 0; | ||
9 | border-bottom-right-radius: 0; | ||
10 | border-right: 0; | ||
11 | } | 7 | } |
12 | 8 | ||
13 | input[type=submit] { | 9 | input[type=submit] { |
@@ -17,7 +13,3 @@ input[type=submit] { | |||
17 | 13 | ||
18 | margin-top: 10px; | 14 | margin-top: 10px; |
19 | } | 15 | } |
20 | |||
21 | .input-group-append { | ||
22 | height: 30px; | ||
23 | } | ||
diff --git a/client/src/app/+admin/overview/users/user-list/user-list.component.html b/client/src/app/+admin/overview/users/user-list/user-list.component.html index 62eeef8fe..f6915ae9a 100644 --- a/client/src/app/+admin/overview/users/user-list/user-list.component.html +++ b/client/src/app/+admin/overview/users/user-list/user-list.component.html | |||
@@ -26,7 +26,7 @@ | |||
26 | </a> | 26 | </a> |
27 | </div> | 27 | </div> |
28 | 28 | ||
29 | <div class="ml-auto"> | 29 | <div class="ms-auto"> |
30 | <my-advanced-input-filter [filters]="inputFilters" (search)="onSearch($event)"></my-advanced-input-filter> | 30 | <my-advanced-input-filter [filters]="inputFilters" (search)="onSearch($event)"></my-advanced-input-filter> |
31 | </div> | 31 | </div> |
32 | 32 | ||
@@ -90,7 +90,7 @@ | |||
90 | </my-user-moderation-dropdown> | 90 | </my-user-moderation-dropdown> |
91 | </td> | 91 | </td> |
92 | 92 | ||
93 | <td *ngIf="isSelected('username')"> | 93 | <td *ngIf="isSelected('username')" class="cell-username"> |
94 | <a i18n-title title="Open account in a new tab" target="_blank" rel="noopener noreferrer" [routerLink]="[ '/a/' + user.username ]"> | 94 | <a i18n-title title="Open account in a new tab" target="_blank" rel="noopener noreferrer" [routerLink]="[ '/a/' + user.username ]"> |
95 | <div class="chip two-lines"> | 95 | <div class="chip two-lines"> |
96 | <my-actor-avatar [account]="user?.account" size="32"></my-actor-avatar> | 96 | <my-actor-avatar [account]="user?.account" size="32"></my-actor-avatar> |
@@ -101,13 +101,13 @@ | |||
101 | </div> | 101 | </div> |
102 | </a> | 102 | </a> |
103 | 103 | ||
104 | <div *ngIf="user.accountMutedStatus.mutedByInstance" class="badges-username badge badge-red" i18n>Muted</div> | 104 | <div *ngIf="user.accountMutedStatus.mutedByInstance" class="pt-badge badge-red" i18n>Muted</div> |
105 | <div *ngIf="user.blocked" class="badges-username badge badge-red" i18n>Banned</div> | 105 | <div *ngIf="user.blocked" class="pt-badge badge-red" i18n>Banned</div> |
106 | </td> | 106 | </td> |
107 | 107 | ||
108 | <td *ngIf="isSelected('role')"> | 108 | <td *ngIf="isSelected('role')"> |
109 | <span *ngIf="user.blocked" class="badge badge-banned" i18n-title title="The user was banned">{{ user.roleLabel }}</span> | 109 | <span *ngIf="user.blocked" class="pt-badge badge-banned" i18n-title title="The user was banned">{{ user.roleLabel }}</span> |
110 | <span *ngIf="!user.blocked" class="badge" [ngClass]="getRoleClass(user.role)">{{ user.roleLabel }}</span> | 110 | <span *ngIf="!user.blocked" class="pt-badge" [ngClass]="getRoleClass(user.role)">{{ user.roleLabel }}</span> |
111 | </td> | 111 | </td> |
112 | 112 | ||
113 | <td *ngIf="isSelected('email')" [title]="user.email"> | 113 | <td *ngIf="isSelected('email')" [title]="user.email"> |
diff --git a/client/src/app/+admin/overview/users/user-list/user-list.component.scss b/client/src/app/+admin/overview/users/user-list/user-list.component.scss index 8160703f0..6449f5064 100644 --- a/client/src/app/+admin/overview/users/user-list/user-list.component.scss +++ b/client/src/app/+admin/overview/users/user-list/user-list.component.scss | |||
@@ -1,5 +1,6 @@ | |||
1 | @use '_variables' as *; | 1 | @use '_variables' as *; |
2 | @use '_mixins' as *; | 2 | @use '_mixins' as *; |
3 | @use '~bootstrap/scss/functions' as *; | ||
3 | 4 | ||
4 | .add-button { | 5 | .add-button { |
5 | @include create-button; | 6 | @include create-button; |
@@ -23,8 +24,8 @@ tr.banned > td { | |||
23 | font-weight: $font-semibold; | 24 | font-weight: $font-semibold; |
24 | } | 25 | } |
25 | 26 | ||
26 | .badges-username { | 27 | .cell-username .pt-badge { |
27 | margin-left: 15px; | 28 | @include margin-left(15px); |
28 | } | 29 | } |
29 | 30 | ||
30 | .user-table-primary-text .glyphicon { | 31 | .user-table-primary-text .glyphicon { |
diff --git a/client/src/app/+admin/overview/videos/video-list.component.html b/client/src/app/+admin/overview/videos/video-list.component.html index 75d9be5f1..2f36c27b7 100644 --- a/client/src/app/+admin/overview/videos/video-list.component.html +++ b/client/src/app/+admin/overview/videos/video-list.component.html | |||
@@ -21,7 +21,7 @@ | |||
21 | </my-action-dropdown> | 21 | </my-action-dropdown> |
22 | </div> | 22 | </div> |
23 | 23 | ||
24 | <div class="ml-auto right-form"> | 24 | <div class="ms-auto right-form"> |
25 | <my-advanced-input-filter [filters]="inputFilters" (search)="onSearch($event)"></my-advanced-input-filter> | 25 | <my-advanced-input-filter [filters]="inputFilters" (search)="onSearch($event)"></my-advanced-input-filter> |
26 | 26 | ||
27 | <my-button i18n-label label="Refresh" icon="refresh" (click)="reloadData()"></my-button> | 27 | <my-button i18n-label label="Refresh" icon="refresh" (click)="reloadData()"></my-button> |
@@ -67,25 +67,25 @@ | |||
67 | </td> | 67 | </td> |
68 | 68 | ||
69 | <td> | 69 | <td> |
70 | <span class="badge badge-blue" *ngIf="video.isLocal">Local</span> | 70 | <span class="pt-badge badge-blue" *ngIf="video.isLocal">Local</span> |
71 | <span class="badge badge-purple" *ngIf="!video.isLocal">Remote</span> | 71 | <span class="pt-badge badge-purple" *ngIf="!video.isLocal">Remote</span> |
72 | 72 | ||
73 | <span [ngClass]="getPrivacyBadgeClass(video)" class="badge">{{ video.privacy.label }}</span> | 73 | <span [ngClass]="getPrivacyBadgeClass(video)" class="pt-badge">{{ video.privacy.label }}</span> |
74 | 74 | ||
75 | <span *ngIf="video.nsfw" class="badge badge-red" i18n>NSFW</span> | 75 | <span *ngIf="video.nsfw" class="pt-badge badge-red" i18n>NSFW</span> |
76 | 76 | ||
77 | <span *ngIf="isUnpublished(video)" class="badge badge-yellow" i18n>{{ video.state.label }}</span> | 77 | <span *ngIf="isUnpublished(video)" class="pt-badge badge-yellow" i18n>{{ video.state.label }}</span> |
78 | 78 | ||
79 | <span *ngIf="isAccountBlocked(video)" class="badge badge-red" i18n>Account muted</span> | 79 | <span *ngIf="isAccountBlocked(video)" class="pt-badge badge-red" i18n>Account muted</span> |
80 | <span *ngIf="isServerBlocked(video)" class="badge badge-red" i18n>Server muted</span> | 80 | <span *ngIf="isServerBlocked(video)" class="pt-badge badge-red" i18n>Server muted</span> |
81 | 81 | ||
82 | <span *ngIf="isVideoBlocked(video)" class="badge badge-red" i18n>Blocked</span> | 82 | <span *ngIf="isVideoBlocked(video)" class="pt-badge badge-red" i18n>Blocked</span> |
83 | </td> | 83 | </td> |
84 | 84 | ||
85 | <td> | 85 | <td> |
86 | <span *ngIf="isHLS(video)" class="badge badge-blue">HLS</span> | 86 | <span *ngIf="isHLS(video)" class="pt-badge badge-blue">HLS</span> |
87 | <span *ngIf="isWebTorrent(video)" class="badge badge-blue">WebTorrent ({{ video.files.length }})</span> | 87 | <span *ngIf="isWebTorrent(video)" class="pt-badge badge-blue">WebTorrent ({{ video.files.length }})</span> |
88 | <span *ngIf="video.isLive" class="badge badge-blue">Live</span> | 88 | <span *ngIf="video.isLive" class="pt-badge badge-blue">Live</span> |
89 | 89 | ||
90 | <span *ngIf="!isImport(video) && !video.isLive && video.isLocal">{{ getFilesSize(video) | bytes: 1 }}</span> | 90 | <span *ngIf="!isImport(video) && !video.isLive && video.isLocal">{{ getFilesSize(video) | bytes: 1 }}</span> |
91 | </td> | 91 | </td> |
@@ -121,7 +121,7 @@ | |||
121 | </ul> | 121 | </ul> |
122 | </div> | 122 | </div> |
123 | 123 | ||
124 | <my-embed class="ml-auto" [video]="video"></my-embed> | 124 | <my-embed class="ms-auto" [video]="video"></my-embed> |
125 | </div> | 125 | </div> |
126 | </td> | 126 | </td> |
127 | </tr> | 127 | </tr> |
diff --git a/client/src/app/+admin/overview/videos/video-list.component.scss b/client/src/app/+admin/overview/videos/video-list.component.scss index cb47b6548..dcd41a1b4 100644 --- a/client/src/app/+admin/overview/videos/video-list.component.scss +++ b/client/src/app/+admin/overview/videos/video-list.component.scss | |||
@@ -7,10 +7,8 @@ my-embed { | |||
7 | width: 50%; | 7 | width: 50%; |
8 | } | 8 | } |
9 | 9 | ||
10 | .badge { | 10 | .pt-badge { |
11 | @include peertube-badge; | 11 | @include margin-right(5px); |
12 | |||
13 | margin-right: 5px; | ||
14 | } | 12 | } |
15 | 13 | ||
16 | .video-info > div { | 14 | .video-info > div { |