From 90f62591432cf7e2dd2b33d64524442d62b36257 Mon Sep 17 00:00:00 2001
From: igoradamenko <mail@igoradamenko.com>
Date: Thu, 17 May 2018 23:04:59 +0300
Subject: [PATCH] add sort by active & redesign select

---
 .../auth-panel__select-label.scss             | 10 ++++++++
 .../__select/auth-panel__select.scss          | 10 +++++---
 web/app/components/auth-panel/auth-panel.jsx  | 25 +++++++++++++------
 web/app/components/auth-panel/index.js        |  1 +
 4 files changed, 36 insertions(+), 10 deletions(-)
 create mode 100644 web/app/components/auth-panel/__select-label/auth-panel__select-label.scss

diff --git a/web/app/components/auth-panel/__select-label/auth-panel__select-label.scss b/web/app/components/auth-panel/__select-label/auth-panel__select-label.scss
new file mode 100644
index 00000000..429e39c5
--- /dev/null
+++ b/web/app/components/auth-panel/__select-label/auth-panel__select-label.scss
@@ -0,0 +1,10 @@
+.auth-panel__select-label {
+  position: relative;
+  white-space: nowrap;
+  font-weight: 700;
+
+  &::after {
+    content: '▾';
+    margin-left: 2px;
+  }
+}
diff --git a/web/app/components/auth-panel/__select/auth-panel__select.scss b/web/app/components/auth-panel/__select/auth-panel__select.scss
index e4c04dbc..cfded5a4 100644
--- a/web/app/components/auth-panel/__select/auth-panel__select.scss
+++ b/web/app/components/auth-panel/__select/auth-panel__select.scss
@@ -1,5 +1,9 @@
 .auth-panel__select {
-  &:focus {
-    outline: none;
-  }
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  opacity: 0;
+  cursor: pointer;
 }
diff --git a/web/app/components/auth-panel/auth-panel.jsx b/web/app/components/auth-panel/auth-panel.jsx
index 651612f6..b0690331 100644
--- a/web/app/components/auth-panel/auth-panel.jsx
+++ b/web/app/components/auth-panel/auth-panel.jsx
@@ -95,13 +95,16 @@ export default class AuthPanel extends Component {
           <span className="auth-panel__sort">
             Sort by
             {' '}
-            <select className="auth-panel__select" onChange={this.onSortChange}>
-              {
-                sortArray.map(sort => (
-                  <option value={sort.value} selected={sort.selected}>{sort.label}</option>
-                ))
-              }
-            </select>
+            <label className="auth-panel__select-label">
+              {sortArray.find(x => x.selected).label}
+              <select className="auth-panel__select" onChange={this.onSortChange}>
+                {
+                  sortArray.map(sort => (
+                    <option value={sort.value} selected={sort.selected}>{sort.label}</option>
+                  ))
+                }
+              </select>
+            </label>
           </span>
         </div>
       </div>
@@ -127,6 +130,14 @@ function getSortArray(currentSort) {
       value: '+time',
       label: 'Oldest',
     },
+    {
+      value: '-active',
+      label: 'Recently updated',
+    },
+    {
+      value: '+active',
+      label: 'Least recently updated',
+    },
   ];
 
   return sortArray.map(sort => {
diff --git a/web/app/components/auth-panel/index.js b/web/app/components/auth-panel/index.js
index 2f1f4cee..6482d63b 100644
--- a/web/app/components/auth-panel/index.js
+++ b/web/app/components/auth-panel/index.js
@@ -5,6 +5,7 @@ require('./auth-panel.scss');
 require('./__column/auth-panel__column.scss');
 require('./__pseudo-link/auth-panel__pseudo-link.scss');
 require('./__select/auth-panel__select.scss');
+require('./__select-label/auth-panel__select-label.scss');
 require('./__sort/auth-panel__sort.scss');
 require('./__username/auth-panel__username.scss');
 require('./__user-id/auth-panel__user-id.scss');