Ajout système liste déroulante pour les flux sous les catégories + amélioration design des boutons stick + modif système d'icones + petites corrections divers -> Fix bug #23

app/controllers/indexController.php

@@ -26,6 +26,8 @@ class indexController extends ActionController {
 		}
 
 		$get = Request::param ('get');
+		$this->view->get_c = false;
+		$this->view->get_f = false;
 		$order = $this->view->conf->sortOrder ();
 
 		$error = false;
@@ -33,6 +35,7 @@ class indexController extends ActionController {
 		// Récupère les flux par catégorie, favoris ou tous
 		if ($get == 'favoris') {
 			$entries = $entryDAO->listFavorites ($mode, $order);
+			$this->view->get_c = $get;
 			View::prependTitle ('Vos favoris - ');
 		} elseif ($get != false) {
 			$typeGet = $get[0];
@@ -43,6 +46,7 @@ class indexController extends ActionController {
 				$cat = $catDAO->searchById ($get);
 
 				if ($cat) {
+					$this->view->get_c = $get;
 					View::prependTitle ($cat->name () . ' - ');
 				} else {
 					$error = true;
@@ -52,6 +56,8 @@ class indexController extends ActionController {
 				$feed = $feedDAO->searchById ($get);
 
 				if ($feed) {
+					$this->view->get_f = $get;
+					$this->view->get_c = $feed->category ();
 					View::prependTitle ($feed->name () . ' - ');
 				} else {
 					$error = true;
@@ -63,7 +69,6 @@ class indexController extends ActionController {
 			View::prependTitle ('Vos flux RSS - ');
 		}
 
-		$this->view->get = $get;
 		$this->view->mode = $mode;
 
 		// Cas où on ne choisie ni catégorie ni les favoris

app/layout/aside_feed.phtml

@@ -4,7 +4,7 @@
 	<li class="nav-form"><form id="add_rss" method="post" action="<?php echo Url::display (array ('c' => 'feed', 'a' => 'add')); ?>">
 		<div class="stick">
 			<input type="url" name="url_rss" placeholder="Ajouter un flux RSS" />
-			<button class="btn" type="submit"><i class="icon add"></i></button>
+			<button class="btn" type="submit"><i class="icon i_add"></i></button>
 		</div>
 	</form></li>
 

app/layout/aside_flux.phtml

@@ -4,43 +4,53 @@
 		<li><a class="btn btn-important" href="<?php echo _url ('configure', 'feed'); ?>">Gestion des abonnements</a></li>
 		<?php } ?>
 
-		<li class="all">
-			<a class="btn category<?php echo !$this->get ? ' active' : ''; ?>" href="<?php echo _url ('index', 'index'); ?>">
-				<i class="icon all"></i>
-				Tous (<?php echo $this->nb_total; ?>)
-				<?php if ($this->nb_not_read > 0) { ?>
-				<span class="notRead"><?php echo $this->nb_not_read; ?> non lu<?php echo $this->nb_not_read > 1 ? 's' : ''; ?></span>
-				<?php } ?>
-			</a>
+		<li>
+			<div class="all">
+				<a class="btn<?php echo !$this->get_c ? ' active' : ''; ?>" href="<?php echo _url ('index', 'index'); ?>">
+					<i class="icon i_all"></i>
+					Tous (<?php echo $this->nb_total; ?>)
+					<?php if ($this->nb_not_read > 0) { ?>
+					<span class="notRead"><?php echo $this->nb_not_read; ?> non lu<?php echo $this->nb_not_read > 1 ? 's' : ''; ?></span>
+					<?php } ?>
+				</a>
+			</div>
 		</li>
 
-		<li class="favorites">
-			<a class="btn category<?php echo $this->get == 'favoris' ? ' active' : ''; ?>" href="<?php echo _url ('index', 'index', 'get', 'favoris'); ?>">
-				<i class="icon bookmark"></i>
-				Favoris (<?php echo $this->nb_favorites; ?>)
-			</a>
+		<li>
+			<div class="favorites">
+				<a class="btn<?php echo $this->get_c == 'favoris' ? ' active' : ''; ?>" href="<?php echo _url ('index', 'index', 'get', 'favoris'); ?>">
+					<i class="icon i_bookmark"></i>
+					Favoris (<?php echo $this->nb_favorites; ?>)
+				</a>
+			</div>
 		</li>
 
 		<?php foreach ($this->cat_aside as $cat) { ?>
 		<?php $feeds = $cat->feeds (); $catNotRead = $cat->nbNotRead (); ?>
 		<?php if (!empty ($feeds)) { ?>
 		<li>
-			<a class="btn category<?php echo $this->get == $cat->id () ? ' active' : ''; ?>" href="<?php echo _url ('index', 'index', 'get', 'c_' . $cat->id ()); ?>">
-				<?php echo $cat->name (); ?>
-				<?php if ($catNotRead > 0) { ?>
-				<span class="notRead"><?php echo $catNotRead ?> non lu<?php echo $catNotRead > 1 ? 's' : ''; ?></span>
-				<?php } ?>
-			</a>
+			<?php $c_active = false; if ($this->get_c == $cat->id ()) { $c_active = true; } ?>
+			<div class="category<?php echo $c_active ? ' active' : ''; ?>">
+				<a class="btn<?php echo $c_active ? ' active' : ''; ?>" href="<?php echo _url ('index', 'index', 'get', 'c_' . $cat->id ()); ?>">
+					<?php echo $cat->name (); ?>
+					<?php if ($catNotRead > 0) { ?>
+					<span class="notRead"><?php echo $catNotRead ?> non lu<?php echo $catNotRead > 1 ? 's' : ''; ?></span>
+					<?php } ?>
+				</a>
+			</div>
 
 			<?php if (!empty ($feeds)) { ?>
-			<ul class="feeds">
+			<ul class="feeds<?php echo $c_active ? ' active' : ''; ?>">
 				<?php foreach ($feeds as $feed) { ?>
-				<li class="item">
+				<?php $f_active = false; if ($this->get_f == $feed->id ()) { $f_active = true; } ?>
+				<li class="item<?php echo $f_active ? ' active' : ''; ?>">
 					<div class="dropdown">
 						<div id="dropdown-<?php echo $feed->id(); ?>" class="dropdown-target"></div>
-						<a class="dropdown-toggle" href="#dropdown-<?php echo $feed->id(); ?>"><i class="icon configure"></i></a>
+						<a class="dropdown-toggle" href="#dropdown-<?php echo $feed->id(); ?>"><i class="icon i_configure"></i></a>
 						<ul class="dropdown-menu">
-							<li class="dropdown-close"><a href="#close"><i class="icon close"></i></a></li>
+							<li class="dropdown-close"><a href="#close"><i class="icon i_close"></i></a></li>
+							<li class="item"><a href="<?php echo _url ('index', 'index', 'get', 'f_' . $feed->id ()); ?>">Filtrer</a></li>
+							<li class="separator"></li>
 							<li class="item"><a href="<?php echo _url ('configure', 'feed', 'id', $feed->id ()); ?>">Gestion</a></li>
 							<li class="item"><a href="<?php echo $feed->website (); ?>">Voir le site</a></li>
 						</ul>

app/layout/header.phtml

@@ -1,9 +1,9 @@
 <?php if (login_is_conf ($this->conf)) { ?>
 <ul class="nav nav-head">
 	<?php if (!is_logged ()) { ?>
-	<li class="item"><i class="icon login"></i> <a id="signin" href="#">Connexion</a></li>
+	<li class="item"><i class="icon i_login"></i> <a id="signin" href="#">Connexion</a></li>
 	<?php } else { ?>
-	<li class="item"><i class="icon logout"></i> <a id="signout" href="#">Déconnexion</a></li>
+	<li class="item"><i class="icon i_logout"></i> <a id="signout" href="#">Déconnexion</a></li>
 	<?php } ?>
 </ul>
 <?php } ?>
@@ -18,7 +18,7 @@
 			<div class="stick">
 				<?php $s = Request::param ('search', ''); ?>
 				<input type="text" name="search" id="search" value="<?php echo $s; ?>" placeholder="Rechercher (non fonctionnel)" />
-				<button class="btn" type="submit"><i class="icon search"></i></button>
+				<button class="btn" type="submit"><i class="icon i_search"></i></button>
 			</div>
 		</form>
 	</div>
@@ -28,9 +28,9 @@
 		<div class="dropdown">
 			<div id="dropdown-configure" class="dropdown-target"></div>
 
-			<a class="btn dropdown-toggle" href="#dropdown-configure"><i class="icon configure"></i></a>
+			<a class="btn dropdown-toggle" href="#dropdown-configure"><i class="icon i_configure"></i></a>
 			<ul class="dropdown-menu">
-				<li class="dropdown-close"><a href="#close"><i class="icon close"></i></a></li>
+				<li class="dropdown-close"><a href="#close"><i class="icon i_close"></i></a></li>
 				<li class="dropdown-header">Configuration</li>
 				<li class="item"><a href="<?php echo _url ('configure', 'display'); ?>">Général et affichage</a></li>
 				<li class="item"><a href="<?php echo _url ('configure', 'categorize'); ?>">Catégories</a></li>

app/layout/layout.phtml

@@ -19,7 +19,7 @@
 <?php if (isset ($this->notification)) { ?>
 <div class="notification <?php echo $this->notification['type']; ?>">
 	<?php echo $this->notification['content']; ?>
-	<a class="close" href=""><i class="icon close"></i></a>
+	<a class="close" href=""><i class="icon i_close"></i></a>
 </div>
 <?php } ?>
 	</body>

app/views/index/index.phtml

@@ -1,14 +1,16 @@
 <?php $this->partial ('aside_flux'); ?>
 
-<div class="nav_menu">
-	<a class="btn" href="<?php echo Url::display (array ('c' => 'feed', 'a' => 'actualize')); ?>"><i class="icon refresh"></i></a>
+<div class="nav_menu stick">
+	<a class="btn" href="<?php echo Url::display (array ('c' => 'feed', 'a' => 'actualize')); ?>"><i class="icon i_refresh"></i></a>
 
 	<?php if (!login_is_conf ($this->conf) || is_logged ()) { ?>
-	<a class="read_all btn" href="<?php echo Url::display (array ('c' => 'entry', 'a' => 'read', 'params' => array ('is_read' => 1))); ?>">Tout marquer comme lu</a><?php } ?><!--
+	<a class="read_all btn" href="<?php echo Url::display (array ('c' => 'entry', 'a' => 'read', 'params' => array ('is_read' => 1))); ?>">Tout marquer comme lu</a>
+	<?php } ?>
+
 	<?php if ($this->mode == 'not_read') { ?>
-	--><a class="print_all btn" href="<?php echo Url::display (array ('a' => 'changeMode', 'params' => array ('mode' => 'all'))); ?>">Tout afficher</a>
+	<a class="print_all btn" href="<?php echo Url::display (array ('a' => 'changeMode', 'params' => array ('mode' => 'all'))); ?>">Tout afficher</a>
 	<?php } else { ?>
-	--><a class="print_non_read btn" href="<?php echo Url::display (array ('a' => 'changeMode', 'params' => array ('mode' => 'not_read'))); ?>">Afficher les non lus</a>
+	<a class="print_non_read btn" href="<?php echo Url::display (array ('a' => 'changeMode', 'params' => array ('mode' => 'not_read'))); ?>">Afficher les non lus</a>
 	<?php } ?>
 </div>
 

app/views/javascript/main.phtml

@@ -129,8 +129,24 @@ function init_posts () {
 	});
 }
 
+function init_column_categories () {
+	$(".category").addClass ("stick");
+	$(".categories .category .btn:first-child").width ("160px");
+	$(".category").append ("<a class=\"btn dropdown-toggle\" href=\"#\"><i class=\"icon i_down\"></i></a>");
+
+	$(".category + .feeds").not(".active").hide();
+	$(".category.active a.dropdown-toggle i").toggleClass ("i_up");
+
+	$(".category a.dropdown-toggle").click (function () {
+		$(this).children ().toggleClass ("i_up");
+		$(this).parent ().next (".feeds").slideToggle();
+		return false;
+	});
+}
+
 $(document).ready (function () {
 	init_posts ();
+	init_column_categories ();
 
 	// Touches de manipulation
 	shortcut.add("<?php echo $s['mark_read']; ?>", function () {

public/theme/base.css

@@ -62,7 +62,6 @@ label {
 input {
 	display: inline-block;
 	min-height: 25px;
-	width: 200px;
 	padding: 5px;
 	background: #fdfdfd;
 	border: 1px solid #bbb;
@@ -123,13 +122,30 @@ input {
 	vertical-align: middle;
 }
 	.stick input {
-		border-radius: 3px 0 0 3px;
-		border-right: none;
+		border-radius: 0;
+		font-size: 14px;
 	}
 	.stick .btn {
-		border-top: 1px solid #bbb;
+		border-radius: 0;
+		font-size: 14px;
+	}
+	.stick .btn:first-child,
+	.stick input:first-child {
+		border-radius: 3px 0 0 3px;
+	}
+	.stick .btn:last-child,
+	.stick input:last-child {
 		border-radius: 0 3px 3px 0;
 	}
+	.stick .btn+.btn,
+	.stick .btn+input,
+	.stick input+.btn,
+	.stick input+input {
+		border-left: none;
+	}
+	.stick input+.btn {
+		border-top: 1px solid #bbb;
+	}
 
 .btn {
 	display: inline-block;
@@ -358,36 +374,42 @@ input {
 	vertical-align: middle;
 	line-height: 14px;
 }
-	.icon.refresh {
+	.icon.i_refresh {
 		background: url("icons/refresh.svg") center center no-repeat;
 	}
-	.icon.bookmark {
+	.icon.i_bookmark {
 		background: url("icons/starred.svg") center center no-repeat;
 	}
-	.icon.all {
+	.icon.i_all {
 		background: url("icons/all.svg") center center no-repeat;
 	}
-	.icon.close {
+	.icon.i_close {
 		background: url("icons/close.svg") center center no-repeat;
 	}
-	.icon.search {
+	.icon.i_search {
 		background: url("icons/search.svg") center center no-repeat;
 	}
-	.icon.configure {
+	.icon.i_configure {
 		background: url("icons/configure.svg") center center no-repeat;
 	}
-	.icon.login {
+	.icon.i_login {
 		background: url("icons/login.svg") center center no-repeat;
 	}
-	.icon.logout {
+	.icon.i_logout {
 		background: url("icons/logout.svg") center center no-repeat;
 	}
-	.icon.add {
+	.icon.i_add {
 		background: url("icons/add.svg") center center no-repeat;
 	}
-	.icon.link {
+	.icon.i_link {
 		background: url("icons/link.svg") center center no-repeat;
 	}
+	.icon.i_down {
+		background: url("icons/down.svg") center center no-repeat;
+	}
+	.icon.i_up {
+		background: url("icons/up.svg") center center no-repeat;
+	}
 
 /* STRUCTURE */
 .header {
@@ -428,7 +450,7 @@ input {
 	display: table;
 	width: 100%;
 	height: 100%;
-	background: #fff;
+	background: #fafafa;
 	table-layout: fixed;
 }
 	.aside {
@@ -453,9 +475,6 @@ input {
 		text-align: center;
 		padding: 5px 0;
 	}
-		.nav_menu .btn {
-			margin: 0 5px;
-		}
 
 .categories {
 	margin: 0;
@@ -463,36 +482,48 @@ input {
 	text-align: center;
 	list-style: none;
 }
-	.categories .feeds .feed,
+	.categories .all,
+	.categories .favorites,
 	.categories .category {
-		position: relative;
 		display: block;
-		width: 200px;
+		padding: 5px 0;
+		width: 220px;
 		margin: 5px auto;
 		text-align: left;
 		overflow: hidden;
 		white-space: nowrap;
 		text-overflow: ellipsis;
 	}
+		.categories .all .btn,
+		.categories .favorites .btn,
+		.categories .category .btn:first-child {
+			width: 195px;
+			position: relative;
+		}
 	.categories .feeds {
 		width: 220px;
 		margin: 0 auto;
 		list-style: none;
 	}
-		.categories .feeds .feed {
-			display: inline-block;
-			margin: 0;
-			width: 170px;
-			line-height: 35px;
-			font-size: 90%;
-			vertical-align: middle;
+		.catefories .feeds .item {
 		}
+			.categories .feeds .item.active:after {
+				content: "⇢";
+				line-height: 35px;
+				float: right;
+			}
+			.categories .feeds .item .feed {
+				display: inline-block;
+				margin: 0;
+				width: 170px;
+				line-height: 35px;
+				font-size: 90%;
+				vertical-align: middle;
+				text-align: left;
+			}
 		.categories .feeds .dropdown .dropdown-menu {
 			left: 0;
 		}
-		.categories .feeds .dropdown .dropdown-close {
-			left: -16px;
-		}
 	.categories .notRead {
 		position: absolute;
 		top: 3px; right: 3px;
@@ -519,9 +550,13 @@ input {
 	font-size: 130%;
 	font-weight: bold;
 	line-height: 50px;
+	background: #fff;
 	border-top: 1px solid #aaa;
 	border-bottom: 1px solid #aaa;
 }
+	.day:first-child {
+		border-top: none;
+	}
 
 .flux {
 	border-left: 10px solid #aaa;
@@ -746,8 +781,4 @@ input {
 	}
 }
 @media(max-width: 450px) {
-	.nav_menu .btn {
-		display: block;
-		margin: 5px 0;
-	}
 }