Merge pull request #137 from misterunknown/v2.6.2

V2.6.2

.dockerignore

@@ -0,0 +1,4 @@
+*
+!compiler.php
+!src
+!docker/docker-startup.sh

Dockerfile

@@ -24,9 +24,15 @@ RUN echo "Set disable_coredump false" > /etc/sudo.conf
 # prepare files
 RUN rm -rf /var/www/html && \
     mkdir -p /usr/local/share/webapps/ifm && \
-    ln -s /var/www /usr/local/share/webapps/ifm/www
-COPY ifm.php /usr/local/share/webapps/ifm/index.php
-COPY docker-startup.sh /usr/local/bin
+    chown -R 33:33 /var/www && \
+    ln -s /var/www /usr/local/share/webapps/ifm/www && \
+    mkdir -p /usr/src/ifm
+COPY / /usr/src/ifm/
+RUN /usr/src/ifm/compiler.php --languages=all && \
+    cp /usr/src/ifm/dist/ifm.php /usr/local/share/webapps/ifm/index.php && \
+    rm -rf /usr/src/ifm
+
+COPY docker/docker-startup.sh /usr/local/bin
 
 # start php server
 WORKDIR /usr/local/share/webapps/ifm

compiler.php

@@ -9,19 +9,12 @@
 chdir(realpath(dirname(__FILE__)));
 
 // output files and common attrs
-define( "IFM_CDN",           false );
-define( "IFM_VERSION",       "<a href='https://github.com/misterunknown/ifm/tree/cryol-2.6.1' target=_blank>v2.6.1</a>" );
+define( "IFM_VERSION",       "v2.6.2" );
 define( "IFM_RELEASE_DIR",   "dist/");
 define( "IFM_STANDALONE",    "ifm.php" );
 define( "IFM_STANDALONE_GZ", "ifm.min.php" );
 define( "IFM_LIB",           "libifm.php" );
 
-if( IFM_CDN ){
-	$IFM_ASSETS = "src/assets.cdn.part";
-} else {
-	$IFM_ASSETS = "src/assets.part";
-}
-
 // php source files
 $IFM_SRC_PHP = array(
 	0 => "src/main.php",
@@ -30,13 +23,30 @@ $IFM_SRC_PHP = array(
 );
 
 // get options
-$options = getopt( null, array( "language::" ) );
+$options = getopt(null, array("language::", "languages::", "lang::", "cdn"));
+
+// build CDN version?
+if (isset($options['cdn']))
+	define("IFM_CDN", true);
+else
+	define("IFM_CDN", false);
 
 // process languages
-$vars['languages'] = isset( $options['language'] ) ? explode( ',', $options['language'] ) : array( "en", "ru" );
-$vars['defaultlanguage'] = $vars['languages'][0];
+$langs = [];
+foreach ($options as $key => $value)
+	if (substr($key, 0, 4) == "lang")
+		$langs = array_merge($langs, explode(",", $value));
+$langs = array_unique($langs);
+$vars['default_lang'] = ($langs[0] == "all") ? "en" : $langs[0];
+
+if (in_array("all", $langs))
+	$langs = array_map(
+		function($i) { return str_replace("src/i18n/", "", str_replace(".json", "", $i)); },
+		glob("src/i18n/*.json")
+	);
+
 $vars['languageincludes'] = "";
-foreach( $vars['languages'] as $l ) {
+foreach ($langs as $l)
 	if (file_exists("src/i18n/".$l.".json")) 
 		$vars['languageincludes'] .=
 			'$i18n["'.$l.'"] = <<<\'f00bar\'' . "\n"
@@ -45,11 +55,8 @@ foreach( $vars['languages'] as $l ) {
 			. '$i18n["'.$l.'"] = json_decode( $i18n["'.$l.'"], true );' . "\n" ;
 	else
 		print "WARNING: Language file src/i18n/".$l.".json not found.\n";
-}
 
-/**
- * Concat PHP Files
- */
+// Concat PHP Files
 $compiled = array( "<?php" );
 foreach( $IFM_SRC_PHP as $phpfile ) {
 	$lines = file( $phpfile );
@@ -58,18 +65,19 @@ foreach( $IFM_SRC_PHP as $phpfile ) {
 }
 $compiled = join( $compiled );
 
-$compiled = str_replace( "IFM_ASSETS", file_get_contents( $IFM_ASSETS ), $compiled );
-/**
- * Process file includes
- */
+if( IFM_CDN )
+	$IFM_ASSETS = "src/assets.cdn.part";
+else
+	$IFM_ASSETS = "src/assets.part";
+$compiled = str_replace( "IFM_ASSETS", file_get_contents("src/assets".(IFM_CDN?".cdn":"").".part"), $compiled );
+
+// Process file includes
 $includes = NULL;
 preg_match_all( "/\@\@\@file:([^\@]+)\@\@\@/", $compiled, $includes, PREG_SET_ORDER );
 foreach( $includes as $file )
 	$compiled = str_replace( $file[0], file_get_contents( $file[1] ), $compiled );
 
-/**
- * Process ace includes
- */
+// Process ace includes
 $includes = NULL;
 $vars['ace_includes'] = "";
 preg_match_all( "/\@\@\@acedir:([^\@]+)\@\@\@/", $compiled, $includes, PREG_SET_ORDER );
@@ -84,9 +92,7 @@ foreach( $includes as $dir ) {
 	$compiled = str_replace( $dir[0], $dircontent, $compiled );
 }
 
-/**
- * Process variable includes
- */
+// Process variable includes
 $includes = NULL;
 preg_match_all( "/\@\@\@vars:([^\@]+)\@\@\@/", $compiled, $includes, PREG_SET_ORDER );
 foreach( $includes as $var )
@@ -99,8 +105,8 @@ if (!is_dir(IFM_RELEASE_DIR)){
 }
 
 // build standalone ifm
-file_put_contents( IFM_RELEASE_DIR . (IFM_CDN ? 'cdn.' : 'simple.') . IFM_STANDALONE, $compiled );
-file_put_contents( IFM_RELEASE_DIR . (IFM_CDN ? 'cdn.' : 'simple.') . IFM_STANDALONE, '
+file_put_contents( IFM_RELEASE_DIR . (IFM_CDN ? 'cdn.' : '') . IFM_STANDALONE, $compiled );
+file_put_contents( IFM_RELEASE_DIR . (IFM_CDN ? 'cdn.' : '') . IFM_STANDALONE, '
 /**
  * start IFM
  */
@@ -110,9 +116,9 @@ $ifm->run();
 
 // build compressed ifm
 file_put_contents(
-	IFM_RELEASE_DIR . (IFM_CDN ? 'cdn.' : 'simple.') . IFM_STANDALONE_GZ,
+	IFM_RELEASE_DIR . (IFM_CDN ? 'cdn.' : '') . IFM_STANDALONE_GZ,
 	'<?php eval( gzdecode( file_get_contents( __FILE__, false, null, 85 ) ) ); exit(0); ?>'
-	. gzencode( file_get_contents( IFM_RELEASE_DIR . (IFM_CDN ? 'cdn.' : 'simple.') .IFM_STANDALONE, false, null, 5 ) )
+	. gzencode( file_get_contents( IFM_RELEASE_DIR . (IFM_CDN ? 'cdn.' : '') .IFM_STANDALONE, false, null, 5 ) )
 );
 // build lib
-file_put_contents( IFM_RELEASE_DIR . (IFM_CDN ? 'cdn.' : 'simple.') . IFM_LIB, $compiled );
+file_put_contents( IFM_RELEASE_DIR . (IFM_CDN ? 'cdn.' : '') . IFM_LIB, $compiled );

docker/.dockerignore

@@ -1,3 +0,0 @@
-*
-!ifm.php
-!docker-startup.sh

src/i18n/ru.json

@@ -101,7 +101,7 @@
     "toggle_nav": "Переключить вид",
     "upload": "Загрузить",
     "upload_drop": "Перетащите файлы для загрузки",
-    "upload_file": "Загрузить файла",
+    "upload_file": "Загрузить файл",
     "upload_remote": "Удаленная загрузка",
     "upload_remote_url": "Удаленная загрузка по URL",
     "username": "Имя пользователя",

src/ifm.js

@@ -1390,18 +1390,19 @@ function IFM(params) {
 		if( ! document.querySelector( "footer" ) ) {
 			var newFooter = self.getNodeFromString( Mustache.render( self.templates.footer, { i18n: self.i18n } ) );
 			newFooter.addEventListener( 'click', function( e ) {
-				if( e.target.name == 'showAll' ) {
-					if( newFooter.style.maxHeight == '80%' ) {
-						newFooter.style.maxHeight = '6em';
-						newFooter.style.overflow = 'hidden';
+				if( e.target.name == 'showAll' || e.target.parentElement.name == "showAll" ) {
+					wq = newFooter.children.wq_container.children[0].children.waitqueue;
+					if( wq.style.maxHeight == '70vh' ) {
+						wq.style.maxHeight = '6rem';
+						wq.style.overflow = 'hidden';
 					} else {
-						newFooter.style.maxHeight = '80%';
-						newFooter.style.overflow = 'scroll';
+						wq.style.maxHeight = '70vh';
+						wq.style.overflow = 'auto';
 					}
 				}
 			});
 			document.body.appendChild( newFooter );
-			document.body.style.paddingBottom = '6em';
+			document.body.style.paddingBottom = '9rem';
 		}
 		task.id = "wq-"+task.id;
 		task.type = task.type || "info";

src/ifmarchive.php

@@ -31,17 +31,19 @@ class IFMArchive {
 		while (false !== $f = readdir($handle)) {
 			if ($f != '.' && $f != '..') {
 				$filePath = $folder . '/' . $f;
-				if (file_exists($filePath) && is_readable($filePath))
-					if (is_file($filePath))
+				if (file_exists($filePath) && is_readable($filePath)) {
+					if (is_file($filePath)) {
 						if (!is_callable($exclude_callback) || $exclude_callback($f))
 							$archive->addFile( $filePath, substr( $filePath, $offset ) );
-					elseif (is_dir($filePath))
+					} elseif (is_dir($filePath)) {
 						if (is_callable($exclude_callback))
 							self::addFolder($archive, $filePath, $offset, $exclude_callback);
 						else
 							self::addFolder($archive, $filePath, $offset);
 					}
 				}
+			}
+		}
 		closedir($handle);
 	}
 
@@ -55,8 +57,6 @@ class IFMArchive {
 		if (!is_array($src))
 			$src = array($src);
 
-		file_put_contents("debug.ifm.log", var_export(is_callable($exclude_callback), true)."\n");
-
 		foreach ($src as $s)
 			if (is_dir($s))
 				if (is_callable($exclude_callback))

src/main.php

@@ -24,7 +24,7 @@ class IFM {
 		"timezone" => "",
 		"forbiddenChars" => array(),
 		"dateLocale" => "en-US",
-		"language" => "@@@vars:defaultlanguage@@@",
+		"language" => "@@@vars:default_lang@@@",
 		"selfoverwrite" => 0,
 
 		// api controls
@@ -62,7 +62,7 @@ class IFM {
 	private $config = array();
 	private $templates = array();
 	private $i18n = array();
-	public $mode = "";
+	public $mode = "standalone";
 
 	public function __construct( $config=array() ) {
 
@@ -218,7 +218,7 @@ IFM_ASSETS
 				<title>IFM - improved file manager</title>
 				<meta charset="utf-8">
 				<meta http-equiv="X-UA-Compatible" content="IE=edge">
-				<meta name="viewport" content="width=device-width, initial-scale=1">';
+				<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, shrink-to-fit=no">';
 		$this->getCSS();
 		print '</head><body>';
 	}
@@ -972,7 +972,7 @@ IFM_ASSETS
 				$item = utf8_encode( $item );
 	}
 
-	public function checkAuth() {
+	function checkAuth() {
 		if( $this->config['auth'] == 0 )
 			return true;
 
@@ -1080,10 +1080,10 @@ IFM_ASSETS
 		return false;
 	}
 
-	private function loginForm($loginFailed=false) {
+	private function loginForm($loginFailed=false, $loginMessage="") {
 		$err = "";
 		if( $loginFailed ) 
-			$err = '<div class="alert alert-primary" role="alert">'.$this->l['login_failed'].'</div>';
+			$err = '<div class="alert alert-danger" role="alert">'.$loginMessage.'</div>';
 		$this->getHTMLHeader();
 		$html = str_replace( "{{error}}", $err, $this->templates['login'] );
 		$html = str_replace( "{{i18n.username}}", $this->l['username'], $html );
@@ -1178,10 +1178,11 @@ IFM_ASSETS
 		$type = strtolower($type);
 		switch( $type ) {
 			case "aac": case "aiff": case "mid": case "mp3": case "wav": return 'icon icon-file-audio'; break;
-			case "ai": case "bmp": case "eps": case "tiff": case "gif": case "jpg": case "jpeg": case "png": case "psd": return 'icon icon-file-image'; break;
+			case "ai": case "bmp": case "eps": case "tiff": case "gif": case "jpg": case "jpeg": case "png": case "psd": case "svg": return 'icon icon-file-image'; break;
 			case "avi": case "flv": case "mp4": case "mpg": case "mkv": case "mpeg": case "webm": case "wmv": case "mov": return 'icon icon-file-video'; break;
-			case "c": case "cpp": case "css": case "dat": case "h": case "html": case "java": case "js": case "php": case "py": case "sql": case "xml": case "yml": return 'icon icon-file-code'; break;
+			case "c": case "cpp": case "css": case "dat": case "h": case "html": case "java": case "js": case "php": case "py": case "sql": case "xml": case "yml": case "json": return 'icon icon-file-code'; break;
 			case "doc": case "docx": case "odf": case "odt": case "rtf": return 'icon icon-file-word'; break;
+			case "txt": case "log": return 'icon icon-doc-text'; break;
 			case "ods": case "xls": case "xlsx": return 'icon icon-file-excel'; break;
 			case "odp": case "ppt": case "pptx": return 'icon icon-file-powerpoint'; break;
 			case "pdf": return 'icon icon-file-pdf'; break;

src/style.css

@@ -3,18 +3,34 @@ body {
 	overflow-y: scroll !important;
 }
 
-a { cursor: pointer !important; }
-a.ifmitem:focus { outline: 0 }
+main {
+	margin-bottom: 1rem;
+}
 
-img.imgpreview { max-width: 100%; }
+a {
+	cursor: pointer !important;
+}
 
-div#content { width: 100%; height: 350px; } /* is for the ACE editor */
+a.ifmitem:focus {
+	outline: 0
+}
 
-label {
+img.imgpreview {
+	max-width: 100%;
+	background-repeat: repeat repeat;
+	background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAAAAACoWZBhAAABI2lDQ1BJQ0MgcHJvZmlsZQAAKJGdkLFKw1AUhr9UsaXYSXEQhwyuBRHM5FIVgqAQYwWrU5qkWExiSFKKb+Cb6MN0EASfwCdQcPa/0cHBLF44/B+Hc/7/3gstOwnTcnkH0qwqXH8wuhxd2e032nTosksvCMt84HknNJ7PVyyjL33j1Tz351mJ4jKULlRZmBcVWPtiZ17lhlWs3w79Q/GD2I7SLBI/ibejNDJsdv00mYU/nuY2q3F2cW76qi1cjjnFw2bMjCkJFX1pps4RDntSl4KAe0pCaUKs3lwzFTeiUk4uB6KhSLdpyNus8zyljOUxlZdJuCOVp8nD/O/32sdZvWltLPKgCOrWkqo1mcD7I/RGsPYM3euGrM7vtzXMOPXMP9/4BdaxUFxWskm6AAAAAmJLR0QAy6Y7OAoAAAAJcEhZcwAALiMAAC4jAXilP3YAAAAiSURBVAjXY/zPwMDAcIaBgYGBiQEOCDJZzjAwMDCYkKoNAPmXAuEuYku0AAAAAElFTkSuQmCC");
+}
+
+div#content { /* is for the ACE editor */
+	width: 100%;
+	height: 350px;
+}
+
+/* label {
 	display: inline-block;
 	margin-bottom: .5rem;
 	font-weight: 700;
-}
+} */
 
 /* Make tables more compact (overwrites bootstrap default of 0.75rem) */
 .table td, .table th {
@@ -23,7 +39,7 @@ label {
 
 /* narrow navbar */
 .navbar {
-    padding: 0.3rem;
+	padding: 0.3rem !important;
 }
 
 /*
@@ -82,10 +98,13 @@ footer {
 	background-color: #EEE;
 	bottom: 0;
 	width: 100%;
-    max-height: 6em;
 	overflow: hidden;
 }
 
+#waitqueue {
+	max-height: 6rem;
+}
+
 #waitqueue .progress {
 	position: relative;
 	margin-bottom: 0;
@@ -175,6 +194,10 @@ table.dataTable thead th.sorting_desc:after {
 	overflow: auto;
 }
 
+.modal-open {
+    padding-right: 0px !important;
+}
+
 @media (min-width: 576px) {
 	.modal-dialog {
 		max-width: 600px;

src/templates/app.html

@@ -46,7 +46,7 @@
 				{{/config.createdir}}
 				<li class="nav-item dropdown">
 					<a class="nav-link dropdown-toggle" href="#" id="menu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></a>
-                <div class="dropdown-menu" aria-labelledby="menu">
+					<div class="dropdown-menu dropdown-menu-right" aria-labelledby="menu">
 						{{#config.remoteupload}}
 						<a class="dropdown-item" href="#" id="buttonRemoteUpload"><span class="icon icon-upload-cloud"></span> {{i18n.upload_remote}}</a>
 						{{/config.remoteupload}}
@@ -100,8 +100,8 @@
 	<div class="container">
 		<div class="card ifminfo">
 			<div class="card-body p-2">
-                <div style="float:left; padding-left: 10px;">{{i18n.footer}} IFM_VERSION</div>
-                <a style="float:right; padding-right: 10px;" href="http://github.com/misterunknown/ifm">{{i18n.github}}</a>
+				<div style="float:left; padding-left: 10px;">{{i18n.footer}} <a href='https://github.com/misterunknown/ifm/tree/IFM_VERSION' target=_blank>IFM_VERSION</a></div>
+				<a style="float:right; padding-right: 10px;" href="http://github.com/misterunknown/ifm" target="_blank">{{i18n.github}}</a>
 			</div>
 		</div>
 	</div>

src/templates/footer.html

@@ -1,10 +1,10 @@
 <footer class="footer mt-auto py-3">
-  <div class="container">
+	<div id="wq_container" class="container">
 		<div class="row">
-        <div class="col-1">
-            <a  type="button" class="btn btn-light" name="showAll">{{i18n.tasks}} <span class="badge badge-secondary" name="taskCount">1</span></a>
+			<div class="col-md-2 mb-1">
+				<a type="button" class="btn btn-light btn-block" name="showAll">{{i18n.tasks}} <span class="badge badge-secondary" name="taskCount">1</span></a>
 			</div>
-        <div id="waitqueue" class="col-11">
+			<div id="waitqueue" class="col-md-10">
 			</div>
 		</div>
 	</div>

src/templates/login.html

@@ -107,6 +107,7 @@ body {
   <div class="text-center mb-4">
   	<h1 class="h3 mb-3 font-weight-normal">IFM {{i18n.login}}</h1>
   </div>
+  {{error}}
   <div class="form-label-group">
     <input type="text" name="inputLogin" id="inputLogin" class="form-control" placeholder="{{i18n.username}}" required="" autofocus="">
     <label for="inputLogin">{{i18n.username}}</label>
@@ -115,6 +116,8 @@ body {
     <input type="password" name="inputPassword" id="inputPassword" class="form-control" placeholder="{{i18n.password}}" required="">
     <label for="inputPassword">{{i18n.password}}</label>
   </div>
+  <div class="alert alert-danger d-none" role="alert"></div>
+   
   <button class="btn btn-lg btn-primary btn-block" type="submit">{{i18n.login}}</button>
   
 </form>

src/templates/modal.ajaxrequest.html

@@ -1,16 +1,31 @@
 <form id="formAjaxRequest">
 <div class="modal-body">
 	<fieldset>
-		<label>URL</label><br>
-		<input class="form-control" type="text" id="ajaxurl" required><br>
-		<label>{{i18n.data}}</label><br>
-		<textarea class="form-control" id="ajaxdata"></textarea><br>
-		<label>{{i18n.method}}</label><br>
-		<input type="radio" name="arMethod" value="GET">GET</input><input type="radio" name="arMethod" value="POST" checked="checked">POST</input><br>
-		<button type="button" class="btn btn-success" id="buttonRequest">{{i18n.request}}</button>
-		<button type="button" class="btn btn-secondary" id="buttonClose">{{i18n.cancel}}</button><br>
-		<label>{{i18n.response}}</label><br>
-		<textarea class="form-control" id="ajaxresponse"></textarea>
-	</fieldset>
-</form>
+		<div class="form-group">
+			<label for="ajaxurl">URL</label>
+			<input class="form-control" type="url" id="ajaxurl" required>
 		</div>
+		<div class="form-group">
+			<label for="ajaxdata">{{i18n.data}}</label>
+			<textarea class="form-control" id="ajaxdata"></textarea>
+		</div>
+		<div class="form-group">
+			<legend>{{i18n.method}}</legend>
+			<div class="form-check form-check-inline">
+				<input class="form-check-input" type="radio" id="radioget" name="arMethod" value="GET">
+				<label class="form-check-label" for="radioget">GET</label>
+			</div>
+			<div class="form-check form-check-inline">
+				<input class="form-check-input" type="radio" id="radiopost" name="arMethod" value="POST" checked="checked">
+				<label class="form-check-label" for="radiopost">POST</label>
+			</div>
+		</div>
+		<button type="button" class="btn btn-success" id="buttonRequest">{{i18n.request}}</button>
+		<button type="button" class="btn btn-danger" id="buttonClose">{{i18n.cancel}}</button>
+		<div class="form-group">
+			<label for="ajaxresponse">{{i18n.response}}</label>
+			<textarea class="form-control" id="ajaxresponse"></textarea>
+		</div>
+	</fieldset>
+</div>
+</form>

src/templates/modal.copymove.html

@@ -1,13 +1,15 @@
 <form id="formCopyMove">
 <fieldset>
 	<div class="modal-body">
-		<label>{{i18n.select_destination}}:</label>
+		<div class="form-group">
+			<label for="copyMoveTree">{{i18n.select_destination}}:</label>
 			<div id="copyMoveTree"><div class="text-center"><span class="icon icon-spin5 animate-spin"></span></div></div>
 		</div>
+	</div>
 	<div class="modal-footer">
 		<button type="button" class="btn btn-secondary" id="copyButton">{{i18n.copy}}</button>
 		<button type="button" class="btn btn-secondary" id="moveButton">{{i18n.move}}</button>
-		<button type="button" class="btn btn-secondary" id="cancelButton">{{i18n.cancel}}</button>
+		<button type="button" class="btn btn-danger" id="cancelButton">{{i18n.cancel}}</button>
 	</div>
 </fieldset>
 </form>

src/templates/modal.createarchive.html

@@ -1,12 +1,14 @@
 <form id="formCreateArchive">
 <div class="modal-body">
 	<fieldset>
-		<label>{{i18n.archivename}}:</label>
-		<input class="form-control" type="text" name="archivename" value="" />
+		<div class="form-group">
+			<label for="archivename">{{i18n.archivename}}:</label>
+			<input id="archivename" class="form-control" type="text" name="archivename" value="" />
+		</div>
 	</fieldset>
 </div>
 <div class="modal-footer">
-	<button type="button" class="btn btn-secondary" id="buttonSave">{{i18n.save}}</button>
-	<button type="button" class="btn btn-secondary" id="buttonCancel">{{i18n.cancel}}</button>
+	<button type="button" class="btn btn-success" id="buttonSave">{{i18n.save}}</button>
+	<button type="button" class="btn btn-danger" id="buttonCancel">{{i18n.cancel}}</button>
 </div>
 </form>

src/templates/modal.createdir.html

@@ -1,12 +1,14 @@
 <form id="formCreateDir">
 <div class="modal-body">
 	<fieldset>
-		<label>{{i18n.directoryname}}:</label>
-		<input class="form-control" type="text" name="dirname" value="" />
+		<div class="form-group">
+			<label for="dirname">{{i18n.directoryname}}:</label>
+			<input class="form-control" id="dirname" type="text" name="dirname" value="" />
+		</div>
 	</fieldset>
 </div>
 <div class="modal-footer">
-	<button type="button" class="btn btn-secondary" id="buttonSave">{{i18n.save}}</button>
-	<button type="button" class="btn btn-secondary" id="buttonCancel">{{i18n.cancel}}</button>
+	<button type="button" class="btn btn-success" id="buttonSave">{{i18n.save}}</button>
+	<button type="button" class="btn btn-danger" id="buttonCancel">{{i18n.cancel}}</button>
 </div>
 </form>

src/templates/modal.extractfile.html

@@ -1,29 +1,37 @@
 <form id="formExtractFile">
 <div class="modal-body">
 	<fieldset>
+		<div class="form-group">
 			<label>{{i18n.extract_filename}} {{filename}}:</label>
 			<div class="input-group">
 				<div class="input-group-prepend">
-				<span class="input-group-text"><input type="radio" name="extractTargetLocation" value="./" checked="checked"></span>
+					<div class="input-group-text">
+						<input type="radio" name="extractTargetLocation" value="./" checked="checked">
 					</div>
-			<span class="form-control">./</span>
+				</div>
+				<input class="form-control" type="text" placeholder="./" readonly>
 			</div>
 			<div class="input-group">
 				<div class="input-group-prepend">
-				<span class="input-group-text"><input type="radio" name="extractTargetLocation" value="./{{destination}}"></span>
+					<div class="input-group-text">
+						<input type="radio" name="extractTargetLocation" value="./{{destination}}">
 					</div>
-			<span class="form-control">./{{destination}}</span>
+				</div>
+				<input class="form-control" type="text" placeholder="./{{destination}}" readonly>
 			</div>
 			<div class="input-group">
 				<div class="input-group-prepend">
-				<span class="input-group-text"><input type="radio" name="extractTargetLocation" value="custom"></span>
+					<div class="input-group-text">
+						<input type="radio" name="extractTargetLocation" value="custom">
+					</div>
 				</div>
 				<input id="extractCustomLocation" type="text" class="form-control" placeholder="custom location" value="">
 			</div>
+		</div>
 	</fieldset>
 </div>
 <div class="modal-footer">
-	<button type="button" class="btn btn-secondary" id="buttonExtract">{{i18n.extract}}</button>
-	<button type="button" class="btn btn-secondary" id="buttonCancel">{{i18n.cancel}}</button>
+	<button type="button" class="btn btn-primary" id="buttonExtract">{{i18n.extract}}</button>
+	<button type="button" class="btn btn-danger" id="buttonCancel">{{i18n.cancel}}</button>
 </div>
 </form>

src/templates/modal.file.html

@@ -1,15 +1,17 @@
 <form id="formFile">
 <div class="modal-body">
 	<fieldset>
-		<label>{{i18n.filename}}:</label>
-		<input type="text" class="form-control" name="filename" value="{{filename}}"><br>
-		<div id="content" name="content"></div><br>
+		<div class="form-group">
+			<label for="filename">{{i18n.filename}}:</label>
+			<input type="text" class="form-control" name="filename" id="filename" value="{{filename}}">
+		</div>
+		<div class="form-group" id="content" name="content"></div>
 		<button type="button" class="btn btn-secondary" id="editoroptions">{{i18n.editor_options}}</button>
 	</fieldset>
 </div>
 <div class="modal-footer">
-	<button type="button" id="buttonSave" class="btn btn-secondary">{{i18n.save}}</button>
-	<button type="button" id="buttonSaveNotClose" class="btn btn-secondary">{{i18n.save_wo_close}}</button>
-	<button type="button" id="buttonClose" class="btn btn-secondary">{{i18n.close}}</button>
+	<button type="button" id="buttonSave" class="btn btn-primary">{{i18n.save}}</button>
+	<button type="button" id="buttonSaveNotClose" class="btn btn-success">{{i18n.save_wo_close}}</button>
+	<button type="button" id="buttonClose" class="btn btn-danger">{{i18n.close}}</button>
 </div>
 </form>

src/templates/modal.file_editoroptions.html

@@ -1,6 +1,7 @@
-<div>
-<div class="form-check p-0">
-<input type="checkbox" id="editor-wordwrap" 
+<form>
+	<div class="form-group">
+		<div class="form-check">
+			<input class="form-check-input" type="checkbox" id="editor-wordwrap" 
 				{{#wordwrap}}
 				checked="checked"
 				{{/wordwrap}}
@@ -15,8 +16,13 @@
 			>
 			<label class="form-check-label" for="editor-softtabs">{{i18n.soft_tabs}}</label>
 		</div>
+	</div>
 	<div class="input-group">
-    <div class="input-group-prepend"><span class="input-group-text">{{i18n.tab_size}}</span></div><input class="form-control" type="text" size="2" id="editor-tabsize" title="{{i18n.tab_size}}" value="{{tabsize}}"></div>
+		<div class="input-group-prepend">
+			<span class="input-group-text" id="editor-tabsize-label">{{i18n.tab_size}}</span>
+		</div>
+		<input class="form-control" type="number" min="1" max="9" maxlength="1" id="editor-tabsize" title="{{i18n.tab_size}}" value="{{tabsize}}" aria-describedby="editor-tabsize-label">
+	</div>
 	{{#ace_includes}}
 	<select class="form-control selectpicker" data-toggle="dropdown" data-live-search="true" data-size="15" id="editor-syntax">
 		{{#modes}}
@@ -24,4 +30,4 @@
 		{{/modes}}
 	</select>
 	{{/ace_includes}}
-</div>
+</form>

src/templates/modal.remoteupload.html

@@ -1,16 +1,29 @@
 <form id="formRemoteUpload">
 <div class="modal-body">
 	<fieldset>
-		<label>{{i18n.upload_remote_url}}</label><br>
-		<input class="form-control" type="text" id="url" name="url" required><br>
-		<label>{{i18n.filename}}</label>
-		<input class="form-control" type="text" id="filename" name="filename" required><br>
-		<label>{{i18n.method}}</label>
-		<input type="radio" name="method" value="curl" checked="checked">cURL<input type="radio" name="method" value="file">file</input><br>
+		<div class="form-group">
+			<label for="url">{{i18n.upload_remote_url}}</label>
+			<input class="form-control" type="url" id="url" name="url" required>
+		</div>
+		<div class="form-group">
+			<label for="filename">{{i18n.filename}}</label>
+			<input class="form-control" type="text" id="filename" name="filename" required>
+		</div>
+		<div class="form-group">
+			<legend>{{i18n.method}}</legend>
+			<div class="form-check form-check-inline">
+				<input class="form-check-input" type="radio" id="radiocurl" name="method" value="curl" checked="checked">
+				<label class="form-check-label" for="radiocurl">cURL</label>
+			</div>
+			<div class="form-check form-check-inline">
+				<input class="form-check-input" type="radio" id="radiofile" name="method" value="file">
+				<label class="form-check-label" for="radiofile">file</label>
+			</div>
+		</div>
 	</fieldset>
 </div>
 <div class="modal-footer">
-	<button type="button" class="btn btn-secondary" id="buttonUpload">{{i18n.upload}}</button>
-	<button type="button" class="btn btn-secondary" id="buttonCancel">{{i18n.cancel}}</button>
+	<button type="button" class="btn btn-primary" id="buttonUpload">{{i18n.upload}}</button>
+	<button type="button" class="btn btn-danger" id="buttonCancel">{{i18n.cancel}}</button>
 </div>
 </form>

src/templates/modal.renamefile.html

@@ -1,12 +1,14 @@
 <form id="formRenameFile">
 <div class="modal-body">
 	<fieldset>
-		<label>{{i18n.rename_filename}} {{filename}}:</label>
-		<input class="form-control" type="text" name="newname" value="" /><br>
+		<div class="form-group">
+			<label for="newname">{{i18n.rename_filename}} {{filename}}:</label>
+			<input id="newname" class="form-control" type="text" name="newname" value="" />
+		</div>
 	</fieldset>
 </div>
 <div class="modal-footer">
 	<button type="button" class="btn btn-secondary" id="buttonRename">{{i18n.file_rename}}</button>
-	<button type="button" class="btn btn-secondary" id="buttonCancel">{{i18n.cancel}} </button>
+	<button type="button" class="btn btn-danger" id="buttonCancel">{{i18n.cancel}} </button>
 </div>
 </form>

src/templates/modal.search.html

@@ -1,8 +1,10 @@
 <form id="searchForm">
 <div class="modal-body">
 	<fieldset>
-		<label>{{i18n.search_pattern}}:</label>
-		<input type="text" class="form-control" id="searchPattern" name="pattern" autocomplete="off" value="{{lastSearch}}"><br>
+		<div class="form-group">
+			<label for="searchPattern">{{i18n.search_pattern}}:</label>
+			<input type="search" class="form-control" id="searchPattern" name="pattern" autocomplete="off" value="{{lastSearch}}">
+		</div>
 		<table id="searchResults" class="table">
 		</table>
 	</fieldset>

src/templates/modal.uploadfile.html

@@ -1,14 +1,20 @@
 <form id="formUploadFile">
 <div class="modal-body">
 	<fieldset>
-		<label>{{i18n.upload_file}}</label><br>
-		<input class="form-control-file" type="file" name="files" multiple><br>
-		<label>{{i18n.filename_new}}</label>
-		<input class="form-control" type="text" name="newfilename"><br>
+		<div class="form-group">
+			<div class="custom-file">
+				<label class="custom-file-label" for="fileselect">{{i18n.upload_file}}</label>
+				<input class="custom-file-input" type="file" name="files" id="fileselect" multiple>
+			</div>
+		</div>
+		<div class="form-group">
+			<label for="filename">{{i18n.filename_new}}</label>
+			<input class="form-control" type="text" name="newfilename" id="filename">
+		</div>
 	</fieldset>
 </div>
 <div class="modal-footer">
-	<button class="btn btn-secondary" id="buttonUpload">{{i18n.upload}}</button>
-	<button class="btn btn-secondary" id="buttonCancel">{{i18n.cancel}}</button>
+	<button class="btn btn-primary" id="buttonUpload">{{i18n.upload}}</button>
+	<button class="btn btn-danger" id="buttonCancel">{{i18n.cancel}}</button>
 </div>
 </form>

src/templates/task.html

@@ -1,4 +1,4 @@
-<div id="{{id}}" class="card">
+<div id="{{id}}" class="card mb-1">
 	<div class="card-body">
 		<div class="progress">
 			<div class="progress-bar bg-{{type}} progress-bar-striped active" role="progressbar" aria-valuenow="100" aria-valuemax="100" style="width:100%">