deploy file manager

2020-02-03 17:28:26 +01:00
parent ee3829d054
commit aea57286d9
8 changed files with 614 additions and 397 deletions
--- a/res/include/style/file_manager.css
+++ b/res/include/style/file_manager.css
@@ -0,0 +1,167 @@
+#page_body {
+	height: 100%;
+	padding: 0;
+}
+
+#button_toggle_navigation {
+	display: none;
+}
+
+.file_manager {
+	position:         absolute;
+	padding:          0;
+	background-color: var(--layer_1_color);
+	box-shadow:       #000000 8px 8px 50px 5px;
+	left:             24px;
+	top:              24px;
+	right:            24px;
+	bottom:           24px;
+	display:          flex;
+	flex-direction:   column;
+}
+@media (max-width: 1000px) {
+	.file_manager {
+		left: 0;
+		top: 0;
+		right: 0;
+		bottom: 0;
+	}
+}
+
+.file_manager > .nav_bar {
+	flex-shrink: 0;
+	display: flex;
+	flex-direction: row;
+}
+.file_manager > .nav_bar > button {
+	flex-shrink: 0;
+}
+.file_manager > .nav_bar > .spacer      {width: 8px;}
+.file_manager > .nav_bar > .breadcrumbs {
+	flex-grow: .7;
+	flex-shrink: 1;
+	min-width: 0;
+}
+.file_manager > .nav_bar > .input_search {
+	flex-grow: .3;
+	flex-shrink: 1;
+	min-width: 100px;
+}
+
+.file_manager > .directory_area > .directory_sorters {
+	display: flex;
+	flex-direction: row;
+	position: sticky;
+	overflow: hidden;
+	top: 0;
+	z-index: 1;
+	background-color: var(--layer_1_color);
+}
+.file_manager > .directory_area > .directory_sorters > div {
+	flex-shrink: 0;
+	flex-grow: 1;
+	display: inline-block;
+	margin: 4px 10px;
+	border-bottom: 1px solid var(--input_color);
+	cursor: pointer;
+}
+
+.file_manager > .directory_area > .directory_sorters > :first-child,
+.node > :first-child {
+	flex-shrink: 1;
+	flex-grow: 1;
+}
+.file_manager > .directory_area > .directory_sorters > :not(:first-child),
+.node > :not(:first-child) {
+	flex-shrink: 0;
+	flex-grow: 0;
+}
+@media (max-width: 1000px) {
+	.file_manager > .directory_area > .directory_sorters > :not(:first-child),
+	.node > :not(:first-child) {
+		display: none;
+	}
+}
+
+.file_manager > .directory_area {
+	flex-shrink: 1;
+	flex-grow: 1;
+	margin: 0;
+	padding: 0;
+	overflow-x: auto;
+	text-align: left;
+	box-sizing: border-box;
+}
+.file_manager > .directory_area > .directory_node_container {
+	/* Required because we use padding for moving the nodes down when items
+	above are out of view*/
+	box-sizing: border-box;
+	display: block;
+	overflow: hidden;
+}
+
+.file_manager > .status_bar {
+	flex-shrink: 0;
+	text-align: left;
+}
+
+.node {
+	display: flex;
+	flex-direction: row;
+
+	position: relative;
+	height: 40px;
+	overflow: hidden;
+
+	/* I use padding instead of margin here because it goves me more precise
+	control over the size.
+	Check out https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing*/
+	margin: 0;
+	padding: 4px;
+	box-sizing: border-box;
+	color: var(--text_color);
+
+	/* padding-top: 6px; */
+}
+.node:hover, .node_selected {
+	background-color: var(--input_color_dark);
+	color: var(--input_text_color);
+	text-decoration: none;
+}
+.node > div {
+	height: 100%;
+	overflow: hidden;
+	margin: auto 10px;
+	display: inline-block;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+.node > div > span {
+	margin: auto;
+	margin-top: 4px; /* I couldn't find another way to vertically align the text*/
+	box-sizing: border-box;
+	display: block;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+.node > div > img {
+	max-height: 100%;
+	margin-right: 6px;
+	width: auto;
+	min-width: auto;
+	float: left;
+	display: block;
+}
+
+.spinner {
+	position: absolute;
+	display: block;
+	margin: auto;
+	max-width: 100%;
+	max-height: 100%;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+	width: 100px;
+	height: 100px;
+}