So much cool stuff.
authorCameron Ball <cameron@getapproved.com.au>
Wed, 17 Dec 2014 08:37:31 +0000 (16:37 +0800)
committerCameron Ball <cameron@getapproved.com.au>
Wed, 17 Dec 2014 08:37:31 +0000 (16:37 +0800)
13 files changed:
app/components/uiSettings/uisettings-service.js [new file with mode: 0644]
app/components/userMenu/userMenu-directive.js
app/components/userMenu/userMenu.html
app/css/divinelegy.css
app/css/modal.css [new file with mode: 0644]
app/css/pager.css [new file with mode: 0644]
app/divinelegy.js
app/index.html
app/pages/account/account.html [new file with mode: 0644]
app/pages/account/account.js [new file with mode: 0644]
app/pages/packs/packs.html
app/pages/packs/packs.js
bower.json

diff --git a/app/components/uiSettings/uisettings-service.js b/app/components/uiSettings/uisettings-service.js
new file mode 100644 (file)
index 0000000..18ad9d0
--- /dev/null
@@ -0,0 +1,27 @@
+'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
index 9148889..939e8fc 100644 (file)
@@ -1,8 +1,8 @@
 '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',
@@ -36,6 +36,14 @@ directive('userMenu', ['HelloService', 'UserService', function(HelloService, Use
                 scope.loggedIn = false;
                 scope.$$phase || scope.$apply();
             });
+            
+            scope.openAccountSettings = function()
+            {
+                $modal.open({
+                    templateUrl: 'pages/account/account.html',
+                    controller: 'AccountController',
+                });
+            };
         }
     };
 }]);
index 085633d..46aa1d1 100644 (file)
@@ -12,7 +12,7 @@
     <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>
index 951c0ba..90be263 100644 (file)
@@ -40,7 +40,7 @@ table {
     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;
@@ -113,7 +113,7 @@ td {
     text-align: center;
 }
 
-.panel h1, .panel h2 {
+h1, h2 {
     color: white;
     font-weight: bold;
     margin: 18px 0px 0px 0px;
@@ -128,11 +128,11 @@ td {
     -webkit-font-smoothing: antialiased;
 }
 
-.panel h1 {
+h1 {
     font-size: 21px;
 }
 
-.panel h2 {
+h2 {
     font-size:15px;
     margin-bottom: 2px;
 }
diff --git a/app/css/modal.css b/app/css/modal.css
new file mode 100644 (file)
index 0000000..cccc1d9
--- /dev/null
@@ -0,0 +1,142 @@
+.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
diff --git a/app/css/pager.css b/app/css/pager.css
new file mode 100644 (file)
index 0000000..6023597
--- /dev/null
@@ -0,0 +1,114 @@
+.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
index fc5124d..d0c163f 100644 (file)
@@ -11,6 +11,7 @@ angular.module('DivinElegy', [
   'DivinElegy.components.messages',
   'DivinElegy.pages.index',
   'DivinElegy.pages.upload',
+  'DivinElegy.pages.account',
   'DivinElegy.pages.simfiles',
   'DivinElegy.pages.packs'
 ]).
@@ -52,7 +53,17 @@ config(['$routeProvider', '$locationProvider', function($routeProvider) {
     }).
     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({
index 1edc009..2c9cb65 100644 (file)
@@ -11,6 +11,8 @@
         <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 -->
         
@@ -21,6 +23,7 @@
         <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>
         
diff --git a/app/pages/account/account.html b/app/pages/account/account.html
new file mode 100644 (file)
index 0000000..c5143a6
--- /dev/null
@@ -0,0 +1,11 @@
+<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
diff --git a/app/pages/account/account.js b/app/pages/account/account.js
new file mode 100644 (file)
index 0000000..b460436
--- /dev/null
@@ -0,0 +1,18 @@
+'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
index 0bd5d21..d177ad3 100644 (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
index 2e8682d..c1f9208 100644 (file)
@@ -1,8 +1,8 @@
 '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;
@@ -162,10 +162,14 @@ angular.module("DivinElegy.pages.packs", ["DivinElegy.components.simfiles","Divi
         }
         
         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
index 899594c..191f3d4 100644 (file)
@@ -14,7 +14,8 @@
     "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"