Skip to content

Commit c807159

Browse files
myaaghubimyaaghubi
committed
Some styling & app.js added
1 parent 9e4fa09 commit c807159

File tree

5 files changed

+336
-1
lines changed

5 files changed

+336
-1
lines changed

‎phpboard/theme/assets/css/style.css

+98
Original file line numberDiff line numberDiff line change
@@ -192,4 +192,102 @@ img.dir {
192192

193193
button.btn-dirtozip {
194194
width: 101px;
195+
}
196+
197+
#filedrop {
198+
display: block;
199+
}
200+
201+
/* During drag */
202+
#filedrop {
203+
margin-bottom: 10px;
204+
width: 100%;
205+
height: 50px;
206+
border: 1px dashed #cfcfcf;
207+
border-radius: 4px;
208+
line-height: 50px;
209+
font-weight: bold;
210+
color: #cfcfcf;
211+
text-align: center;
212+
display: none;
213+
user-select: none;
214+
}
215+
216+
.breadcrumb {
217+
margin-bottom: 5px;
218+
}
219+
220+
.file-upload ul {
221+
list-style: none;
222+
height: 23px;
223+
padding-left: 0px;
224+
margin-bottom: 5px;
225+
word-wrap: inherit;
226+
overflow: hidden;
227+
}
228+
229+
.file-upload ul > li {
230+
display: inline-block;
231+
padding-right:0px;
232+
font-size: 12px;
233+
user-select: none;
234+
235+
}
236+
237+
.file-upload ul > li > input[name='newfileName'] {
238+
border:1px solid #cfcfcf;
239+
padding: 2px 3px 1px 3px;
240+
border-radius: 3px;
241+
width: calc(100% - 92px);
242+
}
243+
244+
.file-upload ul > li > button {
245+
padding: 1px 10px 0 10px;
246+
}
247+
248+
.file-upload ul > li > input[type=button] {
249+
margin-top:-1px;
250+
user-select: none;
251+
}
252+
253+
.file-upload ul > li:not(:last-child) {
254+
cursor: pointer;
255+
border:1px solid #cfcfcf;
256+
padding: 2px 5px 1px 5px;
257+
border-radius: 3px;
258+
}
259+
260+
.file-upload ul > li.active:not(:last-child) {
261+
background-color:#337ab7;
262+
border-color:#122b40;
263+
color:#fff;
264+
}
265+
266+
.file-upload ul > li:last-child {
267+
width: calc(100% - 241px);
268+
}
269+
270+
.m-hidden-xs {
271+
272+
}
273+
@media (max-width: 576px) {
274+
.file-upload ul > li:last-child {
275+
width: calc(100% - 186px);
276+
}
277+
278+
.file-upload ul > li > input[name='newfileName'] {
279+
width: calc(100% - 38px);
280+
}
281+
282+
.m-hidden-xs {
283+
display: none!important;
284+
}
285+
}
286+
287+
288+
.file-upload ul > li img {
289+
width:10px;
290+
margin-right:3px;
291+
opacity:0.7;
292+
vertical-align: baseline;
195293
}

‎phpboard/theme/assets/images/folder.png

100755100644
368 Bytes
Loading

‎phpboard/theme/assets/images/plusblack.png

469 Bytes
Loading

‎phpboard/theme/assets/js/app.js

