Basic implementation for files app

2022-05-06 23:01:23 +02:00
parent 4e12f4805e
commit 7d6c6c6321
54 changed files with 2381 additions and 94 deletions
--- a/files/src/main/resources/static/css/files_main.css
+++ b/files/src/main/resources/static/css/files_main.css
@@ -0,0 +1,170 @@
+#files-content-table {
+    width: 100%;
+}
+
+#files-content-table th {
+    position: sticky;
+    background-color: var(--background-color);
+    top: 0px;
+}
+
+#type-column {
+    width: 1%;
+}
+
+#name-column {
+    width: auto;
+}
+
+#size-column {
+    width: 1%;
+}
+
+#lastmod-column {
+    width: 1%;
+}
+
+#actions-column {
+    width: 1%;
+}
+
+.files-table-padded-col {
+    padding-right: 2em;
+}
+
+.files-table-text-align-right {
+    text-align: right;
+}
+
+#files-content-table > tbody > tr > td > details > summary {
+    list-style-type: none;
+}
+
+#files-content-table > tbody > tr > td > details[open] > summary {
+    list-style-type: none;
+}
+
+#files-content-table > tbody > tr > td > details > summary:hover {
+    cursor: pointer;
+}
+
+#rename-form {
+    margin-top: 3em;
+    margin-left: 3em;
+}
+
+#rename-form * {
+    display: block;
+    margin-top: 1em;
+    box-sizing: border-box;
+}
+#rename-form > select > * {
+    margin-top: unset;
+}
+
+#rename-form > select {
+    width: 70em;
+}
+
+#rename-form > input[type=text] {
+    width: 70em;
+}
+
+#menu-container {
+    padding-top: 2em;
+    margin-left: 3em;
+}
+
+.files-menu-icon {
+    background: none !important;
+    border: none;
+    padding: 0 !important;
+    color: var(--text-color);
+    cursor: pointer;
+    font-size: 2em;
+}
+
+.files-menu-icon:hover {
+    color: var(--link-color);
+}
+
+#content-container {
+    padding-top: unset !important;
+}
+
+#create-dir-container > details > summary {
+    list-style-type: none;
+}
+
+#create-dir-container > details[open] > summary {
+    list-style-type: none;
+}
+
+#menu-container > div {
+    display: inline-block !important;
+}
+
+.create-dir-container-details-modal-content {
+    padding: 0.5em;
+    pointer-events: all;
+    display: inline;
+}
+
+.create-dir-container-details-modal {
+    background: var(--background-color);
+    filter: brightness(var(--background-brightness));
+    border-radius: 0.3em;
+    left: auto;
+    top: auto;
+    right: auto;
+    bottom: auto;
+    padding: 0;
+    pointer-events: none;
+    position: absolute;
+    display: flex;
+    flex-direction: column;
+    z-index: 100;
+}
+
+.menu-spacer {
+    width: 2em;
+}
+
+.messageContainer {
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+}
+
+.message {
+    margin-top: 2em;
+    border: 1px;
+    border-style: solid;
+    border-radius: 0.3em;
+    padding: 1em;
+    display: inline-block;
+}
+
+.shareMessage {
+    border-color: var(--good-color) !important;
+}
+
+.infoMessage {
+    border-color: var(--good-color) !important;
+}
+
+.errorMessage {
+    border-color: var(--error-color) !important;
+}
+
+@media only screen and (max-width: 450px) {
+    #menu-container {
+        padding-top: 1em;
+        margin-left: 1em;
+    }
+
+    .menu-spacer {
+        width: 1em;
+    }
+}