IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

ux(forms): major simplification of norm-form markup and css

Browse Source
This commit is contained in:
Torkel Ödegaard
2016-02-13 19:42:05 +01:00
parent 1004515bda
commit caa765ec32
10 changed files with 147 additions and 452 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -5,64 +5,48 @@
</navbar> </navbar>
<div class="page-container"> <div class="page-container">
<div class="page"> <h1 ng-show="isNew">Add data source</h1>
<h1 ng-show="isNew">Add data source</h1> <h1 ng-show="!isNew">Edit data source</h1>
<h1 ng-show="!isNew">Edit data source</h1>
<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="gf-form-group">
<ul class="norm-form-list"> <div class="gf-form">
<li class="norm-form-item small" style="width: 80px"> <span class="gf-form-label gf-size-s">Name</span>
Name <input class="gf-form-input gf-size-xxl" type="text" ng-model="current.name" placeholder="My data source name" required>
</li>
<li>
<li>
<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 trans">
<input class="cr1" id="current.isDefault" type="checkbox" ng-model="current.isDefault" ng-checked="current.isDefault">
<label for="current.isDefault" class="cr1">Default</label>
</li>
</ul>
<div class="clearfix"></div>
</div> </div>
<div class="norm-form last"> <div class="gf-form">
<ul class="norm-form-list"> <editor-checkbox text="Default" model="current.isDefault"></editor-checkbox>
<li class="norm-form-item" style="width: 80px">
Type
</li>
<li>
<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>
</div>
<rebuild-on-change property="datasourceMeta.id">
<plugin-component type="datasource-config-ctrl">
</plugin-component>
</rebuild-on-change>
<div ng-if="testing" style="margin-top: 25px">
<h5 ng-show="!testing.done">Testing.... <i class="fa fa-spiner fa-spin"></i></h5>
<h5 ng-show="testing.done">Test results</h5>
<div class="alert-{{testing.status}} alert">
<div class="alert-title">{{testing.title}}</div>
<div ng-bind='testing.message'></div>
</div>
</div>
<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-success" ng-show="!isNew" ng-click="saveChanges()">Save</button>
<button type="submit" class="btn btn-primary" ng-show="!isNew" ng-click="saveChanges(true)">
Test Connection
</button>
<a class="btn-text" href="datasources">Cancel</a>
</div> </div>
<br> <br>
</form>
</div> <div class="gf-form">
<span class="gf-form-label gf-size-s">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>
<rebuild-on-change property="datasourceMeta.id">
<plugin-component type="datasource-config-ctrl">
</plugin-component>
</rebuild-on-change>
<div ng-if="testing" style="margin-top: 25px">
<h5 ng-show="!testing.done">Testing.... <i class="fa fa-spiner fa-spin"></i></h5>
<h5 ng-show="testing.done">Test results</h5>
<div class="alert-{{testing.status}} alert">
<div class="alert-title">{{testing.title}}</div>
<div ng-bind='testing.message'></div>
</div>
</div>
<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-success" ng-show="!isNew" ng-click="saveChanges()">Save</button>
<button type="submit" class="btn btn-primary" ng-show="!isNew" ng-click="saveChanges(true)">
Test Connection
</button>
<a class="btn-text" href="datasources">Cancel</a>
</div>
<br>
</form>
</div> </div>

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

