EXPO-12 complete filter is ready

templates/client/accounts/feed.html

@@ -47,6 +47,8 @@
                     </div>
                 </div>
             </section>
+            <button class="icon-check apply-filter button" type="submit" id="apply-filter-button">{% trans 'Применить' %}</button>
+
         </div>
         <form method="post" action="/profile/feed/" class="search_form" id="filter-block-form">{% csrf_token %}
         <div class="modals">
@@ -62,14 +64,13 @@
                         {% include 'client/popups/place.html' with search_form=search_form filter="filter-" formId="filter-pwPlace" selectedItemTemplate="filter-csb-selected" autoCompleteId="filter-place-complete-block" filterInputId="filter-place-filter-input" selectedItemsContainer="filter-csb-selected-items" prefix="f-p-" %}
                         {% endif %}
 
-
                     </div>
                     <div class="a modal-close fancybox-close">&nbsp;</div>
                 </div>
             </div>
 
         </div>
-            <input type="submit" value="отправить"/>
+
         </form>
     </div>
 
@@ -90,6 +91,7 @@
                 searchData:'{{ filter_form.data_with_parents|safe }}',
                 closerText: "{% trans ' и еще _ позиции' %}",
                 closerTextSingle:"{% trans ' и еще _ позиция' %}",
+                applyButtonId:'apply-filter-button',
                 place:{
                     id:'filter-pwPlace',
                    /**/ selectedItemTemplate:'filter-csb-selected',

templates/client/static_client/css/main.css

@@ -3889,6 +3889,9 @@ form.s-message {
 	white-space: normal;
 }
 
+.c-select-box .csb-selected a.csbs-del:hover{
+	text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
+}
 .c-select-box .csb-selected a.csbs-del {
 	display: block;
 	position: absolute;
@@ -12090,7 +12093,14 @@ hr + .rq-note {
 		
 	}  
 	.events-filter .csb-selected{
-		background-color: #fff;
+		background: #ffffff; /* Old browsers */
+		background: -moz-linear-gradient(top,  #ffffff 67%, #f5f5f5 100%); /* FF3.6+ */
+		background: -webkit-gradient(linear, left top, left bottom, color-stop(67%,#ffffff), color-stop(100%,#f5f5f5)); /* Chrome,Safari4+ */
+		background: -webkit-linear-gradient(top,  #ffffff 67%,#f5f5f5 100%); /* Chrome10+,Safari5.1+ */
+		background: -o-linear-gradient(top,  #ffffff 67%,#f5f5f5 100%); /* Opera 11.10+ */
+		background: -ms-linear-gradient(top,  #ffffff 67%,#f5f5f5 100%); /* IE10+ */
+		background: linear-gradient(to bottom,  #ffffff 67%,#f5f5f5 100%); /* W3C */
+		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f5f5f5',GradientType=0 ); /* IE6-9 */
 		padding-bottom: 0;
 	}
 	.events-filter a{
@@ -12187,6 +12197,44 @@ hr + .rq-note {
 		-moz-border-radius-bottomright: 0;
 		border-bottom-right-radius: 0;
 	}
+	.button.apply-filter{
+		background: #ffffff; /* Old browsers */
+		background: -moz-linear-gradient(top,  #ffffff 67%, #f5f5f5 100%); /* FF3.6+ */
+		background: -webkit-gradient(linear, left top, left bottom, color-stop(67%,#ffffff), color-stop(100%,#f5f5f5)); /* Chrome,Safari4+ */
+		background: -webkit-linear-gradient(top,  #ffffff 67%,#f5f5f5 100%); /* Chrome10+,Safari5.1+ */
+		background: -o-linear-gradient(top,  #ffffff 67%,#f5f5f5 100%); /* Opera 11.10+ */
+		background: -ms-linear-gradient(top,  #ffffff 67%,#f5f5f5 100%); /* IE10+ */
+		background: linear-gradient(to bottom,  #ffffff 67%,#f5f5f5 100%); /* W3C */
+		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f5f5f5',GradientType=0 ); /* IE6-9 */
+		color: #ff6600;
+		margin-top: 0;
+		-webkit-border-top-left-radius: 4px;
+		-webkit-border-top-right-radius: 4px;
+		-moz-border-radius-topleft: 4px;
+		-moz-border-radius-topright: 4px;
+		border-top-left-radius: 4px;
+		border-top-right-radius: 4px;
+
+
+		-webkit-border-bottom-right-radius: 0;
+		-webkit-border-bottom-left-radius: 0;
+		-moz-border-radius-bottomright: 0;
+		-moz-border-radius-bottomleft: 0;
+		border-bottom-right-radius: 0;
+		border-bottom-left-radius: 0;
+		border-bottom: 0;
+		display: none;
+
+	}
+	.button.apply-filter.icon-check:hover{
+		-webkit-box-shadow: inset 0px 0px 2px 0px rgba(0, 0, 0, 0.3);
+		-moz-box-shadow:    inset 0px 0px 2px 0px rgba(0, 0, 0, 0.3);
+		box-shadow:         inset 0px 0px 2px 0px rgba(0, 0, 0, 0.3);
+		text-shadow: none;
+	}
+	.button.apply-filter.icon-check:hover:before{
+		background-position: -106px -16px;
+	}
 
 
 

templates/client/static_client/js/_modules/page.events.feed.js

@@ -57,7 +57,7 @@ if (EXPO.events.feed) {
 				return this;
 			},
 			/**
-			 * analogue of Array.length but for object
+			 * analogue of Array.length but for object instance
 			 * @param {Object} obj - Object to count its method
 			 * @returns {number}
 			 */
@@ -636,6 +636,9 @@ if (EXPO.events.feed) {
 				self.itemsSelected[checkboxId] = dna.clone(self.opt.selectedItemTemplate, tplObj);
 				self.tagsBoxItems[checkboxId] = dna.clone(self.opt.tagsBoxId, tplObj);
 				self._refreshLabel();
+				if(getObjectLength(self.itemsSelected)){
+					$(EXPO.events.feed.DOMapplyButton).show();
+				}
 			},
 			/**
 			 * hide or show sublists according active selected link
@@ -1348,6 +1351,9 @@ if (EXPO.events.feed) {
 				self.itemsSelected[checkboxId] = dna.clone(self.opt.selectedItemTemplate, tplObj);
 				self.tagsBoxItems[checkboxId] = dna.clone(self.opt.tagsBoxId, tplObj);
 				this._refreshLabel();
+				if(getObjectLength(self.itemsSelected)){
+					$(EXPO.events.feed.DOMapplyButton).show();
+				}
 
 			},
 			/**
@@ -1601,7 +1607,7 @@ if (EXPO.events.feed) {
 			$(this.DOMform).on('submit', function () {
 				submitHandler();
 			});
-			this.DOMfilterButton = document.getElementById(this.opt.filter.buttonId);
+			this.DOMapplyButton = document.getElementById(this.opt.applyButtonId);
 			this.filterPane = new Filter(this.opt.filter);
 			$('#' + this.opt.filter.buttonId).on('click', function () {
 				if (com.hasClass(this, self.opt.activeClass)) {
@@ -1619,6 +1625,11 @@ if (EXPO.events.feed) {
 				self.modalWindow.open();
 				return false;
 			});
+			//кнопка применить
+			$('#'+self.opt.applyButtonId).on('click', function () {
+				$(self.DOMform).submit();
+				return false;
+			});
 			//modal
 			//модальное окно
 			this.modalWindow = new com.Modal(self.opt.modal);
@@ -1667,6 +1678,10 @@ if (EXPO.events.feed) {
 					}
 
 				}
+				//Если выбраны фильтры то появляется кнопка "применить"
+				 if(getObjectLength(self.placesModal.itemsSelected) || getObjectLength(self.subjModal.itemsSelected) ){
+					 $(self.DOMapplyButton).show();
+				 }
 			});
 
 		};