fixing the tooltip style problem, UI: Renewing Study page #1802

dcm4che · Mar 12, 2019 · acf0b98 · acf0b98
1 parent 2062dd7
commit acf0b98
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 20 deletions.
diff --git a/dcm4chee-arc-ui2/src/app/helpers/dicom-studies-table/dicom-studies-table.component.html b/dcm4chee-arc-ui2/src/app/helpers/dicom-studies-table/dicom-studies-table.component.html
@@ -1,14 +1,14 @@
 <h3 *ngIf="title">{{title}}</h3>
 <div class="j4care_dynamic_table" [ngClass]="config?.cssTableClass" *ngIf="patients && patients.length > 0" (mouseleave)="active_td = ''">
- <!--Patient header 1:-->
+ <!--Headers 1:-->
  <div class="th {{hover_mode}}" [ngClass]="config?.cssThClass">
  <div class="td"
- *ngFor="let patient_table of tableSchema[hover_mode]"
- [ngClass]="[config?.cssTdClass || '',(patient_table.type != 'value')?'empty_td':'not_empty_td', (patient_table.elementId && active_td === patient_table.elementId) ? 'active':'']"
- [ngStyle]="{width: patient_table.calculatedWidth}"
+ *ngFor="let table of tableSchema[hover_mode]"
+ [ngClass]="[config?.cssTdClass || '',(table.type != 'value')?'empty_td':'not_empty_td', (table.elementId && active_td === table.elementId) ? 'active':'', table.type || '']"
+ [ngStyle]="{width: table.calculatedWidth}"
  >
- <ng-container *ngIf="patient_table.type === 'value'">{{patient_table.header}}</ng-container>
- <ng-container *ngIf="patient_table.type != 'value'">&nbsp;</ng-container>
+ <ng-container *ngIf="table.type === 'value'">{{table.header}}</ng-container>
+ <ng-container *ngIf="table.type != 'value'">&nbsp;</ng-container>
  </div>
  </div>
  <!--1:END;-->
@@ -18,10 +18,11 @@ <h3 *ngIf="title">{{title}}</h3>
  <div class="patient_block table_item" (mouseenter)="hover_mode = 'patient'">
  <div class="td"
  *ngFor="let patient_table of tableSchema.patient"
- [ngClass]="[config?.cssTdClass || '']"
+ [ngClass]="[config?.cssTdClass || '', patient_table.type || '']"
  [ngStyle]="{width: patient_table.calculatedWidth}"
  [ngSwitch]="patient_table.type"
  (mouseenter)="active_td = patient_table.elementId"
+ tooltip="{{ patient_table.type === 'value' ? _.get(patient.attrs,patient_table.pathToValue) : ''}}"
  >
  <ng-container *ngSwitchCase="'index'">{{i + config.offset + 1}}</ng-container>
  <ng-container *ngSwitchCase="'actions'">
@@ -42,10 +43,11 @@ <h3 *ngIf="title">{{title}}</h3>
  <div class="study_block table_item" (mouseenter)="hover_mode = 'studies'">
  <div class="td"
  *ngFor="let studies_table of tableSchema.studies"
- [ngClass]="[config?.cssTdClass || '']"
+ [ngClass]="[config?.cssTdClass || '', studies_table.type || '']"
  [ngStyle]="{width: studies_table.calculatedWidth}"
  [ngSwitch]="studies_table.type"
  (mouseenter)="active_td = studies_table.elementId"
+ tooltip="{{ studies_table.type === 'value' ? _.get(study.attrs, studies_table.pathToValue) : ''}}"
  >
  <ng-container *ngSwitchCase="'index'">{{study.offset + 1}}</ng-container>
  <ng-container *ngSwitchCase="'actions'">
@@ -55,7 +57,7 @@ <h3 *ngIf="title">{{title}}</h3>
  </a>
  </ng-container>
  <ng-container *ngSwitchCase="'pipe'">{{study.attrs | dynamicPipe:studies_table.pipe}}</ng-container>
