--- /dev/null
+'use strict';
+
+angular.module("DivinElegy.components.ui", ['ngStorage']).
+
+factory("UiSettingsService", ['$localStorage', function($localStorage)
+{
+ var UiSettingsService = {};
+
+ $localStorage.$default({
+ ui: {
+ 'simfilesPerPage': 10,
+ 'showDownloadWarning' : true
+ }
+ });
+
+ UiSettingsService.setDirective = function(directive, value)
+ {
+ if($localStorage.ui[directive]) $localStorage.ui[directive] = value;
+ };
+
+ UiSettingsService.getDirective = function(directive)
+ {
+ return $localStorage.ui[directive];
+ };
+
+ return UiSettingsService;
+}]);
\ No newline at end of file
'use strict'
-angular.module('DivinElegy.components.userMenu', ['DivinElegy.components.user', 'DivinElegy.components.hello']).
+angular.module('DivinElegy.components.userMenu', ['DivinElegy.components.user', 'DivinElegy.components.hello', 'ui.bootstrap']).
-directive('userMenu', ['HelloService', 'UserService', function(HelloService, UserService)
+directive('userMenu', ['HelloService', 'UserService', '$modal', function(HelloService, UserService, $modal)
{
return {
templateUrl: 'components/userMenu/userMenu.html',
scope.loggedIn = false;
scope.$$phase || scope.$apply();
});
+
+ scope.openAccountSettings = function()
+ {
+ $modal.open({
+ templateUrl: 'pages/account/account.html',
+ controller: 'AccountController',
+ });
+ };
}
};
}]);
<h1>My Arrows</h1>
<ul>
<li><a href="#/profile">Public Profile</a></li>
- <li><a href="#/settings">Account Settings</a></li>
+ <li><a class="de-link" ng-click='openAccountSettings()'>Account Settings</a></li>
</ul>
<!--<ul>
<li>My Uploads</li>
margin-bottom: 20px;
}
-#filters input[type="text"], #filters select {
+input[type="text"], #filters select {
box-sizing:content-box;
-ms-box-sizing:content-box;
-moz-box-sizing:content-box;
text-align: center;
}
-.panel h1, .panel h2 {
+h1, h2 {
color: white;
font-weight: bold;
margin: 18px 0px 0px 0px;
-webkit-font-smoothing: antialiased;
}
-.panel h1 {
+h1 {
font-size: 21px;
}
-.panel h2 {
+h2 {
font-size:15px;
margin-bottom: 2px;
}
--- /dev/null
+.fade{
+ opacity:0;
+ -webkit-transition:opacity .15s linear;
+ transition:opacity .15s linear
+}
+
+.fade.in{
+ opacity:1
+}
+
+.modal {
+ display: none;
+ overflow: auto;
+ overflow-y: scroll;
+ position: fixed;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ z-index: 1050;
+ -webkit-overflow-scrolling: touch;
+ outline: 0;
+}
+
+.modal.fade .modal-dialog {
+ -webkit-transition: -webkit-transform .3s ease-out;
+ -o-transition: -o-transform .3s ease-out;
+ transition: transform .3s ease-out;
+ -webkit-transform: translate(0, -25%);
+ -ms-transform: translate(0, -25%);
+ -o-transform: translate(0, -25%);
+ transform: translate(0, -25%);
+}
+.modal.in .modal-dialog {
+ -webkit-transform: translate(0, 0);
+ -ms-transform: translate(0, 0);
+ -o-transform: translate(0, 0);
+ transform: translate(0, 0);
+}
+.modal-open .modal {
+ overflow-x: hidden;
+ overflow-y: auto;
+}
+.modal-dialog {
+ position: relative;
+ width: auto;
+ margin: 10px;
+}
+.modal-content {
+ background-color: #1C2C3C;
+ border: 3px solid #000000;
+ border-radius: 10px;
+ -moz-border-radius: 10px;
+ -webkit-border-radius: 10px;
+ color: #fff;
+ padding: 7px;
+ -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
+ box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
+}
+.modal-backdrop {
+ position: fixed;
+ top: 0;
+ right: 0;
+ left: 0;
+ bottom: 0;
+ background-color: #000;
+}
+.modal-backdrop.fade {
+ filter: alpha(opacity=0);
+ opacity: 0;
+}
+.modal-backdrop.in {
+ filter: alpha(opacity=50);
+ opacity: .5;
+}
+.modal-header {
+ min-height: 16.43px;
+ padding: 15px;
+ border-bottom: 1px solid #e5e5e5;
+}
+.modal-header .close {
+ margin-top: -2px;
+}
+.modal-title {
+ margin: 0;
+ line-height: 1.42857143;
+}
+.modal-body {
+ position: relative;
+ padding: 15px;
+}
+.modal-footer {
+ padding: 15px;
+ text-align: right;
+ border-top: 1px solid #e5e5e5;
+}
+.modal-footer .btn+.btn {
+ margin-bottom: 0;
+ margin-left: 5px;
+}
+.modal-footer .btn-group .btn+.btn {
+ margin-left: -1px;
+}
+.modal-footer .btn-block+.btn-block {
+ margin-left: 0;
+}
+.modal-scrollbar-measure {
+ position: absolute;
+ top: -9999px;
+ width: 50px;
+ height: 50px;
+ overflow: scroll;
+}
+
+.modal-dialog {
+ width: 600px;
+ margin: 30px auto;
+}
+
+.modal-content {
+ -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
+ box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
+}
+.modal-sm {
+ width: 300px;
+}
+
+.modal-lg {
+ width: 900px;
+}
+
+.modal-footer:after{
+ display:table;content:" "
+}
+
+.modal-footer:before,.modal-footer:after{
+ display:table;content:" "
+}
+
+.modal-footer:after{
+ clear:both
+}
\ No newline at end of file
--- /dev/null
+.pagination{
+ display:inline-block;
+ padding-left:0;
+ margin:20px 0;
+ border-radius:4px
+}
+
+.pagination>li{
+ display:inline
+}
+
+.pagination>li>a,.pagination>li>span{
+ position:relative;float:left;
+ padding:6px 12px;
+ margin-left:-1px;
+ line-height:1.42857143;
+ text-decoration:none;
+ background: rgba(0,0,0,0.25);
+ border:2px solid rgba(0,0,0,0.3);
+}
+
+.pagination>li:first-child>a,.pagination>li:first-child>span{
+ margin-left:0;
+ border-top-left-radius:4px;
+ border-bottom-left-radius:4px
+}
+
+.pagination>li:last-child>a,.pagination>li:last-child>span{
+ border-top-right-radius:4px;
+ border-bottom-right-radius:4px
+}
+
+.pagination>li>a:hover,.pagination>li>span:hover,.pagination>li>a:focus,.pagination>li>span:focus{
+ border-color:#FFB122;
+}
+
+.pagination>.active>a,.pagination>.active>span,.pagination>.active>a:hover,.pagination>.active>span:hover,.pagination>.active>a:focus,.pagination>.active>span:focus{
+ z-index:2;color:#fff;
+ cursor:default;
+ background: rgba(255,255,255,0.05);
+}
+
+.pagination>.disabled>span,.pagination>.disabled>span:hover,.pagination>.disabled>span:focus,.pagination>.disabled>a,.pagination>.disabled>a:hover,.pagination>.disabled>a:focus{
+ color:#777;
+ cursor:not-allowed;
+ background: rgba(0,0,0,0.25);
+ border:2px solid rgba(0,0,0,0.3);
+}
+
+.pagination-lg>li>a,.pagination-lg>li>span{
+ padding:10px 16px;
+ font-size:18px
+}
+
+.pagination-lg>li:first-child>a,.pagination-lg>li:first-child>span{
+ border-top-left-radius:6px;
+ border-bottom-left-radius:6px
+}
+
+.pagination-lg>li:last-child>a,.pagination-lg>li:last-child>span{
+ border-top-right-radius:6px;border-bottom-right-radius:6px
+}
+
+.pagination-sm>li>a,.pagination-sm>li>span{
+ padding:5px 10px;font-size:12px
+}
+
+.pagination-sm>li:first-child>a,.pagination-sm>li:first-child>span{
+ border-top-left-radius:3px;
+ border-bottom-left-radius:3px
+}
+
+.pagination-sm>li:last-child>a,.pagination-sm>li:last-child>span{
+ border-top-right-radius:3px;
+ border-bottom-right-radius:3px
+}
+
+.pager{
+ padding-left:0;
+ margin:20px 0;
+ text-align:center;
+ list-style:none
+}
+
+.pager li{
+ display:inline
+}
+
+.pager li>a,.pager li>span{
+ display:inline-block;
+ padding:5px 14px;
+ background-color:#fff;
+ border:1px solid #ddd;
+ border-radius:15px
+}
+
+.pager li>a:hover,.pager li>a:focus{
+ text-decoration:none;
+ background-color:#eee
+}
+
+.pager .next>a,.pager .next>span{
+ float:right
+}
+
+.pager .previous>a,.pager .previous>span{
+ float:left
+}
+
+.pager .disabled>a,.pager .disabled>a:hover,.pager .disabled>a:focus,.pager .disabled>span{
+ color:#777;
+ cursor:not-allowed;
+ background-color:#fff
+}
\ No newline at end of file
'DivinElegy.components.messages',
'DivinElegy.pages.index',
'DivinElegy.pages.upload',
+ 'DivinElegy.pages.account',
'DivinElegy.pages.simfiles',
'DivinElegy.pages.packs'
]).
}).
otherwise({redirectTo: '/'});
}]).
-
+
+//This feels to small to be in its own component thingy so
+filter('startFrom', function()
+{
+ return function(input, start)
+ {
+ start = +start;
+ return input.slice(start);
+ }
+}).
+
run(['HelloService', function(HelloService)
{
HelloService.init({
<link rel="stylesheet" href="css/reset.css"/>
<link rel="stylesheet" href="css/grid.css"/>
<link rel="stylesheet" href="css/animations.css"/>
+ <link rel="stylesheet" href="css/pager.css"/>
+ <link rel="stylesheet" href="css/modal.css"/>
<link rel="stylesheet" href="css/divinelegy.css"/>
<!-- endbuild -->
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="bower_components/angular-bootstrap/ui-bootstrap.js"></script>
<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
+ <script src="bower_components/ngstorage/ngStorage.min.js"></script>
<script src="bower_components/hello/dist/hello.all.js"></script>
<script src="components/config/rockEndpoint-value.js"></script>
<script src="components/simfiles/mostdownloaded-directive.js"></script>
<script src="components/messages/messagebox-controller.js"></script>
<script src="components/messages/messagebox-directive.js"></script>
- <script src="components/rhaboo/rhaboo.min.js"></script>
+ <script src="components/uiSettings/uisettings-service.js"></script>
<script src="pages/index/index.js"></script>
<script src="pages/upload/upload.js"></script>
+ <script src="pages/account/account.js"></script>
<script src="pages/simfiles/simfiles.js"></script>
<script src="pages/packs/packs.js"></script>
--- /dev/null
+<div class="modal-header">
+ <h1 class="modal-title">Account Settings</h1>
+</div>
+<div class="modal-body">
+ <h2>Simfiles per page</h2>
+ <input type="text" ng-model="simfilesPerPage"/>
+</div>
+<div class="modal-footer">
+ <button class="btn btn-primary" ng-click="ok()">Save</button>
+ <button class="btn button-warning" ng-click="cancel()">Cancel</button>
+</div>
\ No newline at end of file
--- /dev/null
+'use strict';
+
+angular.module("DivinElegy.pages.account", ['DivinElegy.components.ui'])
+
+.controller("AccountController", ['$scope', '$modalInstance', 'UiSettingsService', function($scope, $modalInstance, UiSettingsService)
+{
+ $scope.simfilesPerPage = UiSettingsService.getDirective('simfilesPerPage');
+
+ $scope.ok = function()
+ {
+ UiSettingsService.setDirective('simfilesPerPage', $scope.simfilesPerPage);
+ };
+
+ $scope.cancel = function()
+ {
+ $modalInstance.dismiss('cancel');
+ };
+}]);
\ No newline at end of file
ng-class = "{active: isOpen}"\r
heading = "{{isOpen ? '- ' + pack.title : '+ ' + pack.title}}"\r
ng-init = "contributors=getContributors(pack.contributors)"\r
- ng-repeat = "pack in packList | filter: packTitleFilter\r
- | filter: simfileFilter"\r
+ ng-repeat = "pack in filteredPackList = (packList | filter: packTitleFilter\r
+ | filter: simfileFilter)\r
+ | startFrom: (currentPage-1)*pageSize\r
+ | limitTo: pageSize"\r
>\r
<img ng-src="{{rockEndpoint}}{{pack.banner}}" alt="swage" />\r
<table>\r
</accordion-group>\r
</accordion>\r
</accordion-group>\r
-</accordion>
\ No newline at end of file
+ <div style="text-align: center">\r
+ <pagination total-items="filteredPackList.length" items-per-page="pageSize" ng-model="currentPage" boundary-links="true" rotate="false" max-size="8"></pagination>\r
+ </div>\r
+</accordion>\r
+\r
'use strict';
-angular.module("DivinElegy.pages.packs", ["DivinElegy.components.simfiles","DivinElegy.components.user","DivinElegy.components.config", "ui.bootstrap"])
+angular.module("DivinElegy.pages.packs", ["DivinElegy.components.simfiles","DivinElegy.components.user","DivinElegy.components.config","DivinElegy.components.ui", "ui.bootstrap"])
-.controller("PackController", ['$scope', '$rootScope', 'rockEndpoint', 'SimfileService', 'UserService', 'HelloService', function($scope, $rootScope, rockEndpoint, SimfileService, UserService, HelloService)
+.controller("PackController", ['$scope', '$rootScope', 'rockEndpoint', 'SimfileService', 'UserService', 'UiSettingsService', 'HelloService', function($scope, $rootScope, rockEndpoint, SimfileService, UserService, UiSettingsService, HelloService)
{
$scope.rockEndpoint = rockEndpoint;
$scope.packTitleFilterKeyword = null;
}
return match;
- }
-
+ };
+
+ $scope.packList = [];
+
SimfileService.getPacks().then(function(packs)
{
+ $scope.pageSize = UiSettingsService.getDirective('simfilesPerPage');
+ $scope.currentPage = 1;
$scope.packList = packs;
});
}]);
\ No newline at end of file
"angular-file-upload": "1.1.1",
"hello": "1.2.1",
"angular-animate": "1.3.x",
- "angular-bootstrap": "0.12.x"
+ "angular-bootstrap": "0.12.x",
+ "ngstorage": "x.x.x"
},
"resolutions": {
"angular": "1.3.5"