From 28deb3ba651d7669375c451ca600d6de6ccd1b8f Mon Sep 17 00:00:00 2001
From: Simon Fondrie-Teitler <simonft@riseup.net>
Date: Mon, 15 May 2017 19:25:24 -0400
Subject: [feat] add icon to account list indicating account with active VPN

This adds a lock icon to the account list next to the account with the
currently active VPN. The icon is green if the VPN is connected,
yellow if the VPN is connectiong, and red in any other case.

- Resolves: #8853
---
 ui/app/components/main_panel/main_panel.less | 32 +++++++++++++++++++++++-----
 1 file changed, 27 insertions(+), 5 deletions(-)

(limited to 'ui/app/components/main_panel/main_panel.less')

diff --git a/ui/app/components/main_panel/main_panel.less b/ui/app/components/main_panel/main_panel.less
index 2ec9d059..c530ea8c 100644
--- a/ui/app/components/main_panel/main_panel.less
+++ b/ui/app/components/main_panel/main_panel.less
@@ -70,6 +70,7 @@
   border-top-left-radius: @accounts-corner - 1;
   border-bottom-left-radius: @accounts-corner - 1;
   z-index: 100;
+  display: flex;
   &:hover {
     background-color: #555;
   }
@@ -78,14 +79,14 @@
 .main-panel .accounts li span.domain {
   display: block;
   font-weight: bold;
-  //margin-left: 40px;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .main-panel .accounts li span.username {
   display: block;
-  //margin-left: 40px;
-  //line-height: 7px;
-  //margin-bottom: 4px;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 /*.main-panel .accounts li span.icon {
@@ -139,13 +140,34 @@
 }
 
 .main-panel .accounts .btn.expander {
-   margin-right: @accounts-padding;
 }
 
 .main-panel .accounts .app-buttons {
   margin-bottom: @accounts-padding;
 }
 
+.main-panel .accounts li .account-details {
+  width: 140px;
+  margin-right: 5px;
+}
+
+.main-panel .accounts li .vpn-status {
+  margin-top: auto;
+  margin-bottom: auto;
+}
+
+.main-panel .accounts li .vpn-status.down {
+  color: #ef5350;
+}
+
+.main-panel .accounts li .vpn-status.connecting {
+  color: #fbc02d;
+}
+
+.main-panel .accounts li .vpn-status.up {
+    color: #66bb6a;
+}
+
 //
 // SECTIONS
 //
-- 
cgit v1.2.3