IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2024-11-26 19:00:54 -06:00
Code Issues Packages Projects Releases Wiki Activity

ux: table design work

Browse Source
This commit is contained in:
Torkel Ödegaard 2017-11-26 22:07:34 +01:00
parent 00df24b348
commit ac17684f50
7 changed files with 99 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
public/app/core/components/search/search.html
View File

@ -70,7 +70,6 @@
<span class="search-item__body">
<div class="search-item__body-title">{{::item.title}}</div>
<div class="search-item__body-sub-title" ng-show="item.folderTitle && section.hideHeader">
<i class="fa fa-folder-o"></i>
{{::item.folderTitle}}
</div>
</span>

1
public/app/core/routes/routes.ts
View File

@ -174,6 +174,7 @@ function setupAngularRoutes($routeProvider, $locationProvider) {
.when('/login', {
templateUrl: 'public/app/partials/login.html',
controller : 'LoginCtrl',
pageClass: 'page-login',
})
.when('/invite/:code', {
templateUrl: 'public/app/partials/signup_invited.html',

61
public/app/features/templating/partials/editor.html
View File

@ -37,36 +37,39 @@
<em>No template variables defined</em>
<br /> <br />
</div>
<table class="grafana-options-table">
<tr ng-repeat="variable in variables">
<td style="width: 1%">
<span class="template-variable">
${{variable.name}}
</span>
</td>
<td class="max-width" style="max-width: 200px;">
{{variable.query}}
</td>
<table class="filter-table filter-table--hover">
<thead>
<tr>
<th>Variable</th>
<th>Definition</th>
<th colspan="5"></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="variable in variables">
<td style="width: 1%">
<span ng-click="edit(variable)" class="pointer template-variable">
${{variable.name}}
</span>
</td>
<td style="max-width: 200px;" ng-click="edit(variable)" class="pointer max-width">
{{variable.query}}
</td>
<td style="width: 1%"><i ng-click="_.move(variables,$index,$index-1)" ng-hide="$first" class="pointer fa fa-arrow-up"></i></td>
<td style="width: 1%"><i ng-click="_.move(variables,$index,$index+1)" ng-hide="$last" class="pointer fa fa-arrow-down"></i></td>
<td style="width: 1%">
<a ng-click="duplicate(variable)" class="btn btn-inverse btn-mini">
Duplicate
</a>
</td>
<td style="width: 1%">
<a ng-click="edit(variable)" class="btn btn-inverse btn-mini">
<i class="fa fa-edit"></i>
Edit
</a>
</td>
<td style="width: 1%">
<a ng-click="removeVariable(variable)" class="btn btn-danger btn-mini">
<i class="fa fa-remove"></i>
</a>
</td>
</tr>
<td style="width: 1%"><i ng-click="_.move(variables,$index,$index-1)" ng-hide="$first" class="pointer fa fa-arrow-up"></i></td>
<td style="width: 1%"><i ng-click="_.move(variables,$index,$index+1)" ng-hide="$last" class="pointer fa fa-arrow-down"></i></td>
<td style="width: 1%">
<a ng-click="duplicate(variable)" class="btn btn-inverse btn-mini">
Duplicate
</a>
</td>
<td style="width: 1%">
<a ng-click="removeVariable(variable)" class="btn btn-danger btn-mini">
<i class="fa fa-remove"></i>
</a>
</td>
</tr>
</tbody>
</table>
</div>

2
public/sass/_variables.scss
View File

@ -155,7 +155,7 @@ $link-hover-decoration: none !default;
//
// Customizes the `.table` component with basic values, each used across all table variations.
$table-cell-padding: .75rem !default;
$table-cell-padding: 4px 10px !default;
$table-sm-cell-padding: .3rem !default;
// Forms

96
public/sass/components/_filter-table.scss
View File

@ -13,47 +13,67 @@
.filter-table {
width: 100%;
border-collapse: collapse;
}
border-collapse: separate;
.filter-table tr {
background-color: $list-item-bg;
border-bottom: 3px solid $page-bg;
}
tbody {
tr:nth-child(odd) {
background: $dark-2;
}
}
.filter-table th {
width: auto;
padding: $table-cell-padding;
text-align: left;
}
thead {
tr {
background: linear-gradient(0deg, #3c3f5a, #292f44);
}
}
.filter-table td {
padding: $table-cell-padding;
th {
width: auto;
padding: $table-cell-padding;
text-align: left;
line-height: 30px;
height: 30px;
white-space: nowrap;
}
&.filter-table__switch-cell {
padding: 0;
border-right: 3px solid $page-bg;
td {
padding: $table-cell-padding;
line-height: 30px;
height: 30px;
border-bottom: 1px solid black;
white-space: nowrap;
&.filter-table__switch-cell {
padding: 0;
border-right: 3px solid $page-bg;
}
}
.ellipsis {
display: block;
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.expanded {
border-color: $panel-bg;
}
.expanded > td {
padding-bottom: 0;
}
.filter-table__avatar {
width: 25px;
height: 25px;
border-radius: 50%;
}
&--hover {
tbody tr:hover {
background: $dark-3;
}
}
}
.filter-table .ellipsis {
display: block;
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.filter-table .expanded {
border-color: $panel-bg;
}
.filter-table .expanded > td {
padding-bottom: 0;
}
.filter-table__avatar {
width: 25px;
height: 25px;
border-radius: 50%;
}

2
public/sass/components/_navbar.scss
View File

@ -6,7 +6,7 @@
padding-left: $side-menu-width;
box-shadow: $navbarShadow;
z-index: 1;
background-color: $navbarBackground;
background: $navbarBackground;
}
.navbar-inner {

6
public/sass/pages/_login.scss
View File

@ -8,6 +8,12 @@
padding-top: $spacer * 5; /* BAD HACK - experiement to see how it looks */
}
.page-login {
.sidemenu {
display: none;
}
}
.login-form {
display: inline-block;
max-width: 24rem;