andras/life-towers
andras/life-towers
Watch
1
0
Fork
You've already forked life-towers
 0
Code Issues Pull requests 10 Projects Releases Packages 1 Wiki Activity Actions

Add rename page functionality

Browse source
This commit is contained in:
Andras Schmelczer 2019-09-08 16:10:33 +02:00
commit 3a1accaae1
3 changed files with 201 additions and 63 deletions
Download patch file Download diff file Expand all files Collapse all files

35
src/app/components/shared/select-add/select-add.component.html
View file

@ -1,12 +1,30 @@
<div class="select-add {{ onlyShadowBorder ? 'shadow-border' : '' }}">
<div #top class="top" (click)="toggle()">
<p [innerHTML]="selected ? selected : placeholder"></p>
<img src="assets/arrow.svg" [className]="isOpen ? 'upside-down' : ''" alt="arrow" />
<div class="select-add {{ onlyShadowBorder ? 'shadow-border' : '' }}" (click)="$event.stopPropagation()">
<div #top class="top" (click)="!editMode && toggle()">
<p [innerHTML]="selected ? selected : placeholder" *ngIf="!editMode || !selected; else editableSelected"></p>
<ng-template #editableSelected>
<input type="text" [value]="selected" (change)="changeOption(selected, $event)" />
</ng-template>
<img
src="assets/arrow.svg"
(click)="editMode && (toggle() || $event.stopPropagation())"
[className]="isOpen ? 'upside-down' : ''"
alt="arrow"
/>
</div>
<div class="bottom-container">
<div #bottom class="bottom {{ isOpen ? 'open' : '' }}">
<p *ngFor="let option of otherOptions" [innerHTML]="option" (click)="select(option)"></p>
<ng-container *ngIf="!editMode; else editableOthers">
<p *ngFor="let option of otherOptions" [innerHTML]="option" (click)="select(option)"></p>
</ng-container>
<ng-template #editableOthers>
<input
type="text"
*ngFor="let option of otherOptions"
[value]="option"
(change)="changeOption(option, $event)"
/>
</ng-template>
<input
type="text"
@ -16,7 +34,12 @@
(keyup)="handleKeys($event)"
/>
<button *ngIf="options.length <= maxItemCount" (click)="addNewOption()" [disabled]="!newOption">Add</button>
<div class="buttons">
<button *ngIf="options.length <= maxItemCount" (click)="addNewOption()" [disabled]="!newOption">Add</button>
<div *ngIf="editable" class="edit {{ editMode ? 'active' : '' }}" (click)="editMode = !editMode">
<img src="assets/pen.svg" alt="edit" />
</div>
</div>
</div>
</div>

74
src/app/components/shared/select-add/select-add.component.scss
View file

@ -19,7 +19,8 @@ $inner-padding: var(--medium-padding);
position: relative;
cursor: pointer;
p {
p,
input[type='text'] {
display: inline-block;
@include sub-title-text();
}
@ -36,7 +37,7 @@ $inner-padding: var(--medium-padding);
.bottom-container {
width: 100%;
height: 40vh;
height: 300px;
position: absolute;
overflow-y: hidden;
@ -77,6 +78,75 @@ $inner-padding: var(--medium-padding);
cursor: pointer;
}
.buttons {
height: 32px;
@media (max-width: $mobile-width) {
height: 24px;
}
position: relative;
width: 100%;
button {
margin: 0;
position: absolute;
left: 50%;
top: 50%;
transform: translateY(-50%) translateX(-50%);
}
.edit {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
margin: 0;
opacity: 0.25;
cursor: pointer;
img {
@include square(16px);
}
transition: opacity $short-animation-time;
&:before {
content: '';
display: block;
position: absolute;
bottom: calc(-1 * #{$line-height});
left: 0;
height: $line-height;
background-color: $text-color;
width: 0;
transition: width $long-animation-time;
}
@media (min-width: $mobile-width) {
&:hover {
opacity: 0.5;
}
&:hover {
&:before {
width: 100% !important;
}
}
}
&.active {
&:before {
width: 100% !important;
}
}
&.active {
opacity: 1;
}
}
}
}
.edit {
}
}

47
src/app/components/shared/select-add/select-add.component.ts
View file

@ -12,6 +12,7 @@ export class SelectAddComponent {
@Input() options: string[];
@Input() alwaysDropShadow = false;
@Input() onlyShadowBorder = false;
@Input() editable = false;
@Input() set default(value: string) {
this.selected = value;
@ -20,7 +21,20 @@ export class SelectAddComponent {
}
}
backgroundHeight: string;
private _editMode = false;
set editMode(value: boolean) {
this._editMode = value;
this.backgroundHeight = this.getBackgroundHeight();
}
get editMode(): boolean {
return this._editMode;
}
@Output() value: EventEmitter<string> = new EventEmitter();
@Output() optionChange: EventEmitter<{ from: string; to: string }> = new EventEmitter();
@ViewChild('top') top: ElementRef;
@ViewChild('bottom') bottom: ElementRef;
@ -32,6 +46,15 @@ export class SelectAddComponent {
constructor(private cancelService: CancelService) {
this.cancelService.subscribe(this, () => {
this.isOpen = false;
this.editMode = false;
});
}
changeOption(from: string, event) {
console.log(event);
this.optionChange.emit({
from,
to: event.target.value
});
}
@ -45,15 +68,6 @@ export class SelectAddComponent {
}
}
get backgroundHeight(): string {
if (this.isOpen && this.top && this.bottom) {
const topHeight = this.top.nativeElement.clientHeight;
const bottomHeight = this.bottom.nativeElement.clientHeight;
return `${topHeight + bottomHeight}px`;
}
return `100%`;
}
addNewOption() {
if (this.newOption) {
this.select(this.newOption);
@ -69,5 +83,20 @@ export class SelectAddComponent {
toggle() {
this.isOpen = !this.isOpen;
if (!this.isOpen) {
this.editMode = false;
}
this.backgroundHeight = this.getBackgroundHeight();
console.log('editable', this.editable);
}
private getBackgroundHeight(): string {
if (this.isOpen && this.top && this.bottom) {
const topHeight = this.top.nativeElement.clientHeight;
const bottomHeight = this.bottom.nativeElement.clientHeight;
console.log(topHeight, bottomHeight);
return `${topHeight + bottomHeight}px`;
}
return `100%`;
}
}