- added stash highlight

- updated trade window styles to be smaller
- added header pinnable

manifest.json

@@ -150,6 +150,19 @@
                     "width": 1212,
                     "height": 699
                 }
+            },
+            "tradehighlight": {
+                "file": "dist/poe-overlay-overwolf/index.html",
+                "in_game_only": true,
+                "block_top_window_navigation": true,
+                "disable_restore_animation": true,
+                "disable_rightclick": true,
+                "transparent": true,
+                "resizable": true,
+                "size": {
+                    "width": 1212,
+                    "height": 699
+                }
             }
         },
         "game_targeting": {

src/app/app.component.html

@@ -10,6 +10,7 @@
         <app-launcher-window *ngSwitchCase="'launcher'"></app-launcher-window>
         <app-annotation-window *ngSwitchCase="'annotation'"></app-annotation-window>
         <app-trade-window *ngSwitchCase="'trade'"></app-trade-window>
+        <app-trade-highlight-window *ngSwitchCase="'tradehighlight'"></app-trade-highlight-window>
         <div *ngSwitchDefault>Could not match window with name: {{window.name}}</div>
     </ng-container>
 </ng-container>

src/app/core/config/window-name.ts

@@ -8,5 +8,6 @@ export enum WindowName {
     Replay = 'replay',
     Launcher = 'launcher',
     Annotation = 'annotation',
-    Trade = 'trade'
+    Trade = 'trade',
+    TradeHighlight = 'tradehighlight'
 }

src/app/core/odk/ow-games-events-listener.ts

@@ -16,9 +16,12 @@ export class OWGamesEventsListener {
         private readonly delegate: OWGamesEventListenerDelegate,
         private readonly requiredFeatures: string[]) { }
 
-    public start(): Observable<boolean> {
+    public start(passive: boolean): Observable<boolean> {
         this.unregisterEvents();
         this.registerEvents();
+        if (passive) {
+            return of(true);
+        }
         return this.setRequiredFeatures();
     }
 

src/app/layout/window/background-window/background-window.component.ts

@@ -141,7 +141,7 @@ export class BackgroundWindowComponent implements OnInit, OnDestroy {
             this.annotationWindow.open(info.width, info.height),
             this.notificationWindow.open(info.width, info.height)
         ]).pipe(
-            flatMap(() => this.events.start()),
+            flatMap(() => this.events.start(false)),
         ).subscribe(result => {
             this.settings.get().subscribe(settings => {
                 this.modules.forEach(module => {

src/app/modules/market/service/market-window.service.ts

@@ -1,6 +1,7 @@
 import { Injectable } from '@angular/core';
 import { WindowName } from '@app/config';
 import { OWGames, OWWindow } from '@app/odk';
+import { WindowService } from '@shared/module/poe/window';
 import { Observable, of } from 'rxjs';
 import { flatMap } from 'rxjs/operators';
 
@@ -10,7 +11,7 @@ import { flatMap } from 'rxjs/operators';
 export class MarketWindowService {
     private readonly window: OWWindow;
 
-    constructor() {
+    constructor(private readonly poeWindow: WindowService) {
         this.window = new OWWindow(WindowName.Market);
     }
 
@@ -22,7 +23,7 @@ export class MarketWindowService {
                 }
                 return OWGames.getRunningGameInfo().pipe(
                     flatMap(({ height }) => {
-                        const width = Math.round(height / 1.622);
+                        const width = this.poeWindow.calculateWidth(height);
                         return this.window.changeSize(width * 2, height).pipe(
                             flatMap(() => this.window.changePosition(0, 0))
                         );

src/app/modules/trade/class/trade-message-action.ts

@@ -2,14 +2,12 @@ export enum TradeMessageAction {
     Invite = 'invite',
     Wait = 'wait',
     ItemGone = 'item-gone',
-    OfferExpired = 'offer-expired',
     Resend = 'resend',
     Interested = 'interested',
     Trade = 'trade',
     ItemHighlight = 'item-highlight',
     Whisper = 'whisper',
-    Finished = 'finished',
-    Dismiss = 'dismiss',
+    Finished = 'finished'
 }
 
 export interface TradeMessageActionState {

src/app/modules/trade/component/trade-message-action/trade-message-action.component.html

@@ -1,4 +1,5 @@
-<button class="poe-control poe-button" (click)="execute.next(action)" [title]="'trade.action.' + action | translate">
+<button class="poe-control poe-button" (click)="onExecute($event)"
+    [title]="('trade.action.' + action | translate) + title">
     <ng-container [ngSwitch]="action">
         <mat-icon *ngSwitchCase="'invite'">how_to_reg</mat-icon>
         <mat-icon *ngSwitchCase="'wait'">pan_tool</mat-icon>
@@ -9,8 +10,6 @@
         <mat-icon *ngSwitchCase="'whisper'">chat</mat-icon>
         <mat-icon *ngSwitchCase="'finished'">done</mat-icon>
         <mat-icon *ngSwitchCase="'dismiss'">close</mat-icon>
-        <mat-icon *ngSwitchCase="'interested'">hearing</mat-icon>        
-        <mat-icon *ngSwitchCase="'offer-expired'">hearing_disabled</mat-icon>        
+        <mat-icon *ngSwitchCase="'interested'">hearing</mat-icon>
     </ng-container>
-</button>
-
+</button>

src/app/modules/trade/component/trade-message-action/trade-message-action.component.scss

@@ -11,10 +11,18 @@
   }
 }
 
+$size: 21px;
+
 button {
   display: inline-flex;
   justify-content: center;
   padding: 0;
-  height: 32px;
-  width: 32px;
+  height: $size + 7px;
+  width: $size + 7px;
+
+  .mat-icon {
+    height: $size;
+    width: $size;
+    font-size: $size;
+  }
 }

src/app/modules/trade/component/trade-message-action/trade-message-action.component.ts

@@ -13,6 +13,9 @@ export class TradeMessageActionComponent {
     return this.visible[this.action];
   }
 
+  @Input()
+  public title = '';
+
   @Input()
   public action: TradeMessageAction;
 
@@ -21,4 +24,9 @@ export class TradeMessageActionComponent {
 
   @Output()
   public execute = new EventEmitter<string>();
+
+  public onExecute(event: MouseEvent): void {
+    event.stopPropagation();
+    this.execute.next(this.action);
+  }
 }

src/app/modules/trade/component/trade-message-bulk/trade-message-bulk.component.html

@@ -1,9 +1,9 @@
 <div class="item">
     <div class="value left">
-        <app-trade-static-frame [count]="message.count1" [id]="message.type1" [reverse]="true">
+        <app-trade-static-frame [count]="message.count1" [id]="message.type1" [reverse]="true" [medium]="true">
         </app-trade-static-frame>
         <div class="rate">
-            <app-trade-static-frame [count]="1" [id]="message.type1" [small]="true" [reverse]="true">
+            <app-trade-static-frame [count]="1" [id]="message.type1" [reverse]="true" [small]="true">
             </app-trade-static-frame>
             <span>&nbsp;≈&nbsp;</span>
             <app-trade-static-frame [amount]="message.count2 / message.count1" [id]="message.type2" [small]="true">
@@ -12,10 +12,10 @@
     </div>
     <app-trade-message-direction></app-trade-message-direction>
     <div class="value">
-        <app-trade-static-frame [count]="message.count2" [id]="message.type2">
+        <app-trade-static-frame [count]="message.count2" [id]="message.type2" [medium]="true">
         </app-trade-static-frame>
         <div class="rate">
-            <app-trade-static-frame [count]="1" [id]="message.type2" [small]="true" [reverse]="true">
+            <app-trade-static-frame [count]="1" [id]="message.type2" [reverse]="true" [small]="true">
             </app-trade-static-frame>
             <span>&nbsp;≈&nbsp;</span>
             <app-trade-static-frame [amount]="message.count1 / message.count2" [id]="message.type1" [small]="true">

src/app/modules/trade/component/trade-message-bulk/trade-message-bulk.component.scss

@@ -6,10 +6,6 @@
   width: 100%;
 }
 
-.item {
-  padding: 3px 0;
-}
-
 .value {
   width: 100%;
 

src/app/modules/trade/component/trade-message-item/trade-message-item.component.html

@@ -1,8 +1,8 @@
 <div class="item" [class.reverse]="message.direction === 'outgoing'">
-    <div class="name" [title]="message.itemName">{{message.itemName | truncateText: 18}}</div>
+    <div class="name" [title]="message.itemName">{{message.itemName | truncateText: 20}}</div>
     <app-trade-message-direction></app-trade-message-direction>
     <div class="price" *ngIf="message.price && message.currencyType">
-        <app-trade-static-frame [count]="message.price" [id]="message.currencyType">
+        <app-trade-static-frame [count]="message.price" [id]="message.currencyType" [reverse]="message.direction === 'outgoing'" [medium]="true">
         </app-trade-static-frame>
     </div>
 </div>

src/app/modules/trade/component/trade-message-item/trade-message-item.component.scss

@@ -12,7 +12,7 @@
 
 .item {
   flex-direction: row;
-  line-height: 32px;
+  line-height: 24px;
 
   &.reverse {
     flex-direction: row-reverse;

src/app/modules/trade/component/trade-message-map-tier/trade-message-map-tier.component.html

@@ -2,8 +2,8 @@
     <div class="tier">{{list.tier}}</div>
     <div class="maps">
         <div *ngFor="let map of list.maps;last as last" [title]="map">
-            <ng-container *ngIf="last">{{map | truncateText:12}}</ng-container>
-            <ng-container *ngIf="!last">{{map | truncateText:12}},&nbsp;</ng-container>
+            <ng-container *ngIf="last">{{map | truncateText:14}}</ng-container>
+            <ng-container *ngIf="!last">{{map | truncateText:14}},&nbsp;</ng-container>
         </div>
     </div>
 </div>

src/app/modules/trade/component/trade-message/trade-message.component.html

@@ -1,4 +1,4 @@
-<div [class]="'message ' + message.direction">
+<div [class]="'message ' + message.direction" (click)="toggle = !toggle">
     <div class="content">
         <ng-container [ngSwitch]="message.type">
             <app-trade-message-item *ngSwitchCase="'item'" [message]="message"></app-trade-message-item>
@@ -7,14 +7,15 @@
             <div *ngSwitchDefault>Could not match message type: {{message.type}}</div>
         </ng-container>
     </div>
-    <div class="actions">
+    <div class="actions" *ngIf="toggle">
         <app-trade-message-action action="wait" [visible]="visible" (execute)="onActionExecute($event)">
         </app-trade-message-action>
         <app-trade-message-action action="interested" [visible]="visible" (execute)="onActionExecute($event)">
         </app-trade-message-action>
         <app-trade-message-action action="resend" [visible]="visible" (execute)="onActionExecute($event)">
         </app-trade-message-action>
-        <app-trade-message-action action="whisper" [visible]="visible" (execute)="onActionExecute($event)">
+        <app-trade-message-action action="whisper" [visible]="visible" [title]="message.whispers | tradeWhisperTitle"
+            (execute)="onActionExecute($event)">
         </app-trade-message-action>
         <app-trade-message-action action="invite" [visible]="visible" (execute)="onActionExecute($event)">
         </app-trade-message-action>
@@ -26,9 +27,8 @@
         </app-trade-message-action>
         <app-trade-message-action action="item-gone" [visible]="visible" (execute)="onActionExecute($event)">
         </app-trade-message-action>
-        <app-trade-message-action action="offer-expired" [visible]="visible" (execute)="onActionExecute($event)">
-        </app-trade-message-action>
-        <app-trade-message-action action="dismiss" [visible]="visible" (execute)="onActionExecute($event)">
-        </app-trade-message-action>
+    </div>
+    <div class="dismiss">
+        <div class="poe-close" (click)="onDismiss()"></div>
     </div>
 </div>

src/app/modules/trade/component/trade-message/trade-message.component.scss

@@ -2,43 +2,63 @@
 
 ::ng-deep {
   app-trade-message {
-    display: block;
+    &:nth-child(even) {
+      .message {
+        background: adjust-color($black-transparent, $alpha: 0.25);
+      }
+    }
 
     & + app-trade-message {
-      margin-top: $gutter-half;
+      margin-top: 1px;
     }
   }
 }
 
+:host {
+  display: block;
+}
+
+.poe-close {
+  width: 18px;
+  height: 18px;
+  background-size: contain;
+}
+
 .message {
   position: relative;
   display: flex;
+  width: 300px;
+  flex-direction: column;
   border-left: 6px solid;
+  background: adjust-color($black-transparent, $alpha: 0.3);
+  cursor: pointer;
+  padding: $gutter-half $gutter;
 
   &.incoming {
-    border-color: lightgreen;
+    border-color: adjust-color($color: $orange, $alpha: -0.2);
   }
 
   &.outgoing {
-    border-color: red;
+    border-color: adjust-color($color: $purple, $alpha: -0.2);
   }
-}
 
-.content {
-  background: $black-transparent;
-  padding: 0 $gutter-half * 2;
-  width: 300px;
-  justify-content: center;
+  .dismiss {
+    position: absolute;
+    top: -6px;
+    right: -2px;
+    display: none;
+  }
+
+  &:hover {
+    .dismiss {
+      display: block;
+    }
+  }
 }
 
 .content,
 .actions {
   display: flex;
   flex-direction: row;
-}
-
-.actions {
-  &.spacer {
-    margin-left: 35px;
-  }
+  justify-content: center;
 }