From 5ea35e5356b083634ddf347815aa52cad9e267f3 Mon Sep 17 00:00:00 2001
From: Eric Winchell <ewinchel@redhat.com>
Date: Thu, 5 Oct 2017 13:50:36 -0400
Subject: [PATCH] Replace quad background PNG with SVG

---
 app/assets/images/layout/base-single.png      | Bin 1869 -> 0 bytes
 app/assets/images/layout/base-single.svg      |  25 +++++++
 app/assets/images/layout/base.png             | Bin 3741 -> 0 bytes
 app/assets/images/layout/base.svg             |  62 ++++++++++++++++++
 .../stylesheets/patternfly_overrides.scss     |   6 +-
 app/helpers/quadicon_helper.rb                |  24 +++----
 .../listnav/_compare_sections.html.haml       |   4 +-
 7 files changed, 104 insertions(+), 17 deletions(-)
 delete mode 100644 app/assets/images/layout/base-single.png
 create mode 100644 app/assets/images/layout/base-single.svg
 delete mode 100644 app/assets/images/layout/base.png
 create mode 100644 app/assets/images/layout/base.svg

diff --git a/app/assets/images/layout/base-single.png b/app/assets/images/layout/base-single.png
deleted file mode 100644
index a4dc2a7c214ad6bde65359852ae0c5d8dc06263c..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 1869
zcmaJ?c~BE~6ixsGD2xaZ0YSGBL<Ev-Ab~6d2qb}Ef)GGb#7K^XM3QVw7D@0Rq9PPe
zsNfV(1h0Bl#Zs>#80}C8&q2jwRJ0yci&hYkPVEK(`$y@{?!NbX^S<w$J6o2V6z@FI
zYa$MZbLJ;-M3_vlJ`M!zo&NenJSIF*t{6>4a?k>)9>%d1hzth!8fh*pf~5-6(sno!
zhqLunrHN6oPyoph4OwdSAsaP142{D@MjLffc^-@cGB{VIWs!Q%w2%Omf<?-p3#md~
z9IR9&6zbvB!lX2LVV<0+AVo(3kwyq3(7>n^Fly9V17u{8hIt`Ox0)#=VAuuCW05{5
zB^D+FafluU=;V-KITZu}27?TS(isde2%u3x8ik78j9@SnqB9^`7%*~?uxNTk4kY66
zMq*(n7D<VsI*39kC@3Hogpd(^E(K&VnN|)OEg16%Hkh=i)EKNa%o=6jzy`Tqr9)MS
z7O*l(Wk^2CB4L?+E<vLkqtzNl+JrTXVwCDAAem|{Y1C0D{C`)CX3X1wir_E#{wJ{^
z&7^}VBG`cB>*d(sa%NdW>7Y10EJYE08iJ@tyO^v*P{g1_bU<7x1DGR}%2iscAz&CG
z6heHh0hMayFrULBVH{+YN&$t3hw_-*I1Y~&77K!0kR8H~<A!m0Y%Yh%qsE4hVmXLB
zUju8=QLN$%mOC!ix(pf}7MTO<Rm)%nPmgGT;i4hc__@T6%Qu2mjGs%~xL69748=Oy
ze~o(7gzb-29a~)NFt+-z7Tb3{w%C@rsVUg^(!%Gk(~Ngt)t*5_Qjbe52D3h*mN++T
z&9!ep6&*}(*vKG!BDiI^`7gR(7fL?jWxpuPCp2mHroC|*FTc=y6}^c_oO_L!IcMFk
z7oQ)t5B^Rf$a-Pg`IK2Ls#?5bVDO6Phu!`C`NuYIx^VkZ;2VcmB^?c6>8o4X0*p4R
zb{**HmMq@#9!D&h`RLujc7;eHk+|pO<uxogSeA35s}dE=uKb}(-KK4x)bfy0Qc{wM
z>zg?9L96NUc{A=2Z;#02U4BvheOhAEJ<U=NKYoS7x>%BHS=v<Ysn;m9^Yx_t*Om7d
zip4)guvo&|v6E?D8)a&>VC{v+L*(k;|2Sek(Am>5I5_D4)|mAorLnP5W;A}Ny83+i
z$7%JQot;~=$YCK&W|u#D=<VCLr+<0k$&K!~eokOd{C4f1E5qsZ&iIv$xocLRk{pe0
zc=K1H3$G{WhTFV-H!HHsvZ;687oOXy4E3tsI>Ynw!~EjLfj(3aRO%?)KE;004L8ln
zOm82douh#4HoXUkKPGkptF+q^_k2}LOxz+OSNqh~Yj@T7_{6v$%BI=&xPz_jiDsul
zlkD$lDuI(-Le!z&%unol2e)U(EI+#sthdE=7eBKD0fNQH;@EAswAjO?Jbr_l#cZ^M
zvulAQ7yr_Wj<T3Y*=OC&f*r=x?h&9>&H$5KY`dpCv3nVRoKQNeZ#^V{W-X}nZNDTw
zjq8NWnS?dclU-_By$@-&r36Q32Rhn&%*!aQD&2^;@01<$PAC3Gk`EqMGlq^Q&k?xQ
zM`eW*2!ty&9XZ>st3OHTArTQn-qi-X(p$y}ey`C}S^L)g_{6*;<7nF4{?l3H`HvWU
zvoZv5EJ{{<{l0%-V5r||PF>Q~^N4N`F9Bs|GqueTn`<_gmzN`WzO$W;f1iVYWxH=F
z{+Rh)UHXP5d{Oa(GEQ5{y0*t}0?yN3;GK5Z)_5E=`R2Md_tM=hoP@y@tA=()&Y0W^
z5f+moyf-~=ZEc;h@22Ug%Yf*NIOs@FaB#;inKGibfXe=86LuP>+M?_Qdg={tCWNb-
z@2!*^y?yk+ftyQC-rc~H@8m3B*q?)Mp1$$Yt!K}2rUs@5R9}X}7>u7&JoDPiuJ3ML
zSl5f<?{3|V|KPiVus5oqu9tYnrlv4FrAbz_{w2M5nI-VN<6%QoYCu87i9o>F6<?n*
zd9q;s9rhjjfeQ-?U3*hvnq)|u-}Z`1_vmJ4Ux#$(?CMnxRNUD^Mf?4iT<Ng>;P~7m
K&XL&c;(q{}E63>o

diff --git a/app/assets/images/layout/base-single.svg b/app/assets/images/layout/base-single.svg
new file mode 100644
index 00000000000..b0d7b5e8368
--- /dev/null
+++ b/app/assets/images/layout/base-single.svg
@@ -0,0 +1,25 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="72" height="72" viewBox="0 0 72 72">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: url(#linear-gradient);
+      }
+
+      .cls-2 {
+        fill: #f9f9f9;
+        opacity: 0.25;
+        isolation: isolate;
+      }
+    </style>
+    <linearGradient id="linear-gradient" x1="35.97" y1="74.02" x2="36.03" y2="1.98" gradientTransform="matrix(1, 0, 0, -1, 0, 74)" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#909090"/>
+      <stop offset="0.47" stop-color="#707070"/>
+      <stop offset="0.66" stop-color="#515151"/>
+      <stop offset="0.87" stop-color="#424242"/>
+      <stop offset="1" stop-color="#404040"/>
+    </linearGradient>
+  </defs>
+  <title>base-single</title>
+  <rect class="cls-1" width="72" height="72" rx="12" ry="12"/>
+  <path class="cls-2" d="M0,12A12,12,0,0,1,12,0H60A12,12,0,0,1,72,12S70.08,1.83,60.25,1.5,19.08,1.5,11,1.5,0,12,0,12Z"/>
+</svg>
diff --git a/app/assets/images/layout/base.png b/app/assets/images/layout/base.png
deleted file mode 100644
index 0d4b11bc0800a756eccd19c12fdb34bd07af227a..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 3741
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
BVbcHr

diff --git a/app/assets/images/layout/base.svg b/app/assets/images/layout/base.svg
new file mode 100644
index 00000000000..b6cd2769092
--- /dev/null
+++ b/app/assets/images/layout/base.svg
@@ -0,0 +1,62 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="72.19" height="72" viewBox="0 0 72.19 72">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: url(#linear-gradient);
+      }
+
+      .cls-2 {
+        fill: #191919;
+      }
+
+      .cls-3 {
+        fill: #f4efef;
+      }
+
+      .cls-3, .cls-4 {
+        opacity: 0.24;
+      }
+
+      .cls-3, .cls-4, .cls-5, .cls-6 {
+        isolation: isolate;
+      }
+
+      .cls-4 {
+        fill: #020202;
+      }
+
+      .cls-5 {
+        fill: #3f3f3f;
+        opacity: 0.2;
+      }
+
+      .cls-6 {
+        fill: #f9f9f9;
+        opacity: 0.25;
+      }
+    </style>
+    <linearGradient id="linear-gradient" x1="35.97" y1="74.02" x2="36.03" y2="1.98" gradientTransform="matrix(1, 0, 0, -1, 0, 74)" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#909090"/>
+      <stop offset="0.47" stop-color="#707070"/>
+      <stop offset="0.66" stop-color="#515151"/>
+      <stop offset="0.87" stop-color="#424242"/>
+      <stop offset="1" stop-color="#404040"/>
+    </linearGradient>
+  </defs>
+  <title>base</title>
+  <rect class="cls-1" width="72" height="72" rx="12" ry="12"/>
+  <g id="Layer_2_copy" data-name="Layer 2 copy">
+    <path class="cls-2" d="M36.5,0V72h-1V0Z"/>
+    <rect class="cls-2" y="34.5" width="72" height="1"/>
+  </g>
+  <polygon class="cls-3" points="34.54 36.5 0 36.5 0 35.5 35.48 35.5 34.54 36.5"/>
+  <polygon class="cls-3" points="36.58 35.5 71.74 35.5 71.74 36.5 37.54 36.54 36.58 35.5"/>
+  <polygon class="cls-4" points="36.64 34.41 36.63 0.13 37.63 0.13 37.68 33.45 36.64 34.41"/>
+  <g id="Layer_4" data-name="Layer 4">
+    <polygon class="cls-5" points="35.53 34.52 0.25 34.52 0.25 33.52 34.58 33.54 35.53 34.52"/>
+    <polygon class="cls-5" points="37.69 33.5 72.19 33.42 72.19 34.42 36.48 34.42 37.69 33.5"/>
+    <polygon class="cls-5" points="35.38 35.56 35.52 71.79 34.52 71.79 34.52 36.51 35.38 35.56"/>
+    <polygon class="cls-5" points="35.48 0.06 35.44 34.31 34.48 33.52 34.48 0.06 35.48 0.06"/>
+  </g>
+  <path class="cls-6" d="M0,12A12,12,0,0,1,12,0H60A12,12,0,0,1,72,12S70.08,1.83,60.25,1.5,19.08,1.5,11,1.5,0,12,0,12Z"/>
+</svg>
diff --git a/app/assets/stylesheets/patternfly_overrides.scss b/app/assets/stylesheets/patternfly_overrides.scss
index ed0b7baa410..834be5d1585 100644
--- a/app/assets/stylesheets/patternfly_overrides.scss
+++ b/app/assets/stylesheets/patternfly_overrides.scss
@@ -387,9 +387,9 @@ table.table.table-summary-screen tbody td img {
 /// adjust power state images for use in quad icon
 .b72 .stretch {
   background-repeat: no-repeat;
-  width: 35px;
-  height: 32px;
-  margin: -3px 0 -2px 1px;
+  width: 36px;
+  height: 34px;
+  margin: -3px 0 -2px 0px;
   border-top-right-radius: 15px;
 }
 
diff --git a/app/helpers/quadicon_helper.rb b/app/helpers/quadicon_helper.rb
index c189397f50f..0ebfc043253 100644
--- a/app/helpers/quadicon_helper.rb
+++ b/app/helpers/quadicon_helper.rb
@@ -228,7 +228,7 @@ def img_tag_reflection
   def render_physical_server_quadicon(item, options)
     output = []
     if settings(:quadicons, :physical_server)
-      output << flobj_img_simple("layout/base.png")
+      output << flobj_img_simple("layout/base.svg")
 
       output << flobj_p_simple("a72", (item.host ? 1 : 0))
       output << flobj_img_simple("svg/currentstate-#{h(item.power_state.try(:downcase))}.svg", "b72")
@@ -434,7 +434,7 @@ def quadicon_truncate_middle(value, trunc_to = 10)
   end
 
   def flobj_img_simple(image = nil, cls = '', size = 72)
-    image ||= "layout/base-single.png"
+    image ||= "layout/base-single.svg"
 
     content_tag(:div, :class => "flobj #{cls}") do
       encodable_image_tag(image, :size => size)
@@ -510,7 +510,7 @@ def render_host_quadicon(item, options)
     output = []
 
     if settings(:quadicons, :host)
-      output << flobj_img_simple("layout/base.png")
+      output << flobj_img_simple("layout/base.svg")
 
       output << flobj_p_simple("a72", item.vms.size)
       output << currentstate_icon(item.normalized_state.downcase)
@@ -556,7 +556,7 @@ def render_ext_management_system_quadicon(item, options)
     output = []
 
     if settings(:quadicons, db_for_quadicon)
-      output << flobj_img_simple("layout/base.png")
+      output << flobj_img_simple("layout/base.svg")
       item_count = case item
                    when EmsPhysicalInfra then item.physical_servers.size
                    when EmsCloud         then item.total_vms
@@ -572,7 +572,7 @@ def render_ext_management_system_quadicon(item, options)
       output << flobj_img_simple(img_for_auth_status(item), "d72")
       output << flobj_img_simple('100/shield.png', "g72") unless item.get_policies.empty?
     else
-      output << flobj_img_simple("layout/base-single.png")
+      output << flobj_img_simple("layout/base-single.svg")
       output << flobj_img_small("svg/vendor-#{h(item.image_name)}.svg", "e72")
     end
 
@@ -598,7 +598,7 @@ def render_ext_management_system_quadicon(item, options)
   def render_ems_cluster_quadicon(item, options)
     output = []
 
-    output << flobj_img_simple("layout/base-single.png")
+    output << flobj_img_simple("layout/base-single.svg")
     output << flobj_img_small("100/emscluster.png", "e72")
     output << flobj_img_simple("100/shield.png", "g72") unless item.get_policies.empty?
 
@@ -620,7 +620,7 @@ def render_non_listicon_single_quadicon(item, options)
 
     img_path = item.try(:decorate).try(:fileicon) || "100/#{item.class.base_class.to_s.underscore}.png"
 
-    output << flobj_img_simple("layout/base-single.png")
+    output << flobj_img_simple("layout/base-single.svg")
     output << flobj_img_simple(img_path, "e72")
 
     unless options[:typ] == :listnav
@@ -662,7 +662,7 @@ def render_non_listicon_single_quadicon(item, options)
   def render_listicon_single_quadicon(item, options)
     output = []
 
-    output << flobj_img_simple("layout/base-single.png")
+    output << flobj_img_simple("layout/base-single.svg")
     output << flobj_img_small("100/#{@listicon}.png", "e72")
 
     unless options[:typ] == :listnav
@@ -718,7 +718,7 @@ def render_storage_quadicon(item, options)
     output = []
 
     if settings(:quadicons, :storage)
-      output << flobj_img_simple("layout/base.png")
+      output << flobj_img_simple("layout/base.svg")
       output << flobj_img_simple("100/storagetype-#{item.store_type.nil? ? "unknown" : h(item.store_type.to_s.downcase)}.png", "a72")
       output << flobj_p_simple("b72", item.v_total_vms)
       output << flobj_p_simple("c72", item.v_total_hosts)
@@ -727,7 +727,7 @@ def render_storage_quadicon(item, options)
       output << flobj_img_simple("100/piecharts/datastore/#{h(space_percent)}.png", "d72")
     else
       space_percent = (item.used_space_percent_of_total.to_i + 9) / 10
-      output << flobj_img_simple("layout/base-single.png")
+      output << flobj_img_simple("layout/base-single.svg")
       output << flobj_img_simple("100/datastore-#{h(space_percent)}.png", "e72")
     end
 
@@ -785,7 +785,7 @@ def render_vm_or_template_quadicon(item, options)
     output = []
 
     if settings(:quadicons, item.class.base_model.name.underscore.to_sym)
-      output << flobj_img_simple("layout/base.png")
+      output << flobj_img_simple("layout/base.svg")
       output << flobj_img_simple("svg/os-#{h(item.os_image_name.downcase)}.svg", "a72")
       output << currentstate_icon(item.normalized_state.downcase)
       output << flobj_img_simple("svg/vendor-#{h(item.vendor.downcase)}.svg", "c72")
@@ -802,7 +802,7 @@ def render_vm_or_template_quadicon(item, options)
         output << flobj_p_simple("d72", h(item.v_total_snapshots))
       end
     else
-      output << flobj_img_simple("layout/base-single.png")
+      output << flobj_img_simple("layout/base-single.svg")
 
       if quadicon_policy_sim? && !session[:policies].empty?
         output << flobj_img_small(img_for_compliance(item), "e72")
diff --git a/app/views/layouts/listnav/_compare_sections.html.haml b/app/views/layouts/listnav/_compare_sections.html.haml
index a207bb43a07..1b9605adf6a 100644
--- a/app/views/layouts/listnav/_compare_sections.html.haml
+++ b/app/views/layouts/listnav/_compare_sections.html.haml
@@ -16,7 +16,7 @@
         - if %w(MiqTemplate VmOrTemplate Vm).include?(@sb[:compare_db])
           - if settings(:quadicons, :vm)
             .flobj
-              %img{:src => image_path("layout/base.png")}
+              %img{:src => image_path("layout/base.svg")}
             %div{:class => "flobj b72"}
               - if @drift_obj.template?
                 - if @drift_obj.host
@@ -44,7 +44,7 @@
         - elsif @sb[:compare_db] == "Host"
           - if settings(:quadicons, :host)
             .flobj
-              %img{:src => image_path("layout/base.png")}
+              %img{:src => image_path("layout/base.svg")}
             %div{:class => "flobj c72"}
               %img{:src => image_path("svg/vendor-#{h(@drift_obj.vmm_vendor_display.downcase)}.svg")}
             - unless @drift_obj.power_state.blank?