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

View file

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

View file

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

View file

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

View file

@ -55,7 +55,11 @@ export class MultiSelector {
} }
onClickInput() { onClickInput() {
if (this.disabled) return; if (this.disabled) {
this.displayDropdown = !this.displayDropdown 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: "", backendAPIRoot: "",
demoMode: true, demoMode: true,
loading: false, loading: false,
fromText: "le texte original", fromText: "",
// fromText: "", // fromText: "",
fromFile: "", fromFile: "",
toText: "", toText: "",

View file

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