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 {
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;
});
......
public/app/features/apps/partials/edit.html
......@@ -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>
public/less/apps.less
.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;
}
public/less/simple-box.less
......@@ -44,3 +44,7 @@
.flex-container {
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