From 23d3d8a0d877c86f68dc5d39f898422390f0970a Mon Sep 17 00:00:00 2001
From: trendschau <trendschau@gmail.com>
Date: Thu, 13 Jun 2024 21:16:26 +0200
Subject: [PATCH] Add accordeon to theme configs and folgerlist to cyanine
 landingpageInfo

---
 system/typemill/Models/Extension.php     | 16 +++++---
 system/typemill/author/css/custom.css    | 15 ++++++-
 system/typemill/author/css/output.css    | 51 +++++++++++-------------
 system/typemill/author/js/vue-themes.js  | 50 +++++++++++------------
 themes/cyanine/cyanine.yaml              |  9 +++++
 themes/cyanine/home/landingpageInfo.twig | 30 +++++++++++++-
 6 files changed, 109 insertions(+), 62 deletions(-)

diff --git a/system/typemill/Models/Extension.php b/system/typemill/Models/Extension.php
index 21096bc..cf0151c 100644
--- a/system/typemill/Models/Extension.php
+++ b/system/typemill/Models/Extension.php
@@ -87,11 +87,17 @@ class Extension
 		$themeSettings 		= $this->storage->getYaml('themesFolder', $themeName, $themeName . '.yaml');
 
 		# add standard-textarea for custom css
-		$themeSettings['forms']['fields']['customcss'] = [
-			'type' 			=> 'codearea', 
-			'label' 		=> Translations::translate('Custom CSS'), 
-			'class' 		=> 'codearea', 
-			'description' 	=> Translations::translate('You can overwrite the theme-css with your own css here.')
+		$themeSettings['forms']['fields']['fieldsetcss'] = [
+			'type' 			=> 'fieldset', 
+			'legend' 		=> Translations::translate('Custom CSS'), 
+			'fields'		=> [
+				'customcss' => [
+					'type' 			=> 'codearea', 
+					'label' 		=> Translations::translate('Add your individual CSS'), 
+					'class' 		=> 'codearea', 
+					'description' 	=> Translations::translate('You can overwrite the theme-css with your own css here.')
+				]
+			]
 		];
 
 		$themeSettings['preview'] = '/themes/' . $themeName . '/' . $themeName . '.png';
diff --git a/system/typemill/author/css/custom.css b/system/typemill/author/css/custom.css
index 3eddfb6..7a214bc 100644
--- a/system/typemill/author/css/custom.css
+++ b/system/typemill/author/css/custom.css
@@ -57,8 +57,21 @@
   opacity: 0;
 }
 
+.accordion-enter-active, .accordion-leave-active {
+  transition: max-height 0.5s ease, padding 0.5s ease;
+  overflow: hidden;
+}
 