- <ng-container *ngSwitchCase="'value'">{{_.get(study.attrs,studies_table.pathToValue) || '&nbsp;'}}</ng-container>
+ <ng-container *ngSwitchCase="'value'">{{_.get(study.attrs, studies_table.pathToValue) || '&nbsp;'}}</ng-container>
  </div>
  <attribute-list *ngIf="study.showAttributes" [attrs]="study.attrs"></attribute-list>
  </div>
@@ -65,10 +67,11 @@ <h3 *ngIf="title">{{title}}</h3>
  <div class="series_block table_item" (mouseenter)="hover_mode = 'series'">
  <div class="td"
  *ngFor="let serie_table of tableSchema.series"
- [ngClass]="[config?.cssTdClass || '']"
+ [ngClass]="[config?.cssTdClass || '', serie_table.type || '']"
  [ngStyle]="{width: serie_table.calculatedWidth}"
  [ngSwitch]="serie_table.type"
  (mouseenter)="active_td = serie_table.elementId"
+ tooltip="{{ serie_table.type === 'value' ? _.get(serie.attrs,serie_table.pathToValue) : ''}}"
  >
  <ng-container *ngSwitchCase="'index'">{{i + 1}}</ng-container>
  <ng-container *ngSwitchCase="'actions'">
@@ -78,7 +81,7 @@ <h3 *ngIf="title">{{title}}</h3>
  </a>
  </ng-container>
  <ng-container *ngSwitchCase="'pipe'">{{serie.attrs | dynamicPipe:serie_table.pipe}}</ng-container>
- <ng-container *ngSwitchCase="'value'">{{_.get(serie.attrs,serie_table.pathToValue) || '&nbsp;'}}</ng-container>
+ <ng-container *ngSwitchCase="'value'">{{_.get(serie.attrs, serie_table.pathToValue) || '&nbsp;'}}</ng-container>
  </div>
  <attribute-list *ngIf="serie.showAttributes" [attrs]="serie.attrs"></attribute-list>
  </div>
@@ -89,10 +92,11 @@ <h3 *ngIf="title">{{title}}</h3>
  <div class="instance_block table_item" (mouseenter)="hover_mode = 'instance'">
  <div class="td"
  *ngFor="let instance_table of tableSchema.instance"
- [ngClass]="[config?.cssTdClass || '']"
+ [ngClass]="[config?.cssTdClass || '', instance_table.type || '']"
  [ngStyle]="{width: instance_table.calculatedWidth}"
  [ngSwitch]="instance_table.type"
  (mouseenter)="active_td = instance_table.elementId"
+ tooltip="{{ instance_table.type === 'value' ? _.get(instance.attrs, instance_table.pathToValue) : ''}}"
  >
  <ng-container *ngSwitchCase="'index'">{{i + 1}}</ng-container>
  <ng-container *ngSwitchCase="'actions'">

diff --git a/dcm4chee-arc-ui2/src/app/helpers/dicom-studies-table/dicom-studies-table.component.scss b/dcm4chee-arc-ui2/src/app/helpers/dicom-studies-table/dicom-studies-table.component.scss
@@ -1,4 +1,5 @@
 $hoverColor:#9fa4a9;
+$pink:rgba(82, 36, 88, 0.85);
 
 .j4care_dynamic_table{
  float: left;
@@ -12,6 +13,7 @@ $hoverColor:#9fa4a9;
  -webkit-box-shadow: 5px 3px 13px 0px rgba(68, 68, 68, 0.93) ;
  -moz-box-shadow: 5px 3px 13px 0px rgba(68, 68, 68, 0.93) ;
  box-shadow: 5px 3px 13px 0px rgba(68, 68, 68, 0.93) ;
+ margin-bottom: 1px;
  &.studies{
  padding-left: 22px;
  }
@@ -34,9 +36,9 @@ $hoverColor:#9fa4a9;
  &.not_empty_td{
  border-left: 1px solid white;
  }
- &.active{
- background: $hoverColor;
- color: black;
+ &.value.active{
+ background: $pink;
+ color: white;
  }
  }
  }
@@ -55,9 +57,9 @@ $hoverColor:#9fa4a9;
  position: static;
  }
  }
- &.active, &:hover{
- background: $hoverColor;
- color: black;
+ &.active, &.value:hover{
+ background: $pink;
+ color: white;
  }
 
  }

