diff options
| -rw-r--r-- | module/web/static/css/default/dashboard.less | 7 | ||||
| -rw-r--r-- | module/web/static/js/models/File.js | 6 | ||||
| -rw-r--r-- | module/web/static/js/views/fileView.js | 8 | ||||
| -rw-r--r-- | module/web/static/js/views/selectionView.js | 33 | ||||
| -rw-r--r-- | module/web/templates/default/dashboard.html | 78 |
5 files changed, 80 insertions, 52 deletions
diff --git a/module/web/static/css/default/dashboard.less b/module/web/static/css/default/dashboard.less index 12d833168..e9d313d32 100644 --- a/module/web/static/css/default/dashboard.less +++ b/module/web/static/css/default/dashboard.less @@ -167,14 +167,13 @@ .gradient(top, @blue, @blueDark);
}
- &.selected {
+ &.ui-selected {
.gradient(top, @yellow, @yellowDark);
color: @dark;
.iconf-chevron-down:hover {
color: @light;
}
-
}
img {
@@ -252,6 +251,6 @@ FANCY CHECKBOXES cursor: pointer;
}
-.file-view.selected .checkbox {
+.file-view.ui-selected .checkbox {
background: url(../../img/default/checks_sheet.png) -21px top no-repeat;
-}
+}
\ No newline at end of file diff --git a/module/web/static/js/models/File.js b/module/web/static/js/models/File.js index efea23254..e965df9df 100644 --- a/module/web/static/js/models/File.js +++ b/module/web/static/js/models/File.js @@ -14,7 +14,11 @@ define(['jquery', 'backbone', 'underscore'], function($, Backbone, _) { media: -1, added: -1, fileorder: -1, - download: null + download: null, + + // UI attributes + selected: false, + visible: true }, diff --git a/module/web/static/js/views/fileView.js b/module/web/static/js/views/fileView.js index ef1f5bba8..3a4183289 100644 --- a/module/web/static/js/views/fileView.js +++ b/module/web/static/js/views/fileView.js @@ -41,9 +41,9 @@ define(['jquery', 'backbone', 'underscore', 'app', 'views/abstract/itemView'], this.$el.html(this.template(data)); if (this.model.get('selected')) - this.$el.addClass('selected'); + this.$el.addClass('ui-selected'); else - this.$el.removeClass('selected'); + this.$el.removeClass('ui-selected'); this.$('.iconf-chevron-down').dropdown(); @@ -52,10 +52,10 @@ define(['jquery', 'backbone', 'underscore', 'app', 'views/abstract/itemView'], select: function(e) { e.preventDefault(); - var checked = this.$el.hasClass('selected'); + var checked = this.$el.hasClass('ui-selected'); // toggle class immediately, so no re-render needed this.model.set('selected', !checked, {silent: true}); - this.$el.toggleClass('selected'); + this.$el.toggleClass('ui-selected'); App.vent.trigger('file:selection'); } diff --git a/module/web/static/js/views/selectionView.js b/module/web/static/js/views/selectionView.js index 6d346b6ee..4c433e31c 100644 --- a/module/web/static/js/views/selectionView.js +++ b/module/web/static/js/views/selectionView.js @@ -17,6 +17,8 @@ define(['jquery', 'backbone', 'underscore', 'app'], tree: null, // selected files files: null, + // Element of the action bar + actionBar: null, // needed to know when slide down current: 0, @@ -28,7 +30,10 @@ define(['jquery', 'backbone', 'underscore', 'app'], App.vent.on('package:selection', _.bind(this.render, this)); App.vent.on('file:selection', _.bind(this.render, this)); - // TODO + this.actionBar = $('.actionbar .btn-check'); + this.actionBar.parent().click(_.bind(this.select_toggle, this)); + + // TODO when something gets deleted // this.tree.get('packages').on('delete', _.bind(this.render, this)); }, @@ -58,8 +63,12 @@ define(['jquery', 'backbone', 'underscore', 'app'], else if (files + packs === 0 && this.current > 0) this.$el.slideIn(); - this.current = files + packs; + if (files > 0) + this.actionBar.addClass('iconf-check').removeClass('iconf-check-empty'); + else + this.actionBar.addClass('iconf-check-empty').removeClass('iconf-check'); + this.current = files + packs; }, set_files: function(files) { @@ -67,7 +76,8 @@ define(['jquery', 'backbone', 'underscore', 'app'], this.render(); }, - deselect: function() { + // Deselects all items, optional only files + deselect: function(filesOnly) { this.get_files().map(function(file) { file.set('selected', false); }); @@ -107,6 +117,23 @@ define(['jquery', 'backbone', 'underscore', 'app'], }); this.deselect(); + }, + + // Select or deselect all visible files + select_toggle: function() { + var files = this.get_files(); + if (files.length === 0) { + // TODO Select only visible files + this.files.map(function(file) { + file.set('selected', true); + }); + + } else + files.map(function(file) { + file.set('selected', false); + }); + + this.render(); } }); });
\ No newline at end of file diff --git a/module/web/templates/default/dashboard.html b/module/web/templates/default/dashboard.html index c7bcb3783..e80426dcc 100644 --- a/module/web/templates/default/dashboard.html +++ b/module/web/templates/default/dashboard.html @@ -61,38 +61,38 @@ <script type="text/template" id="template-file">
<div class="file-row first">
<i class="checkbox"></i>
- <i class="iconf-file-alt icon-white"></i>
+ <i class="iconf-file-alt"></i>
<span class="name">
<% name %>
</span>
</div>
<%= if finished %>
<div class="file-row second finished">
- <% else %> <%= if failed %>
- <div class="file-row second failed">
- <% download.error %>
- <% else %>
- <div class="file-row second">
- <%/if%><%/if%>
- <% download.statusmsg %>
- </div>
+ <% else %> <%= if failed %>
+ <div class="file-row second failed">
+ <% download.error %>
+ <% else %>
+ <div class="file-row second">
+ <%/if%><%/if%>
+ <% download.statusmsg %>
+ </div>
- <div class="file-row third pull-right">
- {# TODO: file type as icon #}
- <% formatSize size %>
- <i class="iconf-music"></i>
- <img src="icons/<% download.plugin %>"/>
- <% download.plugin %>
- <i class="iconf-chevron-down" data-toggle="dropdown"></i>
- <ul class="dropdown-menu">
- <li><a href="#"><i class="iconf-trash"></i> Delete</a></li>
- <li><a href="#"><i class="iconf-refresh"></i> Restart</a></li>
- <li><a href="#"><i class="iconf-download"></i> Download</a></li>
- <li><a href="#"><i class="iconf-share"></i> Share</a></li>
- <li class="divider"></li>
- <li><a>Addons</a></li>
- </ul>
- </div>
+ <div class="file-row third pull-right">
+ {# TODO: file type as icon #}
+ <% formatSize size %>
+ <i class="iconf-music"></i>
+ <img src="icons/<% download.plugin %>"/>
+ <% download.plugin %>
+ <i class="iconf-chevron-down" data-toggle="dropdown"></i>
+ <ul class="dropdown-menu">
+ <li><a href="#"><i class="iconf-trash"></i> Delete</a></li>
+ <li><a href="#"><i class="iconf-refresh"></i> Restart</a></li>
+ <li><a href="#"><i class="iconf-download"></i> Download</a></li>
+ <li><a href="#"><i class="iconf-share"></i> Share</a></li>
+ <li class="divider"></li>
+ <li><a>Addons</a></li>
+ </ul>
+ </div>
</script>
<script type="text/template" id="template-select">
@@ -123,11 +123,14 @@ <li style="float: right;">
<form class="form-search">
<div class="input-append">
- <input type="text" class="search-query" style="width: 100px">
+ <input type="text" class="search-query" style="width: 120px">
<button type="submit" class="btn">{{ _("Search") }}</button>
</div>
</form>
</li>
+ <li style="float: right">
+ <a href="#"><i class="iconf-check-empty btn-check"></i></a>
+ </li>
<li class="dropdown" style="float: right;">
<a class="dropdown-toggle"
data-toggle="dropdown"
@@ -137,32 +140,27 @@ </a>
<ul class="dropdown-menu">
<li><a><i class="icon-ok"></i> Audio</a></li>
- <li><a><i class="icon-remove"></i> Video</a></li>
- <li><a>Archive</a></li>
+ <li><a><i class="icon-ok"></i> Image</a></li>
+ <li><a><i class="icon-ok"></i> Video</a></li>
+ <li><a><i class="icon-ok"></i> Document</a></li>
+ <li><a><i class="icon-remove"></i> Archive</a></li>
+ <li><a><i class="icon-remove"></i> Other</a></li>
</ul>
</li>
<li class="dropdown" style="float: right;">
<a class="dropdown-toggle"
data-toggle="dropdown"
href="#">
- More
+ All
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
- <li><a>Active</a></li>
+ <li><a>All</a></li>
+ <li><a>Finished</a></li>
+ <li><a>Unfinished</a></li>
<li><a>Failed</a></li>
</ul>
</li>
-
- <li style="float: right;">
- <a>Failed</a>
- </li>
- <li style="float: right;">
- <a>Unfinished</a>
- </li>
- <li class="active" style="float: right;">
- <a href="#" id="show_active">All</a>
- </li>
</ul>
{% endblock %}
|