aboutsummaryrefslogtreecommitdiffhomepage
path: root/client
diff options
context:
space:
mode:
authorRigel Kent <sendmemail@rigelk.eu>2020-03-08 17:33:40 +0100
committerChocobozzz <chocobozzz@cpy.re>2020-03-10 16:23:40 +0100
commit482fa503e545e00252e25eee7b3e0f7d421cf9d4 (patch)
tree4aa27a683656ced173fe48b914cfd7d65b289717 /client
parent3b20bdd6dc7402b0723e038c57f0606131e20e54 (diff)
downloadPeerTube-482fa503e545e00252e25eee7b3e0f7d421cf9d4.tar.gz
PeerTube-482fa503e545e00252e25eee7b3e0f7d421cf9d4.tar.zst
PeerTube-482fa503e545e00252e25eee7b3e0f7d421cf9d4.zip
Use grid to organise settings in admin, my-account
Diffstat (limited to 'client')
-rw-r--r--client/src/app/+about/about.component.html6
-rw-r--r--client/src/app/+admin/admin.component.html2
-rw-r--r--client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html1158
-rw-r--r--client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.scss43
-rw-r--r--client/src/app/+admin/plugins/shared/toggle-plugin-type.scss14
-rw-r--r--client/src/app/+my-account/my-account-settings/my-account-change-email/my-account-change-email.component.scss7
-rw-r--r--client/src/app/+my-account/my-account-settings/my-account-change-password/my-account-change-password.component.scss5
-rw-r--r--client/src/app/+my-account/my-account-settings/my-account-danger-zone/my-account-danger-zone.component.html2
-rw-r--r--client/src/app/+my-account/my-account-settings/my-account-interface/my-account-interface-settings.component.scss5
-rw-r--r--client/src/app/+my-account/my-account-settings/my-account-profile/my-account-profile.component.html2
-rw-r--r--client/src/app/+my-account/my-account-settings/my-account-profile/my-account-profile.component.scss16
-rw-r--r--client/src/app/+my-account/my-account-settings/my-account-settings.component.html93
-rw-r--r--client/src/app/+my-account/my-account-settings/my-account-settings.component.scss8
-rw-r--r--client/src/app/+my-account/my-account-settings/my-account-video-settings/my-account-video-settings.component.scss5
-rw-r--r--client/src/app/+my-account/shared/actor-avatar-info.component.ts2
-rw-r--r--client/src/app/shared/forms/markdown-textarea.component.scss2
-rw-r--r--client/src/app/shared/menu/top-menu-dropdown.component.html4
-rw-r--r--client/src/sass/application.scss10
-rw-r--r--client/src/sass/bootstrap.scss2
-rw-r--r--client/src/sass/include/_mixins.scss8
20 files changed, 808 insertions, 586 deletions
diff --git a/client/src/app/+about/about.component.html b/client/src/app/+about/about.component.html
index 0c4a5156d..da16b933d 100644
--- a/client/src/app/+about/about.component.html
+++ b/client/src/app/+about/about.component.html
@@ -2,11 +2,11 @@
2 <div class="sub-menu"> 2 <div class="sub-menu">
3 3
4 <div class="links"> 4 <div class="links">
5 <a i18n routerLink="instance" routerLinkActive="active" class="title-page">Instance</a> 5 <a i18n routerLink="instance" routerLinkActive="active" class="title-page title-page-about">Instance</a>
6 6
7 <a i18n routerLink="peertube" routerLinkActive="active" class="title-page">PeerTube</a> 7 <a i18n routerLink="peertube" routerLinkActive="active" class="title-page title-page-about">PeerTube</a>
8 8
9 <a i18n routerLink="follows" routerLinkActive="active" class="title-page">Follows</a> 9 <a i18n routerLink="follows" routerLinkActive="active" class="title-page title-page-about">Follows</a>
10 </div> 10 </div>
11 </div> 11 </div>
12 12
diff --git a/client/src/app/+admin/admin.component.html b/client/src/app/+admin/admin.component.html
index 6c98fe453..76d297c52 100644
--- a/client/src/app/+admin/admin.component.html
+++ b/client/src/app/+admin/admin.component.html
@@ -1,7 +1,7 @@
1<div class="row"> 1<div class="row">
2 <div class="sub-menu"> 2 <div class="sub-menu">
3 <ng-template #linkTemplate let-item="item"> 3 <ng-template #linkTemplate let-item="item">
4 <a [routerLink]="item.routerLink" routerLinkActive="active" class="title-page">{{ item.label }}</a> 4 <a [routerLink]="item.routerLink" routerLinkActive="active" class="title-page title-page-settings">{{ item.label }}</a>
5 </ng-template> 5 </ng-template>
6 6
7 <list-overflow [items]="items" [itemTemplate]="linkTemplate"></list-overflow> 7 <list-overflow [items]="items" [itemTemplate]="linkTemplate"></list-overflow>
diff --git a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html
index 2cf0e5fd9..77e857d6b 100644
--- a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html
+++ b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html
@@ -7,185 +7,217 @@
7 7
8 <ng-container formGroupName="instance"> 8 <ng-container formGroupName="instance">
9 9
10 <div i18n class="inner-form-title">INSTANCE</div> 10 <div class="form-row mt-5"> <!-- instance grid -->
11 11 <div class="form-group col-12 col-lg-4 col-xl-3">
12 <div class="form-group"> 12 <div i18n class="inner-form-title">INSTANCE</div>
13 <label i18n for="instanceName">Name</label> 13 </div>
14 <input
15 type="text" id="instanceName"
16 formControlName="name" [ngClass]="{ 'input-error': formErrors.instance.name }"
17 >
18 <div *ngIf="formErrors.instance.name" class="form-error">{{ formErrors.instance.name }}</div>
19 </div>
20 14
21 <div class="form-group"> 15 <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
22 <label i18n for="instanceShortDescription">Short description</label>
23 <textarea
24 id="instanceShortDescription" formControlName="shortDescription" class="small"
25 [ngClass]="{ 'input-error': formErrors['instance.shortDescription'] }"
26 ></textarea>
27 <div *ngIf="formErrors.instance.shortDescription" class="form-error">{{ formErrors.instance.shortDescription }}</div>
28 </div>
29 16
30 <div class="form-group"> 17 <div class="form-group">
31 <label i18n for="instanceDescription">Description</label><my-help helpType="markdownText"></my-help> 18 <label i18n for="instanceName">Name</label>
32 <my-markdown-textarea 19 <input
33 name="instanceDescription" formControlName="description" textareaWidth="500px" [previewColumn]="true" 20 type="text" id="instanceName"
34 [classes]="{ 'input-error': formErrors['instance.description'] }" 21 formControlName="name" [ngClass]="{ 'input-error': formErrors.instance.name }"
35 ></my-markdown-textarea> 22 >
36 <div *ngIf="formErrors.instance.description" class="form-error">{{ formErrors.instance.description }}</div> 23 <div *ngIf="formErrors.instance.name" class="form-error">{{ formErrors.instance.name }}</div>
37 </div> 24 </div>
38 25
39 <div class="form-group"> 26 <div class="form-group">
40 <label i18n for="instanceCategories">Main instance categories</label> 27 <label i18n for="instanceShortDescription">Short description</label>
28 <textarea
29 id="instanceShortDescription" formControlName="shortDescription" class="small"
30 [ngClass]="{ 'input-error': formErrors['instance.shortDescription'] }"
31 ></textarea>
32 <div *ngIf="formErrors.instance.shortDescription" class="form-error">{{ formErrors.instance.shortDescription }}</div>
33 </div>
41 34
42 <div> 35 <div class="form-group">
43 <p-multiSelect 36 <label i18n for="instanceDescription">Description</label><my-help helpType="markdownText"></my-help>
44 inputId="instanceCategories" [options]="categoryItems" formControlName="categories" [showToggleAll]="false" 37 <my-markdown-textarea
45 [defaultLabel]="getDefaultCategoryLabel()" [selectedItemsLabel]="getSelectedCategoryLabel()" 38 name="instanceDescription" formControlName="description" textareaWidth="500px" [previewColumn]="true"
46 emptyFilterMessage="No results found" i18n-emptyFilterMessage 39 [classes]="{ 'input-error': formErrors['instance.description'] }"
47 ></p-multiSelect> 40 ></my-markdown-textarea>
48 </div> 41 <div *ngIf="formErrors.instance.description" class="form-error">{{ formErrors.instance.description }}</div>
49 </div> 42 </div>
50 43
51 <div class="form-group"> 44 <div class="form-group">
52 <label i18n for="instanceLanguages">Main languages you/your moderators speak</label> 45 <label i18n for="instanceCategories">Main instance categories</label>
46
47 <div>
48 <p-multiSelect
49 inputId="instanceCategories" [options]="categoryItems" formControlName="categories" [showToggleAll]="false"
50 [defaultLabel]="getDefaultCategoryLabel()" [selectedItemsLabel]="getSelectedCategoryLabel()"
51 emptyFilterMessage="No results found" i18n-emptyFilterMessage
52 ></p-multiSelect>
53 </div>
54 </div>
55
56 <div class="form-group">
57 <label i18n for="instanceLanguages">Main languages you/your moderators speak</label>
58
59 <div>
60 <p-multiSelect
61 inputId="instanceLanguages" [options]="languageItems" formControlName="languages" [showToggleAll]="false"
62 [defaultLabel]="getDefaultLanguageLabel()" [selectedItemsLabel]="getSelectedLanguageLabel()"
63 emptyFilterMessage="No results found" i18n-emptyFilterMessage
64 ></p-multiSelect>
65 </div>
66 </div>
53 67
54 <div>
55 <p-multiSelect
56 inputId="instanceLanguages" [options]="languageItems" formControlName="languages" [showToggleAll]="false"
57 [defaultLabel]="getDefaultLanguageLabel()" [selectedItemsLabel]="getSelectedLanguageLabel()"
58 emptyFilterMessage="No results found" i18n-emptyFilterMessage
59 ></p-multiSelect>
60 </div> 68 </div>
61 </div> 69 </div>
62 70
63 <div i18n class="inner-form-title">MODERATION & NSFW</div> 71 <div class="form-row mt-4"> <!-- moderation & nsfw grid -->
72 <div class="form-group col-12 col-lg-4 col-xl-3">
73 <div i18n class="inner-form-title">MODERATION & NSFW</div>
74 </div>
64 75
65 <div class="form-group"> 76 <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
66 <my-peertube-checkbox inputName="instanceIsNSFW" formControlName="isNSFW">
67 <ng-template ptTemplate="label">
68 <ng-container i18n>This instance is dedicated to sensitive or NSFW content</ng-container>
69 </ng-template>
70 77
71 <ng-template ptTemplate="help"> 78 <div class="form-group">
72 <ng-container i18n> 79 <my-peertube-checkbox inputName="instanceIsNSFW" formControlName="isNSFW">
73 Enabling it will allow other administrators to know that you are mainly federating sensitive content.<br /><br /> 80 <ng-template ptTemplate="label">
74 Moreover, the NSFW checkbox on video upload will be automatically checked by default. 81 <ng-container i18n>This instance is dedicated to sensitive or NSFW content</ng-container>
75 </ng-container> 82 </ng-template>
76 </ng-template>
77 </my-peertube-checkbox>
78 </div>
79 83
80 <div class="form-group"> 84 <ng-template ptTemplate="help">
81 <label i18n for="instanceDefaultNSFWPolicy">Policy on videos containing sensitive content</label> 85 <ng-container i18n>
86 Enabling it will allow other administrators to know that you are mainly federating sensitive content.<br /><br />
87 Moreover, the NSFW checkbox on video upload will be automatically checked by default.
88 </ng-container>
89 </ng-template>
90 </my-peertube-checkbox>
91 </div>
82 92
83 <my-help> 93 <div class="form-group">
84 <ng-template ptTemplate="customHtml"> 94 <label i18n for="instanceDefaultNSFWPolicy">Policy on videos containing sensitive content</label>
85 <ng-container i18n>
86 With <strong>Do not list</strong> or <strong>Blur thumbnails</strong>, a confirmation will be requested to watch the video.
87 </ng-container>
88 </ng-template>
89 </my-help>
90
91 <div class="peertube-select-container">
92 <select id="instanceDefaultNSFWPolicy" formControlName="defaultNSFWPolicy">
93 <option i18n value="do_not_list">Do not list</option>
94 <option i18n value="blur">Blur thumbnails</option>
95 <option i18n value="display">Display</option>
96 </select>
97 </div>
98 <div *ngIf="formErrors.instance.defaultNSFWPolicy" class="form-error">{{ formErrors.instance.defaultNSFWPolicy }}</div>
99 </div>
100 95
101 <div class="form-group"> 96 <my-help>
102 <label i18n for="instanceTerms">Terms</label><my-help helpType="markdownText"></my-help> 97 <ng-template ptTemplate="customHtml">
103 <my-markdown-textarea 98 <ng-container i18n>
104 name="instanceTerms" formControlName="terms" textareaWidth="500px" [previewColumn]="true" 99 With <strong>Do not list</strong> or <strong>Blur thumbnails</strong>, a confirmation will be requested to watch the video.
105 [ngClass]="{ 'input-error': formErrors['instance.terms'] }" 100 </ng-container>
106 ></my-markdown-textarea> 101 </ng-template>
107 <div *ngIf="formErrors.instance.terms" class="form-error">{{ formErrors.instance.terms }}</div> 102 </my-help>
108 </div> 103
104 <div class="peertube-select-container">
105 <select id="instanceDefaultNSFWPolicy" formControlName="defaultNSFWPolicy">
106 <option i18n value="do_not_list">Do not list</option>
107 <option i18n value="blur">Blur thumbnails</option>
108 <option i18n value="display">Display</option>
109 </select>
110 </div>
111 <div *ngIf="formErrors.instance.defaultNSFWPolicy" class="form-error">{{ formErrors.instance.defaultNSFWPolicy }}</div>
112 </div>
109 113
110 <div class="form-group"> 114 <div class="form-group">
111 <label i18n for="instanceCodeOfConduct">Code of conduct</label><my-help helpType="markdownText"></my-help> 115 <label i18n for="instanceTerms">Terms</label><my-help helpType="markdownText"></my-help>
112 <my-markdown-textarea 116 <my-markdown-textarea
113 name="instanceCodeOfConduct" formControlName="codeOfConduct" textareaWidth="500px" [previewColumn]="true" 117 name="instanceTerms" formControlName="terms" textareaWidth="500px" [previewColumn]="true"
114 [ngClass]="{ 'input-error': formErrors['instance.codeOfConduct'] }" 118 [ngClass]="{ 'input-error': formErrors['instance.terms'] }"
115 ></my-markdown-textarea> 119 ></my-markdown-textarea>
116 <div *ngIf="formErrors.instance.codeOfConduct" class="form-error">{{ formErrors.instance.codeOfConduct }}</div> 120 <div *ngIf="formErrors.instance.terms" class="form-error">{{ formErrors.instance.terms }}</div>
117 </div> 121 </div>
118 122
119 <div class="form-group"> 123 <div class="form-group">
120 <label i18n for="instanceModerationInformation">Moderation information</label><my-help helpType="markdownText"></my-help> 124 <label i18n for="instanceCodeOfConduct">Code of conduct</label><my-help helpType="markdownText"></my-help>
121 <div i18n class="label-small-info">Who moderates the instance? What is the policy regarding NSFW videos? Political videos? etc</div> 125 <my-markdown-textarea
126 name="instanceCodeOfConduct" formControlName="codeOfConduct" textareaWidth="500px" [previewColumn]="true"
127 [ngClass]="{ 'input-error': formErrors['instance.codeOfConduct'] }"
128 ></my-markdown-textarea>
129 <div *ngIf="formErrors.instance.codeOfConduct" class="form-error">{{ formErrors.instance.codeOfConduct }}</div>
130 </div>
122 131
123 <my-markdown-textarea 132 <div class="form-group">
124 name="instanceModerationInformation" formControlName="moderationInformation" textareaWidth="500px" [previewColumn]="true" 133 <label i18n for="instanceModerationInformation">Moderation information</label><my-help helpType="markdownText"></my-help>
125 [ngClass]="{ 'input-error': formErrors['instance.moderationInformation'] }" 134 <div i18n class="label-small-info">Who moderates the instance? What is the policy regarding NSFW videos? Political videos? etc</div>
126 ></my-markdown-textarea> 135
127 <div *ngIf="formErrors.instance.moderationInformation" class="form-error">{{ formErrors.instance.moderationInformation }}</div> 136 <my-markdown-textarea
137 name="instanceModerationInformation" formControlName="moderationInformation" textareaWidth="500px" [previewColumn]="true"
138 [ngClass]="{ 'input-error': formErrors['instance.moderationInformation'] }"
139 ></my-markdown-textarea>
140 <div *ngIf="formErrors.instance.moderationInformation" class="form-error">{{ formErrors.instance.moderationInformation }}</div>
141 </div>
142
143 </div>
128 </div> 144 </div>
129 145
130 <div i18n class="inner-form-title">YOU AND YOUR INSTANCE</div> 146 <div class="form-row mt-4"> <!-- you and your instance grid -->
147 <div class="form-group col-12 col-lg-4 col-xl-3">
148 <div i18n class="inner-form-title">YOU AND YOUR INSTANCE</div>
149 </div>
131 150
132 <div class="form-group"> 151 <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
133 <label i18n for="instanceAdministrator">Who is behind the instance?</label>
134 <div i18n class="label-small-info">A single person? A non-profit? A company?</div>
135 152
136 <my-markdown-textarea 153 <div class="form-group">
137 name="instanceAdministrator" formControlName="administrator" textareaWidth="500px" textareaHeight="75px" [previewColumn]="true" 154 <label i18n for="instanceAdministrator">Who is behind the instance?</label>
138 [classes]="{ 'input-error': formErrors['instance.administrator'] }" 155 <div i18n class="label-small-info">A single person? A non-profit? A company?</div>
139 ></my-markdown-textarea>
140 156
141 <div *ngIf="formErrors.instance.administrator" class="form-error">{{ formErrors.instance.administrator }}</div> 157 <my-markdown-textarea
142 </div> 158 name="instanceAdministrator" formControlName="administrator" textareaWidth="500px" textareaHeight="75px" [previewColumn]="true"
159 [classes]="{ 'input-error': formErrors['instance.administrator'] }"
160 ></my-markdown-textarea>
143 161
144 <div class="form-group"> 162 <div *ngIf="formErrors.instance.administrator" class="form-error">{{ formErrors.instance.administrator }}</div>
145 <label i18n for="instanceCreationReason">Why did you create this instance?</label> 163 </div>
146 <div i18n class="label-small-info">To share your personal videos? To open registrations and allow people to upload what they want?</div>
147 164
148 <textarea 165 <div class="form-group">
149 id="instanceCreationReason" formControlName="creationReason" class="small" 166 <label i18n for="instanceCreationReason">Why did you create this instance?</label>
150 [ngClass]="{ 'input-error': formErrors['instance.creationReason'] }" 167 <div i18n class="label-small-info">To share your personal videos? To open registrations and allow people to upload what they want?</div>
151 ></textarea> 168
152 <div *ngIf="formErrors.instance.creationReason" class="form-error">{{ formErrors.instance.creationReason }}</div> 169 <textarea
153 </div> 170 id="instanceCreationReason" formControlName="creationReason" class="small"
171 [ngClass]="{ 'input-error': formErrors['instance.creationReason'] }"
172 ></textarea>
173 <div *ngIf="formErrors.instance.creationReason" class="form-error">{{ formErrors.instance.creationReason }}</div>
174 </div>
154 175
155 <div class="form-group"> 176 <div class="form-group">
156 <label i18n for="instanceMaintenanceLifetime">How long do you plan to maintain this instance?</label> 177 <label i18n for="instanceMaintenanceLifetime">How long do you plan to maintain this instance?</label>
157 <div i18n class="label-small-info">It's important to know for users who want to register on your instance</div> 178 <div i18n class="label-small-info">It's important to know for users who want to register on your instance</div>
179
180 <textarea
181 id="instanceMaintenanceLifetime" formControlName="maintenanceLifetime" class="small"
182 [ngClass]="{ 'input-error': formErrors['instance.maintenanceLifetime'] }"
183 ></textarea>
184 <div *ngIf="formErrors.instance.maintenanceLifetime" class="form-error">{{ formErrors.instance.maintenanceLifetime }}</div>
185 </div>
186
187 <div class="form-group">
188 <label i18n for="instanceBusinessModel">How will you finance the PeerTube server?</label>
189 <div i18n class="label-small-info">With your own funds? With user donations? Advertising?</div>
190
191 <textarea
192 id="instanceBusinessModel" formControlName="businessModel" class="small"
193 [ngClass]="{ 'input-error': formErrors['instance.businessModel'] }"
194 ></textarea>
195 <div *ngIf="formErrors.instance.businessModel" class="form-error">{{ formErrors.instance.businessModel }}</div>
196 </div>
158 197
159 <textarea 198 </div>
160 id="instanceMaintenanceLifetime" formControlName="maintenanceLifetime" class="small"
161 [ngClass]="{ 'input-error': formErrors['instance.maintenanceLifetime'] }"
162 ></textarea>
163 <div *ngIf="formErrors.instance.maintenanceLifetime" class="form-error">{{ formErrors.instance.maintenanceLifetime }}</div>
164 </div> 199 </div>
165 200
166 <div class="form-group"> 201 <div class="form-row mt-4"> <!-- other information grid -->
167 <label i18n for="instanceBusinessModel">How will you finance the PeerTube server?</label> 202 <div class="form-group col-12 col-lg-4 col-xl-3">
168 <div i18n class="label-small-info">With your own funds? With users donations? Advertising?</div> 203 <div i18n class="inner-form-title">OTHER INFORMATION</div>
204 </div>
169 205
170 <textarea 206 <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
171 id="instanceBusinessModel" formControlName="businessModel" class="small"
172 [ngClass]="{ 'input-error': formErrors['instance.businessModel'] }"
173 ></textarea>
174 <div *ngIf="formErrors.instance.businessModel" class="form-error">{{ formErrors.instance.businessModel }}</div>
175 </div>
176 207
177 <div i18n class="inner-form-title">OTHER INFORMATION</div> 208 <div class="form-group">
209 <label i18n for="instanceHardwareInformation">What server/hardware does the instance run on?</label>
210 <div i18n class="label-small-info">2vCore 2GB RAM/or directly the link to the server you rent etc</div>
178 211
179 <div class="form-group"> 212 <my-markdown-textarea
180 <label i18n for="instanceHardwareInformation">What server/hardware does the instance run on?</label> 213 name="instanceHardwareInformation" formControlName="hardwareInformation" textareaWidth="500px" textareaHeight="75px" [previewColumn]="true"
181 <div i18n class="label-small-info">2vCore 2GB RAM/or directly the link to the server you rent etc</div> 214 [classes]="{ 'input-error': formErrors['instance.hardwareInformation'] }"
215 ></my-markdown-textarea>
182 216
183 <my-markdown-textarea 217 <div *ngIf="formErrors.instance.hardwareInformation" class="form-error">{{ formErrors.instance.hardwareInformation }}</div>
184 name="instanceHardwareInformation" formControlName="hardwareInformation" textareaWidth="500px" textareaHeight="75px" [previewColumn]="true" 218 </div>
185 [classes]="{ 'input-error': formErrors['instance.hardwareInformation'] }"
186 ></my-markdown-textarea>
187 219
188 <div *ngIf="formErrors.instance.hardwareInformation" class="form-error">{{ formErrors.instance.hardwareInformation }}</div> 220 </div>
189 </div> 221 </div>
190 222
191 </ng-container> 223 </ng-container>
@@ -195,226 +227,254 @@
195 <ngb-tab i18n-title title="Basic configuration"> 227 <ngb-tab i18n-title title="Basic configuration">
196 <ng-template ngbTabContent> 228 <ng-template ngbTabContent>
197 229
198 <div i18n class="inner-form-title">THEME AND DEFAULT ROUTE</div> 230 <div class="form-row mt-5"> <!-- appearance grid -->
199 231 <div class="form-group col-12 col-lg-4 col-xl-3">
200 <ng-container formGroupName="theme"> 232 <div i18n class="inner-form-title">APPEARANCE</div>
201 <div class="form-group">
202 <label i18n for="themeDefault">Global theme</label>
203
204 <div class="peertube-select-container">
205 <select formControlName="default" id="themeDefault">
206 <option i18n value="default">default</option>
207
208 <option *ngFor="let theme of availableThemes" [value]="theme">{{ theme }}</option>
209 </select>
210 </div>
211 </div> 233 </div>
212 </ng-container>
213 234
235 <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
214 236
215 <div class="form-group" formGroupName="instance"> 237 <ng-container formGroupName="theme">
216 <label i18n for="instanceDefaultClientRoute">Default client route</label> 238 <div class="form-group">
217 <div class="peertube-select-container"> 239 <label i18n for="themeDefault">Theme</label>
218 <select id="instanceDefaultClientRoute" formControlName="defaultClientRoute">
219 <option i18n value="/videos/overview">Discover videos</option>
220 <option i18n value="/videos/trending">Trending videos</option>
221 <option i18n value="/videos/most-liked">Most liked videos</option>
222 <option i18n value="/videos/recently-added">Recently added videos</option>
223 <option i18n value="/videos/local">Local videos</option>
224 </select>
225 </div>
226 <div *ngIf="formErrors.instance.defaultClientRoute" class="form-error">{{ formErrors.instance.defaultClientRoute }}</div>
227 </div>
228 240
229 <div i18n class="inner-form-title">SIGNUP</div> 241 <div class="peertube-select-container">
242 <select formControlName="default" id="themeDefault">
243 <option i18n value="default">default</option>
230 244
231 <ng-container formGroupName="signup"> 245 <option *ngFor="let theme of availableThemes" [value]="theme">{{ theme }}</option>
232 <div class="form-group"> 246 </select>
233 <my-peertube-checkbox
234 inputName="signupEnabled" formControlName="enabled"
235 i18n-labelText labelText="Signup enabled"
236 >
237 <ng-container ngProjectAs="description">
238 <span i18n>⚠️ This functionality requires a lot of attention and extra moderation.</span>
239 </ng-container>
240 <ng-container ngProjectAs="extra">
241 <my-peertube-checkbox [ngClass]="{ 'disabled-checkbox-extra': !isSignupEnabled() }"
242 inputName="signupRequiresEmailVerification" formControlName="requiresEmailVerification"
243 i18n-labelText labelText="Signup requires email verification"
244 ></my-peertube-checkbox>
245
246 <div [ngClass]="{ 'disabled-checkbox-extra': !isSignupEnabled() }" class="mt-3">
247 <label i18n for="signupLimit">Signup limit</label>
248 <input
249 type="number" min="-1" id="signupLimit"
250 formControlName="limit" [ngClass]="{ 'input-error': formErrors['signup.limit'] }"
251 >
252 <div *ngIf="formErrors.signup.limit" class="form-error">{{ formErrors.signup.limit }}</div>
253 <small *ngIf="form.value['signup']['limit'] === -1" class="text-muted">Signup won't be limited to a fixed number of users.</small>
254 </div> 247 </div>
255 </ng-container> 248 </div>
256 </my-peertube-checkbox> 249 </ng-container>
257 </div>
258 </ng-container>
259
260
261 <div i18n class="inner-form-title">USERS</div>
262 250
263 <ng-container formGroupName="user"> 251 <div class="form-group" formGroupName="instance">
264 <div class="form-group"> 252 <label i18n for="instanceDefaultClientRoute">Landing page</label>
265 <label i18n for="userVideoQuota">Default video quota per user</label> 253 <div class="peertube-select-container">
266 <div class="peertube-select-container"> 254 <select id="instanceDefaultClientRoute" formControlName="defaultClientRoute">
267 <select id="userVideoQuota" formControlName="videoQuota"> 255 <option i18n value="/videos/overview">Discover videos</option>
268 <option *ngFor="let videoQuotaOption of videoQuotaOptions" [value]="videoQuotaOption.value"> 256 <option i18n value="/videos/trending">Trending videos</option>
269 {{ videoQuotaOption.label }} 257 <option i18n value="/videos/most-liked">Most liked videos</option>
270 </option> 258 <option i18n value="/videos/recently-added">Recently added videos</option>
271 </select> 259 <option i18n value="/videos/local">Local videos</option>
260 </select>
261 </div>
262 <div *ngIf="formErrors.instance.defaultClientRoute" class="form-error">{{ formErrors.instance.defaultClientRoute }}</div>
272 </div> 263 </div>
273 <div *ngIf="formErrors.user.videoQuota" class="form-error">{{ formErrors.user.videoQuota }}</div> 264
274 </div> 265 </div>
266 </div>
275 267
276 <div class="form-group"> 268 <div class="form-row mt-4"> <!-- new users grid -->
277 <label i18n for="userVideoQuotaDaily">Default daily upload limit per user</label> 269 <div class="form-group col-12 col-lg-4 col-xl-3">
278 <div class="peertube-select-container"> 270 <div i18n class="inner-form-title">NEW USERS</div>
279 <select id="userVideoQuotaDaily" formControlName="videoQuotaDaily">
280 <option *ngFor="let videoQuotaDailyOption of videoQuotaDailyOptions" [value]="videoQuotaDailyOption.value">
281 {{ videoQuotaDailyOption.label }}
282 </option>
283 </select>
284 </div>
285 <div *ngIf="formErrors.user.videoQuotaDaily" class="form-error">{{ formErrors.user.videoQuotaDaily }}</div>
286 </div> 271 </div>
287 </ng-container>
288 272
273 <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
289 274
290 <div i18n class="inner-form-title">IMPORT</div> 275 <ng-container formGroupName="signup">
276 <div class="form-group">
277 <my-peertube-checkbox
278 inputName="signupEnabled" formControlName="enabled"
279 i18n-labelText labelText="Signup enabled"
280 >
281 <ng-container ngProjectAs="description">
282 <span i18n>⚠️ This functionality requires a lot of attention and extra moderation.</span>
283 </ng-container>
284 <ng-container ngProjectAs="extra">
285 <my-peertube-checkbox [ngClass]="{ 'disabled-checkbox-extra': !isSignupEnabled() }"
286 inputName="signupRequiresEmailVerification" formControlName="requiresEmailVerification"
287 i18n-labelText labelText="Signup requires email verification"
288 ></my-peertube-checkbox>
291 289
292 <ng-container formGroupName="import"> 290 <div [ngClass]="{ 'disabled-checkbox-extra': !isSignupEnabled() }" class="mt-3">
293 <ng-container formGroupName="videos"> 291 <label i18n for="signupLimit">Signup limit</label>
292 <input
293 type="number" min="-1" id="signupLimit"
294 formControlName="limit" [ngClass]="{ 'input-error': formErrors['signup.limit'] }"
295 >
296 <div *ngIf="formErrors.signup.limit" class="form-error">{{ formErrors.signup.limit }}</div>
297 <small *ngIf="form.value['signup']['limit'] === -1" class="text-muted">Signup won't be limited to a fixed number of users.</small>
298 </div>
299 </ng-container>
300 </my-peertube-checkbox>
301 </div>
302 </ng-container>
294 303
295 <div class="form-group" formGroupName="http"> 304 <ng-container formGroupName="user">
296 <my-peertube-checkbox 305 <div class="form-group">
297 inputName="importVideosHttpEnabled" formControlName="enabled" 306 <label i18n for="userVideoQuota">Default video quota per user</label>
298 i18n-labelText labelText="Allow import with HTTP URL (i.e. YouTube)" 307 <div class="peertube-select-container">
299 ></my-peertube-checkbox> 308 <select id="userVideoQuota" formControlName="videoQuota">
300 </div> 309 <option *ngFor="let videoQuotaOption of videoQuotaOptions" [value]="videoQuotaOption.value">
310 {{ videoQuotaOption.label }}
311 </option>
312 </select>
313 </div>
314 <div *ngIf="formErrors.user.videoQuota" class="form-error">{{ formErrors.user.videoQuota }}</div>
315 </div>
301 316
302 <div class="form-group" formGroupName="torrent"> 317 <div class="form-group">
303 <my-peertube-checkbox 318 <label i18n for="userVideoQuotaDaily">Default daily upload limit per user</label>
304 inputName="importVideosTorrentEnabled" formControlName="enabled" 319 <div class="peertube-select-container">
305 i18n-labelText labelText="Allow import with a torrent file or a magnet URI" 320 <select id="userVideoQuotaDaily" formControlName="videoQuotaDaily">
306 ></my-peertube-checkbox> 321 <option *ngFor="let videoQuotaDailyOption of videoQuotaDailyOptions" [value]="videoQuotaDailyOption.value">
307 </div> 322 {{ videoQuotaDailyOption.label }}
323 </option>
324 </select>
325 </div>
326 <div *ngIf="formErrors.user.videoQuotaDaily" class="form-error">{{ formErrors.user.videoQuotaDaily }}</div>
327 </div>
328 </ng-container>
308 329
309 </ng-container> 330 </div>
310 </ng-container> 331 </div>
311 332
333 <div class="form-row mt-4"> <!-- new videos grid -->
334 <div class="form-group col-12 col-lg-4 col-xl-3">
335 <div i18n class="inner-form-title">NEW VIDEOS</div>
336 </div>
312 337
313 <div i18n class="inner-form-title">AUTO-BLACKLIST</div> 338 <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
314 339
315 <ng-container formGroupName="autoBlacklist"> 340 <ng-container formGroupName="import">
316 <ng-container formGroupName="videos"> 341 <ng-container formGroupName="videos">
317 <ng-container formGroupName="ofUsers"> 342
343 <div class="form-group" formGroupName="http">
344 <my-peertube-checkbox
345 inputName="importVideosHttpEnabled" formControlName="enabled"
346 i18n-labelText labelText="Allow import with HTTP URL (i.e. YouTube)"
347 ></my-peertube-checkbox>
348 </div>
318 349
319 <div class="form-group"> 350 <div class="form-group" formGroupName="torrent">
320 <my-peertube-checkbox 351 <my-peertube-checkbox
321 inputName="autoBlacklistVideosOfUsersEnabled" formControlName="enabled" 352 inputName="importVideosTorrentEnabled" formControlName="enabled"
322 i18n-labelText labelText="Blacklist new videos automatically" 353 i18n-labelText labelText="Allow import with a torrent file or a magnet URI"
323 > 354 ></my-peertube-checkbox>
324 <ng-container ngProjectAs="description"> 355 </div>
325 <span i18n>Unless a user is marked as trusted, their videos will stay private until a moderator reviews them.</span>
326 </ng-container>
327 </my-peertube-checkbox>
328 </div>
329 356
357 </ng-container>
330 </ng-container> 358 </ng-container>
331 </ng-container>
332 </ng-container>
333
334 359
335 <div i18n class="inner-form-title">INSTANCE FOLLOWERS</div> 360 <ng-container formGroupName="autoBlacklist">
361 <ng-container formGroupName="videos">
362 <ng-container formGroupName="ofUsers">
363
364 <div class="form-group">
365 <my-peertube-checkbox
366 inputName="autoBlacklistVideosOfUsersEnabled" formControlName="enabled"
367 i18n-labelText labelText="Blacklist new videos automatically"
368 >
369 <ng-container ngProjectAs="description">
370 <span i18n>Unless a user is marked as trusted, their videos will stay private until a moderator reviews them.</span>
371 </ng-container>
372 </my-peertube-checkbox>
373 </div>
374
375 </ng-container>
376 </ng-container>
377 </ng-container>
336 378
337 <ng-container formGroupName="followers"> 379 </div>
338 <ng-container formGroupName="instance"> 380 </div>
339 381
340 <div class="form-group"> 382 <div class="form-row mt-4"> <!-- federation grid -->
341 <my-peertube-checkbox 383 <div class="form-group col-12 col-lg-4 col-xl-3">
342 inputName="followersInstanceEnabled" formControlName="enabled" 384 <div i18n class="inner-form-title">FEDERATION</div>
343 i18n-labelText labelText="Other instances can follow your instance" 385 </div>
344 ></my-peertube-checkbox>
345 </div>
346 386
347 <div class="form-group"> 387 <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
348 <my-peertube-checkbox
349 inputName="followersInstanceManualApproval" formControlName="manualApproval"
350 i18n-labelText labelText="Manually approve new instance followers"
351 ></my-peertube-checkbox>
352 </div>
353 </ng-container>
354 </ng-container>
355 388
356 <div i18n class="inner-form-title">INSTANCE FOLLOWINGS</div> 389 <ng-container formGroupName="followers">
390 <ng-container formGroupName="instance">
357 391
358 <ng-container formGroupName="followings"> 392 <div class="form-group">
359 <ng-container formGroupName="instance"> 393 <my-peertube-checkbox
394 inputName="followersInstanceEnabled" formControlName="enabled"
395 i18n-labelText labelText="Other instances can follow yours"
396 ></my-peertube-checkbox>
397 </div>
360 398
361 <ng-container formGroupName="autoFollowBack"> 399 <div class="form-group">
362 <div class="form-group"> 400 <my-peertube-checkbox
363 <my-peertube-checkbox 401 inputName="followersInstanceManualApproval" formControlName="manualApproval"
364 inputName="followingsInstanceAutoFollowBackEnabled" formControlName="enabled" 402 i18n-labelText labelText="Manually approve new instance followers"
365 i18n-labelText labelText="Automatically follow other instances that follow you" 403 ></my-peertube-checkbox>
366 > 404 </div>
367 <ng-container ngProjectAs="description"> 405 </ng-container>
368 <span i18n>⚠️ This functionality requires a lot of attention and extra moderation.</span>
369 </ng-container>
370 </my-peertube-checkbox>
371 </div>
372 </ng-container> 406 </ng-container>
373 407
374 <ng-container formGroupName="autoFollowIndex"> 408 <ng-container formGroupName="followings">
375 <div class="form-group"> 409 <ng-container formGroupName="instance">
376 <my-peertube-checkbox 410
377 inputName="followingsInstanceAutoFollowIndexEnabled" formControlName="enabled" 411 <ng-container formGroupName="autoFollowBack">
378 i18n-labelText labelText="Automatically follow instances of the public index" 412 <div class="form-group">
379 > 413 <my-peertube-checkbox
380 <ng-container ngProjectAs="description"> 414 inputName="followingsInstanceAutoFollowBackEnabled" formControlName="enabled"
381 <span i18n>⚠️ This functionality requires a lot of attention and extra moderation.</span> 415 i18n-labelText labelText="Automatically follow back instances"
382 </ng-container> 416 >
417 <ng-container ngProjectAs="description">
418 <span i18n>⚠️ This functionality requires a lot of attention and extra moderation.</span>
419 </ng-container>
420 </my-peertube-checkbox>
421 </div>
422 </ng-container>
383 423
384 <ng-container ngProjectAs="extra"> 424 <ng-container formGroupName="autoFollowIndex">
385 <div [ngClass]="{ 'disabled-checkbox-extra': !isAutoFollowIndexEnabled() }"> 425 <div class="form-group">
386 <label i18n for="followingsInstanceAutoFollowIndexUrl">Index URL</label> 426 <my-peertube-checkbox
387 <input 427 inputName="followingsInstanceAutoFollowIndexEnabled" formControlName="enabled"
388 type="text" id="followingsInstanceAutoFollowIndexUrl" 428 i18n-labelText labelText="Automatically follow instances of the public index"
389 formControlName="indexUrl" [ngClass]="{ 'input-error': formErrors['followings.instance.autoFollowIndex.indexUrl'] }" 429 >
390 > 430 <ng-container ngProjectAs="description">
391 <div *ngIf="formErrors.followings.instance.autoFollowIndex.indexUrl" class="form-error">{{ formErrors.followings.instance.autoFollowIndex.indexUrl }}</div> 431 <span i18n>⚠️ This functionality requires a lot of attention and extra moderation.</span>
392 </div> 432 </ng-container>
393 </ng-container> 433
394 </my-peertube-checkbox> 434 <ng-container ngProjectAs="extra">
395 </div> 435 <div [ngClass]="{ 'disabled-checkbox-extra': !isAutoFollowIndexEnabled() }">
436 <label i18n for="followingsInstanceAutoFollowIndexUrl">Index URL</label>
437 <input
438 type="text" id="followingsInstanceAutoFollowIndexUrl"
439 formControlName="indexUrl" [ngClass]="{ 'input-error': formErrors['followings.instance.autoFollowIndex.indexUrl'] }"
440 >
441 <div *ngIf="formErrors.followings.instance.autoFollowIndex.indexUrl" class="form-error">{{ formErrors.followings.instance.autoFollowIndex.indexUrl }}</div>
442 </div>
443 </ng-container>
444 </my-peertube-checkbox>
445 </div>
396 446
447 </ng-container>
448 </ng-container>
397 </ng-container> 449 </ng-container>
398 </ng-container>
399 </ng-container>
400 450
451 </div>
452 </div>
453
454 <div class="form-row mt-4"> <!-- administrators grid -->
455 <div class="form-group col-12 col-lg-4 col-xl-3">
456 <div i18n class="inner-form-title">ADMINISTRATORS</div>
457 </div>
401 458
402 <div i18n class="inner-form-title">ADMINISTRATORS</div> 459 <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
403 460
404 <div class="form-group" formGroupName="admin"> 461 <div class="form-group" formGroupName="admin">
405 <label i18n for="adminEmail">Admin email</label> 462 <label i18n for="adminEmail">Admin email</label>
406 <input 463 <input
407 type="text" id="adminEmail" 464 type="text" id="adminEmail"
408 formControlName="email" [ngClass]="{ 'input-error': formErrors['admin.email'] }" 465 formControlName="email" [ngClass]="{ 'input-error': formErrors['admin.email'] }"
409 > 466 >
410 <div *ngIf="formErrors.admin.email" class="form-error">{{ formErrors.admin.email }}</div> 467 <div *ngIf="formErrors.admin.email" class="form-error">{{ formErrors.admin.email }}</div>
411 </div> 468 </div>
469
470 <div class="form-group" formGroupName="contactForm">
471 <my-peertube-checkbox
472 inputName="enableContactForm" formControlName="enabled"
473 i18n-labelText labelText="Enable contact form"
474 ></my-peertube-checkbox>
475 </div>
412 476
413 <div class="form-group" formGroupName="contactForm"> 477 </div>
414 <my-peertube-checkbox
415 inputName="enableContactForm" formControlName="enabled"
416 i18n-labelText labelText="Enable contact form"
417 ></my-peertube-checkbox>
418 </div> 478 </div>
419 479
420 </ng-template> 480 </ng-template>
@@ -422,47 +482,56 @@
422 482
423 <ngb-tab i18n-title title="Services"> 483 <ngb-tab i18n-title title="Services">
424 <ng-template ngbTabContent> 484 <ng-template ngbTabContent>
425 <div i18n class="inner-form-title">TWITTER</div>
426 485
427 <ng-container formGroupName="services"> 486 <div class="form-row mt-5"> <!-- twitter grid -->
428 <ng-container formGroupName="twitter"> 487 <div class="form-group col-12 col-lg-4 col-xl-3">
488 <div i18n class="inner-form-title">TWITTER</div>
489 </div>
429 490
430 <div class="form-group"> 491 <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
431 <label i18n for="signupLimit">Your Twitter username</label>
432 492
433 <my-help> 493 <ng-container formGroupName="services">
434 <ng-template ptTemplate="customHtml"> 494 <ng-container formGroupName="twitter">
435 <ng-container i18n>Indicates the Twitter account for the website or platform on which the content was published.</ng-container>
436 </ng-template>
437 </my-help>
438 495
439 <input 496 <div class="form-group">
440 type="text" id="servicesTwitterUsername" 497 <label i18n for="signupLimit">Your Twitter username</label>
441 formControlName="username" [ngClass]="{ 'input-error': formErrors['services.twitter.username'] }"
442 >
443 <div *ngIf="formErrors.services.twitter.username" class="form-error">{{ formErrors.services.twitter.username }}</div>
444 </div>
445 498
446 <div class="form-group"> 499 <my-help>
447 <my-peertube-checkbox inputName="servicesTwitterWhitelisted" formControlName="whitelisted"> 500 <ng-template ptTemplate="customHtml">
448 <ng-template ptTemplate="label"> 501 <ng-container i18n>Indicates the Twitter account for the website or platform on which the content was published.</ng-container>
449 <ng-container i18n>Instance whitelisted by Twitter</ng-container> 502 </ng-template>
450 </ng-template> 503 </my-help>
451 504
452 <ng-template ptTemplate="help"> 505 <input
453 <ng-container i18n> 506 type="text" id="servicesTwitterUsername"
454 If your instance is whitelisted by Twitter, a video player will be embedded in the Twitter feed on PeerTube video share.<br /> 507 formControlName="username" [ngClass]="{ 'input-error': formErrors['services.twitter.username'] }"
455 If the instance is not whitelisted, we use an image link card that will redirect on your PeerTube instance.<br /><br /> 508 >
456 Check this checkbox, save the configuration and test with a video URL of your instance (https://example.com/videos/watch/blabla) on 509 <div *ngIf="formErrors.services.twitter.username" class="form-error">{{ formErrors.services.twitter.username }}</div>
457 <a target='_blank' rel='noopener noreferrer' href='https://cards-dev.twitter.com/validator'>https://cards-dev.twitter.com/validator</a> 510 </div>
458 to see if you instance is whitelisted.
459 </ng-container>
460 </ng-template>
461 </my-peertube-checkbox>
462 </div>
463 511
464 </ng-container> 512 <div class="form-group">
465 </ng-container> 513 <my-peertube-checkbox inputName="servicesTwitterWhitelisted" formControlName="whitelisted">
514 <ng-template ptTemplate="label">
515 <ng-container i18n>Instance whitelisted by Twitter</ng-container>
516 </ng-template>
517
518 <ng-template ptTemplate="help">
519 <ng-container i18n>
520 If your instance is whitelisted by Twitter, a video player will be embedded in the Twitter feed on PeerTube video share.<br />
521 If the instance is not whitelisted, we use an image link card that will redirect on your PeerTube instance.<br /><br />
522 Check this checkbox, save the configuration and test with a video URL of your instance (https://example.com/videos/watch/blabla) on
523 <a target='_blank' rel='noopener noreferrer' href='https://cards-dev.twitter.com/validator'>https://cards-dev.twitter.com/validator</a>
524 to see if you instance is whitelisted.
525 </ng-container>
526 </ng-template>
527 </my-peertube-checkbox>
528 </div>
529
530 </ng-container>
531 </ng-container>
532
533 </div>
534 </div>
466 535
467 </ng-template> 536 </ng-template>
468 </ngb-tab> 537 </ngb-tab>
@@ -470,206 +539,235 @@
470 <ngb-tab i18n-title title="Advanced configuration"> 539 <ngb-tab i18n-title title="Advanced configuration">
471 <ng-template ngbTabContent> 540 <ng-template ngbTabContent>
472 541
473 <div i18n class="inner-form-title">TRANSCODING</div> 542 <div class="form-row mt-5"> <!-- transcoding grid -->
474 543 <div class="form-group col-12 col-lg-4 col-xl-3">
475 <ng-container formGroupName="transcoding"> 544 <div i18n class="inner-form-title">TRANSCODING</div>
476 <div class="form-group">
477 <my-peertube-checkbox inputName="transcodingEnabled" formControlName="enabled">
478 <ng-template ptTemplate="label">
479 <ng-container i18n>Transcoding enabled</ng-container>
480 </ng-template>
481
482 <ng-template ptTemplate="help">
483 <ng-container i18n>If you disable transcoding, many videos from your users will not work!</ng-container>
484 </ng-template>
485 </my-peertube-checkbox>
486 </div> 545 </div>
487 546
488 <ng-container *ngIf="isTranscodingEnabled()"> 547 <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
489 548
490 <div class="form-group"> 549 <ng-container formGroupName="transcoding">
491 <my-peertube-checkbox
492 inputName="transcodingAllowAdditionalExtensions" formControlName="allowAdditionalExtensions"
493 i18n-labelText labelText="Allow additional extensions"
494 >
495 <ng-template ptTemplate="help">
496 <ng-container i18n>Allow your users to upload .mkv, .mov, .avi and .flv videos</ng-container>
497 </ng-template>
498 </my-peertube-checkbox>
499 </div>
500
501 <div class="form-group">
502 <my-peertube-checkbox
503 inputName="transcodingAllowAudioFiles" formControlName="allowAudioFiles"
504 i18n-labelText labelText="Allow audio files upload"
505 >
506 <ng-template ptTemplate="help">
507 <ng-container i18n>Allow your users to upload audio files that will be merged with the preview file on upload</ng-container>
508 </ng-template>
509 </my-peertube-checkbox>
510 </div>
511 550
512 <ng-container formGroupName="webtorrent"> 551 <div class="form-group">
513 <div class="form-group" > 552 <my-peertube-checkbox inputName="transcodingEnabled" formControlName="enabled">
514 <my-peertube-checkbox 553 <ng-template ptTemplate="label">
515 inputName="transcodingWebTorrentEnabled" formControlName="enabled" 554 <ng-container i18n>Transcoding enabled</ng-container>
516 i18n-labelText labelText="WebTorrent support enabled" 555 </ng-template>
517 > 556
518 <ng-template ptTemplate="help"> 557 <ng-template ptTemplate="help">
519 <ng-container i18n> 558 <ng-container i18n>If you disable transcoding, many videos from your users will not work!</ng-container>
520 <strong>Experimental, we suggest you to not disable webtorrent support for now</strong> 559 </ng-template>
521 560
522 <p>If you also enabled HLS support, it will multiply videos storage by 2</p> 561 <ng-container ngProjectAs="extra">
523 562
524 <br /> 563 <div class="form-group" [ngClass]="{ 'disabled-checkbox-extra': !isTranscodingEnabled() }">
564 <my-peertube-checkbox
565 inputName="transcodingAllowAdditionalExtensions" formControlName="allowAdditionalExtensions"
566 i18n-labelText labelText="Allow additional extensions"
567 >
568 <ng-template ptTemplate="help">
569 <ng-container i18n>Allow your users to upload .mkv, .mov, .avi and .flv videos</ng-container>
570 </ng-template>
571 </my-peertube-checkbox>
572 </div>
573
574 <div class="form-group" [ngClass]="{ 'disabled-checkbox-extra': !isTranscodingEnabled() }">
575 <my-peertube-checkbox
576 inputName="transcodingAllowAudioFiles" formControlName="allowAudioFiles"
577 i18n-labelText labelText="Allow audio files upload"
578 >
579 <ng-template ptTemplate="help">
580 <ng-container i18n>Allow your users to upload audio files that will be merged with the preview file on upload</ng-container>
581 </ng-template>
582 </my-peertube-checkbox>
583 </div>
525 584
526 <strong>If disabled, breaks federation with PeerTube instances < 2.1</strong> 585 <ng-container formGroupName="webtorrent">
586 <div class="form-group" [ngClass]="{ 'disabled-checkbox-extra': !isTranscodingEnabled() }">
587 <my-peertube-checkbox
588 inputName="transcodingWebTorrentEnabled" formControlName="enabled"
589 i18n-labelText labelText="WebTorrent support enabled"
590 >
591 <ng-template ptTemplate="help">
592 <ng-container i18n>
593 <strong>Experimental, we suggest you to not disable webtorrent support for now</strong>
594
595 <p>If you also enabled HLS support, it will multiply videos storage by 2</p>
596
597 <br />
598
599 <strong>If disabled, breaks federation with PeerTube instances < 2.1</strong>
600 </ng-container>
601 </ng-template>
602 </my-peertube-checkbox>
603 </div>
527 </ng-container> 604 </ng-container>
528 </ng-template> 605
606 <ng-container formGroupName="hls">
607 <div class="form-group" [ngClass]="{ 'disabled-checkbox-extra': !isTranscodingEnabled() }">
608 <my-peertube-checkbox
609 inputName="transcodingHlsEnabled" formControlName="enabled"
610 i18n-labelText labelText="HLS support enabled"
611 >
612 <ng-template ptTemplate="help">
613 <ng-container i18n>
614 <strong>Requires ffmpeg >= 4.1</strong>
615
616 <p>Generate HLS playlists and fragmented MP4 files resulting in a better playback than with the current default player:</p>
617 <ul>
618 <li>Resolution change is smoother</li>
619 <li>Faster playback in particular with long videos</li>
620 <li>More stable playback (less bugs/infinite loading)</li>
621 </ul>
622
623 <p>If you also enabled WebTorrent support, it will multiply videos storage by 2</p>
624 </ng-container>
625 </ng-template>
626 </my-peertube-checkbox>
627 </div>
628 </ng-container>
629
630 <div class="form-group" [ngClass]="{ 'disabled-checkbox-extra': !isTranscodingEnabled() }">
631 <label i18n for="transcodingThreads">Transcoding threads</label>
632 <div class="peertube-select-container">
633 <select id="transcodingThreads" formControlName="threads">
634 <option *ngFor="let transcodingThreadOption of transcodingThreadOptions" [value]="transcodingThreadOption.value">
635 {{ transcodingThreadOption.label }}
636 </option>
637 </select>
638 </div>
639 <div *ngIf="formErrors.transcoding.threads" class="form-error">{{ formErrors.transcoding.threads }}</div>
640 </div>
641
642 <ng-container formGroupName="resolutions">
643 <div class="form-group" *ngFor="let resolution of resolutions" [ngClass]="{ 'disabled-checkbox-extra': !isTranscodingEnabled() }">
644 <my-peertube-checkbox
645 [inputName]="getResolutionKey(resolution.id)" [formControlName]="resolution.id"
646 i18n-labelText labelText="Resolution {{resolution.label}} enabled"
647 >
648 <ng-template *ngIf="resolution.description" ptTemplate="help">
649 <div [innerHTML]="resolution.description"></div>
650 </ng-template>
651 </my-peertube-checkbox>
652 </div>
653 </ng-container>
654
655 </ng-container>
529 </my-peertube-checkbox> 656 </my-peertube-checkbox>
530 </div> 657 </div>
658
531 </ng-container> 659 </ng-container>
532 660
533 <ng-container formGroupName="hls"> 661 </div>
534 <div class="form-group" > 662 </div>
535 <my-peertube-checkbox
536 inputName="transcodingHlsEnabled" formControlName="enabled"
537 i18n-labelText labelText="HLS support enabled"
538 >
539 <ng-template ptTemplate="help">
540 <ng-container i18n>
541 <strong>Requires ffmpeg >= 4.1</strong>
542 663
543 <p>Generate HLS playlists and fragmented MP4 files resulting in a better playback than with the current default player:</p> 664 <div class="form-row mt-4"> <!-- cache grid -->
544 <ul> 665 <div class="form-group col-12 col-lg-4 col-xl-3">
545 <li>Resolution change is smoother</li> 666 <div class="inner-form-title">
546 <li>Faster playback in particular with long videos</li> 667 <ng-container i18n>CACHE</ng-container>
547 <li>More stable playback (less bugs/infinite loading)</li> 668 <my-help>
548 </ul> 669 <ng-template ptTemplate="customHtml">
670 <ng-container i18n>Some files are not federated (previews, captions). We fetch them directly from the origin instance and cache them.</ng-container>
671 </ng-template>
672 </my-help>
673 </div>
674 </div>
549 675
550 <p>If you also enabled WebTorrent support, it will multiply videos storage by 2</p> 676 <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
551 </ng-container>
552 </ng-template>
553 </my-peertube-checkbox>
554 </div>
555 </ng-container>
556 677
557 <div class="form-group"> 678 <ng-container formGroupName="cache">
558 <label i18n for="transcodingThreads">Transcoding threads</label> 679 <div class="form-group" formGroupName="previews">
559 <div class="peertube-select-container"> 680 <label i18n for="cachePreviewsSize">Number of previews to keep in cache</label>
560 <select id="transcodingThreads" formControlName="threads"> 681 <input
561 <option *ngFor="let transcodingThreadOption of transcodingThreadOptions" [value]="transcodingThreadOption.value"> 682 type="number" min="0" id="cachePreviewsSize"
562 {{ transcodingThreadOption.label }} 683 formControlName="size" [ngClass]="{ 'input-error': formErrors['cache.previews.size'] }"
563 </option> 684 >
564 </select> 685 <div *ngIf="formErrors.cache.previews.size" class="form-error">{{ formErrors.cache.previews.size }}</div>
565 </div> 686 </div>
566 <div *ngIf="formErrors.transcoding.threads" class="form-error">{{ formErrors.transcoding.threads }}</div>
567 </div>
568 687
569 <ng-container formGroupName="resolutions"> 688 <div class="form-group" formGroupName="captions">
570 <div class="form-group" *ngFor="let resolution of resolutions"> 689 <label i18n for="cacheCaptionsSize">Number of video captions to keep in cache</label>
571 <my-peertube-checkbox 690 <input
572 [inputName]="getResolutionKey(resolution.id)" [formControlName]="resolution.id" 691 type="number" min="0" id="cacheCaptionsSize"
573 i18n-labelText labelText="Resolution {{resolution.label}} enabled" 692 formControlName="size" [ngClass]="{ 'input-error': formErrors['cache.captions.size'] }"
574 > 693 >
575 <ng-template *ngIf="resolution.description" ptTemplate="help"> 694 <div *ngIf="formErrors.cache.captions.size" class="form-error">{{ formErrors.cache.captions.size }}</div>
576 <div [innerHTML]="resolution.description"></div>
577 </ng-template>
578 </my-peertube-checkbox>
579 </div> 695 </div>
580 </ng-container> 696 </ng-container>
581 697
582 </ng-container>
583 </ng-container>
584
585 <div class="inner-form-title">
586 <ng-container i18n>CACHE</ng-container>
587
588 <my-help>
589 <ng-template ptTemplate="customHtml">
590 <ng-container i18n>Some files are not federated (previews, captions). We fetch them directly from the origin instance and cache them.</ng-container>
591 </ng-template>
592 </my-help>
593 </div>
594
595 <ng-container formGroupName="cache">
596 <div class="form-group" formGroupName="previews">
597 <label i18n for="cachePreviewsSize">Previews cache size</label>
598 <input
599 type="text" id="cachePreviewsSize"
600 formControlName="size" [ngClass]="{ 'input-error': formErrors['cache.previews.size'] }"
601 >
602 <div *ngIf="formErrors.cache.previews.size" class="form-error">{{ formErrors.cache.previews.size }}</div>
603 </div> 698 </div>
699 </div>
604 700
605 <div class="form-group" formGroupName="captions"> 701 <div class="form-row mt-4"> <!-- cache grid -->
606 <label i18n for="cacheCaptionsSize">Video captions cache size</label> 702 <div class="form-group col-12 col-lg-4 col-xl-3">
607 <input 703 <div i18n class="inner-form-title">CUSTOMIZATIONS</div>
608 type="text" id="cacheCaptionsSize"
609 formControlName="size" [ngClass]="{ 'input-error': formErrors['cache.captions.size'] }"
610 >
611 <div *ngIf="formErrors.cache.captions.size" class="form-error">{{ formErrors.cache.captions.size }}</div>
612 </div> 704 </div>
613 </ng-container>
614 705
615 <div i18n class="inner-form-title">CUSTOMIZATIONS</div> 706 <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
616 707
617 <ng-container formGroupName="instance"> 708 <ng-container formGroupName="instance">
618 <ng-container formGroupName="customizations"> 709 <ng-container formGroupName="customizations">
619 <div class="form-group"> 710 <div class="form-group">
620 <label i18n for="customizationJavascript">JavaScript</label> 711 <label i18n for="customizationJavascript">JavaScript</label>
621 <my-help> 712 <my-help>
622 <ng-template ptTemplate="customHtml"> 713 <ng-template ptTemplate="customHtml">
623 <ng-container i18n> 714 <ng-container i18n>
624 Write JavaScript code directly.<br />Example: <pre>console.log('my instance is amazing');</pre> 715 Write JavaScript code directly.<br />Example: <pre>console.log('my instance is amazing');</pre>
625 </ng-container> 716 </ng-container>
626 </ng-template> 717 </ng-template>
627 </my-help> 718 </my-help>
628 719
629 <textarea 720 <textarea
630 id="customizationJavascript" formControlName="javascript" 721 id="customizationJavascript" formControlName="javascript"
631 [ngClass]="{ 'input-error': formErrors['instance.customizations.javascript'] }" 722 [ngClass]="{ 'input-error': formErrors['instance.customizations.javascript'] }"
632 ></textarea> 723 ></textarea>
633 724
634 <div *ngIf="formErrors.instance.customizations.javascript" class="form-error">{{ formErrors.instance.customizations.javascript }}</div> 725 <div *ngIf="formErrors.instance.customizations.javascript" class="form-error">{{ formErrors.instance.customizations.javascript }}</div>
635 </div> 726 </div>
636
637 <div class="form-group">
638 <label for="customizationCSS">CSS</label>
639 727
640 <my-help> 728 <div class="form-group">
641 <ng-template ptTemplate="customHtml"> 729 <label for="customizationCSS">CSS</label>
642 <ng-container i18n> 730
643 Write CSS code directly. Example:<br /><br /> 731 <my-help>
644<pre> 732 <ng-template ptTemplate="customHtml">
645#custom-css {{ '{' }} 733 <ng-container i18n>
646 color: red; 734 Write CSS code directly. Example:<br /><br />
647{{ '}' }} 735 <pre>
648</pre> 736 #custom-css {{ '{' }}
649 737 color: red;
650 Prepend with <em>#custom-css</em> to override styles. Example:<br /><br /> 738 {{ '}' }}
651<pre> 739 </pre>
652#custom-css .logged-in-email {{ '{' }} 740 Prepend with <em>#custom-css</em> to override styles. Example:<br /><br />
653 color: red; 741 <pre>
654{{ '}' }} 742 #custom-css .logged-in-email {{ '{' }}
655</pre> 743 color: red;
656 </ng-container> 744 {{ '}' }}
657 </ng-template> 745 </pre>
658 </my-help> 746 </ng-container>
747 </ng-template>
748 </my-help>
749
750 <textarea
751 id="customizationCSS" formControlName="css"
752 [ngClass]="{ 'input-error': formErrors['instance.customizations.css'] }"
753 ></textarea>
754 <div *ngIf="formErrors.instance.customizations.css" class="form-error">{{ formErrors.instance.customizations.css }}</div>
755 </div>
756 </ng-container>
757 </ng-container>
659 758
660 <textarea 759 </div>
661 id="customizationCSS" formControlName="css" 760 </div>
662 [ngClass]="{ 'input-error': formErrors['instance.customizations.css'] }"
663 ></textarea>
664 <div *ngIf="formErrors.instance.customizations.css" class="form-error">{{ formErrors.instance.customizations.css }}</div>
665 </div>
666 </ng-container>
667 </ng-container>
668 761
669 </ng-template> 762 </ng-template>
670 </ngb-tab> 763 </ngb-tab>
671 </ngb-tabset> 764 </ngb-tabset>
672 765
673 <input (click)="formValidated()" type="submit" i18n-value value="Update configuration" [disabled]="!form.valid"> 766 <div class="form-row mt-4"> <!-- submit placement block -->
674 <span class="form-error" i18n *ngIf="!form.valid">It seems like the configuration is invalid. Please search for potential errors in the different tabs.</span> 767 <div class="col-md-7 col-xl-5"></div>
768 <div class="col-md-5 col-xl-5">
769 <input (click)="formValidated()" type="submit" i18n-value value="Update configuration" [disabled]="!form.valid">
770 <span class="form-error" i18n *ngIf="!form.valid">It seems like the configuration is invalid. Please search for potential errors in the different tabs.</span>
771 </div>
772 </div>
675</form> 773</form>
diff --git a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.scss b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.scss
index dd70f1c06..8b1cdcbba 100644
--- a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.scss
+++ b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.scss
@@ -1,12 +1,19 @@
1@import '_variables'; 1@import '_variables';
2@import '_mixins'; 2@import '_mixins';
3 3
4.form-group { 4$form-base-input-width: 340px;
5 margin-bottom: 25px; 5
6label {
7 font-weight: $font-regular;
8 font-size: 100%;
9}
10
11form {
12 padding-bottom: 1.5rem;
6} 13}
7 14
8input[type=text] { 15input[type=text] {
9 @include peertube-input-text(340px); 16 @include peertube-input-text($form-base-input-width);
10 display: block; 17 display: block;
11} 18}
12 19
@@ -20,14 +27,15 @@ input[type=checkbox] {
20} 27}
21 28
22.peertube-select-container { 29.peertube-select-container {
23 @include peertube-select-container(340px); 30 @include peertube-select-container($form-base-input-width);
24} 31}
25 32
26input[type=submit] { 33input[type=submit] {
27 @include peertube-button; 34 @include peertube-button;
28 @include orange-button; 35 @include orange-button;
29 36
30 margin-top: 20px; 37 display: flex;
38 margin-left: auto;
31 39
32 & + .form-error { 40 & + .form-error {
33 display: inline; 41 display: inline;
@@ -36,12 +44,7 @@ input[type=submit] {
36} 44}
37 45
38.inner-form-title { 46.inner-form-title {
39 text-transform: uppercase; 47 @include settings-big-title;
40 color: var(--mainColor);
41 font-weight: $font-bold;
42 font-size: 13px;
43 margin-top: 30px;
44 margin-bottom: 10px;
45} 48}
46 49
47textarea { 50textarea {
@@ -63,3 +66,21 @@ textarea {
63 opacity: .5; 66 opacity: .5;
64 pointer-events: none; 67 pointer-events: none;
65} 68}
69
70my-markdown-textarea ::ng-deep {
71 .root {
72 @media screen and (max-width: 1400px) {
73 flex-direction: column !important;
74 }
75 }
76}
77
78.form-group-right {
79 padding-top: 2px;
80}
81
82ngb-tabset:not(.previews) ::ng-deep {
83 .nav-link {
84 font-size: 105%;
85 }
86} \ No newline at end of file
diff --git a/client/src/app/+admin/plugins/shared/toggle-plugin-type.scss b/client/src/app/+admin/plugins/shared/toggle-plugin-type.scss
index 3d3b6dd12..56ea91d0b 100644
--- a/client/src/app/+admin/plugins/shared/toggle-plugin-type.scss
+++ b/client/src/app/+admin/plugins/shared/toggle-plugin-type.scss
@@ -13,9 +13,23 @@
13 font-weight: 600; 13 font-weight: 600;
14 } 14 }
15 15
16 .ui-button.ui-state-default {
17 background-color: #f0f0f0;
18 border: 1px solid #f0f0f0;
19 }
20
16 .ui-button.ui-state-active { 21 .ui-button.ui-state-active {
17 background-color: var(--mainColor); 22 background-color: var(--mainColor);
18 border-color: var(--mainColor); 23 border-color: var(--mainColor);
24
25 &:hover {
26 background-color: var(--mainHoverColor);
27 border-color: var(--mainHoverColor);
28 }
29 }
30
31 .ui-button:not(.ui-state-active).ui-state-focus {
32 box-shadow: 0 0 0 .1rem rgba(87, 85, 217, .2);
19 } 33 }
20 } 34 }
21 } 35 }
diff --git a/client/src/app/+my-account/my-account-settings/my-account-change-email/my-account-change-email.component.scss b/client/src/app/+my-account/my-account-settings/my-account-change-email/my-account-change-email.component.scss
index 81eba3ec9..aec709ea0 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-change-email/my-account-change-email.component.scss
+++ b/client/src/app/+my-account/my-account-settings/my-account-change-email/my-account-change-email.component.scss
@@ -1,6 +1,11 @@
1@import '_variables'; 1@import '_variables';
2@import '_mixins'; 2@import '_mixins';
3 3
4label {
5 font-weight: $font-regular;
6 font-size: 100%;
7}
8
4input[type=password], 9input[type=password],
5input[type=email] { 10input[type=email] {
6 @include peertube-input-text(340px); 11 @include peertube-input-text(340px);
@@ -16,7 +21,7 @@ input[type=submit] {
16.current-email, 21.current-email,
17.pending-email { 22.pending-email {
18 font-size: 16px; 23 font-size: 16px;
19 margin: 15px 0; 24 margin-bottom: 15px;
20 25
21 .email { 26 .email {
22 font-weight: $font-semibold; 27 font-weight: $font-semibold;
diff --git a/client/src/app/+my-account/my-account-settings/my-account-change-password/my-account-change-password.component.scss b/client/src/app/+my-account/my-account-settings/my-account-change-password/my-account-change-password.component.scss
index e641482f0..381afae07 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-change-password/my-account-change-password.component.scss
+++ b/client/src/app/+my-account/my-account-settings/my-account-change-password/my-account-change-password.component.scss
@@ -1,6 +1,11 @@
1@import '_variables'; 1@import '_variables';
2@import '_mixins'; 2@import '_mixins';
3 3
4label {
5 font-weight: $font-regular;
6 font-size: 100%;
7}
8
4input[type=password] { 9input[type=password] {
5 @include peertube-input-text(340px); 10 @include peertube-input-text(340px);
6 display: block; 11 display: block;
diff --git a/client/src/app/+my-account/my-account-settings/my-account-danger-zone/my-account-danger-zone.component.html b/client/src/app/+my-account/my-account-settings/my-account-danger-zone/my-account-danger-zone.component.html
index c542cc675..dd9b56585 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-danger-zone/my-account-danger-zone.component.html
+++ b/client/src/app/+my-account/my-account-settings/my-account-danger-zone/my-account-danger-zone.component.html
@@ -1,5 +1,5 @@
1<div class="delete-me"> 1<div class="delete-me">
2 <p i18n>Once you delete your account, there is no going back. Please be certain.</p> 2 <p i18n>Once you delete your account, there is no going back.</p>
3 3
4 <button (click)="deleteMe()" i18n>Delete your account</button> 4 <button (click)="deleteMe()" i18n>Delete your account</button>
5</div> \ No newline at end of file 5</div> \ No newline at end of file
diff --git a/client/src/app/+my-account/my-account-settings/my-account-interface/my-account-interface-settings.component.scss b/client/src/app/+my-account/my-account-settings/my-account-interface/my-account-interface-settings.component.scss
index 629f01733..7818dfc02 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-interface/my-account-interface-settings.component.scss
+++ b/client/src/app/+my-account/my-account-settings/my-account-interface/my-account-interface-settings.component.scss
@@ -1,6 +1,11 @@
1@import '_variables'; 1@import '_variables';
2@import '_mixins'; 2@import '_mixins';
3 3
4label {
5 font-weight: $font-regular;
6 font-size: 100%;
7}
8
4input[type=submit] { 9input[type=submit] {
5 @include peertube-button; 10 @include peertube-button;
6 @include orange-button; 11 @include orange-button;
diff --git a/client/src/app/+my-account/my-account-settings/my-account-profile/my-account-profile.component.html b/client/src/app/+my-account/my-account-settings/my-account-profile/my-account-profile.component.html
index 05c0b5ddc..14e51f57c 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-profile/my-account-profile.component.html
+++ b/client/src/app/+my-account/my-account-settings/my-account-profile/my-account-profile.component.html
@@ -24,5 +24,5 @@
24 </div> 24 </div>
25 </div> 25 </div>
26 26
27 <input type="submit" i18n-value value="Update my profile" [disabled]="!form.valid"> 27 <input type="submit" i18n-value value="Save" [disabled]="!form.valid">
28</form> 28</form>
diff --git a/client/src/app/+my-account/my-account-settings/my-account-profile/my-account-profile.component.scss b/client/src/app/+my-account/my-account-settings/my-account-profile/my-account-profile.component.scss
index 6aabb60f4..2f8df81d4 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-profile/my-account-profile.component.scss
+++ b/client/src/app/+my-account/my-account-settings/my-account-profile/my-account-profile.component.scss
@@ -1,6 +1,11 @@
1@import '_variables'; 1@import '_variables';
2@import '_mixins'; 2@import '_mixins';
3 3
4label {
5 font-weight: $font-regular;
6 font-size: 100%;
7}
8
4.form-group:first-child { 9.form-group:first-child {
5 margin-bottom: 15px; 10 margin-bottom: 15px;
6} 11}
@@ -11,12 +16,6 @@ input[type=text] {
11 display: block; 16 display: block;
12} 17}
13 18
14textarea {
15 @include peertube-textarea(500px, 150px);
16
17 display: block;
18}
19
20input[type=submit] { 19input[type=submit] {
21 @include peertube-button; 20 @include peertube-button;
22 @include orange-button; 21 @include orange-button;
@@ -24,3 +23,8 @@ input[type=submit] {
24 margin-top: 15px; 23 margin-top: 15px;
25} 24}
26 25
26textarea {
27 @include peertube-textarea(500px, 150px);
28
29 display: block;
30}
diff --git a/client/src/app/+my-account/my-account-settings/my-account-settings.component.html b/client/src/app/+my-account/my-account-settings/my-account-settings.component.html
index 9f187b574..164afb4ea 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-settings.component.html
+++ b/client/src/app/+my-account/my-account-settings/my-account-settings.component.html
@@ -1,34 +1,83 @@
1<my-actor-avatar-info [actor]="user.account" (avatarChange)="onAvatarChange($event)"></my-actor-avatar-info> 1<div class="form-row"> <!-- profile grid -->
2 <div class="form-group col-12 col-lg-4 col-xl-3">
3 <div i18n class="account-title">PROFILE</div>
4 </div>
5
6 <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
7 <my-actor-avatar-info [actor]="user.account" (avatarChange)="onAvatarChange($event)"></my-actor-avatar-info>
8
9 <div class="user-quota mb-3">
10 <div>
11 <label i18n>Total video quota:</label>
12 <ng-container i18n>{{ userVideoQuotaUsed | bytes: 0 }} used</ng-container> / {{ userVideoQuota }}
13 </div>
14
15 <div *ngIf="hasDailyQuota()">
16 <label i18n>Daily video quota:</label>
17 <ng-container>{{ userVideoQuotaUsedDaily | bytes: 0 }} used</ng-container> / {{ userVideoQuotaDaily }}
18 </div>
19 </div>
20
21 <my-account-profile [user]="user" [userInformationLoaded]="userInformationLoaded"></my-account-profile>
22 </div>
23</div>
2 24
3<div class="user-quota"> 25<div class="form-row mt-5"> <!-- video settings grid -->
4 <div> 26 <div class="form-group col-12 col-lg-4 col-xl-3">
5 <span i18n class="user-quota-label">Total video quota:</span> 27 <div i18n class="account-title">VIDEO SETTINGS</div>
6 <ng-container i18n>{{ userVideoQuotaUsed | bytes: 0 }} used</ng-container> / {{ userVideoQuota }}
7 </div> 28 </div>
8 29
9 <div *ngIf="hasDailyQuota()"> 30 <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
10 <span i18n class="user-quota-label">Daily video quota:</span> 31 <my-account-video-settings [user]="user" [userInformationLoaded]="userInformationLoaded"></my-account-video-settings>
11 <ng-container>{{ userVideoQuotaUsedDaily | bytes: 0 }} used</ng-container> / {{ userVideoQuotaDaily }}
12 </div> 32 </div>
13</div> 33</div>
14 34
15<div i18n class="account-title">Profile</div> 35<div class="form-row mt-5"> <!-- notifications grid -->
16<my-account-profile [user]="user" [userInformationLoaded]="userInformationLoaded"></my-account-profile> 36 <div class="form-group col-12 col-lg-4 col-xl-3">
37 <div i18n class="account-title">NOTIFICATIONS</div>
38 </div>
17 39
18<div i18n class="account-title">Video settings</div> 40 <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
19<my-account-video-settings [user]="user" [userInformationLoaded]="userInformationLoaded"></my-account-video-settings> 41 <my-account-notification-preferences [user]="user" [userInformationLoaded]="userInformationLoaded"></my-account-notification-preferences>
42 </div>
43</div>
20 44
21<div i18n class="account-title">Notifications</div> 45<div class="form-row mt-5"> <!-- interface grid -->
22<my-account-notification-preferences [user]="user" [userInformationLoaded]="userInformationLoaded"></my-account-notification-preferences> 46 <div class="form-group col-12 col-lg-4 col-xl-3">
47 <div i18n class="account-title">INTERFACE</div>
48 </div>
23 49
24<div i18n class="account-title">Interface</div> 50 <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
25<my-account-interface-settings [user]="user" [userInformationLoaded]="userInformationLoaded"></my-account-interface-settings> 51 <my-account-interface-settings [user]="user" [userInformationLoaded]="userInformationLoaded"></my-account-interface-settings>
52 </div>
53</div>
26 54
27<div i18n class="account-title">Password</div> 55<div class="form-row mt-5"> <!-- password grid -->
28<my-account-change-password></my-account-change-password> 56 <div class="form-group col-12 col-lg-4 col-xl-3">
57 <div i18n class="account-title">PASSWORD</div>
58 </div>
59
60 <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
61 <my-account-change-password></my-account-change-password>
62 </div>
63</div>
64
65<div class="form-row mt-5"> <!-- email grid -->
66 <div class="form-group col-12 col-lg-4 col-xl-3">
67 <div i18n class="account-title">EMAIL</div>
68 </div>
29 69
30<div i18n class="account-title">Email</div> 70 <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
31<my-account-change-email></my-account-change-email> 71 <my-account-change-email></my-account-change-email>
72 </div>
73</div>
74
75<div class="form-row mt-5"> <!-- danger zone grid -->
76 <div class="form-group col-12 col-lg-4 col-xl-3">
77 <div i18n class="account-title">DANGER ZONE</div>
78 </div>
32 79
33<div i18n class="account-title">Danger zone</div> 80 <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
34<my-account-danger-zone [user]="user"></my-account-danger-zone> 81 <my-account-danger-zone [user]="user"></my-account-danger-zone>
82 </div>
83</div>
diff --git a/client/src/app/+my-account/my-account-settings/my-account-settings.component.scss b/client/src/app/+my-account/my-account-settings/my-account-settings.component.scss
index d0395aca9..7eb60c7fb 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-settings.component.scss
+++ b/client/src/app/+my-account/my-account-settings/my-account-settings.component.scss
@@ -5,15 +5,11 @@
5 font-size: 15px; 5 font-size: 15px;
6 margin-top: 20px; 6 margin-top: 20px;
7 7
8 .user-quota-label { 8 label {
9 margin-right: 5px; 9 margin-right: 5px;
10 font-weight: $font-semibold;
11 } 10 }
12} 11}
13 12
14.account-title { 13.account-title {
15 @include in-content-small-title; 14 @include settings-big-title;
16
17 margin-top: 55px;
18 margin-bottom: 30px;
19} 15}
diff --git a/client/src/app/+my-account/my-account-settings/my-account-video-settings/my-account-video-settings.component.scss b/client/src/app/+my-account/my-account-settings/my-account-video-settings/my-account-video-settings.component.scss
index 1881be762..56cef0398 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-video-settings/my-account-video-settings.component.scss
+++ b/client/src/app/+my-account/my-account-settings/my-account-video-settings/my-account-video-settings.component.scss
@@ -1,6 +1,11 @@
1@import '_variables'; 1@import '_variables';
2@import '_mixins'; 2@import '_mixins';
3 3
4label {
5 font-weight: $font-regular;
6 font-size: 100%;
7}
8
4input[type=submit] { 9input[type=submit] {
5 @include peertube-button; 10 @include peertube-button;
6 @include orange-button; 11 @include orange-button;
diff --git a/client/src/app/+my-account/shared/actor-avatar-info.component.ts b/client/src/app/+my-account/shared/actor-avatar-info.component.ts
index 8e034bb82..eb198587d 100644
--- a/client/src/app/+my-account/shared/actor-avatar-info.component.ts
+++ b/client/src/app/+my-account/shared/actor-avatar-info.component.ts
@@ -48,6 +48,6 @@ export class ActorAvatarInfoComponent implements OnInit {
48 } 48 }
49 49
50 get avatarExtensions () { 50 get avatarExtensions () {
51 return this.serverConfig.avatar.file.extensions.join(',') 51 return this.serverConfig.avatar.file.extensions.join(', ')
52 } 52 }
53} 53}
diff --git a/client/src/app/shared/forms/markdown-textarea.component.scss b/client/src/app/shared/forms/markdown-textarea.component.scss
index eacaf36a2..bd02343de 100644
--- a/client/src/app/shared/forms/markdown-textarea.component.scss
+++ b/client/src/app/shared/forms/markdown-textarea.component.scss
@@ -22,6 +22,8 @@
22 align-items: center; 22 align-items: center;
23 height: 30px !important; 23 height: 30px !important;
24 padding: 0 15px !important; 24 padding: 0 15px !important;
25 font-size: 85% !important;
26 opacity: .7;
25 } 27 }
26 28
27 .tab-content { 29 .tab-content {
diff --git a/client/src/app/shared/menu/top-menu-dropdown.component.html b/client/src/app/shared/menu/top-menu-dropdown.component.html
index 35511ee62..3087b2e98 100644
--- a/client/src/app/shared/menu/top-menu-dropdown.component.html
+++ b/client/src/app/shared/menu/top-menu-dropdown.component.html
@@ -1,12 +1,12 @@
1<div class="sub-menu"> 1<div class="sub-menu">
2 <ng-container *ngFor="let menuEntry of menuEntries"> 2 <ng-container *ngFor="let menuEntry of menuEntries">
3 3
4 <a *ngIf="menuEntry.routerLink" [routerLink]="menuEntry.routerLink" routerLinkActive="active" class="title-page">{{ menuEntry.label }}</a> 4 <a *ngIf="menuEntry.routerLink" [routerLink]="menuEntry.routerLink" routerLinkActive="active" class="title-page title-page-settings">{{ menuEntry.label }}</a>
5 5
6 <div *ngIf="!menuEntry.routerLink" ngbDropdown [container]="container" class="parent-entry" #dropdown="ngbDropdown" (mouseleave)="closeDropdownIfHovered(dropdown)"> 6 <div *ngIf="!menuEntry.routerLink" ngbDropdown [container]="container" class="parent-entry" #dropdown="ngbDropdown" (mouseleave)="closeDropdownIfHovered(dropdown)">
7 <span 7 <span
8 (mouseenter)="openDropdownOnHover(dropdown)" [ngClass]="{ active: !!suffixLabels[menuEntry.label] }" ngbDropdownAnchor 8 (mouseenter)="openDropdownOnHover(dropdown)" [ngClass]="{ active: !!suffixLabels[menuEntry.label] }" ngbDropdownAnchor
9 (click)="dropdownAnchorClicked(dropdown)" role="button" class="title-page" 9 (click)="dropdownAnchorClicked(dropdown)" role="button" class="title-page title-page-settings"
10 > 10 >
11 <ng-container i18n>{{ menuEntry.label }}</ng-container> 11 <ng-container i18n>{{ menuEntry.label }}</ng-container>
12 <ng-container *ngIf="!!suffixLabels[menuEntry.label]"> - {{ suffixLabels[menuEntry.label] }}</ng-container> 12 <ng-container *ngIf="!!suffixLabels[menuEntry.label]"> - {{ suffixLabels[menuEntry.label] }}</ng-container>
diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss
index 046368c8b..a9475e484 100644
--- a/client/src/sass/application.scss
+++ b/client/src/sass/application.scss
@@ -174,6 +174,16 @@ label {
174 } 174 }
175} 175}
176 176
177.title-page-about,
178.title-page-settings {
179 font-size: 115%;
180 font-weight: $font-regular;
181
182 &.active {
183 font-weight: $font-semibold;
184 }
185}
186
177.admin-sub-header { 187.admin-sub-header {
178 display: flex; 188 display: flex;
179 align-items: center; 189 align-items: center;
diff --git a/client/src/sass/bootstrap.scss b/client/src/sass/bootstrap.scss
index f718791eb..5c1ce1028 100644
--- a/client/src/sass/bootstrap.scss
+++ b/client/src/sass/bootstrap.scss
@@ -175,10 +175,10 @@ ngb-tabset {
175 175
176.nav-tabs .nav-link { 176.nav-tabs .nav-link {
177 &:not(.active) { 177 &:not(.active) {
178 opacity: .6;
179 border-bottom: 3px solid transparent; 178 border-bottom: 3px solid transparent;
180 } 179 }
181 &.active { 180 &.active {
181 font-weight: $font-semibold;
182 background-color: var(--mainBackgroundColor) !important; 182 background-color: var(--mainBackgroundColor) !important;
183 border: none; 183 border: none;
184 border-bottom: 2px solid var(--mainColor); 184 border-bottom: 2px solid var(--mainColor);
diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index 9a8d0073a..0a500b6f3 100644
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -463,6 +463,14 @@
463 font-size: 13px; 463 font-size: 13px;
464} 464}
465 465
466@mixin settings-big-title {
467 text-transform: uppercase;
468 color: var(--mainColor);
469 font-weight: $font-bold;
470 font-size: 110%;
471 margin-bottom: 10px;
472}
473
466@mixin actor-owner { 474@mixin actor-owner {
467 @include disable-default-a-behaviour; 475 @include disable-default-a-behaviour;
468 476
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-23 07:14:56 +0000