Skip to content

Commit

Permalink
Merge pull request #66 from Vernite/dev
Browse files Browse the repository at this point in the history
Version 1.1.1
  • Loading branch information
czemar authored Jan 20, 2023
2 parents d4a45c4 + 64a792e commit 2050355
Show file tree
Hide file tree
Showing 52 changed files with 656 additions and 166 deletions.
3 changes: 2 additions & 1 deletion angular.json
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,7 @@
],
"assets": [
"src/favicon.ico",
"src/robots.txt",
"src/assets",
{
"glob": "**/*",
Expand Down Expand Up @@ -281,4 +282,4 @@
],
"analytics": "7dc2ed6f-e15e-44f8-8497-32ad73c688d3"
}
}
}
4 changes: 2 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "vernite",
"version": "1.1.0",
"version": "1.1.1",
"scripts": {
"@------ WORKFLOW SCRIPTS --------": "",
"postinstall": "husky install",
Expand Down Expand Up @@ -163,4 +163,4 @@
"yarn-audit-fix": "^9.3.7",
"yarn-audit-html": "^4.0.0"
}
}
}
6 changes: 4 additions & 2 deletions src/app/_main/_main.module.ts
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import { TextareaAutosizeDirective } from './directives/textarea-autosize/textarea-autosize.directive';
import { DragDropModule } from '@angular/cdk/drag-drop';
import { ObserversModule } from '@angular/cdk/observers';
import { OverlayModule } from '@angular/cdk/overlay';
Expand Down Expand Up @@ -43,7 +44,7 @@ import { SelectComponent } from './components/select/select.component';
import { SidebarNavigationComponent } from './components/sidebar-navigation/sidebar-navigation.component';
import { SnackbarOutletComponent } from './components/snackbar-outlet/snackbar-outlet.component';
import { SnackbarComponent } from './components/snackbar/snackbar.component';
import { TextareaComponent } from './components/textarea/textarea.component';
import { MarkdownEditorComponent } from './components/markdown-editor/markdown-editor.component';
import { UpperNavigationComponent } from './components/upper-navigation/upper-navigation.component';
import { AlertDialog } from './dialogs/alert/alert.dialog';
import { ClickStopPropagationDirective } from './directives/click-stop-propagation/click-stop-propagation.directive';
Expand Down Expand Up @@ -161,7 +162,7 @@ const ngModuleConfig = {
SelectComponent,
OptionComponent,
MainViewComponent,
TextareaComponent,
MarkdownEditorComponent,
CheckboxComponent,
CardComponent,
ClickStopPropagationDirective,
Expand Down Expand Up @@ -202,6 +203,7 @@ const ngModuleConfig = {
TermsAndConditionsPage,
PrivacyPolicyPage,
ManualDialog,
TextareaAutosizeDirective,
],
providers: [
/*=============================================
Expand Down
47 changes: 30 additions & 17 deletions src/app/_main/components/input/input.component.html
Original file line number Diff line number Diff line change
Expand Up @@ -2,30 +2,43 @@
[class.has-value]="![null, undefined, ''].includes(control.value) || autofilledByBrowser">
<label *ngIf="staticLabel" class="static-label">{{ staticLabel }}</label>
<div class="input-wrapper">
<div class="fragment-left">
<div #fragmentLeft class="fragment-left-wrapper">
<ng-content select=".prefix"></ng-content>
<div class="fragments-wrapper">
<div class="fragment-left">
<div #fragmentLeft class="fragment-left-wrapper">
<ng-content select=".prefix"></ng-content>
</div>
</div>
<div class="fragment-middle">
<label *ngIf="floatingLabel" class="floating-label">{{ floatingLabel }}</label>
</div>
<div class="fragment-right">
<ng-container *ngIf="pending; else suffix">
<loader></loader>
</ng-container>
<ng-template #suffix>
<ng-content select=".suffix"></ng-content>
</ng-template>
</div>
</div>
<div class="fragment-middle">
<label *ngIf="floatingLabel" class="floating-label">{{ floatingLabel }}</label>
</div>
<div class="fragment-right">
<ng-container *ngIf="pending; else suffix">
<loader></loader>
</ng-container>
<ng-template #suffix>
<ng-content select=".suffix"></ng-content>
</ng-template>
</div>
<input #input [name]="name" [type]="type" [placeholder]="placeholder" [formControl]="control" [readonly]="readonly"
[autocomplete]="autocomplete" (focus)="onFocus()" (blur)="onBlur()"
<input #input *ngIf="type !== 'textarea'" [name]="name" [type]="type" [placeholder]="placeholder"
[formControl]="control" [readonly]="readonly" [autocomplete]="autocomplete" (focus)="onFocus()" (blur)="onBlur()"
[style.padding-left]="(align === 'left' ? fragmentLeft.clientWidth + 16 : 0) + 'px'">
<textarea #input *ngIf="type === 'textarea'" [name]="name" [placeholder]="placeholder" [formControl]="control"
[readonly]="readonly" [autocomplete]="autocomplete" (focus)="onFocus()" (blur)="onBlur()"
[style.padding-left]="(align === 'left' ? fragmentLeft.clientWidth + 16 : 0) + 'px'" [minRows]="4"
autosize></textarea>
<div *ngIf="type === 'textarea'" class="textarea-corner">
<svg width="6" height="6" viewBox="0 0 6 6" fill="none" xmlns="http://www.w3.org/2000/svg">
<line x1="0.999999" y1="5.29289" x2="5.29289" y2="1" stroke="white" stroke-linecap="round"
i18n-stroke-linecap />
<line x1="3" y1="5.29289" x2="5.29289" y2="3" stroke="white" stroke-linecap="round" i18n-stroke-linecap />
</svg>
</div>
<div class="overlay">
<ng-content select=".overlay"></ng-content>
</div>
</div>
<div *ngIf="control.touched && control.invalid" class="error" [class.relative]="allowResizeByError">
{{ control.errors | validationError }}
</div>
</div>
</div>
63 changes: 53 additions & 10 deletions src/app/_main/components/input/input.component.scss
Original file line number Diff line number Diff line change
Expand Up @@ -66,11 +66,21 @@ $height: 44px;
transition: transform 0.1s ease, font-size 0.1s ease;
}

.fragments-wrapper {
position: absolute;
z-index: 2;
top: 0;
left: 0;
display: flex;
width: 100%;
height: 100%;
pointer-events: none;
}

// Fragments
.fragment-left,
.fragment-middle,
.fragment-right {
z-index: 1;
height: 100%;
border: 2px solid var(--color-input-border);
pointer-events: none;
Expand All @@ -92,7 +102,7 @@ $height: 44px;

.fragment-middle {
display: flex;
align-items: center;
padding-top: calc(22px - 0.75em);
border-right-width: 0;
border-left-width: 0;
}
Expand All @@ -112,36 +122,67 @@ $height: 44px;
position: relative;
display: flex;
width: 100%;
height: $height;
background-color: var(--color-input-background);
border-radius: var(--border-radius);
transition: background-color 0.1s ease-in-out;

&:hover {
.textarea-corner {
background-color: var(--color-input-background-hover);
}

background-color: var(--color-input-background-hover);
}
}

input {
input,
textarea {
@include text-base;

position: absolute;
top: 0;
width: 100%;
height: 100%;
min-height: $height;
padding-left: calc($padding-left + 0.4rem);
background-color: var(--color-input-background);
background-color: transparent;
border-radius: var(--border-radius);
color: var(--color-text);
}

textarea {
padding-top: 0.8rem;
padding-bottom: 0.8rem;
}

.textarea-corner {
position: absolute;
z-index: 1;
right: 0;
bottom: 0;
display: flex;
width: 1rem;
height: 1rem;
align-items: center;
justify-content: center;
background-color: var(--color-secondary-500);
pointer-events: none;
transform: translateX(-2px) translateY(-2px);
transition: background-color 0.1s ease-in-out;

svg {
transform: scale(2);

line {
stroke: var(--color-secondary-300);
}
}
}
}

.has-value,
:host.focused {
.floating-label {
font-size: 0.75em;
transform: translateY(calc($height / -2));
transform: translateY(calc($height / -2 + 4px));
}

.fragment-middle {
Expand All @@ -150,7 +191,9 @@ $height: 44px;
}

:host:not(.focused) {
input::placeholder {

input::placeholder,
textarea::placeholder {
opacity: 0;
}
}
Expand Down Expand Up @@ -212,4 +255,4 @@ input::-webkit-inner-spin-button {
/* Firefox */
input[type=number] {
-moz-appearance: textfield;
}
}
2 changes: 1 addition & 1 deletion src/app/_main/components/input/input.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ import { ControlAccessor } from '../../classes/control-accessor/control-accessor
})
export class InputComponent extends ControlAccessor implements AfterViewInit {
/** Type of the input */
@Input() type: 'text' | 'number' | 'email' | 'password' = 'text';
@Input() type: 'text' | 'number' | 'email' | 'password' | 'textarea' = 'text';

/** Floating label text to display */
@Input() floatingLabel?: string;
Expand Down
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
import { TextareaComponent } from './textarea.component';
import { MarkdownEditorComponent } from './markdown-editor.component';
import { NgControl } from '@angular/forms';
import { Shallow } from 'shallow-render';
import { MainModule } from '../../_main.module';
import { TestNgControl } from '../../../../tests/helpers/ng-control-testing-provider.helper';

describe('TextareaComponent', () => {
let shallow: Shallow<TextareaComponent>;
let shallow: Shallow<MarkdownEditorComponent>;

beforeEach(() => {
shallow = new Shallow(TextareaComponent, MainModule).provide({
shallow = new Shallow(MarkdownEditorComponent, MainModule).provide({
provide: NgControl,
useClass: TestNgControl,
});
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -14,15 +14,15 @@ import {
faUnderline,
} from '@fortawesome/free-solid-svg-icons';
import { Marked } from '@main/libs/marked/marked.lib';
import './textarea.theme';
import './markdown-editor.theme';
import { SelectionEditPlugin } from '../../libs/monaco/plugins/selection-edit.plugin';

@Component({
selector: 'app-textarea',
templateUrl: './textarea.component.html',
styleUrls: ['./textarea.component.scss'],
selector: 'markdown-editor',
templateUrl: './markdown-editor.component.html',
styleUrls: ['./markdown-editor.component.scss'],
})
export class TextareaComponent extends ControlAccessor implements OnInit {
export class MarkdownEditorComponent extends ControlAccessor implements OnInit {
/**
* Floating label text to display
*/
Expand Down
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
import { DOCS_SELECT, DOCS_READONLY } from '../../../../stories/helpers/arg-type.helper';
import { FormControl } from '@ngneat/reactive-forms';
import { TextareaComponent } from './textarea.component';
import { MarkdownEditorComponent } from './markdown-editor.component';
import { FormControlStoryPageConfig } from 'src/stories/helpers/classes/form-control-story-page-config.class';
import { StoryTemplate } from 'src/stories/helpers/classes/story-template.class';
import { Story } from 'src/stories/helpers/classes/story.class';

const config = new FormControlStoryPageConfig({
title: 'Components/Textarea',
component: TextareaComponent,
selector: 'app-textarea',
component: MarkdownEditorComponent,
selector: 'markdown-editor',
argTypes: {
autocomplete: DOCS_SELECT,
input: DOCS_READONLY,
Expand Down
9 changes: 4 additions & 5 deletions src/app/_main/dialogs/report-bug/report-bug.dialog.html
Original file line number Diff line number Diff line change
Expand Up @@ -3,17 +3,16 @@ <h1 mat-dialog-title i18n>Bug report</h1>
<form (submit)="send()" [formGroup]="form" autocomplete="off">

<!-- Title field -->
<app-input floatingLabel="Title" formControlName="title" i18n-floatingLabel
i18n-placeholder>
<app-input floatingLabel="Title" formControlName="title" i18n-floatingLabel i18n-placeholder>
</app-input>

<!-- Description field -->
<app-textarea floatingLabel="Description" formControlName="description"
i18n-floatingLabel i18n-placeholder [rows]="4"></app-textarea>
<app-input type="textarea" floatingLabel="Description" formControlName="description" i18n-floatingLabel
i18n-placeholder></app-input>

</form>
</div>
<div mat-dialog-actions>
<app-button mat-button (click)="cancel()" i18n>Cancel</app-button>
<app-button (click)="send()" variant="primary" i18n>Send</app-button>
</div>
</div>
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
import { Directive, Input, HostBinding, Optional, OnInit } from '@angular/core';
import { NgControl, AbstractControl } from '@angular/forms';
import { untilDestroyed, UntilDestroy } from '@ngneat/until-destroy';
import { startWith } from 'rxjs';

@UntilDestroy()
@Directive({
selector: 'textarea[autosize]',
})
export class TextareaAutosizeDirective implements OnInit {
@HostBinding('rows')
public rows!: number;

@Input()
public minRows: number = 1;

@Input()
public maxRows: number = 10;

@HostBinding('style.max-height')
public maxHeight: string = '400px';

private _control?: AbstractControl;

constructor(@Optional() private ngControl: NgControl) {}

ngOnInit() {
console.log('ngOnInit', this.ngControl.control);
if (this.ngControl.control) {
return this.ngOnControlInit();
}

const _setUpControl = (this.ngControl as any)._setUpControl;
(this.ngControl as any)._setUpControl = (...args: any[]) => {
const tmp = _setUpControl.apply(this.ngControl, ...args);

this.ngOnControlInit();
return tmp;
};
}

ngOnControlInit() {
this._control = this.ngControl.control!;
this._control.valueChanges
.pipe(startWith(null), untilDestroyed(this))
.subscribe(() => this.resize());
}

private resize() {
if (this._control?.value) {
this.rows = Math.min(
this.maxRows,
Math.max(this.minRows, this._control.value.split('\n').length),
);
} else {
this.rows = this.minRows;
}
}
}
Loading

0 comments on commit 2050355

Please sign in to comment.