File view icon transitions
5 changed files with 45 additions and 28 deletions
+ 3
- 2
app/index.html
@@ -11,7 +11,8 @@ |
||
| 11 | 11 |
|
| 12 | 12 |
|
| 13 | 13 |
<!-- Javascript --> |
| 14 |
- <script src="../bower_components/isotope/dist/isotope.pkgd.js"></script> |
|
| 14 |
+ |
|
| 15 |
+ |
|
| 15 | 16 |
<script src="../bower_components/jquery/dist/jquery.js"></script> |
| 16 | 17 |
<script src="../bower_components/ace-builds/src-min-noconflict/ace.js"></script> |
| 17 | 18 |
<script src="../bower_components/angular/angular.js"></script> |
@@ -19,7 +20,6 @@ |
||
| 19 | 20 |
<script src="../bower_components/angular-sanitize/angular-sanitize.js"></script> |
| 20 | 21 |
<script src="../bower_components/angular-ui-ace/ui-ace.js"></script> |
| 21 | 22 |
<script src="../bower_components/angular-highlightjs/src/angular-highlightjs.js"></script> |
| 22 |
- |
|
| 23 | 23 |
<script src="scripts/highlight.pack.js"></script> |
| 24 | 24 |
|
| 25 | 25 |
<script src="scripts/codex-app.js"></script> |
@@ -37,6 +37,7 @@ |
||
| 37 | 37 |
|
| 38 | 38 |
|
| 39 | 39 |
|
| 40 |
+ |
|
| 40 | 41 |
<script> |
| 41 | 42 |
var remote = require('remote');
|
| 42 | 43 |
var ipc = require('ipc');
|
+ 27
- 24
app/scripts/controllers/app-ctrl.js
@@ -8,33 +8,36 @@ |
||
| 8 | 8 |
* Controller of the domainManagerApp |
| 9 | 9 |
*/ |
| 10 | 10 |
angular.module('codexApp.index', [])
|
| 11 |
- .controller('AppCtrl', ['$scope', '$rootScope', '$state', '$location', 'FileService', 'PrefsService', function ($scope, $rootScope, $state, $location, FileService, PrefsService) {
|
|
| 11 |
+ .controller('AppCtrl', ['$scope', '$rootScope', '$state', '$location', 'FileService', 'PrefsService', '$timeout', function ($scope, $rootScope, $state, $location, FileService, PrefsService, $timeout) {
|
|
| 12 | 12 |
|
| 13 | 13 |
$scope.setView = function() {
|
| 14 | 14 |
$scope.view = PrefsService.getCurrentView(); |
| 15 |
- switch ($scope.view) {
|
|
| 16 |
- case "All Notes": |
|
| 17 |
- $scope.files = FileService.getAllNotes(); |
|
| 18 |
- var info = $scope.files.length + " Notes" |
|
| 19 |
- $rootScope.$broadcast('footer:info', info);
|
|
| 20 |
- break; |
|
| 21 |
- case "All Files": |
|
| 22 |
- $scope.files = FileService.getAllFiles(); |
|
| 23 |
- var info = $scope.files.length + " Files" |
|
| 24 |
- $rootScope.$broadcast('footer:info', info);
|
|
| 25 |
- break; |
|
| 26 |
- case "Notebooks": |
|
| 27 |
- $scope.current_folder = FileService.getNotesDir(); |
|
| 28 |
- $scope.files = FileService.getFolders(); |
|
| 29 |
- var info = $scope.files.length + " Notebooks" |
|
| 30 |
- $rootScope.$broadcast('footer:info', info);
|
|
| 31 |
- break; |
|
| 32 |
- case "Notebook": |
|
| 33 |
- $scope.files = FileService.getFiles($scope.current_folder); |
|
| 34 |
- var info = $scope.files.length + " Items" |
|
| 35 |
- $rootScope.$broadcast('footer:info', info);
|
|
| 36 |
- break; |
|
| 37 |
- } |
|
| 15 |
+ $scope.files = []; |
|
| 16 |
+ $timeout(function() {
|
|
| 17 |
+ switch ($scope.view) {
|
|
| 18 |
+ case "All Notes": |
|
| 19 |
+ $scope.files = FileService.getAllNotes(); |
|
| 20 |
+ var info = $scope.files.length + " Notes" |
|
| 21 |
+ $rootScope.$broadcast('footer:info', info);
|
|
| 22 |
+ break; |
|
| 23 |
+ case "All Files": |
|
| 24 |
+ $scope.files = FileService.getAllFiles(); |
|
| 25 |
+ var info = $scope.files.length + " Files" |
|
| 26 |
+ $rootScope.$broadcast('footer:info', info);
|
|
| 27 |
+ break; |
|
| 28 |
+ case "Notebooks": |
|
| 29 |
+ $scope.current_folder = FileService.getNotesDir(); |
|
| 30 |
+ $scope.files = FileService.getFolders(); |
|
| 31 |
+ var info = $scope.files.length + " Notebooks" |
|
| 32 |
+ $rootScope.$broadcast('footer:info', info);
|
|
| 33 |
+ break; |
|
| 34 |
+ case "Notebook": |
|
| 35 |
+ $scope.files = FileService.getFiles($scope.current_folder); |
|
| 36 |
+ var info = $scope.files.length + " Items" |
|
| 37 |
+ $rootScope.$broadcast('footer:info', info);
|
|
| 38 |
+ break; |
|
| 39 |
+ } |
|
| 40 |
+ }, 1); |
|
| 38 | 41 |
} |
| 39 | 42 |
|
| 40 | 43 |
$scope.setView(); |
+ 1
- 1
app/views/index.html
@@ -21,7 +21,7 @@ |
||
| 21 | 21 |
|
| 22 | 22 |
<div class="file-view"> |
| 23 | 23 |
<ul> |
| 24 |
- <li ng-repeat="file in files track by $index" ng-dblclick="openFile(file)" class="file-view-item"> |
|
| 24 |
+ <li ng-repeat="file in files track by $index" ng-dblclick="openFile(file)" class="file-view-item isotope-item fade-in" isotope-item="{{file.path}}">
|
|
| 25 | 25 |
<div class="thumbnail-icon" ng-show="file.type != 'Folder'" ng-right-click="fileContextMenu(file)"> |
| 26 | 26 |
<img src="{{getImageURL(file.path)}}" ng-hide="isImage(file.type)">
|
| 27 | 27 |
<img src="{{file.thumbnail}}" ng-show="isImage(file.type)">
|
+ 2
- 1
bower.json
@@ -27,6 +27,7 @@ |
||
| 27 | 27 |
"jquery": "~2.1.4", |
| 28 | 28 |
"angular-highlightjs": "~0.4.3", |
| 29 | 29 |
"angular-isotope": "~0.1.14", |
| 30 |
- "isotope": "~2.2.2" |
|
| 30 |
+ "isotope": "~2.2.2", |
|
| 31 |
+ "shufflejs": "~3.1.1" |
|
| 31 | 32 |
} |
| 32 | 33 |
} |
+ 12
- 0
css/codex.css
@@ -204,3 +204,15 @@ code.hljs .hljs-title {
|
||
| 204 | 204 |
color: #000000; |
| 205 | 205 |
line-height: 14px; |
| 206 | 206 |
} |
| 207 |
+ |
|
| 208 |
+ |
|
| 209 |
+/* make keyframes that tell the start state and the end state of our object */ |
|
| 210 |
+@keyframes fadeIn { from { opacity:0; ransform: scale(0.3); } to { opacity:1; transform: scale(1);} }
|
|
| 211 |
+ |
|
| 212 |
+.fade-in {
|
|
| 213 |
+ opacity:0; /* make things invisible upon start */ |
|
| 214 |
+ transform: scale(0.3); |
|
| 215 |
+ animation: fadeIn ease-in 1; |
|
| 216 |
+ animation-fill-mode:forwards; |
|
| 217 |
+ animation-duration:0.2s; |
|
| 218 |
+} |