Gestion des boutons dropdown (uniquement du CSS)

3 files changed, 106 insertions, 13 deletions

diff --git a/app/layout/aside_flux.phtml b/app/layout/aside_flux.phtml
index f6d8b3887..43728bc6c 100644
--- a/app/layout/aside_flux.phtml
+++ b/app/layout/aside_flux.phtml
@@ -31,8 +31,17 @@
 			<?php if (!empty ($feeds)) { ?>
 			<ul class="feeds">
 				<?php foreach ($feeds as $feed) { ?>
-				<li>
-					<a class="website" href="<?php echo _url ('configure', 'feed', 'id', $feed->id ()); ?>"><i class="icon configure"></i></a>
+				<li class="item">
+					<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>
+						<ul class="dropdown-menu">
+							<li class="dropdown-close"><a href="#close"><i class="icon close"></i></a></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>
+					</div>
+
 					<img src="http://www.google.com/s2/favicons?domain=<?php echo get_domain ($feed->website ()); ?>" alt="" />
 					<a class="feed" href="<?php echo _url ('index', 'index', 'get', 'f_' . $feed->id ()); ?>">
 						<?php echo $feed->name(); ?>
diff --git a/app/layout/header.phtml b/app/layout/header.phtml
index 36c53654c..811c2b4f1 100644
--- a/app/layout/header.phtml
+++ b/app/layout/header.phtml
@@ -25,7 +25,20 @@
 
 	<?php if (!login_is_conf ($this->conf) || is_logged ()) { ?>
 	<div class="item configure">
-		<a class="btn" href="<?php echo _url ('configure', 'display'); ?>"><i class="icon configure"></i></a>
+		<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>
+			<ul class="dropdown-menu">
+				<li class="dropdown-close"><a href="#close"><i class="icon close"></i></a></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>
+				<li class="item"><a href="<?php echo _url ('configure', 'shortcut'); ?>">Raccourcis</a></li>
+				<li class="item"><a href="<?php echo _url ('configure', 'importExport'); ?>">Import / Export OPML</a></li>
+				<li class="separator"></li>
+				<li class="item"><a href="<?php echo _url ('index', 'about'); ?>">À propos</a></li>
+			</ul>
+		</div>
 	</div>
 	<?php } ?>
 </div>
diff --git a/public/theme/base.css b/public/theme/base.css
index 2c8f340b7..01493d28c 100644
--- a/public/theme/base.css
+++ b/public/theme/base.css
@@ -253,6 +253,73 @@ input {
 		padding: 5px 10px;
 	}
 
+/* DROPDOWN */
+.dropdown {
+	position: relative;
+	display: inline-block;
+}
+	.dropdown .dropdown-target {
+		display: none;
+	}
+
+	.dropdown .dropdown-menu {
+		display: none;
+		min-width: 200px;
+		margin: -1px 0 0;
+		padding: 5px 0;
+		position: absolute;
+		right: 0px;
+		background: #fff;
+		border: 1px solid #ddd;
+		border-radius: 5px;
+		text-align: left;
+		box-shadow: 3px 3px 3px #ddd;
+	}
+		.dropdown .dropdown-menu .item {
+			display: block;
+			height: 30px;
+			font-size: 14px;
+			line-height: 30px;
+			padding: 0 10px;
+		}
+			.dropdown .dropdown-menu .item a {
+				display: block;
+			}
+			.dropdown .dropdown-menu .item:hover {
+				background: #0062BE;
+				color: #fff;
+			}
+				.dropdown .dropdown-menu .item:hover a {
+					color: #fff;
+					text-decoration: none;
+				}
+		.dropdown .dropdown-menu .separator {
+			display: block;
+			height: 0;
+			margin: 5px 0;
+			border-bottom: 1px solid #ddd;
+		}
+		.dropdown .dropdown-target:target ~ .dropdown-menu {
+			display: block;
+			z-index: 10;
+		}
+	.dropdown .dropdown-close {
+		display: inline-block;
+		position: absolute;
+		top: -16px; right: -16px;
+		width: 16px;
+		height: 16px;
+		padding: 5px;
+		background: #fff;
+		border-radius: 50px;
+		border: 1px solid #ddd;
+		line-height: 16px;
+		text-align: center;
+	}
+		.dropdown .dropdown-close:hover {
+			background: #f4f4f4;
+		}
+
 /* ALERTS */
 .alert {
 	display: block;
@@ -320,31 +387,31 @@ input {
 	background: #f4f4f4;
 	table-layout: fixed;
 }
-	.header .item {
+	.header > .item {
 		display: table-cell;
 		padding: 10px 0;
 		border-bottom: 1px solid #aaa;
 		vertical-align: middle;
 		text-align: center;
 	}
-		.header .item.title {
+		.header > .item.title {
 			width: 250px;
 		}
-			.header .item.title h1 {
+			.header > .item.title h1 {
 				margin: 0;
 				text-shadow: 1px -1px 0 #ccc;
 			}
-			.header .item.title a:hover {
+			.header > .item.title a:hover {
 				text-decoration: none;
 			}
-		.header .item.search input {
+		.header > .item.search input {
 			width: 200px;
 			transition: all 200ms linear;
 		}
 			.header .item.search input:focus {
 				width: 300px;
 			}
-		.header .item.configure {
+		.header > .item.configure {
 			width: 100px;
 		}
 
@@ -411,18 +478,22 @@ input {
 			font-size: 90%;
 			vertical-align: middle;
 		}
+		.categories .feeds .dropdown .dropdown-menu {
+			left: 0;
+		}
+		.categories .feeds .dropdown .dropdown-close {
+			left: -16px;
+		}
 	.categories .notRead {
 		position: absolute;
 		top: 3px; right: 3px;
 		padding: 1px 5px;
-		background: #bbb;
+		background: #ccc;
 		color: #fff;
 		font-size: 90%;
 		border: 1px solid #bbb;
-		border-right: 1px solid #999;
-		border-bottom: 1px solid #999;
 		border-radius: 5px;
-		box-shadow: 1px 3px 3px #999 inset;
+		box-shadow: 1px 3px 3px #aaa inset;
 		text-shadow: 0 0 1px #aaa;
 	}