From 4c59e48cc277138681524ffed80c8d4ab2535810 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel.odegaard@gmail.com>
Date: Tue, 12 Jan 2016 12:25:07 +0100
Subject: [PATCH] feat(apps): worked on apps edit view styles

---
 public/app/features/apps/partials/edit.html | 64 ++++++++++++++++++++-
 public/less/grafana.less                    |  1 +
 public/less/simple-box.less                 | 46 +++++++++++++++
 3 files changed, 109 insertions(+), 2 deletions(-)
 create mode 100644 public/less/simple-box.less

diff --git a/public/app/features/apps/partials/edit.html b/public/app/features/apps/partials/edit.html
index da029b51b8c..9b041270d28 100644
--- a/public/app/features/apps/partials/edit.html
+++ b/public/app/features/apps/partials/edit.html
@@ -21,7 +21,7 @@
 	</div>
 
   <div class="page-wide-margined" ng-init="ctrl.init()">
-		<h2>{{ctrl.appModel.name}}</h2>
+		<h1>{{ctrl.appModel.name}}</h1>
 		<em>
 			{{ctrl.appModel.info.description}}
 		</em>
@@ -33,6 +33,66 @@
 			<editor-checkbox text="Pinned" model="ctrl.appModel.pinned" change="ctrl.togglePinned()"></editor-checkbox>
 		</div>
 
-			<app-config-loader></app-config-loader>
+		<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>Test</li>
+						<li>Test2</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>
+					<ul>
+						<li>Test</li>
+						<li>Test2</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>
+					<ul>
+						<li>Test</li>
+						<li>Test2</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>Test</li>
+						<li>Test2</li>
+					</ul>
+				</div>
+
+			</div>
+		</section>
+
+		<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>
+		</section>
+
+		<app-config-loader></app-config-loader>
 	</div>
 </div>
diff --git a/public/less/grafana.less b/public/less/grafana.less
index 6e31e628c82..9cf3630db3e 100644
--- a/public/less/grafana.less
+++ b/public/less/grafana.less
@@ -25,6 +25,7 @@
 @import "filter-controls.less";
 @import "filter-list.less";
 @import "filter-table.less";
+@import "simple-box.less";
 
 .row-control-inner {
   padding:0px;
diff --git a/public/less/simple-box.less b/public/less/simple-box.less
new file mode 100644
index 00000000000..65cd63fe0e3
--- /dev/null
+++ b/public/less/simple-box.less
@@ -0,0 +1,46 @@
+
+@simpleBoxBorderWidth:  0.2rem;
+@simpleBoxMargin:  1.5rem;
+@simpleBoxBodyPadding:  0.5rem 0 0.5rem 1rem;
+
+.simple-box {
+  margin-top: @simpleBoxMargin;
+  background: @grafanaPanelBackground;
+}
+
+.simple-box-header {
+  font-weight: normal;
+  line-height: 2.5rem;
+  color: @textColor;
+  margin: 0;
+  padding-left: 1rem;
+  border-bottom: @simpleBoxBorderWidth solid @bodyBackground;
+}
+
+.simple-box-column {
+  flex-direction: row;
+  width: 25%;
+  border-right: @simpleBoxBorderWidth solid @bodyBackground;
+  ul {
+    margin: 0.7rem 0 1rem 1.2rem;
+  }
+}
+
+.simple-box-column:last-child {
+  border: none;
+}
+
+.simple-box-column-header {
+  font-size: @fontSizeLarge;
+  i {
+    padding-right: 0.3rem;
+  }
+}
+
+.simple-box-body {
+  padding: @simpleBoxBodyPadding;
+}
+
+.flex-container {
+  display: flex;
+}