mirror of https://github.com/Chocobozzz/PeerTube
Add help tooltip
parent
81c263c86f
commit
8a8e02a43e
|
@ -1,6 +1,6 @@
|
|||
<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>
|
||||
|
||||
|
@ -16,7 +16,7 @@
|
|||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="instanceDescription">Description (markdown)</label>
|
||||
<label for="instanceDescription">Description</label><my-help helpType="markdownText"></my-help>
|
||||
<my-markdown-textarea
|
||||
id="instanceDescription" formControlName="instanceDescription" textareaWidth="500px" [previewColumn]="true"
|
||||
[classes]="{ 'input-error': formErrors['instanceDescription'] }"
|
||||
|
@ -27,7 +27,7 @@
|
|||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="instanceTerms">Terms (markdown)</label>
|
||||
<label for="instanceTerms">Terms</label><my-help helpType="markdownText"></my-help>
|
||||
<my-markdown-textarea
|
||||
id="instanceTerms" formControlName="instanceTerms" textareaWidth="500px" [previewColumn]="true"
|
||||
[ngClass]="{ 'input-error': formErrors['instanceTerms'] }"
|
||||
|
@ -152,5 +152,5 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<input type="submit" value="Update configuration" [disabled]="!form.valid">
|
||||
<input (click)="formValidated()" type="submit" value="Update configuration" [disabled]="!form.valid">
|
||||
</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 { RouterModule } from '@angular/router'
|
||||
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 { MarkdownService } from '@app/videos/shared'
|
||||
|
||||
import { BsDropdownModule } from 'ngx-bootstrap/dropdown'
|
||||
import { ModalModule } from 'ngx-bootstrap/modal'
|
||||
import { TabsModule } from 'ngx-bootstrap/tabs'
|
||||
import { TooltipModule } from 'ngx-bootstrap/tooltip'
|
||||
import { BytesPipe, KeysPipe, NgPipesModule } from 'ngx-pipes'
|
||||
import { SharedModule as PrimeSharedModule } from 'primeng/components/common/shared'
|
||||
|
||||
|
@ -38,6 +40,7 @@ import { VideoService } from './video/video.service'
|
|||
BsDropdownModule.forRoot(),
|
||||
ModalModule.forRoot(),
|
||||
TabsModule.forRoot(),
|
||||
TooltipModule.forRoot(),
|
||||
|
||||
PrimeSharedModule,
|
||||
NgPipesModule
|
||||
|
@ -52,7 +55,8 @@ import { VideoService } from './video/video.service'
|
|||
NumberFormatterPipe,
|
||||
FromNowPipe,
|
||||
MarkdownTextareaComponent,
|
||||
InfiniteScrollerDirective
|
||||
InfiniteScrollerDirective,
|
||||
HelpComponent
|
||||
],
|
||||
|
||||
exports: [
|
||||
|
@ -65,6 +69,7 @@ import { VideoService } from './video/video.service'
|
|||
BsDropdownModule,
|
||||
ModalModule,
|
||||
TabsModule,
|
||||
TooltipModule,
|
||||
PrimeSharedModule,
|
||||
BytesPipe,
|
||||
KeysPipe,
|
||||
|
@ -76,6 +81,7 @@ import { VideoService } from './video/video.service'
|
|||
EditButtonComponent,
|
||||
MarkdownTextareaComponent,
|
||||
InfiniteScrollerDirective,
|
||||
HelpComponent,
|
||||
|
||||
NumberFormatterPipe,
|
||||
FromNowPipe
|
||||
|
|
|
@ -20,7 +20,7 @@
|
|||
</div>
|
||||
|
||||
<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>
|
||||
|
||||
<div *ngIf="formErrors.description" class="form-error">
|
||||
|
@ -127,7 +127,7 @@
|
|||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="support">Support (markdown)</label>
|
||||
<label for="support">Support</label><my-help helpType="markdownEnhanced"></my-help>
|
||||
<my-markdown-textarea
|
||||
id="support" formControlName="support" textareaWidth="500px" [previewColumn]="true" markdownType="enhanced"
|
||||
[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 {
|
||||
font-family: 'Source Sans Pro', sans-serif;
|
||||
font-family: $main-fonts;
|
||||
font-weight: $font-regular;
|
||||
color: #000;
|
||||
}
|
||||
|
|
|
@ -1,3 +1,4 @@
|
|||
$main-fonts: 'Source Sans Pro', sans-serif;
|
||||
$font-regular: 400;
|
||||
$font-semibold: 600;
|
||||
$font-bold: 700;
|
||||
|
|
Loading…
Reference in New Issue