Update text editor

res/include/script/dependencies/Modal.js

@@ -31,7 +31,7 @@ function Modal(parent, closeCallback, title, width, height) {
 
 	this.btnClose = document.createElement("button")
 	this.btnClose.classList = "modal_btn_close button_red"
-	this.btnClose.innerHTML = '<i class="icon small">close</i>'
+	this.btnClose.innerHTML = '<i class="icon">close</i>'
 	this.btnClose.addEventListener("click", e => { this.close() })
 
 	this.body = document.createElement("div")

res/include/script/textupload.js

@@ -1,58 +0,0 @@
-function uploadText() {
-	var text = document.getElementById("textarea").value;
-	var blob = new Blob([text], {type: "text/plain"});
-	var filename = prompt("What do you want to call this piece of textual art?\n\n"
-	+ "Please add your own file extension, if you want.",
-	"Pixeldrain_Text_File.txt");
-
-	if(filename === null){
-		return;
-	}
-
-	new UploadManager(apiEndpoint+"/file", null).addFile(
-		blob,
-		filename,
-		null,
-		function (id){
-			addUploadHistory(id);
-			setTimeout(window.location.href = "/u/" + id, 100);
-		},
-		function (response, error) { alert("File upload failed! The server told us this: " + response); }
-	)
-}
-
-// Upload the file when ctrl + s is pressed
-document.addEventListener("keydown", function(event) {
-	if ((event.ctrlKey || event.metaKey) && event.keyCode === 83) {
-		event.preventDefault();
-		uploadText();
-		return false;
-	}
-});
-
-/**
- * Prevent the Tab key from moving the cursor outside of the text area
- */
-document.getElementById("textarea").addEventListener(
-	'keydown',
-	function(e) {
-		if(e.keyCode === 9) { // tab was pressed
-			// get caret position/selection
-			var start = this.selectionStart;
-			var end = this.selectionEnd;
-
-			var target = e.target;
-			var value = target.value;
-
-			// set textarea value to: text before caret + tab + text after caret
-			target.value = value.substring(0, start) + "\t" + value.substring(end);
-
-			// put caret at right position again (add one for the tab)
-			this.selectionStart = this.selectionEnd = start + 1;
-
-			// prevent the focus lose
-			e.preventDefault();
-		}
-	},
-	false
-);

res/include/style/layout.css

@@ -34,7 +34,7 @@
 	font-family: 'Material Icons';
 	font-weight: normal;
 	font-style: normal;
-	font-size: 24px;  /* Preferred icon size */
+	font-size: 1.6em;
 	display: inline-block;
 	line-height: 1;
 	text-transform: none;
@@ -45,17 +45,11 @@
 	text-rendering: optimizeLegibility;
 	vertical-align: middle;
 }
-.icon.small {
-	font-size: 16px;
-}
-a > svg {
-	vertical-align: middle;
-}
+.icon.small { font-size: 1.2em; }
+a > svg { vertical-align: middle; }
 
 /* Page rendering configuration */
-html, body {
-	overflow-x: hidden;
-}
+html, body { overflow-x: hidden; }
 body{
 	background-color: #111111; /* Fallback */
 	background-color: var(--layer_2_color);
@@ -301,10 +295,9 @@ a:hover {
 table:not(.form) {
 	border-collapse: collapse;
 	width: 100%;
-	margin: 14px;
 }
 tr:not(.form)    {border-bottom: 1px var(--layer_2_color_border) solid;}
-tr > td, tr > th {padding: 0.3em;}
+tr > td, tr > th {padding: 0.4em;}
 @media(max-width: 30em) {
 	/* Forms will be stacked on small screens */
 	tr.form > td {
@@ -321,15 +314,6 @@ pre {
 	overflow-x: auto;
 }
 
-.big_button{
-	width: 40%;
-	min-width: 250px;
-	max-width: 400px;
-	margin: 10px !important;
-	border-radius: 5px;
-	font-size: 1.8em;
-}
-
 .file_button{
 	position: relative;
 	box-sizing: border-box;
@@ -413,9 +397,8 @@ select {
 	border: none;
 	margin: 3px;
 	background: linear-gradient(var(--input_color), var(--input_color_dark));
-	padding: .4em .5em .4em .5em;
+	padding: .3em .4em .3em .4em;
 	box-shadow: 2px 2px 6px -3px var(--shadow_color);
-	font-size: 0.9em;
 	line-height: 1em;
 	overflow: hidden;
 	text-decoration: none;
@@ -451,7 +434,7 @@ input[type="color"]:active,
 select:active{
 	background: linear-gradient(var(--input_color_dark), var(--input_color));
 	box-shadow: inset 4px 4px 8px var(--shadow_color);
-	padding: .6em .3em .2em .7em; /* Exactly .2em offset compared to the inactive padding to give a depth effect */
+	padding: .5em .2em .1em .6em; /* Exactly .2em offset compared to the inactive padding to give a depth effect */
 }
 .button_full_width      {width: calc(100% - 6px);}
 .button_highlight       {background: linear-gradient(var(--highlight_color),      var(--highlight_color_dark)) !important; color: var(--highlight_text_color) !important;}

res/include/style/viewer.css

@@ -44,15 +44,14 @@
 	white-space: nowrap;
 	text-overflow: ellipsis;
 }
+.file_viewer > .file_viewer_headerbar > .button_home > svg {
+	height: 1.6em;
+	width: 1.6em;
+	margin: -0.1em 0.2em -0.1em -0.1em;
+}
 .file_viewer > .file_viewer_headerbar > .button_home::after {
 	content: "pixeldrain";
 }
-.file_viewer > .file_viewer_headerbar > .button_home > svg {
-	height: 1.7em;
-	width: 1.7em;
-	margin: -0.25em;
-	margin-right: 0.2em;
-}
 @media (max-width: 600px) {
 	.file_viewer > .file_viewer_headerbar > .button_home::after {
 		content: "pd";