Skip to content

N
nexpie-grafana-theme
Commit 0fa0b3b2 by Trent White
Options

style changes to forms, icons updates and new buttons

parent 50920b14
Showing with 117 additions and 53 deletions
public/app/core/components/sidemenu/sidemenu.html
......@@ -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>
......
public/app/features/apps/partials/edit.html
<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>
......
public/app/features/apps/partials/list.html
<navbar title="Apps" icon="fa fa-fw fa-cubes">
<navbar title="Apps" icon="icon-gf icon-gf-apps">
</navbar>
<div class="page-container">
......
public/app/features/dashboard/dashnav/dashnav.html
......@@ -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>
......
public/app/features/datasources/partials/edit.html
<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>
......
public/app/features/datasources/partials/http_settings.html
......@@ -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>
......
public/app/features/datasources/partials/list.html
<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">
......
public/less/bootswatch.dark.less
......@@ -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 {
......
public/less/gfbox.less
......@@ -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;
}
......
public/less/grafana.less
......@@ -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;
......
public/less/navbar.less
......@@ -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;
}
}
......
public/less/normform.less
......@@ -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;
}
......
public/less/sidemenu.less
......@@ -35,7 +35,7 @@
padding-left: 210px;
}
.page-container {
margin-left: 210px;
margin-left: 190px;
padding-left: 55px;
}
.top-nav-menu-btn {
......
public/less/type.less
......@@ -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;
......
public/less/variables.dark.less
......@@ -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;
......
public/less/variables.light.less
......@@ -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);
......
public/vendor/bootstrap/less/buttons.less
......@@ -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;
}
\ No newline at end of file
public/vendor/bootstrap/less/mixins.less
......@@ -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
......
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