feat: add additional css to theme (#3413)

* feat: add additional css to theme
molgenis · Feb 27, 2024 · 069ff17 · 069ff17
1 parent d5d1b55
commit 069ff17
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 47 deletions.
diff --git a/apps/directory/src/App.vue b/apps/directory/src/App.vue
@@ -83,48 +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;
-}
-
-.filterbar > details.dropdown-button > summary {
-  color: #08205c !important;
-}
-.filterbar > details.dropdown-button[open] > summary,
-.filterbar > details.dropdown-button:hover > summary,
-.filterbar > details.text-white > summary {
-  color: white !important;
-}
-</style>
diff --git 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: {} };

diff --git a/apps/settings/src/components/Theme.vue b/apps/settings/src/components/Theme.vue
@@ -15,13 +15,25 @@
       />
       {{ primaryColor }}
       <InputString
+        class="mt-3"
         id="theme-url-input"
         label="Set logo url"
         v-model="logoURL"
       />
+      <InputText
+        id="additional-css-input"
+        label="Additional Css"
+        v-model="additionalCss"
+      />
+
       <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>
@@ -30,6 +42,7 @@
 import {
   ButtonAction,
   InputString,
+  InputText,
   MessageError,
   MessageSuccess,
   Spinner,
@@ -41,6 +54,7 @@ import { request } from "graphql-request";
 export default {
   components: {
     InputString,
+    InputText,
     ButtonAction,
     MessageError,
     MessageSuccess,
@@ -58,6 +72,7 @@ export default {
       loading: false,
       graphqlError: null,
       success: null,
+      additionalCss: null,
     };
   },
   created() {
@@ -70,6 +85,7 @@ export default {
   },
   methods: {
     loadSettings() {
+      this.additionalCss = this.session?.settings?.additionalCss;
       if (this.session?.settings?.cssURL) {
         this.logoURL = this.session.settings.logoURL;
         const urlParams = new URL(
@@ -103,6 +119,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;