Skip to content

N
nexpie-grafana-theme
Commit caa765ec by Torkel Ödegaard
Options

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

parent 1004515b
Showing with 143 additions and 448 deletions
public/app/features/datasources/partials/edit.html
......@@ -5,64 +5,48 @@
</navbar>
<div class="page-container">
<div class="page">
<h1 ng-show="isNew">Add 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>
<h1 ng-show="isNew">Add data source</h1>
<h1 ng-show="!isNew">Edit data source</h1>
<form name="editForm">
<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 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>
<form name="editForm">
<div class="gf-form-group">
<div class="gf-form">
<span class="gf-form-label gf-size-s">Name</span>
<input class="gf-form-input gf-size-xxl" type="text" ng-model="current.name" placeholder="My data source name" required>
</div>
<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 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 class="gf-form">
<editor-checkbox text="Default" model="current.isDefault"></editor-checkbox>
</div>
<br>
<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 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 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 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>
<br>
</form>
</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>
public/app/features/datasources/partials/http_settings.html
<br>
<h3>Http settings</h3>
<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="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 class="gf-form-group">
<div class="gf-form">
<span class="gf-form-label gf-size-s">Url</span>
<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>
</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>
<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>
<br>
<div class="gf-form">
<span class="gf-form-label gf-size-s">
Access <tip>Direct = url is used directly from browser, Proxy = Grafana backend will proxy the request</tip>
</span>
<select class="gf-form-input gf-size-auto" ng-model="current.access" ng-options="f for f in ['direct', 'proxy']"></select>
</div>
<div class="norm-form">
<ul class="norm-form-list">
<li class="norm-form-item" style="width: 80px">
Http Auth
</li>
<li class="norm-form-item trans">
<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>
<br>
<div class="gf-form">
<span class="gf-form-label gf-size-s">
Http Auth
</span>
</div>
<div class="norm-form" ng-if="current.basicAuth">
<ul class="norm-form-list">
<li class="norm-form-item small" style="width: 80px">
User
</li>
<li ng-if="current.basicAuth">
<input type="text" class="input-xlarge norm-form-input" ng-model='current.basicAuthUser' placeholder="user" required></input>
</li>
</ul>
<div class="clearfix"></div>
<span class="gf-form">
<editor-checkbox text="Basic Auth" model="current.basicAuth"></editor-checkbox>
</span>
<span class="gf-form">
<editor-checkbox text="With Credentials" model="current.withCredentials"></editor-checkbox><tip>Tip for with credentials</tip>
</span>
<br>
<div class="gf-form" ng-if="current.basicAuth">
<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 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="input-xlarge norm-form-input" ng-model='current.basicAuthPassword' placeholder="password" required></input>
</li>
</ul>
<div class="clearfix"></div>
<br>
<div class="gf-form" ng-if="current.basicAuth">
<span class="gf-form-label gf-size-s">
Passord
</span>
<input class="gf-form-input gf-size-xl" type="password" ng-model='current.basicAuthPassword' placeholder="password" required></input>
</div>
</div>
<br>
public/app/features/org/partials/orgDetails.html
......@@ -6,91 +6,58 @@
<h1>Preferences</h1>
<form name="orgForm">
<div class="norm-form last">
<ul class="norm-form-list">
<li class="norm-form-item" style="width: 100px">
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>
<form name="orgForm" class="gf-form-group">
<div class="gf-form">
<span class="gf-form-label gf-size-s">Name</span>
<input class="gf-form-input gf-size-xxl" type="text" required ng-model="org.name">
</div>
<br>
<button type="submit" class="btn btn-success" ng-click="update()">Update</button>
<br>
<div class="gf-form-button-row">
<button type="submit" class="btn btn-success" ng-click="update()">Update</button>
</div>
</form>
<section class="simple-box">
<h3 class="">Address</h3>
</section>
<h3>Address</h3>
<form name="addressForm">
<div class="norm-form">
<ul class="norm-form-list">
<li class="norm-form-item" style="width: 100px">
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 class="norm-form">
<ul class="norm-form-list">
<li class="norm-form-item" style="width: 100px">
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>
<form name="addressForm" class="gf-form-group">
<div class="gf-form">
<span class="gf-form-label gf-size-s">Address1</span>
<input class="gf-form-input gf-size-xl" type="text" ng-model="address.address1">
</div>
<div class="norm-form last">
<ul class="norm-form-list">
<li class="norm-form-item" style="width: 100px">
State
</li>
<li>
<input type="text" ng-model="address.state" class="norm-form-input" style="width: 193px">
</li>
<li class="norm-form-item" style="width: 75px">
Country
</li>
<li>
<input type="text" ng-model="address.country" class="norm-form-input last" style="width: 193px">
</li>
</ul>
<div class="clearfix"></div>
<div class="gf-form">
<span class="gf-form-label gf-size-s">Address2</span>
<input class="gf-form-input gf-size-xl" type="text" ng-model="address.address2">
</div>
<br>
<button type="submit" class="btn btn-success" ng-click="updateAddress()">Update</button>
<div class="gf-form">
<span class="gf-form-label gf-size-s">City</span>
<input class="gf-form-input gf-size-xl" type="text" ng-model="address.city">
</div>
<div class="gf-form">
<span class="gf-form-label gf-size-s">Postal code</span>
<input class="gf-form-input gf-size-xl" type="text" ng-model="address.zipCode">
</div>
<br>
<div class="gf-form">
<span class="gf-form-label gf-size-s">State</span>
<input class="gf-form-input gf-size-xl" type="text" ng-model="address.state">
</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 class="gf-form-button-row">
<button type="submit" class="btn btn-success" ng-click="updateAddress()">Update</button>
</div>
</form>
</div>
<h3>Org. Users</h3>
<a href="org/users" class="btn btn-inverse">Manage</a>
</div>
public/less/bootswatch.dark.less
......@@ -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 {
......
public/less/forms.less
......@@ -33,14 +33,6 @@ input[type="checkbox"]:checked+label {
background: url(@checkboxImageUrl) 0px -21px no-repeat;
}
.gf-form {
padding-bottom: 10px;
.checkbox-label {
padding-left: 7px;
display: inline;
}
}
.gf-fluid-input {
border: none;
display: block;
......
public/less/normform.less
.norm-form {
border-top: 3px solid @pageBackground;
// border-left: 3px solid @pageBackground;
// border-right: 3px solid @pageBackground;
background: transparent;
&.last {
border-bottom: 1px solid @pageBackground;
}
&.borderless {
background: transparent;
border: none;
}
.gf-form {
margin-top: 3px;
margin-right: 3px;
display: inline-block;
.checkbox-label {
display: inline;
padding-right: 4px;
margin-bottom: 0;
margin-left: 5px;
padding: 8px 7px 8px 4px;
}
}
.norm-form-container-no-item-borders {
border: 1px solid @pageBackground;
border-bottom: none;
.norm-form, .norm-form-item, [type=text].norm-form-input, [type=text].norm-form-clear-input {
border: none;
.cr1 {
margin-left: 8px;
}
}
.spaced-form {
.norm-form {
margin: 7px 0;
}
.gf-form-group {
margin-bottom: 20px;
}
.borderless {
.norm-form-item,
.norm-form-input {
border: none;
}
.gf-form-button-row {
margin-top: 15px;
margin-bottom: 10px;
}
.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;
.gf-form-label {
background-color: @labelBackground;
display: inline-block;
font-weight: normal;
border-right: 3px solid @pageBackground;
color: @grayLighter;
display: inline-block;
.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;
.small;
}
[type=text],
[type=email],
[type=number],
[type=password], {
&.norm-form-input {
&.gf-form-input {
border: none;
border-right: 3px solid @pageBackground;
margin: 0px;
border-radius: 0;
padding: 8px 6px;
height: 100%;
box-sizing: border-box;
font-size: 15px;
&.last {
border-right: none;
}
}
}
input[type=checkbox].norm-form-checkbox {
input[type=checkbox].gf-form-checkbox {
margin: 0;
}
.norm-form-textarea {
height: 200px;
margin: 0;
box-sizing: border-box;
}
select.norm-form-input {
select.gf-form-input {
border: none;
border-right: 3px solid @pageBackground;
margin: 0px;
border-radius: 0;
height: 36px;
padding: 9px 3px;
padding: 9px 3px;
font-size: 15px;
&.last {
border-right: none;
}
}
.norm-form-radio {
input[type=radio] {
margin: 0;
}
label {
display: inline;
}
}
.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 {
width: 215px;
}
.gf-size-xs { width: 60px;}
.gf-size-s { width: 80px;}
.gf-size-ms { width: 100px;}
.gf-size-m { width: 120px; }
.gf-size-l { width: 150px; }
.gf-size-xl { width: 200px; }
.gf-size-xxl { width: 300px; }
.gf-size-xxxl { width: 400px; }
.norm-form-auto {
width: auto;
}
.norm-form-inner-box {
margin: 20px 0 20px 148px;
display: inline-block;
}
.gf-size-auto { width: auto; }
public/less/overrides.less
// Media queries
// ---------------------
@media (max-width: 767px) {
div.panel {
width: 100% !important;
padding: 0px !important;
}
}
// Containers
// ---------------------
.container-fluid {
......
public/less/page.less
......@@ -25,8 +25,7 @@
.page-container {
background-color: @pageBackground;
position: relative;
padding: 25px 56px;
padding: 25px 56px;
padding: 25px 56px 10px 56px;
max-width: 1060px;
margin-left: 0;
height: 100%;
......
public/less/variables.light.less
......@@ -91,7 +91,7 @@
@headingsFontFamily: inherit; // inherit. empty to use BS default, @baseFontFamily
@headingsFontWeight: normal; // instead of browser default, bold
@headingsFontStyle: italic;
@headingsFontStyle: normal;
@headingsColor: @textColor; // empty to use BS default, @textColor
......
public/vendor/bootstrap/less/responsive-767px-max.less
......@@ -5,23 +5,6 @@
@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
// ----------
// Reset horizontal dl
......
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