IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-01-04 13:17:16 -06:00
Code Issues Packages Projects Releases Wiki Activity

style changes to forms, icons updates and new buttons

Browse Source
This commit is contained in:
Trent White 2016-02-10 18:14:26 -05:00
parent 50920b1423
commit 0fa0b3b256
18 changed files with 116 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/app/core/components/sidemenu/sidemenu.html
View File

@ -28,7 +28,7 @@
<li class="sidemenu-system-section" ng-if="ctrl.systemSection">
<div class="sidemenu-system-section-inner">
<i class="fa fa-fw fa-cubes"></i>
<i class="icon-gf icon-gf-apps"></i>
<div class="sidemenu-section-text-wrapper">
<div class="sidemenu-section-heading">Grafana Admin</div>
<div class="sidemenu-section-tagline">v {{ctrl.grafanaVersion}}</div>

2
public/app/features/apps/partials/edit.html
View File

@ -1,4 +1,4 @@
<navbar title="Apps" title-url="apps" icon="fa fa-fw fa-cubes" subnav="true">
<navbar title="Apps" title-url="apps" icon="icon-gf icon-gf-apps" subnav="true">
<ul class="nav">
<li class="active" ><a href="apps/edit/{{ctrl.current.type}}">{{ctrl.appModel.name}}</a></li>
</ul>

2
public/app/features/apps/partials/list.html
View File

@ -1,4 +1,4 @@
<navbar title="Apps" icon="fa fa-fw fa-cubes">
<navbar title="Apps" icon="icon-gf icon-gf-apps">
</navbar>
<div class="page-container">

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

@ -2,7 +2,7 @@
<div class="top-nav-btn dashnav-dashboards-btn" ng-if="!dashboardMeta.isSnapshot">
<a class="pointer" ng-click="openSearch()">
<i class="fa fa-th-large"></i>
<i class="icon-gf icon-gf-dashboard"></i>
<span class="dashboard-title">{{dashboard.title}}</span>
<i class="fa fa-caret-down"></i>
</a>

32
public/app/features/datasources/partials/edit.html
View File

@ -1,14 +1,22 @@
<navbar title="Data sources" title-url="datasources" icon="fa fa-fw fa-database" subnav="true">
<ul class="nav">
<navbar>
<div class="top-nav-btn dashnav-dashboards-btn" >
<a class="pointer" ng-click="openSearch()">
<i class="icon-gf icon-gf-datasources"></i>
<span class="dashboard-title">Data Sources</span>
<i class="fa fa-caret-down"></i>
</a>
</div>
<!-- <ul class="nav">
<li ng-class="{active: isNew}" ng-show="isNew"><a href="datasources/new">Add new</a></li>
<li class="active" ng-show="!isNew"><a href="datasources/edit/{{current.name}}">{{current.name}}</a></li>
</ul>
</ul> -->
</navbar>
<div class="page-container">
<div class="page">
<h2 ng-show="isNew">Add data source</h2>
<h2 ng-show="!isNew">Edit data source</h2>
<p class="small" ng-show="isNew">This text will only appear on Add Data Source</p>
<form name="editForm">
<div class="norm-form">
@ -18,13 +26,13 @@
</li>
<li>
<li>
<input type="text" class="input-xlarge norm-form-input" ng-model="current.name" placeholder="my data source name" required>
<input type="text" class="input-xlarge norm-form-input" ng-model="current.name" placeholder="My data source name" required>
</li>
</li>
<li class="norm-form-item">
Default&nbsp;
<li class="norm-form-item trans">
<input class="cr1" id="current.isDefault" type="checkbox" ng-model="current.isDefault" ng-checked="current.isDefault">
<label for="current.isDefault" class="cr1"></label>
Default
</li>
</ul>
<div class="clearfix"></div>
@ -35,7 +43,7 @@
Type
</li>
<li>
<select class="input-xlarge norm-form-input" ng-model="current.type" ng-options="k as v.name for (k, v) in types" ng-change="typeChanged()"></select>
<select class="input-xlarge norm-form-input norm-form-auto" ng-model="current.type" ng-options="k as v.name for (k, v) in types" ng-change="typeChanged()"></select>
</li>
</ul>
<div class="clearfix"></div>
@ -55,13 +63,13 @@
</div>
</div>
<div class="pull-right" style="margin-top: 35px">
<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-inverse" ng-show="!isNew" ng-click="saveChanges(true)">
<div class="" style="margin-top: 35px">
<button type="submit" class="btn btn-large btn-success" ng-show="isNew" ng-click="saveChanges()">Add</button>
<button type="submit" class="btn btn-large btn-success" ng-show="!isNew" ng-click="saveChanges()">Save</button>
<button type="submit" class="btn btn-large btn-inverse" ng-show="!isNew" ng-click="saveChanges(true)">
Test Connection
</button>
<a class="btn btn-inverse" href="datasources">Cancel</a>
<a class="btnText" href="datasources">Cancel</a>
</div>
<br>
</form>

