Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add additional css to theme #3413

Merged
merged 7 commits into from
Feb 27, 2024
Merged

feat: add additional css to theme #3413

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
f9bebcc
feat: add additional css to theme
MaxPostema Feb 21, 2024
526b1a5
feat: load/save additionalCss
MaxPostema Feb 21, 2024
498abc2
fix: improved some spacing
MaxPostema Feb 21, 2024
155c9fb
fix: remove console.log
MaxPostema Feb 21, 2024
adeb34c
fix: remove directory styling from app
MaxPostema Feb 21, 2024
f6f47e5
Merge branch 'master' into feat/additional-css-in-theme
MaxPostema Feb 21, 2024
882b588
Merge branch 'master' into feat/additional-css-in-theme
mswertz Feb 24, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
45 changes: 0 additions & 45 deletions apps/directory/src/App.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
5 changes: 4 additions & 1 deletion apps/molgenis-components/src/components/account/MolgenisSession.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,9 @@
:locales="locales"
/>
</div>
<component is="style">
{{ session.settings.additionalCss }}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

really, that simple? nice. I do understand you want it here because this one always loads

</component>
</div>
</template>

Expand All @@ -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: {} };
Expand Down
23 changes: 22 additions & 1 deletion apps/settings/src/components/Theme.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -30,6 +42,7 @@
import {
ButtonAction,
InputString,
InputText,
MessageError,
MessageSuccess,
Spinner,
Expand All @@ -41,6 +54,7 @@ import { request } from "graphql-request";
export default {
components: {
InputString,
InputText,
ButtonAction,
MessageError,
MessageSuccess,
Expand All @@ -58,6 +72,7 @@ export default {
loading: false,
graphqlError: null,
success: null,
additionalCss: null,
};
},
created() {
Expand All @@ -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(
Expand Down Expand Up @@ -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;
Expand Down