Archives/Athou_commafeed
1
0
Fork 1
mirror of https://github.com/Athou/commafeed.git synced 2026-03-21 21:37:29 +00:00
Code Issues Packages Projects Releases Wiki Activity

more styling

Browse Source
This commit is contained in:
Jeremie Panzer
2013-03-27 12:13:56 +01:00
parent 6ab93ed9d5
commit 473800d2f6
8 changed files with 121 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/main/java/com/commafeed/frontend/pages/HomePage.html
View File

@@ -1,6 +1,7 @@
<!DOCTYPE html> <!DOCTYPE html>
<html xmlns:wicket="http://wicket.apache.org"> <html xmlns:wicket="http://wicket.apache.org">
<head> <head>
<title>CommaFeed</title>
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet"> <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="vendor/bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet"> <link href="vendor/bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet">
<link href="vendor/angular-ui/angular-ui.min.css" rel="stylesheet"> <link href="vendor/angular-ui/angular-ui.min.css" rel="stylesheet">
@@ -9,7 +10,7 @@
<link href="css/app.css" rel="stylesheet"> <link href="css/app.css" rel="stylesheet">
</head> </head>
<body> <body>
<div ng-app="commafeed"> <div ng-app="commafeed" class="main">
<div class="container-fluid"> <div class="container-fluid">
<div class="row-fluid"> <div class="row-fluid">
<div class="span2"> <div class="span2">
@@ -27,7 +28,7 @@
</div> </div>
</div> </div>
<div class="span10"> <div class="span10">
<toolbar></toolbar> <toolbar class="pull-right"></toolbar>
<ng:view></ng:view> <ng:view></ng:view>
</div> </div>
</div> </div>

22
src/main/webapp/css/app.css
View File

@@ -1,6 +1,10 @@
.main {
margin-top: 10px;
}
/* tree*/ /* tree*/
.sidebar-nav-fixed { .sidebar-nav-fixed {
overflow: hidden; overflow-x: hidden;
} }
.css-treeview { .css-treeview {
@@ -9,6 +13,11 @@
white-space: nowrap; white-space: nowrap;
} }
.css-treeview .error {
color: red;
font-style:italic;
}
.css-treeview label,.css-treeview a,.css-treeview label::before { .css-treeview label,.css-treeview a,.css-treeview label::before {
font-family: inherit; font-family: inherit;
font-size: 11px; font-size: 11px;
@@ -26,7 +35,8 @@
.css-treeview a { .css-treeview a {
cursor: pointer; cursor: pointer;
color: black; color: black;
display: block; overflow-hidden; display: block;
overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
@@ -36,6 +46,14 @@
} }
/* entry list*/ /* entry list*/
.entrylist-header {
border-bottom: 1px solid #eee;
}
.entrylist-header h3 {
margin: 0px 0px 5px 0px;
}
#feed-accordion .accordion-group { #feed-accordion .accordion-group {
margin-bottom: 0px; margin-bottom: 0px;
border: none; border: none;

2
src/main/webapp/directives/category.html
View File

@@ -5,7 +5,7 @@
<ul> <ul>
<li ng-repeat="feed in node.feeds"> <li ng-repeat="feed in node.feeds">
<div class="dropdown pull-right"> <div class="dropdown pull-right">
<a dropdown-toggle class="pull-right feed-menu-icon"><i class="icon icon-chevron-down"></i> </a> <a dropdown-toggle class="pull-right feed-menu-icon"><i class="icon icon-chevron-down" ng-class="error: feed.message"></i> </a>
<ul class="dropdown-menu"> <ul class="dropdown-menu">
<li> <li>
<a ng-click="unsubscribe(feed)">Unsubscribe</a> <a ng-click="unsubscribe(feed)">Unsubscribe</a>

6
src/main/webapp/directives/toolbar.html
View File

@@ -1,6 +1,4 @@
<div class="toolbar"> <div>
<span>Reading Mode </span>
<div class="btn-group read-mode" data-toggle="buttons-radio"> <div class="btn-group read-mode" data-toggle="buttons-radio">
<button type="button" class="btn" ng-model="settings.readingMode" btn-radio="'unread'">Unread</button> <button type="button" class="btn" ng-model="settings.readingMode" btn-radio="'unread'">Unread</button>
<button type="button" class="btn" ng-model="settings.readingMode" btn-radio="'all'">All</button> <button type="button" class="btn" ng-model="settings.readingMode" btn-radio="'all'">All</button>
@@ -9,7 +7,7 @@
<button type="button" class="btn" ng-click="refresh()"><i class="icon-refresh"></i> Refresh</button> <button type="button" class="btn" ng-click="refresh()"><i class="icon-refresh"></i> Refresh</button>
<button type="button" class="btn" ng-click="markAllAsRead()"><i class="icon-ok"></i> Mark all as read</button> <button type="button" class="btn" ng-click="markAllAsRead()"><i class="icon-ok"></i> Mark all as read</button>
<div class="btn-group pull-right"> <div class="btn-group">
<a class="btn dropdown-toggle" data-toggle="dropdown" href="settings"><i class="icon-cog"></i><span class="caret"></span></a> <a class="btn dropdown-toggle" data-toggle="dropdown" href="settings"><i class="icon-cog"></i><span class="caret"></span></a>
<ul class="dropdown-menu"> <ul class="dropdown-menu">
<li><a href="settings"><i class="icon-wrench"></i> Settings</a></li> <li><a href="settings"><i class="icon-wrench"></i> Settings</a></li>

3
src/main/webapp/js/controllers.js
View File

@@ -44,9 +44,6 @@ module.controller('CategoryTreeCtrl', function($scope, $routeParams, $location,
$scope.formatFeedName = function(feed) { $scope.formatFeedName = function(feed) {
var label = feed.name; var label = feed.name;
if (feed.message) {
label = "!!! " + label;
}
if (feed.unread > 0) { if (feed.unread > 0) {
label = label + " (" + feed.unread + ")"; label = label + " (" + feed.unread + ")";
} }

83
src/main/webapp/js/directives.js
View File

@@ -12,9 +12,9 @@ module.directive('subscribe', function(SubscriptionService) {
dialogFade : true dialogFade : true
}; };
$scope.isOpen = false; $scope.isOpen = false;
$scope.isOpenImport = false; $scope.isOpenImport = false;
$scope.sub = {}; $scope.sub = {};
$scope.SubscriptionService = SubscriptionService; $scope.SubscriptionService = SubscriptionService;
@@ -28,9 +28,8 @@ module.directive('subscribe', function(SubscriptionService) {
}; };
$scope.save = function() { $scope.save = function() {
SubscriptionService.subscribe($scope.sub, function() { SubscriptionService.subscribe($scope.sub);
$scope.close(); $scope.close();
});
}; };
$scope.openImport = function() { $scope.openImport = function() {
@@ -51,45 +50,53 @@ module.directive('subscribe', function(SubscriptionService) {
module.directive('category', function($compile) { module.directive('category', function($compile) {
return { return {
scope: { scope : {
node: '=', node : '=',
selectedType: '=', selectedType : '=',
selectedId: '=', selectedId : '=',
feedClick: '&', feedClick : '&',
categoryClick: '&', categoryClick : '&',
formatCategoryName: '&', formatCategoryName : '&',
formatFeedName: '&' formatFeedName : '&'
}, },
restrict : 'E', restrict : 'E',
replace: true, replace : true,
templateUrl: 'directives/category.html', templateUrl : 'directives/category.html',
link: function(scope, element) { link : function(scope, element) {
var ul = element.find('ul'); var ul = element.find('ul');
ul.prepend('<category ng-repeat="child in node.children" node="child" feed-click="feedClick({id:id})" \ ul.prepend('<category ng-repeat="child in node.children" node="child" feed-click="feedClick({id:id})" \
category-click="categoryClick({id:id})" selected-type="selectedType" selected-id="selectedId" \ category-click="categoryClick({id:id})" selected-type="selectedType" selected-id="selectedId" \
format-category-name="formatCategoryName({category:category})" format-feed-name="formatFeedName({feed:feed})">\ format-category-name="formatCategoryName({category:category})" format-feed-name="formatFeedName({feed:feed})">\
</category>'); </category>');
$compile(ul.contents())(scope); $compile(ul.contents())(scope);
}, },
controller: function($scope, $dialog, SubscriptionService) { controller : function($scope, $dialog, SubscriptionService) {
$scope.unsubscribe = function(subscription) { $scope.unsubscribe = function(subscription) {
var title = 'Unsubscribe'; var title = 'Unsubscribe';
var msg = 'Unsubscribe from ' + subscription.name + ' ?'; var msg = 'Unsubscribe from ' + subscription.name + ' ?';
var btns = [{result:'cancel', label: 'Cancel'}, {result:'ok', label: 'OK', cssClass: 'btn-primary'}]; var btns = [ {
result : 'cancel',
label : 'Cancel'
}, {
result : 'ok',
label : 'OK',
cssClass : 'btn-primary'
} ];
$dialog.messageBox(title, msg, btns) $dialog.messageBox(title, msg, btns).open().then(
.open() function(result) {
.then(function(result){ if (result == 'ok') {
if(result == 'ok'){ SubscriptionService
SubscriptionService.unsubscribe(subscription.id); .unsubscribe(subscription.id);
} }
}); });
} }
} }
}; };
}); });
module.directive('toolbar', function($routeParams, $route, SettingsService, EntryService, SubscriptionService) { module.directive('toolbar', function($routeParams, $route, SettingsService,
EntryService, SubscriptionService) {
return { return {
scope : {}, scope : {},
restrict : 'E', restrict : 'E',
@@ -99,12 +106,12 @@ module.directive('toolbar', function($routeParams, $route, SettingsService, Entr
$scope.settings = SettingsService.settings; $scope.settings = SettingsService.settings;
$scope.refresh = function() { $scope.refresh = function() {
$route.reload(); $route.reload();
}, };
$scope.markAllAsRead = function() { $scope.markAllAsRead = function() {
EntryService.mark({ EntryService.mark({
type: $routeParams._type, type : $routeParams._type,
id: $routeParams._id, id : $routeParams._id,
read: true, read : true,
}, function() { }, function() {
SubscriptionService.init(function() { SubscriptionService.init(function() {
$route.reload(); $route.reload();

53
src/main/webapp/js/services.js
View File

@@ -1,13 +1,17 @@
var module = angular.module('commafeed.services', [ 'ngResource' ]); var module = angular.module('commafeed.services', [ 'ngResource' ]);
module.factory('SubscriptionService', [ '$resource', '$http', module.factory('SubscriptionService', [
'$resource',
'$http',
function($resource, $http) { function($resource, $http) {
var flatten = function(category, parentName, array) { var flatten = function(category, parentName, array) {
if(!array) array = []; if (!array)
array = [];
array.push({ array.push({
id : category.id, id : category.id,
name : category.name + (parentName ? (' (in ' + parentName + ')') : '') name : category.name
+ (parentName ? (' (in ' + parentName + ')') : '')
}); });
if (category.children) { if (category.children) {
for ( var i = 0; i < category.children.length; i++) { for ( var i = 0; i < category.children.length; i++) {
@@ -44,27 +48,47 @@ module.factory('SubscriptionService', [ '$resource', '$http',
s.init = function(callback) { s.init = function(callback) {
s.subscriptions = res.get(function(data) { s.subscriptions = res.get(function(data) {
s.flatCategories = flatten(s.subscriptions); s.flatCategories = flatten(s.subscriptions);
if(callback) if (callback)
callback(data); callback(data);
}); });
}; };
s.subscribe = function(sub, callback) { s.subscribe = function(sub, callback) {
res.subscribe(sub, callback); res.subscribe(sub, function(data){
s.init(); s.init();
if(callback) callback(data);
});
}; };
s.unsubscribe = function(id, callback) {
var removeSubscription = function(node, subId) {
if (node.children) {
$.each(node.children, function(k, v) {
removeSubscription(v, subId);
});
}
if (node.feeds) {
var foundAtIndex = -1;
$.each(node.feeds, function(k, v) {
if (v.id == subId) {
foundAtIndex = k;
}
});
if (foundAtIndex > -1) {
node.feeds.splice(foundAtIndex, 1);
}
}
}
s.unsubscribe = function(id) {
removeSubscription(s.subscriptions, id);
res.unsubscribe({ res.unsubscribe({
id : id id : id
}, callback); });
s.init();
}; };
s.init(); s.init();
return s; return s;
} ]); } ]);
module.factory('EntryService', [ module.factory('EntryService', [ '$resource', '$http',
'$resource',
'$http',
function($resource, $http) { function($resource, $http) {
var actions = { var actions = {
get : { get : {
@@ -80,8 +104,7 @@ module.factory('EntryService', [
} }
} }
}; };
res = $resource('rest/entries/:_method', {}, res = $resource('rest/entries/:_method', {}, actions);
actions);
return res; return res;
} ]); } ]);

7
src/main/webapp/templates/feeds.html
View File

@@ -1,7 +1,8 @@
<div ng-controller="FeedListCtrl"> <div ng-controller="FeedListCtrl">
{{readType}}
<span>{{entryList.name}}</span><span <div class="entrylist-header">
ng-show="selectedType == 'category'"> &#187;</span> <h3><span>{{entryList.name}}</span><span ng-show="entryList.name && selectedType == 'category'"> &#187;</span></h3>
</div>
<div id="feed-accordion" infinite-scroll="loadMoreEntries()" infinite-scroll-disabled="busy" infinite-scroll-distance="1"> <div id="feed-accordion" infinite-scroll="loadMoreEntries()" infinite-scroll-disabled="busy" infinite-scroll-distance="1">
<accordion close-others="true"> <accordion close-others="true">
<accordion-group ng-repeat="entry in entryList.entries" class="entry"> <accordion-group ng-repeat="entry in entryList.entries" class="entry">