29
public/app/features/datasources/partials/http_settings.html
View File

@ -9,7 +9,12 @@
<li>
<input type="text" class="norm-form-input input-xlarge" 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>
</li>
<li class="norm-form-item">
</ul>
<div class="clearfix"></div>
</div>
<div class="norm-form">
<ul class="norm-form-list">
<li class="norm-form-item" style="width: 80px">
Access <tip>Direct = url is used directly from browser, Proxy = Grafana backend will proxy the request</tip>
</li>
<li>
@ -23,31 +28,33 @@
<li class="norm-form-item" style="width: 80px">
Http Auth
</li>
<li class="norm-form-item">
<li class="norm-form-item trans">
<editor-checkbox text="Basic Auth" model="current.basicAuth"></editor-checkbox>
</li>
<li class="norm-form-item">
<editor-checkbox text="With Credentials" model="current.withCredentials"></editor-checkbox>
<li class="norm-form-item trans">
<editor-checkbox text="With Credentials" model="current.withCredentials"></editor-checkbox><tip>Tip for with credentials</tip>
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="norm-form" ng-if="current.basicAuth">
<ul class="norm-form-list">
<li class="norm-form-item" style="width: 80px">
<i class="fa fa-remove invisible"></i>
</li>
<li class="norm-form-item">
<li class="norm-form-item small" style="width: 80px">
User
</li>
<li ng-if="current.basicAuth">
<input type="text" class="norm-form-input input-medium" style="width: 136px" ng-model='current.basicAuthUser' placeholder="user" required></input>
<input type="text" class="input-xlarge norm-form-input" ng-model='current.basicAuthUser' placeholder="user" required></input>
</li>
<li class="norm-form-item" style="width: 66px" ng-if="current.basicAuth">
</ul>
<div class="clearfix"></div>
</div>
<div class="norm-form" ng-if="current.basicAuth">
<ul class="norm-form-list">
<li class="norm-form-item small" style="width: 80px" ng-if="current.basicAuth">
Password
</li>
<li ng-if="current.basicAuth">
<input type="password" class="norm-form-input input-medium" ng-model='current.basicAuthPassword' placeholder="password" required></input>
<input type="password" class="input-xlarge norm-form-input" ng-model='current.basicAuthPassword' placeholder="password" required></input>
</li>
</ul>
<div class="clearfix"></div>

16
public/app/features/datasources/partials/list.html
View File

@ -1,15 +1,23 @@
<navbar title="Data sources" icon="fa fa-fw fa-database">
<navbar>
<div class="top-nav-btn dashnav-dashboards-btn" >
<a class="pointer" ng-click="openSearch()">
<i class="icon-gf icon-gf-datasources"></i>
<span class="dashboard-title">Data Sources</span>
<i class="fa fa-caret-down"></i>
</a>
</div>
</navbar>
<div class="page-container">
<div class="page-wide">
<a class="btn btn-inverse pull-right" href="datasources/new">
<div class="page-header-align">
<h1>Data sources</h1>
<a class="btn btn-success" href="datasources/new">
<i class="fa fa-plus"></i>
Add data source
</a>
<h1>Data sources</h1>
</div>
<br>
<div ng-if="datasources.length === 0">

9
public/less/bootswatch.dark.less
View File

