Skip to content

N
nexpie-grafana-theme
Commit 701a2fdc by Torkel Ödegaard
Options

ux(): tweaks and polish, and also simpifying width classes, gf-size-xxx and… 

ux(): tweaks and polish, and also simpifying width classes, gf-size-xxx and gf-size-max-xx are now width-(1-30), and max-width-(1-30)
parent 995f1749
Showing with 60 additions and 45 deletions
public/app/features/datasources/partials/edit.html
...@@ -13,13 +13,13 @@ ...@@ -13,13 +13,13 @@
<form name="editForm"> <form name="editForm">
<div class="gf-form-group"> <div class="gf-form-group">
<div class="gf-form"> <div class="gf-form">
<span class="gf-form-label gf-size-sm">Name</span> <span class="gf-form-label width-7">Name</span>
<input class="gf-form-input gf-size-max-xxl" type="text" ng-model="current.name" placeholder="My data source name" required> <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> <editor-checkbox text="Default" model="current.isDefault"></editor-checkbox>
</div> </div>
<div class="gf-form"> <div class="gf-form">
<span class="gf-form-label gf-size-sm">Type</span> <span class="gf-form-label width-7">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> <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>
</div> </div>
......
public/app/features/datasources/partials/http_settings.html
...@@ -4,19 +4,19 @@ ...@@ -4,19 +4,19 @@
<h3 class="page-heading">Http settings</h3> <h3 class="page-heading">Http settings</h3>
<div class="gf-form"> <div class="gf-form">
<span class="gf-form-label gf-size-sm">Url</span> <span class="gf-form-label width-7">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> <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> </div>
<div class="gf-form"> <div class="gf-form">
<span class="gf-form-label gf-size-sm"> <span class="gf-form-label width-7">
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>
</span> </span>
<select class="gf-form-input gf-size-auto" 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>
</div> </div>
<div class="gf-form"> <div class="gf-form">
<span class="gf-form-label gf-size-sm"> <span class="gf-form-label width-7">
Http Auth Http Auth
</span> </span>
<editor-checkbox text="Basic Auth" model="current.basicAuth"></editor-checkbox> <editor-checkbox text="Basic Auth" model="current.basicAuth"></editor-checkbox>
...@@ -24,14 +24,14 @@ ...@@ -24,14 +24,14 @@
</div> </div>
<div class="gf-form" ng-if="current.basicAuth"> <div class="gf-form" ng-if="current.basicAuth">
<span class="gf-form-label gf-size-sm"> <span class="gf-form-label width-7">
User User
</span> </span>
<input class="gf-form-input gf-size-max-xxl" 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> </div>
<div class="gf-form" ng-if="current.basicAuth"> <div class="gf-form" ng-if="current.basicAuth">
<span class="gf-form-label gf-size-sm"> <span class="gf-form-label width-7">
Passord Passord
</span> </span>
<input class="gf-form-input gf-size-max-xxl" 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>
......
public/app/features/org/partials/orgDetails.html
...@@ -25,33 +25,33 @@ ...@@ -25,33 +25,33 @@
<form name="addressForm" class="gf-form-group"> <form name="addressForm" class="gf-form-group">
<div class="gf-form-inline"> <div class="gf-form-inline">
<div class="gf-form gf-size-max-xxxl"> <div class="gf-form gf-size-max-xxxl">
<span class="gf-form-label gf-size-sm">Address1</span> <span class="gf-form-label width-7">Address1</span>
<input class="gf-form-input" type="text" ng-model="address.address1"> <input class="gf-form-input" type="text" ng-model="address.address1">
</div> </div>
<div class="gf-form gf-size-max-xxxl"> <div class="gf-form gf-size-max-xxxl">
<span class="gf-form-label gf-size-sm">Address2</span> <span class="gf-form-label width-7">Address2</span>
<input class="gf-form-input" type="text" ng-model="address.address2"> <input class="gf-form-input" type="text" ng-model="address.address2">
</div> </div>
</div> </div>
<div class="gf-form-inline"> <div class="gf-form-inline">
<div class="gf-form gf-size-max-xxxl"> <div class="gf-form gf-size-max-xxxl">
<span class="gf-form-label gf-size-sm">City</span> <span class="gf-form-label width-7">City</span>
<input class="gf-form-input" type="text" ng-model="address.city"> <input class="gf-form-input" type="text" ng-model="address.city">
</div> </div>
<div class="gf-form gf-size-max-xxxl"> <div class="gf-form gf-size-max-xxxl">
<span class="gf-form-label gf-size-sm">Postal code</span> <span class="gf-form-label width-7">Postal code</span>
<input class="gf-form-input" type="text" ng-model="address.zipCode"> <input class="gf-form-input" type="text" ng-model="address.zipCode">
</div> </div>
</div> </div>
<div class="gf-form-inline"> <div class="gf-form-inline">
<div class="gf-form gf-size-max-xxxl"> <div class="gf-form gf-size-max-xxxl">
<span class="gf-form-label gf-size-sm">State</span> <span class="gf-form-label width-7">State</span>
<input class="gf-form-input" type="text" ng-model="address.state"> <input class="gf-form-input" type="text" ng-model="address.state">
</div> </div>
<div class="gf-form gf-size-max-xxxl"> <div class="gf-form gf-size-max-xxxl">
<span class="gf-form-label gf-size-sm">Country</span> <span class="gf-form-label width-7">Country</span>
<input class="gf-form-input" type="text" ng-model="address.country"> <input class="gf-form-input" type="text" ng-model="address.country">
</div> </div>
</div> </div>
......
public/app/features/playlist/partials/playlist.html
...@@ -9,11 +9,11 @@ ...@@ -9,11 +9,11 @@
<div class="gf-form-group"> <div class="gf-form-group">
<div class="gf-form"> <div class="gf-form">
<span class="gf-form-label gf-size-sm">Name</span> <span class="gf-form-label width-7">Name</span>
<input type="text" required ng-model="ctrl.playlist.name" class="gf-form-input gf-size-max-xxl"> <input type="text" required ng-model="ctrl.playlist.name" class="gf-form-input gf-size-max-xxl">
</div> </div>
<div class="gf-form"> <div class="gf-form">
<span class="gf-form-label gf-size-sm">Interval</span> <span class="gf-form-label width-7">Interval</span>
<input type="text" required ng-model="ctrl.playlist.interval" placeholder="5m" class="gf-form-input gf-size-max-xxl"> <input type="text" required ng-model="ctrl.playlist.interval" placeholder="5m" class="gf-form-input gf-size-max-xxl">
</div> </div>
</div> </div>
......
public/app/features/profile/partials/profile.html
...@@ -10,19 +10,19 @@ ...@@ -10,19 +10,19 @@
<h3 class="page-heading">Preferences</h3> <h3 class="page-heading">Preferences</h3>
<div class="gf-form"> <div class="gf-form">
<span class="gf-form-label gf-size-sm">Name</span> <span class="gf-form-label width-7">Name</span>
<input class="gf-form-input gf-size-max-xxl" type="text" required ng-model="user.name" > <input class="gf-form-input gf-size-max-xxl" type="text" required ng-model="user.name" >
</div> </div>
<div class="gf-form"> <div class="gf-form">
<span class="gf-form-label gf-size-sm">Email</span> <span class="gf-form-label width-7">Email</span>
<input class="gf-form-input gf-size-max-xxl" type="email" required ng-model="user.email"> <input class="gf-form-input gf-size-max-xxl" type="email" required ng-model="user.email">
</div> </div>
<div class="gf-form"> <div class="gf-form">
<span class="gf-form-label gf-size-sm">Username</span> <span class="gf-form-label width-7">Username</span>
<input class="gf-form-input gf-size-max-xxl" type="text" required ng-model="user.login"> <input class="gf-form-input gf-size-max-xxl" type="text" required ng-model="user.login">
</div> </div>
<div class="gf-form"> <div class="gf-form">
<span class="gf-form-label gf-size-sm">UI Theme</span> <span class="gf-form-label width-7">UI Theme</span>
<select class="gf-form-input gf-size-auto" ng-model="user.theme" ng-options="f for f in ['dark', 'light']"></select> <select class="gf-form-input gf-size-auto" ng-model="user.theme" ng-options="f for f in ['dark', 'light']"></select>
</div> </div>
......
public/app/partials/login.html
...@@ -19,16 +19,16 @@ ...@@ -19,16 +19,16 @@
<form name="loginForm" class="login-form gf-form-group"> <form name="loginForm" class="login-form gf-form-group">
<div class="gf-form" ng-if="loginMode"> <div class="gf-form" ng-if="loginMode">
<span class="gf-form-label gf-size-sm">User</span> <span class="gf-form-label width-7">User</span>
<input type="text" name="username" class="gf-form-input gf-size-max-xl" required ng-model='formModel.user' placeholder={{loginHint}}> <input type="text" name="username" class="gf-form-input gf-size-max-xl" required ng-model='formModel.user' placeholder={{loginHint}}>
</div> </div>
<div class="gf-form" ng-if="loginMode"> <div class="gf-form" ng-if="loginMode">
<span class="gf-form-label gf-size-sm">Password</span> <span class="gf-form-label width-7">Password</span>
<input type="password" name="password" class="gf-form-input gf-size-max-xl" required ng-model="formModel.password" id="inputPassword" placeholder="password"> <input type="password" name="password" class="gf-form-input gf-size-max-xl" required ng-model="formModel.password" id="inputPassword" placeholder="password">
</div> </div>
<div class="gf-form" ng-if="!loginMode"> <div class="gf-form" ng-if="!loginMode">
<span class="gf-form-label gf-size-sm">Email</span> <span class="gf-form-label width-7">Email</span>
<input type="email" class="gf-form-input gf-size-max-xl" required ng-model='formModel.email' placeholder="email"> <input type="email" class="gf-form-input gf-size-max-xl" required ng-model='formModel.email' placeholder="email">
</div> </div>
......
public/app/partials/panelgeneral.html
<div class="gf-form-group"> <div class="gf-form-group">
<div class="gf-form-inline"> <div class="gf-form-inline">
<div class="gf-form gf-size-max-xxl"> <div class="gf-form gf-size-max-xxl">
<span class="gf-form-label gf-size-sm">Title</span> <span class="gf-form-label width-7">Title</span>
<input type="text" class="gf-form-input" ng-model='ctrl.panel.title'></input> <input type="text" class="gf-form-input" ng-model='ctrl.panel.title'></input>
</div> </div>
<div class="gf-form"> <div class="gf-form">
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
<select class="gf-form-input gf-size-auto" ng-model="ctrl.panel.span" ng-options="f for f in [0,1,2,3,4,5,6,7,8,9,10,11,12]"></select> <select class="gf-form-input gf-size-auto" ng-model="ctrl.panel.span" ng-options="f for f in [0,1,2,3,4,5,6,7,8,9,10,11,12]"></select>
</div> </div>
<div class="gf-form gf-size-max-xxl"> <div class="gf-form gf-size-max-xxl">
<span class="gf-form-label gf-size-sm">Height</span> <span class="gf-form-label width-7">Height</span>
<input type="text" class="gf-form-input gf-size-max-xs" ng-model='ctrl.panel.height' placeholder="100px"></input> <input type="text" class="gf-form-input gf-size-max-xs" ng-model='ctrl.panel.height' placeholder="100px"></input>
<editor-checkbox text="Transparent" model="ctrl.panel.transparent"></editor-checkbox> <editor-checkbox text="Transparent" model="ctrl.panel.transparent"></editor-checkbox>
</div> </div>
...@@ -17,7 +17,7 @@ ...@@ -17,7 +17,7 @@
<div class="gf-form-inline"> <div class="gf-form-inline">
<div class="gf-form gf-size-max-xxl"> <div class="gf-form gf-size-max-xxl">
<span class="gf-form-label gf-size-sm">Repeat Panel</span> <span class="gf-form-label width-7">Repeat Panel</span>
<select class="gf-form-input" ng-model="ctrl.panel.repeat" ng-options="f.name as f.name for f in ctrl.dashboard.templating.list"> <select class="gf-form-input" ng-model="ctrl.panel.repeat" ng-options="f.name as f.name for f in ctrl.dashboard.templating.list">
<option value=""></option> <option value=""></option>
</select> </select>
......
public/app/partials/signup_invited.html
...@@ -21,19 +21,19 @@ ...@@ -21,19 +21,19 @@
<form name="inviteForm" class="login-form gf-form-group"> <form name="inviteForm" class="login-form gf-form-group">
<div class="gf-form"> <div class="gf-form">
<span class="gf-form-label gf-size-sm">Email</span> <span class="gf-form-label width-7">Email</span>
<input type="email" name="email" class="gf-form-input gf-size-max-xxl" required ng-model='formModel.email' placeholder="Email"> <input type="email" name="email" class="gf-form-input gf-size-max-xxl" required ng-model='formModel.email' placeholder="Email">
</div> </div>
<div class="gf-form"> <div class="gf-form">
<span class="gf-form-label gf-size-sm">Name</span> <span class="gf-form-label width-7">Name</span>
<input type="text" name="name" class="gf-form-input gf-size-max-xxl" ng-model='formModel.name' placeholder="Name (optional)"> <input type="text" name="name" class="gf-form-input gf-size-max-xxl" ng-model='formModel.name' placeholder="Name (optional)">
</div> </div>
<div class="gf-form"> <div class="gf-form">
<span class="gf-form-label gf-size-sm">Username</span> <span class="gf-form-label width-7">Username</span>
<input type="text" name="username" class="gf-form-input gf-size-max-xxl" required ng-model='formModel.username' placeholder="Username"> <input type="text" name="username" class="gf-form-input gf-size-max-xxl" required ng-model='formModel.username' placeholder="Username">
</div> </div>
<div class="gf-form"> <div class="gf-form">
<span class="gf-form-label gf-size-sm">Password</span> <span class="gf-form-label width-7">Password</span>
<input type="password" name="password" class="gf-form-input gf-size-max-xxl" required ng-model="formModel.password" id="inputPassword" placeholder="password"> <input type="password" name="password" class="gf-form-input gf-size-max-xxl" required ng-model="formModel.password" id="inputPassword" placeholder="password">
</div> </div>
......
public/app/plugins/datasource/influxdb/partials/config.html
...@@ -5,19 +5,19 @@ ...@@ -5,19 +5,19 @@
<div class="gf-form-group"> <div class="gf-form-group">
<div class="gf-form-inline"> <div class="gf-form-inline">
<div class="gf-form gf-size-max-xxxl"> <div class="gf-form max-width-30">
<span class="gf-form-label gf-size-sm">Database</span> <span class="gf-form-label width-7">Database</span>
<input type="text" class="gf-form-input" ng-model='ctrl.current.database' placeholder="" required></input> <input type="text" class="gf-form-input" ng-model='ctrl.current.database' placeholder="" required></input>
</div> </div>
</div> </div>
<div class="gf-form-inline"> <div class="gf-form-inline">
<div class="gf-form gf-size-max-xxl"> <div class="gf-form max-width-15">
<span class="gf-form-label gf-size-sm">User</span> <span class="gf-form-label width-7">User</span>
<input type="text" class="gf-form-input" ng-model='ctrl.current.user' placeholder="" required></input> <input type="text" class="gf-form-input" ng-model='ctrl.current.user' placeholder="" required></input>
</div> </div>
<div class="gf-form gf-size-max-xxl"> <div class="gf-form max-width-15">
<span class="gf-form-label gf-size-sm">Password</span> <span class="gf-form-label width-7">Password</span>
<input type="password" class="gf-form-input" ng-model='ctrl.current.password' placeholder="" required></input> <input type="password" class="gf-form-input" ng-model='ctrl.current.password' placeholder="" required></input>
</div> </div>
</div> </div>
......
public/sass/_variables.dark.scss
...@@ -8,17 +8,17 @@ $black: #000; ...@@ -8,17 +8,17 @@ $black: #000;
// ------------------------- // -------------------------
$black: #000; $black: #000;
$dark-1: #141414; // (body) $dark-1: #141414;
$dark-2: #1f1d1d; // ($gray-darker) $dark-2: #1f1d1d;
$dark-3: #262626; // ($gray-dark) $dark-3: #262626;
$dark-4: #333333; $dark-4: #333333;
$dark-5: #444444; $dark-5: #444444;
$gray-1: #555555; $gray-1: #555555;
$gray-2: #6e7580; $gray-2: #7B7B7B;
$gray-3: #b3b3b3; $gray-3: #b3b3b3;
$gray-4: #cfd4d9; $gray-4: #D8D9DA;
$gray-5: #e8edf0; $gray-5: #ECECEC;
$gray-6: #f7f9fa; $gray-6: #f4f5f8;
$gray-7: #fbfbfb; $gray-7: #fbfbfb;
$white: #fff; $white: #fff;
......
public/sass/_variables.light.scss
...@@ -13,9 +13,9 @@ $black: #000; ...@@ -13,9 +13,9 @@ $black: #000;
// ------------------------- // -------------------------
$black: #000; $black: #000;
$dark-1: #141414; // (body) $dark-1: #141414;
$dark-2: #1f1d1d; // ($gray-darker) $dark-2: #1f1d1d;
$dark-3: #262626; // ($gray-dark) $dark-3: #262626;
$dark-4: #333333; $dark-4: #333333;
$dark-5: #444444; $dark-5: #444444;
$gray-1: #555555; $gray-1: #555555;
......
public/sass/_variables.scss
...@@ -185,6 +185,7 @@ $input-height-lg: (($font-size-lg * $line-height-lg) + ($input-pa ...@@ -185,6 +185,7 @@ $input-height-lg: (($font-size-lg * $line-height-lg) + ($input-pa
$input-height-sm: (($font-size-sm * $line-height-sm) + ($input-padding-y-sm * 2)) !default; $input-height-sm: (($font-size-sm * $line-height-sm) + ($input-padding-y-sm * 2)) !default;
$form-group-margin-bottom: $spacer-y !default; $form-group-margin-bottom: $spacer-y !default;
$gf-form-margin: 0.2rem;
$cursor-disabled: not-allowed !default; $cursor-disabled: not-allowed !default;
......
public/sass/utils/_spacings.scss
...@@ -28,6 +28,20 @@ ...@@ -28,6 +28,20 @@
} }
} }
// widths
@for $i from 1 through 30 {
.width-#{$i} {
width: ($spacer * $i) - $gf-form-margin;
}
}
@for $i from 1 through 30 {
.max-width-#{$i} {
max-width: ($spacer * $i) - $gf-form-margin;
flex-grow: 1;
}
}
// Positioning // Positioning
.pos-f-t { .pos-f-t {
......
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