Переработка списков (#5)

Co-authored-by: gorbenko.pavel <gorbenko.pavel@tansu.kz>
Reviewed-on: http://git.tnsu.kz/timur.gorodetskiy/request-portal/pulls/5

src/webparts/requestPortal/features/myRequests/RequestsTableView.module.scss

@@ -34,6 +34,49 @@
   font-weight: 600;
 }
 
+// Фильтр по статусу — только на вкладке «Инициированные». Стоит слева от поиска
+// и прижат к нему: вместе это один блок «чем сузить список».
+.statusFilter {
+  // appearance: none + своя SVG-галочка — как в shared/ui/Select. Нативная
+  // стрелка ОС рисуется своим шрифтом и рядом с остальными полями портала
+  // выглядит чужеродно (и по-разному в разных браузерах).
+  appearance: none;
+  margin-left: auto;
+  // Справа место под галочку; по вертикали — как у .search, чтобы оба контрола
+  // в шапке были одной высоты.
+  padding: 9px 34px 9px 13px;
+  border: 1px solid $gray-300;
+  border-radius: $r-sm;
+  background-color: $white;
+  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%236B7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 12px center;
+  font-family: $font-sans;
+  font-size: $fs-sm;
+  color: $gray-900;
+  cursor: pointer;
+  transition: .18s;
+
+  @include input-focus-gold;
+}
+
+// Когда фильтр есть, отступ до края уже задан им (margin-left: auto) — иначе
+// поиск сам отжимается вправо.
+.statusFilter + .search {
+  margin-left: 0;
+}
+
+// Цвет пунктов списка — те же цвета, что у StatusBadge (см. statusOptionClassName
+// в RequestsTableView.tsx). Только color: background-color нативный <option>
+// показывает не во всех браузерах одинаково, поэтому не используем.
+.optionDraft { color: $gray-700; }
+.optionOnApproval { color: $blue-600; }
+.optionApproved { color: $green-600; }
+.optionRejected { color: $red-500; }
+.optionReturned { color: $amber-700; }
+.optionExecution { color: $navy-800; }
+.optionClosed { color: $gray-500; }
+
 .search {
   width: 280px;
   max-width: 100%;
@@ -155,41 +198,19 @@
   width: 190px;
 }
 
-.status {
-  display: inline-block;
-  padding: 3px 10px;
-  border-radius: $r-md;
-  font-size: $fs-caption;
-  font-weight: 500;
-  line-height: 1.3;
-}
-
-.statusDraft {
-  background: $gray-100;
+// Причина возврата — свободный текст согласующего, поэтому переносим по словам
+// (в т.ч. длинное слово без пробелов, иначе оно растянет таблицу).
+.colComment {
+  white-space: normal;
+  overflow-wrap: anywhere;
   color: $gray-700;
 }
 
-.statusOnApproval {
-  background: $gold-100;
-  color: $gold-600;
+.commentEmpty {
+  color: $gray-400;
 }
 
-.statusApproved {
-  background: $green-50;
-  color: $green-600;
-}
-
-.statusRejected {
-  background: $red-50;
-  color: $red-500;
-}
-
-.statusReturned {
-  background: $blue-50;
-  color: $blue-600;
-}
-
-.statusDefault {
-  background: $gray-100;
-  color: $gray-500;
-}
+// Раскраска статуса — теперь только в shared/approval/ui/StatusBadge (см.
+// использование ниже с size="sm"). Раньше здесь была своя копия этих цветов —
+// она разошлась с эталоном (На согласовании/Возвращена на доработку оказались
+// перепутаны), поэтому копию убрали, а не подправили.