From c1d36f9e48003728d4ce07dce36150bde155a23c Mon Sep 17 00:00:00 2001
From: Patrick O'Carroll <ocarroll.patrick@gmail.com>
Date: Fri, 21 Sep 2018 10:25:46 +0200
Subject: [PATCH 1/3] created switch button for org users that can toggle
 between users and invites

---
 .../app/features/org/partials/orgUsers.html   | 19 +++++--
 public/sass/components/_buttons.scss          | 52 +++++++++++++++++++
 2 files changed, 66 insertions(+), 5 deletions(-)

diff --git a/public/app/features/org/partials/orgUsers.html b/public/app/features/org/partials/orgUsers.html
index 697879c6ac2..2925fb54061 100644
--- a/public/app/features/org/partials/orgUsers.html
+++ b/public/app/features/org/partials/orgUsers.html
@@ -2,16 +2,25 @@
 
 <div class="page-container page-body">
   <div class="page-action-bar">
-    <label class="gf-form gf-form--grow gf-form--has-input-icon">
+    <label class="gf-form gf-form--has-input-icon">
       <input type="text" class="gf-form-input width-20" ng-model="ctrl.searchQuery" ng-change="ctrl.onQueryUpdated()" placeholder="Filter by username or email" />
       <i class="gf-form-input-icon fa fa-search"></i>
     </label>
 
-    <div class="page-action-bar__spacer"></div>
+    <div ng-if="ctrl.pendingInvites.length" style="margin-left: 1rem">
+      <button class="btn toggle-btn-left toggle-btn-left--active" ng-if="!ctrl.showInvites">
+        Users
+      </button><button class="btn toggle-btn-right toggle-btn-right--inactive" ng-if="!ctrl.showInvites" ng-click="ctrl.showInvites = true">
+        Pending Invites ({{ctrl.pendingInvites.length}})
+      </button>
+      <button class="btn toggle-btn-left toggle-btn-left--inactive" ng-if="ctrl.showInvites" ng-click="ctrl.showInvites = false">
+        Users
+      </button><button class="btn toggle-btn-right toggle-btn-right--active" ng-if="ctrl.showInvites">
+        Pending Invites ({{ctrl.pendingInvites.length}})
+      </button>
+    </div>
 
-    <button class="btn btn-inverse" ng-show="ctrl.pendingInvites.length" ng-click="ctrl.showInvites = true">
-      Pending Invites ({{ctrl.pendingInvites.length}})
-    </button>
+    <div class="page-action-bar__spacer"></div>
 
     <a class="btn btn-success" href="org/users/invite" ng-show="ctrl.canInvite">
       <i class="fa fa-plus"></i>
diff --git a/public/sass/components/_buttons.scss b/public/sass/components/_buttons.scss
index b44f792fd7a..fd4261e9e3f 100644
--- a/public/sass/components/_buttons.scss
+++ b/public/sass/components/_buttons.scss
@@ -221,6 +221,58 @@ $btn-service-icon-width: 35px;
   }
 }
 
