flex for prompt input
This commit is contained in:
parent
3ec0b09712
commit
ac000b6037
3 changed files with 28 additions and 18 deletions
|
@ -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
|
||||||
|
|
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
@ -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');
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue