LibreCCM
/
libreccm
3
0
Fork 0
Code Issues 10 Pull Requests Packages Releases Wiki Activity

Layout draft for folder browser

Jens Pelzetter 2021-01-20 21:28:57 +01:00
parent 1c0081c990
commit 7a97fba95b
5 changed files with 176 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

109
ccm-cms/src/main/resources/WEB-INF/views/org/librecms/ui/content-section/folderbrowser.xhtml
View File

@ -18,7 +18,114 @@
<div class="container-fluid"> <div class="container-fluid">
<h1>#{CmsAdminMessages.getMessage("folderbrowser.heading", [ContentSectionModel.sectionName])}</h1> <h1>#{CmsAdminMessages.getMessage("folderbrowser.heading", [ContentSectionModel.sectionName])}</h1>
<p>placeholder</p> <div class="row">
<nav class="col-sm-3 folderbrowser">
<ul class="nav flex-column border">
<li class="nav-item">
<a class="nav-link" href="#">Folder 1</a>
</li>
<li class="nav-item">
<div class="d-flex">
<button class="btn btn-light pr-0 subfolders-toggler"
data-toggle="collapse"
data-target="#folder-2-subfolders"
aria-expanded="false"
aria-controls="folder-2-subfolders"
type="button">
<!--<bootstrap:svgIcon icon="caret-right-fill" />-->
<span class="sr-only">
#{CmsAdminMessages['contentsection.folderbrowser.foldersnav.subfolders.expand']}
</span>
</button>
<a class="nav-link pl-0" href="#">Folder 2</a>
</div>
<ul class="nav flex-column collapse"
id="folder-2-subfolders">
<li class="nav-item">
<a class="nav-link" href="#">Folder 2-1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Folder 2-2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Folder 2-3</a>
</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Folder 3</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Folder 4</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Folder 5</a>
</li>
</ul>
</nav>
<table class="col-sm-9 table table-hover folderbrowser">
<thead class="thead-light">
<tr>
<th>
#{CmsAdminMessages['contentsection.folderbrowser.headers.name.label']}
</th>
<th>
#{CmsAdminMessages['contentsection.folderbrowser.headers.languages.label']}
</th>
<th>
#{CmsAdminMessages['contentsection.folderbrowser.headers.title.label']}
</th>
<th>
#{CmsAdminMessages['contentsection.folderbrowser.headers.type.label']}
</th>
<th>
#{CmsAdminMessages['contentsection.folderbrowser.headers.creationdate.label']}
</th>
<th>
#{CmsAdminMessages['contentsection.folderbrowser.headers.lastedit.label']}
</th>
<th>
#{CmsAdminMessages['contentsection.folderbrowser.headers.actions.label']}
</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="#">folder-1</a></td>
<td></td>
<td>Folder 1</td>
<td>Ordner</td>
<td>2021-01-20 08:59</td>
<td>2021-01-20 08:59</td>
<td></td>
</tr>
<tr>
<td><a href="#">an-item</a></td>
<td>de, en</td>
<td>An item</td>
<td>Article</td>
<td>2021-01-20 09:03</td>
<td>2021-01-20 10:11 (#{CmsAdminMessages['contentsection.folderbrowser.cols.lastedit.published']})</td>
<td></td>
</tr>
<tr>
<td><a href="#">unpublished-item</a></td>
<td>de, en</td>
<td>Unppublished item item</td>
<td>Article</td>
<td>2021-01-20 10:31</td>
<td>2021-01-20 10:34 (#{CmsAdminMessages['contentsection.folderbrowser.cols.lastedit.unpublished']})</td>
<td>
<button class="btn btn-danger"
type="button">
<bootstrap:svgIcon icon="x-circle" />
<span>#{CmsAdminMessages['contentsection.folderbrowser.actions.delete.button.label']}</span>
</button>
</td>
</tr>
</tbody>
</table>
</div>
</div> </div>
</ui:define> </ui:define>

11
ccm-cms/src/main/resources/org/librecms/CmsAdminMessages.properties
View File

@ -26,3 +26,14 @@ contentsections.edit_dialog.save=Rename content section
contentsections.edit_dialog.name.help=The name of the content section. Can only contain the letters a to z, the numbers 0-9, the hyphen and the underscore. contentsections.edit_dialog.name.help=The name of the content section. Can only contain the letters a to z, the numbers 0-9, the hyphen and the underscore.
folderbrowser.title=Folder Browser folderbrowser.title=Folder Browser
folderbrowser.heading=Content Section {0} Folderbrowser folderbrowser.heading=Content Section {0} Folderbrowser
contentsection.folderbrowser.headers.name.label=Name
contentsection.folderbrowser.headers.languages.label=Languages
contentsection.folderbrowser.headers.title.label=Title
contentsection.folderbrowser.headers.type.label=Type
contentsection.folderbrowser.headers.creationdate.label=Created
contentsection.folderbrowser.headers.lastedit.label=Last edit
contentsection.folderbrowser.headers.actions.label=Aktionen
contentsection.folderbrowser.cols.lastedit.published=Published
contentsection.folderbrowser.cols.lastedit.unpublished=Not published yet
contentsection.folderbrowser.actions.delete.button.label=Delete
contentsection.folderbrowser.foldersnav.subfolders.expand=Show subfolders of

11
ccm-cms/src/main/resources/org/librecms/CmsAdminMessages_de.properties
View File

@ -26,3 +26,14 @@ contentsections.edit_dialog.save=Content Section umbenennen
contentsections.edit_dialog.name.help=Der Name der Content Section. Darf nur die Zeichen a bis z, 0-9, the Bindestrich und den Unterstrich enthalten. contentsections.edit_dialog.name.help=Der Name der Content Section. Darf nur die Zeichen a bis z, 0-9, the Bindestrich und den Unterstrich enthalten.
folderbrowser.title=Ordner folderbrowser.title=Ordner
folderbrowser.heading=Content Section {0} Ordner folderbrowser.heading=Content Section {0} Ordner
contentsection.folderbrowser.headers.name.label=Name
contentsection.folderbrowser.headers.languages.label=Sprachen
contentsection.folderbrowser.headers.title.label=Titel
contentsection.folderbrowser.headers.type.label=Typ
contentsection.folderbrowser.headers.creationdate.label=Erstellt
contentsection.folderbrowser.headers.lastedit.label=Letzte \u00c4nderung
contentsection.folderbrowser.headers.actions.label=Aktionen
contentsection.folderbrowser.cols.lastedit.published=Publiziert
contentsection.folderbrowser.cols.lastedit.unpublished=Nicht nicht publiziert
contentsection.folderbrowser.actions.delete.button.label=L\u00f6schen
contentsection.folderbrowser.foldersnav.subfolders.expand=Unterordner anzeigen

49
ccm-cms/src/main/scss/content-sections/_custom.scss
View File

@ -1,16 +1,16 @@
$grid-breakpoints: ( $grid-breakpoints: (
xs: 0, xs: 0,
sm: 36rem, sm: 36rem,
md: 48rem, md: 48rem,
lg: 62rem, lg: 62rem,
xl: 75rem xl: 75rem
); );
$container-max-widths: ( $container-max-widths: (
sm: 33.75rem, sm: 33.75rem,
md: 45rem, md: 45rem,
lg: 60rem, lg: 60rem,
xl: 71.25rem xl: 71.25rem
); );
$grid-gutter-width: 1.875rem; $grid-gutter-width: 1.875rem;
@ -38,6 +38,37 @@ $pre-scrollable-max-height: 21.25rem;
// Navbar default colors have insufficient contrast // Navbar default colors have insufficient contrast
$navbar-dark-color: #fff; $navbar-dark-color: #fff;
nav.folderbrowser {
& > ul.nav {
margin-left: 1em;
margin-right: 1em;
ul.nav {
margin-left: 1.5em;
}
}
button.subfolders-toggler[aria-expanded="false"]::before {
display: inline-block;
content: "";
background-image: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='%23333' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M12.14 8.753l-5.482 4.796c-.646.566-1.658.106-1.658-.753V3.204a1 1 0 0 1 1.659-.753l5.48 4.796a1 1 0 0 1 0 1.506z' clip-rule='evenodd'/></svg>");
background-repeat: no-repeat;
background-size: 1em 1em;
width: 1em;
height: 1em;
}
button.subfolders-toggler[aria-expanded="true"]::before {
display: inline-block;
content: "";
background-image: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='%23333' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z' clip-rule='evenodd'/></svg>");
background-repeat: no-repeat;
background-size: 1em 1em;
width: 1em;
height: 1em;
}
}
table.contentsections-table { table.contentsections-table {
tbody { tbody {
td.action-col { td.action-col {

1
ccm-cms/src/main/typescript/content-sections/cms-admin.ts
View File

@ -1 +1,2 @@
import "bootstrap"; import "bootstrap";