added a folder view

README.md

@@ -29,4 +29,6 @@ If you want to customize the CSS, you will usually follow the ["Create Custom St
 * 2022-07
   * Activated lightspeed
   * Activated ajax reloading
-  * Updated webpack.config
+  * Updated webpack.config
+* 2022-08 v01.01.00
+  * Added a folder view

Shared/LinkHelper.cs

@@ -19,6 +19,8 @@ public dynamic LinkInfos(string link, string window, string icon) {
     // process remaining properties, in case we want to override them with automatic stuff
     if(found) {
       var linkExt = Path.GetExtension(link.ToLower());
+      // get the right fontawesome class ending for the file type
+      var filetypeIcon = iconEnding(linkExt);
       var isDoc = fileExtensions.Contains(linkExt);
 
       // try to find out if it's a local link
@@ -31,7 +33,7 @@ public dynamic LinkInfos(string link, string window, string icon) {
       // but only if no icon was specified already
       if(!Text.Has(icon))
         icon = isDoc
-        ? "fas fa-file" // if doc, then file-icon
+        ? "fas fa-file" + filetypeIcon // if doc, then file-icon + add the file ending for the right file type
         : (isInternal
           ? "fas fa-caret-right" // else if internal, use play-button
           : "fas fa-external-link-alt");   // else if external, show "open new window"
@@ -48,4 +50,20 @@ public dynamic LinkInfos(string link, string window, string icon) {
       Window = window,
     });
   }
+
+  public string iconEnding(string linkExt){
+
+    if(linkExt == ".pdf")
+      return "-pdf";
+    else if(linkExt == ".doc" || linkExt == ".docx")
+      return "-word";
+    else if(linkExt == ".xls" || linkExt == ".xlsx")
+      return "-excel";
+    else if(linkExt == ".ppt" || linkExt == ".pptx" || linkExt == ".ppsx")
+      return "-powerpoint";
+    else if(linkExt == ".txt")
+      return "-alt";
+    else 
+      return "";
+  }
 }

Shared/_Assets.cshtml

@@ -18,4 +18,7 @@
 
   // 4. Include styles of the App
   <link rel="stylesheet" href="@App.Path/@CmsContext.View.Edition/dist/styles.min.css" @Kit.Page.AssetAttributes()/>
+
+  // 5. Include scritps of the App
+  <script src="@App.Path/@CmsContext.View.Edition/dist/scripts.min.js" @Kit.Page.AssetAttributes()></script>
 }

bs3/_FileList.cshtml

@@ -7,7 +7,7 @@
 	var listItemToolbar = Kit.Toolbar.Default().Layout("-");
 }
 
-<div class="app-filelist" @Kit.Toolbar.Default(Header).Settings(hover: "left", autoAddMore: "start")>
+<div class="app-filelist" @Kit.Toolbar.Default(Header)>
 	@* call sub-template to show the title with the correct H1-H6 tag *@
 	@Html.Partial("../Shared/_Header tag.cshtml", new { Title = Header.Title })
 

bs3/_Folder.cshtml

@@ -0,0 +1,39 @@
+@inherits Custom.Hybrid.Razor14
+
+@{
+  // get helper commands
+  var linkHelper = CreateInstance("../Shared/LinkHelper.cs");
+
+	var fileMetadataToolbar = Kit.Toolbar.Empty().Edit().Add();
+
+  Kit.Page.Activate("Fontawesome5");
+}
+
+<div class="app-filelist mb-4" @Kit.Toolbar.Default(Content)>
+  <h1>@Content.Title</h1>
+  <div class="list-group">
+    @foreach (var file in AsList(AsAdam(Content,"Files").Files as object)) {
+      <a href="@file.Url" class="list-group-item list-group-item-action ps-2" aria-current="true" @fileMetadataToolbar.For(file.Metadata)>
+        <i class="co-icon fas @file.Metadata.Icon" aria-hidden="true"></i>
+        <span>
+          <strong>@file.Metadata.Title</strong>
+          @{
+            var sizeInfo = Kit.Adam.File(file.Id).SizeInfo;
+          }
+          @if(sizeInfo.BestSize > 0){
+            <text>(@sizeInfo.BestSize.ToString("#.##") @sizeInfo.BestUnit)</text>
+          }
+          <span class="description-wrapper">
+            @Html.Raw(file.Metadata.Description)
+          </span>
+        </span>
+      </a>
+    }
+
+    @foreach(var folder in AsList(AsAdam(Content, "Files").Folders as object)){
+      @Html.Partial("_Subfolder.cshtml", new { Folder = folder, Level = 2 })
+    }
+  </div>
+</div>
+
+@Html.Partial("../Shared/_Assets.cshtml")

