From 9a8389790a0f084dad285ab3047d655c675e3147 Mon Sep 17 00:00:00 2001
From: RaNaN <Mast3rRaNaN@hotmail.de>
Date: Tue, 25 Dec 2012 14:40:21 +0100
Subject: improved add dialog + package view
---
module/web/static/css/default/dashboard.less | 32 +++++++++++--
module/web/static/css/default/style.less | 56 +++++++++++++++-------
module/web/static/js/views/packageView.js | 20 ++++----
.../templates/default/backbone/linkgrabber.html | 13 ++---
module/web/templates/default/backbone/modal.html | 2 +-
module/web/templates/default/dashboard.html | 22 +++++++--
6 files changed, 106 insertions(+), 39 deletions(-)
(limited to 'module/web')
diff --git a/module/web/static/css/default/dashboard.less b/module/web/static/css/default/dashboard.less
index e60a21dfb..0c749eb36 100644
--- a/module/web/static/css/default/dashboard.less
+++ b/module/web/static/css/default/dashboard.less
@@ -110,18 +110,42 @@
.package-row.third {
line-height: 26px;
+
}
.package-view a {
color: @light;
}
+// Tag area with different effect on hover
+.tag-area {
+ display: inline-block;
+
+ .badge i {
+ cursor: pointer;
+ &:hover {
+ background-position: -312px 0; // Remove icon
+ }
+ }
+
+ .badge-ghost {
+ visibility: hidden;
+ cursor: pointer;
+ opacity: 0.5;
+ }
+
+ &:hover .badge-ghost {
+ visibility: visible;
+ }
+
+}
+
// Box containing the files
.package-view > ul {
overflow: hidden;
- .gradient(left, @light, @greenLight);
-// box-shadow: 0 0 5px black;
+ .gradient(left, @light, @greenLight); // box-shadow: 0 0 5px black;
}
+
/*
File view
*/
@@ -131,8 +155,7 @@
}
.file-view > div {
- border-radius: 5px;
-// .gradient(top, @blueLighter, @blueLightest);
+ border-radius: 5px; // .gradient(top, @blueLighter, @blueLightest);
line-height: 26px;
}
@@ -154,6 +177,7 @@
.file-row.second {
width: 30%;
}
+
/*
FANCY CHECKBOXES
*/
diff --git a/module/web/static/css/default/style.less b/module/web/static/css/default/style.less
index e1b4e417e..7ad764542 100644
--- a/module/web/static/css/default/style.less
+++ b/module/web/static/css/default/style.less
@@ -161,27 +161,32 @@ a:hover {
}
.btn-yellow {
- background-color: hsl(51, 99%, 55%) !important;
+ background-color: hsl(53, 96%, 44%) !important;
background-repeat: repeat-x;
- background-image: -khtml-gradient(linear, left top, left bottom, from(#feeb80), to(#fddb1a));
- background-image: -moz-linear-gradient(top, #feeb80, #fddb1a);
- background-image: -ms-linear-gradient(top, #feeb80, #fddb1a);
- background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #feeb80), color-stop(100%, #fddb1a));
- background-image: -webkit-linear-gradient(top, #feeb80, #fddb1a);
- background-image: -o-linear-gradient(top, #feeb80, #fddb1a);
- background-image: linear-gradient(#feeb80, #fddb1a);
- border-color: #fddb1a #fddb1a hsl(51, 99%, 50%);
- color: #333 !important;
+ background-image: -khtml-gradient(linear, left top, left bottom, from(#fbe64b), to(#dbc204));
+ background-image: -moz-linear-gradient(top, #fbe64b, #dbc204);
+ background-image: -ms-linear-gradient(top, #fbe64b, #dbc204);
+ background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fbe64b), color-stop(100%, #dbc204));
+ background-image: -webkit-linear-gradient(top, #fbe64b, #dbc204);
+ background-image: -o-linear-gradient(top, #fbe64b, #dbc204);
+ background-image: linear-gradient(#fbe64b, #dbc204);
+ border-color: #dbc204 #dbc204 hsl(53, 96%, 39%);
+ color: #fff !important;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.33);
-webkit-font-smoothing: antialiased;
+
+ .caret {
+ border-bottom-color: #FFFFFF;
+ border-top-color: #FFFFFF;
+ }
+
}
/*
Header
*/
-header {
-// background-color: @greyDark;
+header { // background-color: @greyDark;
background: url("../../img/default/bgpatterndark.png") repeat;
height: @header-height;
position: fixed;
@@ -319,8 +324,7 @@ header .logo {
#speedgraph {
float: right;
width: 14%;
- height: 60px;
- // similiar as header_box
+ height: 60px; // similiar as header_box
margin: 8px 8px 0 8px;
font-family: sans-serif
}
@@ -341,8 +345,7 @@ header .logo {
/*
Footer
*/
-footer {
-// background-color: @greyDark;
+footer { // background-color: @greyDark;
background: url("../../img/default/bgpatterndark.png") repeat;
color: @grey;
height: @footer-height;
@@ -425,4 +428,25 @@ footer h2 {
background: radial-gradient(center, ellipse cover, rgba(236, 208, 66, 0) 0%, rgba(40, 119, 171, 0.9) 100%);
z-index: 50;
opacity: 0;
+}
+
+div.modal-header {
+ border-top-left-radius: 4px;
+ border-top-right-radius: 4px;
+ background-color: @blueDark;
+ color: #FFFFFF;
+
+ .close {
+ color: @light;
+ }
+
+}
+
+div.modal-body {
+ max-height: 100%;
+}
+
+div.modal {
+ width: 600px;
+
}
\ No newline at end of file
diff --git a/module/web/static/js/views/packageView.js b/module/web/static/js/views/packageView.js
index 22cc846ef..844c6fa0a 100644
--- a/module/web/static/js/views/packageView.js
+++ b/module/web/static/js/views/packageView.js
@@ -9,10 +9,12 @@ define(['jquery', 'views/abstract/itemView', 'underscore', 'views/fileView'],
template: _.compile($("#template-package").html()),
events: {
'click .package-row .name': 'expand',
- 'click .icon-remove': 'delete',
+ 'click .btn-remove': 'delete',
'click .checkbox': 'select'
},
+ ul: null,
+
// File views visible
expanded: false,
@@ -32,7 +34,7 @@ define(['jquery', 'views/abstract/itemView', 'underscore', 'views/fileView'],
var container = this.$('.package-header');
if (!container.length)
this.$el.html(this.template(this.model.toJSON()));
- else if(!fileOnly)
+ else if (!fileOnly)
container.replaceWith(this.template(this.model.toJSON()));
// TODO: could be done in template
@@ -42,18 +44,19 @@ define(['jquery', 'views/abstract/itemView', 'underscore', 'views/fileView'],
this.$('.checkbox').removeClass('checked');
// Only create this views a single time
- var ul = this.$('ul');
- if (!ul.length && this.model.isLoaded()) {
+ if (!this.ul && this.model.isLoaded()) {
console.log('Rendered content of package ' + this.model.get('pid'));
- ul = $('<ul></ul>');
+ var ul = $('<ul></ul>');
+ ul.addClass('file-items');
- if(!this.expanded)
+ if (!this.expanded)
ul.hide();
this.model.get('files').each(function(file) {
ul.append(new fileView({model: file}).render().el);
});
this.$el.append(ul);
+ this.ul = ul;
}
return this;
},
@@ -73,15 +76,16 @@ define(['jquery', 'views/abstract/itemView', 'underscore', 'views/fileView'],
e.preventDefault();
var self = this;
+ // this assumes the ul was created after item was rendered
if (!this.expanded) {
this.model.fetch({silent: true, success: function() {
self.render(true);
- self.$('ul').show();
+ self.ul.show();
self.expanded = true;
}});
} else {
this.expanded = false;
- this.$('ul').hide();
+ this.ul.hide();
}
},
diff --git a/module/web/templates/default/backbone/linkgrabber.html b/module/web/templates/default/backbone/linkgrabber.html
index cbb46fd80..a43852f77 100755
--- a/module/web/templates/default/backbone/linkgrabber.html
+++ b/module/web/templates/default/backbone/linkgrabber.html
@@ -12,29 +12,30 @@
<label class="control-label" for="inputPackageName">Package name</label>
<div class="controls">
- <input type="text" id="inputPackageName" placeholder="Name of your package">
+ <input type="text" class="span4" id="inputPackageName" placeholder="Name of your package">
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputLinks">Links</label>
<div class="controls">
- <textarea id="inputLinks" rows="10" placeholder="Paste your links here..."></textarea>
+ <textarea id="inputLinks" class="span4" rows="10" placeholder="Paste your links here...">
+ </textarea>
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputPassword">Password</label>
<div class="controls">
- <input type="text" id="inputPassword" placeholder="Password for .rar files">
+ <input type="text" id="inputPassword" class="span4" placeholder="Password for .rar files">
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputContainer">Upload links container</label>
- <div class="controls">
- <input type="text" id="inputContainer" placeholder="Path to your container">
- <button id="inputContainer-btn" class="btn" type="button">Browse…</button>
+ <div class="controls controls-row">
+ <input type="text" id="inputContainer" class="span3" placeholder="Path to your container">
+ <button id="inputContainer-btn" class="btn span1" type="button">Browse…</button>
</div>
</div>
diff --git a/module/web/templates/default/backbone/modal.html b/module/web/templates/default/backbone/modal.html
index 90a326a8f..d1186d40a 100755
--- a/module/web/templates/default/backbone/modal.html
+++ b/module/web/templates/default/backbone/modal.html
@@ -2,7 +2,7 @@
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3>{% block header%}Dialog{% endblock %}</h3>
</div>
-<div class="modal-body" style="max-height: 100%">
+<div class="modal-body">
{% block content %}
<%= content %>
{% endblock %}
diff --git a/module/web/templates/default/dashboard.html b/module/web/templates/default/dashboard.html
index e5f941d6f..0c20589af 100644
--- a/module/web/templates/default/dashboard.html
+++ b/module/web/templates/default/dashboard.html
@@ -31,10 +31,24 @@
</div>
<div class="package-row third pull-right">
- <span class="badge badge-important"><i class="icon-tag icon-white"></i> tag</span>
- <span class="badge badge-important"><i class="icon-tag icon-white"></i> tag2</span>
- <i class="icon-wrench icon-white pull-right"></i>
- <i class="icon-remove icon-white pull-right"></i>
+ <div class="tag-area">
+ <span class="badge badge-important badge-ghost"><i class="icon-tag icon-white"></i> Add Tag</span>
+ <span class="badge badge-important"><i class="icon-tag icon-white"></i> tag</span>
+ <span class="badge badge-important"><i class="icon-tag icon-white"></i> tag2</span>
+ </div>
+ {# <i class="icon-wrench icon-white pull-right"></i>#}
+ {# <i class="icon-remove icon-white pull-right"></i>#}
+ <div class="btn-group">
+ <button class="btn btn-mini btn-yellow"><i class="icon-play icon-white"></i></button>
+ <button class="btn btn-mini btn-yellow btn-remove"><i class="icon-remove icon-white"></i></button>
+ <button class="btn btn-mini btn-yellow"
+ data-toggle="dropdown">
+ <i class="icon-wrench icon-white"></i></button>
+ <ul class="dropdown-menu">
+ <li><a>Some</a></li>
+ <li><a>Options</a></li>
+ </ul>
+ </div>
</div>
</div>
</script>
--
cgit v1.2.3