From 7a97fba95ba7268acd91f1c40e8f5344357346f5 Mon Sep 17 00:00:00 2001
From: Jens Pelzetter <jens@jp-digital.de>
Date: Wed, 20 Jan 2021 21:28:57 +0100
Subject: [PATCH] Layout draft for folder browser

---
 .../ui/content-section/folderbrowser.xhtml    | 117 +++++++++++++++++-
 .../org/librecms/CmsAdminMessages.properties  |  11 ++
 .../librecms/CmsAdminMessages_de.properties   |  11 ++
 .../main/scss/content-sections/_custom.scss   |  49 ++++++--
 .../typescript/content-sections/cms-admin.ts  |   3 +-
 5 files changed, 176 insertions(+), 15 deletions(-)

diff --git a/ccm-cms/src/main/resources/WEB-INF/views/org/librecms/ui/content-section/folderbrowser.xhtml b/ccm-cms/src/main/resources/WEB-INF/views/org/librecms/ui/content-section/folderbrowser.xhtml
index 022870e6a..e7ccb1a1c 100644
--- a/ccm-cms/src/main/resources/WEB-INF/views/org/librecms/ui/content-section/folderbrowser.xhtml
+++ b/ccm-cms/src/main/resources/WEB-INF/views/org/librecms/ui/content-section/folderbrowser.xhtml
@@ -5,7 +5,7 @@
       xmlns:libreccm="http://xmlns.jcp.org/jsf/composite/components/libreccm"
       xmlns:ui="http://xmlns.jcp.org/jsf/facelets">
     <ui:composition template="/WEB-INF/views/org/librecms/ui/content-section/contentsection.xhtml">
-        
+
         <ui:param name="activePage" value="folderBrowser" />
         <ui:param name="title" value="#{CmsAdminMessages['folderbrowser.title']}" />
         <ui:define name="breadcrumb">
@@ -13,14 +13,121 @@
                 #{CmsAdminMessages['contentsections.list.label']}
             </li>
         </ui:define>
-        
+
         <ui:define name="main">
             <div class="container-fluid">
                 <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>
         </ui:define>
-        
+
     </ui:composition>
 </html>
diff --git a/ccm-cms/src/main/resources/org/librecms/CmsAdminMessages.properties b/ccm-cms/src/main/resources/org/librecms/CmsAdminMessages.properties
index 1d04a6d38..b01dcd644 100644
--- a/ccm-cms/src/main/resources/org/librecms/CmsAdminMessages.properties
+++ b/ccm-cms/src/main/resources/org/librecms/CmsAdminMessages.properties
@@ -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.
 folderbrowser.title=Folder Browser
 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 
diff --git a/ccm-cms/src/main/resources/org/librecms/CmsAdminMessages_de.properties b/ccm-cms/src/main/resources/org/librecms/CmsAdminMessages_de.properties
index 8420ef98e..65675e4d0 100644
--- a/ccm-cms/src/main/resources/org/librecms/CmsAdminMessages_de.properties
+++ b/ccm-cms/src/main/resources/org/librecms/CmsAdminMessages_de.properties
@@ -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.
 folderbrowser.title=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
diff --git a/ccm-cms/src/main/scss/content-sections/_custom.scss b/ccm-cms/src/main/scss/content-sections/_custom.scss
index edab43adc..06afd165b 100644
--- a/ccm-cms/src/main/scss/content-sections/_custom.scss
+++ b/ccm-cms/src/main/scss/content-sections/_custom.scss
@@ -1,16 +1,16 @@
 $grid-breakpoints: (
-    xs: 0,
-    sm: 36rem,
-    md: 48rem,
-    lg: 62rem,
-    xl: 75rem
+xs: 0,
+sm: 36rem,
+md: 48rem,
+lg: 62rem,
+xl: 75rem
 );
 
 $container-max-widths: (
-    sm: 33.75rem,
-    md: 45rem,
-    lg: 60rem,
-    xl: 71.25rem
+sm: 33.75rem,
+md: 45rem,
+lg: 60rem,
+xl: 71.25rem
 );
 
 $grid-gutter-width: 1.875rem;
@@ -38,6 +38,37 @@ $pre-scrollable-max-height: 21.25rem;
 // Navbar default colors have insufficient contrast
 $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 {
     tbody {
         td.action-col {
diff --git a/ccm-cms/src/main/typescript/content-sections/cms-admin.ts b/ccm-cms/src/main/typescript/content-sections/cms-admin.ts
index 6fcacc09f..7eb9154d6 100644
--- a/ccm-cms/src/main/typescript/content-sections/cms-admin.ts
+++ b/ccm-cms/src/main/typescript/content-sections/cms-admin.ts
@@ -1 +1,2 @@
-import "bootstrap";
\ No newline at end of file
+import "bootstrap";
+