CactuseSecurity#2867: implemented method to translate ordermode in arrow unicode symbols and added css class to ensure proper display

Author: Robin-Smets

roles/ui/files/FWO.UI/Shared/OrderByDropdown.razor

@@ -22,15 +22,17 @@
                         @((MarkupString) property)
                     </ElementTemplate>
     </Dropdown>
-    <Dropdown   @ref="orderModeDropdown"
-                ElementType="OrderMode"
-                @bind-SelectedElement="SelectedOrderMode"
-                Elements="orderModes"
-                ElementToString="@(a => a.ToString())">
-                    <ElementTemplate Context="orderMode">
-                        @((MarkupString) orderMode.ToString())
-                    </ElementTemplate>
-    </Dropdown>
+    <div class="unicode-icons">
+        <Dropdown   @ref="orderModeDropdown"
+                    ElementType="OrderMode"
+                    @bind-SelectedElement="SelectedOrderMode"
+                    Elements="orderModes"
+                    ElementToString="@(a => DisplayOrderMode(a))">
+                        <ElementTemplate Context="orderMode">
+                            @((MarkupString) DisplayOrderMode(orderMode))
+                        </ElementTemplate>
+        </Dropdown>
+    </div>
 </div> 
 
 @code
@@ -178,4 +180,25 @@
 
         return Expression.Lambda<Func<T, object>>(converted, param).Compile();
     }
+
+    /// <summary>
+    /// Converts OrderMode to symbol.
+    /// </summary>
+    private string DisplayOrderMode(OrderMode orderMode)
+    {
+        switch (orderMode)
+        {
+            case (OrderMode.Asc):
+                return "⯅";
+                break;
+
+            case (OrderMode.Desc):
+                return "⯆";
+                break;
+
+            default:
+                throw new NotImplementedException();
+                break;
+        }
+    }
 }

roles/ui/files/FWO.UI/wwwroot/css/site.css

@@ -14,6 +14,12 @@ body {
     font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
 }
 
+/* makes sure that element uses font that can display unicode signs*/
+.unicode-icons {
+    font-family: 'Segoe UI Symbol', 'Arial Unicode MS', sans-serif !important;
+}
+
+
 a,
 .btn-link {
     color: #0366d6;