aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2018-02-22 18:32:31 +0100
committerChocobozzz <me@florianbigard.com>2018-02-22 18:32:31 +0100
commit8a8e02a43e346b9b777c8192a7c5cbdccb928b11 (patch)
tree9ffb8992f98b1354da9b522104d8d4289cf8e8d9 /client/src
parent81c263c86fe2a030f09e942e118551727f145b6d (diff)
downloadPeerTube-8a8e02a43e346b9b777c8192a7c5cbdccb928b11.tar.gz
PeerTube-8a8e02a43e346b9b777c8192a7c5cbdccb928b11.tar.zst
PeerTube-8a8e02a43e346b9b777c8192a7c5cbdccb928b11.zip
Add help tooltip
Diffstat (limited to 'client/src')
-rw-r--r--client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html8
-rw-r--r--client/src/app/shared/misc/help.component.html15
-rw-r--r--client/src/app/shared/misc/help.component.scss33
-rw-r--r--client/src/app/shared/misc/help.component.ts46
-rw-r--r--client/src/app/shared/shared.module.ts8
-rw-r--r--client/src/app/videos/+video-edit/shared/video-edit.component.html4
-rw-r--r--client/src/assets/images/global/help.svg12
-rw-r--r--client/src/sass/application.scss2
-rw-r--r--client/src/sass/include/_variables.scss1
9 files changed, 121 insertions, 8 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 8dca9bc04..4aef2ef6b 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
@@ -1,6 +1,6 @@
1<div class="admin-sub-title">Update PeerTube configuration</div> 1<div class="admin-sub-title">Update PeerTube configuration</div>
2 2
3<form role="form" (ngSubmit)="formValidated()" [formGroup]="form"> 3<form role="form" [formGroup]="form">
4 4
5 <div class="inner-form-title">Instance</div> 5 <div class="inner-form-title">Instance</div>
6 6
@@ -16,7 +16,7 @@
16 </div> 16 </div>
17 17
18 <div class="form-group"> 18 <div class="form-group">
19 <label for="instanceDescription">Description (markdown)</label> 19 <label for="instanceDescription">Description</label><my-help helpType="markdownText"></my-help>
20 <my-markdown-textarea 20 <my-markdown-textarea
21 id="instanceDescription" formControlName="instanceDescription" textareaWidth="500px" [previewColumn]="true" 21 id="instanceDescription" formControlName="instanceDescription" textareaWidth="500px" [previewColumn]="true"
22 [classes]="{ 'input-error': formErrors['instanceDescription'] }" 22 [classes]="{ 'input-error': formErrors['instanceDescription'] }"
@@ -27,7 +27,7 @@
27 </div> 27 </div>
28 28
29 <div class="form-group"> 29 <div class="form-group">
30 <label for="instanceTerms">Terms (markdown)</label> 30 <label for="instanceTerms">Terms</label><my-help helpType="markdownText"></my-help>
31 <my-markdown-textarea 31 <my-markdown-textarea
32 id="instanceTerms" formControlName="instanceTerms" textareaWidth="500px" [previewColumn]="true" 32 id="instanceTerms" formControlName="instanceTerms" textareaWidth="500px" [previewColumn]="true"
33 [ngClass]="{ 'input-error': formErrors['instanceTerms'] }" 33 [ngClass]="{ 'input-error': formErrors['instanceTerms'] }"
@@ -152,5 +152,5 @@
152 </div> 152 </div>
153 </div> 153 </div>
154 154
155 <input type="submit" value="Update configuration" [disabled]="!form.valid"> 155 <input (click)="formValidated()" type="submit" value="Update configuration" [disabled]="!form.valid">
156</form> 156</form>
diff --git a/client/src/app/shared/misc/help.component.html b/client/src/app/shared/misc/help.component.html
new file mode 100644
index 000000000..956095996
--- /dev/null
+++ b/client/src/app/shared/misc/help.component.html
@@ -0,0 +1,15 @@
1<ng-template #tooltipTemplate>
2 <ng-template [ngIf]="preHtml">
3 <p [innerHTML]="preHtml"></p>
4 <br />
5 </ng-template>
6
7 <p [innerHTML]="mainHtml"></p>
8
9 <ng-template [ngIf]="postHtml">
10 <br />
11 <p [innerHTML]="postHtml"></p>
12 </ng-template>
13</ng-template>
14
15<button class="help-tooltip-button" containerClass="help-tooltip" [tooltipHtml]="tooltipTemplate" triggers="focus"></button>
diff --git a/client/src/app/shared/misc/help.component.scss b/client/src/app/shared/misc/help.component.scss
new file mode 100644
index 000000000..5fe6b7366
--- /dev/null
+++ b/client/src/app/shared/misc/help.component.scss
@@ -0,0 +1,33 @@
1@import '_variables';
2@import '_mixins';
3
4.help-tooltip-button {
5 @include icon(17px);
6
7 position: relative;
8 top: -2px;
9 background-image: url('../../../assets/images/global/help.svg');
10 background-color: #fff;
11 border: none;
12}
13
14/deep/ {
15 .help-tooltip {
16 opacity: 1 !important;
17
18 .tooltip-inner {
19 text-align: left;
20 padding: 10px;
21
22 font-size: 13px;
23 font-family: $main-fonts;
24 background-color: #fff;
25 color: #000;
26 box-shadow: 0 0 6px rgba(0, 0, 0, 0.5);
27 }
28
29 ul {
30 padding-left: 20px;
31 }
32 }
33}
diff --git a/client/src/app/shared/misc/help.component.ts b/client/src/app/shared/misc/help.component.ts
new file mode 100644
index 000000000..b8530e1d4
--- /dev/null
+++ b/client/src/app/shared/misc/help.component.ts
@@ -0,0 +1,46 @@
1import { Component, Input, OnInit } from '@angular/core'
2
3@Component({
4 selector: 'my-help',
5 styleUrls: [ './help.component.scss' ],
6 templateUrl: './help.component.html'
7})
8
9export class HelpComponent implements OnInit {
10 @Input() preHtml = ''
11 @Input() postHtml = ''
12 @Input() customHtml = ''
13 @Input() helpType: 'custom' | 'markdownText' | 'markdownEnhanced' = 'custom'
14
15 mainHtml = ''
16
17 ngOnInit () {
18 if (this.helpType === 'custom') {
19 this.mainHtml = this.customHtml
20 return
21 }
22
23 if (this.helpType === 'markdownText') {
24 this.mainHtml = 'Markdown compatible.<br /><br />' +
25 'Supports:' +
26 '<ul>' +
27 '<li>Links</li>' +
28 '<li>Lists</li>' +
29 '<li>Emphasis</li>' +
30 '</ul>'
31 return
32 }
33
34 if (this.helpType === 'markdownEnhanced') {
35 this.mainHtml = 'Markdown compatible.<br /><br />' +
36 'Supports:' +
37 '<ul>' +
38 '<li>Links</li>' +
39 '<li>Lists</li>' +
40 '<li>Emphasis</li>' +
41 '<li>Images</li>' +
42 '</ul>'
43 return
44 }
45 }
46}
diff --git a/client/src/app/shared/shared.module.ts b/client/src/app/shared/shared.module.ts
index b1dfdd747..eb50d45a9 100644
--- a/client/src/app/shared/shared.module.ts
+++ b/client/src/app/shared/shared.module.ts
@@ -4,12 +4,14 @@ import { NgModule } from '@angular/core'
4import { FormsModule, ReactiveFormsModule } from '@angular/forms' 4import { FormsModule, ReactiveFormsModule } from '@angular/forms'
5import { RouterModule } from '@angular/router' 5import { RouterModule } from '@angular/router'
6import { MarkdownTextareaComponent } from '@app/shared/forms/markdown-textarea.component' 6import { MarkdownTextareaComponent } from '@app/shared/forms/markdown-textarea.component'
7import { HelpComponent } from '@app/shared/misc/help.component'
7import { InfiniteScrollerDirective } from '@app/shared/video/infinite-scroller.directive' 8import { InfiniteScrollerDirective } from '@app/shared/video/infinite-scroller.directive'
8import { MarkdownService } from '@app/videos/shared' 9import { MarkdownService } from '@app/videos/shared'
9 10
10import { BsDropdownModule } from 'ngx-bootstrap/dropdown' 11import { BsDropdownModule } from 'ngx-bootstrap/dropdown'
11import { ModalModule } from 'ngx-bootstrap/modal' 12import { ModalModule } from 'ngx-bootstrap/modal'
12import { TabsModule } from 'ngx-bootstrap/tabs' 13import { TabsModule } from 'ngx-bootstrap/tabs'
14import { TooltipModule } from 'ngx-bootstrap/tooltip'
13import { BytesPipe, KeysPipe, NgPipesModule } from 'ngx-pipes' 15import { BytesPipe, KeysPipe, NgPipesModule } from 'ngx-pipes'
14import { SharedModule as PrimeSharedModule } from 'primeng/components/common/shared' 16import { SharedModule as PrimeSharedModule } from 'primeng/components/common/shared'
15 17
@@ -38,6 +40,7 @@ import { VideoService } from './video/video.service'
38 BsDropdownModule.forRoot(), 40 BsDropdownModule.forRoot(),
39 ModalModule.forRoot(), 41 ModalModule.forRoot(),
40 TabsModule.forRoot(), 42 TabsModule.forRoot(),
43 TooltipModule.forRoot(),
41 44
42 PrimeSharedModule, 45 PrimeSharedModule,
43 NgPipesModule 46 NgPipesModule
@@ -52,7 +55,8 @@ import { VideoService } from './video/video.service'
52 NumberFormatterPipe, 55 NumberFormatterPipe,
53 FromNowPipe, 56 FromNowPipe,
54 MarkdownTextareaComponent, 57 MarkdownTextareaComponent,
55 InfiniteScrollerDirective 58 InfiniteScrollerDirective,
59 HelpComponent
56 ], 60 ],
57 61
58 exports: [ 62 exports: [
@@ -65,6 +69,7 @@ import { VideoService } from './video/video.service'
65 BsDropdownModule, 69 BsDropdownModule,
66 ModalModule, 70 ModalModule,
67 TabsModule, 71 TabsModule,
72 TooltipModule,
68 PrimeSharedModule, 73 PrimeSharedModule,
69 BytesPipe, 74 BytesPipe,
70 KeysPipe, 75 KeysPipe,
@@ -76,6 +81,7 @@ import { VideoService } from './video/video.service'
76 EditButtonComponent, 81 EditButtonComponent,
77 MarkdownTextareaComponent, 82 MarkdownTextareaComponent,
78 InfiniteScrollerDirective, 83 InfiniteScrollerDirective,
84 HelpComponent,
79 85
80 NumberFormatterPipe, 86 NumberFormatterPipe,
81 FromNowPipe 87 FromNowPipe
diff --git a/client/src/app/videos/+video-edit/shared/video-edit.component.html b/client/src/app/videos/+video-edit/shared/video-edit.component.html
index bf2204013..f88abcbf8 100644
--- a/client/src/app/videos/+video-edit/shared/video-edit.component.html
+++ b/client/src/app/videos/+video-edit/shared/video-edit.component.html
@@ -20,7 +20,7 @@
20 </div> 20 </div>
21 21
22 <div class="form-group"> 22 <div class="form-group">
23 <label for="description">Description</label> 23 <label for="description">Description</label> <my-help helpType="markdownText"></my-help>
24 <my-markdown-textarea truncate="250" formControlName="description"></my-markdown-textarea> 24 <my-markdown-textarea truncate="250" formControlName="description"></my-markdown-textarea>
25 25
26 <div *ngIf="formErrors.description" class="form-error"> 26 <div *ngIf="formErrors.description" class="form-error">
@@ -127,7 +127,7 @@
127 </div> 127 </div>
128 128
129 <div class="form-group"> 129 <div class="form-group">
130 <label for="support">Support (markdown)</label> 130 <label for="support">Support</label><my-help helpType="markdownEnhanced"></my-help>
131 <my-markdown-textarea 131 <my-markdown-textarea
132 id="support" formControlName="support" textareaWidth="500px" [previewColumn]="true" markdownType="enhanced" 132 id="support" formControlName="support" textareaWidth="500px" [previewColumn]="true" markdownType="enhanced"
133 [classes]="{ 'input-error': formErrors['support'] }" 133 [classes]="{ 'input-error': formErrors['support'] }"
diff --git a/client/src/assets/images/global/help.svg b/client/src/assets/images/global/help.svg
new file mode 100644
index 000000000..48252febe
--- /dev/null
+++ b/client/src/assets/images/global/help.svg
@@ -0,0 +1,12 @@
1<?xml version="1.0" encoding="UTF-8"?>
2<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
3 <defs></defs>
4 <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
5 <g id="Artboard-4" transform="translate(-400.000000, -247.000000)">
6 <g id="69" transform="translate(400.000000, 247.000000)">
7 <circle id="Oval-7" stroke="#333333" stroke-width="2" cx="12" cy="12" r="10"></circle>
8 <path d="M12.016,14.544 C12.384,14.544 12.64,14.256 12.704,13.904 L12.768,13.168 C14.544,12.864 16,11.952 16,9.936 L16,9.904 C16,7.904 14.48,6.656 12.24,6.656 C10.768,6.656 9.696,7.184 8.848,7.984 C8.624,8.176 8.528,8.432 8.528,8.672 C8.528,9.152 8.928,9.552 9.424,9.552 C9.648,9.552 9.856,9.456 10.016,9.328 C10.656,8.752 11.344,8.448 12.192,8.448 C13.344,8.448 14.032,9.072 14.032,9.968 L14.032,10 C14.032,11.008 13.2,11.584 11.696,11.728 C11.264,11.776 11.008,12.096 11.072,12.528 L11.232,13.904 C11.28,14.272 11.552,14.544 11.92,14.544 L12.016,14.544 Z M10.784,16.816 L10.784,16.976 C10.784,17.6 11.264,18.08 11.92,18.08 C12.576,18.08 13.056,17.6 13.056,16.976 L13.056,16.816 C13.056,16.192 12.576,15.712 11.92,15.712 C11.264,15.712 10.784,16.192 10.784,16.816 Z" id="?" fill="#333333"></path>
9 </g>
10 </g>
11 </g>
12</svg> \ No newline at end of file
diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss
index f04aef85d..f998096ae 100644
--- a/client/src/sass/application.scss
+++ b/client/src/sass/application.scss
@@ -19,7 +19,7 @@ $FontPathSourceSansPro: '../../node_modules/npm-font-source-sans-pro/fonts';
19} 19}
20 20
21body { 21body {
22 font-family: 'Source Sans Pro', sans-serif; 22 font-family: $main-fonts;
23 font-weight: $font-regular; 23 font-weight: $font-regular;
24 color: #000; 24 color: #000;
25} 25}
diff --git a/client/src/sass/include/_variables.scss b/client/src/sass/include/_variables.scss
index e7bed418e..95b4b166e 100644
--- a/client/src/sass/include/_variables.scss
+++ b/client/src/sass/include/_variables.scss
@@ -1,3 +1,4 @@
1$main-fonts: 'Source Sans Pro', sans-serif;
1$font-regular: 400; 2$font-regular: 400;
2$font-semibold: 600; 3$font-semibold: 600;
3$font-bold: 700; 4$font-bold: 700;