Merge pull request #2407 from abpframework/refactor/angular-styles

style(theme-shared): change table sort icons

npm/ng-packs/packages/theme-shared/src/lib/components/sort-order-icon/sort-order-icon.component.html

@@ -1,3 +1,3 @@
-<span class="float-right {{ iconClass }}">
-  <i class="fa {{ icon }}"></i>
-</span>
+<div class="float-right {{ iconClass }}">
+  <span class="{{ icon }}"></span>
+</div>

npm/ng-packs/packages/theme-shared/src/lib/components/sort-order-icon/sort-order-icon.component.ts

@@ -61,8 +61,8 @@ export class SortOrderIconComponent {
   iconClass: string;
 
   get icon(): string {
-    if (!this.selectedSortKey) return 'fa-sort';
-    if (this.selectedSortKey === this.sortKey) return `fa-sort-${this.order}`;
+    if (!this.selectedSortKey) return 'sorting';
+    if (this.selectedSortKey === this.sortKey) return `sorting_${this.order}`;
     else return '';
   }
 

npm/ng-packs/packages/theme-shared/src/lib/constants/styles.ts

@@ -241,6 +241,33 @@ body abp-toast .ui-toast .ui-toast-message.ui-toast-message-info .ui-toast-messa
   max-height: 100vh;
 }
 
+[class^="sorting"] {
+  opacity: .3;
+  cursor: pointer;
+}
+[class^="sorting"]:before {
+  right: 0.5rem;
+  content: "↑";
+}
+[class^="sorting"]:after {
+  right: 0.5rem;
+  content: "↓";
+}
+
+.sorting_desc {
+  opacity: 1;
+}
+.sorting_desc:before {
+  opacity: .3;
+}
+
+.sorting_asc {
+  opacity: 1;
+}
+.sorting_asc:after {
+  opacity: .3;
+}
+
 @keyframes fadeInTop {
   from {
     transform: translateY(-5px);

npm/ng-packs/packages/theme-shared/src/lib/tests/sort-order-icon.component.spec.ts

@@ -24,7 +24,7 @@ describe('SortOrderIconComponent', () => {
     component.sort(newKey);
     expect(component.selectedSortKey).toBe(newKey);
     expect(component.order).toBe('asc');
-    expect(component.icon).toBe('fa-sort-asc');
+    expect(component.icon).toBe('sorting_asc');
   });
 
   test("shouldn't have any icon class when sortKey and selectedSortKey are different", () => {