Skip to content

N
nexpie-grafana-theme
Commit 21b0945d by Matthew Toback
Options

Beginnings of form restyling, nowhere near merge yet

parent 89ef019b
Showing with 44 additions and 36 deletions
.bra.toml
......@@ -3,7 +3,7 @@ init_cmds = [
["go", "build", "-o", "./bin/grafana-server"],
["./bin/grafana-server"]
]
watch_all = true
watch_all = false
watch_dirs = [
"$WORKDIR/pkg",
"$WORKDIR/public/views",
......
package.json
......@@ -32,6 +32,7 @@
"grunt-git-describe": "~2.3.2",
"grunt-karma": "~0.12.1",
"grunt-ng-annotate": "^1.0.1",
"grunt-notify": "^0.4.3",
"grunt-string-replace": "~1.2.1",
"grunt-systemjs-builder": "^0.2.5",
"grunt-tslint": "^3.0.1",
......
public/app/features/datasources/partials/edit.html
......@@ -11,17 +11,17 @@
<h2 ng-show="!isNew">Edit data source</h2>
<form name="editForm">
<div class="tight-form">
<ul class="tight-form-list">
<li class="tight-form-item" style="width: 80px">
<div class="norm-form">
<ul class="norm-form-list">
<li class="norm-form-item small" style="width: 80px">
Name
</li>
<li>
<li>
<input type="text" class="input-xlarge tight-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="tight-form-item">
<li class="norm-form-item">
Default&nbsp;
<input class="cr1" id="current.isDefault" type="checkbox" ng-model="current.isDefault" ng-checked="current.isDefault">
<label for="current.isDefault" class="cr1"></label>
......@@ -29,13 +29,13 @@
</ul>
<div class="clearfix"></div>
</div>
<div class="tight-form last">
<ul class="tight-form-list">
<li class="tight-form-item" style="width: 80px">
<div class="norm-form last">
<ul class="norm-form-list">
<li class="norm-form-item" style="width: 80px">
Type
</li>
<li>
<select class="input-xlarge tight-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" 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>
......
public/app/features/datasources/partials/http_settings.html
<br>
<h4>Http settings</h4>
<div class="tight-form-container">
<div class="tight-form">
<ul class="tight-form-list">
<li class="tight-form-item" style="width: 80px">
<div class="norm-form-container">
<div class="norm-form">
<ul class="norm-form-list">
<li class="norm-form-item" style="width: 80px">
Url
</li>
<li>
<input type="text" class="tight-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 class="tight-form-item">
<li class="norm-form-item">
Access <tip>Direct = url is used directly from browser, Proxy = Grafana backend will proxy the request</tip>
</li>
<li>
<select class="input-medium tight-form-input" ng-model="current.access" ng-options="f for f in ['direct', 'proxy']"></select>
<select class="input-medium norm-form-input" ng-model="current.access" ng-options="f for f in ['direct', 'proxy']"></select>
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="tight-form">
<ul class="tight-form-list">
<li class="tight-form-item" style="width: 80px">
<div class="norm-form">
<ul class="norm-form-list">
<li class="norm-form-item" style="width: 80px">
Http Auth
</li>
<li class="tight-form-item">
<li class="norm-form-item">
<editor-checkbox text="Basic Auth" model="current.basicAuth"></editor-checkbox>
</li>
<li class="tight-form-item">
<li class="norm-form-item">
<editor-checkbox text="With Credentials" model="current.withCredentials"></editor-checkbox>
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="tight-form" ng-if="current.basicAuth">
<ul class="tight-form-list">
<li class="tight-form-item" style="width: 80px">
<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="tight-form-item">
<li class="norm-form-item">
User
</li>
<li ng-if="current.basicAuth">
<input type="text" class="tight-form-input input-medium" style="width: 136px" ng-model='current.basicAuthUser' placeholder="user" required></input>
<input type="text" class="norm-form-input input-medium" style="width: 136px" ng-model='current.basicAuthUser' placeholder="user" required></input>
</li>
<li class="tight-form-item" style="width: 66px" ng-if="current.basicAuth">
<li class="norm-form-item" style="width: 66px" ng-if="current.basicAuth">
Password
</li>
<li ng-if="current.basicAuth">
<input type="password" class="tight-form-input input-medium" ng-model='current.basicAuthPassword' placeholder="password" required></input>
<input type="password" class="norm-form-input input-medium" ng-model='current.basicAuthPassword' placeholder="password" required></input>
</li>
</ul>
<div class="clearfix"></div>
......
public/less/bootswatch.dark.less
......@@ -33,7 +33,7 @@ body {
height: 100%;
//#gradient > .vertical (@bodyBackground, #252A30);
//background: @bodyBackground;
background: @bodyBackground;
background: @nonDashBodyBackground;
// url('../img/cubes.png') repeat right top;
}
......
public/less/filter-table.less
......@@ -18,8 +18,8 @@
}
.filter-table tr {
background: @grafanaPanelBackground;
border-bottom: 2px solid @bodyBackground;
background: @grafanaListBackground;
border-bottom: 2px solid @nonDashBodyBackground;
}
.filter-table th {
......
public/less/grafana.less
......@@ -12,6 +12,7 @@
@import "panel.less";
@import "forms.less";
@import "tightform.less";
@import "normform.less";
@import "sidemenu.less";
@import "navbar.less";
@import "gfbox.less";
......@@ -405,6 +406,6 @@
border-image: linear-gradient(to right, rgba(255,213,0,1) 0%, rgba(255,68,0,1) 99%, rgba(255,68,0,1) 100%);
border-image-slice: 1;
border-bottom: 2px solid transparent;
padding: 1.2rem 3rem 0.8rem 3rem;
padding: 1.2rem .2rem .4rem .2rem;
}
}
public/less/variables.dark.less
......@@ -53,6 +53,7 @@
// Scaffolding
// -------------------------
@bodyBackground: rgb(22,22,22);
@nonDashBodyBackground: @grayDarker;
@textColor: @grayLighter;
// Links
......@@ -156,6 +157,8 @@
@inputDisabledBackground: #555;
@formActionsBackground: transparent;
@inputHeight: @baseLineHeight + 10px; // base line-height + 8px vertical padding + 2px top/bottom border
@labelBackground: @grayDark;
// Sidemenu
// -------------------------
......
public/less/variables.light.less
......@@ -33,9 +33,9 @@
// Status colors
// -------------------------
@online: #10a345;
@warn: #ffc03c;
@critical: #ed2e18;
@online: #01A64F;
@warn: #F79520;
@critical: #EC2128;
// grafana Variables
// -------------------------
......@@ -66,6 +66,7 @@
// Scaffolding
// -------------------------
@bodyBackground: #EFEFEF;
@nonDashBodyBackground: @grayLighter;
@textColor: @gray;
// Links
......@@ -170,6 +171,8 @@
@formActionsBackground: #f5f5f5;
@inputHeight: @baseLineHeight + 10px; // base line-height + 8px vertical padding + 2px top/bottom border
@inputText: #020202;
@labelBackground: #f8f8f8;
// Sidemenu
// -------------------------
......
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