Add help tooltip
This commit is contained in:
parent
81c263c86f
commit
8a8e02a43e
|
@ -1,6 +1,6 @@
|
||||||
<div class="admin-sub-title">Update PeerTube configuration</div>
|
<div class="admin-sub-title">Update PeerTube configuration</div>
|
||||||
|
|
||||||
<form role="form" (ngSubmit)="formValidated()" [formGroup]="form">
|
<form role="form" [formGroup]="form">
|
||||||
|
|
||||||
<div class="inner-form-title">Instance</div>
|
<div class="inner-form-title">Instance</div>
|
||||||
|
|
||||||
|
@ -16,7 +16,7 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<label for="instanceDescription">Description (markdown)</label>
|
<label for="instanceDescription">Description</label><my-help helpType="markdownText"></my-help>
|
||||||
<my-markdown-textarea
|
<my-markdown-textarea
|
||||||
id="instanceDescription" formControlName="instanceDescription" textareaWidth="500px" [previewColumn]="true"
|
id="instanceDescription" formControlName="instanceDescription" textareaWidth="500px" [previewColumn]="true"
|
||||||
[classes]="{ 'input-error': formErrors['instanceDescription'] }"
|
[classes]="{ 'input-error': formErrors['instanceDescription'] }"
|
||||||
|
@ -27,7 +27,7 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<label for="instanceTerms">Terms (markdown)</label>
|
<label for="instanceTerms">Terms</label><my-help helpType="markdownText"></my-help>
|
||||||
<my-markdown-textarea
|
<my-markdown-textarea
|
||||||
id="instanceTerms" formControlName="instanceTerms" textareaWidth="500px" [previewColumn]="true"
|
id="instanceTerms" formControlName="instanceTerms" textareaWidth="500px" [previewColumn]="true"
|
||||||
[ngClass]="{ 'input-error': formErrors['instanceTerms'] }"
|
[ngClass]="{ 'input-error': formErrors['instanceTerms'] }"
|
||||||
|
@ -152,5 +152,5 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<input type="submit" value="Update configuration" [disabled]="!form.valid">
|
<input (click)="formValidated()" type="submit" value="Update configuration" [disabled]="!form.valid">
|
||||||
</form>
|
</form>
|
||||||
|
|
|
@ -0,0 +1,15 @@
|
||||||
|
<ng-template #tooltipTemplate>
|
||||||
|
<ng-template [ngIf]="preHtml">
|
||||||
|
<p [innerHTML]="preHtml"></p>
|
||||||
|
<br />
|
||||||
|
</ng-template>
|
||||||
|
|
||||||
|
<p [innerHTML]="mainHtml"></p>
|
||||||
|
|
||||||
|
<ng-template [ngIf]="postHtml">
|
||||||
|
<br />
|
||||||
|
<p [innerHTML]="postHtml"></p>
|
||||||
|
</ng-template>
|
||||||
|
</ng-template>
|
||||||
|
|
||||||
|
<button class="help-tooltip-button" containerClass="help-tooltip" [tooltipHtml]="tooltipTemplate" triggers="focus"></button>
|
|
@ -0,0 +1,33 @@
|
||||||
|
@import '_variables';
|
||||||
|
@import '_mixins';
|
||||||
|
|
||||||
|
.help-tooltip-button {
|
||||||
|
@include icon(17px);
|
||||||
|
|
||||||
|
position: relative;
|
||||||
|
top: -2px;
|
||||||
|
background-image: url('../../../assets/images/global/help.svg');
|
||||||
|
background-color: #fff;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/deep/ {
|
||||||
|
.help-tooltip {
|
||||||
|
opacity: 1 !important;
|
||||||
|
|
||||||
|
.tooltip-inner {
|
||||||
|
text-align: left;
|
||||||
|
padding: 10px;
|
||||||
|
|
||||||
|
font-size: 13px;
|
||||||
|
font-family: $main-fonts;
|
||||||
|
background-color: #fff;
|
||||||
|
color: #000;
|
||||||
|
box-shadow: 0 0 6px rgba(0, 0, 0, 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
ul {
|
||||||
|
padding-left: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
|
@ -0,0 +1,46 @@
|
||||||
|
import { Component, Input, OnInit } from '@angular/core'
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'my-help',
|
||||||
|
styleUrls: [ './help.component.scss' ],
|
||||||
|
templateUrl: './help.component.html'
|
||||||
|
})
|
||||||
|
|
||||||
|
export class HelpComponent implements OnInit {
|
||||||
|
@Input() preHtml = ''
|
||||||
|
@Input() postHtml = ''
|
||||||
|
@Input() customHtml = ''
|
||||||
|
@Input() helpType: 'custom' | 'markdownText' | 'markdownEnhanced' = 'custom'
|
||||||
|
|
||||||
|
mainHtml = ''
|
||||||
|
|
||||||
|
ngOnInit () {
|
||||||
|
if (this.helpType === 'custom') {
|
||||||
|
this.mainHtml = this.customHtml
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.helpType === 'markdownText') {
|
||||||
|
this.mainHtml = 'Markdown compatible.<br /><br />' +
|
||||||
|
'Supports:' +
|
||||||
|
'<ul>' +
|
||||||
|
'<li>Links</li>' +
|
||||||
|
'<li>Lists</li>' +
|
||||||
|
'<li>Emphasis</li>' +
|
||||||
|
'</ul>'
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.helpType === 'markdownEnhanced') {
|
||||||
|
this.mainHtml = 'Markdown compatible.<br /><br />' +
|
||||||
|
'Supports:' +
|
||||||
|
'<ul>' +
|
||||||
|
'<li>Links</li>' +
|
||||||
|
'<li>Lists</li>' +
|
||||||
|
'<li>Emphasis</li>' +
|
||||||
|
'<li>Images</li>' +
|
||||||
|
'</ul>'
|
||||||
|
return
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
|
@ -4,12 +4,14 @@ import { NgModule } from '@angular/core'
|
||||||
import { FormsModule, ReactiveFormsModule } from '@angular/forms'
|
import { FormsModule, ReactiveFormsModule } from '@angular/forms'
|
||||||
import { RouterModule } from '@angular/router'
|
import { RouterModule } from '@angular/router'
|
||||||
import { MarkdownTextareaComponent } from '@app/shared/forms/markdown-textarea.component'
|
import { MarkdownTextareaComponent } from '@app/shared/forms/markdown-textarea.component'
|
||||||
|
import { HelpComponent } from '@app/shared/misc/help.component'
|
||||||
import { InfiniteScrollerDirective } from '@app/shared/video/infinite-scroller.directive'
|
import { InfiniteScrollerDirective } from '@app/shared/video/infinite-scroller.directive'
|
||||||
import { MarkdownService } from '@app/videos/shared'
|
import { MarkdownService } from '@app/videos/shared'
|
||||||
|
|
||||||
import { BsDropdownModule } from 'ngx-bootstrap/dropdown'
|
import { BsDropdownModule } from 'ngx-bootstrap/dropdown'
|
||||||
import { ModalModule } from 'ngx-bootstrap/modal'
|
import { ModalModule } from 'ngx-bootstrap/modal'
|
||||||
import { TabsModule } from 'ngx-bootstrap/tabs'
|
import { TabsModule } from 'ngx-bootstrap/tabs'
|
||||||
|
import { TooltipModule } from 'ngx-bootstrap/tooltip'
|
||||||
import { BytesPipe, KeysPipe, NgPipesModule } from 'ngx-pipes'
|
import { BytesPipe, KeysPipe, NgPipesModule } from 'ngx-pipes'
|
||||||
import { SharedModule as PrimeSharedModule } from 'primeng/components/common/shared'
|
import { SharedModule as PrimeSharedModule } from 'primeng/components/common/shared'
|
||||||
|
|
||||||
|
@ -38,6 +40,7 @@ import { VideoService } from './video/video.service'
|
||||||
BsDropdownModule.forRoot(),
|
BsDropdownModule.forRoot(),
|
||||||
ModalModule.forRoot(),
|
ModalModule.forRoot(),
|
||||||
TabsModule.forRoot(),
|
TabsModule.forRoot(),
|
||||||
|
TooltipModule.forRoot(),
|
||||||
|
|
||||||
PrimeSharedModule,
|
PrimeSharedModule,
|
||||||
NgPipesModule
|
NgPipesModule
|
||||||
|
@ -52,7 +55,8 @@ import { VideoService } from './video/video.service'
|
||||||
NumberFormatterPipe,
|
NumberFormatterPipe,
|
||||||
FromNowPipe,
|
FromNowPipe,
|
||||||
MarkdownTextareaComponent,
|
MarkdownTextareaComponent,
|
||||||
InfiniteScrollerDirective
|
InfiniteScrollerDirective,
|
||||||
|
HelpComponent
|
||||||
],
|
],
|
||||||
|
|
||||||
exports: [
|
exports: [
|
||||||
|
@ -65,6 +69,7 @@ import { VideoService } from './video/video.service'
|
||||||
BsDropdownModule,
|
BsDropdownModule,
|
||||||
ModalModule,
|
ModalModule,
|
||||||
TabsModule,
|
TabsModule,
|
||||||
|
TooltipModule,
|
||||||
PrimeSharedModule,
|
PrimeSharedModule,
|
||||||
BytesPipe,
|
BytesPipe,
|
||||||
KeysPipe,
|
KeysPipe,
|
||||||
|
@ -76,6 +81,7 @@ import { VideoService } from './video/video.service'
|
||||||
EditButtonComponent,
|
EditButtonComponent,
|
||||||
MarkdownTextareaComponent,
|
MarkdownTextareaComponent,
|
||||||
InfiniteScrollerDirective,
|
InfiniteScrollerDirective,
|
||||||
|
HelpComponent,
|
||||||
|
|
||||||
NumberFormatterPipe,
|
NumberFormatterPipe,
|
||||||
FromNowPipe
|
FromNowPipe
|
||||||
|
|
|
@ -20,7 +20,7 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<label for="description">Description</label>
|
<label for="description">Description</label> <my-help helpType="markdownText"></my-help>
|
||||||
<my-markdown-textarea truncate="250" formControlName="description"></my-markdown-textarea>
|
<my-markdown-textarea truncate="250" formControlName="description"></my-markdown-textarea>
|
||||||
|
|
||||||
<div *ngIf="formErrors.description" class="form-error">
|
<div *ngIf="formErrors.description" class="form-error">
|
||||||
|
@ -127,7 +127,7 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<label for="support">Support (markdown)</label>
|
<label for="support">Support</label><my-help helpType="markdownEnhanced"></my-help>
|
||||||
<my-markdown-textarea
|
<my-markdown-textarea
|
||||||
id="support" formControlName="support" textareaWidth="500px" [previewColumn]="true" markdownType="enhanced"
|
id="support" formControlName="support" textareaWidth="500px" [previewColumn]="true" markdownType="enhanced"
|
||||||
[classes]="{ 'input-error': formErrors['support'] }"
|
[classes]="{ 'input-error': formErrors['support'] }"
|
||||||
|
|
|
@ -0,0 +1,12 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<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">
|
||||||
|
<defs></defs>
|
||||||
|
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||||
|
<g id="Artboard-4" transform="translate(-400.000000, -247.000000)">
|
||||||
|
<g id="69" transform="translate(400.000000, 247.000000)">
|
||||||
|
<circle id="Oval-7" stroke="#333333" stroke-width="2" cx="12" cy="12" r="10"></circle>
|
||||||
|
<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>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
After Width: | Height: | Size: 1.4 KiB |
|
@ -19,7 +19,7 @@ $FontPathSourceSansPro: '../../node_modules/npm-font-source-sans-pro/fonts';
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
font-family: 'Source Sans Pro', sans-serif;
|
font-family: $main-fonts;
|
||||||
font-weight: $font-regular;
|
font-weight: $font-regular;
|
||||||
color: #000;
|
color: #000;
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,3 +1,4 @@
|
||||||
|
$main-fonts: 'Source Sans Pro', sans-serif;
|
||||||
$font-regular: 400;
|
$font-regular: 400;
|
||||||
$font-semibold: 600;
|
$font-semibold: 600;
|
||||||
$font-bold: 700;
|
$font-bold: 700;
|
||||||
|
|
Loading…
Reference in New Issue