mirror of
https://github.com/nextcloud/passman.git
synced 2025-09-10 23:14:26 +08:00
Improved Folderpicker-directive layout
Signed-off-by: Felix Nüsse <Felix.nuesse@t-online.de>
This commit is contained in:
Felix Nüsse
parent
02040f6b0e
commit
4de95dc41c
7 changed files with 199 additions and 20 deletions
|
|
@ -423,8 +423,11 @@ class TranslationController extends ApiController {
|
|||
|
||||
|
||||
//template/views/partials/folder-picker
|
||||
'folderpath.select' => $this->trans->t('Move to:'),
|
||||
'folderpath.moved' => $this->trans->t('Moved successfullly!'),
|
||||
'folderpath.credential' => $this->trans->t('Credential to move'),
|
||||
'folderpath.move' => $this->trans->t('Move'),
|
||||
'folderpath.cancel' => $this->trans->t('Cancel'),
|
||||
'folderpath.newfolder' => $this->trans->t('New Folder'),
|
||||
'folderpath.createfolder' => $this->trans->t('Create'),
|
||||
);
|
||||
return new JSONResponse($translations);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -55,6 +55,8 @@
|
|||
$scope.http_warning_hidden = true;
|
||||
}
|
||||
|
||||
$scope.http_warning_hidden = true;
|
||||
|
||||
if(SettingsService.isEnabled('disable_debugger')){
|
||||
(function a() {
|
||||
try {
|
||||
|
|
|
|||
|
|
@ -34,29 +34,110 @@
|
|||
templateUrl: 'views/partials/folder-picker.html',
|
||||
restrict: 'A',
|
||||
scope: {
|
||||
credential: '=folderPicker'
|
||||
credential: '=folderPicker',
|
||||
folder: '=folder'
|
||||
},
|
||||
link: function(scope, element) {
|
||||
|
||||
scope.currentFolder = scope.credential.folderpath;
|
||||
scope.tempFolderList = [];
|
||||
scope.BreadcrumbList = ["test","1"];
|
||||
scope.enableInput = false;
|
||||
|
||||
scope.toggleInput = function() {
|
||||
scope.enableInput = !scope.enableInput;
|
||||
};
|
||||
|
||||
scope.save = function() {
|
||||
CredentialService.updateCredential(scope.credential).then(function () {
|
||||
CredentialService.updateCredential(scope.credential).then(function (updated_credential) {
|
||||
NotificationService.showNotification($translate.instant('folderpath.moved'), 5000);
|
||||
$rootScope.$broadcast('updateFolderInMainList', scope.credential);
|
||||
$('#folderPicker').dialog('close');
|
||||
$rootScope.$broadcast('updateFolderInMainList', updated_credential);
|
||||
//$('#folderPicker').dialog('close');
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
|
||||
$(element).click(function() {
|
||||
$('#folderPicker').dialog({
|
||||
width: 400,
|
||||
height: 140,
|
||||
close: function() {
|
||||
$(this).dialog('destroy');
|
||||
scope.currentPathAddNew = function (nextFolder) {
|
||||
if(typeof nextFolder === 'undefined'){
|
||||
nextFolder=$translate.instant('folderpath.newfolder');
|
||||
}
|
||||
scope.currentPathAdd(nextFolder);
|
||||
scope.enableInput=false;
|
||||
};
|
||||
|
||||
scope.currentPathAdd = function (nextFolder) {
|
||||
console.log(scope.tempFolderList)
|
||||
scope.currentFolder+='/'+nextFolder;
|
||||
scope.getCurrentFolderList();
|
||||
scope.setCurrentFolderFromBreadcrumb(scope.currentFolder);
|
||||
};
|
||||
|
||||
scope.getCurrentFolderList = function () {
|
||||
var Temp=[];
|
||||
for (var i=0; i<scope.folder.length; i++) {
|
||||
if(scope.folder[i].startsWith(scope.currentFolder) && scope.checkIfFolderIsSubfolder(scope.folder[i])){
|
||||
var reducedFoldername=scope.cutScopeFolderFromFoldername(scope.folder[i]);
|
||||
if(Temp.indexOf(reducedFoldername) <= -1){
|
||||
Temp.push(reducedFoldername);
|
||||
}
|
||||
}
|
||||
}
|
||||
Temp.splice( Temp.indexOf(""), 1 );
|
||||
scope.tempFolderList=Temp;
|
||||
};
|
||||
|
||||
scope.checkIfFolderIsSubfolder = function (folder) {
|
||||
return folder.startsWith(scope.currentFolder);
|
||||
};
|
||||
|
||||
scope.cutScopeFolderFromFoldername = function (folder) {
|
||||
var withoutParent=folder.replace(scope.currentFolder, "")+"/";
|
||||
var withoutRest="";
|
||||
var temp="";
|
||||
if(withoutParent.startsWith("/")){
|
||||
temp=withoutParent.substring(1,withoutParent.length);
|
||||
withoutRest=temp.substring(0,temp.indexOf("/"));
|
||||
}else{
|
||||
withoutRest=withoutParent.substring(0,withoutParent.indexOf("/"));
|
||||
}
|
||||
|
||||
return withoutRest;
|
||||
};
|
||||
|
||||
scope.createBreadCrumbList = function () {
|
||||
var array= scope.currentFolder.split("/").filter(Boolean);
|
||||
var res=[];
|
||||
var fullPath="/";
|
||||
array.forEach(function (element) {
|
||||
fullPath+=element+"/";
|
||||
res.push({fullPath:fullPath, name:element});
|
||||
});
|
||||
scope.BreadcrumbList=res;
|
||||
|
||||
};
|
||||
|
||||
scope.setCurrentFolderFromBreadcrumb = function (folder) {
|
||||
scope.currentFolder=folder;
|
||||
scope.createBreadCrumbList();
|
||||
scope.getCurrentFolderList();
|
||||
};
|
||||
|
||||
scope.createBreadCrumbList();
|
||||
scope.getCurrentFolderList();
|
||||
|
||||
scope.close = function() {
|
||||
|
||||
};
|
||||
|
||||
$(element).click(function() {
|
||||
$('#folderPicker').dialog({
|
||||
width: 400,
|
||||
//height: 140,
|
||||
height: 340,
|
||||
close: function() {
|
||||
$(this).dialog('destroy');
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
};
|
||||
}]);
|
||||
|
|
|
|||
|
|
@ -26,6 +26,7 @@
|
|||
@import 'partials/popovermenu';
|
||||
@import 'partials/tabs';
|
||||
@import 'partials/pwgen';
|
||||
@import 'partials/folder-picker';
|
||||
@import 'vaults';
|
||||
@import 'credentials';
|
||||
@import 'menu';
|
||||
|
|
|
|||
58
sass/partials/folder-picker.scss
Normal file
58
sass/partials/folder-picker.scss
Normal file
|
|
@ -0,0 +1,58 @@
|
|||
/**
|
||||
* Nextcloud - passman
|
||||
*
|
||||
* @copyright Copyright (c) 2018, Felix Nüsse (felix.nuesse@t-online.de)
|
||||
* @license GNU AGPL version 3 or any later version
|
||||
*
|
||||
* This program is free software: you can redistribute it and/or modify
|
||||
* it under the terms of the GNU Affero General Public License as
|
||||
* published by the Free Software Foundation, either version 3 of the
|
||||
* License, or (at your option) any later version.
|
||||
*
|
||||
* This program is distributed in the hope that it will be useful,
|
||||
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
* GNU Affero General Public License for more details.
|
||||
*
|
||||
* You should have received a copy of the GNU Affero General Public License
|
||||
* along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||
*
|
||||
*/
|
||||
|
||||
$folderrowheight: 35px;
|
||||
|
||||
#folder-list{
|
||||
table{
|
||||
width: 100%;
|
||||
td{
|
||||
height: $folderrowheight;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
}
|
||||
}
|
||||
|
||||
.icon{
|
||||
height: $folderrowheight;
|
||||
width: 20px;
|
||||
float: left;
|
||||
padding: 5px 5px 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.name{
|
||||
height: $folderrowheight;
|
||||
width: calc(100% - 30px);
|
||||
float: left;
|
||||
margin-top: 15px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.input{
|
||||
height: $folderrowheight;
|
||||
width: calc(100% - 30px);
|
||||
float: left;
|
||||
margin-top: 5px;
|
||||
padding-bottom: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -1,8 +1,41 @@
|
|||
<div style="display: none" id="folderPicker" title="{{ 'folderpath.select' | translate }}">
|
||||
<label>{{ 'folderpath' | translate}}</label>
|
||||
<div style="display: none" id="folderPicker" title="{{ 'folderpath.credential' | translate }}: {{credential.label}}">
|
||||
<div>
|
||||
<input id="folderpicker-input" type="text" ng-model="credential.folderpath">
|
||||
<button ng-click="save()">{{ 'use.icon' | translate}}</button>
|
||||
<input id="folderpicker-input" type="text" ng-model="currentFolder" readonly style="display: none;">
|
||||
</div>
|
||||
|
||||
<div id="breadcrumb"></div>
|
||||
<div class="breadcrumb">
|
||||
<div class="breadcrumb">
|
||||
<div class="crumb svg ui-droppable" data-dir="/">
|
||||
<a ng-click="setCurrentFolderFromBreadcrumb('/')"><i class="fa fa-home"></i></a>
|
||||
</div>
|
||||
<div class="crumb svg" ng-repeat="path in BreadcrumbList" ng-click="setCurrentFolderFromBreadcrumb(path.fullPath)" >
|
||||
<a>{{::path.name}}</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="folder-list">
|
||||
<table class="folder-list">
|
||||
<tr class="folder-row" ng-repeat="entry in tempFolderList" ng-click="currentPathAdd(entry);">
|
||||
<td class="icon icon-folder"></td>
|
||||
<td class="name">{{entry}}</td>
|
||||
<td class="space"></td>
|
||||
</tr>
|
||||
<tr class="folder-row">
|
||||
<td class="icon icon-folder"></td>
|
||||
<td class="name" ng-if="!enableInput" ng-click="toggleInput()">New...</td>
|
||||
<td class="input" ng-if="enableInput">
|
||||
<form ng-submit="currentPathAddNew(newfolderinput);">
|
||||
<input type="text" value="{{ 'folderpath.newfolder' | translate}}" ng-model="newfolderinput">
|
||||
<button>{{ 'folderpath.createfolder' | translate}}</button>
|
||||
</form>
|
||||
</td>
|
||||
<td class="space"></td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
<div id="controls">
|
||||
<button ng-click="close()">{{ 'folderpath.cancel' | translate}}</button>
|
||||
<button class="primary" ng-click="save()">{{ 'folderpath.move' | translate}}</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -70,6 +70,7 @@
|
|||
</span>
|
||||
|
||||
<div folder-picker="credential"
|
||||
folder="FolderList"
|
||||
class="icon-settings cog"
|
||||
ng-class="{'icon-settings-dark':hovering}"
|
||||
ng-mouseenter="hovering=true"
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue