aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/+my-account
diff options
context:
space:
mode:
Diffstat (limited to 'client/src/app/+my-account')
-rw-r--r--client/src/app/+my-account/my-account-settings/my-account-settings.component.html1
-rw-r--r--client/src/app/+my-account/my-account-video-channels/my-account-video-channel-edit.component.html101
-rw-r--r--client/src/app/+my-account/my-account-video-channels/my-account-video-channel-edit.component.scss44
3 files changed, 91 insertions, 55 deletions
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 87296bc19..ddcde828c 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
@@ -24,6 +24,7 @@
24 24
25<div class="form-row mt-5"> <!-- video settings grid --> 25<div class="form-row mt-5"> <!-- video settings grid -->
26 <div class="form-group col-12 col-lg-4 col-xl-3"> 26 <div class="form-group col-12 col-lg-4 col-xl-3">
27 <div class="anchor" id="video-settings"></div> <!-- video settings anchor -->
27 <div i18n class="account-title">VIDEO SETTINGS</div> 28 <div i18n class="account-title">VIDEO SETTINGS</div>
28 </div> 29 </div>
29 30
diff --git a/client/src/app/+my-account/my-account-video-channels/my-account-video-channel-edit.component.html b/client/src/app/+my-account/my-account-video-channels/my-account-video-channel-edit.component.html
index f87df87df..cc20674c9 100644
--- a/client/src/app/+my-account/my-account-video-channels/my-account-video-channel-edit.component.html
+++ b/client/src/app/+my-account/my-account-video-channels/my-account-video-channel-edit.component.html
@@ -1,8 +1,3 @@
1<my-actor-avatar-info
2 *ngIf="isCreation() === false && videoChannelToUpdate"
3 [actor]="videoChannelToUpdate" (avatarChange)="onAvatarChange($event)"
4></my-actor-avatar-info>
5
6<div i18n class="form-sub-title" *ngIf="isCreation() === true">Create a video channel</div> 1<div i18n class="form-sub-title" *ngIf="isCreation() === true">Create a video channel</div>
7 2
8<div *ngIf="error" class="alert alert-danger">{{ error }}</div> 3<div *ngIf="error" class="alert alert-danger">{{ error }}</div>
@@ -24,49 +19,69 @@
24 </div> 19 </div>
25 </div> 20 </div>
26 21
27 <div class="form-group"> 22 <div class="form-row"> <!-- channel grid -->
28 <label i18n for="display-name">Display name</label> 23 <div class="form-group col-12 col-lg-4 col-xl-3">
29 <input 24 <div i18n class="video-channel-title">CHANNEL</div>
30 type="text" id="display-name"
31 formControlName="display-name" [ngClass]="{ 'input-error': formErrors['display-name'] }"
32 >
33 <div *ngIf="formErrors['display-name']" class="form-error">
34 {{ formErrors['display-name'] }}
35 </div> 25 </div>
36 </div>
37 26
38 <div class="form-group"> 27 <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
39 <label i18n for="description">Description</label> 28
40 <textarea 29 <my-actor-avatar-info
41 id="description" formControlName="description" 30 *ngIf="isCreation() === false && videoChannelToUpdate"
42 [ngClass]="{ 'input-error': formErrors['description'] }" 31 [actor]="videoChannelToUpdate" (avatarChange)="onAvatarChange($event)"
43 ></textarea> 32 ></my-actor-avatar-info>
44 <div *ngIf="formErrors.description" class="form-error"> 33
45 {{ formErrors.description }} 34 <div class="form-group">
46 </div> 35 <label i18n for="display-name">Display name</label>
47 </div> 36 <input
37 type="text" id="display-name"
38 formControlName="display-name" [ngClass]="{ 'input-error': formErrors['display-name'] }"
39 >
40 <div *ngIf="formErrors['display-name']" class="form-error">
41 {{ formErrors['display-name'] }}
42 </div>
43 </div>
44
45 <div class="form-group">
46 <label i18n for="description">Description</label>
47 <textarea
48 id="description" formControlName="description"
49 [ngClass]="{ 'input-error': formErrors['description'] }"
50 ></textarea>
51 <div *ngIf="formErrors.description" class="form-error">
52 {{ formErrors.description }}
53 </div>
54 </div>
55
56 <div class="form-group">
57 <label for="support">Support</label>
58 <my-help
59 helpType="markdownEnhanced" i18n-preHtml preHtml="Short text to tell people how they can support your channel (membership platform...).<br /><br />
60 When you will upload a video in this channel, the video support field will be automatically filled by this text."
61 ></my-help>
62 <my-markdown-textarea
63 id="support" formControlName="support" textareaWidth="500px" [previewColumn]="true" markdownType="enhanced"
64 [classes]="{ 'input-error': formErrors['support'] }"
65 ></my-markdown-textarea>
66 <div *ngIf="formErrors.support" class="form-error">
67 {{ formErrors.support }}
68 </div>
69 </div>
70
71 <div class="form-group" *ngIf="isBulkUpdateVideosDisplayed()">
72 <my-peertube-checkbox
73 inputName="bulkVideosSupportUpdate" formControlName="bulkVideosSupportUpdate"
74 i18n-labelText labelText="Overwrite support field of all videos of this channel"
75 ></my-peertube-checkbox>
76 </div>
48 77
49 <div class="form-group">
50 <label for="support">Support</label>
51 <my-help
52 helpType="markdownEnhanced" i18n-preHtml preHtml="Short text to tell people how they can support your channel (membership platform...).<br /><br />
53When you will upload a video in this channel, the video support field will be automatically filled by this text."
54 ></my-help>
55 <my-markdown-textarea
56 id="support" formControlName="support" textareaWidth="500px" [previewColumn]="true" markdownType="enhanced"
57 [classes]="{ 'input-error': formErrors['support'] }"
58 ></my-markdown-textarea>
59 <div *ngIf="formErrors.support" class="form-error">
60 {{ formErrors.support }}
61 </div> 78 </div>
62 </div> 79 </div>
63 80
64 <div class="form-group" *ngIf="isBulkUpdateVideosDisplayed()"> 81 <div class="form-row"> <!-- submit placement block -->
65 <my-peertube-checkbox 82 <div class="col-md-7 col-xl-5"></div>
66 inputName="bulkVideosSupportUpdate" formControlName="bulkVideosSupportUpdate" 83 <div class="col-md-5 col-xl-5 d-inline-flex">
67 i18n-labelText labelText="Overwrite support field of all videos of this channel" 84 <input type="submit" value="{{ getFormButtonTitle() }}" [disabled]="!form.valid">
68 ></my-peertube-checkbox> 85 </div>
69 </div> 86 </div>
70
71 <input type="submit" value="{{ getFormButtonTitle() }}" [disabled]="!form.valid">
72</form> 87</form>
diff --git a/client/src/app/+my-account/my-account-video-channels/my-account-video-channel-edit.component.scss b/client/src/app/+my-account/my-account-video-channels/my-account-video-channel-edit.component.scss
index d35e0ed64..fa6b18b37 100644
--- a/client/src/app/+my-account/my-account-video-channels/my-account-video-channel-edit.component.scss
+++ b/client/src/app/+my-account/my-account-video-channels/my-account-video-channel-edit.component.scss
@@ -1,6 +1,10 @@
1@import '_variables'; 1@import '_variables';
2@import '_mixins'; 2@import '_mixins';
3 3
4.video-channel-title {
5 @include settings-big-title;
6}
7
4.form-sub-title { 8.form-sub-title {
5 margin-bottom: 20px; 9 margin-bottom: 20px;
6} 10}
@@ -18,28 +22,44 @@ my-actor-avatar-info {
18 height: 30px; 22 height: 30px;
19} 23}
20 24
21input[type=text] { 25input {
22 @include peertube-input-text(340px); 26 &[type=text] {
23 27 @include peertube-input-text(340px);
24 display: block; 28
29 display: block;
30
31 &#name {
32 width: auto;
33 flex-grow: 1;
34 }
35 }
25 36
26 &#name { 37 &[type=submit] {
27 width: auto; 38 @include peertube-button;
28 flex-grow: 1; 39 @include orange-button;
40 margin-left: auto;
29 } 41 }
30} 42}
31 43
44label {
45 font-weight: $font-regular;
46 font-size: 100%;
47}
48
32textarea { 49textarea {
33 @include peertube-textarea(500px, 150px); 50 @include peertube-textarea(500px, 150px);
34 51
35 display: block; 52 display: block;
36} 53}
37 54
38.peertube-select-container { 55my-markdown-textarea ::ng-deep {
39 @include peertube-select-container(340px); 56 .root {
57 @media screen and (max-width: 1400px) {
58 flex-direction: column !important;
59 }
60 }
40} 61}
41 62
42input[type=submit] { 63.peertube-select-container {
43 @include peertube-button; 64 @include peertube-select-container(340px);
44 @include orange-button;
45} 65}