Browse Source

fm: New look for upload and create actions

Now upload and create actions aren't display in panel but in popup.
After clicking in button for create or upload action popup becomes visible.

Issue #53
master
Kamil Biały 2 years ago
parent
commit
5bb0a20fd0
5 changed files with 167 additions and 88 deletions
  1. +65
    -7
      public/themes/pluto/css/admin.css
  2. +2
    -2
      public/themes/pluto/src.static/Application.ts
  3. +47
    -51
      public/themes/pluto/src.static/controls/FileManager.ts
  4. +14
    -0
      public/themes/pluto/src.static/interfaces/IFileManager.ts
  5. +39
    -28
      pulsar/admin/views/pluto/filemanager/index.volt

+ 65
- 7
public/themes/pluto/css/admin.css View File

@@ -988,6 +988,7 @@ form .button-container {
width: 70% !important;
}


#filemanager aside {
width: 30%;
max-width: 350px;
@@ -1199,7 +1200,7 @@ li.entity-entry.selected:hover i {
.details-container textarea:focus {
outline: none;
}
#filemanager input[type="text"] {
/*#filemanager input[type="text"] {
border: 0;
border-left: 1px #ccc solid;
border-right: 1px #ccc solid;
@@ -1208,7 +1209,7 @@ li.entity-entry.selected:hover i {
#filemanager input[type="text"]:focus {
outline: none;
box-shadow: none;
}
}*/
#filemanager input[type="file"] {
width: 0;
height: 0;
@@ -1227,14 +1228,71 @@ li.entity-entry.selected:hover i {
height: 100%;
top: 0;
left: 0;
}
.popup.light {
background: rgba(192, 192, 192, 0.5);
z-index: 999;
background: rgba( 0, 0, 0, 0.5 );
}
.popup .container {
background: #eee;
border: 0.1rem #fff solid;
min-width: 40rem;
outline: 0.1rem #222 solid;
margin: auto;
}
.popup .container h6 {
background: #222;
color: #eee;
padding: 0.5rem 0.8rem;
font-size: 1rem;
text-transform: uppercase;
margin: -1rem -1rem 1rem -1rem;
}
.popup input[type="text"] {
background: #fff;
width: 100%;
}
.popup input[type="text"]:focus {
outline: none;
box-shadow: none;
}
.popup .button-container {
margin-top: 1rem;
padding: 0;
}
.popup.light .container {
.popup .container .selected-files {
background: #fff;
border: 1px #bbb solid;
margin: auto;
height: 16rem;
list-style: none;
display: flex;
flex-direction: column;
margin-top: 1rem;
overflow: auto;
}
.popup .container .selected-files li {
margin: 0;
border-bottom: 0.1rem #ccc solid;
padding: 0.2rem 0.5rem;
}
.popup .container .selected-files li:nth-child(even) {
background: #f4f4f4;
}
.popup .container .selected-files li:last-child {
border-bottom: 0;
}
.popup .container .selected-files .empty {
text-align: center;
color: #666;
justify-content: center;
}
.button-container {
display: flex;
}
.button-container.text-right .button {
margin-left: 0.5rem;
}
.button-container.text-right .button:first-child {
margin-left: auto;
}
label.button {
line-height: 1.8rem;
}

+ 2
- 2
public/themes/pluto/src.static/Application.ts View File

@@ -131,8 +131,8 @@ class Application
treeSelector: ".directory-subtree",
childIndex: "children",
actionClasses: {
showSidebar: "fa-arrow-circle-o-left",
hideSidebar: "fa-arrow-circle-o-right"
showSidebar: "fa-arrow-circle-o-right",
hideSidebar: "fa-arrow-circle-o-left"
}
} );
}

+ 47
- 51
public/themes/pluto/src.static/controls/FileManager.ts View File

