Add in dropdowns to file tree

This commit is contained in:
James Allen 2014-06-23 12:37:05 +01:00
parent 2d6816b013
commit a83f0fe054
7 changed files with 129 additions and 30 deletions

View file

@ -74,6 +74,25 @@ script(type='text/ng-template', id='entityListItemTemplate')
on-enter="finishRenaming()" on-enter="finishRenaming()"
) )
span.dropdown(ng-show="entity.selected")
a.dropdown-toggle(href)
i.fa.fa-chevron-down
ul.dropdown-menu.dropdown-menu-right
li
a(
href="#"
prevent-default="click"
ng-click="startRenaming()"
) Rename
li
a(
href="#"
prevent-default="click"
ng-click="openDeleteModal()"
) Delete
.entity(ng-if="entity.type == 'folder'", ng-controller="FileTreeFolderController") .entity(ng-if="entity.type == 'folder'", ng-controller="FileTreeFolderController")
.entity-name( .entity-name(
ng-click="select()" ng-click="select()"
@ -108,6 +127,44 @@ script(type='text/ng-template', id='entityListItemTemplate')
on-enter="finishRenaming()" on-enter="finishRenaming()"
) )
span.dropdown(ng-show="entity.selected")
a.dropdown-toggle(href)
i.fa.fa-chevron-down
ul.dropdown-menu.dropdown-menu-right
li
a(
href="#"
prevent-default="click"
ng-click="startRenaming()"
) Rename
li
a(
href="#"
prevent-default="click"
ng-click="openDeleteModal()"
) Delete
li.divider
li
a(
href="#"
prevent-default="click"
ng-click="openNewDocModal()"
) New File
li
a(
href="#"
prevent-default="click"
ng-click="openNewFolderModal()"
) New Folder
li
a(
href="#"
prevent-default="click"
ng-click="openUploadFileModal()"
) Upload File
ul.list-unstyled( ul.list-unstyled(
ng-if="entity.type == 'folder'" ng-if="entity.type == 'folder'"
ng-show="expanded" ng-show="expanded"

View file

@ -37,8 +37,6 @@ define [
params = scope.params or {} params = scope.params or {}
params._csrf = window.csrfToken params._csrf = window.csrfToken
console.log "PARAMS", params
new qq.FineUploader new qq.FineUploader
element: element[0] element: element[0]
multiple: multiple multiple: multiple

View file

@ -8,3 +8,11 @@ define [
element.bind attrs.stopPropagation, (e) -> element.bind attrs.stopPropagation, (e) ->
e.stopPropagation() e.stopPropagation()
} }
App.directive "preventDefault", ($http) ->
return {
restrict: "A",
link: (scope, element, attrs) ->
element.bind attrs.preventDefault, (e) ->
e.preventDefault()
}

View file

@ -137,29 +137,18 @@ define [
return null return null
createDocInCurrentFolder: (name, callback = (error, doc) ->) -> createDoc: (name, parent_folder = @getCurrentFolder()) ->
# We'll wait for the socket.io notification to actually # We'll wait for the socket.io notification to actually
# add the doc for us. # add the doc for us.
parent_folder = @getCurrentFolder() @ide.$http.post "/project/#{@ide.project_id}/doc", {
$.ajax { name: name,
url: "/project/#{@ide.project_id}/doc" parent_folder_id: parent_folder?.id
type: "POST" _csrf: window.csrfToken
contentType: "application/json; charset=utf-8"
data: JSON.stringify {
name: name,
parent_folder_id: parent_folder?.id
_csrf: window.csrfToken
}
dataType: "json"
success: (doc) ->
callback(null, doc)
failure: (error) -> callback(error)
} }
createFolderInCurrentFolder: (name) -> createFolder: (name, parent_folder = @getCurrentFolder()) ->
# We'll wait for the socket.io notification to actually # We'll wait for the socket.io notification to actually
# add the folder for us. # add the folder for us.
parent_folder = @getCurrentFolder()
return @ide.$http.post "/project/#{@ide.project_id}/folder", { return @ide.$http.post "/project/#{@ide.project_id}/folder", {
name: name, name: name,
parent_folder_id: parent_folder?.id parent_folder_id: parent_folder?.id

View file

@ -1,17 +1,23 @@
define [ define [
"base" "base"
], (App) -> ], (App) ->
App.controller "FileTreeController", ["$scope", "$modal", ($scope, $modal) -> App.controller "FileTreeController", ["$scope", "$modal", "ide", ($scope, $modal, ide) ->
$scope.openNewDocModal = () -> $scope.openNewDocModal = () ->
$modal.open( $modal.open(
templateUrl: "newDocModalTemplate" templateUrl: "newDocModalTemplate"
controller: "NewDocModalController" controller: "NewDocModalController"
resolve: {
parent_folder: () -> ide.fileTreeManager.getCurrentFolder()
}
) )
$scope.openNewFolderModal = () -> $scope.openNewFolderModal = () ->
$modal.open( $modal.open(
templateUrl: "newFolderModalTemplate" templateUrl: "newFolderModalTemplate"
controller: "NewFolderModalController" controller: "NewFolderModalController"
resolve: {
parent_folder: () -> ide.fileTreeManager.getCurrentFolder()
}
) )
$scope.openUploadFileModal = () -> $scope.openUploadFileModal = () ->
@ -19,6 +25,9 @@ define [
templateUrl: "uploadFileModalTemplate" templateUrl: "uploadFileModalTemplate"
controller: "UploadFileModalController" controller: "UploadFileModalController"
scope: $scope scope: $scope
resolve: {
parent_folder: () -> ide.fileTreeManager.getCurrentFolder()
}
) )
$scope.orderByFoldersFirst = (entity) -> $scope.orderByFoldersFirst = (entity) ->
@ -33,8 +42,8 @@ define [
] ]
App.controller "NewDocModalController", [ App.controller "NewDocModalController", [
"$scope", "ide", "$modalInstance", "$timeout", "$scope", "ide", "$modalInstance", "$timeout", "parent_folder",
($scope, ide, $modalInstance, $timeout) -> ($scope, ide, $modalInstance, $timeout, parent_folder) ->
$scope.inputs = $scope.inputs =
name: "name.tex" name: "name.tex"
$scope.state = $scope.state =
@ -48,7 +57,7 @@ define [
$scope.create = () -> $scope.create = () ->
$scope.state.inflight = true $scope.state.inflight = true
ide.fileTreeManager ide.fileTreeManager
.createDocInCurrentFolder($scope.inputs.name) .createDoc($scope.inputs.name, parent_folder)
.success () -> .success () ->
$scope.state.inflight = false $scope.state.inflight = false
$modalInstance.close() $modalInstance.close()
@ -58,8 +67,8 @@ define [
] ]
App.controller "NewFolderModalController", [ App.controller "NewFolderModalController", [
"$scope", "ide", "$modalInstance", "$timeout", "$scope", "ide", "$modalInstance", "$timeout", "parent_folder",
($scope, ide, $modalInstance, $timeout) -> ($scope, ide, $modalInstance, $timeout, parent_folder) ->
$scope.inputs = $scope.inputs =
name: "name" name: "name"
$scope.state = $scope.state =
@ -73,7 +82,7 @@ define [
$scope.create = () -> $scope.create = () ->
$scope.state.inflight = true $scope.state.inflight = true
ide.fileTreeManager ide.fileTreeManager
.createFolderInCurrentFolder($scope.inputs.name) .createFolder($scope.inputs.name, parent_folder)
.success () -> .success () ->
$scope.state.inflight = false $scope.state.inflight = false
$modalInstance.close() $modalInstance.close()
@ -83,9 +92,9 @@ define [
] ]
App.controller "UploadFileModalController", [ App.controller "UploadFileModalController", [
"$scope", "ide", "$modalInstance", "$timeout", "$scope", "ide", "$modalInstance", "$timeout", "parent_folder",
($scope, ide, $modalInstance, $timeout) -> ($scope, ide, $modalInstance, $timeout, parent_folder) ->
parent_folder = ide.fileTreeManager.getCurrentFolder() console.log "PArent folder", parent_folder
$scope.parent_folder_id = parent_folder?.id $scope.parent_folder_id = parent_folder?.id
uploadCount = 0 uploadCount = 0

View file

@ -1,7 +1,7 @@
define [ define [
"base" "base"
], (App) -> ], (App) ->
App.controller "FileTreeFolderController", ["$scope", "ide", ($scope, ide) -> App.controller "FileTreeFolderController", ["$scope", "ide", "$modal", ($scope, ide, $modal) ->
$scope.expanded = false $scope.expanded = false
$scope.toggleExpanded = () -> $scope.toggleExpanded = () ->
@ -17,4 +17,33 @@ define [
# that doesn't inherit from previous scopes. # that doesn't inherit from previous scopes.
return '0' if entity.type == "folder" return '0' if entity.type == "folder"
return '1' return '1'
$scope.openNewDocModal = () ->
$modal.open(
templateUrl: "newDocModalTemplate"
controller: "NewDocModalController"
resolve: {
parent_folder: () -> $scope.entity
}
)
$scope.openNewFolderModal = () ->
$modal.open(
templateUrl: "newFolderModalTemplate"
controller: "NewFolderModalController"
resolve: {
parent_folder: () -> $scope.entity
}
)
$scope.openUploadFileModal = () ->
$scope.project_id = ide.project_id
$modal.open(
templateUrl: "uploadFileModalTemplate"
controller: "UploadFileModalController"
scope: $scope
resolve: {
parent_folder: () -> $scope.entity
}
)
] ]

View file

@ -129,6 +129,15 @@
i.fa-folder-open, i.fa-folder, i.fa-file, i.fa-image { i.fa-folder-open, i.fa-folder, i.fa-file, i.fa-image {
color: @link-color; color: @link-color;
} }
padding-right: 32px;
}
}
.dropdown {
position: absolute;
right: 0;
> a {
padding: 0 12px;
} }
} }
} }