mpana
/
sc-portal
1
0
Fork 0
Code Issues 15 Pull Requests Projects Releases Wiki Activity

TRIX-16 display a button to toggle instance details

This commit is contained in:
Dragos 2021-05-31 12:18:19 +03:00
parent d48da7d0cb
commit 386b3593eb
3 changed files with 31 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
app/src/app/instances/instances.component.html
View File

@ -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"

7
app/src/app/instances/instances.component.ts
View File

@ -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)
{

26
app/src/app/shared.module.ts
View File

@ -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
);
}
}