From f9bebcca0bd278d8b25257ba5bbf506863bd1201 Mon Sep 17 00:00:00 2001
From: Postema Max <max@elynor.com>
Date: Wed, 21 Feb 2024 09:59:45 +0100
Subject: [PATCH 1/5] feat: add additional css to theme

---
 .../src/components/layout/Molgenis.vue          |  7 +++++++
 apps/settings/src/components/Theme.vue          | 17 +++++++++++++++++
 2 files changed, 24 insertions(+)

diff --git a/apps/molgenis-components/src/components/layout/Molgenis.vue b/apps/molgenis-components/src/components/layout/Molgenis.vue
index 893f1d1dc7..d8cf8efdab 100644
--- a/apps/molgenis-components/src/components/layout/Molgenis.vue
+++ b/apps/molgenis-components/src/components/layout/Molgenis.vue
@@ -44,6 +44,9 @@
         </span>
       </span>
     </MolgenisFooter>
+    <style>
+      {{ additionalCss }}
+    </style>
   </div>
 </template>
 
@@ -122,6 +125,7 @@ export default {
       timestamp: Date.now(),
       analyticsId: null,
       cookieWallContent: null,
+      additionalCss: "",
     };
   },
   computed: {
@@ -208,6 +212,9 @@ export default {
         }
       `
     ).then((data) => {
+      this.additionalCss = data._settings.find(
+        (setting) => setting.key === "additionalCss"
+      )?.value;
       const analyticsSetting = data._settings.find(
         (setting) => setting.key === "ANALYTICS_ID"
       );
diff --git a/apps/settings/src/components/Theme.vue b/apps/settings/src/components/Theme.vue
index 208b7cfc18..1695e354af 100644
--- a/apps/settings/src/components/Theme.vue
+++ b/apps/settings/src/components/Theme.vue
@@ -19,6 +19,13 @@
         label="Set logo url"
         v-model="logoURL"
       />
+      <label><b>Additional Css</b></label>
+      <InputText
+        id="additional-css-input"
+        label="CSS"
+        v-model="additionalCss"
+      />
+
       <ButtonAction @click="saveSettings">Save theme</ButtonAction>
       <br /><br />
       <a :href="this.session.settings.cssURL">view theme css</a>
@@ -30,6 +37,7 @@
 import {
   ButtonAction,
   InputString,
+  InputText,
   MessageError,
   MessageSuccess,
   Spinner,
@@ -41,6 +49,7 @@ import { request } from "graphql-request";
 export default {
   components: {
     InputString,
+    InputText,
     ButtonAction,
     MessageError,
     MessageSuccess,
@@ -58,6 +67,7 @@ export default {
       loading: false,
       graphqlError: null,
       success: null,
+      additionalCss: null,
     };
   },
   created() {
@@ -70,6 +80,8 @@ export default {
   },
   methods: {
     loadSettings() {
+      console.log(this.session);
+      this.additionalCss = this.session?.settings?.additionalCss;
       if (this.session?.settings?.cssURL) {
         this.logoURL = this.session.settings.logoURL;
         const urlParams = new URL(
@@ -103,6 +115,11 @@ export default {
       } else {
         settingsDrop.push({ key: "logoURL" });
       }
+      if (this.additionalCss) {
+        settingsAlter.push({ key: "additionalCss", value: this.additionalCss });
+      } else {
+        settingsDrop.push({ key: "additionalCss" });
+      }
       this.$emit("reload");
       this.loading = true;
       this.loading = true;

From 526b1a5b4439bbafda67295213fd1bf5c8a600c2 Mon Sep 17 00:00:00 2001
From: Postema Max <max@elynor.com>
Date: Wed, 21 Feb 2024 16:08:51 +0100
Subject: [PATCH 2/5] feat: load/save additionalCss

---
 .../src/components/account/MolgenisSession.vue             | 6 +++++-
 .../molgenis-components/src/components/layout/Molgenis.vue | 7 -------
 apps/settings/src/components/Theme.vue                     | 3 +--
 3 files changed, 6 insertions(+), 10 deletions(-)

diff --git a/apps/molgenis-components/src/components/account/MolgenisSession.vue b/apps/molgenis-components/src/components/account/MolgenisSession.vue
index 4cf333f960..fb097f9e87 100644
--- a/apps/molgenis-components/src/components/account/MolgenisSession.vue
+++ b/apps/molgenis-components/src/components/account/MolgenisSession.vue
@@ -45,6 +45,9 @@
         :locales="locales"
       />
     </div>
+    <component is="style">
+      {{ session.settings.additionalCss }}
+    </component>
   </div>
 </template>
 
@@ -65,7 +68,7 @@ import { ISetting } from "meta-data-utils";
 const { cookies } = useCookies();
 const query = `{
   _session { email, roles, schemas, token, settings{key,value} },
-  _settings (keys: ["menu", "page.", "cssURL", "logoURL", "isOidcEnabled","locales"]){ key, value },
+  _settings (keys: ["menu", "page.", "cssURL", "logoURL", "isOidcEnabled","locales", "additionalCss"]){ key, value },
   _manifest { ImplementationVersion,SpecificationVersion,DatabaseVersion }
 }`;
 const defaultSession = { locale: "en", settings: {} };
@@ -140,6 +143,7 @@ export default defineComponent({
             : setting.value;
         this.session.settings[setting.key] = value;
       });
+      console.log("this.session.settings", this.session.settings);
     },
     async reload() {
       this.loading = true;
diff --git a/apps/molgenis-components/src/components/layout/Molgenis.vue b/apps/molgenis-components/src/components/layout/Molgenis.vue
index d8cf8efdab..893f1d1dc7 100644
--- a/apps/molgenis-components/src/components/layout/Molgenis.vue
+++ b/apps/molgenis-components/src/components/layout/Molgenis.vue
@@ -44,9 +44,6 @@
         </span>
       </span>
     </MolgenisFooter>
-    <style>
-      {{ additionalCss }}
-    </style>
   </div>
 </template>
 
@@ -125,7 +122,6 @@ export default {
       timestamp: Date.now(),
       analyticsId: null,
       cookieWallContent: null,
-      additionalCss: "",
     };
   },
   computed: {
@@ -212,9 +208,6 @@ export default {
         }
       `
     ).then((data) => {
-      this.additionalCss = data._settings.find(
-        (setting) => setting.key === "additionalCss"
-      )?.value;
       const analyticsSetting = data._settings.find(
         (setting) => setting.key === "ANALYTICS_ID"
       );
diff --git a/apps/settings/src/components/Theme.vue b/apps/settings/src/components/Theme.vue
index 1695e354af..16fc32534c 100644
--- a/apps/settings/src/components/Theme.vue
+++ b/apps/settings/src/components/Theme.vue
@@ -19,10 +19,9 @@
         label="Set logo url"
         v-model="logoURL"
       />
-      <label><b>Additional Css</b></label>
       <InputText
         id="additional-css-input"
-        label="CSS"
+        label="Additional Css"
         v-model="additionalCss"
       />
 

From 498abc2937e2c4623eadf54d6939bbc4fba9997e Mon Sep 17 00:00:00 2001
From: Postema Max <max@elynor.com>
Date: Wed, 21 Feb 2024 16:22:37 +0100
Subject: [PATCH 3/5] fix: improved some spacing

---
 apps/settings/src/components/Theme.vue | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/apps/settings/src/components/Theme.vue b/apps/settings/src/components/Theme.vue
index 16fc32534c..f306e776f4 100644
--- a/apps/settings/src/components/Theme.vue
+++ b/apps/settings/src/components/Theme.vue
@@ -15,6 +15,7 @@
       />
       {{ primaryColor }}
       <InputString
+        class="mt-3"
         id="theme-url-input"
         label="Set logo url"
         v-model="logoURL"
@@ -27,7 +28,12 @@
 
       <ButtonAction @click="saveSettings">Save theme</ButtonAction>
       <br /><br />
-      <a :href="this.session.settings.cssURL">view theme css</a>
+      <a
+        v-if="this.session.settings.cssURL"
+        :href="this.session.settings.cssURL"
+      >
+        view theme css
+      </a>
     </div>
   </div>
 </template>

From 155c9fbd7d7ae8933ef3dad002a2e03f4b2346e1 Mon Sep 17 00:00:00 2001
From: Postema Max <max@elynor.com>
Date: Wed, 21 Feb 2024 16:25:52 +0100
Subject: [PATCH 4/5] fix: remove console.log

---
 .../src/components/account/MolgenisSession.vue                   | 1 -
 apps/settings/src/components/Theme.vue                           | 1 -
 2 files changed, 2 deletions(-)

diff --git a/apps/molgenis-components/src/components/account/MolgenisSession.vue b/apps/molgenis-components/src/components/account/MolgenisSession.vue
index fb097f9e87..868d69e6a8 100644
--- a/apps/molgenis-components/src/components/account/MolgenisSession.vue
+++ b/apps/molgenis-components/src/components/account/MolgenisSession.vue
@@ -143,7 +143,6 @@ export default defineComponent({
             : setting.value;
         this.session.settings[setting.key] = value;
       });
-      console.log("this.session.settings", this.session.settings);
     },
     async reload() {
       this.loading = true;
diff --git a/apps/settings/src/components/Theme.vue b/apps/settings/src/components/Theme.vue
index f306e776f4..da01a1e340 100644
--- a/apps/settings/src/components/Theme.vue
+++ b/apps/settings/src/components/Theme.vue
@@ -85,7 +85,6 @@ export default {
   },
   methods: {
     loadSettings() {
-      console.log(this.session);
       this.additionalCss = this.session?.settings?.additionalCss;
       if (this.session?.settings?.cssURL) {
         this.logoURL = this.session.settings.logoURL;

From adeb34c3564748f1888a8bd71eb916f6254397d2 Mon Sep 17 00:00:00 2001
From: Postema Max <max@elynor.com>
Date: Wed, 21 Feb 2024 16:29:10 +0100
Subject: [PATCH 5/5] fix: remove directory styling from app

---
 apps/directory/src/App.vue | 37 -------------------------------------
 1 file changed, 37 deletions(-)

diff --git a/apps/directory/src/App.vue b/apps/directory/src/App.vue
index c2fa214b32..762df68877 100644
--- a/apps/directory/src/App.vue
+++ b/apps/directory/src/App.vue
@@ -83,40 +83,3 @@ export default {
   },
 };
 </script>
-
-<style>
-/* removing the built-in nav because it conflicts */
-nav[aria-label="breadcrumb"]:not(.directory-nav) {
-  display: none;
-}
-ol.breadcrumb {
-  margin-top: 0.25rem !important;
-  margin-bottom: 0.25rem !important;
-}
-
-/* emx2 style override */
-#app > div {
-  background-color: white !important;
-}
-nav.navbar {
-  background-color: #e9ecef !important;
-}
-nav.navbar a.nav-link,
-nav.navbar button.btn {
-  color: #495057 !important;
-  background-color: transparent;
-}
-nav.navbar a.nav-link:hover,
-nav.navbar button.btn:hover {
-  color: #ec6707 !important;
-}
-
-nav.navbar button.btn.btn-outline-light:not(.border-0) {
-  border-color: #495057 !important;
-}
-nav.navbar button.btn.btn-outline-light:not(.border-0):hover {
-  border-color: #ec6707 !important;
-  background-color: #ec6707 !important;
-  color: #dbedff !important;
-}
-</style>