garrettmills/commafeed
1
0
Fork 0
forked from Archives/Athou_commafeed
Code Pull Requests Activity

initial mobile design (#54)

Browse Source
This commit is contained in:
Athou
2013-05-26 13:34:31 +02:00
parent d4b284eb80
commit c6a8c288ce
15 changed files with 156 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/main/java/com/commafeed/frontend/pages/BasePage.html
View File

@@ -3,6 +3,7 @@
<head>
<title>CommaFeed</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
</head>
<body>

1
src/main/resources/i18n/en.properties
View File

@@ -5,6 +5,7 @@ global.required=Required
global.download=Download
global.link=Link
global.bookmark=Bookmark
global.close=Close
tree.subscribe=Subscribe
tree.import=Import

3
src/main/resources/log4j.properties
View File

@@ -1,5 +1,6 @@
log4j.logger.com.commafeed=INFO, CONSOLE
#log4j.logger.org=WARN, CONSOLE
log4j.logger.org=WARN, CONSOLE
log4j.logger.ro=WARN, CONSOLE
log4j.appender.CONSOLE=org.apache.log4j.ConsoleAppender
log4j.appender.CONSOLE.layout=org.apache.log4j.PatternLayout

2
src/main/webapp/WEB-INF/wro.properties
View File

@@ -10,7 +10,7 @@ jmxEnabled=false
managerFactoryClassName=com.commafeed.frontend.resources.WroManagerFactory
#List of preProcessors
preProcessors=timestamp,cssUrlRewriting,sassImport,semicolonAppender,googleClosureSimple,sassOnlyProcessor,cssMin
preProcessors=timestamp,cssUrlRewriting,sassImport,semicolonAppender,googleClosureSimple,sassOnlyProcessor,yuiCssMin
#List of postProcessors
postProcessors=

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

@@ -28,8 +28,8 @@ module.run(['$rootScope', function($rootScope) {
});
}]);
module.controller('SubscribeCtrl', ['$scope', 'FeedService', 'CategoryService',
function($scope, FeedService, CategoryService) {
module.controller('SubscribeCtrl', ['$scope', 'FeedService', 'CategoryService', 'MobileService',
function($scope, FeedService, CategoryService, MobileService) {
$scope.opts = {
backdropFade : true,
@@ -41,6 +41,7 @@ function($scope, FeedService, CategoryService) {
$scope.sub = {};
$scope.CategoryService = CategoryService;
$scope.MobileService = MobileService;
$scope.open = function() {
$scope.sub = {
@@ -436,9 +437,9 @@ module.controller('CategoryDetailsCtrl', ['$scope', '$state', '$stateParams', 'F
}]);
module.controller('ToolbarCtrl', ['$scope', '$http', '$state', '$stateParams',
'$route', '$location', 'SettingsService', 'EntryService', 'ProfileService', 'AnalyticsService', 'ServerService', 'FeedService',
'$route', '$location', 'SettingsService', 'EntryService', 'ProfileService', 'AnalyticsService', 'ServerService', 'FeedService', 'MobileService',
function($scope, $http, $state, $stateParams, $route, $location,
SettingsService, EntryService, ProfileService, AnalyticsService, ServerService, FeedService) {
SettingsService, EntryService, ProfileService, AnalyticsService, ServerService, FeedService, MobileService) {
function totalActiveAjaxRequests() {
return ($http.pendingRequests.length + $.active);
@@ -447,6 +448,7 @@ function($scope, $http, $state, $stateParams, $route, $location,
$scope.session = ProfileService.get();
$scope.ServerService = ServerService.get();
$scope.settingsService = SettingsService;
$scope.MobileService = MobileService;
$scope.loading = true;
$scope.$watch(totalActiveAjaxRequests, function() {

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

@@ -231,8 +231,9 @@ module.directive('category', [ function() {
'FeedService',
'CategoryService',
'SettingsService',
'MobileService',
function($scope, $state, $dialog, FeedService, CategoryService,
SettingsService) {
SettingsService, MobileService) {
$scope.settingsService = SettingsService;
$scope.getClass = function(level) {
@@ -265,6 +266,7 @@ module.directive('category', [ function() {
};
$scope.feedClicked = function(id) {
MobileService.toggleLeftMenu();
if ($scope.selectedType == 'feed'
&& id == $scope.selectedId) {
$scope.$emit('emitReload');
@@ -277,6 +279,7 @@ module.directive('category', [ function() {
};
$scope.categoryClicked = function(id) {
MobileService.toggleLeftMenu();
if ($scope.selectedType == 'category'
&& id == $scope.selectedId) {
$scope.$emit('emitReload');

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

@@ -12,6 +12,17 @@ module.service('AnalyticsService', [ '$state', function($state) {
};
} ]);
module.service('MobileService', [ '$state', function($state) {
this.toggleLeftMenu = function() {
$('body').toggleClass('left-menu-active');
}
this.toggleRightMenu = function() {
$('body').toggleClass('right-menu-active');
}
var width = (window.innerWidth > 0) ? window.innerWidth : screen.width;
this.mobile = width < 979;
}]);
module.factory('ProfileService', ['$resource', function($resource) {
var res = $resource('rest/user/profile/');

5
src/main/webapp/sass/app.scss
View File

@@ -1,4 +1,3 @@
@import "generic/misc";
@@ -6,4 +5,6 @@
@import "components/toolbar";
@import "components/entry-list";
@import "components/subscription-list";
@import "components/help";
@import "components/help";
@import "mobile/mobile";

4
src/main/webapp/sass/components/_entry-list.scss
View File

@@ -12,10 +12,6 @@
margin: 0;
}
.entry-header, .entry-body-content {
padding-left: 25px;
}
#feed-accordion .entry {
border-bottom: 1px solid #CCCCCC;
}

3
src/main/webapp/sass/components/_subscription-list.scss
View File

@@ -1,4 +1,3 @@
/* tree*/
.sidebar-nav-fixed {
margin-top: 10px;
@@ -100,4 +99,4 @@
.css-treeview .indent5 {
padding-left: 110px;
}
}

45
src/main/webapp/sass/mobile/_mobile.scss Normal file
View File

@@ -0,0 +1,45 @@
@media ( max-width : 979px) {
body {
padding-left: 5px;
padding-right: 5px;
}
.container-fluid {
padding-left: 0;
padding-right: 0;
}
.left-menu {
display: none !important;
}
.toolbar .hidden-desktop.btn-group {
display: inline-block !important;
}
.main-content {
display: block !important;
float: none !important;
width: 100% !important;
margin-left: 0 !important;
}
#feed-accordion .entry-heading .shrink {
margin-left: 0;
}
#feed-accordion .entry-heading .entry-name {
margin-right: 0;
}
body.left-menu-active .left-menu {
display: block !important;
width: 100%;
}
body.left-menu-active .sidebar-nav-fixed {
width: 100%;
}
body.left-menu-active .main-content {
display: none !important;
}
body.right-menu-active .toolbar .actions {
margin-top: 5px;
margin-left: 0;
}
body.right-menu-active .toolbar .actions .visible-desktop {
display: inherit !important;
}
}

8
src/main/webapp/templates/_subscribe.html
View File

@@ -1,4 +1,5 @@
<div ng-controller="SubscribeCtrl">
<div class="btn-group">
<button class="btn" ng-click="open()"><span class="icon-rss"></span> ${tree.subscribe}</button>
<button class="btn dropdown-toggle" data-toggle="dropdown">
@@ -9,6 +10,13 @@
<li><a ng-click="openCategory()"><i class="icon-plus"></i> ${tree.new_category}</a></li>
</ul>
</div>
<div class="btn-group">
<button type="button" class="btn hidden-desktop" ng-click="MobileService.toggleLeftMenu()">
<i class="icon-remove"></i> ${global.close}
</button>
</div>
<div modal="isOpen" close="close()" options="opts">
<div class="modal-header">
<button type="button" class="close" ng-click="close()">&times;</button>

122
src/main/webapp/templates/_toolbar.html
View File

@@ -1,60 +1,76 @@
<div ng-controller="ToolbarCtrl">
<div class="form-horizontal">
<span>
<div class="btn-group read-mode" data-toggle="buttons-radio">
<button type="button" class="btn" ng-model="settingsService.settings.readingMode" btn-radio="'unread'">${toolbar.unread}</button>
<button type="button" class="btn" ng-model="settingsService.settings.readingMode" btn-radio="'all'">${toolbar.all}</button>
<div class="btn-group hidden-desktop">
<button type="button" class="btn" ng-click="MobileService.toggleLeftMenu()">
<i class="icon-list-alt"></i>
</button>
</div>
<div class="btn-group">
<a type="button" class="btn" ng-click="previousEntry()" title="${toolbar.previous_entry}"><i class="icon-chevron-up"></i></a>
<a type="button" class="btn" ng-click="nextEntry()" title="${toolbar.next_entry}"><i class="icon-chevron-down"></i></a>
<a type="button" class="btn" ng-click="refresh()" title="${toolbar.refresh}"><i class="icon-refresh"></i></a>
</div>
<div class="btn-group">
<a type="button" class="btn" ng-click="markAllAsRead()" title="${toolbar.mark_all_as_read}"><i class="icon-check"></i></a>
<button class="btn dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu pull-right">
<li><a ng-click="markAllDay()">${toolbar.mark_all_older_day}</a></li>
<li><a ng-click="markAllWeek()">${toolbar.mark_all_older_week}</a></li>
<li><a ng-click="markAllTwoWeeks()">${toolbar.mark_all_older_two_weeks}</a></li>
</ul>
</div>
<div class="btn-group hidden-desktop">
<button type="button" class="btn" ng-click="MobileService.toggleRightMenu()">
<i class="icon-wrench"></i>
</button>
</div>
<div class="actions btn-group">
<div class="visible-desktop">
<div class="btn-group read-mode" data-toggle="buttons-radio">
<button type="button" class="btn" ng-model="settingsService.settings.readingMode" btn-radio="'unread'">${toolbar.unread}</button>
<button type="button" class="btn" ng-model="settingsService.settings.readingMode" btn-radio="'all'">${toolbar.all}</button>
</div>
<div class="btn-group">
<a type="button" class="btn" ng-click="toggleOrder()" title="${toolbar.sort_by_asc_desc}">
<i ng-class="{'icon-arrow-up' : settingsService.settings.readingOrder == 'asc', 'icon-arrow-down': settingsService.settings.readingOrder == 'desc'}"></i>
</a>
</div>
<div class="btn-group" data-toggle="buttons-radio">
<a type="button" class="btn" ng-model="settingsService.settings.viewMode" btn-radio="'title'" title="${toolbar.titles_only}"><i class="icon-list"></i></a>
<a type="button" class="btn" ng-model="settingsService.settings.viewMode" btn-radio="'expanded'" title="${toolbar.expanded_view}"><i class="icon-th-list"></i></a>
</div>
<div class="btn-group">
<a class="btn" ng-click="toSettings()" title="${toolbar.settings}"><i class="icon-cog"></i></a>
<button class="btn dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu pull-right">
<li><a ng-click="toProfile()"><i class="icon-user"></i> ${toolbar.profile}</a></li>
<li ng-show="session.admin"><a ng-click="toAdmin()"><i class="icon-edit"></i> ${toolbar.admin}</a></li>
<li class="divider"></li>
<li><a href="logout"><i class="icon-off"></i> ${toolbar.logout}</a></li>
</ul>
</div>
<form ng-submit="search()" class="btn-group input-append hidden-phone hidden-tablet">
<input type="text" ng-model="keywords"></input>
<button class="btn" type="submit"><i class="icon-search"></i></button>
</form>
<div class="btn-group donate">
<button class="btn btn-success" type="button" ng-click="toHelp()"><i class="icon-question-sign"></i> ${toolbar.about} / ${toolbar.donate}</button>
</div>
</div>
<a type="button" class="btn" ng-click="toggleOrder()" title="${toolbar.sort_by_asc_desc}">
<i ng-class="{'icon-arrow-up' : settingsService.settings.readingOrder == 'asc', 'icon-arrow-down': settingsService.settings.readingOrder == 'desc'}"></i>
</a>
<div class="btn-group" data-toggle="buttons-radio">
<a type="button" class="btn" ng-model="settingsService.settings.viewMode" btn-radio="'title'" title="${toolbar.titles_only}"><i class="icon-list"></i></a>
<a type="button" class="btn" ng-model="settingsService.settings.viewMode" btn-radio="'expanded'" title="${toolbar.expanded_view}"><i class="icon-th-list"></i></a>
</div>
<div class="btn-group">
<a type="button" class="btn" ng-click="previousEntry()" title="${toolbar.previous_entry}"><i class="icon-chevron-up"></i></a>
<a type="button" class="btn" ng-click="nextEntry()" title="${toolbar.next_entry}"><i class="icon-chevron-down"></i></a>
<a type="button" class="btn" ng-click="refresh()" title="${toolbar.refresh}"><i class="icon-refresh"></i></a>
</div>
<div class="btn-group">
<a type="button" class="btn" ng-click="markAllAsRead()" title="${toolbar.mark_all_as_read}"><i class="icon-check"></i></a>
<button class="btn dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu pull-right">
<li><a ng-click="markAllDay()">${toolbar.mark_all_older_day}</a></li>
<li><a ng-click="markAllWeek()">${toolbar.mark_all_older_week}</a></li>
<li><a ng-click="markAllTwoWeeks()">${toolbar.mark_all_older_two_weeks}</a></li>
</ul>
</div>
<div class="btn-group">
<a class="btn" ng-click="toSettings()" title="${toolbar.settings}"><i class="icon-cog"></i></a>
<button class="btn dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu pull-right">
<li><a ng-click="toProfile()"><i class="icon-user"></i> ${toolbar.profile}</a></li>
<li ng-show="session.admin"><a ng-click="toAdmin()"><i class="icon-edit"></i> ${toolbar.admin}</a></li>
<li class="divider"></li>
<li><a href="logout"><i class="icon-off"></i> ${toolbar.logout}</a></li>
</ul>
</div>
</span>
<form ng-submit="search()" class="input-append">
<input type="text" ng-model="keywords"></input>
<button class="btn" type="submit"><i class="icon-search"></i></button>
</form>
<div class="donate">
<button class="btn btn-success" type="button" ng-click="toHelp()"><i class="icon-question-sign"></i> ${toolbar.about} / ${toolbar.donate}</button>
</div>
<div spinner shown="loading"></div>
<span>{{ServerService.announcement}}</span>
<span class="hidden-phone hidden-tablet">{{ServerService.announcement}}</span>
</div>
</div>

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

@@ -1,12 +1,12 @@
<div class="container-fluid">
<div class="row-fluid">
<div class="span2">
<div class="span2 left-menu">
<div class="sidebar-nav-fixed" mousewheel-scrolling>
<div ng-include="'templates/_subscribe.html'"></div>
<div ng-include="'templates/_tree.html'"></div>
</div>
</div>
<div class="span10">
<div class="span10 main-content">
<div class="toolbar" ng-include="'templates/_toolbar.html'"></div>
<div class="entryList">
<div ui-view></div>

4
src/main/webapp/templates/feeds.view.html
View File

@@ -10,7 +10,7 @@
on-scroll-middle="onScroll(entry)" ng-class="{current: current==entry}">
<a href="{{entry.url}}" target="_blank" class="entry-heading" ng-click="noop($event)" ng-mouseup="entryClicked(entry, $event)"
ng-class="{open: current == entry, closed: current != entry}">
<span class="feed-name">
<span class="feed-name visible-desktop">
<span class="star" ng-mouseup="star(entry, !entry.starred, $event)">
<i ng-class="{'icon-star icon-star-yellow': entry.starred, 'icon-star-empty': !entry.starred}"
class="pointer"></i>
@@ -18,7 +18,7 @@
<favicon url="entry.feedLink" />
{{entry.feedName}}
</span>
<span class="entry-date">{{entry.date | entryDate}}</span>
<span class="entry-date visible-desktop">{{entry.date | entryDate}}</span>
<span class="entry-name" ng-class="{unread: entry.read == false, shrink: true}" ng-bind-html-unsafe="entry.title"></span>
</a>