aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/shared
diff options
context:
space:
mode:
Diffstat (limited to 'client/src/app/shared')
-rw-r--r--client/src/app/shared/shared-forms/index.ts1
-rw-r--r--client/src/app/shared/shared-forms/input-switch.component.html4
-rw-r--r--client/src/app/shared/shared-forms/input-switch.component.scss44
-rw-r--r--client/src/app/shared/shared-forms/input-switch.component.ts38
-rw-r--r--client/src/app/shared/shared-forms/shared-form.module.ts10
-rw-r--r--client/src/app/shared/shared-forms/timestamp-input.component.scss5
6 files changed, 98 insertions, 4 deletions
diff --git a/client/src/app/shared/shared-forms/index.ts b/client/src/app/shared/shared-forms/index.ts
index b2c7fa9ba..66b426191 100644
--- a/client/src/app/shared/shared-forms/index.ts
+++ b/client/src/app/shared/shared-forms/index.ts
@@ -2,6 +2,7 @@ export * from './form-validator.service'
2export * from './form-reactive' 2export * from './form-reactive'
3export * from './select' 3export * from './select'
4export * from './input-readonly-copy.component' 4export * from './input-readonly-copy.component'
5export * from './input-switch.component'
5export * from './markdown-textarea.component' 6export * from './markdown-textarea.component'
6export * from './peertube-checkbox.component' 7export * from './peertube-checkbox.component'
7export * from './preview-upload.component' 8export * from './preview-upload.component'
diff --git a/client/src/app/shared/shared-forms/input-switch.component.html b/client/src/app/shared/shared-forms/input-switch.component.html
new file mode 100644
index 000000000..ce1dee470
--- /dev/null
+++ b/client/src/app/shared/shared-forms/input-switch.component.html
@@ -0,0 +1,4 @@
1<div (click)="update()">
2 <input type="checkbox" [checked]="checked"/>
3 <label class="ml-auto">Toggle</label>
4</div>
diff --git a/client/src/app/shared/shared-forms/input-switch.component.scss b/client/src/app/shared/shared-forms/input-switch.component.scss
new file mode 100644
index 000000000..c14950bd7
--- /dev/null
+++ b/client/src/app/shared/shared-forms/input-switch.component.scss
@@ -0,0 +1,44 @@
1@import '_variables';
2@import '_mixins';
3
4input {
5 position: absolute;
6 visibility: hidden;
7
8 & + label {
9 cursor: pointer;
10 text-indent: -9999px;
11 width: 35px;
12 height: 20px;
13 background: #cccccc;
14 display: block;
15 border-radius: 100px;
16 position: relative;
17 margin: 0;
18
19 &:after {
20 content: '';
21 position: absolute;
22 top: 3px;
23 left: 3px;
24 width: 14px;
25 height: 14px;
26 background: pvar(--mainBackgroundColor);
27 border-radius: 50%;
28 transition: 0.3s ease-out;
29 }
30
31 &:active:after {
32 width: 40px;
33 }
34 }
35
36 &:checked + label {
37 background: pvar(--mainColor);
38
39 &:after {
40 left: calc(100% - 3px);
41 transform: translateX(-100%);
42 }
43 }
44}
diff --git a/client/src/app/shared/shared-forms/input-switch.component.ts b/client/src/app/shared/shared-forms/input-switch.component.ts
new file mode 100644
index 000000000..abb96de62
--- /dev/null
+++ b/client/src/app/shared/shared-forms/input-switch.component.ts
@@ -0,0 +1,38 @@
1import { Component, forwardRef, Input } from '@angular/core'
2import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'
3
4@Component({
5 selector: 'my-input-switch',
6 styleUrls: [ './input-switch.component.scss' ],
7 templateUrl: './input-switch.component.html',
8 providers: [
9 {
10 provide: NG_VALUE_ACCESSOR,
11 useExisting: forwardRef(() => InputSwitchComponent),
12 multi: true
13 }
14 ]
15})
16export class InputSwitchComponent implements ControlValueAccessor {
17 @Input() checked = false
18 @Input() inputName: string
19
20 propagateChange = (_: any) => { /* empty */ }
21
22 writeValue (checked: boolean) {
23 this.checked = checked
24 }
25
26 registerOnChange (fn: (_: any) => void) {
27 this.propagateChange = fn
28 }
29
30 registerOnTouched () {
31 // Unused
32 }
33
34 update () {
35 this.checked = !this.checked
36 this.propagateChange(this.checked)
37 }
38}
diff --git a/client/src/app/shared/shared-forms/shared-form.module.ts b/client/src/app/shared/shared-forms/shared-form.module.ts
index a28988f87..060abc995 100644
--- a/client/src/app/shared/shared-forms/shared-form.module.ts
+++ b/client/src/app/shared/shared-forms/shared-form.module.ts
@@ -1,13 +1,14 @@
1 1
2import { InputMaskModule } from 'primeng/inputmask' 2import { InputMaskModule } from 'primeng/inputmask'
3import { InputSwitchModule } from 'primeng/inputswitch'
4import { NgModule } from '@angular/core' 3import { NgModule } from '@angular/core'
5import { FormsModule, ReactiveFormsModule } from '@angular/forms' 4import { FormsModule, ReactiveFormsModule } from '@angular/forms'
6import { NgSelectModule } from '@ng-select/ng-select' 5import { NgSelectModule } from '@ng-select/ng-select'
7import { SharedGlobalIconModule } from '../shared-icons' 6import { SharedGlobalIconModule } from '../shared-icons'
8import { SharedMainModule } from '../shared-main/shared-main.module' 7import { SharedMainModule } from '../shared-main/shared-main.module'
8import { DynamicFormFieldComponent } from './dynamic-form-field.component'
9import { FormValidatorService } from './form-validator.service' 9import { FormValidatorService } from './form-validator.service'
10import { InputReadonlyCopyComponent } from './input-readonly-copy.component' 10import { InputReadonlyCopyComponent } from './input-readonly-copy.component'
11import { InputSwitchComponent } from './input-switch.component'
11import { MarkdownTextareaComponent } from './markdown-textarea.component' 12import { MarkdownTextareaComponent } from './markdown-textarea.component'
12import { PeertubeCheckboxComponent } from './peertube-checkbox.component' 13import { PeertubeCheckboxComponent } from './peertube-checkbox.component'
13import { PreviewUploadComponent } from './preview-upload.component' 14import { PreviewUploadComponent } from './preview-upload.component'
@@ -15,7 +16,6 @@ import { ReactiveFileComponent } from './reactive-file.component'
15import { SelectChannelComponent, SelectCheckboxComponent, SelectOptionsComponent, SelectTagsComponent } from './select' 16import { SelectChannelComponent, SelectCheckboxComponent, SelectOptionsComponent, SelectTagsComponent } from './select'
16import { TextareaAutoResizeDirective } from './textarea-autoresize.directive' 17import { TextareaAutoResizeDirective } from './textarea-autoresize.directive'
17import { TimestampInputComponent } from './timestamp-input.component' 18import { TimestampInputComponent } from './timestamp-input.component'
18import { DynamicFormFieldComponent } from './dynamic-form-field.component'
19 19
20@NgModule({ 20@NgModule({
21 imports: [ 21 imports: [
@@ -23,7 +23,6 @@ import { DynamicFormFieldComponent } from './dynamic-form-field.component'
23 ReactiveFormsModule, 23 ReactiveFormsModule,
24 24
25 InputMaskModule, 25 InputMaskModule,
26 InputSwitchModule,
27 NgSelectModule, 26 NgSelectModule,
28 27
29 SharedMainModule, 28 SharedMainModule,
@@ -39,6 +38,8 @@ import { DynamicFormFieldComponent } from './dynamic-form-field.component'
39 TextareaAutoResizeDirective, 38 TextareaAutoResizeDirective,
40 TimestampInputComponent, 39 TimestampInputComponent,
41 40
41 InputSwitchComponent,
42
42 SelectChannelComponent, 43 SelectChannelComponent,
43 SelectOptionsComponent, 44 SelectOptionsComponent,
44 SelectTagsComponent, 45 SelectTagsComponent,
@@ -52,7 +53,6 @@ import { DynamicFormFieldComponent } from './dynamic-form-field.component'
52 ReactiveFormsModule, 53 ReactiveFormsModule,
53 54
54 InputMaskModule, 55 InputMaskModule,
55 InputSwitchModule,
56 NgSelectModule, 56 NgSelectModule,
57 57
58 InputReadonlyCopyComponent, 58 InputReadonlyCopyComponent,
@@ -63,6 +63,8 @@ import { DynamicFormFieldComponent } from './dynamic-form-field.component'
63 TextareaAutoResizeDirective, 63 TextareaAutoResizeDirective,
64 TimestampInputComponent, 64 TimestampInputComponent,
65 65
66 InputSwitchComponent,
67
66 SelectChannelComponent, 68 SelectChannelComponent,
67 SelectOptionsComponent, 69 SelectOptionsComponent,
68 SelectTagsComponent, 70 SelectTagsComponent,
diff --git a/client/src/app/shared/shared-forms/timestamp-input.component.scss b/client/src/app/shared/shared-forms/timestamp-input.component.scss
index 8092b095b..66e9aa032 100644
--- a/client/src/app/shared/shared-forms/timestamp-input.component.scss
+++ b/client/src/app/shared/shared-forms/timestamp-input.component.scss
@@ -11,5 +11,10 @@ p-inputmask {
11 &:focus { 11 &:focus {
12 box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest); 12 box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest);
13 } 13 }
14
15 &:disabled {
16 background: pvar(--mainBackgroundColor);
17 opacity: 0.5;
18 }
14 } 19 }
15} 20}