more styling

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

View File

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

View File

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

View File

@@ -5,7 +5,7 @@
<ul>
<li ng-repeat="feed in node.feeds">
<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">
<li>
<a ng-click="unsubscribe(feed)">Unsubscribe</a>

View File

@@ -1,6 +1,4 @@
<div class="toolbar">
<span>Reading Mode </span>
<div>
<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="'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="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>
<ul class="dropdown-menu">
<li><a href="settings"><i class="icon-wrench"></i> Settings</a></li>

View File

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

View File

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

View File

@@ -1,13 +1,17 @@
var module = angular.module('commafeed.services', [ 'ngResource' ]);
module.factory('SubscriptionService', [ '$resource', '$http',
module.factory('SubscriptionService', [
'$resource',
'$http',
function($resource, $http) {
var flatten = function(category, parentName, array) {
if(!array) array = [];
var flatten = function(category, parentName, array) {
if (!array)
array = [];
array.push({
id : category.id,
name : category.name + (parentName ? (' (in ' + parentName + ')') : '')
name : category.name
+ (parentName ? (' (in ' + parentName + ')') : '')
});
if (category.children) {
for ( var i = 0; i < category.children.length; i++) {
@@ -39,32 +43,52 @@ module.factory('SubscriptionService', [ '$resource', '$http',
var s = {};
s.subscriptions = {};
s.flatCategories = {};
var res = $resource('rest/subscriptions/:_method', {}, actions);
s.init = function(callback) {
s.subscriptions = res.get(function(data) {
s.flatCategories = flatten(s.subscriptions);
if(callback)
if (callback)
callback(data);
});
};
s.subscribe = function(sub, callback) {
res.subscribe(sub, callback);
s.init();
res.subscribe(sub, function(data){
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({
id : id
}, callback);
s.init();
});
};
s.init();
return s;
} ]);
module.factory('EntryService', [
'$resource',
'$http',
module.factory('EntryService', [ '$resource', '$http',
function($resource, $http) {
var actions = {
get : {
@@ -80,8 +104,7 @@ module.factory('EntryService', [
}
}
};
res = $resource('rest/entries/:_method', {},
actions);
res = $resource('rest/entries/:_method', {}, actions);
return res;
} ]);

View File

@@ -1,7 +1,8 @@
<div ng-controller="FeedListCtrl">
{{readType}}
<span>{{entryList.name}}</span><span
ng-show="selectedType == 'category'"> &#187;</span>
<div class="entrylist-header">
<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">
<accordion close-others="true">
<accordion-group ng-repeat="entry in entryList.entries" class="entry">