flex for prompt input

This commit is contained in:
tykayn 2025-09-16 16:49:34 +02:00
parent 3ec0b09712
commit ac000b6037
3 changed files with 28 additions and 18 deletions

View file

@ -5,25 +5,25 @@
</div> </div>
<div class="dropwdown"> <div class="dropwdown">
<div class="dropdown-item" (click)="changeModeOption('auto')" [ngClass]="{ <div (click)="changeModeOption('auto')" [ngClass]="{
'is-active' : 'auto' == mode 'is-active' : 'auto' == mode
}"> }" class="dropdown-item">
<span class="radio"></span> <span class="radio"></span>
<div class="label"> <div class="label">
Auto mode Auto mode
</div> </div>
</div> </div>
<div class="dropdown-item" (click)="changeModeOption('structured')" [ngClass]="{ <div (click)="changeModeOption('structured')" [ngClass]="{
'is-active' : 'structured' == mode 'is-active' : 'structured' == mode
}"> }" class="dropdown-item">
<span class="radio"></span> <span class="radio"></span>
<div class="label"> <div class="label">
Structured list Structured list
</div> </div>
</div> </div>
<div class="dropdown-item" (click)="changeModeOption('specific')" [ngClass]="{ <div (click)="changeModeOption('specific')" [ngClass]="{
'is-active' : 'specific' == mode 'is-active' : 'specific' == mode
}"> }" class="dropdown-item">
<span class="radio"></span> <span class="radio"></span>
<div class="label"> <div class="label">
Specific question Specific question

View file

@ -7,7 +7,6 @@
margin-right: -6em; margin-right: -6em;
.dropwdown { .dropwdown {
visibility: hidden; visibility: hidden;
} }
@ -29,16 +28,6 @@
text-align: center; text-align: center;
} }
.is-mode-structured,
.is-mode-other,
{
background: red;
border-radius: 100px;
width: 20px;
position: relative;
left: 10px;
top: 10px;
}
.dropdown-item { .dropdown-item {
background: white; background: white;
@ -57,3 +46,18 @@
} }
} }
} }
.is-mode-structured,
.is-mode-other,
{
.indicator {
background: red;
border-radius: 100px;
width: 3px;
height: 3px;
position: relative;
left: 30px;
top: -20px;
}
}

View file

@ -15,9 +15,15 @@ export type optionsDropdownOptions = 'auto' | 'structured' | 'specific';
}) })
export class OptionsDropdown { export class OptionsDropdown {
@Input() public mode: optionsDropdownOptions = 'auto' @Input() public mode: optionsDropdownOptions = 'structured'
indicator: boolean = false;
changeModeOption(mode: optionsDropdownOptions) { changeModeOption(mode: optionsDropdownOptions) {
this.mode = mode; this.mode = mode;
// show green indicator if we are not in auto mode
this.indicator = (mode !== 'auto');
} }
} }