style cols

This commit is contained in:
Tykayn 2025-09-23 18:54:13 +02:00 committed by tykayn
parent 63f98a48ed
commit 334b6c90cf
7 changed files with 35 additions and 36 deletions

View file

@ -5,7 +5,7 @@
<div class="bot-talks-message">
{{ message }}
</div>
@if (documents?.length) {
@if (documents.length) {
@for (document of documents; track document.id) {
<div class="document-container">

View file

@ -71,7 +71,7 @@
.chips-column {
padding: 12px 12px;
width: 220px;
width: 218px;
//border: solid 1px #ccc;
}

View file

@ -8,12 +8,12 @@
<i class="ri-search-line search-placeholder"></i>
<div class="label">
<span class="d-none">
<span class="d-none">
{{ label }}
</span>
</span>
</div>
<!-- (blur)="displayDropdown = false"-->
<input
(blur)="displayDropdown = false"
(click)="onClickInput()"
(focus)="displayDropdown = true"
class="is-hidden" placeholder="{{label}}"
@ -22,47 +22,41 @@
class="selected-items-counter">
{{ selectedChoices?.length || 0 }}
</span>
<div class="dropdown-button selector-button">
<div (click)="onClickInput()" class="dropdown-button selector-button">
<!-- bouton-->
<i class="ri-arrow-down-s-line"></i>
</div>
@if (displayDropdown
&& availableChoices?.length) {
@if (displayDropdown && availableChoices?.length) {
<div class="dropdown">
<div class="dropdown-list">
<!-- selected:-->
<div class="selected-items">
@for (sc of selectedChoices; track sc) {
<div class="dropdown-item"
(click)="selectedChoicesChangeToggleItem(sc)"
@if (selectedChoices?.length && availableChoices?.length) {
<div class="selected-items">
<div (click)="selectedChoicesChangeToggleItem(sc)"
*ngFor="let sc of selectedChoices"
class="dropdown-item"
>
<i class="ri-checkbox-line"></i>
{{ sc }}
</div>
}
</div>
@if (selectedChoices?.length && availableChoices?.length) {
</div>
<hr>
}
<div class="available-items">
<!-- available:-->
@for (ac of availableChoices; track ac) {
<div class="dropdown-item"
(click)="availableChoicesChangeToggleItem(ac)"
>
<i class="ri-checkbox-blank-line"></i>
{{ ac }}
</div>
}
<div (click)="availableChoicesChangeToggleItem(ac)"
*ngFor="let ac of availableChoices"
class="dropdown-item"
>
<i class="ri-checkbox-blank-line"></i>
{{ ac }}
</div>
</div>
</div>
</div>
}
</div>

View file

@ -3,7 +3,7 @@
:host {
.input-box {
width: 220px;
width: 218px;
.d-none {
display: none;
@ -91,12 +91,13 @@
border-radius: 8px;
position: relative;
display: block;
z-index: 10;
z-index: 100;
border-top-left-radius: 0;
border-top-right-radius: 0;
width: 210px;
top: -59px;
top: 42px;
left: 0;
border-left: 1px solid #8D91A4;
border-bottom: 1px solid #8D91A4;
border-right: 1px solid #8D91A4;

View file

@ -55,7 +55,11 @@ export class MultiSelector {
}
onClickInput() {
if (this.disabled) return;
this.displayDropdown = !this.displayDropdown
if (this.disabled) {
console.info('disabled input');
return;
}
this.displayDropdown = !this.displayDropdown;
console.log('Toggled dropdown:', this.displayDropdown);
}
}

View file

@ -7,7 +7,7 @@ export const initialState: StateInterface = {
backendAPIRoot: "",
demoMode: true,
loading: false,
fromText: "le texte original",
fromText: "",
// fromText: "",
fromFile: "",
toText: "",

View file

@ -3,7 +3,7 @@
<div id="fromText">
@if (!fileIsUploaded) {
@if (!fileIsUploaded || !appState.fromText.length) {
<!-- @if (appState.fromText.length == 0) {-->
<button (click)="clickFileUpload(fileUpload)" class=" click-file-upload is-outlined">
<span class="label">
@ -40,7 +40,7 @@
<!-- delete button from_text-->
<button (click)="emptyText('fromText')" [ngClass]="{
'is-visible' : fromText.length
'is-visible' : appState.fromText.length
}" class="delete-button button">x
</button>
@if (!fileIsUploaded) {
@ -48,7 +48,7 @@
(focus)="focusFromText()"
(keyup)="onFromTextChanged()"
(ngModelChange)="onFromTextChanged()"
[ngModel]="appState.fromText"
[(ngModel)]="appState.fromText"
cols="30"
id="from_text"
name="from_text"