From 97d3ae3a0e1c7da0877345fa429394822dec6443 Mon Sep 17 00:00:00 2001
From: RaNaN <Mast3rRaNaN@hotmail.de>
Date: Sat, 6 Oct 2012 22:42:17 +0200
Subject: template for file-view

---
 module/web/static/css/default/style.less    | 57 +++++++++++++++++++++++------
 module/web/static/js/views/fileView.js      |  4 +-
 module/web/templates/default/dashboard.html | 14 +++++++
 3 files changed, 63 insertions(+), 12 deletions(-)

diff --git a/module/web/static/css/default/style.less b/module/web/static/css/default/style.less
index 355f5a569..aa60fd8f3 100644
--- a/module/web/static/css/default/style.less
+++ b/module/web/static/css/default/style.less
@@ -13,6 +13,8 @@
 @yellow: #fee247;
 @blue: #3a79aa;
 @lightblue: lighten(spin(@blue, 5), 10%);
+@lighterblue: lighten(spin(@blue, 10), 20%);
+@lightestblue: lighten(spin(@blue, 20), 40%);
 @darkblue: darken(spin(@blue, -5), 10%);
 @darkerblue: darken(spin(@blue, -10), 20%);
 @emph: #FF7637;
@@ -358,36 +360,37 @@ footer h2 {
   list-style: none;
 }
 
+/*
+  Package View
+*/
+
 .package-view {
-  height: 30px;
-  width: 100%;
+  margin-bottom: 3px;
+}
+
+.package-view > div {
   color: @light;
   .gradient(top, @blue, @lightblue); //  background-color: @blue;
   font-weight: bold;
   border-radius: 5px;
-  margin-bottom: 3px;
   line-height: 28px;
 }
 
-.package-view > div {
-  height: 100%;
-}
-
-.package-view:hover {
+.package-view > div:hover {
   .gradient(top, @blue, @darkblue);
 }
 
-.package-view .package-row {
+.package-row {
   display: inline-block;
   height: 100%;
   padding-left: 8px;
 }
 
-.package-view .first {
+.package-row.first {
   width: 50%;
 }
 
-.package-view .second {
+.package-row.second {
   width: 30%;
   .gradient(top, @darkblue, @darkerblue);
 
@@ -401,4 +404,36 @@ footer h2 {
   display: inline;
   width: 20px;
   height: 20px;
+
+  canvas {
+    margin-bottom: -3px;
+  }
+}
+
+/*
+  File view
+*/
+
+.file-view {
+  margin-top: 3px;
+}
+
+.file-view > div {
+  border-radius: 5px;
+  .gradient(top,  @lighterblue, @lightestblue);
+  line-height: 26px;
+}
+
+.file-view > div:hover {
+  .gradient(top, @blue, @lightblue)
+}
+
+.file-row {
+  display: inline-block;
+  height: 100%;
+  padding-left: 8px;
+}
+
+.file-row.first {
+  width: 50%;
 }
\ No newline at end of file
diff --git a/module/web/static/js/views/fileView.js b/module/web/static/js/views/fileView.js
index 7db8112c8..1c96c61e2 100644
--- a/module/web/static/js/views/fileView.js
+++ b/module/web/static/js/views/fileView.js
@@ -4,6 +4,8 @@ define(['jquery', 'backbone', 'underscore'], function($, Backbone, _) {
     return Backbone.View.extend({
 
         tagName: 'li',
+        className: 'file-view',
+        template: _.template($("#template-file").html()),
         events: {
 
         },
@@ -12,7 +14,7 @@ define(['jquery', 'backbone', 'underscore'], function($, Backbone, _) {
         },
 
         render: function() {
-            this.$el.html(this.model.get('name'));
+            this.$el.html(this.template(this.model.toJSON()));
             return this;
         }
 
diff --git a/module/web/templates/default/dashboard.html b/module/web/templates/default/dashboard.html
index d8d06956f..67b3b8483 100644
--- a/module/web/templates/default/dashboard.html
+++ b/module/web/templates/default/dashboard.html
@@ -27,6 +27,20 @@
             </div>
         </div>
     </script>
+
+    <script type="text/template" id="template-file">
+        <div>
+            <div class="file-row first">
+                File <%= fid %>: <%= name %>
+            </div>
+            <div class="file-row second">
+                <%= download.statusmsg %>
+            </div>
+
+            <div class="file-row third">
+            </div>
+        </div>
+    </script>
 {% endblock %}
 
 {% block content %}
-- 
cgit v1.2.3