@@ -33,6 +39,7 @@ const template = `
export class SaveDashboardAsModalCtrl {
clone: any;
+ folderTitle: any;
dismiss: () => void;
/** @ngInject */
@@ -43,6 +50,7 @@ export class SaveDashboardAsModalCtrl {
this.clone.title += ' Copy';
this.clone.editable = true;
this.clone.hideControls = false;
+ this.folderTitle = dashboard.meta.folderTitle || 'Root';
// remove alerts
this.clone.rows.forEach(row => {
@@ -63,6 +71,10 @@ export class SaveDashboardAsModalCtrl {
this.save();
}
}
+
+ onFolderChange(folder) {
+ this.clone.folderId = folder.id;
+ }
}
export function saveDashboardAsDirective() {
diff --git a/public/app/features/org/all.js b/public/app/features/org/all.js
index e206583a8c7..140f87fafce 100644
--- a/public/app/features/org/all.js
+++ b/public/app/features/org/all.js
@@ -1,7 +1,6 @@
define([
'./org_users_ctrl',
'./profile_ctrl',
- './org_users_ctrl',
'./select_org_ctrl',
'./change_password_ctrl',
'./newOrgCtrl',
@@ -9,4 +8,7 @@ define([
'./orgApiKeysCtrl',
'./orgDetailsCtrl',
'./prefs_control',
+ './user_groups_ctrl',
+ './user_group_details_ctrl',
+ './create_user_group_modal',
], function () {});
diff --git a/public/app/features/org/create_user_group_modal.ts b/public/app/features/org/create_user_group_modal.ts
new file mode 100644
index 00000000000..5acc684041f
--- /dev/null
+++ b/public/app/features/org/create_user_group_modal.ts
@@ -0,0 +1,38 @@
+///
+
+import coreModule from 'app/core/core_module';
+import appEvents from 'app/core/app_events';
+import _ from 'lodash';
+
+export class CreateUserGroupCtrl {
+ userGroupName = '';
+
+ /** @ngInject */
+ constructor(private backendSrv, private $scope, $sce, private $location) {
+ }
+
+ createUserGroup() {
+ this.backendSrv.post('/api/user-groups', {name: this.userGroupName}).then((result) => {
+ if (result.userGroupId) {
+ this.$location.path('/org/user-groups/edit/' + result.userGroupId);
+ }
+ this.dismiss();
+ });
+ }
+
+ dismiss() {
+ appEvents.emit('hide-modal');
+ }
+}
+
+export function createUserGroupModal() {
+ return {
+ restrict: 'E',
+ templateUrl: 'public/app/features/org/partials/create_user_group.html',
+ controller: CreateUserGroupCtrl,
+ bindToController: true,
+ controllerAs: 'ctrl',
+ };
+}
+
+coreModule.directive('createUserGroupModal', createUserGroupModal);
diff --git a/public/app/features/org/partials/create_user_group.html b/public/app/features/org/partials/create_user_group.html
new file mode 100644
index 00000000000..1ef0ef2822e
--- /dev/null
+++ b/public/app/features/org/partials/create_user_group.html
@@ -0,0 +1,26 @@
+
diff --git a/public/app/features/org/partials/user_group_details.html b/public/app/features/org/partials/user_group_details.html
new file mode 100644
index 00000000000..a1f9f02f5cb
--- /dev/null
+++ b/public/app/features/org/partials/user_group_details.html
@@ -0,0 +1,49 @@
+
+
+
+
+
+
+
+
+
User Group Members
+
+
+
+
+
+ | Username |
+ Email |
+ |
+
+
+ | {{member.login}} |
+ {{member.email}} |
+
+
+
+
+ |
+
+
+
+
+ This user group has no members yet.
+
+
diff --git a/public/app/features/org/partials/user_groups.html b/public/app/features/org/partials/user_groups.html
new file mode 100644
index 00000000000..7208ef433d6
--- /dev/null
+++ b/public/app/features/org/partials/user_groups.html
@@ -0,0 +1,61 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+ -
+
+
+
+
+
+
+ No User Groups found.
+
+
diff --git a/public/app/features/org/specs/user_group_details_ctrl_specs.ts b/public/app/features/org/specs/user_group_details_ctrl_specs.ts
new file mode 100644
index 00000000000..7c68d678dbd
--- /dev/null
+++ b/public/app/features/org/specs/user_group_details_ctrl_specs.ts
@@ -0,0 +1,45 @@
+import '../user_group_details_ctrl';
+import {describe, beforeEach, it, expect, sinon, angularMocks} from 'test/lib/common';
+import UserGroupDetailsCtrl from '../user_group_details_ctrl';
+
+describe('UserGroupDetailsCtrl', () => {
+var ctx: any = {};
+var backendSrv = {
+ searchUsers: sinon.stub().returns(Promise.resolve([])),
+ get: sinon.stub().returns(Promise.resolve([])),
+ post: sinon.stub().returns(Promise.resolve([]))
+};
+
+ beforeEach(angularMocks.module('grafana.core'));
+ beforeEach(angularMocks.module('grafana.controllers'));
+
+ beforeEach(angularMocks.inject(($rootScope, $controller, $q) => {
+ ctx.$q = $q;
+ ctx.scope = $rootScope.$new();
+ ctx.ctrl = $controller(UserGroupDetailsCtrl, {
+ $scope: ctx.scope,
+ backendSrv: backendSrv,
+ $routeParams: {id: 1}
+ });
+ }));
+
+ describe('when user is chosen to be added to user group', () => {
+ beforeEach(() => {
+ const userItem = {
+ id: 2,
+ login: 'user2',
+ };
+ ctx.ctrl.userPicked(userItem);
+ });
+
+ it('should parse the result and save to db', () => {
+ expect(backendSrv.post.getCall(0).args[0]).to.eql('/api/user-groups/1/members');
+ expect(backendSrv.post.getCall(0).args[1].userId).to.eql(2);
+ });
+
+ it('should refresh the list after saving.', () => {
+ expect(backendSrv.get.getCall(0).args[0]).to.eql('/api/user-groups/1');
+ expect(backendSrv.get.getCall(1).args[0]).to.eql('/api/user-groups/1/members');
+ });
+ });
+});
diff --git a/public/app/features/org/user_group_details_ctrl.ts b/public/app/features/org/user_group_details_ctrl.ts
new file mode 100644
index 00000000000..357ac84651e
--- /dev/null
+++ b/public/app/features/org/user_group_details_ctrl.ts
@@ -0,0 +1,78 @@
+///
+
+import coreModule from 'app/core/core_module';
+import _ from 'lodash';
+
+export default class UserGroupDetailsCtrl {
+ userGroup: UserGroup;
+ userGroupMembers: User[] = [];
+ navModel: any;
+
+ constructor(private $scope, private $http, private backendSrv, private $routeParams, navModelSrv) {
+ this.navModel = navModelSrv.getOrgNav(3);
+ this.get();
+ }
+
+ get() {
+ if (this.$routeParams && this.$routeParams.id) {
+ this.backendSrv.get(`/api/user-groups/${this.$routeParams.id}`)
+ .then(result => {
+ this.userGroup = result;
+ });
+ this.backendSrv.get(`/api/user-groups/${this.$routeParams.id}/members`)
+ .then(result => {
+ this.userGroupMembers = result;
+ });
+ }
+ }
+
+ removeUserGroupMember(userGroupMember: UserGroupMember) {
+ this.$scope.appEvent('confirm-modal', {
+ title: 'Remove Member',
+ text: 'Are you sure you want to remove ' + userGroupMember.name + ' from this group?',
+ yesText: "Remove",
+ icon: "fa-warning",
+ onConfirm: () => {
+ this.removeMemberConfirmed(userGroupMember);
+ }
+ });
+ }
+
+ removeMemberConfirmed(userGroupMember: UserGroupMember) {
+ this.backendSrv.delete(`/api/user-groups/${this.$routeParams.id}/members/${userGroupMember.userId}`)
+ .then(this.get.bind(this));
+ }
+
+ update() {
+ if (!this.$scope.userGroupDetailsForm.$valid) { return; }
+
+ this.backendSrv.put('/api/user-groups/' + this.userGroup.id, {name: this.userGroup.name});
+ }
+
+ userPicked(user) {
+ this.backendSrv.post(`/api/user-groups/${this.$routeParams.id}/members`, {userId: user.id}).then(() => {
+ this.$scope.$broadcast('user-picker-reset');
+ this.get();
+ });
+ }
+}
+
+export interface UserGroup {
+ id: number;
+ name: string;
+}
+
+export interface User {
+ id: number;
+ name: string;
+ login: string;
+ email: string;
+}
+
+export interface UserGroupMember {
+ userId: number;
+ name: string;
+}
+
+coreModule.controller('UserGroupDetailsCtrl', UserGroupDetailsCtrl);
+
diff --git a/public/app/features/org/user_groups_ctrl.ts b/public/app/features/org/user_groups_ctrl.ts
new file mode 100644
index 00000000000..da1f767acd5
--- /dev/null
+++ b/public/app/features/org/user_groups_ctrl.ts
@@ -0,0 +1,68 @@
+///
+
+import coreModule from 'app/core/core_module';
+import {appEvents} from 'app/core/core';
+
+export class UserGroupsCtrl {
+ userGroups: any;
+ pages = [];
+ perPage = 50;
+ page = 1;
+ totalPages: number;
+ showPaging = false;
+ query: any = '';
+ navModel: any;
+
+ /** @ngInject */
+ constructor(private $scope, private $http, private backendSrv, private $location, navModelSrv) {
+ this.navModel = navModelSrv.getOrgNav(3);
+ this.get();
+ }
+
+ get() {
+ this.backendSrv.get(`/api/user-groups/search?perpage=${this.perPage}&page=${this.page}&query=${this.query}`)
+ .then((result) => {
+ this.userGroups = result.userGroups;
+ this.page = result.page;
+ this.perPage = result.perPage;
+ this.totalPages = Math.ceil(result.totalCount / result.perPage);
+ this.showPaging = this.totalPages > 1;
+ this.pages = [];
+
+ for (var i = 1; i < this.totalPages+1; i++) {
+ this.pages.push({ page: i, current: i === this.page});
+ }
+ });
+ }
+
+ navigateToPage(page) {
+ this.page = page.page;
+ this.get();
+ }
+
+ deleteUserGroup(userGroup) {
+ this.$scope.appEvent('confirm-modal', {
+ title: 'Delete',
+ text: 'Are you sure you want to delete User Group ' + userGroup.name + '?',
+ yesText: "Delete",
+ icon: "fa-warning",
+ onConfirm: () => {
+ this.deleteUserGroupConfirmed(userGroup);
+ }
+ });
+ }
+
+ deleteUserGroupConfirmed(userGroup) {
+ this.backendSrv.delete('/api/user-groups/' + userGroup.id)
+ .then(this.get.bind(this));
+ }
+
+ openUserGroupModal() {
+ appEvents.emit('show-modal', {
+ templateHtml: '
',
+ modalClass: 'modal--narrow'
+ });
+ }
+}
+
+coreModule.controller('UserGroupsCtrl', UserGroupsCtrl);
diff --git a/public/app/features/panel/panel_header.ts b/public/app/features/panel/panel_header.ts
index a19dbcb15ff..1c45367235c 100644
--- a/public/app/features/panel/panel_header.ts
+++ b/public/app/features/panel/panel_header.ts
@@ -10,7 +10,7 @@ var template = `
{{ctrl.panel.title | interpolateTemplateVars:this}}
+
+
+
+
+
+
+
+
+
+
+
+
{{permission.userGroup}}
+
+
+
+
+
+
diff --git a/public/app/plugins/panel/permissionlist/module.ts b/public/app/plugins/panel/permissionlist/module.ts
new file mode 100644
index 00000000000..94704e90afd
--- /dev/null
+++ b/public/app/plugins/panel/permissionlist/module.ts
@@ -0,0 +1,60 @@
+///
+
+import _ from 'lodash';
+import config from 'app/core/config';
+import {PanelCtrl} from 'app/plugins/sdk';
+import {impressions} from 'app/features/dashboard/impression_store';
+
+class PermissionListCtrl extends PanelCtrl {
+ static templateUrl = 'module.html';
+
+ userPermissions: any[];
+ userGroupPermissions: any[];
+ roles: any[];
+
+ panelDefaults = {
+ folderId: 0
+ };
+
+ /** @ngInject */
+ constructor($scope, $injector, private backendSrv) {
+ super($scope, $injector);
+ _.defaults(this.panel, this.panelDefaults);
+
+ this.events.on('refresh', this.onRefresh.bind(this));
+ this.events.on('init-edit-mode', this.onInitEditMode.bind(this));
+
+ this.getPermissions();
+ }
+
+ onInitEditMode() {
+ this.editorTabIndex = 1;
+ this.addEditorTab('Options', 'public/app/plugins/panel/permissionlist/editor.html');
+ }
+
+ onRefresh() {
+ var promises = [];
+
+ promises.push(this.getPermissions());
+
+ return Promise.all(promises)
+ .then(this.renderingCompleted.bind(this));
+ }
+
+ onFolderChange(folder: any) {
+ this.panel.folderId = folder.id;
+ this.refresh();
+ }
+
+ getPermissions() {
+ return this.backendSrv.get(`/api/dashboards/id/${this.panel.folderId}/acl`)
+ .then(result => {
+ this.userPermissions = _.filter(result, p => { return p.userId > 0;});
+ this.userGroupPermissions = _.filter(result, p => { return p.userGroupId > 0;});
+ // this.roles = this.setRoles(result);
+ });
+ }
+
+}
+
+export {PermissionListCtrl, PermissionListCtrl as PanelCtrl};
diff --git a/public/app/plugins/panel/permissionlist/plugin.json b/public/app/plugins/panel/permissionlist/plugin.json
new file mode 100644
index 00000000000..c52ac54c79c
--- /dev/null
+++ b/public/app/plugins/panel/permissionlist/plugin.json
@@ -0,0 +1,16 @@
+{
+ "type": "panel",
+ "name": "Permission List",
+ "id": "permissionlist",
+
+ "info": {
+ "author": {
+ "name": "Grafana Project",
+ "url": "https://grafana.com"
+},
+ "logos": {
+ "small": "img/icn-singlestat-panel.svg",
+ "large": "img/icn-singlestat-panel.svg"
+ }
+ }
+}
diff --git a/public/sass/_grafana.scss b/public/sass/_grafana.scss
index c6155da946c..22ed043b37b 100644
--- a/public/sass/_grafana.scss
+++ b/public/sass/_grafana.scss
@@ -49,6 +49,7 @@
@import "components/panel_table";
@import "components/panel_text";
@import "components/panel_heatmap";
+@import "components/settings_permissions";
@import "components/tagsinput";
@import "components/tables_lists";
@import "components/search";
diff --git a/public/sass/_variables.dark.scss b/public/sass/_variables.dark.scss
index e8ee9d9ac8b..5562078047d 100644
--- a/public/sass/_variables.dark.scss
+++ b/public/sass/_variables.dark.scss
@@ -213,7 +213,7 @@ $wellBackground: #131517;
$navbarHeight: 52px;
$navbarBackgroundHighlight: $dark-3;
-$navbarBackground: $dark-3;
+$navbarBackground: $panel-bg;
$navbarBorder: 1px solid $body-bg;
$navbarText: $gray-4;
@@ -225,14 +225,21 @@ $navbarLinkBackgroundActive: $navbarBackground;
$navbarBrandColor: $link-color;
$navbarDropdownShadow: inset 0px 4px 10px -4px $body-bg;
-$navbarButtonBackground: lighten($navbarBackground, 3%);
-$navbarButtonBackgroundHighlight: lighten($navbarBackground, 5%);
+$navbarButtonBackground: $navbarBackground;
+$navbarButtonBackgroundHighlight: $body-bg;
// Sidemenu
// -------------------------
-$side-menu-bg: $body-bg;
-$side-menu-item-hover-bg: $dark-3;
-$side-menu-opacity: 0.97;
+$side-menu-bg: $dark-3;
+$side-menu-item-hover-bg: $dark-2;
+
+// Menu dropdowns
+// -------------------------
+$menu-dropdown-bg: $body-bg;
+$menu-dropdown-hover-bg: $dark-2;
+$menu-dropdown-border-color: $dark-3;
+$menu-dropdown-shadow: 5px 5px 20px -5px $black;
+
// Pagination
// -------------------------
diff --git a/public/sass/_variables.light.scss b/public/sass/_variables.light.scss
index 5576ad719b9..07d1c41f67b 100644
--- a/public/sass/_variables.light.scss
+++ b/public/sass/_variables.light.scss
@@ -184,10 +184,16 @@ $input-invalid-border-color: lighten($red, 5%);
// -------------------------
$side-menu-bg: $body-bg;
$side-menu-item-hover-bg: $gray-6;
-$side-menu-opacity: 0.97;
+
+// Menu dropdowns
+// -------------------------
+$menu-dropdown-bg: $white;
+$menu-dropdown-hover-bg: $gray-6;
+$menu-dropdown-border-color: $tight-form-border;
+$menu-dropdown-shadow: 5px 5px 20px -5px $gray-4;
// search
-$search-shadow: 0 5px 30px 0 lighten($gray-2, 30%);
+$search-shadow: 0 5px 30px 0 $gray-4;
// Dropdowns
// -------------------------
@@ -205,8 +211,6 @@ $dropdownLinkColorActive: $link-color;
$dropdownLinkBackgroundActive: $gray-6;
$dropdownLinkBackgroundHover: $gray-6;
-$dropdown-link-color: $gray-3;
-
// COMPONENT VARIABLES
// --------------------------------------------------
diff --git a/public/sass/_variables.scss b/public/sass/_variables.scss
index 186b22f2390..4e99c8bf5ba 100644
--- a/public/sass/_variables.scss
+++ b/public/sass/_variables.scss
@@ -219,7 +219,7 @@ $btn-padding-y-lg: .75rem !default;
$btn-border-radius: 2px;
// sidemenu
-$side-menu-width: 14rem;
+$side-menu-width: 68px;
// dashboard
$panel-margin: 0.4rem;
diff --git a/public/sass/base/_type.scss b/public/sass/base/_type.scss
index 7dd6c2f94e7..318540ea525 100644
--- a/public/sass/base/_type.scss
+++ b/public/sass/base/_type.scss
@@ -70,7 +70,7 @@ h1, h2, h3, h4, h5, h6,
color: $headings-color;
}
-h1, .h1 { font-size: $font-size-h1; font-style: italic; }
+h1, .h1 { font-size: $font-size-h1; }
h2, .h2 { font-size: $font-size-h2; }
h3, .h3 { font-size: $font-size-h3; }
h4, .h4 { font-size: $font-size-h4; }
@@ -333,3 +333,7 @@ a.external-link {
}
}
+.no-wrap {
+ white-space: nowrap;
+}
+
diff --git a/public/sass/components/_dropdown.scss b/public/sass/components/_dropdown.scss
index bd3babc1c43..c12a0ef4141 100644
--- a/public/sass/components/_dropdown.scss
+++ b/public/sass/components/_dropdown.scss
@@ -58,6 +58,7 @@
background-color: $dropdownBackground;
border: 1px solid #ccc; // Fallback for IE7-8
border: 1px solid $dropdownBorder;
+ text-align: left;
// Aligns the dropdown menu to right
&.pull-right {
@@ -76,7 +77,7 @@
// Links within the dropdown menu
> li {
> a {
- display: flex;
+ display: block;
padding: 3px 20px 3px 15px;
clear: both;
font-weight: normal;
@@ -85,13 +86,47 @@
white-space: nowrap;
i {
- padding-right: 5px;
+ display: inline-block;
+ margin-right: 10px;
color: $link-color-disabled;
+ position: relative;
+ top: 3px;
+ }
+ }
+ }
+
+ &--navbar {
+ top: 100%;
+ min-width: 100%;
+ }
+
+ &--menu,
+ &--navbar,
+ &--sidemenu {
+ background: $menu-dropdown-bg;
+ box-shadow: $menu-dropdown-shadow;
+ margin-top: 0px;
+ border: none;
+
+ > li > a {
+ display: flex;
+ padding: 5px 10px;
+ border-left: 2px solid transparent;
+
+ &:hover {
+ @include left-brand-border-gradient();
+ color: $link-hover-color;
+ background: $menu-dropdown-hover-bg !important;
}
}
}
}
+.dropdown-item-text {
+ flex-grow: 1;
+}
+
+
// Hover/Focus state
// -----------
.dropdown-menu > li > a:hover,
@@ -218,10 +253,10 @@
height: 0;
border-color: transparent;
border-style: solid;
- border-width: 4px 0 4px 4px;
+ border-width: 5px 0 5px 5px;
border-left-color: $text-color-weak;
- margin-top: 4px;
- margin-right: -10px;
+ margin-top: 5px;
+ margin-right: -4px;
}
.dropdown-submenu:hover > a::after {
border-left-color: $dropdownLinkColorHover;
@@ -256,18 +291,11 @@
margin-top: 2px; // give it some space to breathe
}
-.dropdown-menu-item-with-shortcut {
- min-width: 40px;
- a {
- min-width: 12rem;
- }
-}
-
.dropdown-menu-item-shortcut {
display: block;
- float: right;
+ margin-left: $spacer;
color: $text-muted;
- min-width: 30px;
+ min-width: 47px;
&::before {
font-family: FontAwesome;
@@ -277,3 +305,22 @@
content: "\f11c";
}
}
+
+.dropdown-menu.dropdown-menu--new {
+ li a {
+ padding: $spacer/2 $spacer;
+ border-left: 2px solid $side-menu-bg;
+ background: $side-menu-bg;
+
+ i {
+ display: inline-block;
+ padding-right: 21px;
+ }
+
+ &:hover {
+ @include left-brand-border-gradient();
+ color: $link-hover-color;
+ background: $input-label-bg;
+ }
+ }
+}
diff --git a/public/sass/components/_gf-form.scss b/public/sass/components/_gf-form.scss
index e70b88c96cd..b04d2e4c88f 100644
--- a/public/sass/components/_gf-form.scss
+++ b/public/sass/components/_gf-form.scss
@@ -21,7 +21,10 @@ $gf-form-margin: 0.25rem;
.gf-form-disabled {
color: $text-color-weak;
- .query-keyword,
+ .gf-form-select-wrapper::after {
+ color: $text-color-weak;
+ }
+
a,
.gf-form-input {
color: $text-color-weak;
@@ -101,7 +104,6 @@ $gf-form-margin: 0.25rem;
display: block;
width: 100%;
padding: $input-padding-y $input-padding-x;
- margin-right: $gf-form-margin;
font-size: $font-size-base;
margin-right: $gf-form-margin;
line-height: $input-line-height;
@@ -161,10 +163,11 @@ $gf-form-margin: 0.25rem;
&::after {
position: absolute;
- top: 35%;
- right: $input-padding-x;
+ top: 36%;
+ right: 11px;
+ font-size: 11px;
background-color: transparent;
- color: $input-color;
+ color: $text-color;
font: normal normal normal $font-size-sm/1 FontAwesome;
content: '\f0d7';
pointer-events: none;
@@ -185,7 +188,6 @@ $gf-form-margin: 0.25rem;
.gf-form-select-wrapper {
margin-right: $gf-form-margin;
position: relative;
- background-color: $input-bg;
select.gf-form-input {
text-indent: .01px;
@@ -208,13 +210,14 @@ $gf-form-margin: 0.25rem;
&::after {
position: absolute;
- top: 35%;
- right: $input-padding-x/2;
+ top: 36%;
+ right: 11px;
background-color: transparent;
- color: $input-color;
+ color: $text-color;
font: normal normal normal $font-size-sm/1 FontAwesome;
content: '\f0d7';
pointer-events: none;
+ font-size: 11px;
}
&--has-help-icon {
diff --git a/public/sass/components/_modals.scss b/public/sass/components/_modals.scss
index 78293ef801a..19ef79bcef0 100644
--- a/public/sass/components/_modals.scss
+++ b/public/sass/components/_modals.scss
@@ -47,7 +47,6 @@
}
.modal-header-title {
- font-style: italic;
font-size: $font-size-h3;
float: left;
padding-top: $spacer * 0.75;
@@ -62,7 +61,6 @@
// Body (where all modal content resides)
.modal-body {
position: relative;
- overflow-y: auto;
}
.modal-content {
diff --git a/public/sass/components/_navbar.scss b/public/sass/components/_navbar.scss
index fd336ad94bf..c11a135aaac 100644
--- a/public/sass/components/_navbar.scss
+++ b/public/sass/components/_navbar.scss
@@ -60,10 +60,9 @@
position: relative;
float: left;
margin: 0;
- border-right: 1px solid $tight-form-border;
- background-color: $navbarButtonBackground;
+ background-color: $side-menu-bg;
padding: 0.4rem 1.0rem 0.4rem 1rem;
- min-height:: $navbarHeight;
+ min-height: $navbarHeight;
.fa-caret-down {
font-size: 70%;
@@ -102,25 +101,24 @@
}
}
+.navbar-page-btn-wrapper {
+ float: left;
+ &:hover {
+ background: $navbarButtonBackgroundHighlight;
+ }
+}
+
.navbar-page-btn {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
- float: left;
display: block;
margin: 0;
- font-size: 1.4rem;
- border-right: 1px solid $tight-form-border;
color: darken($link-color, 5%);
- background-color: $navbarButtonBackground;
font-size: $font-size-lg;
padding: 1rem 1rem 0.75rem 1rem;
min-height:: $navbarHeight;
- &:hover, &.active {
- background: $navbarButtonBackgroundHighlight;
- }
-
.fa-caret-down {
font-size: 60%;
padding-left: 0.2rem;
@@ -131,6 +129,7 @@
top: 2px;
font-size: 20px;
line-height: 8px;
+ margin-right: 0.5rem;
}
> img {
@@ -148,50 +147,6 @@
position: relative;
}
-.dropdown-menu.dropdown-menu--navbar {
- top: 100%;
- min-width: 100%;
- margin-top: 0px;
-
- li a {
- padding: $spacer/2 $spacer;
- border-left: 2px solid $side-menu-bg;
- background: $side-menu-bg;
-
- i {
- display: inline-block;
- padding-right: 21px;
- }
-
- &:hover {
- @include left-brand-border-gradient();
- color: $link-hover-color;
- background: $input-label-bg;
- }
- }
-}
-
-.sidemenu-pinned {
- .navbar-brand-btn {
- width: $side-menu-width;
-
- .icon-gf-grafana_wordmark {
- display: inline-block;
- }
-
- .fa-caret-down {
- display: none;
- }
-
- &:hover .fa-chevron-left {
- display: inline-block;
- color: $text-color-weak;
- position: relative;
- left: 1.3rem;
- }
- }
-}
-
.navbar-section-wrapper {
position: relative;
float: left;
diff --git a/public/sass/components/_query_editor.scss b/public/sass/components/_query_editor.scss
index f2d29572e37..84e09976b32 100644
--- a/public/sass/components/_query_editor.scss
+++ b/public/sass/components/_query_editor.scss
@@ -3,6 +3,12 @@
color: $blue;
}
+.gf-form-disabled {
+ .query-keyword {
+ color: darken($blue, 20%);
+ }
+}
+
.query-segment-key {
//border-right: none;
//padding-right: 1px;
diff --git a/public/sass/components/_row.scss b/public/sass/components/_row.scss
index 9c61ac332f8..0f54b93795d 100644
--- a/public/sass/components/_row.scss
+++ b/public/sass/components/_row.scss
@@ -141,16 +141,16 @@ $dash-row-menu-animation-speed: 0.20s;
.dash-row-menu {
list-style: none;
flex-grow: 1;
- box-shadow: $search-shadow;
- background: $side-menu-bg;
+ box-shadow: $menu-dropdown-shadow;
+ background: $menu-dropdown-bg;
li a {
display: block;
white-space: nowrap;
- color: $dropdown-link-color;
+ color: $dropdownLinkColor;
font-size: $font-size-sm;
padding: $spacer/2 $spacer;
- border-left: 2px solid $side-menu-bg;
+ border-left: 2px solid $menu-dropdown-bg;
i {
display: inline-block;
padding-right: $spacer/2;
diff --git a/public/sass/components/_search.scss b/public/sass/components/_search.scss
index e35bf4e6b6e..22c837e1a49 100644
--- a/public/sass/components/_search.scss
+++ b/public/sass/components/_search.scss
@@ -104,80 +104,45 @@
padding-right: 10px;
}
}
+}
- .search-item {
- word-wrap: break-word;
- display: block;
- padding: 3px 10px;
- white-space: nowrap;
- background-color: $tight-form-bg;
- margin-bottom: 4px;
- @include left-brand-border();
+.search-item {
+ word-wrap: break-word;
+ display: block;
+ padding: 3px 10px;
+ white-space: nowrap;
+ background-color: $tight-form-bg;
+ margin-bottom: 4px;
+ @include left-brand-border();
+ &:hover {
+ @include left-brand-border-gradient();
+ background-color: $tight-form-func-bg;
+ }
+
+ &.selected {
+ background-color: $tight-form-func-bg;
+ }
+
+ &--dash-db,
+ &--dash-child {
.search-result-icon::before {
content: "\f009";
}
+ }
- &.search-item-dash-home .search-result-icon::before {
- content: "\f015";
- }
-
- &:hover,
- &.selected {
- background-color: $tight-form-func-bg;
- @include left-brand-border-gradient();
+ &--dash-folder {
+ .search-result-icon::before {
+ content: "\f07c";
}
}
- .search-result-tags {
- float: right;
- }
-
- .search-result-actions {
- float: right;
- padding-left: 20px;
+ &--dash-child {
+ margin-left: 20px;
}
}
-
-.search-button-row {
- padding: $spacer*2;
- display: flex;
- flex-direction: row;
- align-items: flex-start;
- justify-content: space-around;
- height: 30%;
-
- button, a {
- margin-bottom: $spacer;
- }
-
- .search-button-row-explore-link {
- color: $gray-3;
- font-size: $font-size-sm;
- position: relative;
- top: 1.0rem;
- &:hover {
- color: $link-hover-color;
- }
- img {
- vertical-align: text-bottom;
- }
- }
+.search-result-tags {
+ float: right;
}
-@include media-breakpoint-up(lg) {
- .search-dropdown {
- flex-direction: row;
- }
- .search-button-row {
- flex-direction: column;
- justify-content: flex-start;
- }
-}
-
-@include media-breakpoint-up(md) {
- .search-container {
- left: 78px;
- }
-}
diff --git a/public/sass/components/_settings_permissions.scss b/public/sass/components/_settings_permissions.scss
new file mode 100644
index 00000000000..54c94bb2f5e
--- /dev/null
+++ b/public/sass/components/_settings_permissions.scss
@@ -0,0 +1,34 @@
+.permissionlist {
+ .permissionlist__section {
+ margin-bottom: $spacer*2;
+ }
+
+ .permissionlist__section-header {
+ margin-bottom: $spacer;
+ display: flex;
+ }
+
+ .permissionlist__section-header h6 {
+ margin: auto 5px;
+ color: $text-color-weak;
+ }
+
+ .permissionlist__section-header__add-button {
+ margin-left: auto;
+ width: 105px;
+ }
+
+ .permissionlist__item {
+ background-color: $tight-form-bg;
+
+ &:hover {
+ background-color: $tight-form-func-bg;
+ }
+ }
+
+ .permissionlist__item-buttons {
+ margin-left: auto;
+ }
+}
+
+
diff --git a/public/sass/components/_sidemenu.scss b/public/sass/components/_sidemenu.scss
index 0e5402403e5..f269cae82dd 100644
--- a/public/sass/components/_sidemenu.scss
+++ b/public/sass/components/_sidemenu.scss
@@ -6,8 +6,9 @@
position: absolute;
top: 52px;
left: 0;
+ //border-top: 1px solid $tight-form-border;
width: $side-menu-width;
- background-color: rgba($side-menu-bg,$side-menu-opacity);
+ background-color: $side-menu-bg;
z-index: 1000;
opacity: 0;
visibility: hidden;
@@ -31,7 +32,7 @@
min-height: calc(100% - 54px);
}
.dashboard-container {
- padding-left: $side-menu-width + 0.5rem;
+ padding-left: $side-menu-width + 8px;
}
.page-container {
margin-left: $side-menu-width;
@@ -56,14 +57,14 @@
@include left-brand-border-gradient();
.dropdown-menu {
+ margin: 0;
display: block;
opacity: 0;
top: 0px;
// important to overlap it otherwise it can be hidden
// again by the mouse getting outside the hover space
- left: $side-menu-width - 0.2rem;
- background-color: rgba($side-menu-bg,$side-menu-opacity);
- @include animation('dropdown-anim 150ms ease-in-out 100ms forwards');
+ left: $side-menu-width - 2px;
+ @include animation('dropdown-anim 0ms ease-in-out 0ms forwards');
z-index: -9999;
}
}
@@ -81,19 +82,6 @@
}
}
-.sidemenu-main-link {
- font-size: 16px;
-}
-
-.sidemenu-item-text {
- width: 110px;
- display: inline-block;
- vertical-align: middle;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
-}
-
.icon-circle {
width: 40px;
height: 40px;
@@ -103,9 +91,17 @@
opacity: .7;
position: relative;
left: 7px;
- top: 5px;
font-size: 150%;
}
+
+ .fa {
+ top: 2px;
+ }
+
+ .icon-gf {
+ top: 5px;
+ }
+
img {
left: 7px;
position: relative;
@@ -117,12 +113,9 @@
line-height: 47px;
padding: 0px 10px 0px 10px;
display: block;
- border-left: 1px solid transparent;
-
-
- .sidemenu-item-text {
- padding-left: 11px;
- }
+ position: relative;
+ font-size: 16px;
+ border: 1px solid transparent;
img {
border-radius: 50%;
@@ -132,13 +125,11 @@
}
}
-.sidemenu-section-tagline {
- font-style: italic;
- line-height: 10px;
-}
-
-.sidemenu-section-text-wrapper {
- padding-top: 4px;
+.side-menu-header {
+ padding: 10px 10px 10px 20px;
+ white-space: nowrap;
+ background-color: $side-menu-item-hover-bg;
+ font-size: 18px;
}
.sidemenu-org-section .dropdown-menu-title {
@@ -190,31 +181,28 @@
}
.sidemenu-org-avatar {
- width: 40px;
- height: 40px;
- background-color: $gray-2;
- border-radius: 50%;
- text-align: center;
-
>img {
position: absolute;
- width: 40px;
- height: 40px;
+ width: 35px;
+ height: 35px;
border-radius: 50%;
left: 14px;
+ top: 12px;
+ z-index: 10;
}
}
.sidemenu-org-avatar--missing {
color: $gray-4;
text-shadow: 0 1px 0 $dark-1;
- line-height: 40px;
+ line-height: 28px;
font-size: $font-size-lg;
}
.sidemenu-org-details {
padding-left: 10px;
color: $link-color;
+ display: none;
}
.sidemenu-org-name {
diff --git a/public/sass/pages/_dashboard.scss b/public/sass/pages/_dashboard.scss
index 5664a3eac9a..67c7dd48a25 100644
--- a/public/sass/pages/_dashboard.scss
+++ b/public/sass/pages/_dashboard.scss
@@ -101,29 +101,8 @@ div.flot-text {
}
.panel-menu {
- border: none;
- text-align: left;
- background: $side-menu-bg;
- box-shadow: $search-shadow;
top: 25px;
left: -100px;
-
- li a {
- color: $dropdown-link-color;
- font-size: $font-size-sm;
- padding: $spacer/2 $spacer;
- border-left: 2px solid $side-menu-bg;
- i {
- display: inline-block;
- padding-right: $spacer/2;
- }
-
- &:hover {
- @include left-brand-border-gradient();
- color: $link-color;
- background: $input-label-bg;
- }
- }
}
.panel-info-corner-inner {
dashboards on Grafana.com
-