File manager mockup

2018-07-09 23:19:16 +02:00
parent 9c7b79403e
commit 5d30b60f13
10 changed files with 138 additions and 85 deletions
--- a/res/static/res/script/listmaker.js
+++ b/res/static/res/script/listmaker.js
@@ -12,9 +12,9 @@ function createList(){
 	}

 	var url = "/api/list";
-	
+
 	var postData = {};
-	
+
 	var title = prompt(
 		"You are creating a list containing " + listfiles.length + " files.\n"
 		+ "What do you want to call it?", "My New Album"
@@ -29,13 +29,13 @@ function createList(){
 		"description": "yo",
 		"files": new Array()
 	};
-	
+
 	for (var i = 0; i < listfiles.length; i++) {
 		postData.files.push({
 			"id": listfiles[i]
 		});
 	}
-	
+
 	$.ajax({
 		url: url,
 		contentType: "application/json",
@@ -53,9 +53,9 @@ function listCreated(response){
 			+ "Your List URL: <br/>"
 			+ "<a href=\"/l/" + response.id + "\" target=\"_blank\" style=\"font-weight: bold;\">"+window.location.hostname+"/l/" + response.id + "</a>"
 			+ "</div>";
-		
+
 		$('#uploads_queue').prepend(
-			$(resultString).hide().fadeIn('slow')
+			$(resultString).hide().fadeIn('slow').css("display", "")
 		);
 		window.open('/l/'+response.id, '_blank');
 	}else{
@@ -63,9 +63,9 @@ function listCreated(response){
 			+ "The server responded with this: <br/>"
 			+ response.type + ": " + response.value
 			+ "</div>";
-		
+
 		$('#uploads_queue').prepend(
-			$(resultString).hide().fadeIn('slow')
+			$(resultString).hide().fadeIn('slow').css("display", "")
 		);
 	}
 }
@@ -74,9 +74,9 @@ function listCreated(response){
 //	var fileDesc = $("#txtListDesc").val();
 //
 //	addToList(fileId, fileDesc);
-//	
+//
 //	divItems.prepend("ID: " + fileId + "<br>Description:<br>" + fileDesc + "<br><br>");
-//	
+//
 //	$("#txtListId").val("");
 //	$("#txtListDesc").val("");
-//});
+//});
--- a/res/static/res/style/layout.css
+++ b/res/static/res/style/layout.css
@@ -133,14 +133,8 @@ hr{
 ::-webkit-scrollbar-thumb {background-color: #555;}
 ::-webkit-scrollbar-corner{background: transparent;}

-a{
-	color: var(--highlight_color);
-	text-decoration: none;
-}
-a:hover{
-	text-decoration: underline;
-	color: var(--highlight_color);
-}
+a       {color: var(--highlight_color); text-decoration: none;}
+a:hover {color: var(--highlight_color); text-decoration: underline;}

 .form{
 	margin-left: auto;
@@ -243,10 +237,13 @@ pre{

 /* BUTTONS */
 button,
+.button,
 input[type="submit"],
 input[type="button"],
 input[type="color"],
 select{
+	display: inline-block;
+	box-sizing: border-box;
 	border-radius: 4px;
 	border: none;
 	margin: 2px;
@@ -254,24 +251,33 @@ select{
 	padding: 6px 10px 6px 10px;
 	box-shadow: 2px 2px 8px #000000;
 	font-weight: bold;
+	font-size: 0.85em;
+	line-height: 1;
+	text-decoration: none;
 	color: #FFFFFF;
 	outline: 0;
 	vertical-align: middle;
 	cursor: pointer;
+
 }
 button:hover,
+.button:hover,
 input[type="submit"]:hover,
 input[type="button"]:hover,
 input[type="color"]:hover,
 select:hover,
 button:focus,
+.button:focus,
 input[type="submit"]:focus,
 input[type="button"]:focus,
 input[type="color"]:focus,
 select:focus{
+	color: #FFFFFF;
+	text-decoration: none;
 	box-shadow: var(--highlight_border), 2px 2px 8px #000000;
 }
 button:active,
+.button:active,
 input[type="submit"]:active,
 input[type="button"]:active,
 input[type="color"]:active,
@@ -291,6 +297,7 @@ option{background-color: #404040; color: #FFFFFF;}

 /* TEXT FIELDS */
 textarea,
+.groove,
 input[type="text"],
 input[type="password"],
 input[type="email"],
--- a/res/template/account/file_manager.html
+++ b/res/template/account/file_manager.html
@@ -3,20 +3,63 @@
 	<head>
 		{{template "meta_tags" "File Manager"}}
 		<script type="text/javascript">var apiEndpoint = '{{.APIEndpoint}}';</script>
+		<style>
+			.file_manager {
+				position: absolute;
+				padding: 0px 8px 0px 8px;
+				background-color: #252525;
+				box-shadow: #000000 8px 8px 50px 5px;
+				left:100px;
+				top:100px;
+				right: 100px;
+				min-width: 600px;
+				max-width: 1400px;
+			}
+			.file_manager > .nav_bar {
+				display: flex;
+				flex-direction: row
+			}
+			.file_manager > .nav_bar :first-child   {margin-left:  5px;}
+			.file_manager > .nav_bar :last-child    {margin-right: 5px;}
+			.file_manager > .nav_bar > button       {flex: 0;}
+			.file_manager > .nav_bar > .breadcrumbs {flex: 1; margin: 1px 10px; min-width: 100px;}
+			.file_manager > .status_bar             {text-align: left;}
+
+			.file_button       {height: 40px !important;}
+			.file_button > img {max-height: 40px !important;}
+		</style>
 	</head>

 	<body>
 		{{template "menu" .}}
-
 		<br/>
-		{{range .Other.Files}}
-		<a class="file_button" href="/u/{{.ID}}" target="_blank">
-			<img src="{{$.APIEndpoint}}/file/{{.ID}}/thumbnail" alt="{{.FileName}}" />
-			<span style="color: var(--highlight_color);">{{.FileName}}</span>
-			<br/>
-			{{.DateUpload}}
-		</a>
-		{{end}}
+		<div class="file_manager">
+			<div class="nav_bar highlight_light border_top border_bottom">
+				<button>⇐</button>
+				<button>⇑</button>
+				<button style="margin-right: 16px;">⇒</button>
+				<button>🏠</button>
+				<input class="breadcrumbs" type="text" value="/{{.Username}}/Documents"/>
+				<button>↻</button>
+				<button>🔎</button>
+				<button style="margin-left: 16px;">_</button>
+				<button>☐</button>
+				<button class="button_red">✕</button>
+			</div>
+			<div class="directory_area">
+				{{$files := .PixelAPI.UserFiles 0 20}}
+				{{range $files.Files}}
+				<a class="file_button" href="/u/{{.ID}}" target="_blank">
+					<img src="{{$.APIEndpoint}}/file/{{.ID}}/thumbnail" alt="{{.FileName}}" />
+					{{.FileName}}
+				</a>
+				{{end}}
+			</div>
+			<div class="status_bar highlight_light border_top border_bottom">
+				13 items (5 directories, 7 files). Total size: 1.23 GB
+			</div>
+		</div>
+

 		{{template "analytics"}}
 	</body>
--- a/res/template/file_viewer.html
+++ b/res/template/file_viewer.html
@@ -13,13 +13,13 @@
 		<link rel="shortcut icon" href="/res/img/tray32.png"/>
 		<link rel="icon" sizes="180x180" href="/res/img/pixeldrain.png"/>
 		<link rel="icon" sizes="256x256" href="/res/img/pixeldrain_big.png"/>
-		
+
 		<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css"/>
-		
+
 		<!-- <link rel="alternate" type="application/json+oembed" th:href="*{oEmbedHref}" th:title="*{ogTitle}" /> OEmbed will return soon -->
-		
+
 		{{template "bgpattern"}}
-		
+
 		<meta name="theme-color"        content="#202020"/>
 		<meta name="twitter:image"      content="{{.OGData.Image}}" />
 		<meta property="og:title"       content="{{.OGData.Title}}" />
@@ -49,12 +49,10 @@

 					<!--Views: <span id="views" th:text="${data.views}">0</span>--><br/>

-					<form action="/" target="_self">
-						<button id="btnHome" class="toolbar_button button_full_width">
-							<img src="/res/img/pixeldrain_small.png" alt="Back to the Home page"/>
-							<span>Home</span>
-						</button>
-					</form>
+					<a href="/" id="btnHome" class="button toolbar_button button_full_width">
+						<img src="/res/img/pixeldrain_small.png" alt="Back to the Home page"/>
+						<span>Home</span>
+					</a>

 					<button id="btnDownload" class="toolbar_button button_full_width" onClick="Toolbar.download();">
 						<img src="/res/img/floppy_small.png" alt="Download this file"/>
@@ -77,8 +75,8 @@
 					</button>

 					<iframe id='sponsors' data-aa='73974'
-						src='//ad.a-ads.com/73974?size=120x600&amp;background_color=000000&amp;text_color=eeeeee&amp;title_color=eeeeee&amp;link_color=9fcf6c&amp;link_hover_color=d2ffa1&amp;title_hover_color=d2ffa1' 
-						scrolling='no' allowtransparency='true' seamless="seamless">		
+						src='//ad.a-ads.com/73974?size=120x600&amp;background_color=000000&amp;text_color=eeeeee&amp;title_color=eeeeee&amp;link_color=9fcf6c&amp;link_hover_color=d2ffa1&amp;title_hover_color=d2ffa1'
+						scrolling='no' allowtransparency='true' seamless="seamless">
 					</iframe>

 					<iframe id="frmDownload">
@@ -87,7 +85,7 @@
 				</div>
 			</div>
 		</div>
-		
+
 		<div id="sharebar" class="sidebar">
 			Share on:<br/>
 			<button class="sharebar-button button_full_width" onclick="window.open('https://www.reddit.com/submit?url=' + window.location.href);">
@@ -125,20 +123,20 @@
 		</div>

 		<div id="info-popup" class="full-popup">
-			<img alt="Close" src="/res/img/cross.png" 
+			<img alt="Close" src="/res/img/cross.png"
 			     style="position: absolute; top: 5px; right: 5px; width: 40px; height: 40px; cursor: pointer;"
 			     onclick="DetailsWindow.toggle();"/>
 			Click the help button again to close this overlay.<br/>
-			
+
 			<h3>File Info</h3>
 			<span id="info-fileDetails"></span>
 			<span id="info-about">{{template "file_info_popup"}}</span>
 		</div>
-		
+
 		<div id="filepreview">
 			Loading...
 		</div>
-		
+
 		<script src="/res/script/jquery.js"></script>
 		<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
 		<script src="/res/script/Keyboard.js"></script>
@@ -147,7 +145,7 @@
 		<script src="/res/script/DetailsWindow.js"></script>
 		<script src="/res/script/Viewer.js"></script>
 		<script src="/res/script/ListNavigator.js"></script>
-		
+
 		<script>
 			// This info gets filled in on the server side to prevent having to make an API call right after the page loads.
 			// Just to slice another few milliseconds from the load time :)
@@ -157,4 +155,4 @@
 		{{template "analytics"}}
 	</body>
 </html>
-{{end}}
+{{end}}
--- a/res/template/home.html
+++ b/res/template/home.html
@@ -36,7 +36,7 @@
 				The Sia integration is still very experimental and could
 				fail, resulting in data loss. Do not upload files to this server
 				that you cannot afford to lose. Use the stable main server instead:
-				<a href="https://pixeldrain.com">https://pixeldrain.com</a>.
+				<a class="button" href="https://pixeldrain.com">https://pixeldrain.com</a>.
 			</p>
 			<p>
 				But don't let all that stop you from trying the new Pixeldrain!
--- a/res/template/paste.html
+++ b/res/template/paste.html
@@ -30,11 +30,10 @@
 						<img src="/res/img/upload_small.png" alt="Start Upload"/>
 						<span>Upload</span>
 					</button>
-					<form action="/">
-						<button class="toolbar_button button_full_width">
+						<a href="/" class="button toolbar_button button_full_width">
 							<img src="/res/img/pixeldrain_small.png" alt="Visit the home page" style="width:22px; height: 22px;"/>
 							<span>Home</span>
-						</button>
+						</a>
 					</form>
 					<iframe id='sponsors' data-aa='73974'
 						src='//ad.a-ads.com/73974?size=120x600&amp;background_color=000000&amp;text_color=eeeeee&amp;title_color=eeeeee&amp;link_color=9fcf6c&amp;link_hover_color=d2ffa1&amp;title_hover_color=d2ffa1'