+237
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,237 @@
1+
var theApp = angular.module('theApp', []);
2+
theApp.controller('filesCtl', function($scope, $http, $element, $timeout, $window) {
3+
$scope.downloadFile = function(event, id) {
4+
var trItem = $element.find('#tr-' + id);
5+
var path = trItem.attr("data-href");
6+
var file = trItem.attr("data-file");
7+
var url = window.location.href;
8+
url += (url.search('/?') > 0 ? '&' : '?');
9+
10+
$window.open(url + "act=download&targetf=" + file, '_blank');
11+
$window.focus();
12+
}
13+
$scope.zipDir = function(event, id) {
14+
var zipBtn = angular.element(event.target);
15+
zipBtn.html('<span class="spinner-grow spinner-grow-sm" style="margin:0 5px 0 -2px;" role="status" aria-hidden="true"></span> Zipping ...');
16+
angular.element(".btn-dirtozip").attr("disabled", true);
17+
18+
var trItem = $element.find('#tr-' + id);
19+
var path = trItem.attr("data-href");
20+
21+
$http({
22+
method: 'POST',
23+
url: "index.php",
24+
headers: {
25+
'Content-Type': 'application/x-www-form-urlencoded'
26+
},
27+
data: {
28+
act: 'zip',
29+
path: path
30+
}
31+
}).then(function successCallback(response) {
32+
if (response.data.status === true) {
33+
zipBtn.html('Create Zip File');
34+
angular.element(".btn-dirtozip").attr("disabled", false);
35+
36+
$timeout(function() {
37+
$window.location.reload();
38+
}, 250);
39+
} else {
40+
trItem.addClass("dangerHighlight");
41+
$timeout(function() {
42+
trItem.addClass("highlightOut");
43+
}, 1000);
44+
}
45+
46+
}, function errorCallback(response) {});
47+
}
48+
49+
$scope.deleteFileDir = function(event, id) {
50+
var trItem = $element.find('#tr-' + id);
51+
var path = trItem.attr("data-href");
52+
trItem.removeClass();
53+
$http({
54+
method: 'DELETE',
55+
url: "index.php",
56+
headers: {
57+
'Content-Type': 'application/x-www-form-urlencoded'
58+
},
59+
data: {
60+
act: 'del',
61+
path: path
62+
}
63+
}).then(function successCallback(response) {
64+
if (response.data.status === true) {
65+
trItem.hide(250);
66+
$timeout(function() {
67+
trItem.remove();
68+
}, 250);
69+
} else {
70+
trItem.addClass("dangerHighlight");
71+
$timeout(function() {
72+
trItem.addClass("highlightOut");
73+
}, 1000);
74+
}
75+
76+
}, function errorCallback(response) {});
77+
}
78+
79+
});
80+
81+
82+
var addNewFileStatus = true; // false if addNewFolder is active
83+
84+
theApp.controller('addNewCtl', function($scope, $http, $element, $timeout, $window) {
85+
$scope.showUploadBox = function(event, id) {
86+
var btn = angular.element(event.target);
87+
btn.addClass("active");
88+
var uploadBox = angular.element('#filedrop');
89+
if (uploadBox.is(':visible')) {
90+
btn.removeClass("active");
91+
uploadBox.hide(250);
92+
} else {
93+
btn.addClass("active");
94+
uploadBox.show(250);
95+
}
96+
}
97+
$scope.addNewFile = function(event, id) {
98+
var btn = angular.element(event.target);
99+
100+
var input = $element.find('#newfileName');
101+
if (btn.hasClass('active')) {
102+
btn.parent().find("li").not(':first').removeClass();
103+
input.parent().find('input').hide(250);
104+
} else {
105+
btn.parent().find("li").not(':first').removeClass();
106+
btn.addClass("active");
107+
input.parent().find('input').show(250);
108+
}
109+
input.attr('placeholder', 'File Name');
110+
111+
addNewFileStatus = true;
112+
}
113+
$scope.addNewFolder = function(event, id) {
114+
var btn = angular.element(event.target);
115+
116+
var input = $element.find('#newfileName');
117+
if (btn.hasClass('active')) {
118+
btn.parent().find("li").not(':first').removeClass();
119+
input.parent().find('input').hide(250);
120+
} else {
121+
btn.parent().find("li").not(':first').removeClass();
122+
btn.addClass("active");
123+
input.parent().find('input').show(250);
124+
}
125+
input.attr('placeholder', 'Folder Name');
126+
127+
addNewFileStatus = false;
128+
}
129+
$scope.addNewFileFolder = function(event, id) {
130+
var input = $element.find('#newfileName');
131+
$scope.cdata = {};
132+
$scope.cdata.action = 'addFile';
133+
if (!addNewFileStatus) {
134+
$scope.cdata.action = 'addFolder';
135+
}
136+
137+
$scope.cdata.name = input.val();
138+
if ($scope.cdata.name.length <= 0) {
139+
input.addClass("dangerHighlight");
140+
$timeout(function() {
141+
input.addClass("highlightOut");
142+
}, 1000);
143+
} else {
144+
$http({
145+
method: 'POST',
146+
url: "index.php",
147+
headers: {
148+
'Content-Type': 'application/x-www-form-urlencoded'
149+
},
150+
data: {
151+
act: $scope.cdata.action,
152+
dir: directory,
153+
name: $scope.cdata.name
154+
}
155+
}).then(function successCallback(response) {
156+
console.log(response.data);
157+
if (response.data.status === true) {
158+
$window.location.reload();
159+
} else {
160+
input.addClass("dangerHighlight");
161+
$timeout(function() {
162+
input.addClass("highlightOut");
163+
}, 1000);
164+
}
165+
}, function errorCallback(response) {
166+
input.addClass("dangerHighlight");
167+
$timeout(function() {
168+
input.addClass("highlightOut");
169+
}, 1000);
170+
});
171+
}
172+
}
173+
$scope.addNewFileFolderHide = function(event, id) {
174+
var btn = angular.element(event.target);
175+
btn.parent().parent().find("li").not(':first').removeClass();
176+
btn.parent().find("input").hide(250);
177+
}
178+
179+
});
180+
181+
182+
theApp.directive('upload', ['$http', '$window', function($http, $window) {
183+
return {
184+
restrict: 'E',
185+
replace: true,
186+
scope: {},
187+
require: '?ngModel',
188+
template: '<div class="asset-upload" id="filedrop">Drag here to upload</div>',
189+
link: function(scope, element, attrs, ngModel) {
190+
var upload = function(files) {
191+
var data = new FormData();
192+
var index = 0;
193+
angular.forEach(files, function(value) {
194+
data.append("files" + (index++), value);
195+
});
196+
data.append("upload", 1);
197+
data.append("path", directory);
198+
199+
$http({
200+
method: 'POST',
201+
url: attrs.to,
202+
data: data,
203+
withCredentials: true,
204+
headers: {
205+
'Content-Type': undefined
206+
},
207+
transformRequest: angular.identity
208+
}).then(function successCallback(response) {
209+
if (response.data.status === true) {
210+
$window.location.reload();
211+
} else {}
212+
}, function errorCallback(response) {
213+
214+
});
215+
};
216+
// Code goes here
217+
element.on('dragover', function(e) {
218+
e.preventDefault();
219+
e.stopPropagation();
220+
});
221+
element.on('dragenter', function(e) {
222+
e.preventDefault();
223+
e.stopPropagation();
224+
});
225+
element.on('drop', function(e) {
226+
e.preventDefault();
227+
e.stopPropagation();
228+
if (e.originalEvent.dataTransfer) {
229+
if (e.originalEvent.dataTransfer.files.length > 0) {
230+
upload(e.originalEvent.dataTransfer.files);
231+
}
232+
}
233+
return false;
234+
});
235+
}
236+
};
237+
}]);

‎phpboard/theme/footer.php

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<!-- Footer -->
22
<footer class="py-5 bg-dark">
33
<div class="container">
4-
<p class="m-0 text-center text-white">Copyright &copy; <?php print date("Y"); ?>, <a href="/myaghobi/xampp-board">XAMPP-Board</a>.</p>
4+
<p class="m-0 text-center text-white">Copyright &copy; <?php print date("Y"); ?>, <a href="/myaghobi/php-board">PHP-Board</a>.</p>
55
</div>
66
<!-- /.container -->
77
</footer>

0 commit comments

Comments
 (0)