metadata-editor-workspace/src/app/project-manager/projectmanager.component.html

Metadata Editor Workspace module for ME-Core Powered by Assyst

<style>
  .me-pm-left-panel {
    float: left;
    width: 15%;    
    border-right: 1px solid #e6e6e6;
    height: 100%;
  }



  .me-pm-right-panel {
    float: left;
    width: 84%;    
    padding: 0 0 0 10px;
    height: 94%;
    overflow: auto;
  }



  .me-tab-projects {
    float: left;
    width: 84%;
    margin: 0 0 15px 0px;
  }



  .me-tab-projects-item {
    float: left;
    margin: 15px 0px 0 15px;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
  }



  .me-tab-projects-item:hover,
  .me-tab-projects-item.active {
    color: #0087CF;
    border-bottom: 3px solid #0087cf;
  }



  .me-tab-projects-item .me-project-title {
    padding-right: 5px;
  }



  .me-tab-projects-item .me-project-close {
    background: url(./assets/icon/Rounded_Close-Icon.png) no-repeat center top transparent;
    float: right;
    width: 16px;
    height: 16px;
  }



  .me-tab-projects-item:hover .me-project-close,
  .me-tab-projects-item.active .me-project-close,
  .me-tab-projects-item .me-project-close:hover {
    background: url(./assets/icon/Rounded_Close-Icon_blue.png) no-repeat center top transparent;
  }


  .me-pm-workarea {
    float: left;
    width: 98%;
    background: #fff;
    padding: 1%;
    height: 95%;
  }


  .me-toolbar-container {
    margin-top: -15px;
  }
</style>
<div class="me-pm-workarea">
  <div class="me-pm-left-panel">
    <Tree [nodes]="nodes" [options]="options" (onActivate)="onTreeFocusEvent($event)"></Tree>
  </div>
  <div class="me-tab-projects">
    <div class="me-tab-projects-item" *ngFor="let project of projects; let i = index;  let last = last;" [class.active]="i === selectedProject"
      (click)='onProjectSelection(project, i)'>
      <span class="me-project-title">{{project.name}}</span>
      <span class="me-project-close" (click)="onRemoveProject(project, i)"></span>
    </div>
  </div>
  <div class="me-pm-right-panel">
    <json-schema-form [schema]="formSchema" [model]="schemaData" [layout]="layoutSchema" (onChanges)="yourOnChangesFn($event)"
      loadExternalAssets="true" [options]="globalSettings" [framework]="material-design"></json-schema-form>
  </div>
</div>