Split up addfeedfolder dialog into two dialogs.

10 files changed, 135 insertions, 74 deletions

diff --git a/ajax/feeddialog.php b/ajax/feeddialog.php
new file mode 100644
index 000000000..c42771c98
--- /dev/null
+++ b/ajax/feeddialog.php
@@ -0,0 +1,7 @@
+<?php
+
+include("populateroot.php");
+
+$output = new OCP\Template("news", "part.addfeed");
+$output -> assign('allfeeds', $allfeeds);
+$output -> printpage();
\ No newline at end of file
diff --git a/ajax/folderdialog.php b/ajax/folderdialog.php
new file mode 100644
index 000000000..97b679e66
--- /dev/null
+++ b/ajax/folderdialog.php
@@ -0,0 +1,7 @@
+<?php
+
+include("populateroot.php");
+
+$output = new OCP\Template("news", "part.addfolder");
+$output -> assign('allfeeds', $allfeeds);
+$output -> printpage();
\ No newline at end of file
diff --git a/ajax/addfeedfolder.php b/ajax/populateroot.php
index a8a0fd3d5..a408c25ec 100644
--- a/ajax/addfeedfolder.php
+++ b/ajax/populateroot.php
@@ -16,7 +16,3 @@ if ($allfeeds) {
 else {
 	$feedid = 0;
 }
-
-$output = new OCP\Template("news", "part.addfeedfolder");
-$output -> assign('allfeeds', $allfeeds);
-$output -> printpage();
\ No newline at end of file
diff --git a/css/news.css b/css/news.css
index 8e6c93985..1e8598f73 100644
--- a/css/news.css
+++ b/css/news.css
@@ -8,7 +8,7 @@ li { padding-right: 0px !important; }
 #rightcontent { top: 3.5em !important; padding-top: 5px; }
 #feeds { background: #fff; width: 20em; left: 12.5em; top: 3.7em; bottom:3em; position: fixed; overflow: auto; padding: 0; margin: 0; }
 /* #feeds a { height: 23px; display: block; margin: 0 0 0 0; padding: 0 0 0 25px; } */
-#bottomcontrols { padding: 0; bottom:0px; height:2.8em; width: 20em; margin:0; background:#eee; border-top:1px solid #ccc; position:fixed; -moz-box-shadow: 0 -3px 3px -3px #000; -webkit-box-shadow: 0 -3px 3px -3px #000; box-shadow: 0 -3px 3px -3px #000;}
+#bottomcontrols { padding: 0; bottom:0px; overflow:visible; height:2.8em; width: 20em; margin:0; background:#eee; border-top:1px solid #ccc; position:fixed; -moz-box-shadow: 0 -3px 3px -3px #000; -webkit-box-shadow: 0 -3px 3px -3px #000; box-shadow: 0 -3px 3px -3px #000;}
 #feeds_delete { position: absolute; right: 0px; background: url('%webroot%/core/img/actions/delete.svg') no-repeat center; display: inline; }
 #feeds_edit { position: absolute; right: 1.6em; background: url('%webroot%/core/img/actions/rename.svg') no-repeat center; display: inline; }
 
@@ -20,13 +20,40 @@ ul.controls li { float: left; }
 .accordion .title_unread { background: #DCDCDC; font-size: 12px; border-bottom:1px solid #ccc; font-weight:bold;}
 .accordion .title_read { background: #DCDCDC; font-size: 12px; border-bottom:1px solid #ccc;}
 
-ul.dropdown { position: absolute; z-index:100; left: 0; margin-left: 0.3em; display: none; background-color: #FEFEFE;
-	box-shadow: 0px 0px 10px rgb(0, 0, 0); border-radius: 0.5em 0.5em 0.5em 0.5em; }
-li.dropdown { margin: 0 0.3em; }
+ul.menu { position: absolute; z-index:100; margin-left: 0.3em;
+	box-shadow: 0px 0px 10px rgb(0, 0, 0); display: none;
+	background:#FEFEFE; /* default background for browsers without gradient support */
+	/* css3 */
+	background:-webkit-gradient(linear, 0 0, 0 100%, from(#FEFEFE), to(#D3F6FE));
+	background:-moz-linear-gradient(#FEFEFE, #E7E7E7);
+	background:-o-linear-gradient(#FEFEFE, #E7E7E7);
+	background:linear-gradient(#FEFEFE, #E7E7E7);
+	-webkit-border-radius:10px;
+	-moz-border-radius:10px;
+	border-radius:10px; }
+
+ul#dropdownmenu { left: 0em; }
+
+ul#fademenu { left: -0.3em; margin-left: 0.3em; top: -4.5em; }
+
+ul#fademenu :after {
+	content:"";
+	position:absolute;
+	bottom:-1em; /* value = - border-top-width - border-bottom-width */
+	left:10%; /* controls horizontal position */
+	border-width:1em 1em 0; /* vary these values to change the angle of the vertex */
+	border-style:solid;
+	border-color:#E7E7E7 transparent;
+	display:block;
+	width:0;
+}
+
+li.menuItem { margin-left:0.7em; margin-right:0.7em; float: none !important; text-align: center; }
 
 li.folder_list:hover { color: rgb(0, 0, 0) !important; background: none !important; }
 li.feeds_list:hover { background: none repeat scroll 0% 0% rgb(221, 221, 221) !important; }
 div.collapsable:hover { background-color: rgb(221, 221, 221); }
 div.add_parentfolder { position: relative; }
 
-div.dialog { overflow: visible; }
\ No newline at end of file
+div.dialog { overflow: visible; }
+
diff --git a/js/news.js b/js/news.js
index f3f65a258..b3d250f60 100644
--- a/js/news.js
+++ b/js/news.js
@@ -1,7 +1,16 @@
 News={
 	DropDownMenu: {
-		show:function(button){
-			var list = $(button).parent().find('ul.dropdown');
+		fade:function(button){
+			var list = $(button).parent().find('ul#fademenu');
+			if (list.css('display') == 'none')
+				list.fadeIn();
+			else
+				list.fadeOut();
+
+			return false;
+		},
+		dropdown:function(button){
+			var list = $(button).parent().find('ul#dropdownmenu');
 			if (list.css('display') == 'none')
 				list.slideDown('fast').show();
 			else
@@ -13,17 +22,17 @@ News={
 			var parent = $(item).parent().parent();
 			parent.find('#dropdownBtn').text($(item).text());
 			parent.find(':input[name="folderid"]').val(folderid);
-			parent.find('ul.dropdown').slideUp('fast');
+			parent.find('ul#dropdown').slideUp('fast');
 		}
 	},
 	UI: {
-		overview:function(){
-		    	if($('#addfeedfolder_dialog').dialog('isOpen') == true){
-				$('#addfeedfolder_dialog').dialog('moveToTop');
+		overview:function(dialogtype, dialogfile){
+		    	if($(dialogtype).dialog('isOpen') == true){
+				$(dialogtype).dialog('moveToTop');
 			}else{
-				$('#dialog_holder').load(OC.filePath('news', 'ajax', 'addfeedfolder.php'), function(jsondata){
+				$('#dialog_holder').load(OC.filePath('news', 'ajax', dialogfile), function(jsondata){
 					if(jsondata.status != 'error'){
-						$('#addfeedfolder_dialog').dialog({
+						$(dialogtype).dialog({
 							dialogClass:'dialog',
 							minWidth: 600,
 							close: function(event, ui) {
@@ -139,7 +148,12 @@ News={
 
 $(document).ready(function(){
 
-	$('#addfeedfolder').click(News.UI.overview);
+	$('#addfeed').click(function() {
+		News.UI.overview('#addfeed_dialog','feeddialog.php');
+	});
+	$('#addfolder').click(function() {
+		News.UI.overview('#addfolder_dialog','folderdialog.php');
+	});
 
 	$('.collapsable').click(function(){
 		$(this).parent().children().toggle();
diff --git a/templates/main.php b/templates/main.php
index faae31809..a52c4235e 100644
--- a/templates/main.php
+++ b/templates/main.php
@@ -5,15 +5,21 @@
 </div>
 
 <div id="bottomcontrols">
-	<form>
+<!-- 	<form> -->
 	<ul class="controls">
-		<li><button class="svg" id="addfeedfolder" title="<?php echo $l->t('Add Feed/Folder'); ?>"><img class="svg" src="<?php echo OCP\Util::linkTo('news', 'img/add.svg'); ?>" alt="<?php echo $l->t('Add Feed/Folder'); ?>"   /></button></li>
-		<li><button class="svg" title="<?php echo $l->t('Change View'); ?>">Eye</button></li>
+		<li>
+			<button class="svg" id="addfeedfolder" title="<?php echo $l->t('Add Feed/Folder'); ?>" onclick="News.DropDownMenu.fade(this)"><img class="svg" src="<?php echo OCP\Util::linkTo('news', 'img/add.svg'); ?>" alt="<?php echo $l->t('Add Feed/Folder'); ?>"   /></button>
+			<ul class="menu" id="fademenu">
+				<li class="menuItem" id="addfeed"><?php echo $l->t('Add Feed'); ?></li>
+				<li class="menuItem" id="addfolder"><?php echo $l->t('Add Folder'); ?></li>
+			</ul>
+		</li>
+		<li><button class="sv" title="<?php echo $l->t('Change View'); ?>">Eye</button></li>
 		<li><button class="svg" title="<?php echo $l->t('Settings'); ?>">Settings</button></li>
 	<ul>
-	</form>
+<!-- 	</form> -->
 </div>
-	
+
 <div id="rightcontent" class="rightcontent" data-id="<?php echo $_['feedid']; ?>">
 	<?php
 		if ($_['feedid']){
diff --git a/templates/part.addfeed.php b/templates/part.addfeed.php
new file mode 100644
index 000000000..522d60b32
--- /dev/null
+++ b/templates/part.addfeed.php
@@ -0,0 +1,22 @@
+
+<div id="addfeed_dialog" title="<?php echo $l->t("Add Feed"); ?>">
+<table width="100%" style="border: 0;">
+<tr>
+	<td>Add new feed</td>
+	<td>
+		<div class="add_parentfolder">
+			<button id="dropdownBtn" onclick="News.DropDownMenu.dropdown(this)">
+			    <?php echo $l->t('EVERYTHING'); ?>
+			</button>
+			<input type="hidden" name="folderid" value="0" />
+			<ul class="menu" id="dropdownmenu">
+				<?php echo $this->inc("part.folderlist"); ?>
+			</ul>
+		</div>
+	</td>
+</tr>
+<tr>
+	<td><input type="text" id="feed_add_url" placeholder="<?php echo $l->t('URL'); ?>" class="news_input" /></td>
+	<td><input type="submit" value="<?php echo $l->t('Add feed'); ?>" onclick="News.Feed.submit(this)" id="feed_add_submit" /></td>
+</tr>
+</table>
\ No newline at end of file
diff --git a/templates/part.addfeedfolder.php b/templates/part.addfeedfolder.php
deleted file mode 100644
index 919946225..000000000
--- a/templates/part.addfeedfolder.php
+++ /dev/null
@@ -1,51 +0,0 @@
-
-<?php
-	function print_folder(OC_News_Folder $folder, $depth){
-		echo '<li class="dropdown" onclick="News.DropDownMenu.selectItem(this, ' . $folder->getId() . ')">' . strtoupper($folder->getName()) . '</li>';
-		$children = $folder->getChildren();
-		foreach($children as $child) {
-			if ($child instanceOf OC_News_Folder){
-				print_folder($child, $depth+1);
-			}
-		}
-	}
-?>
-
-<div id="addfeedfolder_dialog" title="<?php echo $l->t("Add Feed/Folder"); ?>">
-<table width="100%" style="border: 0;">
-<tr>
-	<td>Add new feed</td>
-	<td>
-		<div class="add_parentfolder">
-			<button id="dropdownBtn" onclick="News.DropDownMenu.show(this)">
-			    <?php echo $l->t('ALL FEEDS'); ?>
-			</button>
-			<input type="hidden" name="folderid" value="0" />
-			<ul class="dropdown">
-				<?php print_folder($_['allfeeds'], 0); ?>
-			</ul>
-		</div>
-	</td>
-</tr>
-<tr>
-	<td><input type="text" id="feed_add_url" placeholder="<?php echo $l->t('URL'); ?>" class="news_input" /></td>
-	<td><input type="submit" value="<?php echo $l->t('Add feed'); ?>" onclick="News.Feed.submit(this)" id="feed_add_submit" /></td>
-</tr>
-	<td>Add new folder</td>
-	<td>
-		<div class="add_parentfolder">
-			<button id="dropdownBtn" onclick="News.DropDownMenu.show(this)">
-			    <?php echo $l->t('ALL FEEDS'); ?>
-			</button>
-			<input type="hidden" name="folderid" value="0" />
-			<ul class="dropdown">
-				<?php print_folder($_['allfeeds'], 0); ?>
-			</ul>
-		</div>
-	</td>
-</tr>
-<tr>
-	<td><input type="text" id="folder_add_name" placeholder="<?php echo $l->t('Folder name'); ?>" class="news_input" /></td>
-	<td><input type="submit" value="<?php echo $l->t('Add folder'); ?>" onclick="News.Folder.submit(this)" id="folder_add_submit" /></td>
-</tr>
-</table>
\ No newline at end of file
diff --git a/templates/part.addfolder.php b/templates/part.addfolder.php
new file mode 100644
index 000000000..a4f6466ac
--- /dev/null
+++ b/templates/part.addfolder.php
@@ -0,0 +1,21 @@
+
+<div id="addfolder_dialog" title="<?php echo $l->t("Add Folder"); ?>">
+<table width="100%" style="border: 0;">
+	<td>Add new folder</td>
+	<td>
+		<div class="add_parentfolder">
+			<button id="dropdownBtn" onclick="News.DropDownMenu.dropdown(this)">
+			    <?php echo $l->t('EVERYTHING'); ?>
+			</button>
+			<input type="hidden" name="folderid" value="0" />
+			<ul class="menu" id="dropdownmenu">
+				<?php echo $this->inc("part.folderlist"); ?>
+			</ul>
+		</div>
+	</td>
+</tr>
+<tr>
+	<td><input type="text" id="folder_add_name" placeholder="<?php echo $l->t('Folder name'); ?>" class="news_input" /></td>
+	<td><input type="submit" value="<?php echo $l->t('Add folder'); ?>" onclick="News.Folder.submit(this)" id="folder_add_submit" /></td>
+</tr>
+</table>
\ No newline at end of file
diff --git a/templates/part.folderlist.php b/templates/part.folderlist.php
new file mode 100644
index 000000000..670684fd4
--- /dev/null
+++ b/templates/part.folderlist.php
@@ -0,0 +1,12 @@
+<?php
+	function print_folder(OC_News_Folder $folder, $depth){
+		echo '<li class="menuItem" onclick="News.DropDownMenu.selectItem(this, ' . $folder->getId() . ')">' . strtoupper($folder->getName()) . '</li>';
+		$children = $folder->getChildren();
+		foreach($children as $child) {
+			if ($child instanceOf OC_News_Folder){
+				print_folder($child, $depth+1);
+			}
+		}
+	}
+	print_folder($_['allfeeds'], 0);
+?>
\ No newline at end of file