From a094f2286b0675d2f3932e942fffaa088d406b38 Mon Sep 17 00:00:00 2001
From: Nicklas Ronge <nicklas.ronge@gmail.com>
Date: Tue, 28 Jul 2020 17:26:40 +0200
Subject: [PATCH] - added experimental horizontal layout (enableable at the
 settings) for the evaluate dialog (#769)

---
 CHANGELOG.md                                  |   1 +
 overlay.babel                                 |  53 +++
 .../evaluate-item-frame.component.html        |  38 ++-
 .../evaluate-item-frame.component.scss        |  24 ++
 .../evaluate-item-frame.component.ts          |   1 +
 .../evaluate-settings.component.html          | 305 +++++++++---------
 .../evaluate/evaluate-feature-settings.ts     |   1 +
 src/app/modules/evaluate/evaluate.module.ts   |   1 +
 .../item-frame/item-frame.component.html      |  97 +++---
 .../item-frame/item-frame.component.scss      |  10 +-
 src/assets/i18n/english.json                  |   1 +
 src/assets/i18n/french.json                   |   1 +
 src/assets/i18n/german.json                   |   1 +
 src/assets/i18n/korean.json                   |   1 +
 src/assets/i18n/polish.json                   |   1 +
 src/assets/i18n/portuguese.json               |   1 +
 src/assets/i18n/russian.json                  |   1 +
 src/assets/i18n/simplified-chinese.json       |   1 +
 src/assets/i18n/spanish.json                  |   1 +
 src/assets/i18n/thai.json                     |   1 +
 src/assets/i18n/traditional-chinese.json      |   1 +
 21 files changed, 325 insertions(+), 217 deletions(-)
 create mode 100644 src/app/modules/evaluate/component/evaluate-item-frame/evaluate-item-frame.component.scss

diff --git a/CHANGELOG.md b/CHANGELOG.md
index a9c2008d..3c73e4dc 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,7 @@
 - added latest_whisper placeholder for commands
 - added item images at the search market
 - added different step sizes at the exchange market (CTRL 50, SHIFT 25, ALT 5) (#797)
+- added experimental horizontal layout (enableable at the settings) for the evaluate dialog (#769)
 - updated windows to be draggable by their content (#768)
 - fixed an issue at the market enabling sockets to be toggleable
 
diff --git a/overlay.babel b/overlay.babel
index b1b72704..c317e3be 100644
--- a/overlay.babel
+++ b/overlay.babel
@@ -6684,6 +6684,59 @@
                     <folder_node>
                         <name>layout</name>
                         <children>
+                            <concept_node>
+                                <name>horizontal</name>
+                                <definition_loaded>false</definition_loaded>
+                                <description></description>
+                                <comment></comment>
+                                <default_text></default_text>
+                                <translations>
+                                    <translation>
+                                        <language>de-DE</language>
+                                        <approved>false</approved>
+                                    </translation>
+                                    <translation>
+                                        <language>en-US</language>
+                                        <approved>false</approved>
+                                    </translation>
+                                    <translation>
+                                        <language>es-ES</language>
+                                        <approved>false</approved>
+                                    </translation>
+                                    <translation>
+                                        <language>fr-FR</language>
+                                        <approved>false</approved>
+                                    </translation>
+                                    <translation>
+                                        <language>ko-KR</language>
+                                        <approved>false</approved>
+                                    </translation>
+                                    <translation>
+                                        <language>pl-PL</language>
+                                        <approved>false</approved>
+                                    </translation>
+                                    <translation>
+                                        <language>pt-BR</language>
+                                        <approved>false</approved>
+                                    </translation>
+                                    <translation>
+                                        <language>ru-RU</language>
+                                        <approved>false</approved>
+                                    </translation>
+                                    <translation>
+                                        <language>th-TH</language>
+                                        <approved>false</approved>
+                                    </translation>
+                                    <translation>
+                                        <language>zh-CHS</language>
+                                        <approved>false</approved>
+                                    </translation>
+                                    <translation>
+                                        <language>zh-CHT</language>
+                                        <approved>false</approved>
+                                    </translation>
+                                </translations>
+                            </concept_node>
                             <concept_node>
                                 <name>name</name>
                                 <definition_loaded>false</definition_loaded>
diff --git a/src/app/modules/evaluate/component/evaluate-item-frame/evaluate-item-frame.component.html b/src/app/modules/evaluate/component/evaluate-item-frame/evaluate-item-frame.component.html
index 9bf7f183..6c5c7deb 100644
--- a/src/app/modules/evaluate/component/evaluate-item-frame/evaluate-item-frame.component.html
+++ b/src/app/modules/evaluate/component/evaluate-item-frame/evaluate-item-frame.component.html
@@ -1,17 +1,21 @@
-<app-item-frame [item]="item" [language]="language" [queryItem]="queryItem"
-    (queryItemChange)="onQueryItemChange($event)" [separator]="true"
-    [modifierMinRange]="settings.evaluateItemSearchStatMinRange / 100"
-    [modifierMaxRange]="settings.evaluateItemSearchStatMaxRange / 100"
-    [propertyMinRange]="settings.evaluateItemSearchPropertyMinRange / 100"
-    [propertyMaxRange]="settings.evaluateItemSearchPropertyMaxRange / 100" [opacity]="settings.dialogOpacity">
-    <ng-content></ng-content>
-    <app-evaluate-item-options [options]="options" (optionsChange)="onOptionsChange($event)" (resetTrigger)="onReset()">
-    </app-evaluate-item-options>
-    <app-evaluate-item-price [item]="item" [currencies]="currencies" [options]="options" [optionsChange]="optionsChange"
-        (evaluateSelect)="evaluateSelect.next($event)" appAnnotation="evaluate.price"></app-evaluate-item-price>
-    <app-item-frame-separator [item]="item"></app-item-frame-separator>
-    <app-evaluate-item-search [graph]="true" [currencies]="currencies" [queryItem]="queryItem"
-        [queryItemChange]="queryItemChange" [options]="options" [optionsChange]="optionsChange" [settings]="settings"
-        (evaluateSelect)="evaluateSelect.next($event)" appAnnotation="evaluate.search">
-    </app-evaluate-item-search>
-</app-item-frame>
\ No newline at end of file
+<div [class.horizontal]="settings.evaluateItemSearchHorizontal">
+    <app-item-frame [item]="item" [language]="language" [queryItem]="queryItem"
+        (queryItemChange)="onQueryItemChange($event)" [separator]="true"
+        [modifierMinRange]="settings.evaluateItemSearchStatMinRange / 100"
+        [modifierMaxRange]="settings.evaluateItemSearchStatMaxRange / 100"
+        [propertyMinRange]="settings.evaluateItemSearchPropertyMinRange / 100"
+        [propertyMaxRange]="settings.evaluateItemSearchPropertyMaxRange / 100" [opacity]="settings.dialogOpacity">
+        <ng-content></ng-content>
+        <app-evaluate-item-options [options]="options" (optionsChange)="onOptionsChange($event)"
+            (resetTrigger)="onReset()">
+        </app-evaluate-item-options>
+        <app-evaluate-item-price [item]="item" [currencies]="currencies" [options]="options"
+            [optionsChange]="optionsChange" (evaluateSelect)="evaluateSelect.next($event)"
+            appAnnotation="evaluate.price"></app-evaluate-item-price>
+        <app-item-frame-separator [item]="item"></app-item-frame-separator>
+        <app-evaluate-item-search [graph]="true" [currencies]="currencies" [queryItem]="queryItem"
+            [queryItemChange]="queryItemChange" [options]="options" [optionsChange]="optionsChange"
+            [settings]="settings" (evaluateSelect)="evaluateSelect.next($event)" appAnnotation="evaluate.search">
+        </app-evaluate-item-search>
+    </app-item-frame>
+</div>
\ No newline at end of file
diff --git a/src/app/modules/evaluate/component/evaluate-item-frame/evaluate-item-frame.component.scss b/src/app/modules/evaluate/component/evaluate-item-frame/evaluate-item-frame.component.scss
new file mode 100644
index 00000000..7f3722fb
--- /dev/null
+++ b/src/app/modules/evaluate/component/evaluate-item-frame/evaluate-item-frame.component.scss
@@ -0,0 +1,24 @@
+$border-color: #1a1a1a;
+
+::ng-deep {
+  app-evaluate-item-frame {
+    .horizontal {
+      app-item-frame {
+        .detail {
+          display: flex;
+        }
+
+        .inner {
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          border-right: 1px solid $border-color;
+        }
+      }
+
+      .settings {
+        right: calc(50% + 3px) !important;
+      }
+    }
+  }
+}
diff --git a/src/app/modules/evaluate/component/evaluate-item-frame/evaluate-item-frame.component.ts b/src/app/modules/evaluate/component/evaluate-item-frame/evaluate-item-frame.component.ts
index 459bca1e..db9c706a 100644
--- a/src/app/modules/evaluate/component/evaluate-item-frame/evaluate-item-frame.component.ts
+++ b/src/app/modules/evaluate/component/evaluate-item-frame/evaluate-item-frame.component.ts
@@ -10,6 +10,7 @@ import { EvaluateItemOptions } from '../evaluate-item-options/evaluate-item-opti
 @Component({
   selector: 'app-evaluate-item-frame',
   templateUrl: './evaluate-item-frame.component.html',
+  styleUrls: ['./evaluate-item-frame.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class EvaluateItemFrameComponent implements OnInit, OnDestroy {
diff --git a/src/app/modules/evaluate/component/evaluate-settings/evaluate-settings.component.html b/src/app/modules/evaluate/component/evaluate-settings/evaluate-settings.component.html
index 36731e06..44d93c48 100644
--- a/src/app/modules/evaluate/component/evaluate-settings/evaluate-settings.component.html
+++ b/src/app/modules/evaluate/component/evaluate-settings/evaluate-settings.component.html
@@ -56,6 +56,10 @@
     </div>
     <div class="col-md-6">
         <app-card [title]="'evaluate.layout.name' | translate">
+            <mat-slide-toggle [checked]="settings.evaluateItemSearchHorizontal"
+                (change)="settings.evaluateItemSearchHorizontal = $event.checked" (change)="onChange()">
+                {{'evaluate.layout.horizontal' | translate}}
+            </mat-slide-toggle>
             <mat-form-field>
                 <mat-label>{{'evaluate.layout.value' | translate}}</mat-label>
                 <mat-select [(value)]="settings.evaluateItemSearchLayout" (valueChange)="onChange()">
@@ -116,170 +120,165 @@
     <mat-tab-group>
         <mat-tab [label]="'evaluate.item-search.profile.default' | translate">
             <div class="profile"> -->
-                <app-card>
-                    <mat-label>{{'evaluate.item-search.filter.name' | translate}}</mat-label>
-                    <div class="toggle">
-                        <mat-slide-toggle [checked]="settings.evaluateItemSearchFilterOnlineOnly"
-                            (change)="settings.evaluateItemSearchFilterOnlineOnly = $event.checked"
-                            (change)="onChange()">
-                            {{'evaluate.item-search.filter.online-only' | translate}}
-                        </mat-slide-toggle>
-                    </div>
-                    <mat-form-field>
-                        <mat-label>{{'evaluate.item-search.filter.max-age.name' | translate}}</mat-label>
-                        <mat-select [(value)]="settings.evaluateItemSearchFilterIndexed" (valueChange)="onChange()">
-                            <mat-option value="any"> {{'evaluate.item-search.filter.max-age.any' | translate}}
-                            </mat-option>
-                            <mat-option value="1day"> {{'evaluate.item-search.filter.max-age.day' | translate}}
-                            </mat-option>
-                            <mat-option value="3days"> {{'evaluate.item-search.filter.max-age.days' | translate}}
-                            </mat-option>
-                            <mat-option value="1week"> {{'evaluate.item-search.filter.max-age.week' | translate}}
-                            </mat-option>
-                            <mat-option value="2weeks"> {{'evaluate.item-search.filter.max-age.weeks' | translate}}
-                            </mat-option>
-                            <mat-option value="1month"> {{'evaluate.item-search.filter.max-age.month' | translate}}
-                            </mat-option>
-                            <mat-option value="2months"> {{'evaluate.item-search.filter.max-age.months' | translate}}
-                            </mat-option>
-                        </mat-select>
-                    </mat-form-field>
-                </app-card>
+<app-card>
+    <mat-label>{{'evaluate.item-search.filter.name' | translate}}</mat-label>
+    <div class="toggle">
+        <mat-slide-toggle [checked]="settings.evaluateItemSearchFilterOnlineOnly"
+            (change)="settings.evaluateItemSearchFilterOnlineOnly = $event.checked" (change)="onChange()">
+            {{'evaluate.item-search.filter.online-only' | translate}}
+        </mat-slide-toggle>
+    </div>
+    <mat-form-field>
+        <mat-label>{{'evaluate.item-search.filter.max-age.name' | translate}}</mat-label>
+        <mat-select [(value)]="settings.evaluateItemSearchFilterIndexed" (valueChange)="onChange()">
+            <mat-option value="any"> {{'evaluate.item-search.filter.max-age.any' | translate}}
+            </mat-option>
+            <mat-option value="1day"> {{'evaluate.item-search.filter.max-age.day' | translate}}
+            </mat-option>
+            <mat-option value="3days"> {{'evaluate.item-search.filter.max-age.days' | translate}}
+            </mat-option>
+            <mat-option value="1week"> {{'evaluate.item-search.filter.max-age.week' | translate}}
+            </mat-option>
+            <mat-option value="2weeks"> {{'evaluate.item-search.filter.max-age.weeks' | translate}}
+            </mat-option>
+            <mat-option value="1month"> {{'evaluate.item-search.filter.max-age.month' | translate}}
+            </mat-option>
+            <mat-option value="2months"> {{'evaluate.item-search.filter.max-age.months' | translate}}
+            </mat-option>
+        </mat-select>
+    </mat-form-field>
+</app-card>
 
-                <app-card>
-                    <mat-label> {{'evaluate.item-search.property.name' | translate}} </mat-label>
+<app-card>
+    <mat-label> {{'evaluate.item-search.property.name' | translate}} </mat-label>
 
-                    <label class="label"> {{'evaluate.item-search.property.range' | translate}}
-                        {{displayWithStat(settings.evaluateItemSearchPropertyMinRange)}}~{{displayWithStat(settings.evaluateItemSearchPropertyMaxRange)}}%
-                    </label>
-                    <div class="range">
-                        <span>#</span>
-                        <mat-slider min="0" max="50" step="1" tickInterval="10" invert [displayWith]="displayWithStat"
-                            [(value)]="settings.evaluateItemSearchPropertyMinRange" (valueChange)="onChange()">
-                        </mat-slider>
-                        <div class="value"
-                            *ngIf="settings.evaluateItemSearchPropertyMinRange !== 0 || settings.evaluateItemSearchPropertyMaxRange !== 0;else single">
-                            <span
-                                *ngIf="settings.evaluateItemSearchPropertyMinRange !== 50;else any">{{50 * ( 1 - (settings.evaluateItemSearchPropertyMinRange / 100)) | number : '1.0-1'}}</span>
-                            <span>~</span>
-                            <span
-                                *ngIf="settings.evaluateItemSearchPropertyMaxRange !== 50;else any">{{50 * ( 1 + (settings.evaluateItemSearchPropertyMaxRange / 100)) | number : '1.0-1'}}</span>
-                            <ng-template #any>#</ng-template>
-                        </div>
-                        <mat-slider min="0" max="50" step="1" tickInterval="10" [displayWith]="displayWithStat"
-                            [(value)]="settings.evaluateItemSearchPropertyMaxRange" (valueChange)="onChange()">
-                        </mat-slider>
-                        <span>#</span>
-                        <ng-template #single>
-                            <div class="value">
-                                <span>50</span>
-                            </div>
-                        </ng-template>
-                    </div>
+    <label class="label"> {{'evaluate.item-search.property.range' | translate}}
+        {{displayWithStat(settings.evaluateItemSearchPropertyMinRange)}}~{{displayWithStat(settings.evaluateItemSearchPropertyMaxRange)}}%
+    </label>
+    <div class="range">
+        <span>#</span>
+        <mat-slider min="0" max="50" step="1" tickInterval="10" invert [displayWith]="displayWithStat"
+            [(value)]="settings.evaluateItemSearchPropertyMinRange" (valueChange)="onChange()">
+        </mat-slider>
+        <div class="value"
+            *ngIf="settings.evaluateItemSearchPropertyMinRange !== 0 || settings.evaluateItemSearchPropertyMaxRange !== 0;else single">
+            <span
+                *ngIf="settings.evaluateItemSearchPropertyMinRange !== 50;else any">{{50 * ( 1 - (settings.evaluateItemSearchPropertyMinRange / 100)) | number : '1.0-1'}}</span>
+            <span>~</span>
+            <span
+                *ngIf="settings.evaluateItemSearchPropertyMaxRange !== 50;else any">{{50 * ( 1 + (settings.evaluateItemSearchPropertyMaxRange / 100)) | number : '1.0-1'}}</span>
+            <ng-template #any>#</ng-template>
+        </div>
+        <mat-slider min="0" max="50" step="1" tickInterval="10" [displayWith]="displayWithStat"
+            [(value)]="settings.evaluateItemSearchPropertyMaxRange" (valueChange)="onChange()">
+        </mat-slider>
+        <span>#</span>
+        <ng-template #single>
+            <div class="value">
+                <span>50</span>
+            </div>
+        </ng-template>
+    </div>
 
-                    <div class="toggle">
-                        <mat-slide-toggle [checked]="settings.evaluateItemSearchPropertyAttack"
-                            (change)="settings.evaluateItemSearchPropertyAttack = $event.checked" (change)="onChange()">
-                            {{'evaluate.item-search.property.attack' | translate}}
-                        </mat-slide-toggle>
-                        <mat-slide-toggle [checked]="settings.evaluateItemSearchPropertyDefense"
-                            (change)="settings.evaluateItemSearchPropertyDefense = $event.checked"
-                            (change)="onChange()">
-                            {{'evaluate.item-search.property.defense' | translate}}
-                        </mat-slide-toggle>
-                        <mat-slide-toggle [checked]="settings.evaluateItemSearchPropertyNormalizeQuality"
-                            (change)="settings.evaluateItemSearchPropertyNormalizeQuality = $event.checked"
-                            (change)="onChange()">
-                            {{'evaluate.item-search.property.normalize-quality' | translate}}
-                        </mat-slide-toggle>
-                    </div>
-                    <div class="toggle">
-                        <mat-slide-toggle [checked]="settings.evaluateItemSearchPropertyItemLevel"
-                            (change)="settings.evaluateItemSearchPropertyItemLevel = $event.checked"
-                            (change)="onChange()">
-                            {{'evaluate.item-search.property.item-level' | translate}}
-                        </mat-slide-toggle>
-                        <mat-slide-toggle [checked]="settings.evaluateItemSearchPropertyItemType"
-                            (change)="settings.evaluateItemSearchPropertyItemType = $event.checked"
-                            (change)="onChange()">
-                            {{'evaluate.item-search.property.item-type' | translate}}
-                        </mat-slide-toggle>
-                        <mat-slide-toggle [checked]="settings.evaluateItemSearchPropertyMiscs"
-                            (change)="settings.evaluateItemSearchPropertyMiscs = $event.checked" (change)="onChange()">
-                            {{'evaluate.item-search.property.miscs' | translate}}
-                        </mat-slide-toggle>
-                    </div>
+    <div class="toggle">
+        <mat-slide-toggle [checked]="settings.evaluateItemSearchPropertyAttack"
+            (change)="settings.evaluateItemSearchPropertyAttack = $event.checked" (change)="onChange()">
+            {{'evaluate.item-search.property.attack' | translate}}
+        </mat-slide-toggle>
+        <mat-slide-toggle [checked]="settings.evaluateItemSearchPropertyDefense"
+            (change)="settings.evaluateItemSearchPropertyDefense = $event.checked" (change)="onChange()">
+            {{'evaluate.item-search.property.defense' | translate}}
+        </mat-slide-toggle>
+        <mat-slide-toggle [checked]="settings.evaluateItemSearchPropertyNormalizeQuality"
+            (change)="settings.evaluateItemSearchPropertyNormalizeQuality = $event.checked" (change)="onChange()">
+            {{'evaluate.item-search.property.normalize-quality' | translate}}
+        </mat-slide-toggle>
+    </div>
+    <div class="toggle">
+        <mat-slide-toggle [checked]="settings.evaluateItemSearchPropertyItemLevel"
+            (change)="settings.evaluateItemSearchPropertyItemLevel = $event.checked" (change)="onChange()">
+            {{'evaluate.item-search.property.item-level' | translate}}
+        </mat-slide-toggle>
+        <mat-slide-toggle [checked]="settings.evaluateItemSearchPropertyItemType"
+            (change)="settings.evaluateItemSearchPropertyItemType = $event.checked" (change)="onChange()">
+            {{'evaluate.item-search.property.item-type' | translate}}
+        </mat-slide-toggle>
+        <mat-slide-toggle [checked]="settings.evaluateItemSearchPropertyMiscs"
+            (change)="settings.evaluateItemSearchPropertyMiscs = $event.checked" (change)="onChange()">
+            {{'evaluate.item-search.property.miscs' | translate}}
+        </mat-slide-toggle>
+    </div>
 
-                    <div>
-                        <mat-form-field>
-                            <mat-label>{{'evaluate.item-search.property.link' | translate}}</mat-label>
-                            <mat-select [(value)]="settings.evaluateItemSearchPropertyLinks" (valueChange)="onChange()">
-                                <mat-option [value]="0">
-                                    {{'evaluate.item-search.property.links.always' | translate}}
-                                </mat-option>
-                                <mat-option [value]="5"> 5-6 </mat-option>
-                                <mat-option [value]="6"> 6 </mat-option>
-                                <mat-option [value]="999">
-                                    {{'evaluate.item-search.property.links.never' | translate}}
-                                </mat-option>
-                            </mat-select>
-                        </mat-form-field>
-                    </div>
-                </app-card>
+    <div>
+        <mat-form-field>
+            <mat-label>{{'evaluate.item-search.property.link' | translate}}</mat-label>
+            <mat-select [(value)]="settings.evaluateItemSearchPropertyLinks" (valueChange)="onChange()">
+                <mat-option [value]="0">
+                    {{'evaluate.item-search.property.links.always' | translate}}
+                </mat-option>
+                <mat-option [value]="5"> 5-6 </mat-option>
+                <mat-option [value]="6"> 6 </mat-option>
+                <mat-option [value]="999">
+                    {{'evaluate.item-search.property.links.never' | translate}}
+                </mat-option>
+            </mat-select>
+        </mat-form-field>
+    </div>
+</app-card>
 
-                <app-card>
-                    <mat-label> {{'evaluate.item-search.stat.name' | translate}} </mat-label>
+<app-card>
+    <mat-label> {{'evaluate.item-search.stat.name' | translate}} </mat-label>
 
-                    <label class="label"> {{'evaluate.item-search.stat.range' | translate}}
-                        {{displayWithStat(settings.evaluateItemSearchStatMinRange)}}~{{displayWithStat(settings.evaluateItemSearchStatMaxRange)}}%
-                    </label>
-                    <div class="range">
-                        <span>#</span>
-                        <mat-slider min="0" max="50" step="1" tickInterval="10" invert [displayWith]="displayWithStat"
-                            [(value)]="settings.evaluateItemSearchStatMinRange" (valueChange)="onChange()">
-                        </mat-slider>
-                        <div class="value"
-                            *ngIf="settings.evaluateItemSearchStatMinRange !== 0 || settings.evaluateItemSearchStatMaxRange !== 0;else single">
-                            <span
-                                *ngIf="settings.evaluateItemSearchStatMinRange !== 50;else any">{{50 * ( 1 - (settings.evaluateItemSearchStatMinRange / 100)) | number : '1.0-1'}}</span>
-                            <span>~</span>
-                            <span
-                                *ngIf="settings.evaluateItemSearchStatMaxRange !== 50;else any">{{50 * ( 1 + (settings.evaluateItemSearchStatMaxRange / 100)) | number : '1.0-1'}}</span>
-                            <ng-template #any>#</ng-template>
-                        </div>
-                        <mat-slider min="0" max="50" step="1" tickInterval="10" [displayWith]="displayWithStat"
-                            [(value)]="settings.evaluateItemSearchStatMaxRange" (valueChange)="onChange()">
-                        </mat-slider>
-                        <span>#</span>
-                        <ng-template #single>
-                            <div class="value">
-                                <span>50</span>
-                            </div>
-                        </ng-template>
-                    </div>
+    <label class="label"> {{'evaluate.item-search.stat.range' | translate}}
+        {{displayWithStat(settings.evaluateItemSearchStatMinRange)}}~{{displayWithStat(settings.evaluateItemSearchStatMaxRange)}}%
+    </label>
+    <div class="range">
+        <span>#</span>
+        <mat-slider min="0" max="50" step="1" tickInterval="10" invert [displayWith]="displayWithStat"
+            [(value)]="settings.evaluateItemSearchStatMinRange" (valueChange)="onChange()">
+        </mat-slider>
+        <div class="value"
+            *ngIf="settings.evaluateItemSearchStatMinRange !== 0 || settings.evaluateItemSearchStatMaxRange !== 0;else single">
+            <span
+                *ngIf="settings.evaluateItemSearchStatMinRange !== 50;else any">{{50 * ( 1 - (settings.evaluateItemSearchStatMinRange / 100)) | number : '1.0-1'}}</span>
+            <span>~</span>
+            <span
+                *ngIf="settings.evaluateItemSearchStatMaxRange !== 50;else any">{{50 * ( 1 + (settings.evaluateItemSearchStatMaxRange / 100)) | number : '1.0-1'}}</span>
+            <ng-template #any>#</ng-template>
+        </div>
+        <mat-slider min="0" max="50" step="1" tickInterval="10" [displayWith]="displayWithStat"
+            [(value)]="settings.evaluateItemSearchStatMaxRange" (valueChange)="onChange()">
+        </mat-slider>
+        <span>#</span>
+        <ng-template #single>
+            <div class="value">
+                <span>50</span>
+            </div>
+        </ng-template>
+    </div>
 
-                    <div class="toggle">
-                        <mat-slide-toggle [checked]="settings.evaluateItemSearchStatUniqueAll"
-                            (change)="settings.evaluateItemSearchStatUniqueAll = $event.checked">
-                            {{'evaluate.item-search.stat.unique-all' | translate}}
-                        </mat-slide-toggle>
-                    </div>
+    <div class="toggle">
+        <mat-slide-toggle [checked]="settings.evaluateItemSearchStatUniqueAll"
+            (change)="settings.evaluateItemSearchStatUniqueAll = $event.checked">
+            {{'evaluate.item-search.stat.unique-all' | translate}}
+        </mat-slide-toggle>
+    </div>
+
+    <app-select-list [items]="stats$ | async" (itemsChange)="onStatsChange($event)">
+        <ng-template let-item>
+            <span class="stat" [title]="item.text">
+                <span [class]="'type ' + item.type"> {{item.type}} </span>
+                <span class="text"> {{item.text}} </span>
+            </span>
+        </ng-template>
+    </app-select-list>
 
-                    <app-select-list [items]="stats$ | async" (itemsChange)="onStatsChange($event)">
-                        <ng-template let-item>
-                            <span class="stat" [title]="item.text">
-                                <span [class]="'type ' + item.type"> {{item.type}} </span>
-                                <span class="text"> {{item.text}} </span>
-                            </span>
-                        </ng-template>
-                    </app-select-list>
-                    
-                    <!-- <div align="end">
+    <!-- <div align="end">
                         <button mat-button (click)="onImportStats()">{{'evaluate.stats-import' | translate}}</button>
                         <button mat-button (click)="onExportStats()">{{'evaluate.stats-export' | translate}}</button>
                     </div> -->
-                </app-card>
-            <!--</div>
+</app-card>
+<!--</div>
          </mat-tab>
 
         <mat-tab disabled>
diff --git a/src/app/modules/evaluate/evaluate-feature-settings.ts b/src/app/modules/evaluate/evaluate-feature-settings.ts
index 96538f62..d37be302 100644
--- a/src/app/modules/evaluate/evaluate-feature-settings.ts
+++ b/src/app/modules/evaluate/evaluate-feature-settings.ts
@@ -15,6 +15,7 @@ export interface EvaluateFeatureSettings extends FeatureSettings {
     evaluateCurrencies: string[];
     evaluateCurrenciesOriginal: boolean;
     evaluateTranslateLanguage: Language;
+    evaluateItemSearchHorizontal: boolean;
     evaluateItemSearchLayout: EvaluateItemSearchLayout;
     evaluateItemSearchQueryInitial: boolean;
     evaluateItemSearchQueryDebounceTime: number;
diff --git a/src/app/modules/evaluate/evaluate.module.ts b/src/app/modules/evaluate/evaluate.module.ts
index 08122470..eba69b86 100644
--- a/src/app/modules/evaluate/evaluate.module.ts
+++ b/src/app/modules/evaluate/evaluate.module.ts
@@ -49,6 +49,7 @@ export class EvaluateModule implements FeatureModule<EvaluateFeatureSettings> {
                 evaluateCurrenciesOriginal: true,
                 evaluateTranslateLanguage: Language.English,
                 evaluateItemSearchLayout: EvaluateItemSearchLayout.Graph,
+                evaluateItemSearchHorizontal: false,
                 evaluateItemSearchQueryInitial: false,
                 evaluateItemSearchQueryDebounceTime: 10,
                 evaluateItemSearchQueryFetchCount: 30,
diff --git a/src/app/shared/module/poe/item/frame/item-frame/item-frame.component.html b/src/app/shared/module/poe/item/frame/item-frame/item-frame.component.html
index 068483c2..5a3102d5 100644
--- a/src/app/shared/module/poe/item/frame/item-frame/item-frame.component.html
+++ b/src/app/shared/module/poe/item/frame/item-frame/item-frame.component.html
@@ -4,56 +4,61 @@
         [language]="language">
     </app-item-frame-header>
     <div class="detail">
-        <!-- properties -->
-        <ng-container *ngIf="item.properties && (!properties || properties.length)">
-            <app-item-frame-properties [item]="item" [queryItem]="queryItem" [language]="language"
-                [properties]="properties" [minRange]="propertyMinRange" [maxRange]="propertyMaxRange"
-                appAnnotation="evaluate.properties">
-            </app-item-frame-properties>
-            <ng-content select="properties"></ng-content>
-            <app-item-frame-separator [item]="item" *ngIf="req || sockets || stats || state || influences || separator">
-            </app-item-frame-separator>
-        </ng-container>
+        <div class="inner">
+            <!-- properties -->
+            <ng-container *ngIf="item.properties && (!properties || properties.length)">
+                <app-item-frame-properties [item]="item" [queryItem]="queryItem" [language]="language"
+                    [properties]="properties" [minRange]="propertyMinRange" [maxRange]="propertyMaxRange"
+                    appAnnotation="evaluate.properties">
+                </app-item-frame-properties>
+                <ng-content select="properties"></ng-content>
+                <app-item-frame-separator [item]="item"
+                    *ngIf="req || sockets || stats || state || influences || separator">
+                </app-item-frame-separator>
+            </ng-container>
 
-        <!-- requirements -->
-        <ng-container *ngIf="req">
-            <app-item-frame-level-requirements [item]="item" [queryItem]="queryItem" [language]="language">
-            </app-item-frame-level-requirements>
-            <app-item-frame-separator [item]="item" *ngIf="sockets || stats || state || influences || separator">
-            </app-item-frame-separator>
-        </ng-container>
+            <!-- requirements -->
+            <ng-container *ngIf="req">
+                <app-item-frame-level-requirements [item]="item" [queryItem]="queryItem" [language]="language">
+                </app-item-frame-level-requirements>
+                <app-item-frame-separator [item]="item" *ngIf="sockets || stats || state || influences || separator">
+                </app-item-frame-separator>
+            </ng-container>
 
-        <!-- sockets -->
-        <ng-container *ngIf="sockets">
-            <app-item-frame-sockets [item]="item" [queryItem]="queryItem"></app-item-frame-sockets>
-            <app-item-frame-separator [item]="item" *ngIf="stats || state || influences || separator">
-            </app-item-frame-separator>
-        </ng-container>
+            <!-- sockets -->
+            <ng-container *ngIf="sockets">
+                <app-item-frame-sockets [item]="item" [queryItem]="queryItem"></app-item-frame-sockets>
+                <app-item-frame-separator [item]="item" *ngIf="stats || state || influences || separator">
+                </app-item-frame-separator>
+            </ng-container>
 
-        <!-- stats -->
-        <ng-container *ngIf="stats">
-            <app-item-frame-stats [item]="item" [queryItem]="queryItem" [language]="language"
-                [modifierMinRange]="modifierMinRange" [modifierMaxRange]="modifierMaxRange"
-                appAnnotation="evaluate.stats"></app-item-frame-stats>
-            <app-item-frame-separator [item]="item" *ngIf="state || influences || separator">
-            </app-item-frame-separator>
-        </ng-container>
+            <!-- stats -->
+            <ng-container *ngIf="stats">
+                <app-item-frame-stats [item]="item" [queryItem]="queryItem" [language]="language"
+                    [modifierMinRange]="modifierMinRange" [modifierMaxRange]="modifierMaxRange"
+                    appAnnotation="evaluate.stats"></app-item-frame-stats>
+                <app-item-frame-separator [item]="item" *ngIf="state || influences || separator">
+                </app-item-frame-separator>
+            </ng-container>
 
-        <!-- veiled / corrupted -->
-        <ng-container *ngIf="state">
-            <app-item-frame-state [item]="item" [queryItem]="queryItem" [language]="language"></app-item-frame-state>
-            <app-item-frame-separator [item]="item" *ngIf="influences || separator">
-            </app-item-frame-separator>
-        </ng-container>
+            <!-- veiled / corrupted -->
+            <ng-container *ngIf="state">
+                <app-item-frame-state [item]="item" [queryItem]="queryItem" [language]="language">
+                </app-item-frame-state>
+                <app-item-frame-separator [item]="item" *ngIf="influences || separator">
+                </app-item-frame-separator>
+            </ng-container>
 
-        <!-- influences -->
-        <ng-container *ngIf="influences">
-            <app-item-frame-influences [item]="item" [queryItem]="queryItem" [language]="language">
-            </app-item-frame-influences>
-            <app-item-frame-separator [item]="item" *ngIf="separator">
-            </app-item-frame-separator>
-        </ng-container>
-
-        <ng-content></ng-content>
+            <!-- influences -->
+            <ng-container *ngIf="influences">
+                <app-item-frame-influences [item]="item" [queryItem]="queryItem" [language]="language">
+                </app-item-frame-influences>
+                <app-item-frame-separator [item]="item" *ngIf="separator">
+                </app-item-frame-separator>
+            </ng-container>
+        </div>
+        <div class="outer">
+            <ng-content></ng-content>
+        </div>
     </div>
 </div>
\ No newline at end of file
diff --git a/src/app/shared/module/poe/item/frame/item-frame/item-frame.component.scss b/src/app/shared/module/poe/item/frame/item-frame/item-frame.component.scss
index d270febb..595da3bb 100644
--- a/src/app/shared/module/poe/item/frame/item-frame/item-frame.component.scss
+++ b/src/app/shared/module/poe/item/frame/item-frame/item-frame.component.scss
@@ -9,8 +9,16 @@
 
   .detail {
     position: relative;
+    white-space: pre;
+  }
+
+  .inner {
+    position: relative;
+  }
+
+  .inner,
+  .outer {
     padding: 2px;
     min-width: 396px;
-    white-space: pre;
   }
 }
diff --git a/src/assets/i18n/english.json b/src/assets/i18n/english.json
index 946732df..f9edef00 100644
--- a/src/assets/i18n/english.json
+++ b/src/assets/i18n/english.json
@@ -222,6 +222,7 @@
 			}
 		},
 		"layout": {
+			"horizontal": "Display horizontal",
 			"name": "Layout",
 			"value": "Result View",
 			"values": {
diff --git a/src/assets/i18n/french.json b/src/assets/i18n/french.json
index 58be2d4b..32dfd50b 100644
--- a/src/assets/i18n/french.json
+++ b/src/assets/i18n/french.json
@@ -218,6 +218,7 @@
 			}
 		},
 		"layout": {
+			"horizontal": "Affichage horizontal",
 			"name": "Disposition",
 			"value": "Affichage des résultats",
 			"values": {
diff --git a/src/assets/i18n/german.json b/src/assets/i18n/german.json
index f42ae1ce..70dc7dca 100644
--- a/src/assets/i18n/german.json
+++ b/src/assets/i18n/german.json
@@ -218,6 +218,7 @@
 			}
 		},
 		"layout": {
+			"horizontal": "Horizontal anzeigen",
 			"name": "Layout",
 			"value": "Ergebnisansicht",
 			"values": {
diff --git a/src/assets/i18n/korean.json b/src/assets/i18n/korean.json
index 6255a653..9b22f3ea 100644
--- a/src/assets/i18n/korean.json
+++ b/src/assets/i18n/korean.json
@@ -218,6 +218,7 @@
 			}
 		},
 		"layout": {
+			"horizontal": "가로로 표시",
 			"name": "형세",
 			"value": "결과보기",
 			"values": {
diff --git a/src/assets/i18n/polish.json b/src/assets/i18n/polish.json
index 3503a5ce..0f66d303 100644
--- a/src/assets/i18n/polish.json
+++ b/src/assets/i18n/polish.json
@@ -218,6 +218,7 @@
 			}
 		},
 		"layout": {
+			"horizontal": "Wyświetl w poziomie",
 			"name": "Układ",
 			"value": "Okno wyników",
 			"values": {
diff --git a/src/assets/i18n/portuguese.json b/src/assets/i18n/portuguese.json
index 79c9e15b..57a93cf7 100644
--- a/src/assets/i18n/portuguese.json
+++ b/src/assets/i18n/portuguese.json
@@ -218,6 +218,7 @@
 			}
 		},
 		"layout": {
+			"horizontal": "Exibir horizontal",
 			"name": "Layout",
 			"value": "Visualização de resultados",
 			"values": {
diff --git a/src/assets/i18n/russian.json b/src/assets/i18n/russian.json
index 45dc9e16..7c1be2d0 100644
--- a/src/assets/i18n/russian.json
+++ b/src/assets/i18n/russian.json
@@ -218,6 +218,7 @@
 			}
 		},
 		"layout": {
+			"horizontal": "Горизонтальный дисплей",
 			"name": "раскладка",
 			"value": "Просмотр результатов",
 			"values": {
diff --git a/src/assets/i18n/simplified-chinese.json b/src/assets/i18n/simplified-chinese.json
index 6624ef97..6a553cd6 100644
--- a/src/assets/i18n/simplified-chinese.json
+++ b/src/assets/i18n/simplified-chinese.json
@@ -218,6 +218,7 @@
 			}
 		},
 		"layout": {
+			"horizontal": "显示水平",
 			"name": "布局",
 			"value": "结果视图",
 			"values": {
diff --git a/src/assets/i18n/spanish.json b/src/assets/i18n/spanish.json
index f7f9a56d..f4f99628 100644
--- a/src/assets/i18n/spanish.json
+++ b/src/assets/i18n/spanish.json
@@ -218,6 +218,7 @@
 			}
 		},
 		"layout": {
+			"horizontal": "Pantalla horizontal",
 			"name": "diseño",
 			"value": "Vista de resultados",
 			"values": {
diff --git a/src/assets/i18n/thai.json b/src/assets/i18n/thai.json
index ef8bfeab..b9311d83 100644
--- a/src/assets/i18n/thai.json
+++ b/src/assets/i18n/thai.json
@@ -218,6 +218,7 @@
 			}
 		},
 		"layout": {
+			"horizontal": "แสดงแนวนอน",
 			"name": "แบบ",
 			"value": "ดูผลลัพธ์",
 			"values": {
diff --git a/src/assets/i18n/traditional-chinese.json b/src/assets/i18n/traditional-chinese.json
index 0f2692b8..b9984ccc 100644
--- a/src/assets/i18n/traditional-chinese.json
+++ b/src/assets/i18n/traditional-chinese.json
@@ -218,6 +218,7 @@
 			}
 		},
 		"layout": {
+			"horizontal": "顯示水平",
 			"name": "版面",
 			"value": "結果呈現",
 			"values": {