TRIX-16 display a button to toggle instance details
This commit is contained in:
parent
d48da7d0cb
commit
386b3593eb
@ -101,10 +101,19 @@
|
||||
<div class="row g-0">
|
||||
<div class="card-info" [ngClass]="showMachineDetails ? 'col-lg-4' : 'col'">
|
||||
<div>
|
||||
<h5 class="card-title text-truncate" [tooltip]="instance.name" container="body" placement="top left"
|
||||
<div class="d-flex justify-content-between">
|
||||
<h5 class="card-title text-truncate" [tooltip]="instance.name" container="body" placement="top left"
|
||||
[adaptivePosition]="false">
|
||||
{{ instance.name }}
|
||||
</h5>
|
||||
{{ instance.name }}
|
||||
</h5>
|
||||
|
||||
<div class="btn-group btn-group-sm">
|
||||
<button class="btn btn-link text-info" tooltip="Toggle instances details" container="body"
|
||||
placement="top" [adaptivePosition]="false" (click)="toggleMachineDetails()">
|
||||
<fa-icon icon="expand-alt" [fixedWidth]="true" size="sm"></fa-icon>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div *ngIf="!instance.loading && instance.imageDetails"
|
||||
class="text-truncate small text-info text-faded mb-1" [tooltip]="instance.imageDetails.description"
|
||||
|
@ -859,6 +859,13 @@ export class InstancesComponent implements OnInit, OnDestroy
|
||||
instance.refreshInfo = true;
|
||||
}
|
||||
|
||||
// ----------------------------------------------------------------------------------------------------------------
|
||||
toggleMachineDetails()
|
||||
{
|
||||
this.showMachineDetails = !this.showMachineDetails;
|
||||
this.editorForm.get('showMachineDetails').setValue(this.showMachineDetails);
|
||||
}
|
||||
|
||||
// ----------------------------------------------------------------------------------------------------------------
|
||||
private fillInInstanceDetails(instance: Instance)
|
||||
{
|
||||
|
@ -23,6 +23,16 @@ import { NgxDatatableModule } from '@swimlane/ngx-datatable';
|
||||
import { VirtualScrollerModule } from 'ngx-virtual-scroller';
|
||||
import { NgxSliderModule } from '@angular-slider/ngx-slider';
|
||||
import { ClipboardModule } from 'ngx-clipboard';
|
||||
import { AutofocusDirective } from './directives/autofocus.directive';
|
||||
import { InlineEditorComponent } from './components/inline-editor/inline-editor.component';
|
||||
import { PackagesComponent } from './catalog/packages/packages.component';
|
||||
import { FileSizePipe } from './pipes/file-size.pipe';
|
||||
import { AutosizeModule } from 'ngx-autosize';
|
||||
import { AlphaOnlyDirective } from './directives/alpha-only.directive';
|
||||
import { ConfirmationDialogComponent } from './components/confirmation-dialog/confirmation-dialog.component';
|
||||
import { PromptDialogComponent } from './components/prompt-dialog/prompt-dialog.component';
|
||||
import { CustomImageEditorComponent } from './catalog/custom-image-editor/custom-image-editor.component';
|
||||
import { LazyLoadDirective } from './directives/lazy-load.directive';
|
||||
|
||||
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
|
||||
import { library } from '@fortawesome/fontawesome-svg-core';
|
||||
@ -33,22 +43,10 @@ import
|
||||
faArrowsAlt, faTags, faEllipsisV, faHatWizard, faUserCog, faCircle, faAngleLeft, faExternalLinkAlt, faCheck, faPowerOff, faBars, faSpinner,
|
||||
faStop, faPlay, faRedo, faMicrochip, faDesktop, faCopy, faSquare, faCheckSquare, faSave, faDatabase, faClone, faSearch, faHistory, faMask,
|
||||
faCloud, faCloudUploadAlt, faEye, faFingerprint, faLink, faClipboard, faCoins, faArrowRight, faEllipsisH, faStar, faCommentAlt, faOutdent,
|
||||
faUndo, faQuestionCircle
|
||||
faUndo, faQuestionCircle, faExpandAlt
|
||||
} from '@fortawesome/free-solid-svg-icons';
|
||||
import { faDocker } from '@fortawesome/free-brands-svg-icons';
|
||||
|
||||
import { AutofocusDirective } from './directives/autofocus.directive';
|
||||
|
||||
import { InlineEditorComponent } from './components/inline-editor/inline-editor.component';
|
||||
import { PackagesComponent } from './catalog/packages/packages.component';
|
||||
import { FileSizePipe } from './pipes/file-size.pipe';
|
||||
import { AutosizeModule } from 'ngx-autosize';
|
||||
import { AlphaOnlyDirective } from './directives/alpha-only.directive';
|
||||
import { ConfirmationDialogComponent } from './components/confirmation-dialog/confirmation-dialog.component';
|
||||
import { PromptDialogComponent } from './components/prompt-dialog/prompt-dialog.component';
|
||||
import { CustomImageEditorComponent } from './catalog/custom-image-editor/custom-image-editor.component';
|
||||
import { LazyLoadDirective } from './directives/lazy-load.directive';
|
||||
|
||||
@NgModule({
|
||||
declarations: [
|
||||
AutofocusDirective,
|
||||
@ -149,7 +147,7 @@ export class SharedModule
|
||||
faArrowsAlt, faTags, faEllipsisV, faHatWizard, faUserCog, faCircle, faAngleLeft, faExternalLinkAlt, faCheck, faPowerOff, faBars, faSpinner,
|
||||
faStop, faPlay, faRedo, faMicrochip, faDesktop, faCopy, faSquare, faCheckSquare, faSave, faDatabase, faClone, faSearch, faHistory, faMask,
|
||||
faCloud, faCloudUploadAlt, faEye, faFingerprint, faLink, faClipboard, faCoins, faArrowRight, faEllipsisH, faStar, faCommentAlt, faOutdent,
|
||||
faUndo, faQuestionCircle
|
||||
faUndo, faQuestionCircle, faExpandAlt
|
||||
);
|
||||
}
|
||||
}
|
||||
|
Reference in New Issue
Block a user