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) O3-3024: Implement a two column layout for large desktops #1772

Merged
merged 10 commits into from
Jul 24, 2024
Merged

(feat) O3-3024: Implement a two column layout for large desktops #1772

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
b0cb95e
Implement a two column layout for large desktops
jayasanka-sack Apr 2, 2024
eabf59e
Fix build failure
jayasanka-sack Apr 2, 2024
48a788a
Make the width of an extension to be configurable
jayasanka-sack Apr 22, 2024
21437b5
Merge branch 'main' into 2-col-layout-z
jayasanka-sack Jun 26, 2024
274c3f8
Merge branch 'main' into 2-col-layout-z
denniskigen Jun 28, 2024
1d2751d
Merge branch 'main' into 2-col-layout-z
jayasanka-sack Jul 9, 2024
8e20d7f
Remove wrapItem
jayasanka-sack Jul 12, 2024
935d386
Move stylings to the extension slot
jayasanka-sack Jul 17, 2024
1d00721
Address reviews
jayasanka-sack Jul 19, 2024
ce603ed
Address reviews
jayasanka-sack Jul 19, 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
6 changes: 1 addition & 5 deletions packages/esm-patient-allergies-app/src/routes.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,10 +18,7 @@
"component": "allergiesDetailedSummary",
"slot": "patient-chart-allergies-dashboard-slot",
"online": true,
"offline": true,
"meta": {
"columnSpan": 4
}
"offline": true
},
{
"name": "allergies-summary-dashboard",
Expand All @@ -31,7 +28,6 @@
"offline": true,
"order": 6,
"meta": {
"columns": 1,
"slot": "patient-chart-allergies-dashboard-slot",
"path": "Allergies"
}
Expand Down
2 changes: 1 addition & 1 deletion packages/esm-patient-attachments-app/src/routes.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,4 +35,4 @@
}
],
"pages": []
}
}
30 changes: 14 additions & 16 deletions packages/esm-patient-chart-app/src/patient-chart/chart-review/dashboard-view.component.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,11 +11,6 @@ import { dashboardPath } from '../../constants';
import styles from './dashboard-view.scss';
import { launchPatientWorkspace, launchStartVisitPrompt } from '@openmrs/esm-patient-common-lib';

function getColumnsLayoutStyle(dashboard: DashboardConfig) {
const numberOfColumns = dashboard.columns ?? 2;
return '1fr '.repeat(numberOfColumns).trimEnd();
}

