apitech
/
grafana
mirror of https://github.com/grafana/grafana
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat(apps): minor design update for apps view

Browse Source
pull/3795/head
Torkel Ödegaard 9 years ago
parent db1ba30df7
commit 6b85a6fd78
4 changed files with 98 additions and 95 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 5
      public/app/features/apps/edit_ctrl.ts
  2. 160
      public/app/features/apps/partials/edit.html
  3. 24
      public/less/apps.less
  4. 4
      public/less/simple-box.less

5
public/app/features/apps/edit_ctrl.ts
Unescape View File

@ -7,10 +7,9 @@ export class AppEditCtrl {
appModel: any;
/** @ngInject */
constructor(private backendSrv: any, private $routeParams: any) {}
init() {
constructor(private backendSrv: any, private $routeParams: any) {
this.appModel = {};
this.backendSrv.get(`/api/org/apps/${this.$routeParams.appId}/settings`).then(result => {
this.appModel = result;
});

160
public/app/features/apps/partials/edit.html
Unescape View File

@ -5,99 +5,99 @@
</navbar>
<div class="page-container">
<div class="apps-side-box">
<div class="apps-side-box-logo" >
<div class="flex-container">
<div class="flex-column app-edit-logo-box">
<img src="{{ctrl.appModel.info.logos.large}}">
</div>
<ul class="app-side-box-links">
<li>
By <a href="{{ctrl.appModel.info.author.url}}" class="external-link" target="_blank">{{ctrl.appModel.info.author.name}}</a>
</li>
<li ng-repeat="link in ctrl.appModel.info.links">
<a href="{{link.url}}" class="external-link" target="_blank">{{link.name}}</a>
</li>
</ul>
</div>
<div class="page-wide-margined" ng-init="ctrl.init()">
<h1>
{{ctrl.appModel.name}}
</h1>
<em>
{{ctrl.appModel.info.description}}<br>
<span style="small">
Version: {{ctrl.appModel.info.version}} &nbsp; &nbsp; Updated: {{ctrl.appModel.info.updated}}
</span>
</em>
<br><br>
<div class="flex-column">
<h1>
{{ctrl.appModel.name}}
</h1>
<div class="app-edit-description">
{{ctrl.appModel.info.description}}<br>
<span style="small">
Version: {{ctrl.appModel.info.version}} &nbsp; &nbsp; Updated: {{ctrl.appModel.info.updated}}
</span>
</div>
<div class="form-inline">
<editor-checkbox text="Enabled" model="ctrl.appModel.enabled" change="ctrl.toggleEnabled()"></editor-checkbox>
&nbsp; &nbsp; &nbsp;
<editor-checkbox text="Pinned" model="ctrl.appModel.pinned" change="ctrl.togglePinned()"></editor-checkbox>
<div class="form-inline">
<editor-checkbox text="Enabled" model="ctrl.appModel.enabled" change="ctrl.toggleEnabled()"></editor-checkbox>
&nbsp; &nbsp; &nbsp;
<editor-checkbox text="Pinned" model="ctrl.appModel.pinned" change="ctrl.togglePinned()"></editor-checkbox>
</div>
</div>
<div class="flex-column">
<ul class="app-edit-links">
<li>
By <a href="{{ctrl.appModel.info.author.url}}" class="external-link" target="_blank">{{ctrl.appModel.info.author.name}}</a>
</li>
<li ng-repeat="link in ctrl.appModel.info.links">
<a href="{{link.url}}" class="external-link" target="_blank">{{link.name}}</a>
</li>
</ul>
</div>
</div>
<section class="simple-box">
<h3 class="simple-box-header">Included with app:</h3>
<div class="flex-container">
<div class="simple-box-body simple-box-column">
<div class="simple-box-column-header">
<i class="fa fa-th-large"></i>
Dashboards
</div>
<ul>
<li><em class="small">None</em></li>
</ul>
<section class="simple-box">
<h3 class="simple-box-header">Included with app:</h3>
<div class="flex-container">
<div class="simple-box-body simple-box-column">
<div class="simple-box-column-header">
<i class="fa fa-th-large"></i>
Dashboards
</div>
<div class="simple-box-body simple-box-column">
<div class="simple-box-column-header">
<i class="fa fa-line-chart"></i>
Panels
</div>
<ul>
<li><em class="small">None</em></li>
</ul>
<ul>
<li><em class="small">None</em></li>
</ul>
</div>
<div class="simple-box-body simple-box-column">
<div class="simple-box-column-header">
<i class="fa fa-line-chart"></i>
Panels
</div>
<div class="simple-box-body simple-box-column">
<div class="simple-box-column-header">
<i class="fa fa-database"></i>
Datasources
</div>
<ul>
<li><em class="small">None</em></li>
</ul>
<ul>
<li><em class="small">None</em></li>
</ul>
</div>
<div class="simple-box-body simple-box-column">
<div class="simple-box-column-header">
<i class="fa fa-database"></i>
Datasources
</div>
<div class="simple-box-body simple-box-column">
<div class="simple-box-column-header">
<i class="fa fa-files-o"></i>
Pages
</div>
<ul>
<li ng-repeat="page in ctrl.appModel.pages">
<a href="{{page.url}}" class="external-link">{{page.name}}</a>
</li>
</ul>
<ul>
<li><em class="small">None</em></li>
</ul>
</div>
<div class="simple-box-body simple-box-column">
<div class="simple-box-column-header">
<i class="fa fa-files-o"></i>
Pages
</div>
<ul>
<li ng-repeat="page in ctrl.appModel.pages">
<a href="{{page.url}}" class="external-link">{{page.name}}</a>
</li>
</ul>
</div>
</section>
<section class="simple-box">
<h3 class="simple-box-header">Dependencies:</h3>
<div class="simple-box-body">
Grafana 2.6.x
</div>
</section>
</div>
</section>
<section class="simple-box">
<h3 class="simple-box-header">Configuration:</h3>
<div class="simple-box-body">
<div ng-if="ctrl.appModel.appId">
<app-config-view app-model="ctrl.appModel"></app-config-view>
</div>
<section class="simple-box">
<h3 class="simple-box-header">Dependencies:</h3>
<div class="simple-box-body">
Grafana 2.6.x
</div>
</section>
<section class="simple-box">
<h3 class="simple-box-header">Configuration:</h3>
<div class="simple-box-body">
<div ng-if="ctrl.appModel.appId">
<app-config-view app-model="ctrl.appModel"></app-config-view>
</div>
</section>
</div>
</section>
</div>
</div>

24
public/less/apps.less
Unescape View File

@ -1,26 +1,26 @@
.apps-side-box {
float: left;
}
.apps-side-box-logo {
padding: 15px;
.app-edit-logo-box {
padding: 1.2rem;
background: @grafanaPanelBackground;
width: 120px;
text-align: center;
img {
max-width: 100px;
max-width: 7rem;
}
margin-bottom: 10px;
margin-right: 2rem;
}
.app-side-box-links {
.app-edit-links {
list-style: none;
margin: 0;
margin: 0 0 0 2rem;
li {
background: @grafanaPanelBackground;
margin-top: 4px;
padding-left: 10px;
line-height: 25px;
padding: 0.2rem 1rem;
}
}
.app-edit-description {
font-style: italic;
margin-bottom: 1.5rem;
}

4
public/less/simple-box.less
Unescape View File

@ -44,3 +44,7 @@
.flex-container {
display: flex;
}
.flex-column {
flex-direction: row;
}

Write Preview
Loading…
Cancel
Save