From 8c2223e3d3db00e455a55b8f10b24f21923662f1 Mon Sep 17 00:00:00 2001
From: Helias <stefanoborzi32@gmail.com>
Date: Wed, 18 Mar 2020 19:31:06 +0100
Subject: [PATCH] feat(item-quality): add item name color based on quality

---
 .../select-item/select-item.component.html    |   8 +++-
 src/assets/img/money/copper.gif               | Bin 0 -> 234 bytes
 src/assets/img/money/gold.gif                 | Bin 0 -> 244 bytes
 src/assets/img/money/silver.gif               | Bin 0 -> 252 bytes
 src/assets/scss/main.scss                     |  38 ++++++++++++++++++
 5 files changed, 45 insertions(+), 1 deletion(-)
 create mode 100644 src/assets/img/money/copper.gif
 create mode 100644 src/assets/img/money/gold.gif
 create mode 100644 src/assets/img/money/silver.gif

diff --git a/src/app/features/item/select-item/select-item.component.html b/src/app/features/item/select-item/select-item.component.html
index 1f962e81155..926e5724d46 100644
--- a/src/app/features/item/select-item/select-item.component.html
+++ b/src/app/features/item/select-item/select-item.component.html
@@ -62,7 +62,13 @@
           {{ row.entry }}
         </ng-template>
       </ngx-datatable-column>
-      <ngx-datatable-column name="Name" prop="name" [minWidth]="60"></ngx-datatable-column>
+      <ngx-datatable-column name="Name" prop="name" [minWidth]="60">
+        <ng-template let-row="row" ngx-datatable-cell-template>
+          <div class="item-select">
+            <b [ngClass]="'q' + row.Quality">{{ row.name }}</b>
+          </div>
+        </ng-template>
+      </ngx-datatable-column>
       <ngx-datatable-column name="DisplayID" prop="displayid"></ngx-datatable-column>
       <ngx-datatable-column name="Class" prop="class"></ngx-datatable-column>
       <ngx-datatable-column name="Subclass" prop="subclass"></ngx-datatable-column>
diff --git a/src/assets/img/money/copper.gif b/src/assets/img/money/copper.gif
new file mode 100644
index 0000000000000000000000000000000000000000..3a29d45e61f9c4baaaaa7ea40bdaad77af6bd716
GIT binary patch
literal 234
zcmV<G02Tj7Nk%w1VGRHc0K^{vl|>tDOF1SU9F|u&zK?CXf?|tCB26_Yx^zjFOCsC3
zorXIZWjZ9$g;k_nF|lYnt$0+KP${KmLzresd^;FZD;LtOkDXpR!+=cIpm?@<QmJrF
zflDxvRyN(hrZ_k_A^8LW0018VEC2ui01W^Q000GN;3tYgX^x{%Eylnx0xGae(l``Q
ziHBnt3(BGvNqhvHhk;^9G>a4g<KcU5AeTh6gXjzloonF&h;k4a%Y|SeKpwhMhoJDZ
kvACEtGHFjF2rw~63>p|18U+D^C;<ly2M3HYCnzBRJGZ-0X8-^I

literal 0
HcmV?d00001

diff --git a/src/assets/img/money/gold.gif b/src/assets/img/money/gold.gif
new file mode 100644
index 0000000000000000000000000000000000000000..17750f635045ebf6a5b1d389451606f4e7fef225
GIT binary patch
literal 244
zcmV<Q01N*|Nk%w1VGRHc0K^{vUQr*>vJC0VIoix?h;thyBOB7WO1qR5<=~UCnJdGZ
z7PO2P)44yyrZ~u?Bi6xBsfh~Cu{!C?Nzkn)z?~&MH5jUx72(!&|K~}ro<*~v8vN{T
z+PW#-!4T!g5;!<GA^8LW0018VEC2ui01W^Q000GX;3s}XRTbztq5yPIFrku!ax984
z9a=^2H^^e)=ny^?4o87=yc`}#fuK7m0*Xc?Vk{&CiA6)pFhl~<hG2s*TrLm8BtR$t
u5(5O{GI&G;QYaQ24{#3*5*a=s6&e@<0ulx?BP1mNm;eQpD=3?lApkoJa98~R

literal 0
HcmV?d00001

diff --git a/src/assets/img/money/silver.gif b/src/assets/img/money/silver.gif
new file mode 100644
index 0000000000000000000000000000000000000000..ee79a14f5cda4219700e8dd7f2cc9a56647bbbb9
GIT binary patch
literal 252
zcmV<Y00aL=Nk%w1VGRHc0K^{vYHDgLD=Tqvai*rGhK7bCBO|S?t%-?=o12@Gl9JQY
z)4IC4Zf<T}U0s5Lf|iz+RaI3*MMrdWbUZvfv9Yl-GBQd^N_~BOd3kwYU|<pw5@u#*
z+uPgC&CS5Tz&JQKA^8LW0018VEC2ui01W^Q000Gf;3s}X83a`^ip7*MhXh#K7+Amt
zJV_%pstUmYU}PGA;w4bXAP6}DKyVRA0ujQ)Az%O;gNNh_86++k%mFb#U?dewV!<&O
z6dv;dQgSLd93B)02M!fA6%rQ<9S;Np2ZuHUb_Ns!6DuMU5D^g>0X3Q=1sW<VApko;
CVNe$U

literal 0
HcmV?d00001

diff --git a/src/assets/scss/main.scss b/src/assets/scss/main.scss
index 1cc406f7fd3..1686c2f64e1 100644
--- a/src/assets/scss/main.scss
+++ b/src/assets/scss/main.scss
@@ -16,3 +16,41 @@ $fa-font-path: "~@fortawesome/fontawesome-free/webfonts";
 @import './sidebar.scss';
 @import './utils.scss';
 @import './editor.scss';
+
+.item-preview {
+  .item-stock, .item-name {
+    line-height: 30px;
+    font-size: 22px;
+  }
+
+  .q  { color: #ffd100!important; }
+  .q0 { color: #9d9d9d!important; }
+  .q1 { color: #ffffff!important; }
+  .q2 { color: #1eff00!important; }
+  .q3 { color: #0070dd!important; }
+  .q4 { color: #a335ee!important; }
+  .q5 { color: #ff8000!important; }
+  .q6 { color: #e5cc80!important; }
+  .q7 { color: #e5cc80!important; }
+
+ .moneyitem, .moneygold, .moneysilver, .moneycopper, .moneyalliance, .moneyhorde, .moneyarena, .moneyachievement, .moneysocketmeta, .moneysocketred, .moneysocketyellow, .moneysocketblue, .moneysocketprismatic {
+    background: no-repeat right center;
+    color: white;
+  }
+
+  .moneygold   { padding-right: 15px; background-image: url(../img/money/gold.gif);   }
+  .moneysilver { padding-right: 15px; background-image: url(../img/money/silver.gif); }
+  .moneycopper { padding-right: 15px; background-image: url(../img/money/copper.gif); }
+}
+
+.item-select {
+  .q  { color: #ffd100!important; }
+  .q0 { color: #757575!important; }
+  /* .q1 { color:#ffffff!important; } */
+  .q2 { color: #4CAF50!important; }
+  .q3 { color: #0070dd!important; }
+  .q4 { color: #a335ee!important; }
+  .q5 { color: #ffc107!important; }
+  .q6 { color: #ffab00!important; }
+  .q7 { color: #ff8a65!important; }
+}