Notification sorting, users table flexible columns

[rigelk]

This PR brings two unrelated changes:

1. Sortable notifications

• notifications sorting can be changed in the notification view, so as to help display notifications with unread shown first.

2. Flexible User listing

• users table could display more information than it currently does ; on small devices - not just mobile - the situation is difficult. Thus being able to toggle columns seems like a good option.
• statuses in tables are not using labels to provide quickly identifiable information ; I took the label css from primeng's example, which is soft enough to the eye.
• progress bars were revamped for small column sizes.

Note: Sorry for the grouped PR - the past weeks have been hectic and I didn't find time to split the features in respective branches.

[Chocobozzz]

Please add tests for channels search

[Chocobozzz]

Why OwnSearch?

[rigelk]

Because there's already a videoChannelsSearchValidator for public searches, which allows searchTarget as query parameter.

[Chocobozzz]

Then videoChannelsListSearchValidator?

[Chocobozzz]

?

[rigelk]

replaced

[kimsible]

1. Sortable notifications

Great! but on small and mobiles screens, we should adapt the 3 elements :

2. Flexible User listing

It's a very cool feature @rigelk ! I love the way it really improve table handling !
I tested it, I have only one thing to say and if I noticed it it's because of this PR :

When you select lots of column the last one become hidden cause to the scroll, so I ask the same question here, would it be good to put all actions including dropdown-actions on the left of user tables to avoid this ?

[kimsible]

@rigelk a proposition sortable notifications :

Mobile

Small view :

Update media queries in

PeerTube/client/src/app/+my-account/my-account-history/my-account-history.component.scss

Line 44 in 2e7f262

@media screen and (max-width: $mobile-view) {

@media screen and (max-width: $mobile-view) {
  .header {
    flex-direction: column;

    & >:first-child, .peertube-select-container {
      margin-bottom: 15px;
    }

    .peertube-select-container {
      margin-left: 0 !important;
    }
  }
}

@media screen and (min-width: $mobile-view) and (max-width: $small-view) {
  .header {
    a {
      font-size: 0;
      padding: 0 13px;
    }

    .peertube-select-container {
      width: auto !important;
    }
  }
}

@media screen and (min-width: $mobile-view) and (max-width: #{$small-view + $menu-width}) {
  :host-context(.main-col:not(.expanded)) {
    .header {
      a {
        font-size: 0;
        padding: 0 13px;
      }

      .peertube-select-container {
        width: auto !important;
      }
    }
  }
}

[rigelk]

Thanks for the snippet @kimsible, much appreciated 👍

[Chocobozzz]

Please add tests

[Chocobozzz]

tests fail