@ -355,11 +355,11 @@ div.subnav {
// BUTTONS
// -----------------------------------------------------
.btn {
padding: 5px 12px;
padding: 7px 12px 5px 12px;
background-image: none;
.box-shadow(0px 0px 8px @bodyBackground);
// .box-shadow(0px 0px 8px @bodyBackground);
border: none;
.border-radius(3px);
.border-radius(0px);
text-shadow: none;
&.disabled {
@ -369,10 +369,11 @@ div.subnav {
.btn-inverse {
border: 1px solid #444;
box-shadow: none;
}
.btn-large {
padding: 14px 23px;
padding: 6px 20px;
}
.btn-small {

13
public/less/gfbox.less
View File

@ -71,13 +71,24 @@
.page-container {
background-color: @pageBackground;
position: relative;
padding: 20px 20px 60px 81px;
padding: 25px 60px 60px 88px;
}
.page {
max-width: 653px;
}
.page-header-align {
display: flex;
justify-content: space-between;
align-items: center;
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Chrome */
flex-wrap: wrap-reverse;
}
.page-wide {
max-width: 1000px;
}

2
public/less/grafana.less
View File

@ -28,6 +28,8 @@
@import "filter-list.less";
@import "filter-table.less";
@import "simple-box.less";
@import "dropdown.less";
@import url(https://fonts.googleapis.com/css?family=PT+Sans:400,700,400italic,700italic|PT+Sans+Caption:400,700);
.row-control-inner {
padding:0px;

5
public/less/navbar.less
View File

@ -34,6 +34,7 @@
position: absolute;
right: 8px;
top: 23px;
margin-right: 2px;
}
a {
@ -90,8 +91,8 @@
.icon-gf {
position: relative;
top: 5px;
font-size: 27px;
top: 2px;
font-size: 20px;
line-height: 8px;
}
}

9
public/less/normform.less
View File

@ -58,6 +58,9 @@
float: left;
background: @labelBackground;
}
& .trans {
background: transparent;
}
}
.norm-form-flex-wrapper {
@ -145,7 +148,7 @@ input[type=text].norm-form-clear-input {
[type=text],
[type=email],
[type=number],
[type=password] {
[type=password], {
&.norm-form-input {
border: none;
border-right: 3px solid @pageBackground;
@ -154,6 +157,7 @@ input[type=text].norm-form-clear-input {
padding: 8px 6px;
height: 100%;
box-sizing: border-box;
font-size: 16px;
&.last {
border-right: none;
}
@ -176,7 +180,8 @@ select.norm-form-input {
margin: 0px;
border-radius: 0;
height: 36px;
padding: 9px 3px;
padding: 9px 3px;
font-size: 16px;
&.last {
border-right: none;
}

2
public/less/sidemenu.less
View File

@ -35,7 +35,7 @@
padding-left: 210px;
}
.page-container {
margin-left: 210px;
margin-left: 190px;
padding-left: 55px;
}
.top-nav-menu-btn {

1
public/less/type.less
View File

@ -63,6 +63,7 @@ h1, h2, h3, h4, h5, h6 {
line-height: @baseLineHeight;
color: @headingsColor;
text-rendering: optimizelegibility; // Fix the character spacing for headings
font-style: @headingsFontStyle;
small {
font-weight: normal;
line-height: 1;

17
public/less/variables.dark.less
View File

@ -47,13 +47,16 @@
@grafanaTargetFuncBackground: #333;
@grafanaTargetFuncHightlight: #444;
@grafanaSelectBackground: @grafanaTargetFuncBackground;
@modalBackground: @black;
@codeTagBackground: #444;
// Scaffolding
// -------------------------
@bodyBackground: rgb(20,20,20);
// @bodyBackground: rgb(20,20,20);
@pageBackground: @grayDarker;
@bodyBackground: @pageBackground;
@textColor: @grayLighter;
// Links
@ -65,18 +68,19 @@
// Typography
// -------------------------
@sansFontFamily: "Helvetica Neue", Helvetica, Arial, sans-serif;
@sansFontFamily: "PT Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
@serifFontFamily: Georgia, "Times New Roman", Times, serif;
@monoFontFamily: Menlo, Monaco, Consolas, "Courier New", monospace;
@baseFontSize: 14px;
@baseFontWeight: 400;
@baseFontWeight: 400;
@baseFontFamily: @sansFontFamily;
@baseLineHeight: 20px;
@altFontFamily: @serifFontFamily;
@headingsFontFamily: inherit; // empty to use BS default, @baseFontFamily
@headingsFontWeight: normal; // instead of browser default, bold
@headingsFontWeight: 200; // instead of browser default, bold
@headingsFontStyle: italic;
@headingsColor: darken(@white,11%); // empty to use BS default, @textColor
@inputText: @black;
@ -98,7 +102,7 @@
@borderRadiusSmall: 2px;
// Lists
@grafanaListBackground: #262626;
@grafanaListBackground: @grayDark;
@grafanaListAccent: lighten(@grayDarker, 2%);
@grafanaListBorderTop: @grayDark;
@grafanaListBorderBottom: @black;
@ -121,6 +125,7 @@
// -------------------------
@btnBackground: @grayDark;
@btnBackgroundHighlight: darken(@grayLight, 15%);
@btnBackgroundShadow: darken(@grayLight, 15%);
@btnBorder: #bbb;
@btnPrimaryBackground: @blueDark;
@ -141,6 +146,8 @@
@btnInverseBackground: @grayDark;
@btnInverseBackgroundHighlight: lighten(@grayDark, 5%);
@btnText: @gray;
@iconContainerBackground: @black;
@iconContainerBackgroundHighlight: lighten(@black, 5%);
@iconContainerBorder: 1px solid transparent;

16
public/less/variables.light.less
View File

@ -60,13 +60,16 @@
@grafanaTargetFuncBackground: darken(@grafanaTargetBackground, 5%);
@grafanaTargetFuncHightlight: darken(@grafanaTargetBackground, 10%);
@grafanaSelectBackground: @grafanaTargetFuncBackground;
@modalBackground: @bodyBackground;
@codeTagBackground: #ddd;
// Scaffolding
// -------------------------
@bodyBackground: #EFEFEF;
// @bodyBackground: #EFEFEF;
@pageBackground: @grayDarker;
@bodyBackground: @pageBackground;
@textColor: @gray;
// Links
@ -77,18 +80,19 @@
// Typography
// -------------------------
@sansFontFamily: "Helvetica Neue", Helvetica, Arial, sans-serif;
@sansFontFamily: "PT Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
@serifFontFamily: Georgia, "Times New Roman", Times, serif;
@monoFontFamily: Menlo, Monaco, Consolas, "Courier New", monospace;
@baseFontSize: 14px;
@baseFontWeight: 400;
@baseFontWeight: 400;
@baseFontFamily: @sansFontFamily;
@baseLineHeight: 20px;
@altFontFamily: @serifFontFamily;
@headingsFontFamily: inherit; // empty to use BS default, @baseFontFamily
@headingsFontWeight: bold; // instead of browser default, bold
@headingsFontFamily: inherit; // inherit. empty to use BS default, @baseFontFamily
@headingsFontWeight: normal; // instead of browser default, bold
@headingsFontStyle: italic;
@headingsColor: @textColor; // empty to use BS default, @textColor
@ -154,6 +158,8 @@
@btnInverseBackground: @white;
@btnInverseBackgroundHighlight: darken(@grayLight, 15%);
@btnText: @grayLighter;
@iconContainerBackground: @white;
@iconContainerBackgroundHighlight: lighten(@white, 5%);
@iconContainerBorder: 1px solid rgba(0,0,0, 0.05);

9
public/vendor/bootstrap/less/buttons.less vendored
View File

@ -17,8 +17,8 @@
text-align: center;
vertical-align: middle;
cursor: pointer;
.buttonBackground(@btnBackground, @btnBackgroundHighlight, @grayDark, 0 1px 1px rgba(255,255,255,.75));
border: 1px solid @btnBorder;
.buttonBackground(@btnBackground, @btnBackgroundHighlight, @grayDark, 0 1px 1px rgba(255,255,255,.75));
border: none;
*border: 0; // Remove the border to prevent IE7's black border on input:focus
border-bottom-color: darken(@btnBorder, 10%);
.border-radius(@baseBorderRadius);
@ -226,3 +226,8 @@ input[type="submit"].btn {
color: @grayDark;
text-decoration: none;
}
.btnText {
color: @btnText;
margin: 0 10px;
}

1
public/vendor/bootstrap/less/mixins.less vendored
View File

@ -514,6 +514,7 @@
// gradientBar will set the background to a pleasing blend of these, to support IE<=9
.gradientBar(@startColor, @endColor, @textColor, @textShadow);
*background-color: @endColor; /* Darken IE7 buttons by default so they stand out more given they won't have borders */
box-shadow: inset 0 -3px rgba(0,0,0,0.3);
.reset-filter();
// in these cases the gradient won't cover the background, so we override