Skip to content

N
nexpie-grafana-theme
Commit ab495768 by Matt
Options

Merged with master, I think

parents 9d893eec d42bfc25
Showing with 289 additions and 368 deletions
public/app/core/components/navbar/navbar.html
<div class="navbar-inner">
<div class="top-nav-btn top-nav-menu-btn">
<a class="pointer" ng-click="ctrl.contextSrv.toggleSideMenu()">
<span class="top-nav-logo-background">
<img class="logo-icon" src="public/img/grafana_icon.svg"></img>
</span>
<i class="icon-gf icon-gf-grafana_wordmark"></i>
<i class="fa fa-caret-down"></i>
</a>
</div>
<a class="navbar-brand-btn pointer" ng-click="ctrl.contextSrv.toggleSideMenu()">
<span class="navbar-brand-btn-background">
<img src="public/img/grafana_icon.svg"></img>
</span>
<i class="icon-gf icon-gf-grafana_wordmark"></i>
<i class="fa fa-caret-down"></i>
</a>
<div ng-if="ctrl.title">
<nav-button title="{{ctrl.title}}" title-url="{{ctrl.titleUrl}}" icon="{{ctrl.icon}}">
</nav-button>
</div>
<a href="{{::ctrl.titleUrl}}" class="navbar-page-btn" ng-show="ctrl.title">
<i class="{{::ctrl.icon}}"></i>
{{::ctrl.title}}
</a>
<div ng-transclude></div>
</div>
public/app/core/components/navbar/navbar.ts
......@@ -30,28 +30,4 @@ export function navbarDirective() {
};
}
var navButtonTemplate = `
<div class="top-nav-btn dashnav-dashboards-btn">
<a href="{{::titleUrl}}">
<i class="{{::icon}}"></i>
<span class="dashboard-title">{{::title}}</span>
</a>
</div>
`;
function navButton() {
return {
restrict: 'E',
template: navButtonTemplate,
scope: {
title: "@",
titleUrl: "@",
},
link: function(scope, elem, attrs, ctrl) {
scope.icon = attrs.icon;
}
};
}
coreModule.directive('navbar', navbarDirective);
coreModule.directive('navButton', navButton);
public/app/core/routes/routes.ts
......@@ -186,7 +186,7 @@ function setupAngularRoutes($routeProvider, $locationProvider) {
.when('/global-alerts', {
templateUrl: 'public/app/features/dashboard/partials/globalAlerts.html',
})
.when('/styleguide', {
.when('/styleguide/:page?', {
controller: 'StyleGuideCtrl',
controllerAs: 'ctrl',
templateUrl: 'public/app/features/styleguide/styleguide.html',
......
public/app/features/admin/partials/admin_home.html
......@@ -24,5 +24,9 @@
View Server Stats
</a>
<a class="btn btn-inverse" href="styleguide">
Style guide
</a>
</div>
public/app/features/dashboard/dashnav/dashnav.html
<navbar>
<div class="top-nav-btn dashnav-dashboards-btn" ng-if="!dashboardMeta.isSnapshot">
<a class="pointer" ng-click="openSearch()">
<i class="icon-gf icon-gf-dashboard"></i>
<span class="dashboard-title">{{dashboard.title}}</span>
<i class="fa fa-caret-down"></i>
</a>
</div>
<a class="pointer navbar-page-btn" ng-show="!dashboardMeta.isSnapshot" ng-click="openSearch()">
<i class="icon-gf icon-gf-dashboard"></i>
<span>{{dashboard.title}}</span>
<i class="fa fa-caret-down"></i>
</a>
<div class="top-nav-btn dashnav-dashboards-btn" ng-if="dashboardMeta.isSnapshot">
<a class="pointer" bs-tooltip="titleTooltip" data-placement="bottom" ng-click="openSearch()">
......
public/app/features/dashboard/timepicker/dropdown.html
......@@ -4,7 +4,7 @@
<label class="small">From:</label>
<div class="gf-form-inline">
<div class="gf-form gf-size-max-xxxl">
<div class="gf-form max-width-28">
<input type="text" class="gf-form-input input-large" ng-model="ctrl.timeRaw.from" input-datetime>
</div>
<div class="gf-form">
......@@ -21,7 +21,7 @@
<label class="small">To:</label>
<div class="gf-form-inline">
<div class="gf-form gf-size-max-xxxl">
<div class="gf-form max-width-28">
<input type="text" class="gf-form-input input-large" ng-model="ctrl.timeRaw.to" input-datetime>
</div>
<div class="gf-form">
......@@ -35,15 +35,13 @@
<datepicker ng-model="ctrl.absolute.toJs" class="gf-timepicker-component" show-weeks="false" ng-change="ctrl.absoluteToChanged()"></datepicker>
</div>
<label class="small">Refreshing every:</label>
<div class="gf-form-inline">
<div class="gf-form gf-size-max-xxxl">
<div class="gf-form max-width-28">
<select ng-model="ctrl.refresh.value" class="gf-form-input input-medium" ng-options="f.value as f.text for f in ctrl.refresh.options"></select>
</div>
<div class="gf-form">
<button type="submit" class="btn gf-form-btn btn-primary" ng-click="ctrl.applyCustom();" ng-disabled="!timeForm.$valid">Apply</button>
<button type="submit" class="btn gf-form-btn btn-secondary" ng-click="ctrl.applyCustom();" ng-disabled="!timeForm.$valid">Apply</button>
</div>
</div>
......
public/app/features/datasources/partials/edit.html
......@@ -13,14 +13,14 @@
<form name="editForm">
<div class="gf-form-group">
<div class="gf-form">
<span class="gf-form-label gf-size-sm">Name</span>
<input class="gf-form-input gf-size-max-xxl" type="text" ng-model="current.name" placeholder="My data source name" required>
<span class="gf-form-label width-7">Name</span>
<input class="gf-form-input max-width-21" type="text" ng-model="current.name" placeholder="My data source name" required>
<editor-checkbox text="Default" model="current.isDefault"></editor-checkbox>
</div>
<div class="gf-form">
<span class="gf-form-label gf-size-sm">Type</span>
<select class="gf-form-input gf-size-auto gf-form-select-input" ng-model="current.type" ng-options="k as v.name for (k, v) in types" ng-change="typeChanged()"></select>
<span class="gf-form-label width-7">Type</span>
<select class="gf-form-input gf-size-auto" ng-model="current.type" ng-options="k as v.name for (k, v) in types" ng-change="typeChanged()"></select>
</div>
</div>
......@@ -41,7 +41,7 @@
<div class="gf-form-button-row">
<button type="submit" class="btn btn-success" ng-show="isNew" ng-click="saveChanges()">Add</button>
<button type="submit" class="btn btn-success" ng-show="!isNew" ng-click="saveChanges()">Save</button>
<button type="submit" class="btn btn-primary" ng-show="!isNew" ng-click="saveChanges(true)">
<button type="submit" class="btn btn-secondary" ng-show="!isNew" ng-click="saveChanges(true)">
Test Connection
</button>
<a class="btn btn-link" href="datasources">Cancel</a>
......
public/app/features/datasources/partials/http_settings.html
......@@ -4,19 +4,19 @@
<h3 class="page-heading">Http settings</h3>
<div class="gf-form">
<span class="gf-form-label gf-size-sm">Url</span>
<input class="gf-form-input gf-size-max-xxl" type="text" ng-model='current.url' placeholder="http://my.server.com:8080" ng-pattern="/^(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?$/" required></input>
<span class="gf-form-label width-7">Url</span>
<input class="gf-form-input max-width-21" type="text" ng-model='current.url' placeholder="http://my.server.com:8080" ng-pattern="/^(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?$/" required></input>
</div>
<div class="gf-form">
<span class="gf-form-label gf-size-sm">
<span class="gf-form-label width-7">
Access <tip>Direct = url is used directly from browser, Proxy = Grafana backend will proxy the request</tip>
</span>
<select class="gf-form-input gf-size-auto" ng-model="current.access" ng-options="f for f in ['direct', 'proxy']"></select>
</div>
<div class="gf-form">
<span class="gf-form-label gf-size-sm">
<span class="gf-form-label width-7">
Http Auth
</span>
<editor-checkbox text="Basic Auth" model="current.basicAuth"></editor-checkbox>
......@@ -24,17 +24,17 @@
</div>
<div class="gf-form" ng-if="current.basicAuth">
<span class="gf-form-label gf-size-sm">
<span class="gf-form-label width-7">
User
</span>
<input class="gf-form-input gf-size-max-xxl" type="text" ng-model='current.basicAuthUser' placeholder="user" required></input>
<input class="gf-form-input max-width-21" type="text" ng-model='current.basicAuthUser' placeholder="user" required></input>
</div>
<div class="gf-form" ng-if="current.basicAuth">
<span class="gf-form-label gf-size-sm">
<span class="gf-form-label width-7">
Passord
</span>
<input class="gf-form-input gf-size-max-xxl" type="password" ng-model='current.basicAuthPassword' placeholder="password" required></input>
<input class="gf-form-input max-width-21" type="password" ng-model='current.basicAuthPassword' placeholder="password" required></input>
</div>
</div>
public/app/features/org/partials/invite.html
......@@ -19,15 +19,15 @@
<form name="inviteForm">
<div class="gf-form-inline" ng-repeat="invite in invites">
<div class="gf-form gf-size-max-xxl">
<div class="gf-form max-width-21">
<span class="gf-form-label">Email or Username</span>
<input type="text" ng-model="invite.loginOrEmail" required class="gf-form-input" placeholder="email@test.com">
</div>
<div class="gf-form gf-size-max-xl">
<div class="gf-form max-width-14">
<span class="gf-form-label">Name</span>
<input type="text" ng-model="invite.name" class="gf-form-input" placeholder="name (optional)">
</div>
<div class="gf-form gf-size-max-lg">
<div class="gf-form max-width-10">
<span class="gf-form-label">Role</span>
<select ng-model="invite.role" class="gf-form-input" ng-options="f for f in ['Viewer', 'Editor', 'Read Only Editor', 'Admin']">
</select>
......
public/app/features/org/partials/orgApiKeys.html
<navbar icon="icon-gf icon-gf-users" title="Organization">
<navbar icon="icon-gf icon-gf-users" title="Organization" title-url="org">
</navbar>
<div class="page-container">
......@@ -9,7 +9,7 @@
<h3 class="page-heading">Add new</h3>
<form name="addTokenForm" class="gf-form-group">
<div class="gf-form-inline">
<div class="gf-form gf-size-max-xxl">
<div class="gf-form max-width-21">
<span class="gf-form-label">Add a key</span>
<input type="text" class="gf-form-input" ng-model='token.name' placeholder="Name"></input>
</div>
......
public/app/features/org/partials/orgDetails.html
......@@ -9,8 +9,8 @@
<h3 class="page-heading">General</h3>
<form name="orgForm" class="gf-form-group">
<div class="gf-form-inline">
<div class="gf-form gf-size-max-xxxl">
<span class="gf-form-label gf-size-xs">Name</span>
<div class="gf-form max-width-28">
<span class="gf-form-label width-6">Name</span>
<input class="gf-form-input" type="text" required ng-model="org.name">
</div>
<div class="gf-form">
......@@ -24,34 +24,34 @@
<form name="addressForm" class="gf-form-group">
<div class="gf-form-inline">
<div class="gf-form gf-size-max-xxxl">
<span class="gf-form-label gf-size-sm">Address1</span>
<div class="gf-form max-width-28">
<span class="gf-form-label width-7">Address1</span>
<input class="gf-form-input" type="text" ng-model="address.address1">
</div>
<div class="gf-form gf-size-max-xxxl">
<span class="gf-form-label gf-size-sm">Address2</span>
<div class="gf-form max-width-28">
<span class="gf-form-label width-7">Address2</span>
<input class="gf-form-input" type="text" ng-model="address.address2">
</div>
</div>
<div class="gf-form-inline">
<div class="gf-form gf-size-max-xxxl">
<span class="gf-form-label gf-size-sm">City</span>
<div class="gf-form max-width-28">
<span class="gf-form-label width-7">City</span>
<input class="gf-form-input" type="text" ng-model="address.city">
</div>
<div class="gf-form gf-size-max-xxxl">
<span class="gf-form-label gf-size-sm">Postal code</span>
<div class="gf-form max-width-28">
<span class="gf-form-label width-7">Postal code</span>
<input class="gf-form-input" type="text" ng-model="address.zipCode">
</div>
</div>
<div class="gf-form-inline">
<div class="gf-form gf-size-max-xxxl">
<span class="gf-form-label gf-size-sm">State</span>
<div class="gf-form max-width-28">
<span class="gf-form-label width-7">State</span>
<input class="gf-form-input" type="text" ng-model="address.state">
</div>
<div class="gf-form gf-size-max-xxxl">
<span class="gf-form-label gf-size-sm">Country</span>
<div class="gf-form max-width-28">
<span class="gf-form-label width-7">Country</span>
<input class="gf-form-input" type="text" ng-model="address.country">
</div>
</div>
......
public/app/features/org/partials/orgUsers.html
<navbar icon="icon-gf icon-gf-users" title="Organization Users">
<navbar icon="icon-gf icon-gf-users" title="Organization Users" title-url="org">
</navbar>
<div class="page-container">
......
public/app/features/playlist/partials/playlist.html
......@@ -9,17 +9,17 @@
<div class="gf-form-group">
<div class="gf-form">
<span class="gf-form-label gf-size-sm">Name</span>
<input type="text" required ng-model="ctrl.playlist.name" class="gf-form-input gf-size-max-xxl">
<span class="gf-form-label width-7">Name</span>
<input type="text" required ng-model="ctrl.playlist.name" class="gf-form-input max-width-21">
</div>
<div class="gf-form">
<span class="gf-form-label gf-size-sm">Interval</span>
<input type="text" required ng-model="ctrl.playlist.interval" placeholder="5m" class="gf-form-input gf-size-max-xxl">
<span class="gf-form-label width-7">Interval</span>
<input type="text" required ng-model="ctrl.playlist.interval" placeholder="5m" class="gf-form-input max-width-21">
</div>
</div>
<div class="gf-form-group">
<div class="gf-size-max-xxxl">
<div class="max-width-28">
<h5 class="page-headering">Add dashboards</h5>
<div style="">
<playlist-search class="playlist-search-container" search-started="ctrl.searchStarted(promise)"></playlist-search>
......
public/app/features/profile/partials/password.html
......@@ -8,18 +8,18 @@
<form name="userForm" class="gf-form-group">
<div class="gf-form">
<span class="gf-form-label gf-size-lg">Old Password</span>
<input class="gf-form-input gf-size-max-xxl" type="text" required ng-model="command.oldPassword">
<span class="gf-form-label width-10">Old Password</span>
<input class="gf-form-input max-width-21" type="text" required ng-model="command.oldPassword">
</div>
<div class="gf-form">
<span class="gf-form-label gf-size-lg">New Password</span>
<input class="gf-form-input gf-size-max-xxl" type="text" required ng-minlength="4" ng-model="command.newPassword">
<span class="gf-form-label width-10">New Password</span>
<input class="gf-form-input max-width-21" type="text" required ng-minlength="4" ng-model="command.newPassword">
</div>
<div class="gf-form">
<span class="gf-form-label gf-size-lg">Confirm Password</span>
<input class="gf-form-input gf-size-max-xxl" type="text" required ng-minlength="4" ng-model="command.confirmNew">
<span class="gf-form-label width-10">Confirm Password</span>
<input class="gf-form-input max-width-21" type="text" required ng-minlength="4" ng-model="command.confirmNew">
</div>
<div class="gf-form-button-row">
......
public/app/features/profile/partials/profile.html
......@@ -10,19 +10,19 @@
<h3 class="page-heading">Preferences</h3>
<div class="gf-form">
<span class="gf-form-label gf-size-sm">Name</span>
<input class="gf-form-input gf-size-max-xxl" type="text" required ng-model="user.name" >
<span class="gf-form-label width-7">Name</span>
<input class="gf-form-input max-width-21" type="text" required ng-model="user.name" >
</div>
<div class="gf-form">
<span class="gf-form-label gf-size-sm">Email</span>
<input class="gf-form-input gf-size-max-xxl" type="email" required ng-model="user.email">
<span class="gf-form-label width-7">Email</span>
<input class="gf-form-input max-width-21" type="email" required ng-model="user.email">
</div>
<div class="gf-form">
<span class="gf-form-label gf-size-sm">Username</span>
<input class="gf-form-input gf-size-max-xxl" type="text" required ng-model="user.login">
<span class="gf-form-label width-7">Username</span>
<input class="gf-form-input max-width-21" type="text" required ng-model="user.login">
</div>
<div class="gf-form">
<span class="gf-form-label gf-size-sm">UI Theme</span>
<span class="gf-form-label width-7">UI Theme</span>
<select class="gf-form-input gf-size-auto" ng-model="user.theme" ng-options="f for f in ['dark', 'light']"></select>
</div>
......
public/app/features/styleguide/styleguide.html
......@@ -15,35 +15,34 @@
</a>
</div>
<tabset>
<tab heading="Colors">
<ul>
<li class="style-guide-color-card" ng-repeat="color in ctrl.colors" style="background-color: {{color.value}}">
<strong>${{color.name}}</strong>
<em>{{color.value}}</em>
</li>
</ul>
</tab>
<tab heading="Buttons">
<div class="style-guide-button-list p-a-2">
<button class="btn btn-primary">btn-primary</button>
<button class="btn btn-info">btn-info</button>
<button class="btn btn-inverse">btn-inverse</button>
<button class="btn btn-success">btn-success</button>
<button class="btn btn-warning">btn-warning</button>
<button class="btn btn-danger">btn-danger</button>
</div>
<ul class="nav nav-tabs">
<li ng-repeat="page in ctrl.pages" ng-class="{active: ctrl.page[page]}" class="tab">
<a href="styleguide/{{page}}">{{page}}</a>
</li>
</ul>
<div class="tab-pane" ng-if="ctrl.page.colors">
<ul>
<li class="style-guide-color-card" ng-repeat="color in ctrl.colors" style="background-color: {{color.value}}">
<strong>${{color.name}}</strong>
<em>{{color.value}}</em>
</li>
</ul>
</div>
<div class="style-guide-button-list p-a-2">
<button class="btn btn-primary btn-small">btn-small</button>
<button class="btn btn-success btn-large">btn-large</button>
<div class="tab-pane" ng-if="ctrl.page.buttons">
<div ng-repeat="variant in ctrl.buttonVariants" class="row">
<div ng-repeat="btnSize in ctrl.buttonSizes" class="style-guide-button-list p-a-2 col-md-4">
<button ng-repeat="buttonName in ctrl.buttonNames" class="btn btn{{variant}}{{buttonName}} {{btnSize}}">
btn{{variant}}{{buttonName}}
</button>
</div>
</tab>
<tab heading="Forms">
</tab>
</tabset>
</div>
</div>
<div class="tab-pane" ng-if="ctrl.page.forms">
forms
</div>
</div>
public/app/features/styleguide/styleguide.ts
......@@ -6,12 +6,30 @@ import _ from 'lodash';
class StyleGuideCtrl {
colors: any = [];
theme: string;
buttonNames = ['primary', 'secondary', 'inverse', 'success', 'warning', 'danger'];
buttonSizes = ['btn-small', '', 'btn-large'];
buttonVariants = ['-', '-outline-'];
page: any;
pages = ['colors', 'buttons', 'forms', 'dashboard', 'query-editors'];
/** @ngInject **/
constructor($http) {
constructor(private $http, $routeParams) {
this.theme = config.bootData.user.lightTheme ? 'light': 'dark';
this.page = {};
$http.get('public/sass/styleguide.json').then(res => {
if ($routeParams.page) {
this.page[$routeParams.page] = 1;
} else {
this.page.colors = true;
}
if (this.page.colors) {
this.loadColors();
}
}
loadColors() {
this.$http.get('public/sass/styleguide.json').then(res => {
this.colors = _.map(res.data[this.theme], (value, key) => {
return {name: key, value: value};
});
......@@ -20,7 +38,7 @@ class StyleGuideCtrl {
switchTheme() {
var other = this.theme === 'dark' ? 'light' : 'dark';
window.location.href = config.appSubUrl + '/styleguide?theme=' + other;
window.location.href = window.location.href + '?theme=' + other;
}
}
......
public/app/partials/dashboard.html
......@@ -100,7 +100,7 @@
<div ng-show='dashboardMeta.canEdit' class="row-fluid add-row-panel-hint" ng-hide="dashboard.meta.fullscreen">
<div class="span12" style="text-align:right;">
<span style="margin-right: 10px;" ng-click="addRowDefault()" class="pointer btn btn-info btn-small">
<span style="margin-right: 10px;" ng-click="addRowDefault()" class="pointer btn btn-secondary btn-small">
<span><i class="fa fa-plus"></i> ADD ROW</span>
</span>
</div>
......
public/app/partials/login.html
......@@ -19,17 +19,17 @@
<form name="loginForm" class="login-form gf-form-group">
<div class="gf-form" ng-if="loginMode">
<span class="gf-form-label gf-size-sm">User</span>
<input type="text" name="username" class="gf-form-input gf-size-max-xl" required ng-model='formModel.user' placeholder={{loginHint}}>
<span class="gf-form-label width-7">User</span>
<input type="text" name="username" class="gf-form-input max-width-14" required ng-model='formModel.user' placeholder={{loginHint}}>
</div>
<div class="gf-form" ng-if="loginMode">
<span class="gf-form-label gf-size-sm">Password</span>
<input type="password" name="password" class="gf-form-input gf-size-max-xl" required ng-model="formModel.password" id="inputPassword" placeholder="password">
<span class="gf-form-label width-7">Password</span>
<input type="password" name="password" class="gf-form-input max-width-14" required ng-model="formModel.password" id="inputPassword" placeholder="password">
</div>
<div class="gf-form" ng-if="!loginMode">
<span class="gf-form-label gf-size-sm">Email</span>
<input type="email" class="gf-form-input gf-size-max-xl" required ng-model='formModel.email' placeholder="email">
<span class="gf-form-label width-7">Email</span>
<input type="email" class="gf-form-input max-width-14" required ng-model='formModel.email' placeholder="email">
</div>
<div class="gf-form-button-row">
......
public/app/partials/panelgeneral.html
<div class="gf-form-group">
<div class="gf-form-inline">
<div class="gf-form gf-size-max-xxl">
<span class="gf-form-label gf-size-sm">Title</span>
<div class="gf-form max-width-21">
<span class="gf-form-label width-8">Title</span>
<input type="text" class="gf-form-input" ng-model='ctrl.panel.title'></input>
</div>
<div class="gf-form">
<span class="gf-form-label gf-size-xs">Span</span>
<span class="gf-form-label width-6">Span</span>
<select class="gf-form-input gf-size-auto" ng-model="ctrl.panel.span" ng-options="f for f in [0,1,2,3,4,5,6,7,8,9,10,11,12]"></select>
</div>
<div class="gf-form gf-size-max-xxl">
<span class="gf-form-label gf-size-sm">Height</span>
<input type="text" class="gf-form-input gf-size-max-xs" ng-model='ctrl.panel.height' placeholder="100px"></input>
<div class="gf-form max-width-21">
<span class="gf-form-label width-8">Height</span>
<input type="text" class="gf-form-input max-width-6" ng-model='ctrl.panel.height' placeholder="100px"></input>
<editor-checkbox text="Transparent" model="ctrl.panel.transparent"></editor-checkbox>
</div>
</div>
<div class="gf-form-inline">
<div class="gf-form gf-size-max-xxl">
<span class="gf-form-label gf-size-sm">Repeat Panel</span>
<div class="gf-form max-width-21">
<span class="gf-form-label width-8">Repeat Panel</span>
<select class="gf-form-input" ng-model="ctrl.panel.repeat" ng-options="f.name as f.name for f in ctrl.dashboard.templating.list">
<option value=""></option>
</select>
</div>
<div class="gf-form">
<span class="gf-form-label gf-size-xs">Min span</span>
<span class="gf-form-label width-6">Min span</span>
<select class="gf-form-input" ng-model="ctrl.panel.minSpan" ng-options="f for f in [1,2,3,4,5,6,7,8,9,10,11,12]">
<option value=""></option>
</select>
......
public/app/partials/signup_invited.html
......@@ -21,20 +21,20 @@
<form name="inviteForm" class="login-form gf-form-group">
<div class="gf-form">
<span class="gf-form-label gf-size-sm">Email</span>
<input type="email" name="email" class="gf-form-input gf-size-max-xxl" required ng-model='formModel.email' placeholder="Email">
<span class="gf-form-label width-7">Email</span>
<input type="email" name="email" class="gf-form-input max-width-21" required ng-model='formModel.email' placeholder="Email">
</div>
<div class="gf-form">
<span class="gf-form-label gf-size-sm">Name</span>
<input type="text" name="name" class="gf-form-input gf-size-max-xxl" ng-model='formModel.name' placeholder="Name (optional)">
<span class="gf-form-label width-7">Name</span>
<input type="text" name="name" class="gf-form-input max-width-21" ng-model='formModel.name' placeholder="Name (optional)">
</div>
<div class="gf-form">
<span class="gf-form-label gf-size-sm">Username</span>
<input type="text" name="username" class="gf-form-input gf-size-max-xxl" required ng-model='formModel.username' placeholder="Username">
<span class="gf-form-label width-7">Username</span>
<input type="text" name="username" class="gf-form-input max-width-21" required ng-model='formModel.username' placeholder="Username">
</div>
<div class="gf-form">
<span class="gf-form-label gf-size-sm">Password</span>
<input type="password" name="password" class="gf-form-input gf-size-max-xxl" required ng-model="formModel.password" id="inputPassword" placeholder="password">
<span class="gf-form-label width-7">Password</span>
<input type="password" name="password" class="gf-form-input max-width-21" required ng-model="formModel.password" id="inputPassword" placeholder="password">
</div>
<div style="margin-left: 7.5rem; width: 254px;">
......
public/app/partials/signup_step2.html
......@@ -31,28 +31,28 @@
<form name="signUpForm" class="login-form gf-form-group">
<div class="gf-form" ng-if="verifyEmailEnabled">
<span class="gf-form-label gf-size-md">
<span class="gf-form-label width-9">
Email code<tip>Email verification code (sent to your email)</tip>
</span>
<input type="text" class="gf-form-input gf-size-max-xl" ng-model="formModel.code" required></input>
<input type="text" class="gf-form-input max-width-14" ng-model="formModel.code" required></input>
</div>
<div class="gf-form" ng-if="!autoAssignOrg">
<span class="gf-form-label gf-size-md">Org. name</span>
<input type="text" name="orgName" class="gf-form-input gf-size-max-xl" ng-model='formModel.orgName' placeholder="Name your organization">
<span class="gf-form-label width-9">Org. name</span>
<input type="text" name="orgName" class="gf-form-input max-width-14" ng-model='formModel.orgName' placeholder="Name your organization">
</div>
<div class="gf-form">
<span class="gf-form-label gf-size-md">Your name</span>
<input type="text" name="name" class="gf-form-input gf-size-max-xl" ng-model='formModel.name' placeholder="(optional)">
<span class="gf-form-label width-9">Your name</span>
<input type="text" name="name" class="gf-form-input max-width-14" ng-model='formModel.name' placeholder="(optional)">
</div>
<div class="gf-form">
<span class="gf-form-label gf-size-md">Username</span>
<input type="text" class="gf-form-input gf-size-max-xl" required ng-model='formModel.username' placeholder="Username" autocomplete="off">
<span class="gf-form-label width-9">Username</span>
<input type="text" class="gf-form-input max-width-14" required ng-model='formModel.username' placeholder="Username" autocomplete="off">
</div>
<div class="gf-form">
<span class="gf-form-label gf-size-md">Password</span>
<input type="password" class="gf-form-input gf-size-max-xl" required ng-model="formModel.password" id="inputPassword" placeholder="password" autocomplete="off">
<span class="gf-form-label width-9">Password</span>
<input type="password" class="gf-form-input max-width-14" required ng-model="formModel.password" id="inputPassword" placeholder="password" autocomplete="off">
</div>
<div style="margin-left: 7.5rem; width: 254px;">
......
public/app/plugins/datasource/elasticsearch/partials/config.html
......@@ -5,24 +5,24 @@
<div class="gf-form-group">
<div class="gf-form-inline">
<div class="gf-form gf-size-max-xxxl">
<span class="gf-form-label gf-size-md">Index name</span>
<div class="gf-form max-width-28">
<span class="gf-form-label width-9">Index name</span>
<input class="gf-form-input" type="text" ng-model='ctrl.current.database' placeholder="" required></input>
</div>
<div class="gf-form gf-size-xl">
<span class="gf-form-label gf-size-md">Pattern</span>
<div class="gf-form width-14">
<span class="gf-form-label width-9">Pattern</span>
<select class="gf-form-input gf-size-auto" ng-model="ctrl.current.jsonData.interval" ng-options="f.value as f.name for f in ctrl.indexPatternTypes" ng-change="ctrl.indexPatternTypeChanged()" ></select>
</div>
</div>
<div class="gf-form gf-size-max-xxxl">
<span class="gf-form-label gf-size-md">Time field name</span>
<div class="gf-form max-width-28">
<span class="gf-form-label width-9">Time field name</span>
<input class="gf-form-input" type="text" ng-model='ctrl.current.jsonData.timeField' placeholder="" required ng-init=""></input>
</div>
<div class="gf-form">
<span class="gf-form-label gf-size-md">Version</span>
<span class="gf-form-label width-9">Version</span>
<select class="gf-form-input gf-size-auto" ng-model="ctrl.current.jsonData.esVersion" ng-options="f.value as f.name for f in ctrl.esVersions"></select>
</div>
......@@ -32,6 +32,6 @@
<div class="gf-form-group">
<div class="gf-form">
<span class="gf-form-label">Group by time interval</span>
<input class="gf-form-input gf-size-max-md" type="text" ng-model="ctrl.current.jsonData.timeInterval" spellcheck='false' placeholder="example: >10s">
<input class="gf-form-input max-width-9" type="text" ng-model="ctrl.current.jsonData.timeInterval" spellcheck='false' placeholder="example: >10s">
</div>
</div>
public/app/plugins/datasource/influxdb/partials/config.html
<datasource-http-settings current="ctrl.current">
</datasource-http-settings>
<h4>InfluxDB Details</h4>
<h3 class="page-heading">InfluxDB Details</h3>
<div class="tight-form">
<ul class="tight-form-list">
<li class="tight-form-item" style="width: 80px">
Database
</li>
<li>
<input type="text" class="tight-form-input input-large" ng-model='ctrl.current.database' placeholder="" required></input>
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="tight-form last">
<ul class="tight-form-list">
<li class="tight-form-item" style="width: 80px">
User
</li>
<li>
<input type="text" class="tight-form-input input-large" ng-model='ctrl.current.user' placeholder="" required></input>
</li>
<li class="tight-form-item">
Password
</li>
<li>
<input type="password" class="tight-form-input input-large" ng-model='ctrl.current.password' placeholder="" required></input>
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="gf-form-group">
<div class="gf-form-inline">
<div class="gf-form max-width-30">
<span class="gf-form-label width-7">Database</span>
<input type="text" class="gf-form-input" ng-model='ctrl.current.database' placeholder="" required></input>
</div>
</div>
<div class="gf-form-inline">
<div class="gf-form max-width-15">
<span class="gf-form-label width-7">User</span>
<input type="text" class="gf-form-input" ng-model='ctrl.current.user' placeholder="" required></input>
</div>
<div class="gf-form max-width-15">
<span class="gf-form-label width-7">Password</span>
<input type="password" class="gf-form-input" ng-model='ctrl.current.password' placeholder="" required></input>
</div>
</div>
</div>
<br>
<h4>Default query settings</h4>
<div class="tight-form last">
<ul class="tight-form-list">
<li class="tight-form-item" style="width: 200px">
Group by time interval
</li>
<li>
<input type="text" class="input-medium tight-form-input input-xlarge" ng-model="ctrl.current.jsonData.timeInterval"
spellcheck='false' placeholder="example: >10s">
</li>
<li class="tight-form-item">
<i class="fa fa-question-circle" bs-tooltip="'Set a low limit by having a greater sign: example: >10s'" data-placement="right"></i>
</li>
</ul>
<div class="clearfix"></div>
<div class="gf-form-group">
<div class="gf-form max-width-21">
<span class="gf-form-label">Default group by time</span>
<input type="text" class="gf-form-input width-6" ng-model="ctrl.current.jsonData.timeInterval"
spellcheck='false' placeholder="example: >10s"></input>
<i class="fa fa-question-circle" bs-tooltip="'Set a low limit by having a greater sign: example: >10s'" data-placement="right"></i>
</div>
</div>
public/sass/_grafana.scss
......@@ -22,6 +22,7 @@
@import "utils/validation";
@import "utils/angular";
@import "utils/spacings";
@import "utils/widths";
// LAYOUTS
@import "layout/page";
......
public/sass/_old_responsive.scss
......@@ -17,7 +17,7 @@
body {
padding: 0;
}
.dashnav-dashboards-btn a {
.page-dashboard .navbar-page-btn {
max-width: 200px;
}
.gf-timepicker-nav-btn {
......@@ -34,7 +34,7 @@
// form styles
@include media-breakpoint-up(md) {
.dashnav-dashboards-btn a {
.page-dashboard .navbar-page-btn {
max-width: 180px;
}
.gf-timepicker-nav-btn {
......@@ -51,7 +51,7 @@
}
@include media-breakpoint-up(lg) {
.dashnav-dashboards-btn a {
.page-dashboard .navbar-page-btn {
max-width: 290px;
}
.gf-timepicker-nav-btn {
......
public/sass/_variables.dark.scss
......@@ -8,17 +8,17 @@ $black: #000;
// -------------------------
$black: #000;
$dark-1: #141414; // (body)
$dark-2: #1f1d1d; // ($gray-darker)
$dark-3: #262626; // ($gray-dark)
$dark-1: #141414;
$dark-2: #1f1d1d;
$dark-3: #262626;
$dark-4: #333333;
$dark-5: #444444;
$gray-1: #555555;
$gray-2: #6e7580;
$gray-2: #7B7B7B;
$gray-3: #b3b3b3;
$gray-4: #cfd4d9;
$gray-5: #e8edf0;
$gray-6: #f7f9fa;
$gray-4: #D8D9DA;
$gray-5: #ECECEC;
$gray-6: #f4f5f8;
$gray-7: #fbfbfb;
$white: #fff;
......@@ -50,7 +50,6 @@ $critical: #ed2e18;
// -------------------------
$body-bg: rgb(20,20,20);
$page-bg: $dark-2;
$pageImageUrl: '../img/angle_gradient_rev.png';
$body-color: $gray-4;
$text-color: $gray-4;
......@@ -75,7 +74,6 @@ $hr-border-color: rgba(0,0,0,.1) !default;
$component-active-color: #fff !default;
$component-active-bg: $brand-primary !default;
// Panel
// -------------------------
$panel-bg: $dark-2;
......@@ -94,8 +92,8 @@ $modal-background: $black;
$code-tag-bg: #444;
// Lists
$grafanaListBackground: $dark-3;
$grafanaListAccent: lighten($dark-2, 2%);
$grafanaListBackground: $dark-3;
$grafanaListAccent: lighten($dark-2, 2%);
$grafanaListBorderTop: $dark-3;
$grafanaListBorderBottom: $black;
$grafanaListHighlight: #333;
......@@ -120,22 +118,19 @@ $btn-primary-bg: $brand-primary;
$btn-primary-bg-hl: lighten($brand-primary, 8%);
$btn-secondary-bg: $blue-dark;
$btn-secondary-bg-hl: lighten($blue-dark, 8%);
$btn-info-bg: lighten($purple, 3%);
$btn-info-bg-hl: darken($purple, 3%);
$btn-secondary-bg-hl: lighten($blue-dark, 3%);
$btn-success-bg-hl: darken($green, 3%);
$btn-success-bg-hl: darken($green, 3%);
$btn-success-bg: lighten($green, 3%);
$btn-warning-bg: $brand-warning;
$btn-warning-bg-hl: lighten($brand-warning, 8%);
$btn-warning-bg-hl: lighten($brand-warning, 8%);
$btn-danger-bg: lighten($red, 3%);
$btn-danger-bg-hl: darken($red, 3%);
$btn-inverse-bg: $dark-3;
$btn-inverse-bg-hl: lighten($dark-3, 1%);
$btn-inverse-bg-hl: lighten($dark-3, 1%);
$btn-inverse-text-color: $link-color;
$btn-link-color: $gray-3;
......@@ -231,7 +226,7 @@ $successText: #468847;
$successBackground: $btn-success-bg;
$infoText: $blue-dark;
$infoBackground: $btn-info-bg;
$infoBackground: $blue-dark;
// Tooltips and popovers
// -------------------------
......
public/sass/_variables.light.scss
......@@ -13,9 +13,9 @@ $black: #000;
// -------------------------
$black: #000;
$dark-1: #141414; // (body)
$dark-2: #1f1d1d; // ($gray-darker)
$dark-3: #262626; // ($gray-dark)
$dark-1: #141414;
$dark-2: #1f1d1d;
$dark-3: #262626;
$dark-4: #333333;
$dark-5: #444444;
$gray-1: #555555;
......@@ -31,7 +31,7 @@ $white: #fff;
// Accent colors
// -------------------------
$blue: #2AB2E4;
$blue-dark: #75CAEB;
$blue-dark: #3CAAD6;
$green: #28B62C;
$red: #FF4136;
$yellow: #FF851B;
......@@ -54,9 +54,8 @@ $critical: #EC2128;
// Scaffolding
// -------------------------
$body-bg: $white;
$page-bg: $white;
$pageImageUrl: '../img/angle_gradient_light_rev.png';
$body-bg: $white;
$page-bg: $white;
$body-color: $gray-1;
$text-color: $gray-1;
......@@ -81,7 +80,6 @@ $hr-border-color: $dark-3 !default;
$component-active-color: $white !default;
$component-active-bg: $brand-primary !default;
// Panel
// -------------------------
......@@ -128,10 +126,7 @@ $btn-primary-bg: $brand-primary;
$btn-primary-bg-hl: lighten($brand-primary, 8%);
$btn-secondary-bg: $blue-dark;
$btn-secondary-bg-hl: lighten($blue-dark, 8%);
$btn-info-bg: lighten($purple, 3%);
$btn-info-bg-hl: darken($purple, 3%);
$btn-secondary-bg-hl: lighten($blue-dark, 4%);
$btn-success-bg: lighten($green, 3%);
$btn-success-bg-hl: darken($green, 3%);
......@@ -255,8 +250,8 @@ $successText: lighten($green, 10%);
$successBackground: $green;
$successBorder: transparent;
$infoText: lighten($purple,10%);
$infoBackground: $purple;
$infoText: $blue;
$infoBackground: $blue-dark;
$infoBorder: transparent;
......@@ -278,6 +273,4 @@ $popoverArrowOuterWidth: $popoverArrowWidth + 1;
$popoverArrowOuterColor: rgba(0,0,0,.25);
// images
$checkboxImageUrl: '../img/checkbox_white.png';
$checkboxImageUrl: '../img/checkbox_white.png';
\ No newline at end of file
public/sass/_variables.scss
......@@ -77,17 +77,6 @@ $grid-gutter-width: 30px !default;
$enable-flex: false;
$form-sizes: (
xs: 5.7rem,
sm: 7rem,
md: 8.5rem,
lg: 10rem,
xl: 14rem,
xxl: 21rem,
xxxl: 28rem
) !default;
// Typography
// -------------------------
......@@ -189,6 +178,7 @@ $input-height-lg: (($font-size-lg * $line-height-lg) + ($input-pa
$input-height-sm: (($font-size-sm * $line-height-sm) + ($input-padding-y-sm * 2)) !default;
$form-group-margin-bottom: $spacer-y !default;
$gf-form-margin: 0.2rem;
$cursor-disabled: not-allowed !default;
......@@ -225,4 +215,4 @@ $btn-padding-y-lg: .75rem !default;
$btn-border-radius: 3px;
// sidemenu
$side-menu-width: 15rem;
$side-menu-width: 14rem;
public/sass/components/_buttons.scss
......@@ -65,7 +65,7 @@
}
.btn-link {
color: $btn-link-color;
color: $btn-link-color;
}
// Set the backgrounds
......@@ -89,8 +89,8 @@
@include buttonBackground($btn-success-bg, $btn-success-bg-hl);
}
// Info appears as a neutral blue
.btn-info {
@include buttonBackground($btn-info-bg, $btn-info-bg-hl);
.btn-secondary {
@include buttonBackground($btn-secondary-bg, $btn-secondary-bg-hl);
}
// Inverse appears as dark gray
.btn-inverse {
......@@ -103,10 +103,10 @@
@include button-outline-variant($btn-primary-bg);
}
.btn-outline-secondary {
@include button-outline-variant($btn-inverse-bg);
@include button-outline-variant($btn-secondary-bg);
}
.btn-outline-info {
@include button-outline-variant($btn-info-bg);
.btn-outline-inverse {
@include button-outline-variant($btn-inverse-bg);
}
.btn-outline-success {
@include button-outline-variant($btn-success-bg);
......
public/sass/components/_dashboard.scss
......@@ -58,7 +58,7 @@
.row-open {
margin-top: 5px;
left: -28px;
left: -30px;
position: absolute;
z-index: 100;
transition: .10s left;
......
public/sass/components/_gf-form.scss
......@@ -59,18 +59,6 @@ $gf-form-label-margin: 0.2rem;
flex-shrink: 0;
}
@each $size, $value in $form-sizes {
.gf-size-#{$size} { width: $value; }
.gf-size-max-#{$size} {
flex-grow: 1;
max-width: $value;
}
}
.gf-size-max { width: 100%; }
.gf-size-auto { width: auto; }
.gf-form-input {
display: block;
width: 100%;
......
public/sass/components/_navbar.scss
......@@ -56,52 +56,30 @@
background-color: $navbarLinkBackgroundActive;
}
.fa.top-nav-breadcrumb-icon {
margin: 18px 0 6px 5px;
float: left;
font-size: 120%;
color: $text-color;
}
.top-nav-btn {
.navbar-brand-btn {
display: block;
position: relative;
float: left;
margin: 0;
font-size: 1.4em;
border-right: 1px solid $tight-form-border;
background-color: $navbarButtonBackground;
padding: 0.6rem 1.0rem 0.5rem 1rem;
.fa-caret-down {
font-size: 55%;
position: absolute;
right: 8px;
top: 23px;
margin-right: 2px;
font-size: 70%;
}
a {
color: darken($link-color, 5%);
background-color: $navbarButtonBackground;
display: inline-block;
&:hover {
background: $navbarButtonBackgroundHighlight;
color: $link-color;
// border-bottom: 1px solid $blue;
}
&:hover {
background: $navbarButtonBackgroundHighlight;
}
}
.top-nav-menu-btn {
a {
padding: 7px 20px 6px 13px;
}
img {
width: 30px;
position: relative;
top: -2px;
}
.top-nav-logo-background {
.navbar-brand-btn-background {
display: inline-block;
border: 1px solid $body-bg;
padding: 4px;
......@@ -110,6 +88,7 @@
width: 40px;
height: 40px;
}
.icon-gf-grafana_wordmark {
font-size: 21px;
position: relative;
......@@ -119,13 +98,28 @@
}
}
.dashnav-dashboards-btn {
a {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
display: block;
padding: 11px 17px 12px 13px;
.navbar-page-btn {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
float: left;
display: block;
margin: 0;
font-size: 1.4em;
border-right: 1px solid $tight-form-border;
color: darken($link-color, 5%);
background-color: $navbarButtonBackground;
font-size: $font-size-lg;
padding: 1rem 0.8rem;
&:hover {
background: $navbarButtonBackgroundHighlight;
color: $link-color;
}
.fa-caret-down {
font-size: 60%;
padding-left: 0.2rem;
}
.fa-th-large {
......@@ -141,32 +135,3 @@
}
}
.dashboard-title {
padding: 0 0.4rem 0 0.5rem;
font-size: $font-size-lg;
}
.top-nav-icon {
margin: 5px 0px 0 11px;
line-height: 41px;
float: left;
}
.top-nav-section {
display: block;
float: left;
padding: 19px 9px 8px 0;
font-weight: bold;
i {
padding-left: 8px;
}
}
.top-nav-title {
display: block;
float: left;
font-size: 17px;
padding: 18px 10px 10px 13px;
color: $link-color;
}
public/sass/components/_sidemenu.scss
......@@ -30,16 +30,15 @@
min-height: calc(100% - 54px);
}
.dashboard-container {
padding-left: $side-menu-width;
padding-left: $side-menu-width + 0.2rem;
}
.page-container {
margin-left: $side-menu-width;
}
.top-nav-menu-btn {
a {
background-color: $page-bg;
width: $side-menu-width;
}
.navbar-brand-btn {
background-color: $page-bg;
width: $side-menu-width;
.icon-gf-grafana_wordmark {
display: inline-block;
}
......@@ -47,9 +46,6 @@
display: none;
}
}
.sidemenu-org {
box-shadow: none;
}
.search-container {
left: auto;
}
......@@ -195,7 +191,7 @@
.sidemenu .fa-caret-right {
position: absolute;
top: 38%;
right: 25px;
right: 6px;
font-size: 14px;
color: $link-color;
}
......
public/sass/layout/_page.scss
......@@ -18,9 +18,9 @@
}
}
$color-page-hero-bg: #2e2e2e;
.page-container {
background-color: $page-bg;
background-image: url($pageImageUrl); /* this is an experiment */
background-position: left;
background-size: 60%;
background-repeat: no-repeat;
......@@ -30,6 +30,7 @@
margin-left: 0;
min-height: calc(100% - 54px);
padding-bottom: $spacer * 5;
background-image: linear-gradient(60deg, rgba(0, 0, 0, 0) 0%, lighten($page-bg, 5%) 98%);
}
.page-header {
......
public/sass/pages/_login.scss
.login-container {
background-image: url($pageImageUrl); /* this is an experiment */
background-position: left;
background-size: 60%;
background-repeat: no-repeat;
......
public/sass/pages/_styleguide.scss
......@@ -16,6 +16,7 @@
.style-guide-button-list {
padding: $spacer;
button {
display: block;
margin: 0 $spacer $spacer 0;
}
}
......
public/sass/utils/_spacings.scss
......@@ -28,6 +28,7 @@
}
}
// Positioning
.pos-f-t {
......
public/sass/utils/_widths.scss 0 → 100644
.max-width { width: 100%; }
.width-auto { width: auto; }
// widths
@for $i from 1 through 30 {
.width-#{$i} {
width: ($spacer * $i) - $gf-form-margin;
}
}
@for $i from 1 through 30 {
.max-width-#{$i} {
max-width: ($spacer * $i) - $gf-form-margin;
flex-grow: 1;
}
}
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