+//Toggle button
+
+.toggle-btn {
+  &-left {
+    border-radius: 2px 0 0 2px;
+    border-left: 1px solid #dae0e8;
+    border-top: 1px solid #dae0e8;
+    border-bottom: 1px solid #dae0e8;
+    margin: 0;
+    box-shadow: $card-shadow;
+    &--active {
+      background-color: #fff;
+      //background-color: $btn-secondary-bg;
+      //color: #fff;
+      background-color: lighten($input-label-bg, 5%);
+      color: $link-color;
+      &:hover {
+        cursor: default;
+      }
+    }
+    &--inactive {
+      //@include buttonBackground($btn-inverse-bg, $btn-inverse-bg-hl, $btn-inverse-text-color, $btn-inverse-text-shadow);
+      background: $input-label-bg;
+      color: $text-color-weak;
+    }
+  }
+  &-right {
+    border-radius: 0 2px 2px 0;
+    border-right: 1px solid #dae0e8;
+    border-top: 1px solid #dae0e8;
+    border-bottom: 1px solid #dae0e8;
+    margin-left: 0 !important;
+    box-shadow: $card-shadow;
+
+    &--active {
+      background-color: #fff;
+      //background-color: $btn-secondary-bg;
+      //color: #FFF;
+      background-color: lighten($input-label-bg, 5%);
+      color: $link-color;
+      &:hover {
+        cursor: default;
+      }
+    }
+    &--inactive {
+      //@include buttonBackground($btn-inverse-bg, $btn-inverse-bg-hl, $btn-inverse-text-color, $btn-inverse-text-shadow);
+      background: $input-label-bg;
+      color: $text-color-weak;
+    }
+  }
+}
+
 //Button animations
 
 .btn-loading span {

From daffa7d0671fe9e7d121cd3a070bbd9cd483434b Mon Sep 17 00:00:00 2001
From: Patrick O'Carroll <ocarroll.patrick@gmail.com>
Date: Mon, 24 Sep 2018 12:49:29 +0200
Subject: [PATCH 2/3] removed border, cleaned up css and fixed class naming

---
 .../app/features/org/partials/orgUsers.html   |  8 +--
 public/sass/components/_buttons.scss          | 53 +++++--------------
 2 files changed, 17 insertions(+), 44 deletions(-)

diff --git a/public/app/features/org/partials/orgUsers.html b/public/app/features/org/partials/orgUsers.html
index 2925fb54061..8f75625b506 100644
--- a/public/app/features/org/partials/orgUsers.html
+++ b/public/app/features/org/partials/orgUsers.html
@@ -8,14 +8,14 @@
     </label>
 
     <div ng-if="ctrl.pendingInvites.length" style="margin-left: 1rem">
-      <button class="btn toggle-btn-left toggle-btn-left--active" ng-if="!ctrl.showInvites">
+      <button class="btn toggle-btn active" ng-if="!ctrl.showInvites">
         Users
-      </button><button class="btn toggle-btn-right toggle-btn-right--inactive" ng-if="!ctrl.showInvites" ng-click="ctrl.showInvites = true">
+      </button><button class="btn toggle-btn" ng-if="!ctrl.showInvites" ng-click="ctrl.showInvites = true">
         Pending Invites ({{ctrl.pendingInvites.length}})
       </button>
-      <button class="btn toggle-btn-left toggle-btn-left--inactive" ng-if="ctrl.showInvites" ng-click="ctrl.showInvites = false">
+      <button class="btn toggle-btn" ng-if="ctrl.showInvites" ng-click="ctrl.showInvites = false">
         Users
-      </button><button class="btn toggle-btn-right toggle-btn-right--active" ng-if="ctrl.showInvites">
+      </button><button class="btn toggle-btn active" ng-if="ctrl.showInvites">
         Pending Invites ({{ctrl.pendingInvites.length}})
       </button>
     </div>
diff --git a/public/sass/components/_buttons.scss b/public/sass/components/_buttons.scss
index fd4261e9e3f..99982388e5c 100644
--- a/public/sass/components/_buttons.scss
+++ b/public/sass/components/_buttons.scss
@@ -224,51 +224,24 @@ $btn-service-icon-width: 35px;
 //Toggle button
 
 .toggle-btn {
-  &-left {
+  background: $input-label-bg;
+  color: $text-color-weak;
+  box-shadow: $card-shadow;
+
+  &:nth-child(1) {
     border-radius: 2px 0 0 2px;
-    border-left: 1px solid #dae0e8;
-    border-top: 1px solid #dae0e8;
-    border-bottom: 1px solid #dae0e8;
     margin: 0;
-    box-shadow: $card-shadow;
-    &--active {
-      background-color: #fff;
-      //background-color: $btn-secondary-bg;
-      //color: #fff;
-      background-color: lighten($input-label-bg, 5%);
-      color: $link-color;
-      &:hover {
-        cursor: default;
-      }
-    }
-    &--inactive {
-      //@include buttonBackground($btn-inverse-bg, $btn-inverse-bg-hl, $btn-inverse-text-color, $btn-inverse-text-shadow);
-      background: $input-label-bg;
-      color: $text-color-weak;
-    }
   }
-  &-right {
+  &:nth-child(2) {
     border-radius: 0 2px 2px 0;
-    border-right: 1px solid #dae0e8;
-    border-top: 1px solid #dae0e8;
-    border-bottom: 1px solid #dae0e8;
     margin-left: 0 !important;
-    box-shadow: $card-shadow;
-
-    &--active {
-      background-color: #fff;
-      //background-color: $btn-secondary-bg;
-      //color: #FFF;
-      background-color: lighten($input-label-bg, 5%);
-      color: $link-color;
-      &:hover {
-        cursor: default;
-      }
-    }
-    &--inactive {
-      //@include buttonBackground($btn-inverse-bg, $btn-inverse-bg-hl, $btn-inverse-text-color, $btn-inverse-text-shadow);
-      background: $input-label-bg;
-      color: $text-color-weak;
+  }
+
+  &.active {
+    background-color: lighten($input-label-bg, 5%);
+    color: $link-color;
+    &:hover {
+      cursor: default;
     }
   }
 }

From e9790c9f1b340cbf9c3918d0dbcc51af11abdf6c Mon Sep 17 00:00:00 2001
From: Patrick O'Carroll <ocarroll.patrick@gmail.com>
Date: Wed, 26 Sep 2018 07:56:33 +0200
Subject: [PATCH 3/3] changed to first and last child

---
 public/sass/components/_buttons.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/public/sass/components/_buttons.scss b/public/sass/components/_buttons.scss
index 99982388e5c..916c141a5ec 100644
--- a/public/sass/components/_buttons.scss
+++ b/public/sass/components/_buttons.scss
@@ -228,11 +228,11 @@ $btn-service-icon-width: 35px;
   color: $text-color-weak;
   box-shadow: $card-shadow;
 
-  &:nth-child(1) {
+  &:first-child {
     border-radius: 2px 0 0 2px;
     margin: 0;
   }
-  &:nth-child(2) {
+  &:last-child {
     border-radius: 0 2px 2px 0;
     margin-left: 0 !important;
   }