Marmelator/common-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Editable input improvement

Browse Source
This commit is contained in:
Adina Țeudan 2022-12-13 21:31:07 +02:00
parent 8208fdb1ba
commit 88b98f334c
2 changed files with 20 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
src/lib/inputs/editable-input/editable-input.component.html
View File

@ -3,15 +3,17 @@
{{ value }}
</div>
<iqser-circle-button
(action)="editing = true"
[tooltip]="editTooltip"
[type]="buttonsType"
class="edit-button"
icon="iqser:edit"
></iqser-circle-button>
<div class="d-flex">
<iqser-circle-button
(action)="editing = true"
[tooltip]="editTooltip"
[type]="buttonsType"
class="edit-button"
icon="iqser:edit"
></iqser-circle-button>
<ng-content select="[slot=editing]"></ng-content>
<ng-content select="[slot=editing]"></ng-content>
</div>
</ng-container>
<ng-container *ngIf="editing">
@ -21,6 +23,13 @@
</div>
</form>
<iqser-circle-button (action)="saveValue()" [tooltip]="saveTooltip" [type]="buttonsType" icon="iqser:check"></iqser-circle-button>
<iqser-circle-button (action)="editing = false" [tooltip]="cancelTooltip" [type]="buttonsType" icon="iqser:close"></iqser-circle-button>
<div class="d-flex">
<iqser-circle-button (action)="saveValue()" [tooltip]="saveTooltip" [type]="buttonsType" icon="iqser:check"></iqser-circle-button>
<iqser-circle-button
(action)="editing = false"
[tooltip]="cancelTooltip"
[type]="buttonsType"
icon="iqser:close"
></iqser-circle-button>
</div>
</ng-container>

1
src/lib/inputs/editable-input/editable-input.component.scss
View File

@ -1,6 +1,7 @@
:host {
display: flex;
align-items: center;
justify-content: space-between;
}
iqser-circle-button {