@@ -1,64 +1,47 @@
<br>
<h3>Http settings</h3> <h3>Http settings</h3>
<div class="norm-form-container">
<div class="norm-form"> <div class="gf-form-group">
<ul class="norm-form-list"> <div class="gf-form">
<li class="norm-form-item" style="width: 80px"> <span class="gf-form-label gf-size-s">Url</span>
Url <input class="gf-form-input gf-size-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>
</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>
</li>
</ul>
<div class="clearfix"></div>
</div> </div>
<div class="norm-form"> <br>
<ul class="norm-form-list">
<li class="norm-form-item" style="width: 80px"> <div class="gf-form">
Access <tip>Direct = url is used directly from browser, Proxy = Grafana backend will proxy the request</tip> <span class="gf-form-label gf-size-s">
</li> Access <tip>Direct = url is used directly from browser, Proxy = Grafana backend will proxy the request</tip>
<li> </span>
<select class="input-medium norm-form-input" ng-model="current.access" ng-options="f for f in ['direct', 'proxy']"></select> <select class="gf-form-input gf-size-auto" ng-model="current.access" ng-options="f for f in ['direct', 'proxy']"></select>
</li>
</ul>
<div class="clearfix"></div>
</div> </div>
<div class="norm-form"> <br>
<ul class="norm-form-list">
<li class="norm-form-item" style="width: 80px"> <div class="gf-form">
Http Auth <span class="gf-form-label gf-size-s">
</li> Http Auth
<li class="norm-form-item trans"> </span>
<editor-checkbox text="Basic Auth" model="current.basicAuth"></editor-checkbox>
</li>
<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>
<div class="norm-form" ng-if="current.basicAuth"> <span class="gf-form">
<ul class="norm-form-list"> <editor-checkbox text="Basic Auth" model="current.basicAuth"></editor-checkbox>
<li class="norm-form-item small" style="width: 80px"> </span>
User <span class="gf-form">
</li> <editor-checkbox text="With Credentials" model="current.withCredentials"></editor-checkbox><tip>Tip for with credentials</tip>
<li ng-if="current.basicAuth"> </span>
<input type="text" class="input-xlarge norm-form-input" ng-model='current.basicAuthUser' placeholder="user" required></input> <br>
</li>
</ul> <div class="gf-form" ng-if="current.basicAuth">
<div class="clearfix"></div> <span class="gf-form-label gf-size-s">
User
</span>
<input class="gf-form-input gf-size-xl" type="text" ng-model='current.basicAuthUser' placeholder="user" required></input>
</div> </div>
<div class="norm-form" ng-if="current.basicAuth"> <br>
<ul class="norm-form-list">
<li class="norm-form-item small" style="width: 80px" ng-if="current.basicAuth"> <div class="gf-form" ng-if="current.basicAuth">
Password <span class="gf-form-label gf-size-s">
</li> Passord
<li ng-if="current.basicAuth"> </span>
<input type="password" class="input-xlarge norm-form-input" ng-model='current.basicAuthPassword' placeholder="password" required></input> <input class="gf-form-input gf-size-xl" type="password" ng-model='current.basicAuthPassword' placeholder="password" required></input>
</li>
</ul>
<div class="clearfix"></div>
</div> </div>
</div> </div>
<br>

107
public/app/features/org/partials/orgDetails.html
View File

@@ -6,91 +6,58 @@
<h1>Preferences</h1> <h1>Preferences</h1>
<form name="orgForm"> <form name="orgForm" class="gf-form-group">
<div class="norm-form last"> <div class="gf-form">
<ul class="norm-form-list"> <span class="gf-form-label gf-size-s">Name</span>
<li class="norm-form-item" style="width: 100px"> <input class="gf-form-input gf-size-xxl" type="text" required ng-model="org.name">
Name
</li>
<li>
<input type="text" required ng-model="org.name" class="norm-form-input last" style="width: 475px">
</li>
</ul>
<div class="clearfix"></div>
</div> </div>
<br> <div class="gf-form-button-row">
<button type="submit" class="btn btn-success" ng-click="update()">Update</button> <button type="submit" class="btn btn-success" ng-click="update()">Update</button>
<br> </div>
</form> </form>
<section class="simple-box"> <h3>Address</h3>
<h3 class="">Address</h3>
</section>
<form name="addressForm"> <form name="addressForm" class="gf-form-group">
<div class="norm-form"> <div class="gf-form">
<ul class="norm-form-list"> <span class="gf-form-label gf-size-s">Address1</span>
<li class="norm-form-item" style="width: 100px"> <input class="gf-form-input gf-size-xl" type="text" ng-model="address.address1">
Address 1
</li>
<li>
<input type="text" ng-model="address.address1" class="norm-form-input" style="width:193px">
</li>
<li class="norm-form-item" style="width: 75px">
Address 2
</li>
<li>
<input type="text" ng-model="address.address2" class="norm-form-input last" style="width:193px">
</li>
</ul>
<div class="clearfix"></div>
</div> </div>
<div class="norm-form"> <div class="gf-form">
<ul class="norm-form-list"> <span class="gf-form-label gf-size-s">Address2</span>
<li class="norm-form-item" style="width: 100px"> <input class="gf-form-input gf-size-xl" type="text" ng-model="address.address2">
City
</li>
<li>
<input type="text" ng-model="address.city" class="norm-form-input" style="width: 193px">
</li>
<li class="norm-form-item" style="width: 75px">
Postal code
</li>
<li>
<input type="text" ng-model="address.zipCode" class="input-medium norm-form-input last" style="width: 193px">
</li>
</ul>
<div class="clearfix"></div>
</div> </div>
<div class="norm-form last"> <br>
<ul class="norm-form-list">
<li class="norm-form-item" style="width: 100px"> <div class="gf-form">
State <span class="gf-form-label gf-size-s">City</span>
</li> <input class="gf-form-input gf-size-xl" type="text" ng-model="address.city">
<li> </div>
<input type="text" ng-model="address.state" class="norm-form-input" style="width: 193px"> <div class="gf-form">
</li> <span class="gf-form-label gf-size-s">Postal code</span>
<li class="norm-form-item" style="width: 75px"> <input class="gf-form-input gf-size-xl" type="text" ng-model="address.zipCode">
Country </div>
</li> <br>
<li>
<input type="text" ng-model="address.country" class="norm-form-input last" style="width: 193px"> <div class="gf-form">
</li> <span class="gf-form-label gf-size-s">State</span>
</ul> <input class="gf-form-input gf-size-xl" type="text" ng-model="address.state">
<div class="clearfix"></div> </div>
<div class="gf-form">
<span class="gf-form-label gf-size-s">Country</span>
<input class="gf-form-input gf-size-xl" type="text" ng-model="address.country">
</div> </div>
<br> <div class="gf-form-button-row">
<button type="submit" class="btn btn-success" ng-click="updateAddress()">Update</button> <button type="submit" class="btn btn-success" ng-click="updateAddress()">Update</button>
<br> </div>
</form> </form>
</div> </div>
<h3>Org. Users</h3> <h3>Org. Users</h3>
<a href="org/users" class="btn btn-inverse">Manage</a> <a href="org/users" class="btn btn-inverse">Manage</a>
</div> </div>

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