- .editableinput {
+.accordion-enter, .accordion-leave-to {
+  max-height: 0;
+  padding: 0;
+}
+
+.accordion-content {
+  overflow: hidden;
+}
+
+.editableinput {
     border: none;
     outline: none;
     background-color: transparent;
diff --git a/system/typemill/author/css/output.css b/system/typemill/author/css/output.css
index 701d534..569cb67 100644
--- a/system/typemill/author/css/output.css
+++ b/system/typemill/author/css/output.css
@@ -718,18 +718,6 @@ video {
   top: 2.5rem;
 }
 
-.left-1 {
-  left: 0.25rem;
-}
-
-.right-1 {
-  right: 0.25rem;
-}
-
-.bottom-1 {
-  bottom: 0.25rem;
-}
-
 .z-10 {
   z-index: 10;
 }
@@ -746,6 +734,10 @@ video {
   float: right;
 }
 
+.float-left {
+  float: left;
+}
+
 .m-0 {
   margin: 0px;
 }
@@ -898,14 +890,14 @@ video {
   margin-top: 1rem;
 }
 
-.mt-7 {
-  margin-top: 1.75rem;
-}
-
 .mt-auto {
   margin-top: auto;
 }
 
+.mt-7 {
+  margin-top: 1.75rem;
+}
+
 .block {
   display: block;
 }
@@ -982,10 +974,6 @@ video {
   height: 12rem;
 }
 
-.h-64 {
-  height: 16rem;
-}
-
 .h-40 {
   height: 10rem;
 }
@@ -1130,10 +1118,6 @@ video {
   flex-grow: 1;
 }
 
-.grow {
-  flex-grow: 1;
-}
-
 .border-collapse {
   border-collapse: collapse;
 }
@@ -1412,6 +1396,16 @@ video {
   border-top-color: rgb(255 255 255 / var(--tw-border-opacity));
 }
 
+.border-t-black {
+  --tw-border-opacity: 1;
+  border-top-color: rgb(0 0 0 / var(--tw-border-opacity));
+}
+
+.border-b-black {
+  --tw-border-opacity: 1;
+  border-bottom-color: rgb(0 0 0 / var(--tw-border-opacity));
+}
+
 .bg-teal-600 {
   --tw-bg-opacity: 1;
   background-color: rgb(13 148 136 / var(--tw-bg-opacity));
@@ -1480,6 +1474,11 @@ video {
   background-color: rgb(234 179 8 / var(--tw-bg-opacity));
 }
 
+.bg-stone-300 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(214 211 209 / var(--tw-bg-opacity));
+}
+
 .bg-opacity-90 {
   --tw-bg-opacity: 0.9;
 }
@@ -2356,10 +2355,6 @@ video {
     width: 25%;
   }
 
-  .lg\:w-full {
-    width: 100%;
-  }
-
   .lg\:flex-row {
     flex-direction: row;
   }
diff --git a/system/typemill/author/js/vue-themes.js b/system/typemill/author/js/vue-themes.js
index 3578cd8..0b19ccb 100644
--- a/system/typemill/author/js/vue-themes.js
+++ b/system/typemill/author/js/vue-themes.js
@@ -86,17 +86,21 @@ const app = Vue.createApp({
 									</fieldset>
 								</div>
 								<div v-for="(fieldDefinition, fieldname) in theme.forms.fields">
-									<fieldset class="flex flex-wrap justify-between border-2 border-stone-200 p-4 my-8" v-if="fieldDefinition.type == 'fieldset'">
-										<legend class="text-lg font-medium">{{ fieldDefinition.legend }}</legend>
-										<component v-for="(subfieldDefinition, subfieldname) in fieldDefinition.fields"
-											:key="subfieldname"
-											:is="selectComponent(subfieldDefinition.type)"
-											:errors="errors"
-											:name="subfieldname"
-											:userroles="userroles"
-											:value="formData[themename][subfieldname]" 
-											v-bind="subfieldDefinition">
-										</component>
+									<fieldset class="flex flex-wrap justify-between border-2 border-stone-200 p-4 my-8" v-if="fieldDefinition.type == 'fieldset'" :class="{ 'open': isOpen(fieldname) }">
+										<legend @click="toggleAccordion(fieldname)" class="float-left w-full py-2 text-lg font-medium cursor-pointer">{{ fieldDefinition.legend }} <span class="mt-2 float-right h-0 w-0 border-x-8 border-x-transparent" :class="isOpen(fieldname) ? 'border-b-8 border-b-black' : 'border-t-8 border-t-black'"></span></legend>
+										<transition name="accordion">
+									        <div v-if="isOpen(fieldname)" class="w-full accordion-content">
+												<component v-for="(subfieldDefinition, subfieldname) in fieldDefinition.fields"
+													:key="subfieldname"
+													:is="selectComponent(subfieldDefinition.type)"
+													:errors="errors"
+													:name="subfieldname"
+													:userroles="userroles"
+													:value="formData[themename][subfieldname]" 
+													v-bind="subfieldDefinition">
+												</component>
+											</div>
+										</transition>
 									</fieldset>
 									<component v-else
 										:key="fieldname"
@@ -119,19 +123,6 @@ const app = Vue.createApp({
 							</form>
 						</li>
 					</ul>
-					<div class="my-5 text-center">
-						<modal v-if="showModal" @close="showModal = false">
-							<template #header>
-								<h3>{{ $filters.translate('License required') }}</h3>
-							</template>
-							<template #body>
-								<p>{{ $filters.translate(modalMessage) }}</p>
-							</template>
-							<template #button>
-								<a :href="getLinkToLicense()" class="focus:outline-none px-4 p-3 mr-3 text-white bg-teal-500 hover:bg-teal-700 transition duration-100">{{ $filters.translate('Check your license') }}</a>
-							</template>
-						</modal>
-					</div>					
 				</div>
 			</Transition>`,
 	data() {
@@ -151,7 +142,8 @@ const app = Vue.createApp({
 			versions: 				false,
 			userroles: 				false,
 			showModal: 				false,
-			modalMessage: 			'default',			
+			modalMessage: 			'default',
+			accordionState: 		{},						
 		}
 	},
 	components: {
@@ -429,6 +421,12 @@ const app = Vue.createApp({
 			this.errors 			= {};
 			this.message 			= '';
 			this.messageClass		= '';
-		}
+		},
+		toggleAccordion: function(fieldname){
+		    this.accordionState[fieldname] = !this.accordionState[fieldname];
+		},
+		isOpen: function(fieldname){
+			return !!this.accordionState[fieldname];
+		}		
 	},
 })
\ No newline at end of file
diff --git a/themes/cyanine/cyanine.yaml b/themes/cyanine/cyanine.yaml
index d6677db..84dcfa6 100644
--- a/themes/cyanine/cyanine.yaml
+++ b/themes/cyanine/cyanine.yaml
@@ -483,6 +483,12 @@ forms:
         infoMarkdown:
           type: textarea
           label: Use Markdown
+        infoFolder:
+          type: text
+          label: List entries from folder
+          placeholder: /folder
+          description: Add a path to a folder from which you want to list entries
+          css: 'lg:w-full'
 
     landingpageTeaser:
       type: fieldset
@@ -894,6 +900,9 @@ metatabs:
         options:
           standard: 'Standard'
           landingpage: 'Landingpage'      
+      shorttitle:
+        type: text
+        label: Enter a shorttitle for the landingpageInfo section
       fieldsetfolder:
         fields:
           glossary:
diff --git a/themes/cyanine/home/landingpageInfo.twig b/themes/cyanine/home/landingpageInfo.twig
index c53fa77..82a73c2 100644
--- a/themes/cyanine/home/landingpageInfo.twig
+++ b/themes/cyanine/home/landingpageInfo.twig
@@ -1,9 +1,35 @@
-	<section id="landingpageinfo" class="landingpageinfo w-100 dib tc bl br bb">
+	<section id="landingpageinfo" class="landingpageinfo w-100 pv6 dib tc bl br bb">
 		
-		<div class="f5 f4-ns mw7 pv6 ph3 fw3 lh-copy center">
+		<div class="f5 f4-ns mw7 ph3 fw3 lh-copy center">
 			
 			{{ markdown(settings.themes.cyanine.infoMarkdown) }}
 
 		</div>
 	
+		{% if settings.themes.cyanine.infoFolder %}
+
+			<div class="mw8 pv2 center">
+
+				{% set pagelist = getPageList(navigation, settings.themes.cyanine.infoFolder, base_url) %}
+
+				<ul class="flex-l flex-wrap justify-between pa0">
+
+					{% for element in pagelist.folderContent %}
+
+						{% set page = getPageMeta(settings, element) %}
+
+						<li class="ba b--light-gray pa2 pa3-ns db list tl w-100 w-30-l mh0 mv2 mh2-l flex flex-column flex-grow">
+							<h3>{{ page.meta.shorttitle }}</h3>
+							<p class="f5 lh-copy flex-grow">{{ page.meta.description }}</p>
+							<a class="db link w-100 mv2 pa3 bg-near-black dim tc" href="{{ element.urlAbs }}">{{ page.meta.shorttitle }}</a>
+						</li>
+
+					{% endfor %}
+
+				</ul>
+
+			</div>
+
+		{% endif %}
+
 	</section>
\ No newline at end of file