Skip to content

N
nexpie-grafana-theme
Commit 422decde by Torkel Ödegaard
Options

ux(): trying out flexbox for new form styles

parent 6fc2b696
Showing with 93 additions and 70 deletions
public/app/core/directives/misc.js
......@@ -69,7 +69,8 @@ function (angular, coreModule, kbn) {
' <label for="' + scope.$id + model + '" class="cr1"></label>';
template = template + label;
elem.replaceWith($compile(angular.element(template))(scope));
elem.addClass('gf-form-checkbox');
elem.html($compile(angular.element(template))(scope));
}
};
});
......
public/app/features/datasources/partials/edit.html
......@@ -13,16 +13,13 @@
<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="gf-form">
<span class="gf-form-label gf-size-xs">Name</span>
<input class="gf-form-input gf-size-max-xxl" type="text" ng-model="current.name" placeholder="My data source name" required>
<editor-checkbox text="Default" model="current.isDefault"></editor-checkbox>
</div>
<br>
<div class="gf-form">
<span class="gf-form-label gf-size-s">Type</span>
<span class="gf-form-label gf-size-xs">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>
......
public/app/features/datasources/partials/http_settings.html
......@@ -3,13 +3,12 @@
<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>
<span class="gf-form-label gf-size-xs">Url</span>
<input class="gf-form-input gf-size-max-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>
<br>
<div class="gf-form">
<span class="gf-form-label gf-size-s">
<span class="gf-form-label gf-size-sx">
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>
......@@ -17,31 +16,25 @@
<br>
<div class="gf-form">
<span class="gf-form-label gf-size-s">
<span class="gf-form-label gf-size-xs">
Http Auth
</span>
</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>
<div class="gf-form" ng-if="current.basicAuth">
<span class="gf-form-label gf-size-s">
<span class="gf-form-label gf-size-xs">
User
</span>
<input class="gf-form-input gf-size-xl" type="text" ng-model='current.basicAuthUser' placeholder="user" required></input>
<input class="gf-form-input gf-size-max-xxl" type="text" ng-model='current.basicAuthUser' placeholder="user" required></input>
</div>
<br>
<div class="gf-form" ng-if="current.basicAuth">
<span class="gf-form-label gf-size-s">
<span class="gf-form-label gf-size-xs">
Passord
</span>
<input class="gf-form-input gf-size-xl" type="password" ng-model='current.basicAuthPassword' placeholder="password" required></input>
<input class="gf-form-input gf-size-max-xxl" type="password" ng-model='current.basicAuthPassword' placeholder="password" required></input>
</div>
</div>
public/app/features/org/partials/orgDetails.html
......@@ -8,8 +8,8 @@
<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">
<span class="gf-form-label gf-size-xs">Name</span>
<input class="gf-form-input gf-size-max-xxl" type="text" required ng-model="org.name">
</div>
<div class="gf-form-button-row">
......@@ -20,33 +20,37 @@
<h3>Address</h3>
<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="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 class="gf-form-inline">
<div class="gf-form gf-size-max-xxxl">
<span class="gf-form-label gf-size-sm">Address1</span>
<input class="gf-form-input" type="text" ng-model="address.address1">
</div>
<div class="gf-form gf-size-max-xxxl">
<span class="gf-form-label gf-size-sm">Address2</span>
<input class="gf-form-input" type="text" ng-model="address.address2">
</div>
</div>
<br>
<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 class="gf-form-inline">
<div class="gf-form gf-size-max-xxxl">
<span class="gf-form-label gf-size-sm">City</span>
<input class="gf-form-input" type="text" ng-model="address.city">
</div>
<div class="gf-form gf-size-max-xxxl">
<span class="gf-form-label gf-size-sm">Postal code</span>
<input class="gf-form-input" type="text" ng-model="address.zipCode">
</div>
</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 class="gf-form-inline">
<div class="gf-form gf-size-max-xxxl">
<span class="gf-form-label gf-size-sm">State</span>
<input class="gf-form-input" type="text" ng-model="address.state">
</div>
<div class="gf-form gf-size-max-xxxl">
<span class="gf-form-label gf-size-sm">Country</span>
<input class="gf-form-input" type="text" ng-model="address.country">
</div>
</div>
<div class="gf-form-button-row">
......
public/sass/_grid-variables.scss
......@@ -34,3 +34,13 @@ $grid-gutter-width: 30px !default;
$enable-flex: false;
$form-sizes: (
xs: 60px,
sm: 80px,
md: 120px,
lg: 150px,
xl: 200px,
xxl: 300px,
xxxl: 400px
) !default;
public/sass/_old_responsive.scss
......@@ -34,12 +34,6 @@
// form styles
@include media-breakpoint-up(md) {
.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; }
.dashnav-dashboards-btn a {
max-width: 180px;
}
......
public/sass/base/_forms.scss
......@@ -54,7 +54,6 @@ textarea {
// Identify controls by their labels
label {
display: block;
margin-bottom: 5px;
}
// Form controls
......
public/sass/components/_gf-form.scss
$gf-form-margin: 4px;
.gf-form {
margin-top: 3px;
margin-right: 3px;
display: inline-block;
margin-top: $gf-form-margin;
margin-right: $gf-form-margin;
display: flex;
flex-direction: row;
align-items: center;
.checkbox-label {
display: inline;
cursor: pointer;
padding: 8px 7px 8px 4px;
}
.cr1 {
margin-left: 8px;
}
......@@ -16,9 +22,15 @@
margin-bottom: 20px;
}
.gf-form-flow {
float: left;
margin-right: 20px;
.gf-form-inline {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-content: flex-start;
.gf-form {
flex-grow: 1;
}
}
.gf-form-button-row {
......@@ -27,10 +39,16 @@
}
.gf-form-label {
flex-shrink: 0;
background-color: $labelBackground;
display: inline-block;
display: block;
padding: 8px 7px;
font-size: $fontSizeSmall;
margin-right: $gf-form-margin;
}
.gf-form-checkbox {
flex-shrink: 0;
}
[type=text],
......@@ -45,6 +63,9 @@
height: 100%;
box-sizing: border-box;
font-size: 15px;
display: block;
width: 100%;
margin-right: $gf-form-margin;
}
}
......@@ -56,16 +77,20 @@ select.gf-form-input {
padding: 2px 3px;
font-size: 15px;
box-sizing: content-box;
display: block;
width: 100%;
margin-right: $gf-form-margin;
}
@each $size, $value in $form-sizes {
.gf-size-#{$size} { width: $value; }
.gf-size-max-#{$size} {
max-width: $value;
}
}
.gf-size-xs { width: 60px; }
.gf-size-s { width: 80px; }
.gf-size-ms { width: 100px;}
.gf-size-m { width: 110px; }
.gf-size-l { width: 120px; }
.gf-size-xl { width: 150px; }
.gf-size-xxl { width: 200px; }
.gf-size-xxxl { width: 300px; }
.gf-size-auto { width: auto; }
.gf-size-max { width: 100%; }
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