diff options
Diffstat (limited to 'module')
| -rw-r--r-- | module/web/static/css/default/common.less | 4 | ||||
| -rw-r--r-- | module/web/static/css/default/dashboard.less | 103 | ||||
| -rw-r--r-- | module/web/static/css/default/style.less | 40 | ||||
| -rw-r--r-- | module/web/static/js/utils/animations.js | 69 | ||||
| -rw-r--r-- | module/web/static/js/views/fileView.js | 11 | ||||
| -rw-r--r-- | module/web/static/js/views/headerView.js | 7 | ||||
| -rw-r--r-- | module/web/static/js/views/packageTreeView.js | 67 | ||||
| -rw-r--r-- | module/web/static/js/views/packageView.js | 64 | ||||
| -rw-r--r-- | module/web/static/js/views/selectionView.js | 49 | ||||
| -rw-r--r-- | module/web/templates/default/base.html | 18 | ||||
| -rw-r--r-- | module/web/templates/default/dashboard.html | 234 |
11 files changed, 304 insertions, 362 deletions
diff --git a/module/web/static/css/default/common.less b/module/web/static/css/default/common.less index 0d46e2a5b..ba96bb4ed 100644 --- a/module/web/static/css/default/common.less +++ b/module/web/static/css/default/common.less @@ -65,4 +65,8 @@ -o-transition: @prop @time @ease; -ms-transition: @prop @time @ease; transition: @prop @time @ease; +} + +.default-shadow { + box-shadow: 0 0 5px @dark; }
\ No newline at end of file diff --git a/module/web/static/css/default/dashboard.less b/module/web/static/css/default/dashboard.less index accec18a9..a582e7326 100644 --- a/module/web/static/css/default/dashboard.less +++ b/module/web/static/css/default/dashboard.less @@ -14,8 +14,6 @@ line-height: 25px;
margin: 4px 0;
border-bottom: 1px dashed @grey;
-// text-shadow: 1px 0px @grey;
-// box-shadow: 10px 10px 5px @grey;
}
/*
@@ -39,11 +37,10 @@ z-index: -1; // lies under package
border: 1px solid @grey;
border-radius: 5px;
- box-shadow: 4px 4px 5px @dark;
+ box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.75);
}
-.package-item {
- cursor: pointer;
+.package-view {
padding-bottom: 4px;
margin: 8px 0;
position: relative;
@@ -53,8 +50,8 @@ -moz-hyphens: auto;
hyphens: auto;
- i.iconf-check-empty {
- cursor: move;
+ i {
+ cursor: pointer;
}
.progress {
@@ -87,8 +84,8 @@ }
}
-.package-info {
- font-size: small;
+.package-name {
+ cursor: pointer;
}
.package-indicator {
@@ -101,10 +98,6 @@ height: @frame-top;
line-height: @frame-top;
- i {
- cursor: pointer;
- }
-
i:hover {
color: @green;
}
@@ -143,35 +136,33 @@ }
}
+
/*
- Package View
+ File View
*/
-.package-view {
- margin-bottom: 3px;
+.file-list {
+ list-style: none;
+ margin: 0;
}
-.package-view > div {
+.file-view {
+ margin-bottom: 3px;
color: @light;
.gradient(top, @blue, @blueLight); // background-color: @blue;
border-radius: 5px;
line-height: 28px;
+ &:hover {
+ .gradient(top, @blue, @blueDark);
+ }
}
-.package-view > div:hover {
- .gradient(top, @blue, @blueDark);
-}
-
-.package-row {
+.file-row {
display: inline-block;
height: 100%;
padding-left: 8px;
padding-right: 8px;
- .name {
- cursor: pointer;
- }
-
i {
margin-top: 3px;
}
@@ -179,15 +170,10 @@ i.pull-right {
margin-top: 8px;
}
-
- .badge {
- margin-right: 4px;
- }
-
}
-.package-row.first {
- width: 40%;
+.file-row.first {
+ width: 50%;
font-weight: bold;
i {
@@ -196,63 +182,20 @@ }
-.package-row.second {
+.file-row.second {
width: 20%;
.gradient(top, @blueDark, @blueDarker);
font-size: smaller;
}
-.package-row.third {
- line-height: 26px;
-
-}
-
-.package-view a {
+.file-view a {
color: @light;
}
-// Box containing the files
-.package-view > ul {
- overflow: hidden;
- .gradient(left, @light, @greenLight); // box-shadow: 0 0 5px black;
-}
-
-/*
- File view
-*/
-
-.file-view {
- margin-top: 3px;
-}
-
-.file-view > div {
- border-radius: 5px; // .gradient(top, @blueLighter, @blueLightest);
- line-height: 26px;
-}
-
-.file-view > div:hover {
- .gradient(top, @blue, @blueLight)
-}
-
-.file-row {
- display: inline-block;
- height: 100%;
- padding-left: 8px;
- padding-right: 8px;
-}
-
-.file-row.first {
- width: 50%;
-}
-
-.file-row.second {
- width: 30%;
-}
-
/*
FANCY CHECKBOXES
*/
-.checkbox {
+.file-view .checkbox {
display: inline;
width: 20px;
height: 21px;
@@ -262,6 +205,6 @@ FANCY CHECKBOXES cursor: pointer;
}
-.checkbox.checked {
+.file-view .checkbox.checked {
background: url(../../img/default/checks_sheet.png) -21px top no-repeat;
}
diff --git a/module/web/static/css/default/style.less b/module/web/static/css/default/style.less index 964895f38..7db464c92 100644 --- a/module/web/static/css/default/style.less +++ b/module/web/static/css/default/style.less @@ -145,8 +145,8 @@ header:before { bottom: 0;
left: 0;
background-color: transparent;
- box-shadow: 0 0 5px black;
z-index: -1;
+ .default-shadow;
}
header div.left {
@@ -309,22 +309,38 @@ header .logo { font-family: sans-serif
}
-/*
- Actionbar
-*/
-
-#notifications-area {
- display: inline-block;
- width: 100%;
- padding: 4px 0 6px 0;
- text-align: center;
+.header-area {
+ display: none; // hidden by default
+ overflow: hidden;
+ position: absolute;
line-height: 18px;
- font-size: small;
+ top: @header-height;
+ padding: 4px 10px 6px 10px;
+ text-align: center;
+ border-radius: 0 0 6px 6px;
color: @light;
background-color: @greyDark;
- border-radius: 0 0 6px 6px;
+ .default-shadow;
+}
+
+#notification-area {
+ .header-area;
+ left: 140px;
+}
+
+#selection-area {
+ .header-area;
+ left: 50%;
+ bottom: -28px;
+ min-width: 15%;
+// color: @dark;
+// background-color: @light;
}
+/*
+ Actionbar
+*/
+
.nav > li > a:hover {
color: @blue;
}
diff --git a/module/web/static/js/utils/animations.js b/module/web/static/js/utils/animations.js index 657bd2bec..245614ea7 100644 --- a/module/web/static/js/utils/animations.js +++ b/module/web/static/js/utils/animations.js @@ -4,6 +4,7 @@ define(['jquery', 'underscore', 'transit'], function(jQuery, _) { // Important function to have slide animations jQuery.fn.appendWithHeight = function(element, hide) { var o = jQuery(this[0]); + element = jQuery(element); // TODO: additionally it could be placed out of viewport first // The real height can only be retrieved when element is on DOM and display:true @@ -24,6 +25,50 @@ define(['jquery', 'underscore', 'transit'], function(jQuery, _) { return this; }; + // Shortcut to have a animation when element is added + jQuery.fn.appendWithAnimation = function(element, animation) { + var o = jQuery(this[0]); + if (animation === true) + o.hide(); + + o.append(element); + + if (animation === true) + o.fadeIn(); + + return this; + }; + + // calculate the height and write it to data, better used on invisible elements + jQuery.fn.calculateHeight = function() { + var o = jQuery(this[0]); + var height = o.height(); + if (!height) { + var display = o.css('display'); + o.css('visibility', 'hidden'); + o.show(); + height = o.height(); + + o.css('display', display); + o.css('visibility', ''); + } + + o.data('height', height); + return this; + }; + + jQuery.fn.slideOut = function() { + var o = jQuery(this[0]); + o.animate({height: o.data('height'), opacity: 'show'}); + return this; + }; + + jQuery.fn.slideIn = function() { + var o = jQuery(this[0]); + o.animate({height: 0, opacity: 'hide'}); + return this; + }; + // TODO: sloppy chaining // // in functions not possible without previous out @@ -42,7 +87,7 @@ define(['jquery', 'underscore', 'transit'], function(jQuery, _) { if (!this.data('height')) { var height = this.height(); this.css({height: height}); - this.data('height', height) + this.data('height', height); } this.transition({ height: '0px', @@ -52,28 +97,6 @@ define(['jquery', 'underscore', 'transit'], function(jQuery, _) { }; - jQuery.fn.slideIn = function(speed, easing, callback) { - var height = this.data('height') || '100%'; - this.transition({ - height: height, - opacity: 'show' - }, speed, easing, callback); - - }; - - jQuery.fn.slideOut = function(speed, easing, callback) { - if (!this.data('height')) { - var height = this.height(); - this.css({height: height, overflow: 'hidden'}); - this.data('height', height) - } - this.transition({ - height: '0px', - opacity: 'hide' - }, speed, easing, callback); - - }; - jQuery.fn._transit = jQuery.fn.transit; // Overriding transit plugin to support hide and show diff --git a/module/web/static/js/views/fileView.js b/module/web/static/js/views/fileView.js index 7e8f899a9..86f7b33d2 100644 --- a/module/web/static/js/views/fileView.js +++ b/module/web/static/js/views/fileView.js @@ -9,7 +9,7 @@ define(['jquery', 'backbone', 'underscore', 'app', 'views/abstract/itemView'], // template: _.template($("#template-file").html()), template: _.compile($("#template-file").html()), events: { - + 'click .checkbox': 'select' }, initialize: function() { @@ -25,6 +25,15 @@ define(['jquery', 'backbone', 'underscore', 'app', 'views/abstract/itemView'], render: function() { this.$el.html(this.template(this.model.toJSON())); return this; + }, + + select: function(e) { + e.preventDefault(); + var checked = this.$('.checkbox').hasClass('checked'); + // toggle class immediately, so no re-render needed + this.model.set('selected', !checked, {silent: true}); + this.$('.checkbox').toggleClass('checked'); + App.vent.trigger('file:selection'); } }); diff --git a/module/web/static/js/views/headerView.js b/module/web/static/js/views/headerView.js index 7effcf79d..43c66b99f 100644 --- a/module/web/static/js/views/headerView.js +++ b/module/web/static/js/views/headerView.js @@ -1,4 +1,4 @@ -define(['jquery', 'backbone', 'flot'], function($, Backbone) { +define(['jquery', 'underscore', 'backbone', 'flot'], function($, _, Backbone) { // Renders the header with all information return Backbone.View.extend({ @@ -12,9 +12,14 @@ define(['jquery', 'backbone', 'flot'], function($, Backbone) { // Will hold the link grabber grabber: null, + notifications: null, + selections: null, initialize: function() { + this.notifications = this.$('#notification-area').calculateHeight(); + this.selections = this.$('#selection-area').calculateHeight(); + var totalPoints = 100; var data = []; diff --git a/module/web/static/js/views/packageTreeView.js b/module/web/static/js/views/packageTreeView.js index 8791a93f2..41db0dc2c 100644 --- a/module/web/static/js/views/packageTreeView.js +++ b/module/web/static/js/views/packageTreeView.js @@ -1,5 +1,6 @@ -define(['jquery', 'backbone', 'underscore', 'app', 'models/TreeCollection', 'views/packageView', 'views/fileView'],
- function($, Backbone, _, App, TreeCollection, packageView, fileView) {
+define(['jquery', 'backbone', 'underscore', 'app', 'models/TreeCollection',
+ 'views/packageView', 'views/fileView', 'views/selectionView'],
+ function($, Backbone, _, App, TreeCollection, packageView, fileView, selectionView) {
// Renders whole PackageView
return Backbone.View.extend({
@@ -12,17 +13,27 @@ define(['jquery', 'backbone', 'underscore', 'app', 'models/TreeCollection', 'vie // <ul> holding the packages
packageUL: null,
+ // <ul> displaying the files
+ fileUL: null,
+ // current open model
+ opened: null,
+ // Current open files
+ files: null,
initialize: function() {
var self = this;
this.tree = new TreeCollection();
+ var view = new selectionView(this.tree);
+
// When package is added we reload the data
App.vent.on('package:added', function() {
console.log('Package tree caught, package:added event');
self.tree.fetch();
});
+ App.vent.on('dashboard:loading', _.bind(this.loading, this));
+ App.vent.on('dashboard:show', _.bind(this.show, this));
},
init: function() {
@@ -37,29 +48,19 @@ define(['jquery', 'backbone', 'underscore', 'app', 'models/TreeCollection', 'vie console.log('Package ' + pack.get('pid') + ' added to tree');
self.appendPackage(pack, 0, true);
- })
+ });
}});
},
render: function() {
- var packs = this.tree.get('packages'),
- files = this.tree.get('files'),
- el = this.$('#dashboard');
-
- el.empty();
+ var packs = this.tree.get('packages');
+ this.files = this.tree.get('files');
- this.packageUL = $('<ul></ul>');
+ this.packageUL = this.$('.package-list');
packs.each(_.bind(this.appendPackage, this));
- el.append(this.packageUL);
- el.append($('<br> Files: ' + files.size() + '<br>'));
-
- var ul = $('<ul></ul>');
- files.each(function(file) {
- ul.append(new fileView({model: file}).render().el);
- });
-
- el.append(ul);
+ this.fileUL = this.$('.file-list');
+ this.files.each(_.bind(this.appendFile, this));
return this;
},
@@ -68,19 +69,37 @@ define(['jquery', 'backbone', 'underscore', 'app', 'models/TreeCollection', 'vie // Append a package to the list, index, animate it
appendPackage: function(pack, i, animation) {
var el = new packageView({model: pack}).render().el;
- if (animation == true)
- $(el).hide();
+ this.packageUL.appendWithAnimation(el, animation);
+ },
- this.packageUL.append(el);
+ appendFile: function(file, i, animation) {
+ var el = new fileView({model: file}).render().el;
+ this.fileUL.appendWithAnimation(el, animation);
+ },
- if (animation == true)
- $(el).fadeIn();
+ loading: function(model) {
+ // nothing to load when it is already open
+// if (this.opened === model)
+// return;
+ // TODO: do not rerender already opened
+ this.opened = model;
+ this.files = null;
+// this.fileUL.fadeOut();
+ this.fileUL.empty();
},
+ failure: function() {
+ // TODO
+ },
+
+ show: function(files) {
+ this.files = files;
+ files.each(_.bind(this.appendFile, this));
+ this.fileUL.fadeIn();
+ },
// TODO: remove this debug stuff
toggle: false,
-
filter: function(e) {
var self = this;
this.tree.get('packages').each(function(item) {
diff --git a/module/web/static/js/views/packageView.js b/module/web/static/js/views/packageView.js index 2c1541c7f..38b335dc9 100644 --- a/module/web/static/js/views/packageView.js +++ b/module/web/static/js/views/packageView.js @@ -1,5 +1,5 @@ -define(['jquery', 'views/abstract/itemView', 'underscore', 'views/fileView'], - function($, itemView, _, fileView) { +define(['jquery', 'app', 'views/abstract/itemView', 'underscore'], + function($, App, itemView, _) { // Renders a single package item return itemView.extend({ @@ -8,14 +8,14 @@ define(['jquery', 'views/abstract/itemView', 'underscore', 'views/fileView'], className: 'package-view', template: _.compile($("#template-package").html()), events: { - 'click .package-row .name': 'expand', - 'click .btn-remove': 'delete', - 'click .checkbox': 'select' + 'click .package-name': 'open', + 'click .iconf-trash': 'delete', + 'click .select': 'select' }, + // Ul for child packages (unused) ul: null, - - // File views visible + // Currently unused expanded: false, initialize: function() { @@ -30,34 +30,9 @@ define(['jquery', 'views/abstract/itemView', 'underscore', 'views/fileView'], }, // Render everything, optional only the fileViews - render: function(fileOnly) { - var container = this.$('.package-header'); - if (!container.length) - this.$el.html(this.template(this.model.toJSON())); - else if (!fileOnly) - container.replaceWith(this.template(this.model.toJSON())); - - // TODO: could be done in template - if (this.model.get('checked')) - this.$('.checkbox').addClass('checked'); - else - this.$('.checkbox').removeClass('checked'); - - // Only create this views a single time - if (!this.ul && this.model.isLoaded()) { - console.log('Rendered content of package ' + this.model.get('pid')); - var ul = $('<ul></ul>'); - ul.addClass('file-items'); + render: function() { + this.$el.html(this.template(this.model.toJSON())); - this.model.get('files').each(function(file) { - ul.append(new fileView({model: file}).render().el); - }); - - // Hide the element when not expanded - this.$el.appendWithHeight(ul, !this.expanded); - - this.ul = ul; - } return this; }, @@ -67,9 +42,11 @@ define(['jquery', 'views/abstract/itemView', 'underscore', 'views/fileView'], self.destroy(); }); - // TODO destroy the fileViews ? + // TODO: display other package }, + + // TODO // Toggle expanding of packages expand: function(e) { e.preventDefault(); @@ -88,13 +65,22 @@ define(['jquery', 'views/abstract/itemView', 'underscore', 'views/fileView'], } }, + open: function(e) { + var self = this; + App.vent.trigger('dashboard:loading', this.model); + this.model.fetch({silent: true, success: function() { + console.log('Package ' + self.model.get('pid') + ' loaded'); + App.vent.trigger('dashboard:show', self.model.get('files')); + }}); + }, + select: function(e) { e.preventDefault(); - var checked = this.$('.checkbox').hasClass('checked'); + var checked = this.$('.select').hasClass('iconf-check'); // toggle class immediately, so no re-render needed - this.model.set('checked', !checked, {silent: true}); - this.$('.checkbox').toggleClass('checked'); + this.model.set('selected', !checked, {silent: true}); + this.$('.select').toggleClass('iconf-check').toggleClass('iconf-check-empty'); + App.vent.trigger('package:selection'); } - }); });
\ No newline at end of file diff --git a/module/web/static/js/views/selectionView.js b/module/web/static/js/views/selectionView.js new file mode 100644 index 000000000..5cb22b776 --- /dev/null +++ b/module/web/static/js/views/selectionView.js @@ -0,0 +1,49 @@ +define(['jquery', 'backbone', 'underscore', 'app'], + function($, Backbone, _, App) { + + // Renders context actions for selection packages and files + return Backbone.View.extend({ + el: '#selection-area', + template: _.compile($("#template-select").html()), + + // available packages + tree: null, + // selected files + files: null, + // needed to know when slide down + current: 0, + + initialize: function(tree) { + this.tree = tree; + this.files = tree.get('files'); + + App.vent.on('dashboard:show', _.bind(this.set_files, this)); + App.vent.on('package:selection', _.bind(this.render, this)); + App.vent.on('file:selection', _.bind(this.render, this)); + }, + + render: function() { + var files = 0; + if (this.files) + files = this.files.where({selected: true}).length; + + var packs = this.tree.get('packages').where({selected: true}).length; + + if (files + packs > 0) + this.$el.html(this.template({files: files, packs: packs})); + + if (files + packs > 0 && this.current === 0) + this.$el.slideOut(); + else if (files + packs === 0 && this.current > 0) + this.$el.slideIn(); + + this.current = files + packs; + + }, + + set_files: function(files) { + this.files = files; + this.render(); + } + }); + });
\ No newline at end of file diff --git a/module/web/templates/default/base.html b/module/web/templates/default/base.html index d195471e1..ad1480648 100644 --- a/module/web/templates/default/base.html +++ b/module/web/templates/default/base.html @@ -44,9 +44,9 @@ {# <a class="header-link" href="/settings"><i class="icon-cog icon-white"></i> Settings</a>#}
{# <a class="header-link" href="#"><i class="icon-list-alt icon-white"></i> Accounts</a>#}
<span class="iconbar">
- <i class="iconf-play iconf-larger"></i>
- <i class="iconf-pause iconf-larger"></i>
- <i class="iconf-cog iconf-larger"></i>
+ <i class="iconf-play iconf-large"></i>
+ <i class="iconf-pause iconf-large"></i>
+ <i class="iconf-cog iconf-large"></i>
</span>
<br>
<a class="btn btn-success btn-grabber" href="#"><i class="icon-plus icon-white"></i> Add</a>
@@ -131,17 +131,19 @@ </div>
</div>
</div>
-
{% endif %}
</div>
+ <div id="notification-area" style="">
+ Notifications
+ <span class="badge badge-info">88</span>
+ </div>
+ <div id="selection-area">
+ </div>
</header>
<div id="content-container" class="container-fluid">
<div class="row-fluid">
<div class="span2 offset1">
- <div id="notifications-area" style="">
- Notifications
- <span class="badge badge-info">88</span>
- </div>
+ {# just a placeholder #}
</div>
{% block actionbar %}
{% endblock %}
diff --git a/module/web/templates/default/dashboard.html b/module/web/templates/default/dashboard.html index f878df5e5..2dc29a583 100644 --- a/module/web/templates/default/dashboard.html +++ b/module/web/templates/default/dashboard.html @@ -13,58 +13,77 @@ {% block head %}
<script type="text/template" id="template-package">
- <div class="package-header">
- <div class="package-row first">
- <span class="checkbox"></span>
- <i class="icon-folder-close icon-white"></i>
- <span class="name">
- Package <% pid %>: <% name %>
- </span>
+ <%= if selected %>
+ <i class="iconf-check select"></i>
+ <% else %>
+ <i class="iconf-check-empty select"></i>
+ <%/if%>
+ <span class="package-name">
+ <% name %>
+ </span>
+ <div class="package-frame">
+ <div class="tag-area">
+ <span class="badge badge-success"><i class="iconf-tag"></i>video</span>
+ <span class="badge badge-success badge-ghost"><i class="iconf-tag"></i> Add Tag</span>
</div>
- <div class="package-row second">
- <span>
- <% stats.linksdone %> / <% stats.linkstotal %>
- </span>
- <span class="pull-right">
- <% formatSize stats.sizedone %> / <% formatSize stats.sizetotal %>
- </span>
+ <div class="package-indicator">
+ <i class="iconf-pause"></i>
+ <i class="iconf-refresh"></i>
+ <i class="iconf-eye-close"></i>
+ <i class="iconf-trash"></i>
+ <i class="iconf-chevron-down"></i>
</div>
-
- <div class="package-row third pull-right">
- {# <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 class="progress">
+ <div class="bar bar-info" style="width: 50%">
+ <% stats.linksdone %>
+ </div>
+ <div class="bar bar-danger" style="width: 20%">
+ <% stats.linkstotal %>
</div>
+ <% formatSize stats.sizedone %> / <% formatSize stats.sizetotal %>
</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 class="file-row first">
+ <%= if selected %>
+ <i class="checkbox checked"></i>
+ <% else %>
+ <i class="checkbox"></i>
+ <%/if%>
+
+ <i class="icon-file icon-white"></i>
+ <span class="name">
+ File <% fid %>: <% name %>
+ </span>
+ </div>
+ <div class="file-row second">
+ <% download.statusmsg %>
<span class="pull-right">
Size: <% formatSize size %>
</span>
- </div>
+ </div>
- <div class="file-row third">
- <% download.plugin %>
- </div>
+ <div class="file-row third pull-right">
+ <% download.plugin %>
</div>
</script>
+
+ <script type="text/template" id="template-select">
+ <i class="iconf-check"></i>
+ <%= if packs %>
+ <% packs %> packages
+ <%/if %>
+ selected
+ <%= if files %>
+ <% files %> files
+ <%/if %>
+ |
+ <i class="iconf-trash"></i>
+ <i class="iconf-refresh"></i>
+ </script>
+
{% endblock %}
{% block actionbar %}
@@ -134,111 +153,7 @@ <div class="clearfix"></div>
</div>
<ul class="package-list">
- <li class="package-item">
- <i class="iconf-check-empty"></i>
- Package
- <div class="package-frame">
- <div class="tag-area">
- <span class="badge badge-success"><i class="iconf-tag"></i>video</span>
- <span class="badge badge-success badge-ghost"><i class="iconf-tag"></i> Add Tag</span>
- </div>
- <div class="package-indicator">
- <i class="iconf-pause"></i>
- <i class="iconf-refresh"></i>
- <i class="iconf-eye-open"></i>
- <i class="iconf-trash"></i>
- <i class="iconf-chevron-down"></i>
- </div>
- <div class="progress">
- <div class="bar bar-info" style="width: 50%">
- 10 MB
- </div>
- <div class="bar bar-danger" style="width: 20%">
- 20 MB
- </div>
- </div>
- </div>
- </li>
- <li class="package-item">
- <i class="iconf-check-empty"></i>
- many many More packages with really long names, some
- even don't fit on the screen
- <div class="package-frame">
- <div class="package-indicator">
- <i class="iconf-pause"></i>
- <i class="iconf-refresh"></i>
- <i class="iconf-eye-open"></i>
- <i class="iconf-trash"></i>
- <i class="iconf-chevron-down" data-toggle="dropdown"></i>
- <ul class="dropdown-menu">
- <li><a>Some</a></li>
- <li><a>Options</a></li>
- </ul>
- </div>
- <div class="progress">
- <div class="bar bar-info" style="width: 50%">
- 10 MB
- </div>
- </div>
- </div>
- </li>
- <li class="package-item">
- <i class="iconf-check-empty"></i>
- Some.Movie.Title.2011.Language.DTS-HD.DL.1080p.BluRay.AVC.REMUX-xyzHD
- <div class="package-frame">
- <div class="package-indicator">
- <i class="iconf-pause"></i>
- <i class="iconf-refresh"></i>
- <i class="iconf-eye-open"></i>
- <i class="iconf-trash"></i>
- <i class="iconf-chevron-down"></i>
- </div>
- <div class="progress">
- <div class="bar bar-info" style="width: 50%">
- xy
- </div>
- </div>
- </div>
- </li>
- <li class="package-item">
- <i class="iconf-check-empty"></i>
- A.Movie.with.a.slightly.larger.Title.2012.720p.DTS.Bluray.x264-ReleaseGrp
- <div class="package-frame">
- <div class="package-indicator">
- <i class="iconf-pause"></i>
- <i class="iconf-refresh"></i>
- <i class="iconf-eye-open"></i>
- <i class="iconf-trash"></i>
- <i class="iconf-chevron-down"></i>
- </div>
- <div class="progress">
- <div class="bar bar-info" style="width: 50%">
- abc 12
- </div>
- </div>
- </div>
- </li>
- <li class="package-item">
- <i class="iconf-check-empty"></i>
- Package
- <div class="package-frame">
- <div class="package-indicator">
- <i class="iconf-pause"></i>
- <i class="iconf-refresh"></i>
- <i class="iconf-eye-close"></i>
- <i class="iconf-trash"></i>
- <i class="iconf-chevron-down"></i>
- </div>
- <div class="progress">
- <div class="bar bar-info" style="width: 50%">
- 10 MB
- </div>
- <div class="bar bar-danger" style="width: 20%">
- 20 MB
- </div>
- </div>
- </div>
- </li>
+ {# Build up by js #}
</ul>
<div class="sidebar-header">
<i class="iconf-group"></i> Shared
@@ -260,37 +175,8 @@ </ul>
</div>
<div class="span9">
- <div id="dashboard">
+ <ul class="file-list">
{# Build up by js #}
- </div>
+ </ul>
</div>
-
- <script src="static/js/libs/jquery-1.9.0.js"></script>
- <script src="static/js/libs/select2-3.2.js"></script>
- {# <script src="static/js/libs/jquery.transit-0.9.9.js"></script>#}
- <script type="text/javascript">
- $('.package-item').on('mouseover', function() {
-{# $(this).children('.progress').css('height', '15px');#}
- $(this).children('.package-indicator').css('display', 'block');
- });
-
- $('.package-item').on('mouseout', function() {
-{# $(this).children('.progress').css('height', '4px');#}
- $(this).children('.package-indicator').css('display', 'none');
- });
-
-
-
- {# $('.package-indicator').on('mouseenter', function(el) {#}
- {# $(this).parent().transition({#}
- {# rotateX: '180deg'#}
- {# });#}
- {# });#}
- {##}
- {# $('.package-item').on('mouseout', function() {#}
- {# $(this).transition({rotateX: '0deg'});#}
- {# })#}
-
- </script>
-
{% endblock %}
\ No newline at end of file |