@@ -103,64 +103,6 @@ hr {
} }
} }
@media (max-width: @navbarCollapseWidth) {
.navbar .nav-collapse {
.nav li > a {
border: none;
color: @grayLighter;
font-weight: normal;
text-shadow: none;
&:hover {
border: none;
background-color: @blue;
}
}
.nav .active > a {
border: none;
background-color: @blue;
}
.dropdown-menu a:hover {
background-color: @blue;
}
.navbar-form,
.navbar-search {
border-top: none;
border-bottom: none;
}
.nav-header {
color: rgba(128, 128, 128, 0.6);
}
}
.navbar-inverse .nav-collapse {
.nav li > a:hover {
background-color: #111;
}
.nav .active > a {
background-color: #111;
}
.nav li.dropdown.open > .dropdown-toggle,
.nav li.dropdown.active > .dropdown-toggle,
.nav li.dropdown.open.active > .dropdown-toggle {
background-color: #111;
}
}
}
.dropdown-menu {
.border-radius(0);
}
div.subnav { div.subnav {

8
public/less/forms.less
View File

@@ -33,14 +33,6 @@ input[type="checkbox"]:checked+label {
background: url(@checkboxImageUrl) 0px -21px no-repeat; background: url(@checkboxImageUrl) 0px -21px no-repeat;
} }
.gf-form {
padding-bottom: 10px;
.checkbox-label {
padding-left: 7px;
display: inline;
}
}
.gf-fluid-input { .gf-fluid-input {
border: none; border: none;
display: block; display: block;

204
public/less/normform.less
View File

@@ -1,214 +1,68 @@
.norm-form { .gf-form {
border-top: 3px solid @pageBackground; margin-top: 3px;
// border-left: 3px solid @pageBackground; margin-right: 3px;
// border-right: 3px solid @pageBackground; display: inline-block;
background: transparent;
&.last {
border-bottom: 1px solid @pageBackground;
}
&.borderless {
background: transparent;
border: none;
}
.checkbox-label { .checkbox-label {
display: inline; display: inline;
padding-right: 4px; padding: 8px 7px 8px 4px;
margin-bottom: 0; }
margin-left: 5px; .cr1 {
margin-left: 8px;
} }
} }
.norm-form-container-no-item-borders { .gf-form-group {
border: 1px solid @pageBackground; margin-bottom: 20px;
border-bottom: none;
.norm-form, .norm-form-item, [type=text].norm-form-input, [type=text].norm-form-clear-input {
border: none;
}
} }
.gf-form-button-row {
.spaced-form { margin-top: 15px;
.norm-form { margin-bottom: 10px;
margin: 7px 0;
}
} }
.borderless { .gf-form-label {
.norm-form-item, background-color: @labelBackground;
.norm-form-input { display: inline-block;
border: none;
}
}
.norm-form-container {
border-bottom: 1px solid @pageBackground;
}
.norm-form-btn {
padding: 7px 12px;
}
.norm-form-list {
list-style: none;
margin: 0;
>li {
float: left;
background: @labelBackground;
}
& .trans {
background: transparent;
}
}
.norm-form-flex-wrapper {
display: flex;
flex-direction: row;
float: none !important;
}
.grafana-metric-options {
margin-top: 25px;
}
.norm-form-item {
padding: 8px 7px; padding: 8px 7px;
display: inline-block;
font-weight: normal;
border-right: 3px solid @pageBackground;
color: @grayLighter;
display: inline-block;
.small; .small;
.has-open-function & {
padding-top: 25px;
}
.norm-form-disabled & {
color: @grafanaTargetColorHide;
}
&:hover, &:focus {
text-decoration: none;
}
&a:hover {
background: @grafanaTargetFuncBackground;
}
&.last {
border-right: none;
}
}
.norm-form-item-icon {
i {
width: 15px;
text-align: center;
display: inline-block;
}
}
.norm-form-func {
background: @grafanaTargetFuncBackground;
> a {
color: @grafanaTargetColor;
}
> a:hover {
color: @linkColor;
}
&.show-function-controls {
padding-top: 5px;
min-width: 100px;
text-align: center;
}
}
input[type=text].norm-form-func-param {
background: transparent;
border: none;
margin: 0;
padding: 0;
}
input[type=text].norm-form-clear-input {
padding: 8px 7px;
border: none;
margin: 0px;
background: transparent;
color: @grafanaTargetColor;
border-radius: 0;
border-right: 2px solid @pageBackground;
} }
[type=text], [type=text],
[type=email], [type=email],
[type=number], [type=number],
[type=password], { [type=password], {
&.norm-form-input { &.gf-form-input {
border: none; border: none;
border-right: 3px solid @pageBackground;
margin: 0px; margin: 0px;
border-radius: 0; border-radius: 0;
padding: 8px 6px; padding: 8px 6px;
height: 100%; height: 100%;
box-sizing: border-box; box-sizing: border-box;
font-size: 15px; font-size: 15px;
&.last {
border-right: none;
}
} }
} }
input[type=checkbox].norm-form-checkbox { input[type=checkbox].gf-form-checkbox {
margin: 0; margin: 0;
} }
.norm-form-textarea { select.gf-form-input {
height: 200px;
margin: 0;
box-sizing: border-box;
}
select.norm-form-input {
border: none; border: none;
border-right: 3px solid @pageBackground;
margin: 0px; margin: 0px;
border-radius: 0; border-radius: 0;
height: 36px; height: 36px;
padding: 9px 3px; padding: 9px 3px;
font-size: 15px; font-size: 15px;
&.last {
border-right: none;
}
} }
.norm-form-radio { .gf-size-xs { width: 60px;}
input[type=radio] { .gf-size-s { width: 80px;}
margin: 0; .gf-size-ms { width: 100px;}
} .gf-size-m { width: 120px; }
label { .gf-size-l { width: 150px; }
display: inline; .gf-size-xl { width: 200px; }
} .gf-size-xxl { width: 300px; }
} .gf-size-xxxl { width: 400px; }
.norm-form-item-large { width: 115px; }
.norm-form-item-xlarge { width: 150px; }
.norm-form-item-xxlarge { width: 200px; }
.norm-form-input.norm-form-item-xxlarge { .gf-size-auto { width: auto; }
width: 215px;
}
.norm-form-auto {
width: auto;
}
.norm-form-inner-box {
margin: 20px 0 20px 148px;
display: inline-block;
}

9
public/less/overrides.less
View File

@@ -1,12 +1,3 @@
// Media queries
// ---------------------
@media (max-width: 767px) {
div.panel {
width: 100% !important;
padding: 0px !important;
}
}
// Containers // Containers
// --------------------- // ---------------------
.container-fluid { .container-fluid {

3
public/less/page.less
View File

@@ -25,8 +25,7 @@
.page-container { .page-container {
background-color: @pageBackground; background-color: @pageBackground;
position: relative; position: relative;
padding: 25px 56px; padding: 25px 56px 10px 56px;
padding: 25px 56px;
max-width: 1060px; max-width: 1060px;
margin-left: 0; margin-left: 0;
height: 100%; height: 100%;

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

@@ -91,7 +91,7 @@
@headingsFontFamily: inherit; // inherit. empty to use BS default, @baseFontFamily @headingsFontFamily: inherit; // inherit. empty to use BS default, @baseFontFamily
@headingsFontWeight: normal; // instead of browser default, bold @headingsFontWeight: normal; // instead of browser default, bold
@headingsFontStyle: italic; @headingsFontStyle: normal;
@headingsColor: @textColor; // empty to use BS default, @textColor @headingsColor: @textColor; // empty to use BS default, @textColor

17
public/vendor/bootstrap/less/responsive-767px-max.less vendored
View File

@@ -5,23 +5,6 @@
@media (max-width: 767px) { @media (max-width: 767px) {
// Padding to set content in a bit
body {
padding-left: 20px;
padding-right: 20px;
}
// Negative indent the now static "fixed" navbar
.navbar-fixed-top,
.navbar-fixed-bottom,
.navbar-static-top {
margin-left: -20px;
margin-right: -20px;
}
// Remove padding on container given explicit padding set on body
.container-fluid {
padding: 0;
}
// TYPOGRAPHY // TYPOGRAPHY
// ---------- // ----------
// Reset horizontal dl // Reset horizontal dl