aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/+admin
diff options
context:
space:
mode:
authorKim <1877318+kimsible@users.noreply.github.com>2020-04-28 14:53:43 +0200
committerGitHub <noreply@github.com>2020-04-28 14:53:43 +0200
commitb15fe00f7409b27573e162192530bc73e3f918b1 (patch)
treea71df67cee37a60f4de573ca9347aa3262cd8463 /client/src/app/+admin
parent4682468d4d07e0864155dd2b403d93754786ea13 (diff)
downloadPeerTube-b15fe00f7409b27573e162192530bc73e3f918b1.tar.gz
PeerTube-b15fe00f7409b27573e162192530bc73e3f918b1.tar.zst
PeerTube-b15fe00f7409b27573e162192530bc73e3f918b1.zip
Add maximized mode to markdown-textarea + CSS improvements (#2660)
* Add arrows-angle-contract/expand bootstrap icons * Add grey textarea-background-color * Add maximized support to markdown-textarea + improve column display * Refactor CSS + add ResizeObservable * Replace bootstrap icons with softies * Add ResizeObserver typing definition * Add focus on textarea + Fix Observables * Propage component changes on markdown plugins * Ignore ResizeObserver not implemented in typescript yet * Move observers from constructor to click event * Add scss and css variables * Replace textareaWidth with textareaMaxWidth to fix others textareas * Clean unused css rules * Fix ResizeObserver unknown by TypeScript compiler * Set max-width: 100% for small and mobile views * Fix textarea/preview height on maximized mode * Add common padding textarea/preview side-by-side * Hide scrollbar sub-menu on small-views * Add maximized mode for mobile views * Fix sass calculate syntax * Revert custom CSS variable for inputBorderRadius and inputBorderColor * Remove unsued methods * Fix missing implement method Co-authored-by: kimsible <kimsible@users.noreply.github.com>
Diffstat (limited to 'client/src/app/+admin')
-rw-r--r--client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html12
-rw-r--r--client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.scss12
-rw-r--r--client/src/app/+admin/plugins/plugin-show-installed/plugin-show-installed.component.html4
3 files changed, 8 insertions, 20 deletions
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 b925d3d02..5703d5a2e 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
@@ -37,7 +37,7 @@
37 <div class="form-group"> 37 <div class="form-group">
38 <label i18n for="instanceDescription">Description</label><my-help helpType="markdownText"></my-help> 38 <label i18n for="instanceDescription">Description</label><my-help helpType="markdownText"></my-help>
39 <my-markdown-textarea 39 <my-markdown-textarea
40 name="instanceDescription" formControlName="description" textareaWidth="500px" [previewColumn]="true" 40 name="instanceDescription" formControlName="description" textareaMaxWidth="500px"
41 [classes]="{ 'input-error': formErrors['instance.description'] }" 41 [classes]="{ 'input-error': formErrors['instance.description'] }"
42 ></my-markdown-textarea> 42 ></my-markdown-textarea>
43 <div *ngIf="formErrors.instance.description" class="form-error">{{ formErrors.instance.description }}</div> 43 <div *ngIf="formErrors.instance.description" class="form-error">{{ formErrors.instance.description }}</div>
@@ -120,7 +120,7 @@
120 <div class="form-group"> 120 <div class="form-group">
121 <label i18n for="instanceTerms">Terms</label><my-help helpType="markdownText"></my-help> 121 <label i18n for="instanceTerms">Terms</label><my-help helpType="markdownText"></my-help>
122 <my-markdown-textarea 122 <my-markdown-textarea
123 name="instanceTerms" formControlName="terms" textareaWidth="500px" [previewColumn]="true" 123 name="instanceTerms" formControlName="terms" textareaMaxWidth="500px"
124 [ngClass]="{ 'input-error': formErrors['instance.terms'] }" 124 [ngClass]="{ 'input-error': formErrors['instance.terms'] }"
125 ></my-markdown-textarea> 125 ></my-markdown-textarea>
126 <div *ngIf="formErrors.instance.terms" class="form-error">{{ formErrors.instance.terms }}</div> 126 <div *ngIf="formErrors.instance.terms" class="form-error">{{ formErrors.instance.terms }}</div>
@@ -129,7 +129,7 @@
129 <div class="form-group"> 129 <div class="form-group">
130 <label i18n for="instanceCodeOfConduct">Code of conduct</label><my-help helpType="markdownText"></my-help> 130 <label i18n for="instanceCodeOfConduct">Code of conduct</label><my-help helpType="markdownText"></my-help>
131 <my-markdown-textarea 131 <my-markdown-textarea
132 name="instanceCodeOfConduct" formControlName="codeOfConduct" textareaWidth="500px" [previewColumn]="true" 132 name="instanceCodeOfConduct" formControlName="codeOfConduct" textareaMaxWidth="500px"
133 [ngClass]="{ 'input-error': formErrors['instance.codeOfConduct'] }" 133 [ngClass]="{ 'input-error': formErrors['instance.codeOfConduct'] }"
134 ></my-markdown-textarea> 134 ></my-markdown-textarea>
135 <div *ngIf="formErrors.instance.codeOfConduct" class="form-error">{{ formErrors.instance.codeOfConduct }}</div> 135 <div *ngIf="formErrors.instance.codeOfConduct" class="form-error">{{ formErrors.instance.codeOfConduct }}</div>
@@ -140,7 +140,7 @@
140 <div i18n class="label-small-info">Who moderates the instance? What is the policy regarding NSFW videos? Political videos? etc</div> 140 <div i18n class="label-small-info">Who moderates the instance? What is the policy regarding NSFW videos? Political videos? etc</div>
141 141
142 <my-markdown-textarea 142 <my-markdown-textarea
143 name="instanceModerationInformation" formControlName="moderationInformation" textareaWidth="500px" [previewColumn]="true" 143 name="instanceModerationInformation" formControlName="moderationInformation" textareaMaxWidth="500px"
144 [ngClass]="{ 'input-error': formErrors['instance.moderationInformation'] }" 144 [ngClass]="{ 'input-error': formErrors['instance.moderationInformation'] }"
145 ></my-markdown-textarea> 145 ></my-markdown-textarea>
146 <div *ngIf="formErrors.instance.moderationInformation" class="form-error">{{ formErrors.instance.moderationInformation }}</div> 146 <div *ngIf="formErrors.instance.moderationInformation" class="form-error">{{ formErrors.instance.moderationInformation }}</div>
@@ -161,7 +161,7 @@
161 <div i18n class="label-small-info">A single person? A non-profit? A company?</div> 161 <div i18n class="label-small-info">A single person? A non-profit? A company?</div>
162 162
163 <my-markdown-textarea 163 <my-markdown-textarea
164 name="instanceAdministrator" formControlName="administrator" textareaWidth="500px" textareaHeight="75px" [previewColumn]="true" 164 name="instanceAdministrator" formControlName="administrator" textareaMaxWidth="500px" textareaHeight="75px"
165 [classes]="{ 'input-error': formErrors['instance.administrator'] }" 165 [classes]="{ 'input-error': formErrors['instance.administrator'] }"
166 ></my-markdown-textarea> 166 ></my-markdown-textarea>
167 167
@@ -216,7 +216,7 @@
216 <div i18n class="label-small-info">i.e. 2vCore 2GB RAM, a direct the link to the server you rent, etc.</div> 216 <div i18n class="label-small-info">i.e. 2vCore 2GB RAM, a direct the link to the server you rent, etc.</div>
217 217
218 <my-markdown-textarea 218 <my-markdown-textarea
219 name="instanceHardwareInformation" formControlName="hardwareInformation" textareaWidth="500px" textareaHeight="75px" [previewColumn]="true" 219 name="instanceHardwareInformation" formControlName="hardwareInformation" textareaMaxWidth="500px" textareaHeight="75px"
220 [classes]="{ 'input-error': formErrors['instance.hardwareInformation'] }" 220 [classes]="{ 'input-error': formErrors['instance.hardwareInformation'] }"
221 ></my-markdown-textarea> 221 ></my-markdown-textarea>
222 222
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 d8bc30d55..9ee960ad6 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
@@ -68,18 +68,6 @@ textarea {
68 pointer-events: none; 68 pointer-events: none;
69} 69}
70 70
71my-markdown-textarea ::ng-deep {
72 .root {
73 @media screen and (max-width: 1400px) {
74 flex-direction: column !important;
75 }
76
77 textarea {
78 max-width: 100%;
79 }
80 }
81}
82
83.form-group-right { 71.form-group-right {
84 padding-top: 2px; 72 padding-top: 2px;
85} 73}
diff --git a/client/src/app/+admin/plugins/plugin-show-installed/plugin-show-installed.component.html b/client/src/app/+admin/plugins/plugin-show-installed/plugin-show-installed.component.html
index bf135ecbd..f3fc429ff 100644
--- a/client/src/app/+admin/plugins/plugin-show-installed/plugin-show-installed.component.html
+++ b/client/src/app/+admin/plugins/plugin-show-installed/plugin-show-installed.component.html
@@ -19,13 +19,13 @@
19 19
20 <my-markdown-textarea 20 <my-markdown-textarea
21 *ngIf="setting.type === 'markdown-text'" 21 *ngIf="setting.type === 'markdown-text'"
22 markdownType="text" [id]="setting.name" [formControlName]="setting.name" textareaWidth="500px" [previewColumn]="false" 22 markdownType="text" [id]="setting.name" [formControlName]="setting.name" textareaWidth="500px"
23 [classes]="{ 'input-error': formErrors['settings.name'] }" 23 [classes]="{ 'input-error': formErrors['settings.name'] }"
24 ></my-markdown-textarea> 24 ></my-markdown-textarea>
25 25
26 <my-markdown-textarea 26 <my-markdown-textarea
27 *ngIf="setting.type === 'markdown-enhanced'" 27 *ngIf="setting.type === 'markdown-enhanced'"
28 markdownType="enhanced" [id]="setting.name" [formControlName]="setting.name" textareaWidth="500px" [previewColumn]="false" 28 markdownType="enhanced" [id]="setting.name" [formControlName]="setting.name" textareaWidth="500px"
29 [classes]="{ 'input-error': formErrors['settings.name'] }" 29 [classes]="{ 'input-error': formErrors['settings.name'] }"
30 ></my-markdown-textarea> 30 ></my-markdown-textarea>
31 31