diff --git a/dcm4chee-arc-ui2/src/app/helpers/tooltip/tooltip.directive.ts b/dcm4chee-arc-ui2/src/app/helpers/tooltip/tooltip.directive.ts
@@ -28,6 +28,14 @@ export class TooltipDirective {
  }else{
  this.showTooltip();
  }
+ console.log("this.ele",this.el.nativeElement);
+ console.log("this.ele",this.offset(this.el.nativeElement));
+ }
+ offset(el) {
+ var rect = el.getBoundingClientRect(),
+ scrollLeft = window.pageXOffset || document.documentElement.scrollLeft,
+ scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+ return { top: rect.top + scrollTop, left: rect.left + scrollLeft }
  }
  @HostListener('mouseleave') onMouseLeave() {
  if (this.placeholderSet){
@@ -77,7 +85,13 @@ export class TooltipDirective {
  // this.el.nativeElement.addEventListener("mouseup",()=>{
  // window.prompt("Copy to clipboard: Ctrl+C, Enter4", this.tooltip);
  // });
- this.el.nativeElement.appendChild(this.div);
+ // this.el.nativeElement.appendChild(this.div);
+ let position = this.offset(this.el.nativeElement);
+ this.div.style.position = "absolute";
+ this.div.style.left = (position.left + 15*1)+'px';
+ this.div.style.top = (position.top+30*1) +'px';
+ this.div.mouseenter = this.showTooltip();
+ document.querySelector('body').appendChild(this.div);
  this.placeholderSet = true;
  }
  let copyToClipboard = ()=>{

diff --git a/dcm4chee-arc-ui2/src/app/monitoring/storage-commitment/storage-commitment.component.ts b/dcm4chee-arc-ui2/src/app/monitoring/storage-commitment/storage-commitment.component.ts
@@ -85,6 +85,7 @@ export class StorageCommitmentComponent implements OnInit {
  this.service.search(this.filters, offset)
  .map(res => j4care.redirectOnAuthResponse(res))
  .subscribe((res) => {
+ // res = [{"dicomDeviceName":"dcm4chee-arc","transactionUID":"2.25.258351030884282860047665252905873583068","status":"COMPLETED","studyUID":"1.3.12.2.1107.5.1.4.64109.30000019012807185180500000001","exporterID":"STORESCP","JMSMessageID":"ID:ff791ec7-44e8-11e9-bf40-c47d4614bea4","requested":"2","createdTime":"2019-03-12 18:05:12.696","updatedTime":"2019-03-12 18:05:12.811"},{"dicomDeviceName":"dcm4chee-arc","transactionUID":"2.25.128928679253241687386682286235669207139","status":"COMPLETED","studyUID":"1.3.12.2.1107.5.1.4.64109.30000019012807185180500000001","exporterID":"STORESCP","JMSMessageID":"ID:025cb6b9-44e9-11e9-bf40-c47d4614bea4","requested":"2","createdTime":"2019-03-12 18:05:17.117","updatedTime":"2019-03-12 18:05:17.17"}];
  if (res && res.length > 0){
  if(this.filters.limit < res.length){
  res.pop();

diff --git a/dcm4chee-arc-ui2/src/app/studies/studies.component.html b/dcm4chee-arc-ui2/src/app/studies/studies.component.html
@@ -684,7 +684,7 @@ <h5>Selected Objects to {{clipboard.action}}</h5>
  <span class="glyphicon glyphicon-export"></span>
  </a>
  <a class="hiddenbuttons" (click)="$event.preventDefault();setExpiredDate(study._VALUE)" [permission]="{id:'action-studies-study',param:'edit'}" *ngIf="externalInternalAetMode === 'internal'" href="" title="Set/Change expired date">
- <i class="material-more_menu_studyicons">history</i>
+ <i class="material-icons">history</i>
  </a>
  <a class="hiddenbuttons" (click)="$event.preventDefault();upload(study._VALUE,'study')" [permission]="{id:'action-studies-study',param:'upload'}" href="" title="Upload file">
  <i class="material-icons">file_upload</i>