opensource/grafana
1
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-08-02 04:09:50 +08:00
Code Issues Packages Projects Releases Wiki Activity

ux: add new panel and dash nav improvements

Browse Source
This commit is contained in:
Torkel Ödegaard
2017-12-01 20:11:55 +01:00
parent 126257845c
commit e871e56522
20 changed files with 95 additions and 133 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
public/app/core/components/PageHeader.tsx
View File

@ -6,27 +6,6 @@ export interface IProps {
model: NavModel;
}
// function BreadcrumbItem(item: NavModelItem) {
// return (
// <a className="breadcrumb-item" href={item.url} key={item.id}>
// {item.text}
// </a>
// );
// }
//
// function Breadcrumb(model: NavModel) {
// return (
// <div className="page-nav">
// <div className="page-breadcrumbs">
// <a className="breadcrumb-item active" href="/">
// <i className="fa fa-home" />
// </a>
// {model.breadcrumbs.map(BreadcrumbItem)}
// </div>
// </div>
// );
// }
function TabItem(tab: NavModelItem) {
if (tab.hideFromTabs) {
return (null);
@ -84,7 +63,6 @@ export default class PageHeader extends React.Component<IProps, any> {
<div className="page-container">
<div className="page-header">
{this.renderHeaderTitle(this.props.model.main)}
{this.props.model.main.children && <Tabs main={this.props.model.main} />}
</div>
</div>

9
public/app/core/routes/dashboard_loaders.ts
View File

@ -36,12 +36,11 @@ export class NewDashboardCtrl {
meta: { canStar: false, canShare: false, isNew: true },
dashboard: {
title: "New dashboard",
rows: [
panels: [
{
title: 'Dashboard Row',
height: '350px',
panels: [],
isNew: true,
type: 'add-panel',
gridPos: {x: 0, y: 0, w: 12, h: 9},
title: 'Panel Title',
}
]
},

12
public/app/features/dashboard/dashgrid/AddPanelPanel.tsx
View File

@ -72,8 +72,18 @@ export class AddPanelPanel extends React.Component<AddPanelPanelProps, AddPanelP
render() {
return (
<div className="panel-container">
<div className="add-panel">{this.state.panelPlugins.map(this.renderPanelItem.bind(this))}</div>
<div className="add-panel">
<div className="add-panel__header">
<i className="gicon gicon-add-panel"></i>
<span className="add-panel__title">New Panel</span>
<span className="add-panel__sub-title">Select a visualization</span>
</div>
<div className="add-panel__items">
{this.state.panelPlugins.map(this.renderPanelItem.bind(this))}
</div>
</div>
</div>
);
}
}

4
public/app/features/dashboard/dashnav/dashnav.html
View File

@ -20,7 +20,7 @@
<div class="navbar__spacer"></div>
<div class="navbar-buttons">
<div class="navbar-buttons navbar-buttons--actions">
<button class="btn navbar-button navbar-button--add-panel" ng-show="::ctrl.dashboard.meta.canSave" bs-tooltip="'Add panel'" data-placement="bottom" ng-click="ctrl.addPanel()">
<i class="gicon gicon-add-panel"></i>
</button>
@ -42,7 +42,7 @@
</button>
<div class="dropdown">
<button class="btn navbar-button" data-toggle="dropdown">
<button class="btn navbar-button" data-toggle="dropdown" bs-tooltip="'Settings'" data-placement="bottom">
<i class="fa fa-cog"></i>
</button>

2
public/app/features/dashboard/dashnav/dashnav.ts
View File

@ -150,7 +150,7 @@ export class DashNavCtrl {
this.dashboard.addPanel({
type: 'add-panel',
gridPos: {x: 0, y: 0, w: 12, h: 9},
title: 'New Graph',
title: 'Panel Title',
});
}

2
public/app/features/dashboard/partials/dashboardList.html
View File

@ -2,7 +2,7 @@
<div class="page-container page-body">
<div class="page-action-bar">
<div class="gf-form">
<div class="gf-form gf-form--grow">
<label class="gf-form-label">Search</label>
<input type="text" class="gf-form-input max-width-30" placeholder="Find Dashboard by name" tabindex="1" give-focus="true" ng-model="ctrl.query.query" ng-model-options="{ debounce: 500 }" spellcheck='false' ng-change="ctrl.onQueryChange()" />
</div>

10
public/app/features/dashboard/timepicker/timepicker.html
View File

@ -1,13 +1,13 @@
<div class="navbar-buttons">
<button class="btn navbar-button navbar-button--tight gf-timepicker-time-control" bs-tooltip="'Shift time backward <br> (left arrow key)'" data-placement="bottom" ng-click='ctrl.move(-1)'>
<div class="navbar-buttons navbar-buttons--zoom">
<button class="btn navbar-button navbar-button--tight" ng-click='ctrl.move(-1)'>
<i class="fa fa-chevron-left"></i>
</button>
<button class="btn navbar-button dashnav-zoom-out gf-timepicker-time-control" bs-tooltip="'Time range zoom out <br> CTRL+Z'" data-placement="bottom" ng-click='ctrl.zoom(2)'>
<button class="btn navbar-button" bs-tooltip="'Time range zoom out <br> CTRL+Z'" data-placement="bottom" ng-click='ctrl.zoom(2)'>
<i class="fa fa-search-minus"></i>
</button>
<button class="btn navbar-button navbar-button--tight gf-timepicker-time-control" bs-tooltip="'Shift time forward <br> (right arrow key)'" data-placement="bottom" ng-click='ctrl.move(1)'>
<button class="btn navbar-button navbar-button--tight" ng-click='ctrl.move(1)'>
<i class="fa fa-chevron-right"></i>
</button>
</div>
@ -20,7 +20,7 @@
<span ng-show="ctrl.dashboard.refresh" class="text-warning">&nbsp; Refresh every {{ctrl.dashboard.refresh}}</span>
</button>
<button class="btn navbar-button dashnav-refresh-action" ng-click="ctrl.timeSrv.refreshDashboard()">
<button class="btn navbar-button navbar-button--refresh" ng-click="ctrl.timeSrv.refreshDashboard()">
<i class="fa fa-refresh"></i>
</button>
</div>

3
public/app/features/org/partials/change_password.html
View File

@ -7,9 +7,6 @@
<div ng-if="ldapEnabled || authProxyEnabled">
You cannot change password when ldap or auth proxy authentication is enabled.
<br>
<br>
<a class="btn-text" href="profile">Back to profile</a>
</div>
<form name="userForm" class="gf-form-group" ng-hide="ldapEnabled || authProxyEnabled">

6
public/app/features/org/partials/user_groups.html
View File

@ -3,9 +3,9 @@
<div class="page-container page-body">
<div class="page-action-bar">
<div class="gf-form width-15">
<div class="gf-form gf-form--grow">
<label class="gf-form-label">Search</label>
<input type="text" class="gf-form-input" placeholder="Find User Group by name" tabindex="1" give-focus="true"
<input type="text" class="gf-form-input max-width-20" placeholder="Find User Group by name" tabindex="1" give-focus="true"
ng-model="ctrl.query" ng-model-options="{ debounce: 500 }" spellcheck='false' ng-change="ctrl.get()" />
</div>
@ -13,7 +13,7 @@
<a class="btn btn-success" ng-click="ctrl.openUserGroupModal()">
<i class="fa fa-plus"></i>
Create User Group
Add Team
</a>
</div>

4
public/app/features/plugins/partials/ds_http_settings.html
View File

@ -1,7 +1,7 @@
<div class="gf-form-group">
<h3 class="section-heading">HTTP</h3>
<h3 class="page-heading">HTTP</h3>
<div class="gf-form-group">
<div class="gf-form-inline">
<div class="gf-form max-width-30">
@ -38,7 +38,7 @@
</div>
</div>
<h3 class="section-heading">Auth</h3>
<h3 class="page-heading">Auth</h3>
<div class="gf-form-group">
<div class="gf-form-inline">
<gf-form-switch class="gf-form" label="Basic Auth" checked="current.basicAuth" label-class="width-8" switch-class="max-width-6"></gf-form-switch>

2
public/app/plugins/datasource/graphite/partials/config.html
View File

@ -3,7 +3,7 @@
suggest-url="http://localhost:8080">
</datasource-http-settings>
<h3 class="section-heading">Graphite details</h3>
<h3 class="page-heading">Graphite details</h3>
<div class="gf-form-group">
<div class="gf-form">

79
public/sass/_old_responsive.scss
View File

@ -6,15 +6,22 @@
// Media queries
// ---------------------
@include media-breakpoint-down(lg) {
.navbar-page-btn {
max-width: 290px;
}
.gf-timepicker-nav-btn {
max-width: 240px;
}
}
@include media-breakpoint-down(md) {
.navbar-buttons--zoom {
display: none;
}
}
@include media-breakpoint-down(sm) {
// div.panel {
// width: 100% !important;
// padding: 0px !important;
// }
// .panel-margin {
// margin-right: 0;
// margin-left: 0;
// }
body {
padding: 0;
}
@ -24,17 +31,7 @@
.gf-timepicker-nav-btn {
max-width: 120px;
}
.dashnav-zoom-out,
.dashnav-move-timeframe,
.dashnav-action-icons {
display: none;
}
.page-container {
padding: 0 $spacer * 2;
}
.dash-row-menu-container {
.navbar-buttons--actions {
display: none;
}
}
@ -50,50 +47,8 @@
.page-dashboard .navbar-page-btn {
max-width: 280px;
}
.gf-timepicker-nav-btn {
max-width: 120px;
}
.dashnav-move-timeframe {
display: none;
}
.panel-in-fullscreen {
.dashnav-action-icons {
display: none;
}
.dashnav-back-to-dashboard {
display: block;
}
}
}
@include media-breakpoint-up(lg) {
.page-dashboard .navbar-page-btn {
max-width: 290px;
}
.gf-timepicker-nav-btn {
max-width: 240px;
}
.dashnav-zoom-out {
display: block;
}
.dashnav-move-timeframe {
display: block;
}
}
@include media-breakpoint-up(xl) {
.panel-in-fullscreen {
.dashnav-action-icons {
display: block;
}
}
.page-dashboard .navbar-page-btn {
max-width: none;
}
.gf-timepicker-nav-btn {
max-width: none;
}
}

2
public/sass/_variables.dark.scss
View File

@ -15,7 +15,7 @@ $dark-3: #262628;
$dark-4: #333333;
$dark-5: #444444;
$gray-1: #555555;
$gray-2: #7B7B7B;
$gray-2: #8e8e8e;
$gray-3: #b3b3b3;
$gray-4: #D8D9DA;
$gray-5: #ECECEC;

5
public/sass/_variables.scss
View File

@ -89,6 +89,7 @@ $font-size-root: 14px !default;
$font-size-base: 13px !default;
$font-size-lg: 18px !default;
$font-size-md: 15px !default;
$font-size-sm: 11px !default;
$font-size-xs: 9px !default;
@ -197,8 +198,8 @@ $form-icon-danger: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www
// Used for a bird's eye view of components dependent on the z-axis
// Try to avoid customizing these :)
$zindex-dropdown: 1000;
$zindex-tooltip: 1020;
$zindex-navbar-fixed: 1030;
$zindex-navbar-fixed: 1020;
$zindex-tooltip: 1030;
$zindex-modal-backdrop: 1040;
$zindex-modal: 1050;
$zindex-typeahead: 1060;

2
public/sass/components/_dashboard_grid.scss
View File

@ -21,7 +21,7 @@
}
}
@include media-breakpoint-down(md) {
@include media-breakpoint-down(sm) {
.react-grid-layout {
height: 100% !important;
}

1
public/sass/components/_navbar.scss
View File

@ -82,6 +82,7 @@
color: $text-muted;
border: 1px solid #151515;
margin-right: 1px;
white-space: nowrap;
.gicon {
font-size: 16px;

4
public/sass/components/_page_header.scss
View File

@ -1,7 +1,7 @@
.page-header-canvas {
background: linear-gradient(90deg, #292a2d, black);
box-shadow: inset 0px -4px 14px #2d2d2d;
box-shadow: inset 0px -4px 14px $dark-2;
border-bottom: 1px solid $dark-4;
}
@ -35,7 +35,7 @@
.page-header__img {
border-radius: 50%;
position: relative;
top: -3px;
top: 10px;
width: 50px;
height: 50px;
}

31
public/sass/components/_panel_add_panel.scss
View File

@ -1,13 +1,40 @@
.add-panel {
height: 100%;
}
.add-panel__header {
padding: 5px 15px;
display: flex;
align-items: center;
i {
font-size: 30px;
margin-right: $spacer;
}
}
.add-panel__title {
font-size: $font-size-md;
margin-right: $spacer/2;
}
.add-panel__sub-title {
font-style: italic;
color: $text-muted;
position: relative;
top: 1px;
}
.add-panel__items {
padding: 3px 0;
display: flex;
flex-direction: row;
flex-wrap: wrap;
overflow: auto;
height: 100%;
height: calc(100% - 43px);
align-content: flex-start;
justify-content: space-around;
padding: 3px 0;
}
.add-panel__item {

5
public/sass/components/_timepicker.scss
View File

@ -7,6 +7,11 @@
display: flex;
}
.gf-timepicker-nav-btn {
text-overflow: ellipsis;
overflow: hidden;
}
.gf-timepicker-dropdown {
margin: -8px -10px 10px 5px;
padding: 10px 20px;

23
public/sass/components/_view_states.scss
View File

@ -21,33 +21,22 @@
.playlist-active,
.user-activity-low {
.react-resizable-handle
.add-row-panel-hint,
.dash-row-menu-container,
.panel-drop-zone
.dashnav-refresh-action,
.dashnav-zoom-out,
.navbar-button--refresh,
.navbar-buttons--zoom,
.navbar-buttons--actions,
.panel-menu-container,
.dashnav-action-icons,
.panel-info-corner--info,
.panel-info-corner--links,
.dashnav-move-timeframe {
.panel-info-corner--links {
opacity: 0;
transition: all 1.5s ease-in-out 1s;
}
// navbar buttons
.navbar {
border-color: transparent;
background: transparent;
transition: all 1.5s ease-in-out 1s;
.fa {
opacity: 0;
transition: all 1.5s ease-in-out 1s;
}
}
.navbar {
box-shadow: none;
background: transparent;
}
.navbar-page-btn {