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

Jump to bottom

(feature) O3-3859 Ability to customize or add logos at the bottom of the LogIn page below the "Powered by" #1127

Merged
merged 6 commits into from
Oct 14, 2024
Merged

(feature) O3-3859 Ability to customize or add logos at the bottom of the LogIn page below the "Powered by" #1127

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
201d72f
Added config to allow addition of Powered by Logo
suubi-joshua Aug 27, 2024
deb0137
Removed the conditional rendering of the OMRS Logo
suubi-joshua Aug 28, 2024
48b6609
Worked on requested changes
suubi-joshua Sep 19, 2024
50410c9
Fixed breaking tests
suubi-joshua Sep 23, 2024
5267921
Renamed Logos to additional Logos
suubi-joshua Oct 14, 2024
bba9922
Make all added logos grey
suubi-joshua Oct 14, 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
8 changes: 8 additions & 0 deletions packages/apps/esm-login-app/__mocks__/config.mock.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,5 +19,13 @@ export const mockConfig: ConfigSchema = {
links: {
loginSuccess: '${openmrsSpaBase}/home',
},
footer: {
logos: [
{
src: null,
brandones marked this conversation as resolved.
Show resolved Hide resolved
alt: 'Logo',
brandones marked this conversation as resolved.
Show resolved Hide resolved
}
],
},
showPasswordOnSeparateScreen: true,
};
29 changes: 29 additions & 0 deletions packages/apps/esm-login-app/src/config-schema.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,6 +68,29 @@ export const configSchema = {
_description: 'The alternative text for the logo image, displayed when the image cannot be loaded or on hover.',
},
},
footer: {
logos: {
brandones marked this conversation as resolved.
Show resolved Hide resolved
_type: Type.Array,
_items: {
_type: Type.Object,
_properties: {
brandones marked this conversation as resolved.
Show resolved Hide resolved
src: {
_type: Type.String,
_required: true,
_description: 'The source URL of the logo image',
_validations: [validators.isUrl]
},
alt: {
_type: Type.String,
_required: true,
_description: 'The alternative text for the logo image'
}
}
},
brandones marked this conversation as resolved.
Show resolved Hide resolved
_default: [],
_description: 'An array of logos to be displayed in the footer.',
brandones marked this conversation as resolved.
Show resolved Hide resolved
}
},
showPasswordOnSeparateScreen: {
_type: Type.Boolean,
_default: true,
Expand Down Expand Up @@ -95,5 +118,11 @@ export interface ConfigSchema {
alt: string;
src: string;
};
footer: {
logos: Array<{
src: string;
alt: string;
}>;
};
showPasswordOnSeparateScreen: boolean;
}
30 changes: 30 additions & 0 deletions packages/apps/esm-login-app/src/footer.component.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
import React from 'react';
import { interpolateUrl, useConfig } from '@openmrs/esm-framework';
import { type TFunction } from 'react-i18next';
import { type ConfigSchema } from './config-schema';
import styles from './login/login.scss';

const Footer: React.FC<{ t: TFunction }> = ({ t }) => {
brandones marked this conversation as resolved.
Show resolved Hide resolved
const config = useConfig<ConfigSchema>();
const logos = config.footer.logos || [];

return (
<div className={styles.footer}>
<p className={styles.poweredByTxt}>{t('poweredBy', 'Powered by')}</p>
<div className={styles.logosContainer}>
<svg role="img" className={styles.poweredByLogo}>
<use href="#omrs-logo-full-color"></use>
brandones marked this conversation as resolved.
Show resolved Hide resolved
</svg>
{logos.map((logo, index) => (
Copy link
Member

Choose a reason for hiding this comment

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

Hello @suubi-joshua Basing on @ibacher suggestion, Does this fixes the issue. i thought this can be generic

<img
alt={logo.alt ? t(logo.alt) : t('poweredByLogo', 'Powered By Logo')}
brandones marked this conversation as resolved.
Show resolved Hide resolved
className={styles.poweredByLogo}
src={interpolateUrl(logo.src)}
brandones marked this conversation as resolved.
Show resolved Hide resolved
/>
))}
</div>
</div>
);
};

export default Footer;
8 changes: 2 additions & 6 deletions packages/apps/esm-login-app/src/login/login.component.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import {
} from '@openmrs/esm-framework';
import { type ConfigSchema } from '../config-schema';
import Logo from '../logo.component';
import Footer from '../footer.component';
import styles from './login.scss';

export interface LoginReferrer {
Expand Down Expand Up @@ -265,14 +266,9 @@ const Login: React.FC = () => {
)}
</form>
</Tile>
<div className={styles.footer}>
<p className={styles.poweredByTxt}>{t('poweredBy', 'Powered by')}</p>
<div>
<svg role="img" className={styles.poweredByLogo}>
<use href="#omrs-logo-partial-mono"></use>
</svg>
<Footer t={t} />
brandones marked this conversation as resolved.
Show resolved Hide resolved
</div>
</div>
</div>
);
}
Expand Down
36 changes: 34 additions & 2 deletions packages/apps/esm-login-app/src/login/login.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@

.poweredByTxt {
@extend .caption01;
margin-bottom: 1.5rem;
text-align: center;
color: $color-gray-70;
color: $text-02;
Expand All @@ -50,9 +51,38 @@
margin-left: 0.5rem;
}

.footer {
display: flex;
flex-direction: column;
align-items: center;
padding: 1.5rem;
}

.logosContainer {
Copy link
Member

Choose a reason for hiding this comment

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

Suggested change
.logosContainer {
.logosContainer::last-of-type {
margin-right: 0;
}

Copy link
Collaborator

Choose a reason for hiding this comment

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

Hard to tell without seeing the dev tools how the margins are working. If you want to clean it up after the merge, @vasharma05 , you are very welcome, I'll give a quick review. But this has been open a long time already, time to get it in.

display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
margin-bottom: 1.5rem;
gap: 2rem;
brandones marked this conversation as resolved.
Show resolved Hide resolved
}

@media (min-width: 768px) {
brandones marked this conversation as resolved.
Show resolved Hide resolved
.footer {
padding: 2rem;
}
.poweredByLogo {
height: 3.5rem;
max-width: 9rem;
}
}

.poweredByLogo {
height: 2.5rem;
width: 6.5rem;
height: 3rem;
width: auto;
max-width: 8rem;
object-fit: contain;
display: block;
}

.loginCard {
Expand All @@ -63,6 +93,8 @@
padding: 2.5rem;
position: relative;
min-height: fit-content;
margin-top: 2.5rem;
margin-bottom: -3.0rem;
brandones marked this conversation as resolved.
Show resolved Hide resolved
}

@media only screen and (min-width: 481px) {
Expand Down
2 changes: 1 addition & 1 deletion packages/apps/esm-login-app/src/logo.component.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ const Logo: React.FC<{ t: TFunction }> = ({ t }) => {
<svg role="img" className={styles.logo}>
<title>{t('openmrsLogo', 'OpenMRS logo')}</title>
<use href="#omrs-logo-full-color"></use>
</svg>
</svg>
);
};

Expand Down
Loading