Skip to content

N
nexpie-grafana-theme
Commit 68dab712 by Torkel Ödegaard
Options

refactor: sidemenu toggle & hiding logic

parent 955dcf24
Showing with 95 additions and 113 deletions
public/app/core/components/grafana_app.ts
......@@ -79,21 +79,16 @@ export function grafanaAppDirective(playlistSrv, contextSrv, $timeout, $rootScop
sidemenuOpen = scope.contextSrv.sidemenu;
body.toggleClass('sidemenu-open', sidemenuOpen);
scope.$watch('contextSrv.sidemenu', newVal => {
if (sidemenuOpen !== scope.contextSrv.sidemenu) {
sidemenuOpen = scope.contextSrv.sidemenu;
body.toggleClass('sidemenu-open', scope.contextSrv.sidemenu);
}
appEvents.on('toggle-sidemenu', () => {
body.toggleClass('sidemenu-open');
});
let sidemenuOpenSmallBreakpoint = scope.contextSrv.sidemenuSmallBreakpoint;
body.toggleClass('sidemenu-open--xs', sidemenuOpenSmallBreakpoint);
appEvents.on('toggle-sidemenu-mobile', () => {
body.toggleClass('sidemenu-open--xs');
});
scope.$watch('contextSrv.sidemenuSmallBreakpoint', newVal => {
if (sidemenuOpenSmallBreakpoint !== scope.contextSrv.sidemenuSmallBreakpoint) {
sidemenuOpenSmallBreakpoint = scope.contextSrv.sidemenuSmallBreakpoint;
body.toggleClass('sidemenu-open--xs', scope.contextSrv.sidemenuSmallBreakpoint);
}
appEvents.on('toggle-sidemenu-hidden', () => {
body.toggleClass('sidemenu-hidden');
});
// tooltip removal fix
......@@ -111,6 +106,9 @@ export function grafanaAppDirective(playlistSrv, contextSrv, $timeout, $rootScop
}
}
// clear body class sidemenu states
body.removeClass('sidemenu-open--xs');
$("#tooltip, .tooltip").remove();
// check for kiosk url param
......
public/app/core/components/sidemenu/sidemenu.html
......@@ -3,11 +3,10 @@
</a>
<a class="sidemenu__logo_small_breakpoint" ng-click="ctrl.toggleSideMenuSmallBreakpoint()">
<img src="public/img/grafana_icon.svg"></img>
<p class="sidemenu__close"><i class="fa fa-times"></i>&nbsp;Close</p>
<i class="fa fa-bars"></i>
<span class="sidemenu__close"><i class="fa fa-times"></i>&nbsp;Close</span>
</a>
<div class="sidemenu__top">
<div ng-repeat="item in ::ctrl.mainLinks" class="sidemenu-item dropdown">
<a href="{{::item.url}}" class="sidemenu-link" target="{{::item.target}}">
......
public/app/core/components/sidemenu/sidemenu.ts
///<reference path="../../../headers/common.d.ts" />
import _ from 'lodash';
import config from 'app/core/config';
import $ from 'jquery';
import coreModule from '../../core_module';
import appEvents from 'app/core/app_events';
export class SideMenuCtrl {
user: any;
......@@ -11,7 +10,7 @@ export class SideMenuCtrl {
bottomNav: any;
loginUrl: string;
isSignedIn: boolean;
smallBPSideMenuOpen = false;
isOpenMobile: boolean;
/** @ngInject */
constructor(private $scope, private $rootScope, private $location, private contextSrv, private $timeout) {
......@@ -29,24 +28,21 @@ export class SideMenuCtrl {
}
this.$scope.$on('$routeChangeSuccess', () => {
if (this.smallBPSideMenuOpen) {
this.contextSrv.setSideMenuForSmallBreakpoint(false, true);
this.smallBPSideMenuOpen = false;
}
this.loginUrl = 'login?redirect=' + encodeURIComponent(this.$location.path());
});
}
toggleSideMenu() {
this.contextSrv.toggleSideMenu();
appEvents.emit('toggle-sidemenu');
this.$timeout(() => {
this.$rootScope.$broadcast('render');
});
}
toggleSideMenuSmallBreakpoint() {
this.smallBPSideMenuOpen = !this.smallBPSideMenuOpen;
this.contextSrv.setSideMenuForSmallBreakpoint(this.smallBPSideMenuOpen, false);
appEvents.emit('toggle-sidemenu-mobile');
}
switchOrg() {
......@@ -75,10 +71,6 @@ export function sideMenuDirective() {
parent.append(menu);
}, 100);
});
scope.$on("$destory", function() {
elem.off('click.dropdown');
});
}
};
}
......
public/app/core/controllers/error_ctrl.ts
import config from 'app/core/config';
import coreModule from '../core_module';
import appEvents from 'app/core/app_events';
export class ErrorCtrl {
......@@ -8,11 +9,14 @@ export class ErrorCtrl {
$scope.navModel = navModelSrv.getNotFoundNav();
$scope.appSubUrl = config.appSubUrl;
var showSideMenu = contextSrv.sidemenu;
contextSrv.sidemenu = false;
if (!contextSrv.isSignedIn) {
appEvents.emit('toggle-sidemenu-hidden');
}
$scope.$on('$destroy', function() {
contextSrv.sidemenu = showSideMenu;
$scope.$on("destroy", () => {
if (!contextSrv.isSignedIn) {
appEvents.emit('toggle-sidemenu-hidden');
}
});
}
}
......
public/app/core/nav_model_srv.ts
......@@ -70,13 +70,15 @@ export class NavModelSrv {
getNotFoundNav() {
var node = {
text: "Page not found ",
text: "Page not found",
icon: "fa fa-fw fa-warning",
subTitle: "404 Error"
};
return {
breadcrumbs: [node],
node: node
node: node,
main: node
};
}
......
public/app/core/routes/routes.ts
......@@ -178,23 +178,27 @@ function setupAngularRoutes($routeProvider, $locationProvider) {
.when('/login', {
templateUrl: 'public/app/partials/login.html',
controller : 'LoginCtrl',
pageClass: 'page-login',
pageClass: 'sidemenu-hidden',
})
.when('/invite/:code', {
templateUrl: 'public/app/partials/signup_invited.html',
controller : 'InvitedCtrl',
pageClass: 'sidemenu-hidden',
})
.when('/signup', {
templateUrl: 'public/app/partials/signup_step2.html',
controller : 'SignUpCtrl',
pageClass: 'sidemenu-hidden',
})
.when('/user/password/send-reset-email', {
templateUrl: 'public/app/partials/reset_password.html',
controller : 'ResetPasswordCtrl',
pageClass: 'sidemenu-hidden',
})
.when('/user/password/reset', {
templateUrl: 'public/app/partials/reset_password.html',
controller : 'ResetPasswordCtrl',
pageClass: 'sidemenu-hidden',
})
.when('/dashboard/snapshots', {
templateUrl: 'public/app/features/snapshot/partials/snapshots.html',
......
public/app/core/services/context_srv.ts
......@@ -58,10 +58,6 @@ export class ContextSrv {
this.sidemenu = !this.sidemenu;
store.set('grafana.sidemenu', this.sidemenu);
}
setSideMenuForSmallBreakpoint(show: boolean, persistToggle: boolean) {
this.sidemenuSmallBreakpoint = show;
}
}
var contextSrv = new ContextSrv();
......
public/app/features/dashboard/dashnav/dashnav.ts
///<reference path="../../../headers/common.d.ts" />
import _ from 'lodash';
import moment from 'moment';
import angular from 'angular';
......@@ -18,7 +16,6 @@ export class DashNavCtrl {
private dashboardSrv,
private $location,
private backendSrv,
private contextSrv,
public playlistSrv,
navModelSrv) {
this.navModel = navModelSrv.getDashboardNav(this.dashboard, this);
......@@ -35,10 +32,6 @@ export class DashNavCtrl {
}
}
toggleSideMenu() {
this.contextSrv.toggleSideMenu();
}
openEditView(editview) {
var search = _.extend(this.$location.search(), {editview: editview});
this.$location.search(search);
......
public/app/partials/error.html
<div class="page-container">
<div class="page-header">
<div class="page-header__inner">
<span class="page-header__logo">
<i class="page-header__icon fa fa-fw fa-exclamation-triangle"></i>
</span>
<div class="page-header__info-block">
<h1 class="page-header__title">
Page not found
</h1>
<div class="page-header__sub-title">
404 Error
<page-header model="navModel"></page-header>
<div class="page-container page-body">
<div class="panel-container error-container">
<div class="error-column graph-box">
<div class="error-row">
<div class="error-column error-space-between graph-percentage">
<p>100%</p>
<p>80%</p>
<p>60%</p>
<p>40%</p>
<p>20%</p>
<p>0%</p>
</div>
</div>
</div>
</div>
<div class="panel-container error-container">
<div class="error-column graph-box">
<div class="error-row">
<div class="error-column error-space-between graph-percentage">
<p>100%</p>
<p>80%</p>
<p>60%</p>
<p>40%</p>
<p>20%</p>
<p>0%</p>
</div>
<div class="error-column image-box">
<img src="public/img/graph404.svg" width="100%">
<div class="error-row error-space-between">
<p class="graph-text">Then</p>
<p class="graph-text">Now</p>
</div>
<div class="error-column image-box">
<img src="public/img/graph404.svg" width="100%">
<div class="error-row error-space-between">
<p class="graph-text">Then</p>
<p class="graph-text">Now</p>
</div>
</div>
</div>
<div class="error-column info-box">
<div class="error-row current-box">
<p class="current-text">current</p>
</div>
<div class="error-row" style="flex: 1">
<i class="fa fa-minus error-minus"></i>
<div class="error-column error-space-between error-full-width">
<div class="error-row error-space-between">
<p>Chances you are on the page you are looking for.</p>
<p class="left-margin">0%</p>
</div>
<div>
<h3>Sorry for the inconvenience</h3>
<p>Please go back to your
<a href="{{appSubUrl}}/" class="error-link">home dashboard</a> and try again.</p>
<p>If the error persists, seek help on the
<a href="https://community.grafana.com" target="_blank" class="error-link">community site</a>.</p>
</div>
</div>
<div class="error-column info-box">
<div class="error-row current-box">
<p class="current-text">current</p>
</div>
<div class="error-row" style="flex: 1">
<i class="fa fa-minus error-minus"></i>
<div class="error-column error-space-between error-full-width">
<div class="error-row error-space-between">
<p>Chances you are on the page you are looking for.</p>
<p class="left-margin">0%</p>
</div>
<div>
<h3>Sorry for the inconvenience</h3>
<p>Please go back to your
<a href="{{appSubUrl}}/" class="error-link">home dashboard</a> and try again.</p>
<p>If the error persists, seek help on the
<a href="https://community.grafana.com" target="_blank" class="error-link">community site</a>.</p>
</div>
</div>
</div>
<span class="react-resizable-handle" style="cursor: default"></span>
</div>
<span class="react-resizable-handle" style="cursor: default"></span>
</div>
</div>
public/app/partials/reset_password.html
......@@ -58,13 +58,14 @@
</button>
</div>
</form>
</div>
<div class="row" style="margin-top: 20px">
<div class="text-center">
<a href="login">Back to login</a>
</div>
</div>
</div>
<div style="margin-top: 20px">
<div class="text-center">
<a href="login">Back to login</a>
</div>
</div>
</div>
</div>
</div>
public/sass/components/_sidemenu.scss
......@@ -16,6 +16,14 @@
.sidemenu__close {
display: none;
}
}
// body class that hides sidemenu
.sidemenu-hidden {
.sidemenu {
display: none;
}
}
@include media-breakpoint-up(sm) {
......@@ -164,7 +172,7 @@ li.sidemenu-org-switcher {
}
}
.sidemenu__logo, .sidemenu__logo_small_breakpoint {
.sidemenu__logo {
display: block;
padding: 0.4rem 1.0rem 0.4rem 0.65rem;
min-height: $navbarHeight;
......@@ -203,6 +211,8 @@ li.sidemenu-org-switcher {
.sidemenu__close {
display: block;
font-size: $font-size-md;
position: relative;
top: -3px;
}
.sidemenu__top,
......@@ -215,14 +225,16 @@ li.sidemenu-org-switcher {
.sidemenu__logo {
display: none;
}
.sidemenu__logo_small_breakpoint {
padding: 12px 10px 26px;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: baseline;
&:hover {
background: transparent;
.fa-bars {
font-size: 25px;
}
}
......
public/sass/pages/_login.scss
......@@ -8,12 +8,6 @@
padding-top: $spacer * 5; /* BAD HACK - experiement to see how it looks */
}
.page-login {
.sidemenu {
display: none;
}
}
.login-form {
display: inline-block;
max-width: 24rem;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment