new style and style cleanup for the news app

8 files changed, 141 insertions, 181 deletions

diff --git a/templates/main.php b/templates/main.php
index cd2cd8821..91fcaf048 100644
--- a/templates/main.php
+++ b/templates/main.php
@@ -1,64 +1,32 @@
-<div class="content_wrapper" ng-app="News">
-	<div id="leftcontent_news" class="main_column">
-		<div id="feed_wrapper">
-			<div id="feeds" ng-controller="FeedController">
-				<ul data-id="0" droppable>
-					<li ng-class="{
-							active: isFeedActive(feedType.Subscriptions, 0),
-							all_read: getUnreadCount(feedType.Subscriptions, 0)==0
-						}" 
-					    class="subscriptions"
-					    ng-show="isShown(feedType.Subscriptions, 0)">
-						<a class="title" 
-						   href="#" 
-						   ng-click="loadFeed(feedType.Subscriptions, 0)">
-						   <?php p($l->t('New articles'))?>
-						</a>
-						<span class="unread_items_counter">
-							{{ getUnreadCount(feedType.Subscriptions, 0) }}
-						</span>
-						<span class="buttons">
-					    	<button class="svg action feeds_markread" 
-					    			ng-click="markAllRead(feedType.Subscriptions, 0)"
-					    	        title="<?php p($l->t('Mark all read')) ?>"></button>
-					    </span>
-					</li>
-					<li ng-class="{
-							active: isFeedActive(feedType.Starred, 0),
-							all_read: getUnreadCount(feedType.Starred, 0)==0
-						}" 
-					    class="starred"
-					    ng-show="isShown(feedType.Starred, 0)">
-						<a class="title" 
-						   href="#"
-						   ng-click="loadFeed(feedType.Starred, 0)">
-						   <?php p($l->t('Starred')) ?>
-						</a>
-						<span class="unread_items_counter">
-							{{ getUnreadCount(feedType.Starred, 0) }}
-						</span>
-					</li>
+<div id="app" ng-app="News">
+        <div id="left-content" ng-controller="FeedController">
 
-					<?php print_unescaped($this->inc('part.listfolder')) ?>
-					<?php print_unescaped($this->inc('part.listfeed', array('folderId' => '0'))) ?>
+                <ul class="with-icon" data-id="0" droppable>
+                        <?php print_unescaped($this->inc('part.addnew')) ?>
+                        <?php print_unescaped($this->inc('part.feed.unread')) ?>
+                        <?php print_unescaped($this->inc('part.feed.starred')) ?>
+                        <?php print_unescaped($this->inc('part.listfolder')) ?>
+                        <?php print_unescaped($this->inc('part.listfeed', array('folderId' => '0'))) ?>
+                        <?php print_unescaped($this->inc('part.showall')); ?>
+                </ul>
 
-				</ul>
+                <div id="app-settings" ng-class="{open: showSettings==true}"
+                         ng-controller="SettingsController" hide-settings-when-focus-lost>
+                        <div id="app-settings-header">
+                                <button name="app settings"
+                                                class="settings-button"
+                                                ng-click="showSettings=!showSettings"></button>
+                        </div>
+                        <div id="app-settings-content">
+                                <?php print_unescaped($this->inc('part.settings')) ?>
 			</div>
 		</div>
 
-		<?php print_unescaped($this->inc('part.settings')) ?>
-
 	</div>
 
-	<div id="rightcontent_news" class="main_column">
-		<div id="feed_items" 
-				ng-class="{loading: loading.loading>0}"
-				ng-controller="ItemController" 
-				when-scrolled="scroll()"
-				feed-navigation>
-			<?php
-				print_unescaped($this->inc("part.items"));
-			?>
-		</div>
+        <div id="right-content" ng-class="{loading: loading.loading>0}"
+                ng-controller="ItemController" 	when-scrolled="scroll()" feed-navigation>
+                <?php print_unescaped($this->inc("part.items")); ?>
 	</div>
+
 </div>
diff --git a/templates/part.addnew.php b/templates/part.addnew.php
new file mode 100644
index 000000000..fc0ee66d2
--- /dev/null
+++ b/templates/part.addnew.php
@@ -0,0 +1,35 @@
+<li class="add-new" ng-controller="AddNewController">
+        <a class="list-title list-title-with-icon" ng-click="showAdd=!showAdd" href="#">
+                <?php p($l->t('New'))?>
+        </a>
+
+        <div class="add-new-popup" ng-class="{open:showAdd==true}">
+                <fieldset class="personalblock">
+                        <legend><strong><?php p($l->t('Add Subscription')); ?></strong></legend>
+                        <p class="error">
+                                <span ng-show="feedEmptyError"><?php p($l->t('Address must not be empty!')); ?></span>
+                                <span ng-show="feedExistsError"><?php p($l->t('Feed exists already!')); ?></span>
+                                <span ng-show="feedError"><?php p($l->t('Could not add feed!')); ?></span>
+                                <span ng-show="folderExistsError"><?php p($l->t('Folder exists already')); ?></span>
+                        </p>
+                        <form>
+                                <input type="text"
+                                        ng-model="feedUrl"
+                                        placeholder="<?php p($l->t('Address')); ?>"
+                                        ng-disabled="isAddingFeed()">
+                                <button title="<?php p($l->t('Add')); ?>"
+                                                ng-class="{loading: isAddingFeed()}"
+                                                ng-click="addFeed(feedUrl, folderId)"><?php p($l->t('Add')); ?></button>
+                                <select name="folder"
+                                            data-create="<?php p($l->t('New folder')); ?>"
+                                                title="<?php p($l->t('Folder')); ?>"
+                                                ng-model="folderId"
+                                                ng-disabled="isAddingFeed()"
+                                                ng-options="folder.name for folder in getFolders()"
+                                                add-folder-select>
+                                        <option value="" selected><?php p($l->t('No folder')); ?></option>
+                                </select>
+                        </form>
+                </fieldset>
+        </div>
+</li>
diff --git a/templates/part.feed.starred.php b/templates/part.feed.starred.php
new file mode 100644
index 000000000..0a7cc5641
--- /dev/null
+++ b/templates/part.feed.starred.php
@@ -0,0 +1,17 @@
+<li ng-class="{
+                active: isFeedActive(feedType.Starred, 0),
+                all_read: getUnreadCount(feedType.Starred, 0)==0
+        }"
+        class="starred-icon"
+        ng-show="isShown(feedType.Starred, 0)">
+        <a class="title"
+           href="#"
+           ng-click="loadFeed(feedType.Starred, 0)">
+           <?php p($l->t('Starred')) ?>
+        </a>
+        <span class="utils">
+                <span class="unread_items_counter">
+                        {{ getUnreadCount(feedType.Starred, 0) }}
+                </span>
+        </span>
+</li>
\ No newline at end of file
diff --git a/templates/part.feed.unread.php b/templates/part.feed.unread.php
new file mode 100644
index 000000000..9388bb1df
--- /dev/null
+++ b/templates/part.feed.unread.php
@@ -0,0 +1,20 @@
+<li ng-class="{
+                active: isFeedActive(feedType.Subscriptions, 0),
+                all_read: getUnreadCount(feedType.Subscriptions, 0)==0
+        }"
+        class="subscriptions"
+        ng-show="isShown(feedType.Subscriptions, 0)">
+        <a class="title"
+           href="#"
+           ng-click="loadFeed(feedType.Subscriptions, 0)">
+           <?php p($l->t('New articles'))?>
+        </a>
+        <span class="utils">
+                <span class="unread-counter">
+                        {{ getUnreadCount(feedType.Starred, 0) }}
+                </span>
+                <button class="svg action mark-read-icon"
+                        ng-click="markAllRead(feedType.Subscriptions, 0)"
+                        title="<?php p($l->t('Mark all read')) ?>"></button>
+        </span>
+</li>
\ No newline at end of file
diff --git a/templates/part.listfeed.php b/templates/part.listfeed.php
index e462d7683..e7af0f282 100644
--- a/templates/part.listfeed.php
+++ b/templates/part.listfeed.php
@@ -1,4 +1,4 @@
-<li ng-class="{active: isFeedActive(feedType.Feed, feed.id), all_read: feed.unreadCount==0}" 
+<li ng-class="{active: isFeedActive(feedType.Feed, feed.id), unread: feed.unreadCount!=0}"
     ng-repeat="feed in feeds|feedInFolder:<?php p($_['folderId']); ?>"
     ng-show="feed.show"
     data-id="{{feed.id}}"
@@ -10,15 +10,18 @@
 	   ng-click="loadFeed(feedType.Feed, feed.id)">
 	   {{feed.name}}
 	</a>
-	<span class="unread_items_counter">
+
+        <span class="utils">
+                <span class="unread-counter">
 		{{ getUnreadCount(feedType.Feed, feed.id) }}
-	</span>
-	<span class="buttons">
+                </span>
+
 		<button ng-click="delete(feedType.Feed, feed.id)"
-		        class="svg action feeds_delete" 
+                        class="svg action delete-icon"
 		        title="<?php p($l->t('Delete feed')); ?>"></button>
-		<button class="svg action feeds_markread" 
+
+                <button class="svg action mark-read-icon"
 		        ng-click="markAllRead(feedType.Feed, feed.id)"
 		        title="<?php p($l->t('Mark all read')); ?>"></button>
 	</span>
-</li>
\ No newline at end of file
+</li>
diff --git a/templates/part.listfolder.php b/templates/part.listfolder.php
index 72052df9e..5c05d41fe 100644
--- a/templates/part.listfolder.php
+++ b/templates/part.listfolder.php
@@ -1,33 +1,36 @@
 <li ng-class="{
 	active: isFeedActive(feedType.Folder, folder.id), 
 	open: folder.open,
-	collapsable: folder.hasChildren,
-	all_read: getUnreadCount(feedType.Folder, folder.id)==0
-}" 
+        collapsible: folder.hasChildren,
+        unread: getUnreadCount(feedType.Folder, folder.id)!=0}"
     ng-repeat="folder in folders"
     ng-show="folder.show"
     class="folder"
     data-id="{{folder.id}}"
     droppable>
-    <button class="collapsable_trigger" 
+    <button class="collapse"
             title="<?php p($l->t('Collapse'));?>"
             ng-click="toggleFolder(folder.id)"></button>
 	<a href="#" 
 	   class="title"
+           class="folder-icon"
 	   ng-click="loadFeed(feedType.Folder, folder.id)">
 	   {{folder.name}}
 	</a>
-	<span class="unread_items_counter">
-		{{ getUnreadCount(feedType.Folder, folder.id) }}
-	</span>
-	<span class="buttons">
+
+        <span class="utils">
 		<button ng-click="delete(feedType.Folder, folder.id)"
-		        class="svg action feeds_delete" 
+                        class="svg action delete-icon"
 		        title="<?php p($l->t('Delete folder')); ?>"></button>
-		<button class="svg action feeds_edit" 
+
+                <button class="svg action edit-icon"
 				ng-click="renameFolder(folder.id)"
 		        title="<?php p($l->t('Rename folder')); ?>"></button>
-		<button class="svg action feeds_markread" 
+
+                <span class="unread-counter">
+                        {{ getUnreadCount(feedType.Folder, folder.id) }}
+                </span>
+                <button class="svg action mark-read-icon"
 		        ng-click="markAllRead(feedType.Folder, folder.id)"
 		        title="<?php p($l->t('Mark all read')); ?>"></button>
 	</span>
diff --git a/templates/part.settings.php b/templates/part.settings.php
index 97a2b99a6..99d870cce 100644
--- a/templates/part.settings.php
+++ b/templates/part.settings.php
@@ -1,108 +1,15 @@
-<div 
-	class="bottom_settings"
-	ng-controller="SettingsController"
-	hide-settings-when-focus-lost>
-
-	<div class="open_add bottom_popup" 
-		ng-show="addIsShown()"
-		ng-class="{expanded: addIsShown()}">
-		<fieldset class="personalblock">
-			<legend><strong><?php p($l->t('Add Subscription')); ?></strong></legend>
-			<form>
-				<select name="folder" 
-						title="<?php p($l->t('Folder under which the feed is being saved')); ?>"
-						ng-model="folderId"
-						ng-disabled="isAddingFeed()"
-						ng-options="folder.name for folder in getFolders()">
-					<option value=""><?php p($l->t('-- choose folder --')); ?></option>
-				</select>
-				<p class="error">
-					<span ng-show="feedEmptyError"><?php p($l->t('Address must not be empty!')); ?></span>
-					<span ng-show="feedExistsError"><?php p($l->t('Feed exists already!')); ?></span>
-					<span ng-show="feedError"><?php p($l->t('Could not add feed!')); ?></span>
-				</p>
-				<input type="text" 
-					ng-model="feedUrl" 
-					placeholder="<?php p($l->t('Address')); ?>" 
-					ng-disabled="isAddingFeed()">
-				<button title="<?php p($l->t('Add')); ?>" 
-						ng-class="{loading: isAddingFeed()}"
-						ng-click="addFeed(feedUrl, folderId)"><?php p($l->t('Add')); ?></button>
-			</form>	
-		</fieldset>
-		<fieldset class="personalblock">
-			<legend><strong><?php p($l->t('Add Folder')); ?></strong></legend>
-			<form name="addFolderForm">
-				<p class="error">
-					<span ng-show="folderEmptyError"><?php p($l->t('Folder name must not be empty!')); ?></span>
-					<span ng-show="folderExistsError"><?php p($l->t('Folder exists already!')); ?></span>
-				</p>
-				<input type="text" 
-						ng-model="folderName" 
-						ng-disabled="isAddingFolder()"
-						name="folderName"
-						maxlength="30"
-						placeholder="<?php p($l->t('Folder Name')); ?>">
-				<button title="<?php p($l->t('Add')); ?>" 
-						ng-click="addFolder(folderName)"
-						ng-class="{loading: isAddingFolder()}"><?php p($l->t('Add')); ?></button>
-			</form>
-		</fieldset>
-	</div>
-
-
-	<div id="feed_settings" class="bottom_popup"
-		ng-class="{expanded: settingsAreShown()}">
-		<ul class="controls">
-			<li class="view show_all" 
-				ng-show="getShowAll()"
-				ng-click="setShowAll(false)"
-				title="<?php p($l->t('Show everything')); ?>">
-				<button></button>
-			</li>
-			<li class="view show_unread" 
-				ng-show="!getShowAll()"
-				ng-click="setShowAll(true)"
-				title="<?php p($l->t('Show only unread')); ?>">
-				<button></button>
-			</li>
-			<li style="float: right"
-				ng-class="{active: settingsAreShown()}">
-				<button id="settingsbtn" 
-						title="<?php p($l->t('Settings')); ?>"
-						ng-click="toggleSettings()">
-					<img class="svg" 
-						 src="<?php print_unescaped(image_path('core','actions/settings.png')); ?>" 
-						 alt="<?php p($l->t('Settings')); ?>"   />
-				</button>
-			</li>
-			<li style="float: right"
-				title="<?php p($l->t('Add feed or folder')) ?>"
-				ng-class="{active: addIsShown()}">
-				<button ng-click="toggleAdd()">
-					<img class="svg" 
-						 src="<?php print_unescaped(link_to('news', 'img/add.svg')) ?>" 
-						 alt="<?php p($l->t('Add Feed/Folder')) ?>" /></button>
-			</li>
-		</ul>
-
-		<div class="open_settings" ng-show="settingsAreShown()">
-			<fieldset class="personalblock">
-				<legend><strong><?php p($l->t('Import / Export')); ?></strong></legend>
-				<input type="file" id="file_upload_start" name="files[]" read-file/>
-				<button title="<?php p($l->t('Import OPML')); ?>"
-						id="browselink">
-					<?php p($l->t('Import OPML')); ?>
-				</button>
-				<a class="button" 
-					href="<?php print_unescaped(\OC_Helper::linkToRoute('news_export_opml')) ?>"
-					title="<?php p($l->t('Export OPML')); ?>"><?php p($l->t('Export OPML')); ?></a>
-			</fieldset>
-			<fieldset class="personalblock">
-				<legend><strong><?php p($l->t('Subscribelet')); ?></strong></legend>
-				<p><?php print_unescaped($this->inc('part.subscribelet'));?>
-				</p>
-			</fieldset>
-		</div>
-	</div>
-</div>
\ No newline at end of file
+<fieldset class="personalblock">
+        <legend><strong><?php p($l->t('Import / Export OPML')); ?></strong></legend>
+        <input type="file" id="opml-upload" name="files[]" read-file/>
+        <button title="<?php p($l->t('Import')); ?>" trigger-click>
+                <?php p($l->t('Import')); ?>
+        </button>
+        <a class="button"
+                href="<?php print_unescaped(\OC_Helper::linkToRoute('news_export_opml')) ?>"
+                title="<?php p($l->t('Export')); ?>"><?php p($l->t('Export')); ?></a>
+</fieldset>
+<fieldset class="personalblock">
+        <legend><strong><?php p($l->t('Subscribelet')); ?></strong></legend>
+        <p><?php print_unescaped($this->inc('part.subscribelet'));?>
+        </p>
+</fieldset>
diff --git a/templates/part.showall.php b/templates/part.showall.php
new file mode 100644
index 000000000..f5cacf039
--- /dev/null
+++ b/templates/part.showall.php
@@ -0,0 +1,7 @@
+<li ng-show="!getShowAll()" class="show-all">
+        <a ng-click="setShowAll(true)" href="#"><?php p($l->t('Show all')); ?></a>
+</li>
+
+<li ng-show="getShowAll()" class="show-all">
+        <a ng-click="setShowAll(false)" href="#"><?php p($l->t('Show only unread')); ?></a>
+</li>