Merge branch '646-new-cat-system' into dev

9 files changed, 278 insertions, 0 deletions

diff --git a/p/scripts/main.js b/p/scripts/main.js
index 8a45ae896..7cd53c745 100644
--- a/p/scripts/main.js
+++ b/p/scripts/main.js
@@ -1233,6 +1233,42 @@ function faviconNbUnread(n) {
 	}
 }
 
+function init_slider_observers() {
+	var slider = $('#slider'),
+	    closer = $('#close-slider');
+	if (slider.length < 1) {
+		return;
+	}
+
+	$('.open-slider').on('click', function() {
+		if (ajax_loading) {
+			return false;
+		}
+
+		ajax_loading = true;
+		var url_slide = $(this).attr('href');
+
+		$.ajax({
+			type: 'GET',
+			url: url_slide,
+			data : { ajax: true }
+		}).done(function (data) {
+			slider.html(data);
+			closer.addClass('active');
+			slider.addClass('active');
+			ajax_loading = false;
+		});
+
+		return false;
+	});
+
+	closer.on('click', function() {
+		closer.removeClass('active');
+		slider.removeClass('active');
+		return false;
+	});
+}
+
 function init_all() {
 	if (!(window.$ && window.url_freshrss)) {
 		if (window.console) {
@@ -1268,6 +1304,7 @@ function init_all() {
 		init_feed_observers();
 		init_password_observers();
 		init_stats_observers();
+		init_slider_observers();
 	}
 
 	if (window.console) {
diff --git a/p/themes/Dark/dark.css b/p/themes/Dark/dark.css
index 10f6e655b..f3790614e 100644
--- a/p/themes/Dark/dark.css
+++ b/p/themes/Dark/dark.css
@@ -435,6 +435,35 @@ a.btn {
 	font-size: 0;
 }
 
+/*=== Boxes */
+.box {
+	border: 1px solid #000;
+	border-radius: 5px;
+}
+.box .box-title {
+	margin: 0;
+	padding: 5px 10px;
+	background: #26303F;
+	border-bottom: 1px solid #000;
+	border-radius: 5px 5px 0 0;
+}
+.box .box-content {
+	max-height: 260px;
+}
+
+.box .box-content .item {
+	padding: 0 10px;
+	font-size: 0.9rem;
+	line-height: 2.5em;
+}
+
+.box .box-content .item .configure {
+	visibility: hidden;
+}
+.box .box-content .item:hover .configure {
+	visibility: visible;
+}
+
 /*=== STRUCTURE */
 /*===============*/
 /*=== Header */
diff --git a/p/themes/Flat/flat.css b/p/themes/Flat/flat.css
index 484cee9f3..d0ac46fd5 100644
--- a/p/themes/Flat/flat.css
+++ b/p/themes/Flat/flat.css
@@ -438,6 +438,36 @@ a.btn {
 	background: url("loader.gif") center center no-repeat #34495e;
 }
 
+/*=== Boxes */
+.box {
+	border: 1px solid #ddd;
+	border-radius: 5px;
+}
+.box .box-title {
+	margin: 0;
+	padding: 5px 10px;
+	background: #ecf0f1;
+	color: #333;
+	border-bottom: 1px solid #ddd;
+	border-radius: 5px 5px 0 0;
+}
+.box .box-content {
+	max-height: 260px;
+}
+
+.box .box-content .item {
+	padding: 0 10px;
+	font-size: 0.9rem;
+	line-height: 2.5em;
+}
+
+.box .box-content .item .configure {
+	visibility: hidden;
+}
+.box .box-content .item:hover .configure {
+	visibility: visible;
+}
+
 /*=== STRUCTURE */
 /*===============*/
 /*=== Header */
diff --git a/p/themes/Origine/origine.css b/p/themes/Origine/origine.css
index 08fc08379..e3ae85075 100644
--- a/p/themes/Origine/origine.css
+++ b/p/themes/Origine/origine.css
@@ -467,6 +467,36 @@ a.btn {
 	font-size: 0;
 }
 
+/*=== Boxes */
+.box {
+	background: #fff;
+	border-radius: 5px;
+	box-shadow: 0 0 3px #bbb;
+}
+.box .box-title {
+	margin: 0;
+	padding: 5px 10px;
+	background: #f6f6f6;
+	border-bottom: 1px solid #ddd;
+	border-radius: 5px 5px 0 0;
+}
+.box .box-content {
+	max-height: 260px;
+}
+
+.box .box-content .item {
+	padding: 0 10px;
+	font-size: 0.9rem;
+	line-height: 2.5em;
+}
+
+.box .box-content .item .configure {
+	visibility: hidden;
+}
+.box .box-content .item:hover .configure {
+	visibility: visible;
+}
+
 /*=== STRUCTURE */
 /*===============*/
 /*=== Header */
diff --git a/p/themes/Pafat/pafat.css b/p/themes/Pafat/pafat.css
index a35ac861d..28b17e15f 100644
--- a/p/themes/Pafat/pafat.css
+++ b/p/themes/Pafat/pafat.css
@@ -491,6 +491,35 @@ a.btn {
 	font-size: 0;
 }
 
+/*=== Boxes */
+.box {
+	border: 1px solid #aaa;
+	border-radius: 5px;
+}
+.box .box-title {
+	margin: 0;
+	padding: 5px 10px;
+	background: #f6f6f6;
+	border-bottom: 1px solid #aaa;
+	border-radius: 5px 5px 0 0;
+}
+.box .box-content {
+	max-height: 260px;
+}
+
+.box .box-content .item {
+	padding: 0 10px;
+	font-size: 0.9rem;
+	line-height: 2.5em;
+}
+
+.box .box-content .item .configure {
+	visibility: hidden;
+}
+.box .box-content .item:hover .configure {
+	visibility: visible;
+}
+
 /*=== STRUCTURE */
 /*===============*/
 /*=== Header */
diff --git a/p/themes/Screwdriver/screwdriver.css b/p/themes/Screwdriver/screwdriver.css
index 37fa18e10..6206504d1 100644
--- a/p/themes/Screwdriver/screwdriver.css
+++ b/p/themes/Screwdriver/screwdriver.css
@@ -497,6 +497,40 @@ a.btn {
 	font-size: 0;
 }
 
+/*=== Boxes */
+.box {
+	background: #EDE7DE;
+	border-radius: 4px 4px 0 0;
+}
+.box .box-title {
+	margin: 0;
+	padding: 5px 10px;
+	background: linear-gradient(0deg, #EDE7DE 0%, #fff 100%) #171717;
+	background: -webkit-linear-gradient(bottom, #EDE7DE 0%, #fff 100%);
+	box-shadow: 0px -1px #fff inset,0 -2px #ccc inset;
+	color: #888;
+	text-shadow: 0 1px #ccc;
+	border-radius: 4px 4px 0 0;
+	font-size: 1.1rem;
+	font-weight: normal;
+}
+.box .box-content {
+	max-height: 260px;
+}
+
+.box .box-content .item {
+	padding: 0 10px;
+	font-size: 0.9rem;
+	line-height: 2.5em;
+}
+
+.box .box-content .item .configure {
+	visibility: hidden;
+}
+.box .box-content .item:hover .configure {
+	visibility: visible;
+}
+
 /*=== STRUCTURE */
 /*===============*/
 /*=== Header */
diff --git a/p/themes/base-theme/base.css b/p/themes/base-theme/base.css
index ccfab10df..3f6ae956d 100644
--- a/p/themes/base-theme/base.css
+++ b/p/themes/base-theme/base.css
@@ -329,6 +329,30 @@ a.btn {
 	font-size: 0;
 }
 
+/*=== Boxes */
+.box {
+}
+.box .box-title {
+	margin: 0;
+	padding: 5px 10px;
+}
+.box .box-content {
+	max-height: 260px;
+}
+
+.box .box-content .item {
+	padding: 0 10px;
+	font-size: 0.9rem;
+	line-height: 2.5em;
+}
+
+.box .box-content .item .configure {
+	visibility: hidden;
+}
+.box .box-content .item:hover .configure {
+	visibility: visible;
+}
+
 /*=== STRUCTURE */
 /*===============*/
 /*=== Header */
diff --git a/p/themes/base-theme/template.css b/p/themes/base-theme/template.css
index dc011503d..e6c832ee4 100644
--- a/p/themes/base-theme/template.css
+++ b/p/themes/base-theme/template.css
@@ -280,6 +280,40 @@ a.btn {
 	width: 100px;
 }
 
+/*=== Boxes */
+.box {
+	display: inline-block;
+	width: 20rem;
+	max-width: 95%;
+	margin: 20px 10px;
+	border: 1px solid #ccc;
+	vertical-align: top;
+}
+.box .box-title {
+	font-size: 1.2rem;
+	font-weight: bold;
+	text-align: center;
+}
+.box .box-title form {
+	margin: 0;
+}
+.box .box-content {
+	display: block;
+	overflow: auto;
+}
+.box .box-content .item {
+	display: block;
+}
+
+.box .box-content-centered {
+	padding: 30px 5px;
+	text-align: center;
+}
+.box .box-content-centered .btn {
+	margin: 20px 0 0;
+}
+
+
 /*=== STRUCTURE */
 /*===============*/
 /*=== Header */
@@ -559,6 +593,8 @@ br + br + br {
 /*=== GLOBAL VIEW */
 /*================*/
 /*=== Category boxes */
+
+/* TODO <delete> */
 #stream.global .box-category {
 	display: inline-block;
 	width: 19em;
@@ -581,6 +617,7 @@ br + br + br {
 	width: 19em;
 	max-width: 90%;
 }
+/* TODO </delete */
 
 /*=== Panel */
 #overlay {
@@ -608,6 +645,33 @@ br + br + br {
 	display: none;
 }
 
+/*=== Slider */
+#slider {
+	position: fixed;
+	top: 0; bottom: 0;
+	left: 100%; right: 0;
+	overflow: auto;
+	background: #fff;
+	border-left: 1px solid #aaa;
+	transition: left 200ms linear;
+	-moz-transition: left 200ms linear;
+	-webkit-transition: left 200ms linear;
+	-o-transition: left 200ms linear;
+	-ms-transition: left 200ms linear;
+}
+#slider.active {
+	left: 40%;
+}
+#close-slider {
+	position: fixed;
+	top: 0; bottom: 0;
+	left: 100%; right: 0;
+	cursor: pointer;
+}
+#close-slider.active {
+	left: 0;
+}
+
 /*=== DIVERS */
 /*===========*/
 .nav-login,
diff --git a/p/themes/icons/import.svg b/p/themes/icons/import.svg
new file mode 100644
index 000000000..18a54ab59
--- /dev/null
+++ b/p/themes/icons/import.svg
@@ -0,0 +1 @@
+<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" height="16" width="16"><g transform="translate(-80,-648)"/><g transform="translate(-80,-648)"/><g transform="translate(-80,-648)"/><g transform="translate(-80,-648)"><path d="m84.406 657a0.5 0.5 0 0 0-0.312 0.219l-1 1.5a0.5 0.5 0 1 0 0.813 0.563l1-1.5A0.5 0.5 0 0 0 84.406 657zm7 0a0.5 0.5 0 0 0-0.312 0.781l1 1.5a0.5 0.5 0 1 0 0.813-0.562l-1-1.5A0.5 0.5 0 0 0 91.406 657z" style="-inkscape-font-specification:Sans;baseline-shift:baseline;block-progression:tb;direction:ltr;fill:#ffffff;font-family:Sans;font-size:medium;letter-spacing:normal;line-height:normal;text-align:start;text-anchor:start;text-decoration:none;text-indent:0;text-transform:none;word-spacing:normal;writing-mode:lr-tb"/><g transform="translate(-80,110)"><path d="m167 539 0 5.563-1.281-1.281C165.531 543.093 165.265 543 165 543l-1 0 0 1c0 0.265 0.093 0.531 0.281 0.719l3 3 0.281 0.281 0.875 0 0.281-0.281 3-3C171.907 544.531 172 544.265 172 544l0-1-1 0c-0.265 0-0.531 0.093-0.719 0.281L169 544.563 169 539z" style="-inkscape-font-specification:Bitstream Vera Sans;block-progression:tb;direction:ltr;fill:#ffffff;font-family:Bitstream Vera Sans;font-size:medium;letter-spacing:normal;line-height:normal;text-align:start;text-anchor:start;text-decoration:none;text-indent:0;text-transform:none;word-spacing:normal;writing-mode:lr-tb"/><path d="m163 549 0 4 10 0 0-4zm3.344 1.438c0.021-0.001 0.042-0.001 0.063 0 0.291-0.056 0.599 0.204 0.594 0.5l0 0.063 2 0 0-0.062c-0.004-0.264 0.236-0.507 0.5-0.507 0.264 0 0.504 0.243 0.5 0.507L170 551c0 0.545-0.455 1-1 1l-2 0c-0.545 0-1-0.455-1-1l0-0.062c-0.011-0.217 0.137-0.432 0.344-0.5z" fill="#ffffff"/></g></g><g transform="translate(-80,-648)"/><g transform="translate(-80,-648)"/><g transform="translate(-80,-648)"/></svg>