From 044f4542baccc00ea6db4ec38cb0f65928242f61 Mon Sep 17 00:00:00 2001
From: Marien Fressinaud <dev@marienfressinaud.fr>
Date: Wed, 9 Oct 2013 21:05:09 +0200
Subject: [PATCH] =?UTF-8?q?Mise=20=C3=A0=20jour=20design=20(dropdown)=20+?=
 =?UTF-8?q?=20fichier=20fallback=20supprim=C3=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Suppression des boutons de fermeture pour les dropdowns : la fermeture
  se fait maintenant en cliquant n'importe où sur l'écran
* Suppression fichier fallback.css pour le thème par défaut. Déplacement
  dans freshrss.css en fin de fichier pour bien le séparer du reste (#166)
---
 app/layout/aside_feed.phtml              |  2 +-
 app/layout/aside_flux.phtml              |  2 +-
 app/layout/header.phtml                  |  2 +-
 app/layout/nav_menu.phtml                |  4 +-
 app/views/helpers/view/normal_view.phtml |  4 +-
 public/themes/default/fallback.css       | 65 --------------------
 public/themes/default/freshrss.css       | 78 ++++++++++++++++++++++++
 public/themes/default/global.css         | 36 ++++++-----
 public/themes/flat-design/freshrss.css   | 13 ++++
 public/themes/flat-design/global.css     | 41 +++++++------
 10 files changed, 140 insertions(+), 107 deletions(-)
 delete mode 100644 public/themes/default/fallback.css

diff --git a/app/layout/aside_feed.phtml b/app/layout/aside_feed.phtml
index f9503e940..6df64e6dc 100644
--- a/app/layout/aside_feed.phtml
+++ b/app/layout/aside_feed.phtml
@@ -9,7 +9,7 @@
 
 				<a class="dropdown-toggle btn" href="#dropdown-cat"><i class="icon i_down"></i></a>
 				<ul class="dropdown-menu">
-					<li class="dropdown-close"><a href="#close"><i class="icon i_close"></i></a></li>
+					<li class="dropdown-close"><a href="#close">&nbsp;</a></li>
 
 					<li class="dropdown-header"><?php echo Translate::t ('category'); ?></li>
 
diff --git a/app/layout/aside_flux.phtml b/app/layout/aside_flux.phtml
index 0045380b5..5ac86db96 100644
--- a/app/layout/aside_flux.phtml
+++ b/app/layout/aside_flux.phtml
@@ -73,7 +73,7 @@
 						<div id="dropdown-<?php echo $feed->id(); ?>" class="dropdown-target"></div>
 						<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 i_close"></i></a></li>
+							<li class="dropdown-close"><a href="#close">&nbsp;</a></li>
 							<li class="item"><a href="<?php echo _url ('index', 'index', 'get', 'f_' . $feed->id ()); ?>"><?php echo Translate::t ('filter'); ?></a></li>
 							<li class="item"><a target="_blank" href="<?php echo $feed->website (); ?>"><?php echo Translate::t ('see_website'); ?></a></li>
 							<?php if (!login_is_conf ($this->conf) || is_logged ()) { ?>
diff --git a/app/layout/header.phtml b/app/layout/header.phtml
index d8ab81959..b75ed818b 100644
--- a/app/layout/header.phtml
+++ b/app/layout/header.phtml
@@ -51,7 +51,7 @@
 
 			<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 i_close"></i></a></li>
+				<li class="dropdown-close"><a href="#close">&nbsp;</a></li>
 				<li class="dropdown-header"><?php echo Translate::t ('configuration'); ?></li>
 				<li class="item"><a href="<?php echo _url ('configure', 'display'); ?>"><?php echo Translate::t ('general_and_reading'); ?></a></li>
 				<li class="item"><a href="<?php echo _url ('configure', 'categorize'); ?>"><?php echo Translate::t ('categories'); ?></a></li>
diff --git a/app/layout/nav_menu.phtml b/app/layout/nav_menu.phtml
index 59ddc57ea..fd7ed550b 100644
--- a/app/layout/nav_menu.phtml
+++ b/app/layout/nav_menu.phtml
@@ -62,7 +62,7 @@
 
 			<a class="dropdown-toggle btn" href="#dropdown-read"><i class="icon i_down"></i></a>
 			<ul class="dropdown-menu">
-				<li class="dropdown-close"><a href="#close"><i class="icon i_close"></i></a></li>
+				<li class="dropdown-close"><a href="#close">&nbsp;</a></li>
 
 				<li class="item"><a href="<?php echo _url ('entry', 'read', 'is_read', 1, 'get', $get, 'nextGet', $nextGet); ?>"><?php echo $string_mark; ?></a></li> 
 				<li class="separator"></li>
@@ -93,7 +93,7 @@
 		<div id="dropdown-views" class="dropdown-target"></div>
 		<a class="dropdown-toggle btn" href="#dropdown-views"><?php echo Translate::t ('display'); ?> <i class="icon i_down"></i></a>
 		<ul class="dropdown-menu">
-			<li class="dropdown-close"><a href="#close"><i class="icon i_close"></i></a></li>
+			<li class="dropdown-close"><a href="#close">&nbsp;</a></li>
 
 			<?php
 				$url_output = $url;
diff --git a/app/views/helpers/view/normal_view.phtml b/app/views/helpers/view/normal_view.phtml
index 4f9c6a4c0..d940e0dda 100644
--- a/app/views/helpers/view/normal_view.phtml
+++ b/app/views/helpers/view/normal_view.phtml
@@ -101,7 +101,7 @@ if (isset ($this->entryPaginator) && !$this->entryPaginator->isEmpty ()) {
 						<i class="icon i_share"></i> <a class="dropdown-toggle" href="#dropdown-share-<?php echo $item->id ();?>"><?php echo Translate::t ('share'); ?></a>
 
 						<ul class="dropdown-menu">
-							<li class="dropdown-close"><a href="#close"><i class="icon i_close"></i></a></li>
+							<li class="dropdown-close"><a href="#close">&nbsp;</a></li>
 
 							<?php
 							$shaarli = $this->conf->urlShaarli ();
@@ -144,7 +144,7 @@ if (isset ($this->entryPaginator) && !$this->entryPaginator->isEmpty ()) {
 						<i class="icon i_tag"></i> <a class="dropdown-toggle" href="#dropdown-tags-<?php echo $item->id ();?>"><?php echo Translate::t ('related_tags'); ?></a>
 
 						<ul class="dropdown-menu">
-							<li class="dropdown-close"><a href="#close"><i class="icon i_close"></i></a></li>
+							<li class="dropdown-close"><a href="#close">&nbsp;</a></li>
 
 							<?php foreach($tags as $tag) { ?>
 							<li class="item"><a href="<?php echo _url ('index', 'index', 'search', urlencode ('#' . $tag)); ?>"><?php echo $tag; ?></a></li>
diff --git a/public/themes/default/fallback.css b/public/themes/default/fallback.css
deleted file mode 100644
index 579b2eaa8..000000000
--- a/public/themes/default/fallback.css
+++ /dev/null
@@ -1,65 +0,0 @@
-.btn {
-	background: #fff;
-	background: -moz-linear-gradient(top, #fff 0%, #eee 100%);
-	background: -webkit-linear-gradient(top, #fff 0%, #eee 100%);
-	background: -o-linear-gradient(top, #fff 0%, #eee 100%);
-	background: -ms-linear-gradient(top, #fff 0%, #eee 100%);
-}
-	.btn:hover {
-		background: #f0f0f0;
-		background: -moz-linear-gradient(top, #f8f8f8 0%, #f0f0f0 100%);
-		background: -webkit-linear-gradient(top, #f8f8f8 0%, #f0f0f0 100%);
-		background: -o-linear-gradient(top, #f8f8f8 0%, #f0f0f0 100%);
-		background: -ms-linear-gradient(top, #f8f8f8 0%, #f0f0f0 100%);
-	}
-	.btn.btn-important {
-		background: #0084CC;
-		background: -moz-linear-gradient(top, #0084CC 0%, #0045CC 100%);
-		background: -webkit-linear-gradient(top, #0084CC 0%, #0045CC 100%);
-		background: -o-linear-gradient(top, #0084CC 0%, #0045CC 100%);
-		background: -ms-linear-gradient(top, #0084CC 0%, #0045CC 100%);
-	}
-		.btn.btn-important:hover {
-			background: -moz-linear-gradient(top, #0066CC 0%, #0045CC 100%);
-			background: -webkit-linear-gradient(top, #0066CC 0%, #0045CC 100%);
-			background: -o-linear-gradient(top, #0066CC 0%, #0045CC 100%);
-			background: -ms-linear-gradient(top, #0066CC 0%, #0045CC 100%);
-		}
-	.btn.btn-attention {
-		background: #E95B57;
-		background: -moz-linear-gradient(top, #E95B57 0%, #BD362F 100%);
-		background: -webkit-linear-gradient(top, #E95B57 0%, #BD362F 100%);
-		background: -o-linear-gradient(top, #E95B57 0%, #BD362F 100%);
-		background: -ms-linear-gradient(top, #E95B57 0%, #BD362F 100%);
-	}
-		.btn.btn-attention:hover {
-			background: -moz-linear-gradient(top, #D14641 0%, #BD362F 100%);
-			background: -webkit-linear-gradient(top, #D14641 0%, #BD362F 100%);
-			background: -o-linear-gradient(top, #D14641 0%, #BD362F 100%);
-			background: -ms-linear-gradient(top, #D14641 0%, #BD362F 100%);
-		}
-
-
-.nav-head {
-	background: #fff;
-	background: -moz-linear-gradient(top, #fff 0%, #f0f0f0 100%);
-	background: -webkit-linear-gradient(top, #fff 0%, #f0f0f0 100%);
-	background: -o-linear-gradient(top, #fff 0%, #f0f0f0 100%);
-	background: -ms-linear-gradient(top, #fff 0%, #f0f0f0 100%);
-}
-
-.header > .item.search input {
-	-moz-transition: width 200ms linear;
-	 -webkit-transition: width 200ms linear;
-	-o-transition: width 200ms linear;
-	-ms-transition: width 200ms linear;
-}
-
-@media(max-width: 840px) {
-	.aside {
-		-moz-transition: width 200ms linear;
-		 -webkit-transition: width 200ms linear;
-		-o-transition: width 200ms linear;
-		-ms-transition: width 200ms linear;
-	}
-}
diff --git a/public/themes/default/freshrss.css b/public/themes/default/freshrss.css
index a9df3ba55..b157568cc 100644
--- a/public/themes/default/freshrss.css
+++ b/public/themes/default/freshrss.css
@@ -69,6 +69,9 @@
 		.aside.aside_feed .nav-form .dropdown .dropdown-menu {
 			right: -20px;
 		}
+		.aside.aside_feed .nav-form .dropdown .dropdown-menu:after {
+			right: 33px;
+		}
 
 	.nav-login {
 		display: none;
@@ -149,6 +152,9 @@
 		.categories .feeds .dropdown .dropdown-menu {
 			left: 0;
 		}
+		.categories .feeds .dropdown .dropdown-menu:after {
+			left: 2px;
+		}
 		.categories .feeds .item .dropdown-toggle i {
 			background-image: none;
 		}
@@ -734,3 +740,75 @@
 		right: 10px;
 	}
 }
+
+/*** FALLBACK ***/
+.btn {
+	background: #fff;
+	background: -moz-linear-gradient(top, #fff 0%, #eee 100%);
+	background: -webkit-linear-gradient(top, #fff 0%, #eee 100%);
+	background: -o-linear-gradient(top, #fff 0%, #eee 100%);
+	background: -ms-linear-gradient(top, #fff 0%, #eee 100%);
+}
+	.btn:hover {
+		background: #f0f0f0;
+		background: -moz-linear-gradient(top, #f8f8f8 0%, #f0f0f0 100%);
+		background: -webkit-linear-gradient(top, #f8f8f8 0%, #f0f0f0 100%);
+		background: -o-linear-gradient(top, #f8f8f8 0%, #f0f0f0 100%);
+		background: -ms-linear-gradient(top, #f8f8f8 0%, #f0f0f0 100%);
+	}
+	.btn.btn-important {
+		background: #0084CC;
+		background: -moz-linear-gradient(top, #0084CC 0%, #0045CC 100%);
+		background: -webkit-linear-gradient(top, #0084CC 0%, #0045CC 100%);
+		background: -o-linear-gradient(top, #0084CC 0%, #0045CC 100%);
+		background: -ms-linear-gradient(top, #0084CC 0%, #0045CC 100%);
+	}
+		.btn.btn-important:hover {
+			background: -moz-linear-gradient(top, #0066CC 0%, #0045CC 100%);
+			background: -webkit-linear-gradient(top, #0066CC 0%, #0045CC 100%);
+			background: -o-linear-gradient(top, #0066CC 0%, #0045CC 100%);
+			background: -ms-linear-gradient(top, #0066CC 0%, #0045CC 100%);
+		}
+	.btn.btn-attention {
+		background: #E95B57;
+		background: -moz-linear-gradient(top, #E95B57 0%, #BD362F 100%);
+		background: -webkit-linear-gradient(top, #E95B57 0%, #BD362F 100%);
+		background: -o-linear-gradient(top, #E95B57 0%, #BD362F 100%);
+		background: -ms-linear-gradient(top, #E95B57 0%, #BD362F 100%);
+	}
+		.btn.btn-attention:hover {
+			background: -moz-linear-gradient(top, #D14641 0%, #BD362F 100%);
+			background: -webkit-linear-gradient(top, #D14641 0%, #BD362F 100%);
+			background: -o-linear-gradient(top, #D14641 0%, #BD362F 100%);
+			background: -ms-linear-gradient(top, #D14641 0%, #BD362F 100%);
+		}
+
+.dropdown .dropdown-menu:after {
+	-moz-transform: rotate(45deg);
+	-webkit-transform: rotate(45deg);
+	-ms-transform: rotate(45deg);
+}
+
+.nav-head {
+	background: #fff;
+	background: -moz-linear-gradient(top, #fff 0%, #f0f0f0 100%);
+	background: -webkit-linear-gradient(top, #fff 0%, #f0f0f0 100%);
+	background: -o-linear-gradient(top, #fff 0%, #f0f0f0 100%);
+	background: -ms-linear-gradient(top, #fff 0%, #f0f0f0 100%);
+}
+
+.header > .item.search input {
+	-moz-transition: width 200ms linear;
+	 -webkit-transition: width 200ms linear;
+	-o-transition: width 200ms linear;
+	-ms-transition: width 200ms linear;
+}
+
+@media(max-width: 840px) {
+	.aside {
+		-moz-transition: width 200ms linear;
+		 -webkit-transition: width 200ms linear;
+		-o-transition: width 200ms linear;
+		-ms-transition: width 200ms linear;
+	}
+}
diff --git a/public/themes/default/global.css b/public/themes/default/global.css
index 7caeb34e6..8685b4e92 100644
--- a/public/themes/default/global.css
+++ b/public/themes/default/global.css
@@ -211,7 +211,8 @@ input, select, textarea {
 		text-decoration: none;
 	}
 	.btn.active,
-	.btn:active {
+	.btn:active,
+	.dropdown-target:target ~ .btn.dropdown-toggle {
 		box-shadow: 0px 2px 4px #e0e0e0 inset, 0px 1px 2px #fafafa;
 		background: #eee;
 	}
@@ -360,6 +361,19 @@ input, select, textarea {
 		border-radius: 5px;
 		text-align: left;
 		box-shadow: 3px 3px 3px #ddd;
+	}
+	.dropdown .dropdown-menu:after {
+		content: "";
+		position: absolute;
+		top: -6px;
+		right: 13px;
+		width: 10px;
+		height: 10px;
+		background: #fff;
+		border-top: 1px solid #ddd;
+		border-left: 1px solid #ddd;
+		z-index: -10;
+		transform: rotate(45deg);
 	}
 		.dropdown .dropdown-menu .dropdown-header {
 			display: block;
@@ -418,24 +432,14 @@ input, select, textarea {
 			z-index: 10;
 		}
 	.dropdown .dropdown-close {
-		display: inline-block;
-		position: absolute;
-		top: -16px; right: -16px;
-		width: 26px;
-		height: 26px;
-		background: #fff;
-		border-radius: 50px;
-		border: 1px solid #ddd;
-		line-height: 26px;
-		text-align: center;
+		display: inline;
 	}
 		.dropdown .dropdown-close a {
+			position: fixed;
+			top: 0; bottom: 0;
+			left: 0; right: 0;
 			display: block;
-			width: 100%;
-			height: 100%;
-		}
-		.dropdown .dropdown-close:hover {
-			background: #f4f4f4;
+			z-index: -10;
 		}
 
 /* ALERTS */
diff --git a/public/themes/flat-design/freshrss.css b/public/themes/flat-design/freshrss.css
index bea574e37..49533f017 100644
--- a/public/themes/flat-design/freshrss.css
+++ b/public/themes/flat-design/freshrss.css
@@ -67,6 +67,9 @@ body {
 		.aside.aside_feed .nav-form .dropdown .dropdown-menu {
 			right: -20px;
 		}
+		.aside.aside_feed .nav-form .dropdown .dropdown-menu:after {
+			right: 33px;
+		}
 
 	.nav-login {
 		display: none;
@@ -138,6 +141,9 @@ body {
 		.categories .feeds .dropdown .dropdown-menu {
 			left: 0;
 		}
+		.categories .feeds .dropdown .dropdown-menu:after {
+			left: 2px;
+		}
 		.categories .feeds .item .dropdown-toggle i {
 			background-image: none;
 		}
@@ -739,3 +745,10 @@ body {
 		right: 10px;
 	}
 }
+
+/*** FALLBACK ***/
+.dropdown .dropdown-menu:after {
+	-moz-transform: rotate(45deg);
+	-webkit-transform: rotate(45deg);
+	-ms-transform: rotate(45deg);
+}
diff --git a/public/themes/flat-design/global.css b/public/themes/flat-design/global.css
index 5f645602b..0824d1bb3 100644
--- a/public/themes/flat-design/global.css
+++ b/public/themes/flat-design/global.css
@@ -203,14 +203,13 @@ input, select, textarea {
 		min-height: 25px;
 		line-height: 25px;
 	}
-	.btn:hover {
+	.btn.active,
+	.btn:active,
+	.btn:hover,
+	.dropdown-target:target ~ .btn.dropdown-toggle {
 		background: #2980b9;
 		text-decoration: none;
 	}
-	.btn.active,
-	.btn:active {
-		background: #2980b9;
-	}
 
 	.btn.btn-important {
 		background: #e67e22;
@@ -351,6 +350,19 @@ input, select, textarea {
 		border: 1px solid #95a5a6;
 		border-radius: 3px;
 		text-align: left;
+	}
+	.dropdown .dropdown-menu:after {
+		content: "";
+		position: absolute;
+		top: -6px;
+		right: 13px;
+		width: 10px;
+		height: 10px;
+		background: #fff;
+		border-top: 1px solid #95a5a6;
+		border-left: 1px solid #95a5a6;
+		z-index: -10;
+		transform: rotate(45deg);
 	}
 		.dropdown .dropdown-menu .dropdown-header {
 			display: block;
@@ -412,23 +424,14 @@ input, select, textarea {
 			z-index: 10;
 		}
 	.dropdown .dropdown-close {
-		display: inline-block;
-		position: absolute;
-		top: -10px; right: -10px;
-		width: 26px;
-		height: 26px;
-		background: #95a5a6;
-		line-height: 24px;
-		text-align: center;
-		border-radius: 3px;
+		display: inline;
 	}
 		.dropdown .dropdown-close a {
+			position: fixed;
+			top: 0; bottom: 0;
+			left: 0; right: 0;
 			display: block;
-			width: 100%;
-			height: 100%;
-		}
-		.dropdown .dropdown-close:hover {
-			background: #7f8c8d;
+			z-index: -10;
 		}
 
 /* ALERTS */