Skynet/misc_pterodactyl-panel
6
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Make the file manager look better

Browse source
This commit is contained in:
Dane Everitt 2019-02-09 17:07:11 -08:00
parent ac13f5dce4
commit caca6cff8a
No known key found for this signature in database
GPG key ID: EEA66103B3D71F53
7 changed files with 33 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
resources/assets/scripts/components/server/components/filemanager/FolderRow.ts
View file

@ -31,7 +31,7 @@ export default Vue.component('folder-row', {
<router-link class="row clickable"
:to="{ name: 'server-files', params: { path: getClickablePath(directory.name).replace(/^\\//, '') }}"
>
<div class="flex-none icon">
<div class="flex-none icon text-primary-700">
<icon name="folder"/>
</div>
<div class="flex-1">{{directory.name}}</div>

15
resources/assets/scripts/components/server/subpages/FileManager.ts
View file

@ -115,7 +115,7 @@ export default Vue.component('file-manager', {
},
template: `
<div class="animate fadein">
<div class="animated-fade-in">
<div class="filemanager-breadcrumbs">
/<span class="px-1">home</span><!--
-->/<router-link :to="{ name: 'server-files' }" class="px-1">container</router-link><!--
@ -124,7 +124,7 @@ export default Vue.component('file-manager', {
/<router-link :to="{ name: 'server-files', params: { path: crumb.path } }" class="px-1">{{crumb.directoryName}}</router-link>
</span>
<span v-else>
/<span class="px-1 font-semibold">{{crumb.directoryName}}</span>
/<span class="px-1 text-neutral-600 font-medium">{{crumb.directoryName}}</span>
</span>
</span>
</div>
@ -138,7 +138,7 @@ export default Vue.component('file-manager', {
<div v-else-if="!directories.length && !files.length">
<p class="text-neutral-500 text-sm text-center p-6 pb-4">This directory is empty.</p>
</div>
<div class="filemanager" v-else>
<div class="filemanager animated-fade-in" v-else>
<div class="header">
<div class="flex-none w-8"></div>
<div class="flex-1">Name</div>
@ -154,6 +154,15 @@ export default Vue.component('file-manager', {
</div>
</div>
</div>
<div class="flex mt-6" v-if="!loading && !errorMessage">
<div class="flex-1"></div>
<div class="mr-4">
<a href="#" class="block btn btn-secondary btn-sm">New Folder</a>
</div>
<div>
<a href="#" class="block btn btn-primary btn-sm">New File</a>
</div>
</div>
</div>
`,
});

12
resources/assets/styles/components/filemanager.css
View file

@ -1,6 +1,6 @@
.filemanager {
& .header {
@apply .flex .text-sm .pb-4 .font-bold .border-b .border-neutral-400 .mb-3;
@apply .flex .text-xs .text-neutral-600 .pb-4 .font-bold .border-b .border-neutral-200 .mb-3 .uppercase;
& > div {
@apply .pr-4;
@ -19,7 +19,7 @@
}
&.active-selection, &.clickable:hover {
@apply .bg-neutral-50 .text-neutral-900 .shadow;
@apply .bg-neutral-50 .text-neutral-900;
}
& > .icon {
@ -65,14 +65,14 @@
}
.filemanager-breadcrumbs {
@apply .px-4 .py-3 .mb-6 .rounded .bg-white .text-neutral-800 .shadow-md;
@apply .px-4 .py-3 .mb-6 .rounded .bg-white .text-neutral-400 .border .border-neutral-100 .shadow;
& a {
@apply .no-underline .text-primary-500;
transition: color 50ms ease-in;
@apply .no-underline .text-neutral-400;
transition: color 100ms linear;
&:hover {
@apply .text-primary-800;
@apply .text-primary-500;
}
}
}

18
resources/assets/styles/components/forms.css
View file

@ -77,6 +77,10 @@ input[type=number] {
}
}
a.btn {
@apply .no-underline;
}
.btn {
@apply .rounded .p-2;
transition: all 150ms linear;
@ -87,7 +91,7 @@ input[type=number] {
&.btn-primary {
@apply .bg-primary-500 .border-primary-600 .border .text-white;
&:hover:enabled {
&:hover:not(:disabled) {
@apply .bg-primary-600 .border-primary-800;
}
}
@ -95,7 +99,7 @@ input[type=number] {
&.btn-green {
@apply .bg-green-500 .border-green-600 .border .text-white;
&:hover:enabled {
&:hover:not(:disabled) {
@apply .bg-green-600 .border-green-800;
}
}
@ -105,19 +109,19 @@ input[type=number] {
@apply .bg-red-500 .border-red-600 .border .text-white;
}
&:hover:enabled {
&:hover:not(:disabled) {
@apply .bg-red-600 .border-red-800;
}
}
&.btn-secondary {
@apply .border .border-neutral-400 .text-neutral-600;
@apply .border .border-neutral-200 .text-neutral-400;
&:hover:enabled {
@apply .border-neutral-500 .text-neutral-800;
&:hover:not(:disabled) {
@apply .border-neutral-500 .text-neutral-700;
}
&.btn-red:hover:enabled {
&.btn-red:hover:not(:disabled) {
@apply .bg-red-600 .border-red-800 .text-white;
}
}

2
resources/assets/styles/components/miscellaneous.css
View file

@ -46,7 +46,7 @@ code {
* Styling for elements that contain the core page content.
*/
.content-box {
@apply .bg-white .p-6 .rounded .shadow-md;
@apply .bg-white .p-6 .rounded .shadow .border .border-neutral-100;
}
/**

2
resources/assets/styles/components/navigation.css
View file

@ -73,7 +73,7 @@
@apply .text-neutral-800;
}
&.router-link-exact-active {
&.router-link-exact-active, &.router-link-active {
@apply .border-primary-500 .cursor-default;
}
}

2
resources/themes/pterodactyl/templates/base/core.blade.php
View file

@ -6,7 +6,7 @@
@section('below-container')
<div class="flex-grow"></div>
<div class="w-full m-auto mt-0 container">
<div class="w-full m-auto mt-0 mb-6 container">
<p class="text-center sm:text-right text-neutral-300 text-xs">
{!! trans('strings.copyright', ['year' => date('Y')]) !!}
</p>