bs3/_Subfolder.cshtml

@@ -0,0 +1,44 @@
+@inherits Custom.Hybrid.Razor14
+@using System.Text.RegularExpressions;
+@using ToSic.Razor.Blade;
+@{
+  var Folder = DynamicModel.Folder;
+
+  var level = DynamicModel.Level;
+
+	var fileMetadataToolbar = Kit.Toolbar.Empty().Edit().Add();
+}
+<a class="list-group-item ps-@level" href="#[email protected]" data-bs-toggle="collapse"  role="button" aria-expanded="false" aria-controls="[email protected]">
+  <i class="co-icon fas fa-folder" aria-hidden="true"></i>
+  <strong>@Folder.Name</strong>
+</a>
+
+@{
+  level = level + 1;
+}
+<div id="[email protected]" class="collapse">
+  @if(AsList(Folder.Files) != null){
+    foreach(var file in AsList(Folder.Files)){
+      <a href="@file.Url" class="list-group-item list-group-item-action ps-@level" aria-current="true" @fileMetadataToolbar.For(file.Metadata)>
+        <i class="co-icon fas @file.Metadata.Icon" aria-hidden="true"></i>
+        <span>
+          <strong>@file.Metadata.Title</strong>
+          @{
+            var sizeInfo = Kit.Adam.File(file.Id).SizeInfo;
+          }
+          @if(sizeInfo.BestSize > 0){
+            <text>(@sizeInfo.BestSize.ToString("#.##") @sizeInfo.BestUnit)</text>
+          }
+          <span class="description-wrapper">
+            @Html.Raw(file.Metadata.Description)
+          </span>
+        </span>
+      </a>
+    }
+  }
+  @if(AsList(Folder.Files) != null){
+    foreach(var folder in AsList(Folder.Folders)){
+      @Html.Partial("_Subfolder.cshtml", new { Folder = folder, Level = level })
+    }
+  }
+</div>

bs3/styles/_style.scss

@@ -14,5 +14,11 @@
         }
       }
     }
+
+    .description-wrapper{
+      p{
+        margin: 0!important;
+      }
+    }
   }
 }

bs4/_FileList.cshtml

@@ -7,7 +7,7 @@
 	var listItemToolbar = Kit.Toolbar.Default().Layout("-");
 }
 
-<div class="app-filelist mb-4" @Kit.Toolbar.Default(Header).Settings(hover: "left", autoAddMore: "start")>
+<div class="app-filelist mb-4" @Kit.Toolbar.Default(Header)>
 	@* call sub-template to show the title with the correct H1-H6 tag *@
 	@Html.Partial("../Shared/_Header tag.cshtml", new { Title = Header.Title })
 

bs4/_Folder.cshtml

@@ -0,0 +1,39 @@
+@inherits Custom.Hybrid.Razor14
+
+@{
+  // get helper commands
+  var linkHelper = CreateInstance("../Shared/LinkHelper.cs");
+
+	var fileMetadataToolbar = Kit.Toolbar.Empty().Edit().Add();
+
+  Kit.Page.Activate("Fontawesome5");
+}
+
+<div class="app-filelist mb-4" @Kit.Toolbar.Default(Content)>
+  <h1>@Content.Title</h1>
+  <div class="list-group">
+    @foreach (var file in AsList(AsAdam(Content,"Files").Files as object)) {
+      <a href="@file.Url" class="list-group-item list-group-item-action pl-2" aria-current="true" @fileMetadataToolbar.For(file.Metadata)>
+        <i class="co-icon fas @file.Metadata.Icon" aria-hidden="true"></i>
+        <span>
+          <strong>@file.Metadata.Title</strong>
+          @{
+            var sizeInfo = Kit.Adam.File(file.Id).SizeInfo;
+          }
+          @if(sizeInfo.BestSize > 0){
+            <text>(@sizeInfo.BestSize.ToString("#.##") @sizeInfo.BestUnit)</text>
+          }
+          <span class="description-wrapper">
+            @Html.Raw(file.Metadata.Description)
+          </span>
+        </span>
+      </a>
+    }
+
+    @foreach(var folder in AsList(AsAdam(Content, "Files").Folders as object)){
+      @Html.Partial("_Subfolder.cshtml", new { Folder = folder, Level = 2 })
+    }
+  </div>
+</div>
+
+@Html.Partial("../Shared/_Assets.cshtml")

bs4/_Subfolder.cshtml

