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

MF-635: Fix patient chart widget card headers #446

Merged
merged 2 commits into from
Nov 2, 2021
Merged

MF-635: Fix patient chart widget card headers #446

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
18b8161
MF-635: Fix patient chart widget card headers
denniskigen Oct 30, 2021
5dd0dce
Rebase and fix conflicts
denniskigen Nov 2, 2021
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
2 changes: 1 addition & 1 deletion packages/esm-patient-allergies-app/src/allergies/allergies-detailed-summary.component.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -86,7 +86,7 @@ const AllergiesDetailedSummary: React.FC<AllergiesDetailedSummaryProps> = ({ pat
return (
<div className={styles.widgetCard}>
<div className={styles.allergiesHeader}>
<h4 className={`${styles.productiveHeading03} ${styles.text02}`}>{headerTitle}</h4>
<h4>{headerTitle}</h4>
<span>{isValidating ? <InlineLoading /> : null}</span>
{showAddAllergy && (
<Button kind="ghost" renderIcon={Add16} iconDescription="Add allergies" onClick={launchAllergiesForm}>
Expand Down
7 changes: 4 additions & 3 deletions packages/esm-patient-allergies-app/src/allergies/allergies-overview.component.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ import {
} from '@openmrs/esm-patient-common-lib';
import { useTranslation } from 'react-i18next';
import { useAllergies } from './allergy-intolerance.resource';
import { usePagination } from '@openmrs/esm-framework';
import { useLayoutType, usePagination } from '@openmrs/esm-framework';
import { allergiesToShowCount, patientAllergiesFormWorkspace } from '../constants';

interface AllergiesOverviewProps {
Expand All @@ -37,6 +37,7 @@ const AllergiesOverview: React.FC<AllergiesOverviewProps> = ({ patient, showAddA
const headerTitle = t('allergies', 'Allergies');
const urlLabel = t('seeAll', 'See all');
const pageUrl = window.spaBase + basePath + '/allergies';
const isTablet = useLayoutType() === 'tablet';

const { data: allergies, isError, isLoading, isValidating } = useAllergies(patient.id);
const { results: paginatedAllergies, goTo, currentPage } = usePagination(allergies ?? [], allergiesToShowCount);
Expand Down Expand Up @@ -68,8 +69,8 @@ const AllergiesOverview: React.FC<AllergiesOverviewProps> = ({ patient, showAddA
if (allergies?.length) {
return (
<div className={styles.widgetCard}>
<div className={styles.allergiesHeader}>
<h4 className={`${styles.productiveHeading03} ${styles.text02}`}>{headerTitle}</h4>
<div className={isTablet ? styles.tabletHeader : styles.desktopHeader}>
<h4>{headerTitle}</h4>
<span>{isValidating ? <InlineLoading /> : null}</span>
{showAddAllergy && (
<Button kind="ghost" renderIcon={Add16} iconDescription="Add allergies" onClick={launchAllergiesForm}>
Expand Down
30 changes: 23 additions & 7 deletions packages/esm-patient-allergies-app/src/allergies/allergies-overview.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,18 +6,34 @@
border: 1px solid $ui-03;
}

.allergiesHeader {
.desktopHeader, .tabletHeader {
display: flex;
justify-content: space-between;
align-items: center;
padding: $spacing-04 0 $spacing-04 $spacing-05;
background-color: $ui-background;

h4:after {
content: "";
display: block;
width: 2rem;
padding-top: 0.188rem;
border-bottom: 0.375rem solid $brand-teal-01;
}
}
Comment on lines +16 to +23
Copy link
Contributor

Choose a reason for hiding this comment

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

I'm thinking it might be nice to factor styles out to esm-patient-chart/esm-patient-common-lib, if that's possible.

Copy link
Member Author

Choose a reason for hiding this comment

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

Maybe if this CardHeader was a standalone component in esm-patient-common-lib.

Copy link
Contributor

Choose a reason for hiding this comment

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

Ehhhhhh up to you. We can do it in a separate PR if you think it's worth it.

Copy link
Member Author

@denniskigen denniskigen Nov 4, 2021 •
edited
Loading

Choose a reason for hiding this comment

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

I've worked on this here.


.desktopHeader {
height: 3rem;
h4 {
@include carbon--type-style('productive-heading-02');
color: $text-02;
}
}

.allergiesHeader > h4:after {
content: "";
display: block;
width: 2rem;
padding-top: 0.188rem;
border-bottom: 0.375rem solid $brand-teal-01;
.tabletHeader {
height: 4.5rem;
h4 {
@include carbon--type-style('productive-heading-03');
color: $text-02;
}
}
32 changes: 24 additions & 8 deletions packages/esm-patient-appointments-app/src/appointments/appointments-base.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,28 +9,44 @@
$color-blue-30 : #a6c8ff;
$color-blue-10: #edf5ff;

.card {
.widgetCard {
border: 1px solid $ui-03;
}

.productiveHeading01 {
@include carbon--type-style("productive-heading-01");
}

.appointmentsHeader {
.desktopHeader, .tabletHeader {
display: flex;
justify-content: space-between;
align-items: center;
padding: $spacing-04 0 $spacing-04 $spacing-05;
background-color: $ui-background;

h4:after {
content: "";
display: block;
width: 2rem;
padding-top: 0.188rem;
border-bottom: 0.375rem solid $brand-teal-01;
}
}

.desktopHeader {
height: 3rem;
h4 {
@include carbon--type-style('productive-heading-02');
color: $text-02;
}
}

.appointmentsHeader > h4:after {
content: "";
display: block;
width: $spacing-07;
padding-top: 0.188rem;
border-bottom: 0.375rem solid $brand-teal-01;
.tabletHeader {
height: 4.5rem;
h4 {
@include carbon--type-style('productive-heading-03');
color: $text-02;
}
}

.contentSwitcherWrapper {
Expand Down
9 changes: 5 additions & 4 deletions packages/esm-patient-appointments-app/src/appointments/appointments-base.component.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import React, { useState } from 'react';
import { useTranslation } from 'react-i18next';
import dayjs from 'dayjs';
import Add16 from '@carbon/icons-react/es/add/16';
import { attach } from '@openmrs/esm-framework';
import { useLayoutType } from '@openmrs/esm-framework';
import { EmptyDataIllustration, ErrorState, launchPatientWorkspace } from '@openmrs/esm-patient-common-lib';
import { Button, DataTableSkeleton, ContentSwitcher, InlineLoading, Switch, Tile } from 'carbon-components-react';
import { useAppointments } from './appointments.resource';
Expand All @@ -22,6 +22,7 @@ enum AppointmentTypes {
const AppointmentsBase: React.FC<AppointmentsBaseProps> = ({ patientUuid }) => {
const { t } = useTranslation();
const headerTitle = t('appointments', 'Appointments');
const isTablet = useLayoutType() === 'tablet';

const [contentSwitcherValue, setContentSwitcherValue] = useState(0);
const startDate = dayjs(new Date().toISOString()).subtract(6, 'month').toISOString();
Expand All @@ -40,9 +41,9 @@ const AppointmentsBase: React.FC<AppointmentsBaseProps> = ({ patientUuid }) => {
}
if (Object.keys(appointmentsData)?.length) {
return (
<div className={styles.card}>
<div className={styles.appointmentsHeader}>
<h4 className={`${styles.productiveHeading03} ${styles.text02}`}>{headerTitle}</h4>
<div className={styles.widgetCard}>
<div className={isTablet ? styles.tabletHeader : styles.desktopHeader}>
<h4>{headerTitle}</h4>
{isValidating ? (
<span>
<InlineLoading />
Expand Down
9 changes: 5 additions & 4 deletions packages/esm-patient-biometrics-app/src/biometrics/biometrics-base.component.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import BiometricsChart from './biometrics-chart.component';
import BiometricsPagination from './biometrics-pagination.component';
import { Button, DataTableSkeleton, InlineLoading } from 'carbon-components-react';
import { useTranslation } from 'react-i18next';
import { useConfig } from '@openmrs/esm-framework';
import { useConfig, useLayoutType } from '@openmrs/esm-framework';
import { useBiometrics } from './biometrics.resource';
import {
EmptyState,
Expand Down Expand Up @@ -39,6 +39,7 @@ const BiometricsBase: React.FC<BiometricsBaseProps> = ({
const displayText = t('biometrics', 'biometrics');
const headerTitle = t('biometrics', 'Biometrics');
const [chartView, setChartView] = React.useState(false);
const isTablet = useLayoutType() === 'tablet';

const config = useConfig() as ConfigObject;
const { bmiUnit } = config.biometrics;
Expand Down Expand Up @@ -76,9 +77,9 @@ const BiometricsBase: React.FC<BiometricsBaseProps> = ({
if (isError) return <ErrorState error={isError} headerTitle={headerTitle} />;
if (biometrics?.length) {
return (
<div className={styles.biometricsWidgetContainer}>
<div className={styles.biometricsHeaderContainer}>
<h4 className={`${styles.productiveHeading03} ${styles.text02}`}>{headerTitle}</h4>
<div className={styles.widgetCard}>
<div className={isTablet ? styles.tabletHeader : styles.desktopHeader}>
<h4>{headerTitle}</h4>
<div className={styles.backgroundDataFetchingIndicator}>
<span>{isValidating ? <InlineLoading /> : null}</span>
</div>
Expand Down
42 changes: 26 additions & 16 deletions packages/esm-patient-biometrics-app/src/biometrics/biometrics-overview.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,18 +2,40 @@
@import "~carbon-components/src/globals/scss/vars";
@import "~carbon-components/src/globals/scss/mixins";

.biometricsWidgetContainer {
background-color: $ui-background;
.widgetCard {
border: 1px solid $ui-03;
position: relative;
}

.biometricsHeaderContainer {
.desktopHeader, .tabletHeader {
display: flex;
justify-content: space-between;
align-items: center;
padding: $spacing-04 0 $spacing-04 $spacing-05;
background-color: $ui-background;

h4:after {
content: "";
display: block;
width: 2rem;
padding-top: 0.188rem;
border-bottom: 0.375rem solid $brand-teal-01;
}
}

.desktopHeader {
height: 3rem;
h4 {
@include carbon--type-style('productive-heading-02');
color: $text-02;
}
}

.tabletHeader {
height: 4.5rem;
h4 {
@include carbon--type-style('productive-heading-03');
color: $text-02;
}
}

.biometricsHeaderActionItems {
Expand All @@ -30,14 +52,6 @@
margin: 0rem 0.5rem;
}

.biometricsHeaderContainer > h4:after {
content: "";
display: block;
width: 2rem;
padding-top: 0.188rem;
border-bottom: 0.375rem solid $brand-teal-01;
}

.toggleButtons {
width: fit-content;
margin: 0 $spacing-03;
Expand Down Expand Up @@ -98,10 +112,6 @@
}
}

.customRow tbody{
white-space: nowrap;
}

.backgroundDataFetchingIndicator {
align-items: center;
display: flex;
Expand Down
2 changes: 1 addition & 1 deletion packages/esm-patient-biometrics-app/src/biometrics/biometrics-pagination.component.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ const BiometricsPagination: React.FC<BiometricsPaginationProps> = ({
<TableContainer>
<DataTable rows={paginatedBiometrics} headers={tableHeaders} isSortable size="short">
{({ rows, headers, getHeaderProps, getTableProps }) => (
<Table {...getTableProps()} className={styles.customRow}>
<Table {...getTableProps()} useZebraStyles>
<TableHead>
<TableRow>
{headers.map((header) => (
Expand Down
6 changes: 5 additions & 1 deletion packages/esm-patient-common-lib/src/empty-state/empty-state.component.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import styles from './empty-state.scss';
import { Link, Tile } from 'carbon-components-react';
import { Trans, useTranslation } from 'react-i18next';
import { EmptyDataIllustration } from './empty-data-illustration.component';
import { useLayoutType } from '@openmrs/esm-framework';

export interface EmptyStateProps {
headerTitle: string;
Expand All @@ -12,10 +13,13 @@ export interface EmptyStateProps {

export const EmptyState: React.FC<EmptyStateProps> = (props) => {
const { t } = useTranslation();
const isTablet = useLayoutType() === 'tablet';

return (
<Tile light className={styles.tile}>
<h1 className={styles.heading}>{props.headerTitle}</h1>
<div className={isTablet ? styles.tabletHeading : styles.desktopHeading}>
<h4>{props.headerTitle}</h4>
</div>
<EmptyDataIllustration />
<p className={styles.content}>
<Trans i18nKey="emptyStateText" values={{ displayText: props.displayText.toLowerCase() }}>
Expand Down
28 changes: 24 additions & 4 deletions packages/esm-patient-common-lib/src/empty-state/empty-state.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,12 +13,32 @@
margin-bottom: $spacing-03;
}

.heading {
.desktopHeading {
h4 {
@include carbon--type-style('productive-heading-02');
color: $text-02;
}
}

.tabletHeading {
h4 {
@include carbon--type-style('productive-heading-03');
color: $text-02;
}
}

.desktopHeading, .tabletHeading {
text-align: left;
text-transform: capitalize;
margin-bottom: 1rem;
@include carbon--type-style("productive-heading-03");
color: $text-02;
margin-bottom: $spacing-05;

h4:after {
content: "";
display: block;
width: 2rem;
padding-top: 0.188rem;
border-bottom: 0.375rem solid $brand-teal-01;
}
}

.heading:after {
Expand Down
6 changes: 5 additions & 1 deletion packages/esm-patient-common-lib/src/error-state/error-state.component.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import React from 'react';
import styles from './error-state.scss';
import { Tile } from 'carbon-components-react';
import { useTranslation } from 'react-i18next';
import { useLayoutType } from '@openmrs/esm-react-utils';

export interface ErrorStateProps {
error: any;
Expand All @@ -10,10 +11,13 @@ export interface ErrorStateProps {

export const ErrorState: React.FC<ErrorStateProps> = ({ error, headerTitle }) => {
const { t } = useTranslation();
const isTablet = useLayoutType() === 'tablet';

return (
<Tile light className={styles.tile}>
<h1 className={styles.heading}>{headerTitle}</h1>
<div className={isTablet ? styles.tabletHeading : styles.desktopHeading}>
<h4>{headerTitle}</h4>
</div>
<p className={styles.errorMessage}>
{t('error', 'Error')} {`${error?.response?.status}: `}
{error?.response?.statusText}
Expand Down
32 changes: 22 additions & 10 deletions packages/esm-patient-common-lib/src/error-state/error-state.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,20 +15,32 @@
color: $text-02;
}

.heading {
.desktopHeading {
h4 {
@include carbon--type-style('productive-heading-02');
color: $text-02;
}
}

.tabletHeading {
h4 {
@include carbon--type-style('productive-heading-03');
color: $text-02;
}
}

.desktopHeading, .tabletHeading {
text-align: left;
text-transform: capitalize;
margin-bottom: $spacing-05;
@include carbon--type-style("productive-heading-03");
color: $text-02;
}

.heading:after {
content: "";
display: block;
width: 2rem;
padding-top: 0.188rem;
border-bottom: 0.375rem solid $brand-teal-01;
h4:after {
content: "";
display: block;
width: 2rem;
padding-top: 0.188rem;
border-bottom: 0.375rem solid $brand-teal-01;
}
}

.tile {
Expand Down
Loading