/**
* The layout mode dictates the width occuppied by the chart dashboard widgets.
* - In 'contained' mode, the dashboard widgets are displayed in a centered
Expand Down Expand Up @@ -45,7 +40,6 @@ export function DashboardView({ dashboard, patientUuid, patient }: DashboardView
const {
params: { view },
} = useMatch(dashboardPath);
const gridTemplateColumns = getColumnsLayoutStyle(dashboard);

const state = useMemo(
() => ({
Expand All @@ -60,8 +54,13 @@ export function DashboardView({ dashboard, patientUuid, patient }: DashboardView

const wrapItem = useCallback(
(slot: ReactNode, extension: ExtensionData) => {
const { columnSpan = 1 } = widgetMetas[getExtensionNameFromId(extension.extensionId)];
return <div style={{ gridColumn: `span ${columnSpan}` }}>{slot}</div>;
const { fullWidth = false } = widgetMetas[getExtensionNameFromId(extension.extensionId)];
const style = fullWidth ? { gridColumn: '1 / -1' } : {};
return (
<div className={styles.extension} style={style}>
{slot}
</div>
);
},
[widgetMetas],
);
Expand All @@ -82,14 +81,13 @@ export function DashboardView({ dashboard, patientUuid, patient }: DashboardView
<>
<ExtensionSlot state={state} name="top-of-all-patient-dashboards-slot" />
{!dashboard.hideDashboardTitle && resolvedTitle && <h1 className={styles.dashboardTitle}>{resolvedTitle}</h1>}
<ExtensionSlot
key={dashboard.slot}
name={dashboard.slot}
className={styles.dashboard}
style={{ gridTemplateColumns }}
>
<Extension state={state}>{wrapItem}</Extension>
</ExtensionSlot>
<div className={styles.dashboardContainer}>
<ExtensionSlot key={dashboard.slot} name={dashboard.slot} className={styles.dashboard}>
<Extension state={state} className={styles.extensionWrapper}>
{wrapItem}
</Extension>
</ExtensionSlot>
</div>
jayasanka-sack marked this conversation as resolved.
Show resolved Hide resolved
</>
);
}
22 changes: 20 additions & 2 deletions packages/esm-patient-chart-app/src/patient-chart/chart-review/dashboard-view.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,13 +9,31 @@

.dashboard {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-columns: 1fr;
grid-auto-rows: auto;
grid-auto-columns: auto;
grid-gap: 25px;
jayasanka-sack marked this conversation as resolved.
Show resolved Hide resolved
margin: 1.3125rem;
}

.dashboardContainer {
container-name: dashboard;
container-type: inline-size;
}

@container dashboard (width > 1100px){
jayasanka-sack marked this conversation as resolved.
Show resolved Hide resolved
.dashboard {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}

.extensionWrapper {
height: 100%;
}

.extension:only-child {
grid-column: 1 / span 2;
}

:global(.omrs-breakpoint-lt-desktop) .dashboard {
grid-template-columns: 1fr;
}
Expand Down
4 changes: 4 additions & 0 deletions packages/esm-patient-chart-app/src/patient-chart/patient-chart.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,10 @@ $actionPanelExpandedOffset: $actionNavOffset+$actionPanelOffset;
max-width: 60rem;
}

:global(.omrs-breakpoint-gt-small-desktop) .widthContained {
max-width: 80rem;
}

.chartContainer {
flex: 1;
display: flex;
Expand Down
10 changes: 4 additions & 6 deletions packages/esm-patient-chart-app/src/routes.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@
"order": 0,
"meta": {
"slot": "patient-chart-summary-dashboard-slot",
"columns": 4,
"path": "Patient Summary"
},
"online": true,
Expand Down Expand Up @@ -92,7 +91,6 @@
"component": "encountersSummaryDashboardLink",
"meta": {
"slot": "patient-chart-encounters-dashboard-slot",
"columns": 1,
"path": "Visits"
},
"order": 5,
Expand Down Expand Up @@ -201,11 +199,11 @@
{
"name": "current-visit-summary",
"component": "currentVisitSummary",
"meta": {
"columnSpan": 4
},
"online": true,
"offline": true
"offline": true,
"meta": {
"fullWidth": true
}
},
{
"name": "edit-visit-action-button",
Expand Down
2 changes: 1 addition & 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 @@ -16,7 +16,7 @@ export const EmptyState: React.FC<EmptyStateProps> = (props) => {
const isTablet = useLayoutType() === 'tablet';

return (
<Layer>
<Layer className={styles.layer}>
<Tile className={styles.tile}>
<div className={isTablet ? styles.tabletHeading : styles.desktopHeading}>
<h4>{props.headerTitle}</h4>
Expand Down
5 changes: 5 additions & 0 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 @@ -49,7 +49,12 @@
border-bottom: 0.375rem solid var(--brand-03);
}

.layer {
height: 100%;
jayasanka-sack marked this conversation as resolved.
Show resolved Hide resolved
}

.tile {
text-align: center;
border: 1px solid $ui-03;
height: 100%;
}
1 change: 1 addition & 0 deletions packages/esm-patient-common-lib/src/pagination/pagination.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@
background-color: $ui-02;
padding-left: 1rem;
align-items: center;
border-top: 1px solid $ui-03;
}

.desktop :global(.cds--pagination) {
Expand Down
2 changes: 1 addition & 1 deletion packages/esm-patient-conditions-app/src/conditions/conditions-overview.component.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -179,7 +179,7 @@ const ConditionsOverview: React.FC<ConditionsOverviewProps> = ({ patientUuid })
>
{({ rows, headers, getHeaderProps, getTableProps }) => (
<>
<TableContainer>
<TableContainer className={styles.tableContainer}>
<Table {...getTableProps()}>
<TableHead>
<TableRow>
Expand Down
7 changes: 7 additions & 0 deletions packages/esm-patient-conditions-app/src/conditions/conditions-overview.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,9 @@

.widgetCard {
border: 1px solid $ui-03;
height: 100%;
display: flex;
flex-direction: column;
}

.divider {
Expand Down Expand Up @@ -61,3 +64,7 @@
@include type.type-style('body-compact-01');
color: $text-02;
}

.tableContainer {
flex: 1;
}
11 changes: 2 additions & 9 deletions packages/esm-patient-conditions-app/src/routes.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,18 +9,12 @@
"name": "conditions-overview-widget",
"slot": "patient-chart-summary-dashboard-slot",
"component": "conditionsOverview",
"order": 3,
"meta": {
"columnSpan": 4
}
"order": 3
},
{
"name": "conditions-details-widget",
"slot": "patient-chart-conditions-dashboard-slot",
"component": "conditionsDetailedSummary",
"meta": {
"columnSpan": 4
}
"component": "conditionsDetailedSummary"
},
{
"name": "conditions-summary-dashboard",
Expand All @@ -29,7 +23,6 @@
"order": 7,
"meta": {
"slot": "patient-chart-conditions-dashboard-slot",
"columns": 1,
"path": "Conditions"
}
},
Expand Down
5 changes: 1 addition & 4 deletions packages/esm-patient-flags-app/src/routes.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,12 +26,9 @@
"name": "patient-flags-overview",
"slot": "patient-chart-summary-dashboard-slot",
"component": "flagsOverview",
"meta": {
"columnSpan": 4
},
"order": 0,
"featureFlag": "patientFlags"
}
],
"pages": []
}
}
12 changes: 3 additions & 9 deletions packages/esm-patient-immunizations-app/src/routes.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,26 +7,19 @@
{
"name": "immunization-overview-widget",
"component": "immunizationsOverview",
"meta": {
"columnSpan": 4
},
"order": 8
},
{
"name": "immunization-details-widget",
"component": "immunizationsDetailedSummary",
"slot": "patient-chart-immunizations-dashboard-slot",
"meta": {
"columnSpan": 1
}
"slot": "patient-chart-immunizations-dashboard-slot"
},
{
"name": "immunization-summary-dashboard",
"component": "immunizationsDashboardLink",
"slot": "patient-chart-dashboard-slot",
"meta": {
"slot": "patient-chart-immunizations-dashboard-slot",
"columns": 1,
"path": "Immunizations"
},
"order": 8
Expand All @@ -40,4 +33,5 @@
"component": "immunizationFormWorkspace"
}
]
}
}

11 changes: 2 additions & 9 deletions packages/esm-patient-labs-app/src/routes.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,6 @@
"slot": "patient-chart-dashboard-slot",
"meta": {
"slot": "patient-chart-test-results-dashboard-slot",
"columns": 1,
"path": "Results Viewer",
"hideDashboardTitle": true
},
Expand All @@ -20,18 +19,12 @@
{
"name": "test-results-filtered-overview",
"slot": "test-results-filtered-overview-slot",
"component": "externalOverview",
"meta": {
"columnSpan": 4
}
"component": "externalOverview"
},
{
"name": "results-viewer",
"slots": ["patient-chart-results-viewer-slot", "patient-chart-test-results-dashboard-slot"],
"component": "resultsViewer",
"meta": {
"columnSpan": 4
}
"component": "resultsViewer"
},
{
"name": "print-modal",
Expand Down
3 changes: 2 additions & 1 deletion packages/esm-patient-medications-app/src/components/medications-details-table.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,8 @@

.widgetCard {
border: 1px solid colors.$gray-20;
border-bottom: none;
background-color: colors.$white;
height: 100%;
}

.row {
Expand Down
3 changes: 1 addition & 2 deletions packages/esm-patient-medications-app/src/routes.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
"component": "medicationsSummary",
"slot": "patient-chart-medications-dashboard-slot",
"meta": {
"columnSpan": 1
"columnSpan": 2
}
},
{
Expand All @@ -28,7 +28,6 @@
"order": 3,
"meta": {
"slot": "patient-chart-medications-dashboard-slot",
"columns": 1,
"path": "Medications"
}
},
Expand Down
1 change: 0 additions & 1 deletion packages/esm-patient-orders-app/src/routes.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,6 @@
"slot": "patient-chart-dashboard-slot",
"meta": {
"slot": "patient-chart-orders-dashboard-slot",
"columns": 1,
"path": "Orders",
"hideDashboardTitle": true
},
Expand Down
9 changes: 3 additions & 6 deletions packages/esm-patient-programs-app/src/routes.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,9 +16,6 @@
"name": "programs-details-widget",
"slot": "patient-chart-programs-dashboard-slot",
"component": "programsDetailedSummary",
"meta": {
"columnSpan": 1
},
"order": 6
},
{
Expand All @@ -27,8 +24,7 @@
"component": "programsDashboardLink",
"meta": {
"slot": "patient-chart-programs-dashboard-slot",
"columns": 1,
"path": "Programs"
"path": "Programs"
},
"order": 10
}
Expand All @@ -41,4 +37,5 @@
"component": "programsFormWorkspace"
}
]
}
}

Loading
Loading