- added experimental horizontal layout (enableable at the settings) f…

…or the evaluate dialog (#769)
Kyusung4698 · Jul 28, 2020 · a094f22 · a094f22
1 parent 11fb462
commit a094f22
Show file tree

Hide file tree

Showing 21 changed files with 325 additions and 217 deletions.
diff --git 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
@@ -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
@@ -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>
+<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>
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
@@ -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
@@ -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 {