Commit 0fa0b3b2 by Trent White

style changes to forms, icons updates and new buttons

parent 50920b14
...@@ -28,7 +28,7 @@ ...@@ -28,7 +28,7 @@
<li class="sidemenu-system-section" ng-if="ctrl.systemSection"> <li class="sidemenu-system-section" ng-if="ctrl.systemSection">
<div class="sidemenu-system-section-inner"> <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-text-wrapper">
<div class="sidemenu-section-heading">Grafana Admin</div> <div class="sidemenu-section-heading">Grafana Admin</div>
<div class="sidemenu-section-tagline">v {{ctrl.grafanaVersion}}</div> <div class="sidemenu-section-tagline">v {{ctrl.grafanaVersion}}</div>
......
<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"> <ul class="nav">
<li class="active" ><a href="apps/edit/{{ctrl.current.type}}">{{ctrl.appModel.name}}</a></li> <li class="active" ><a href="apps/edit/{{ctrl.current.type}}">{{ctrl.appModel.name}}</a></li>
</ul> </ul>
......
<navbar title="Apps" icon="fa fa-fw fa-cubes"> <navbar title="Apps" icon="icon-gf icon-gf-apps">
</navbar> </navbar>
<div class="page-container"> <div class="page-container">
......
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<div class="top-nav-btn dashnav-dashboards-btn" ng-if="!dashboardMeta.isSnapshot"> <div class="top-nav-btn dashnav-dashboards-btn" ng-if="!dashboardMeta.isSnapshot">
<a class="pointer" ng-click="openSearch()"> <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> <span class="dashboard-title">{{dashboard.title}}</span>
<i class="fa fa-caret-down"></i> <i class="fa fa-caret-down"></i>
</a> </a>
......
<navbar title="Data sources" title-url="datasources" icon="fa fa-fw fa-database" subnav="true"> <navbar>
<ul class="nav"> <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 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> <li class="active" ng-show="!isNew"><a href="datasources/edit/{{current.name}}">{{current.name}}</a></li>
</ul> </ul> -->
</navbar> </navbar>
<div class="page-container"> <div class="page-container">
<div class="page"> <div class="page">
<h2 ng-show="isNew">Add data source</h2> <h2 ng-show="isNew">Add data source</h2>
<h2 ng-show="!isNew">Edit 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"> <form name="editForm">
<div class="norm-form"> <div class="norm-form">
...@@ -18,13 +26,13 @@ ...@@ -18,13 +26,13 @@
</li> </li>
<li> <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> </li>
<li class="norm-form-item"> <li class="norm-form-item trans">
Default&nbsp;
<input class="cr1" id="current.isDefault" type="checkbox" ng-model="current.isDefault" ng-checked="current.isDefault"> <input class="cr1" id="current.isDefault" type="checkbox" ng-model="current.isDefault" ng-checked="current.isDefault">
<label for="current.isDefault" class="cr1"></label> <label for="current.isDefault" class="cr1"></label>
Default
</li> </li>
</ul> </ul>
<div class="clearfix"></div> <div class="clearfix"></div>
...@@ -35,7 +43,7 @@ ...@@ -35,7 +43,7 @@
Type Type
</li> </li>
<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> </li>
</ul> </ul>
<div class="clearfix"></div> <div class="clearfix"></div>
...@@ -55,13 +63,13 @@ ...@@ -55,13 +63,13 @@
</div> </div>
</div> </div>
<div class="pull-right" style="margin-top: 35px"> <div class="" 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-large 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-large btn-success" ng-show="!isNew" ng-click="saveChanges()">Save</button>
<button type="submit" class="btn btn-inverse" ng-show="!isNew" ng-click="saveChanges(true)"> <button type="submit" class="btn btn-large btn-inverse" ng-show="!isNew" ng-click="saveChanges(true)">
Test Connection Test Connection
</button> </button>
<a class="btn btn-inverse" href="datasources">Cancel</a> <a class="btnText" href="datasources">Cancel</a>
</div> </div>
<br> <br>
</form> </form>
......
...@@ -9,7 +9,12 @@ ...@@ -9,7 +9,12 @@
<li> <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> <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>
<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> Access <tip>Direct = url is used directly from browser, Proxy = Grafana backend will proxy the request</tip>
</li> </li>
<li> <li>
...@@ -23,31 +28,33 @@ ...@@ -23,31 +28,33 @@
<li class="norm-form-item" style="width: 80px"> <li class="norm-form-item" style="width: 80px">
Http Auth Http Auth
</li> </li>
<li class="norm-form-item"> <li class="norm-form-item trans">
<editor-checkbox text="Basic Auth" model="current.basicAuth"></editor-checkbox> <editor-checkbox text="Basic Auth" model="current.basicAuth"></editor-checkbox>
</li> </li>
<li class="norm-form-item"> <li class="norm-form-item trans">
<editor-checkbox text="With Credentials" model="current.withCredentials"></editor-checkbox> <editor-checkbox text="With Credentials" model="current.withCredentials"></editor-checkbox><tip>Tip for with credentials</tip>
</li> </li>
</ul> </ul>
<div class="clearfix"></div> <div class="clearfix"></div>
</div> </div>
<div class="norm-form" ng-if="current.basicAuth"> <div class="norm-form" ng-if="current.basicAuth">
<ul class="norm-form-list"> <ul class="norm-form-list">
<li class="norm-form-item" style="width: 80px"> <li class="norm-form-item small" style="width: 80px">
<i class="fa fa-remove invisible"></i>
</li>
<li class="norm-form-item">
User User
</li> </li>
<li ng-if="current.basicAuth"> <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>
<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 Password
</li> </li>
<li ng-if="current.basicAuth"> <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> </li>
</ul> </ul>
<div class="clearfix"></div> <div class="clearfix"></div>
......
<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> </navbar>
<div class="page-container"> <div class="page-container">
<div class="page-wide"> <div class="page-wide">
<div class="page-header-align">
<a class="btn btn-inverse pull-right" href="datasources/new"> <h1>Data sources</h1>
<a class="btn btn-success" href="datasources/new">
<i class="fa fa-plus"></i> <i class="fa fa-plus"></i>
Add data source Add data source
</a> </a>
<h1>Data sources</h1> </div>
<br> <br>
<div ng-if="datasources.length === 0"> <div ng-if="datasources.length === 0">
......
...@@ -355,11 +355,11 @@ div.subnav { ...@@ -355,11 +355,11 @@ div.subnav {
// BUTTONS // BUTTONS
// ----------------------------------------------------- // -----------------------------------------------------
.btn { .btn {
padding: 5px 12px; padding: 7px 12px 5px 12px;
background-image: none; background-image: none;
.box-shadow(0px 0px 8px @bodyBackground); // .box-shadow(0px 0px 8px @bodyBackground);
border: none; border: none;
.border-radius(3px); .border-radius(0px);
text-shadow: none; text-shadow: none;
&.disabled { &.disabled {
...@@ -369,10 +369,11 @@ div.subnav { ...@@ -369,10 +369,11 @@ div.subnav {
.btn-inverse { .btn-inverse {
border: 1px solid #444; border: 1px solid #444;
box-shadow: none;
} }
.btn-large { .btn-large {
padding: 14px 23px; padding: 6px 20px;
} }
.btn-small { .btn-small {
......
...@@ -71,13 +71,24 @@ ...@@ -71,13 +71,24 @@
.page-container { .page-container {
background-color: @pageBackground; background-color: @pageBackground;
position: relative; position: relative;
padding: 20px 20px 60px 81px; padding: 25px 60px 60px 88px;
} }
.page { .page {
max-width: 653px; 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 { .page-wide {
max-width: 1000px; max-width: 1000px;
} }
......
...@@ -28,6 +28,8 @@ ...@@ -28,6 +28,8 @@
@import "filter-list.less"; @import "filter-list.less";
@import "filter-table.less"; @import "filter-table.less";
@import "simple-box.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 { .row-control-inner {
padding:0px; padding:0px;
......
...@@ -34,6 +34,7 @@ ...@@ -34,6 +34,7 @@
position: absolute; position: absolute;
right: 8px; right: 8px;
top: 23px; top: 23px;
margin-right: 2px;
} }
a { a {
...@@ -90,8 +91,8 @@ ...@@ -90,8 +91,8 @@
.icon-gf { .icon-gf {
position: relative; position: relative;
top: 5px; top: 2px;
font-size: 27px; font-size: 20px;
line-height: 8px; line-height: 8px;
} }
} }
......
...@@ -58,6 +58,9 @@ ...@@ -58,6 +58,9 @@
float: left; float: left;
background: @labelBackground; background: @labelBackground;
} }
& .trans {
background: transparent;
}
} }
.norm-form-flex-wrapper { .norm-form-flex-wrapper {
...@@ -145,7 +148,7 @@ input[type=text].norm-form-clear-input { ...@@ -145,7 +148,7 @@ input[type=text].norm-form-clear-input {
[type=text], [type=text],
[type=email], [type=email],
[type=number], [type=number],
[type=password] { [type=password], {
&.norm-form-input { &.norm-form-input {
border: none; border: none;
border-right: 3px solid @pageBackground; border-right: 3px solid @pageBackground;
...@@ -154,6 +157,7 @@ input[type=text].norm-form-clear-input { ...@@ -154,6 +157,7 @@ input[type=text].norm-form-clear-input {
padding: 8px 6px; padding: 8px 6px;
height: 100%; height: 100%;
box-sizing: border-box; box-sizing: border-box;
font-size: 16px;
&.last { &.last {
border-right: none; border-right: none;
} }
...@@ -177,6 +181,7 @@ select.norm-form-input { ...@@ -177,6 +181,7 @@ select.norm-form-input {
border-radius: 0; border-radius: 0;
height: 36px; height: 36px;
padding: 9px 3px; padding: 9px 3px;
font-size: 16px;
&.last { &.last {
border-right: none; border-right: none;
} }
......
...@@ -35,7 +35,7 @@ ...@@ -35,7 +35,7 @@
padding-left: 210px; padding-left: 210px;
} }
.page-container { .page-container {
margin-left: 210px; margin-left: 190px;
padding-left: 55px; padding-left: 55px;
} }
.top-nav-menu-btn { .top-nav-menu-btn {
......
...@@ -63,6 +63,7 @@ h1, h2, h3, h4, h5, h6 { ...@@ -63,6 +63,7 @@ h1, h2, h3, h4, h5, h6 {
line-height: @baseLineHeight; line-height: @baseLineHeight;
color: @headingsColor; color: @headingsColor;
text-rendering: optimizelegibility; // Fix the character spacing for headings text-rendering: optimizelegibility; // Fix the character spacing for headings
font-style: @headingsFontStyle;
small { small {
font-weight: normal; font-weight: normal;
line-height: 1; line-height: 1;
......
...@@ -47,13 +47,16 @@ ...@@ -47,13 +47,16 @@
@grafanaTargetFuncBackground: #333; @grafanaTargetFuncBackground: #333;
@grafanaTargetFuncHightlight: #444; @grafanaTargetFuncHightlight: #444;
@grafanaSelectBackground: @grafanaTargetFuncBackground;
@modalBackground: @black; @modalBackground: @black;
@codeTagBackground: #444; @codeTagBackground: #444;
// Scaffolding // Scaffolding
// ------------------------- // -------------------------
@bodyBackground: rgb(20,20,20); // @bodyBackground: rgb(20,20,20);
@pageBackground: @grayDarker; @pageBackground: @grayDarker;
@bodyBackground: @pageBackground;
@textColor: @grayLighter; @textColor: @grayLighter;
// Links // Links
...@@ -65,7 +68,7 @@ ...@@ -65,7 +68,7 @@
// Typography // Typography
// ------------------------- // -------------------------
@sansFontFamily: "Helvetica Neue", Helvetica, Arial, sans-serif; @sansFontFamily: "PT Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
@serifFontFamily: Georgia, "Times New Roman", Times, serif; @serifFontFamily: Georgia, "Times New Roman", Times, serif;
@monoFontFamily: Menlo, Monaco, Consolas, "Courier New", monospace; @monoFontFamily: Menlo, Monaco, Consolas, "Courier New", monospace;
...@@ -76,7 +79,8 @@ ...@@ -76,7 +79,8 @@
@altFontFamily: @serifFontFamily; @altFontFamily: @serifFontFamily;
@headingsFontFamily: inherit; // empty to use BS default, @baseFontFamily @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 @headingsColor: darken(@white,11%); // empty to use BS default, @textColor
@inputText: @black; @inputText: @black;
...@@ -98,7 +102,7 @@ ...@@ -98,7 +102,7 @@
@borderRadiusSmall: 2px; @borderRadiusSmall: 2px;
// Lists // Lists
@grafanaListBackground: #262626; @grafanaListBackground: @grayDark;
@grafanaListAccent: lighten(@grayDarker, 2%); @grafanaListAccent: lighten(@grayDarker, 2%);
@grafanaListBorderTop: @grayDark; @grafanaListBorderTop: @grayDark;
@grafanaListBorderBottom: @black; @grafanaListBorderBottom: @black;
...@@ -121,6 +125,7 @@ ...@@ -121,6 +125,7 @@
// ------------------------- // -------------------------
@btnBackground: @grayDark; @btnBackground: @grayDark;
@btnBackgroundHighlight: darken(@grayLight, 15%); @btnBackgroundHighlight: darken(@grayLight, 15%);
@btnBackgroundShadow: darken(@grayLight, 15%);
@btnBorder: #bbb; @btnBorder: #bbb;
@btnPrimaryBackground: @blueDark; @btnPrimaryBackground: @blueDark;
...@@ -141,6 +146,8 @@ ...@@ -141,6 +146,8 @@
@btnInverseBackground: @grayDark; @btnInverseBackground: @grayDark;
@btnInverseBackgroundHighlight: lighten(@grayDark, 5%); @btnInverseBackgroundHighlight: lighten(@grayDark, 5%);
@btnText: @gray;
@iconContainerBackground: @black; @iconContainerBackground: @black;
@iconContainerBackgroundHighlight: lighten(@black, 5%); @iconContainerBackgroundHighlight: lighten(@black, 5%);
@iconContainerBorder: 1px solid transparent; @iconContainerBorder: 1px solid transparent;
......
...@@ -60,13 +60,16 @@ ...@@ -60,13 +60,16 @@
@grafanaTargetFuncBackground: darken(@grafanaTargetBackground, 5%); @grafanaTargetFuncBackground: darken(@grafanaTargetBackground, 5%);
@grafanaTargetFuncHightlight: darken(@grafanaTargetBackground, 10%); @grafanaTargetFuncHightlight: darken(@grafanaTargetBackground, 10%);
@grafanaSelectBackground: @grafanaTargetFuncBackground;
@modalBackground: @bodyBackground; @modalBackground: @bodyBackground;
@codeTagBackground: #ddd; @codeTagBackground: #ddd;
// Scaffolding // Scaffolding
// ------------------------- // -------------------------
@bodyBackground: #EFEFEF; // @bodyBackground: #EFEFEF;
@pageBackground: @grayDarker; @pageBackground: @grayDarker;
@bodyBackground: @pageBackground;
@textColor: @gray; @textColor: @gray;
// Links // Links
...@@ -77,7 +80,7 @@ ...@@ -77,7 +80,7 @@
// Typography // Typography
// ------------------------- // -------------------------
@sansFontFamily: "Helvetica Neue", Helvetica, Arial, sans-serif; @sansFontFamily: "PT Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
@serifFontFamily: Georgia, "Times New Roman", Times, serif; @serifFontFamily: Georgia, "Times New Roman", Times, serif;
@monoFontFamily: Menlo, Monaco, Consolas, "Courier New", monospace; @monoFontFamily: Menlo, Monaco, Consolas, "Courier New", monospace;
...@@ -87,8 +90,9 @@ ...@@ -87,8 +90,9 @@
@baseLineHeight: 20px; @baseLineHeight: 20px;
@altFontFamily: @serifFontFamily; @altFontFamily: @serifFontFamily;
@headingsFontFamily: inherit; // empty to use BS default, @baseFontFamily @headingsFontFamily: inherit; // inherit. empty to use BS default, @baseFontFamily
@headingsFontWeight: bold; // instead of browser default, bold @headingsFontWeight: normal; // instead of browser default, bold
@headingsFontStyle: italic;
@headingsColor: @textColor; // empty to use BS default, @textColor @headingsColor: @textColor; // empty to use BS default, @textColor
...@@ -154,6 +158,8 @@ ...@@ -154,6 +158,8 @@
@btnInverseBackground: @white; @btnInverseBackground: @white;
@btnInverseBackgroundHighlight: darken(@grayLight, 15%); @btnInverseBackgroundHighlight: darken(@grayLight, 15%);
@btnText: @grayLighter;
@iconContainerBackground: @white; @iconContainerBackground: @white;
@iconContainerBackgroundHighlight: lighten(@white, 5%); @iconContainerBackgroundHighlight: lighten(@white, 5%);
@iconContainerBorder: 1px solid rgba(0,0,0, 0.05); @iconContainerBorder: 1px solid rgba(0,0,0, 0.05);
......
...@@ -18,7 +18,7 @@ ...@@ -18,7 +18,7 @@
vertical-align: middle; vertical-align: middle;
cursor: pointer; cursor: pointer;
.buttonBackground(@btnBackground, @btnBackgroundHighlight, @grayDark, 0 1px 1px rgba(255,255,255,.75)); .buttonBackground(@btnBackground, @btnBackgroundHighlight, @grayDark, 0 1px 1px rgba(255,255,255,.75));
border: 1px solid @btnBorder; border: none;
*border: 0; // Remove the border to prevent IE7's black border on input:focus *border: 0; // Remove the border to prevent IE7's black border on input:focus
border-bottom-color: darken(@btnBorder, 10%); border-bottom-color: darken(@btnBorder, 10%);
.border-radius(@baseBorderRadius); .border-radius(@baseBorderRadius);
...@@ -226,3 +226,8 @@ input[type="submit"].btn { ...@@ -226,3 +226,8 @@ input[type="submit"].btn {
color: @grayDark; color: @grayDark;
text-decoration: none; text-decoration: none;
} }
.btnText {
color: @btnText;
margin: 0 10px;
}
\ No newline at end of file
...@@ -514,6 +514,7 @@ ...@@ -514,6 +514,7 @@
// gradientBar will set the background to a pleasing blend of these, to support IE<=9 // gradientBar will set the background to a pleasing blend of these, to support IE<=9
.gradientBar(@startColor, @endColor, @textColor, @textShadow); .gradientBar(@startColor, @endColor, @textColor, @textShadow);
*background-color: @endColor; /* Darken IE7 buttons by default so they stand out more given they won't have borders */ *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(); .reset-filter();
// in these cases the gradient won't cover the background, so we override // 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