@@ -0,0 +1,44 @@
+@inherits Custom.Hybrid.Razor14
+@using System.Text.RegularExpressions;
+@using ToSic.Razor.Blade;
+@{
+  var Folder = DynamicModel.Folder;
+
+  var level = DynamicModel.Level;
+
+	var fileMetadataToolbar = Kit.Toolbar.Empty().Edit().Add();
+}
+<a class="list-group-item pl-@level" href="#[email protected]" data-toggle="collapse"  role="button" aria-expanded="false" aria-controls="[email protected]">
+  <i class="co-icon fas fa-folder" aria-hidden="true"></i>
+  <strong>@Folder.Name</strong>
+</a>
+
+@{
+  level = level + 1;
+}
+<div id="[email protected]" class="collapse">
+  @if(AsList(Folder.Files) != null){
+    foreach(var file in AsList(Folder.Files)){
+      <a href="@file.Url" class="list-group-item list-group-item-action pl-@level" aria-current="true" @fileMetadataToolbar.For(file.Metadata)>
+        <i class="co-icon fas @file.Metadata.Icon" aria-hidden="true"></i>
+        <span>
+          <strong>@file.Metadata.Title</strong>
+          @{
+            var sizeInfo = Kit.Adam.File(file.Id).SizeInfo;
+          }
+          @if(sizeInfo.BestSize > 0){
+            <text>(@sizeInfo.BestSize.ToString("#.##") @sizeInfo.BestUnit)</text>
+          }
+          <span class="description-wrapper">
+            @Html.Raw(file.Metadata.Description)
+          </span>
+        </span>
+      </a>
+    }
+  }
+  @if(AsList(Folder.Files) != null){
+    foreach(var folder in AsList(Folder.Folders)){
+      @Html.Partial("_Subfolder.cshtml", new { Folder = folder, Level = level })
+    }
+  }
+</div>

bs4/styles/_style.scss

@@ -13,4 +13,10 @@
       }
     }
   }
+
+  .description-wrapper{
+    p{
+      margin: 0!important;
+    }
+  }
 }

bs5/_FileList.cshtml

@@ -7,12 +7,12 @@
 	var listItemToolbar = Kit.Toolbar.Default().Layout("-");
 }
 
-<div class="app-filelist mb-4" @Kit.Toolbar.Default(Header).Settings(hover: "left", autoAddMore: "start")>
+<div class="app-filelist mb-4" @Kit.Toolbar.Default(Header)>
   @* call sub-template to show the title with the correct H1-H6 tag *@
   @Html.Partial("../Shared/_Header tag.cshtml", new { Title = Header.Title })
 
   <div class="list-group">
-    @foreach (var listItem in AsList(Data)) {
+    @foreach (var listItem in AsList(Data)) {      
       var linkInfo = linkHelper.LinkInfos(listItem);
       var isLocalFile = !listItem.FileLink.Contains("http");
 

bs5/_Folder.cshtml

@@ -0,0 +1,43 @@
+@inherits Custom.Hybrid.Razor14
+@using ToSic.Razor.Blade;
+@{
+  // get helper commands
+  var linkHelper = CreateInstance("../Shared/LinkHelper.cs");
+
+  Kit.Page.Activate("Fontawesome5");
+
+	var fileMetadataToolbar = Kit.Toolbar.Empty().Edit().Add();
+}
+
+<div class="app-filelist mb-4" @Kit.Toolbar.Default(Content)>
+  <h1>@Content.Title</h1>
+  <div class="list-group">
+    @foreach (var file in AsAdam(Content,"Files").Files) {
+      var fileTitle = Text.First(file.Metadata.Title, file.Name);
+
+      <a href="@file.Url" class="list-group-item list-group-item-action ps-2" aria-current="true" @fileMetadataToolbar.For(file.Metadata)>
+        <i class="co-icon fas @file.Metadata.Icon" aria-hidden="true"></i>
+        <span>
+          <strong>@fileTitle</strong>
+          @{
+            var sizeInfo = Kit.Adam.File(file.Id).SizeInfo;
+          }
+          @if(sizeInfo.BestSize > 0){
+            <text>(@sizeInfo.BestSize.ToString("#.##") @sizeInfo.BestUnit)</text>
+          } else {
+            <text>(0 KB)</text>
+          }
+          <span class="description-wrapper">
+            @Html.Raw(file.Metadata.Description)
+          </span>
+        </span>
+      </a>
+    }
+
+    @foreach(var folder in AsAdam(Content, "Files").Folders) {
+      @Html.Partial("_Subfolder.cshtml", new { Folder = folder, Level = 2 })
+    }
+  </div>
+</div>
+
+@Html.Partial("../Shared/_Assets.cshtml")