<script id="baseFilterTemplate" type="text/template">
<div class="navigator-filter-label">{{ name }}</div>
<div class="navigator-filter-value {[ if (defaultValue) { ]}default{[ } ]}">{{ value }}</div>
+ {[ if (optional) { ]}
+ <div class="navigator-filter-disable">×</div>
+ {[ } ]}
</script>
<script id="detailsFilterTemplate" type="text/template">
</script>
<script id="favoriteFilterTemplate" type="text/template">
- <div class="navigator-filter-favorite"></div>
+ <div class="navigator-filter-favorite-toggle"></div>
</script>
<script id="detailsFavoriteFilterTemplate" type="text/template">
new window.SS.Filter({
type: window.SS.FavoriteFilterView,
enabled: true,
+ optional: false,
choices: window.SS.favorites
})]);
}
name: 'Project',
property: 'componentRoots',
type: window.SS.ProjectFilterView,
- enabled: true
+ enabled: true,
+ optional: false,
}),
new window.SS.Filter({
property: 'severities[]',
type: window.SS.SelectFilterView,
enabled: true,
+ optional: false,
choices: {
'BLOCKER': 'Blocker',
'CRITICAL': 'Critical',
property: 'statuses[]',
type: window.SS.SelectFilterView,
enabled: true,
+ optional: false,
choices: {
'OPEN': 'Open',
'CONFIRMED': 'Confirmed',
property: 'resolutions[]',
type: window.SS.SelectFilterView,
enabled: false,
+ optional: true,
choices: {
'FALSE-POSITIVE': 'False positive',
'FIXED': 'Fixed',
name: 'Assignee',
property: 'assignees',
type: window.SS.AssigneeFilterView,
- enabled: true
+ enabled: true,
+ optional: false
}),
new window.SS.Filter({
name: 'Reporter',
property: 'reporters',
type: window.SS.ReporterFilterView,
- enabled: false
+ enabled: false,
+ optional: true
}),
new window.SS.Filter({
propertyFrom: 'createdAfter',
propertyTo: 'createdBefore',
type: window.SS.DateRangeFilterView,
- enabled: false
+ enabled: false,
+ optional: true
})
]);
events: function() {
return {
- 'click': 'toggleDetails'
+ 'click': 'toggleDetails',
+ 'click .navigator-filter-disable': 'disable'
};
},
this.$el.toggleClass(
'navigator-filter-disabled',
!this.model.get('enabled'));
+
+ this.$el.toggleClass(
+ 'navigator-filter-optional',
+ this.model.get('optional'));
},
showDetails: function() {
this.registerShowedDetails();
- var top = this.$el.offset().top + this.$el.outerHeight(),
+ var top = this.$el.offset().top + this.$el.outerHeight() - 1,
left = this.$el.offset().left;
this.detailsView.$el.css({ top: top, left: left }).addClass('active');
},
+ disable: function() {
+ this.model.set('enabled', false);
+ },
+
+
serializeData: function() {
return _.extend({}, this.model.toJSON(), {
value: this.renderValue(),
collectionEvents: {
- 'change:value': 'changeFilters'
+ 'change:value': 'changeFilters',
+ 'change:enabled': 'changeEnabled'
},
Backbone.Marionette.CompositeView.prototype.initialize.apply(this, arguments);
var that = this;
- $('body').on('click', function() {
+ $j('body').on('click', function() {
that.hideDetails();
});
this.moreCriteriaFilter = new window.SS.Filter({
type: window.SS.MoreCriteriaFilterView,
enabled: true,
+ optional: false,
filters: disabledFilters
});
this.collection.add(this.moreCriteriaFilter);
render: function() {
Backbone.Marionette.CompositeView.prototype.render.apply(this, arguments);
+
+ if (this.collection.where({ type: window.SS.FavoriteFilterView }).length > 0) {
+ this.$el.addClass('navigator-filter-list-favorite');
+ }
},
filterView = filter.view;
filterView.$el.detach().insertBefore(this.$('.navigator-filter-more-criteria'));
- filter.set('enabled', 'true');
+ filter.set('enabled', true);
+ },
+
+
+ changeEnabled: function() {
+ var disabledFilters = this.collection
+ .where({ enabled: false })
+ .reject(function(filter) {
+ return filter.get('type') === window.SS.MoreCriteriaFilterView;
+ });
- var disabledFilters = this.collection.where({ enabled: false });
if (disabledFilters.length === 0) {
this.moreCriteriaFilter.set({ enabled: false }, { silent: true });
+ } else {
+ this.moreCriteriaFilter.set({ enabled: true }, { silent: true });
}
this.moreCriteriaFilter.set('filters', disabledFilters);
+
+ this.changeFilters();
},
changeFilters: function() {
- var query = _.clone(this.options.extra);
- this.collection.each(function(item) {
+ var query = _.clone(this.options.extra),
+ enabledFilters = this.collection.where({ enabled: true });
+
+ _.each(enabledFilters, function(item) {
var value = item.get('value');
if (value) {
var FavoriteFilterView = window.SS.SelectFilterView.extend({
template: '#favoriteFilterTemplate',
+ className: 'navigator-filter navigator-filter-favorite',
initialize: function() {
var MoreCriteriaFilterView = window.SS.SelectFilterView.extend({
template: '#moreCriteriaFilterTemplate',
+ className: 'navigator-filter navigator-filter-more-criteria',
initialize: function() {
var SelectFilterView = window.SS.BaseFilterView.extend({
- className: 'navigator-filter navigator-filter-more-criteria',
+ className: 'navigator-filter',
initialize: function() {
window.SS.BaseFilterView.prototype.initialize.call(this, {
vertical-align: middle;
font-size: 0;
}
+.navigator-filter-list-favorite {
+ position: relative;
+ padding-left: 36px;
+ overflow: hidden;
+}
.navigator-filters-actions {
display: inline-block;
vertical-align: middle;
vertical-align: top;
height: 36px;
line-height: 36px;
+ margin: -1px 0 0;
padding: 0 10px;
+ border: 1px solid transparent;
white-space: nowrap;
cursor: pointer;
transition: background 0.3s ease;
background-color: #e2e2e2;
}
.navigator-filter.active {
- position: relative;
- padding: 0 9px;
- border-left: 1px solid #cdcdcd;
- border-right: 1px solid #cdcdcd;
+ border-color: #cdcdcd;
background: #fff;
}
.navigator-filter-disabled {
display: none;
}
+.navigator-filter-optional {
+ padding-right: 0;
+}
.navigator-filter-label {
display: inline-block;
vertical-align: middle;
.navigator-filter-value.default {
color: #666;
}
+.navigator-filter-disable {
+ display: inline-block;
+ vertical-align: middle;
+ width: 20px;
+ height: 20px;
+ line-height: 20px;
+ margin: 0 0 0 5px;
+ font-size: 18px;
+ text-align: center;
+ transition: background 0.3s ease;
+}
+.navigator-filter-disable:hover {
+ background-color: #d0d0d0;
+}
.navigator-filter-range-input {
width: 120px;
}
background-color: #dddddd;
}
.navigator-filter-favorite {
+ position: absolute;
+ top: 0;
+ left: 0;
+}
+.navigator-filter-favorite-toggle {
width: 16px;
height: 36px;
background: url('../images/star.png') no-repeat center center;
font-size: 0;
}
+.navigator-filter-list-favorite {
+ position: relative;
+ padding-left: 36px;
+ overflow: hidden;
+}
+
.navigator-filters-actions {
display: inline-block;
vertical-align: middle;
vertical-align: top;
height: @navigatorHeight;
line-height: @navigatorHeight;
+ margin: -1px 0 0;
padding: 0 @navigatorFilterPadding;
+ border: 1px solid transparent;
white-space: nowrap;
cursor: pointer;
transition: background 0.3s ease;
}
&.active {
- position: relative;
- padding: 0 @navigatorFilterPadding - 1px;
- border-left: 1px solid #cdcdcd;
- border-right: 1px solid #cdcdcd;
+ border-color: @darkGrey;
background: #fff;
}
}
display: none;
}
+.navigator-filter-optional {
+ padding-right: 0;
+}
+
.navigator-filter-label {
display: inline-block;
vertical-align: middle;
}
}
+.navigator-filter-disable {
+ display: inline-block;
+ vertical-align: middle;
+ .square(20px);
+ line-height: 20px;
+ margin: 0 0 0 5px;
+ font-size: 18px;
+ text-align: center;
+ transition: background 0.3s ease;
+
+ &:hover {
+ background-color: darken(@navigatorHover, 7%);
+ }
+}
+
.navigator-filter-range-input {
width: 120px;
}
position: absolute;
z-index: 1200;
min-width: 100px;
- border: 1px solid #cdcdcd;
+ border: 1px solid @darkGrey;
background: #fff;
font-size: @baseFontSize;
transition: opacity 0.3s ease;
.line {
height: 1px;
margin: 5px 0;
- background: #cdcdcd;
+ background: @darkGrey;
}
}
.navigator-filter-select-list + .navigator-filter-select-list {
- border-top: 1px solid #cdcdcd;
+ border-top: 1px solid @darkGrey;
}
.navigator-filter-search {
input {
.size(100%, 26px);
padding: 0 7px;
- border: 1px solid #cdcdcd;
+ border: 1px solid @darkGrey;
.box-sizing(border-box);
}
}
}
.navigator-filter-favorite {
+ position: absolute;
+ top: 0; left: 0;
+}
+
+.navigator-filter-favorite-toggle {
.size(16px, @navigatorHeight);
background: url('../images/star.png') no-repeat center center;
}