Skip to content

N
nexpie-grafana-theme
Commit 6b85a6fd by Torkel Ödegaard
Options

feat(apps): minor design update for apps view

parent db1ba30d
Showing with 98 additions and 95 deletions
public/app/features/apps/edit_ctrl.ts
...@@ -7,10 +7,9 @@ export class AppEditCtrl { ...@@ -7,10 +7,9 @@ export class AppEditCtrl {
appModel: any; appModel: any;
/** @ngInject */ /** @ngInject */
constructor(private backendSrv: any, private $routeParams: any) {} constructor(private backendSrv: any, private $routeParams: any) {
init() {
this.appModel = {}; this.appModel = {};
this.backendSrv.get(`/api/org/apps/${this.$routeParams.appId}/settings`).then(result => { this.backendSrv.get(`/api/org/apps/${this.$routeParams.appId}/settings`).then(result => {
this.appModel = result; this.appModel = result;
}); });
......
public/app/features/apps/partials/edit.html
...@@ -5,99 +5,99 @@ ...@@ -5,99 +5,99 @@
</navbar> </navbar>
<div class="page-container"> <div class="page-container">
<div class="apps-side-box"> <div class="flex-container">
<div class="apps-side-box-logo" > <div class="flex-column app-edit-logo-box">
<img src="{{ctrl.appModel.info.logos.large}}"> <img src="{{ctrl.appModel.info.logos.large}}">
</div> </div>
<ul class="app-side-box-links"> <div class="flex-column">
<li> <h1>
By <a href="{{ctrl.appModel.info.author.url}}" class="external-link" target="_blank">{{ctrl.appModel.info.author.name}}</a> {{ctrl.appModel.name}}
</li> </h1>
<li ng-repeat="link in ctrl.appModel.info.links"> <div class="app-edit-description">
<a href="{{link.url}}" class="external-link" target="_blank">{{link.name}}</a> {{ctrl.appModel.info.description}}<br>
</li> <span style="small">
</ul> Version: {{ctrl.appModel.info.version}} &nbsp; &nbsp; Updated: {{ctrl.appModel.info.updated}}
</div> </span>
</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="form-inline"> <div class="form-inline">
<editor-checkbox text="Enabled" model="ctrl.appModel.enabled" change="ctrl.toggleEnabled()"></editor-checkbox> <editor-checkbox text="Enabled" model="ctrl.appModel.enabled" change="ctrl.toggleEnabled()"></editor-checkbox>
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
<editor-checkbox text="Pinned" model="ctrl.appModel.pinned" change="ctrl.togglePinned()"></editor-checkbox> <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>
</div>
<section class="simple-box"> <section class="simple-box">
<h3 class="simple-box-header">Included with app:</h3> <h3 class="simple-box-header">Included with app:</h3>
<div class="flex-container"> <div class="flex-container">
<div class="simple-box-body simple-box-column"> <div class="simple-box-body simple-box-column">
<div class="simple-box-column-header"> <div class="simple-box-column-header">
<i class="fa fa-th-large"></i> <i class="fa fa-th-large"></i>
Dashboards Dashboards
</div>
<ul>
<li><em class="small">None</em></li>
</ul>
</div> </div>
<div class="simple-box-body simple-box-column"> <ul>
<div class="simple-box-column-header"> <li><em class="small">None</em></li>
<i class="fa fa-line-chart"></i> </ul>
Panels </div>
</div> <div class="simple-box-body simple-box-column">
<ul> <div class="simple-box-column-header">
<li><em class="small">None</em></li> <i class="fa fa-line-chart"></i>
</ul> Panels
</div> </div>
<div class="simple-box-body simple-box-column"> <ul>
<div class="simple-box-column-header"> <li><em class="small">None</em></li>
<i class="fa fa-database"></i> </ul>
Datasources </div>
</div> <div class="simple-box-body simple-box-column">
<ul> <div class="simple-box-column-header">
<li><em class="small">None</em></li> <i class="fa fa-database"></i>
</ul> Datasources
</div> </div>
<div class="simple-box-body simple-box-column"> <ul>
<div class="simple-box-column-header"> <li><em class="small">None</em></li>
<i class="fa fa-files-o"></i> </ul>
Pages </div>
</div> <div class="simple-box-body simple-box-column">
<ul> <div class="simple-box-column-header">
<li ng-repeat="page in ctrl.appModel.pages"> <i class="fa fa-files-o"></i>
<a href="{{page.url}}" class="external-link">{{page.name}}</a> Pages
</li>
</ul>
</div> </div>
<ul>
<li ng-repeat="page in ctrl.appModel.pages">
<a href="{{page.url}}" class="external-link">{{page.name}}</a>
</li>
</ul>
</div> </div>
</section>
<section class="simple-box"> </div>
<h3 class="simple-box-header">Dependencies:</h3> </section>
<div class="simple-box-body">
Grafana 2.6.x
</div>
</section>
<section class="simple-box"> <section class="simple-box">
<h3 class="simple-box-header">Configuration:</h3> <h3 class="simple-box-header">Dependencies:</h3>
<div class="simple-box-body"> <div class="simple-box-body">
<div ng-if="ctrl.appModel.appId"> Grafana 2.6.x
<app-config-view app-model="ctrl.appModel"></app-config-view> </div>
</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> </div>
</section> </div>
</section>
</div>
</div> </div>
public/less/apps.less
.apps-side-box {
float: left;
}
.apps-side-box-logo { .app-edit-logo-box {
padding: 15px; padding: 1.2rem;
background: @grafanaPanelBackground; background: @grafanaPanelBackground;
width: 120px;
text-align: center; text-align: center;
img { img {
max-width: 100px; max-width: 7rem;
} }
margin-bottom: 10px; margin-right: 2rem;
} }
.app-side-box-links { .app-edit-links {
list-style: none; list-style: none;
margin: 0; margin: 0 0 0 2rem;
li { li {
background: @grafanaPanelBackground; background: @grafanaPanelBackground;
margin-top: 4px; margin-top: 4px;
padding-left: 10px; padding: 0.2rem 1rem;
line-height: 25px;
} }
} }
.app-edit-description {
font-style: italic;
margin-bottom: 1.5rem;
}
public/less/simple-box.less
...@@ -44,3 +44,7 @@ ...@@ -44,3 +44,7 @@
.flex-container { .flex-container {
display: flex; display: flex;
} }
.flex-column {
flex-direction: row;
}
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