@@ -183,29 +183,31 @@ class FileManager
sidebar: null
};
this._buttons = {
up: null,
home: null,
refresh: null,
toggleTree: null,
showUploadPanel: null,
showCreatePanel: null,
download: null,
rename: null,
remove: null,
closePreview: null,
nextFile: null,
prevFile: null,
downloadCurrent: null,
createDirectory: null,
uploadFile: null
up: null,
home: null,
refresh: null,
toggleTree: null,
showUploadPanel: null,
showCreatePanel: null,
download: null,
rename: null,
remove: null,
closePreview: null,
nextFile: null,
prevFile: null,
downloadCurrent: null,
createDirectory: null,
uploadFile: null,
closeCreatePopup: null,
closeUploadPopup: null
};
this._controls = {
selectedFiles: null,
uploadFile: null,
title: null,
imagePreview: null,
filePreview: null,
entityName: null
selectedFiles: null,
uploadFile: null,
title: null,
imagePreview: null,
filePreview: null,
entityName: null
};

this._options = options;
@@ -542,12 +544,11 @@ class FileManager
this._previewPreviousFile();
} );
// otwieranie panelu tworzenia nowego folderu
buttons.showCreatePanel.addEventListener( "click", (ev: MouseEvent) => {
buttons.showCreatePanel.addEventListener( "click", () => {
this._controls.entityName.value = "";

this._panels.createDirectory.classList.remove( "hidden" );
this._panels.uploadFile.classList.add( "hidden" );
this._controls.entityName.focus();

ev.stopPropagation();
} );
// tworzenie nowego folderu poprzez wciśnięcie przycisku
buttons.createDirectory.addEventListener( "click", () => {
@@ -555,12 +556,12 @@ class FileManager
this._controls.entityName.value = "";
this._panels.createDirectory.classList.add( "hidden" );
} );
// ukrywanie panelu dodawania folderu i plików
this._fileManager.addEventListener( "click", ev => {
if( this._panels.createDirectory.contains(<Node>ev.target) ||
this._panels.uploadFile.contains(<Node>ev.target) )
return;
// ukrywanie panelu dodawania folderu
buttons.closeCreatePopup.addEventListener( "click", () => {
this._panels.createDirectory.classList.add( "hidden" );
} );
// ukrywanie panelu wgrywania plików
buttons.closeUploadPopup.addEventListener( "click", () => {
this._panels.uploadFile.classList.add( "hidden" );
} );
// tworzenie nowego folderu
@@ -573,36 +574,30 @@ class FileManager
}
} );
// zmiana pliku
this._controls.uploadFile.addEventListener( "change", ev =>
this._controls.uploadFile.addEventListener( "change", () =>
{
const uploadControl = this._controls.uploadFile;
let fm = "";
const selectedFiles = this._controls.selectedFiles;

// brak plików
if( !uploadControl.files || uploadControl.files.length == 0 )
fm = "Brak plików...";
selectedFiles.innerHTML =
'<li class="empty">Brak wybranych plików...</li>';

// gdy są, wypisz je wszystkie
else
{
selectedFiles.innerHTML = "";

for( let x = 0; x < uploadControl.files.length; ++x )
{
const ifm = uploadControl.value.replace(/\\/g,"/")
.split( '/' ).pop();

fm += ifm + (uploadControl.files.length - 1 == x
? ""
: " / "
);
const file = uploadControl.files[x];
selectedFiles.innerHTML += `<li>${file.name}</li>`;
}

// sprawdź dla pewności czy na pewno wykryto jakieś pliki
fm = fm.trim();
if( fm != "" )
this._controls.selectedFiles.value = fm;
else
this._controls.selectedFiles.value = "Brak plików...";
}
} );
// akcja wywoływana przy wciśnięciu przycisku wgrywania plików
this._panels.uploadFile.addEventListener("submit", (ev: MouseEvent) => {
this._panels.uploadFile.addEventListener("submit", ev => {
const fdata = new FormData( this._panels.uploadFile );

// ustaw folder do którego pliki będą wgrywane
@@ -654,10 +649,11 @@ class FileManager
return false;
} );
// akcja wywoływana podczas otwierania panelu wgrywania plików
buttons.showUploadPanel.addEventListener( "click", (ev: MouseEvent) => {
this._panels.createDirectory.classList.add( "hidden" );
buttons.showUploadPanel.addEventListener( "click", () => {
this._controls.selectedFiles.innerHTML =
'<li class="empty">Brak wybranych plików...</li>';

this._panels.uploadFile.classList.remove( "hidden" );
ev.stopPropagation();
} );
}


+ 14
- 0
public/themes/pluto/src.static/interfaces/IFileManager.ts View File

@@ -124,6 +124,20 @@ interface IFileManagerButtons
* TYPE: HTMLElement
*/
uploadFile: HTMLElement;

/**
* Zamyka okno wgrywania plików.
*
* TYPE: HTMLElement
*/
closeUploadPopup: HTMLElement;

/**
* Zamyka okno tworzenia elementu.
*
* TYPE: HTMLElement
*/
closeCreatePopup: HTMLElement;
}

// =============================================================================

+ 39
- 28
pulsar/admin/views/pluto/filemanager/index.volt View File

@@ -8,6 +8,41 @@
<!-- menedżer plików -->
<section id="filemanager" class="white-back fill-free items-horizontal">

<div data-panel="createDirectory" class="popup items-horizontal hidden">
<div class="container">
<h6>Tworzenie katalogu</h6>

<label for="Fm.IName">Nazwa katalogu:</label>
<br />
<input data-control="entityName" id="Fm.IName" type="text" class="fill-free" />
<br />

<div class="button-container text-right">
<button data-button="createDirectory" class="button">Utwórz</button>
<button data-button="closeCreatePopup" class="button red">Zaniechaj</button>
</div>
</div>
</div>

<form data-panel="uploadFile" action="" method="post" class="popup items-horizontal hidden">
<div class="container">
<h6>Wgrywanie plików</h6>

<div class="button-container">
<label for="FM_IUpload" class="button black">Wybierz pliki</label>
</div>
<input data-control="uploadFile" id="FM_IUpload" multiple name="upload_files" type="file" class="hidden" />

<ul class="selected-files" data-control="selectedFiles"></ul>

<div class="button-container text-right">
<button data-button="uploadFile" type="submit" class="button">Dodaj</button>
<button data-button="closeUploadPopup" type="reset" class="button red">Zaniechaj</button>
</div>
</div>
</form>

<!-- panel z drzewem folderów -->
<aside data-panel="sidebar" class="lightgrey-back items-vertical">
<div class="breadcrumb items-horizontal">
@@ -60,7 +95,7 @@
</div>

<!-- panel tworzenia katalogu -->
<div data-panel="createDirectory"
<!-- <div data-panel="createDirectory"
class="breadcrumb items-horizontal hidden">
<i class="fa fa-folder icononly"></i>
<input data-control="entityName" type="text"
@@ -68,10 +103,10 @@
<button data-button="createDirectory" class="button simple">
<i class="fa fa-plus"></i>Utwórz
</button>
</div>
</div> -->

<!-- panel wgrywania pliku -->
<form data-panel="uploadFile" action="" method="post"
<!-- <form data-panel="uploadFile" action="" method="post"
class="breadcrumb items-horizontal hidden">
<label for="FM_IUpload" class="button simple">
<i class="fa fa-file"></i>Wybierz pliki
@@ -84,35 +119,11 @@
class="button simple">
<i class="fa fa-plus"></i>Dodaj wybrane
</button>
</form>
</form> -->
<!-- lista elementów -->
<div class="entity-panel fill-free p05">
<div data-panel="entityLoader" class="loader"></div>

<!--
<form data-panel="uploadFile" action="" method="post"
class="popup light items-horizontal hidden">

<div class="container">
<label for="FM_IUpload" class="button simple">
<i class="fa fa-file"></i>Wybierz pliki
</label>
<input
data-control="uploadFile" id="FM_IUpload" multiple
name="upload_files" type="file" class="hidden" />
<input
data-control="fileList" type="text" disabled
class="fill-free" value="Brak plików...">
<button
data-button="uploadFile" type="submit"
class="button simple">
<i class="fa fa-plus"></i>
Dodaj wybrane
</button>
</div>
</form>
-->

<ul data-panel="entities" class="entities-list">
</ul>
<div data-panel="details" class="details hidden items-vertical">

Loading…
Cancel
Save