mirror of
https://github.com/Theodor-Springmann-Stiftung/hamann-ausgabe-core.git
synced 2025-10-30 01:35:32 +00:00
Created FileList with ability to set used files
This commit is contained in:
schnulller
@@ -123,7 +123,7 @@ code,
|
||||
kbd,
|
||||
samp,
|
||||
pre {
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace, mono;
|
||||
/* 1 */
|
||||
font-size: 1em;
|
||||
/* 2 */
|
||||
@@ -478,6 +478,8 @@ Ensure the default browser behavior of the `hidden` attribute.
|
||||
|
||||
/* TODO: check what can be inlined (eg. used once in the code, has no double paths etc...) */
|
||||
|
||||
/* TODO: Copy color classes for all thing upload to colors on top */
|
||||
|
||||
/* Everything related to theme color */
|
||||
|
||||
body {
|
||||
@@ -1868,8 +1870,8 @@ body {
|
||||
.ha-adminuploadfields .ha-uploadfield.active {
|
||||
--tw-text-opacity: 1 !important;
|
||||
color: rgb(0 0 0 / var(--tw-text-opacity)) !important;
|
||||
--tw-shadow-color: #fee2e2;
|
||||
--tw-shadow: var(--tw-shadow-colored);
|
||||
--tw-brightness: brightness(1.1);
|
||||
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
|
||||
}
|
||||
|
||||
.ha-adminuploadfields .ha-uploadfield .ha-uploadfieldname {
|
||||
@@ -2022,46 +2024,6 @@ body {
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.ha-uploadheader .ha-usedfilesheader {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.ha-uploadheader .ha-usedfilesheaderlist {
|
||||
margin-left: 1.5rem;
|
||||
margin-bottom: 0.25rem;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
align-content: flex-end;
|
||||
-moz-column-gap: 0.5rem;
|
||||
column-gap: 0.5rem;
|
||||
row-gap: 0.25rem;
|
||||
align-self: flex-end;
|
||||
}
|
||||
|
||||
.ha-uploadheader .ha-usedfilesheaderlist .ha-usedfilesheaderfile {
|
||||
border-radius: 0.25rem;
|
||||
background-color: rgb(51 65 85 / var(--tw-bg-opacity));
|
||||
--tw-bg-opacity: 0.3;
|
||||
padding-left: 0.5rem;
|
||||
padding-right: 0.5rem;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.25rem;
|
||||
}
|
||||
|
||||
.ha-uploadheader .ha-usedfilesheaderlist .ha-availablefilechooser {
|
||||
border-radius: 0.25rem;
|
||||
background-color: rgb(51 65 85 / var(--tw-bg-opacity));
|
||||
--tw-bg-opacity: 0.5;
|
||||
padding-right: 0.25rem;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.25rem;
|
||||
}
|
||||
|
||||
.ha-uploadheader .ha-usedfilesheaderlist .ha-availablefilechooser .ha-loadotherfilesbtn {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.ha-uploadcontainer {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
@@ -2072,6 +2034,40 @@ body {
|
||||
background-color: rgb(248 250 252 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.ha-uploadcontainer .ha-availablefiles {
|
||||
cursor: pointer;
|
||||
border-width: 1px;
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(226 232 240 / var(--tw-border-opacity));
|
||||
padding-left: 4rem;
|
||||
padding-right: 4rem;
|
||||
padding-top: 0.5rem;
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.ha-uploadcontainer .ha-availablefiles:hover {
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(30 41 59 / var(--tw-border-opacity));
|
||||
}
|
||||
|
||||
.ha-uploadcontainer .ha-availablefiles .ha-availablefilestitle {
|
||||
font-size: 1.5rem;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
.ha-uploadcontainer .ha-availablefiles .ha-usedfilelist {
|
||||
}
|
||||
|
||||
.ha-filesheader {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.ha-availablefileslist {
|
||||
padding-left: 4rem;
|
||||
padding-right: 4rem;
|
||||
padding-top: 1rem;
|
||||
}
|
||||
|
||||
.ha-uploadcontainer .ha-errorswarnings {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
@@ -2109,6 +2105,98 @@ body {
|
||||
background-color: rgb(165 243 252 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.ha-uploadcontainer .ha-hamannfilechooser {
|
||||
padding-left: 4rem;
|
||||
padding-right: 4rem;
|
||||
padding-bottom: 4rem;
|
||||
}
|
||||
|
||||
/* Classes for FileList Component */
|
||||
|
||||
.ha-filelistfieldset {
|
||||
}
|
||||
|
||||
.ha-filelistfieldset .ha-filelistlegend {
|
||||
margin-bottom: 0.5rem;
|
||||
font-size: 1.25rem;
|
||||
line-height: 1.75rem;
|
||||
}
|
||||
|
||||
.ha-selectfilesform {
|
||||
}
|
||||
|
||||
.ha-selectfilesform .ha-filelistfile {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
-moz-column-gap: 1rem;
|
||||
column-gap: 1rem;
|
||||
}
|
||||
|
||||
.ha-selectfilesform .ha-filelistlist {
|
||||
height: 24rem;
|
||||
overflow-x: hidden;
|
||||
overflow-y: scroll;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
|
||||
.ha-selectfilesform .ha-filelistfile .ha-filelistname {
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace, mono;
|
||||
}
|
||||
|
||||
.ha-selectfilesform .ha-filelistfile .ha-filelistusedproduction {
|
||||
align-self: flex-start;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.25rem;
|
||||
}
|
||||
|
||||
.ha-selectfilesform .ha-filelistfile .ha-filelistusedproduction .ha-filelistproduction {
|
||||
margin-right: 0.5rem;
|
||||
display: inline-block;
|
||||
border-radius: 0.375rem;
|
||||
border-width: 1px;
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(13 148 136 / var(--tw-border-opacity));
|
||||
padding-left: 0.5rem;
|
||||
padding-right: 0.5rem;
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(13 148 136 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.ha-selectfilesform .ha-filelistfile .ha-filelistusedproduction .ha-filelistused {
|
||||
display: inline-block;
|
||||
border-radius: 0.375rem;
|
||||
border-width: 1px;
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(79 70 229 / var(--tw-border-opacity));
|
||||
padding-left: 0.5rem;
|
||||
padding-right: 0.5rem;
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(79 70 229 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.ha-selectfilesform .ha-filelistfile .ha-filelistmodified {
|
||||
flex-grow: 1;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.ha-selectfilesform .ha-filelistbutton {
|
||||
float: right;
|
||||
margin-top: 0.5rem;
|
||||
margin-left: 1.5rem;
|
||||
cursor: pointer;
|
||||
border-radius: 0.375rem;
|
||||
border-width: 2px;
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(29 78 216 / var(--tw-border-opacity));
|
||||
padding-left: 0.75rem;
|
||||
padding-right: 0.75rem;
|
||||
}
|
||||
|
||||
.ha-selectfilesform .ha-filelistbutton:hover {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(147 197 253 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
/* Classes for Letter View */
|
||||
|
||||
.ha-letterheader {
|
||||
@@ -3055,6 +3143,10 @@ body {
|
||||
margin-right: 0px !important;
|
||||
}
|
||||
|
||||
.block {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.inline-block {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
@@ -84,6 +84,7 @@
|
||||
@apply transition-colors duration-100
|
||||
}
|
||||
/* TODO: check what can be inlined (eg. used once in the code, has no double paths etc...) */
|
||||
/* TODO: Copy color classes for all thing upload to colors on top */
|
||||
|
||||
/* Everything related to theme color */
|
||||
body {
|
||||
@@ -678,7 +679,7 @@
|
||||
}
|
||||
|
||||
.ha-adminuploadfields .ha-uploadfield.active {
|
||||
@apply !text-black shadow-red-100
|
||||
@apply !text-black brightness-110
|
||||
}
|
||||
|
||||
.ha-adminuploadfields .ha-uploadfield .ha-uploadfieldname {
|
||||
@@ -745,30 +746,30 @@
|
||||
@apply text-5xl
|
||||
}
|
||||
|
||||
.ha-uploadheader .ha-usedfilesheader {
|
||||
@apply flex
|
||||
}
|
||||
|
||||
.ha-uploadheader .ha-usedfilesheaderlist {
|
||||
@apply flex flex-row flex-wrap ml-6 gap-x-2 gap-y-1 self-end content-end mb-1
|
||||
}
|
||||
|
||||
.ha-uploadheader .ha-usedfilesheaderlist .ha-usedfilesheaderfile {
|
||||
@apply text-sm px-2 bg-slate-700 bg-opacity-30 rounded
|
||||
}
|
||||
|
||||
.ha-uploadheader .ha-usedfilesheaderlist .ha-availablefilechooser {
|
||||
@apply text-sm pr-1 bg-slate-700 bg-opacity-50 rounded
|
||||
}
|
||||
|
||||
.ha-uploadheader .ha-usedfilesheaderlist .ha-availablefilechooser .ha-loadotherfilesbtn {
|
||||
@apply inline-block
|
||||
}
|
||||
|
||||
.ha-uploadcontainer {
|
||||
@apply w-full bg-slate-50 flex flex-col gap-y-2 h-full
|
||||
}
|
||||
|
||||
.ha-uploadcontainer .ha-availablefiles {
|
||||
@apply px-16 border border-slate-200 hover:border-slate-800 py-2 cursor-pointer
|
||||
}
|
||||
|
||||
.ha-uploadcontainer .ha-availablefiles .ha-availablefilestitle {
|
||||
@apply text-2xl
|
||||
}
|
||||
|
||||
.ha-uploadcontainer .ha-availablefiles .ha-usedfilelist {
|
||||
|
||||
}
|
||||
|
||||
.ha-filesheader {
|
||||
@apply mb-8
|
||||
}
|
||||
|
||||
.ha-availablefileslist {
|
||||
@apply px-16 pt-4
|
||||
}
|
||||
|
||||
.ha-uploadcontainer .ha-errorswarnings {
|
||||
@apply flex flex-row gap-x-2
|
||||
}
|
||||
@@ -790,6 +791,55 @@
|
||||
@apply w-full bg-cyan-200 grow shrink-0 h-full min-h-[400px]
|
||||
}
|
||||
|
||||
.ha-uploadcontainer .ha-hamannfilechooser {
|
||||
@apply px-16 pb-16
|
||||
}
|
||||
|
||||
/* Classes for FileList Component */
|
||||
.ha-filelistfieldset {
|
||||
|
||||
}
|
||||
|
||||
.ha-filelistfieldset .ha-filelistlegend {
|
||||
@apply mb-2 text-xl
|
||||
}
|
||||
|
||||
.ha-selectfilesform {
|
||||
|
||||
}
|
||||
|
||||
.ha-selectfilesform .ha-filelistfile {
|
||||
@apply flex flex-row gap-x-4
|
||||
}
|
||||
|
||||
.ha-selectfilesform .ha-filelistlist {
|
||||
@apply h-96 overflow-x-hidden overflow-y-scroll pr-4
|
||||
}
|
||||
|
||||
.ha-selectfilesform .ha-filelistfile .ha-filelistname {
|
||||
@apply font-mono
|
||||
}
|
||||
|
||||
.ha-selectfilesform .ha-filelistfile .ha-filelistusedproduction {
|
||||
@apply text-sm self-start
|
||||
}
|
||||
|
||||
.ha-selectfilesform .ha-filelistfile .ha-filelistusedproduction .ha-filelistproduction {
|
||||
@apply inline-block border rounded-md text-teal-600 border-teal-600 px-2 mr-2
|
||||
}
|
||||
|
||||
.ha-selectfilesform .ha-filelistfile .ha-filelistusedproduction .ha-filelistused {
|
||||
@apply inline-block border rounded-md text-indigo-600 border-indigo-600 px-2
|
||||
}
|
||||
|
||||
.ha-selectfilesform .ha-filelistfile .ha-filelistmodified {
|
||||
@apply grow text-right
|
||||
}
|
||||
|
||||
.ha-selectfilesform .ha-filelistbutton {
|
||||
@apply mt-2 ml-6 rounded-md px-3 border-2 border-blue-700 hover:bg-blue-300 cursor-pointer float-right;
|
||||
}
|
||||
|
||||
/* Classes for Letter View */
|
||||
|
||||
.ha-letterheader {
|
||||
|
||||
Reference in New Issue
Block a user