From 32e197398d7c7374d56d0061a7fdcd69b0c1c895 Mon Sep 17 00:00:00 2001 From: Colin Rudd Date: Wed, 24 Jun 2020 18:22:16 -0400 Subject: [PATCH 1/2] Cleanups gained by using padding on panel (HR #1971) --- .../src/admin/tests/Select/SelectTestPanel.js | 147 +++++++++--------- .../admin/tests/Select/SelectTestPanel.scss | 12 +- .../admin/tests/fetch/FetchApiTestPanel.js | 15 +- .../admin/tests/fetch/FetchApiTestStyles.scss | 5 +- .../tests/localDate/LocalDateTestPanel.js | 1 + .../tests/localDate/LocalDateTestPanel.scss | 4 - .../tests/panels/PanelResizingTestPanel.js | 59 +++---- client-app/src/admin/wip/WipTab.js | 11 +- .../src/desktop/tabs/charts/LineChartPanel.js | 7 +- .../src/desktop/tabs/charts/OHLCChartPanel.js | 9 +- .../src/desktop/tabs/examples/ExamplesTab.js | 9 +- .../desktop/tabs/examples/ExamplesTab.scss | 6 - .../src/desktop/tabs/forms/FormPanel.js | 62 ++++---- .../desktop/tabs/forms/ToolbarFormPanel.js | 8 +- .../src/desktop/tabs/other/IconsPanel.js | 12 +- .../src/desktop/tabs/other/IconsPanel.scss | 5 - .../src/desktop/tabs/other/PinPadPanel.js | 5 +- .../src/desktop/tabs/other/PinPadPanel.scss | 5 - .../tabs/other/formats/DateFormatsPanel.js | 2 + .../tabs/other/formats/NumberFormatsPanel.js | 2 + .../desktop/tabs/other/formats/Styles.scss | 9 +- .../src/desktop/tabs/panels/BasicPanel.js | 9 +- .../desktop/tabs/panels/PanelSizingPanel.js | 29 ++-- .../src/examples/portfolio/PortfolioPanel.js | 6 +- .../src/examples/recalls/DetailsPanel.js | 27 ---- .../src/examples/recalls/DetailsTable.js | 24 +++ ...ailsPanelModel.js => DetailsTableModel.js} | 2 +- .../src/examples/recalls/RecallsPanel.js | 8 +- .../src/examples/recalls/RecallsPanel.scss | 4 - .../src/examples/recalls/RecallsPanelModel.js | 6 +- 30 files changed, 223 insertions(+), 287 deletions(-) delete mode 100644 client-app/src/desktop/tabs/other/PinPadPanel.scss delete mode 100644 client-app/src/examples/recalls/DetailsPanel.js create mode 100644 client-app/src/examples/recalls/DetailsTable.js rename client-app/src/examples/recalls/{DetailsPanelModel.js => DetailsTableModel.js} (96%) diff --git a/client-app/src/admin/tests/Select/SelectTestPanel.js b/client-app/src/admin/tests/Select/SelectTestPanel.js index c163c89f3..5889b80ca 100644 --- a/client-app/src/admin/tests/Select/SelectTestPanel.js +++ b/client-app/src/admin/tests/Select/SelectTestPanel.js @@ -15,77 +15,84 @@ export const SelectTestPanel = hoistCmp({ return panel({ title: 'Select tests', - className: 'select-test-panel xh-tiled-bg', + className: 'xh-tiled-bg', + padding: 10, item: hbox( - vbox( - example({ - name: 'Select', - bind: 'selectValue', - selectProps: restaurantProps - }), - example({ - name: 'Select enableCreate', - bind: 'creatableValue', - selectProps: {...restaurantProps, enableCreate: true} - }), - example({ - name: 'Select queryFn', - bind: 'asyncValue', - selectProps: customerProps - }), - example({ - name: 'Select queryFn enableCreate', - bind: 'asyncCreatableValue', - selectProps: {...customerProps, enableCreate: true} - }) - ), - vbox( - example({ - name: 'Select (with grouped options)', - bind: 'groupedValue', - selectProps: { - options: [ - {label: 'cookies', options: [ - 'oatmeal', - 'chocolate chip', - 'peanut butter' - ]}, - {label: 'cakes', options: [ - 'red velvet', 'tres leches', 'German\'s chocolate', 'cheesecake' - ]}, - {label: 'ice cream', options: [ - 'vanilla', 'chocolate', 'strawberry' - ]} - ] - } - }), - example({ - name: 'Select (with Object options)', - bind: 'objectValue', - selectProps: { - options: [ - {label: 'Hot Tea', value: {ingredients: ['water', 'tea leaves'], warnings: ['hot'], price: 1.75}}, - {label: 'Iced Tea', value: {ingredients: ['water', 'tea leaves', 'ice', 'lemon'], price: 2.50}}, - {label: 'Coffee', value: {ingredients: ['coffee beans', 'water'], warnings: ['addictive', 'hot'], price: 3.25}}, - {label: 'Soda', value: {ingredients: 'unknown', warnings: ['sweet', 'acidic'], price: 1.50}}, - {label: 'Red Wine', value: {ingredients: ['grapes', 'water', 'yeast', 'time'], warnings: ['alcoholic', 'staining'], needId: true, price: 6.75}} - ] - } - }), - example({ - name: 'Select (with many options) enableWindowed', - bind: 'bigValue', - selectProps: { - options: model.bigOptions, - enableWindowed: true, - placeholder: 'Select a number...' - } - }), - hbox( - label('number of options: '), - numberInput({bind: 'numOptions'}) - ) - ) + vbox({ + className: 'select-category', + items: [ + example({ + name: 'Select', + bind: 'selectValue', + selectProps: restaurantProps + }), + example({ + name: 'Select enableCreate', + bind: 'creatableValue', + selectProps: {...restaurantProps, enableCreate: true} + }), + example({ + name: 'Select queryFn', + bind: 'asyncValue', + selectProps: customerProps + }), + example({ + name: 'Select queryFn enableCreate', + bind: 'asyncCreatableValue', + selectProps: {...customerProps, enableCreate: true} + }) + ] + }), + vbox({ + className: 'select-category', + items: [ + example({ + name: 'Select (with grouped options)', + bind: 'groupedValue', + selectProps: { + options: [ + {label: 'cookies', options: [ + 'oatmeal', + 'chocolate chip', + 'peanut butter' + ]}, + {label: 'cakes', options: [ + 'red velvet', 'tres leches', 'German\'s chocolate', 'cheesecake' + ]}, + {label: 'ice cream', options: [ + 'vanilla', 'chocolate', 'strawberry' + ]} + ] + } + }), + example({ + name: 'Select (with Object options)', + bind: 'objectValue', + selectProps: { + options: [ + {label: 'Hot Tea', value: {ingredients: ['water', 'tea leaves'], warnings: ['hot'], price: 1.75}}, + {label: 'Iced Tea', value: {ingredients: ['water', 'tea leaves', 'ice', 'lemon'], price: 2.50}}, + {label: 'Coffee', value: {ingredients: ['coffee beans', 'water'], warnings: ['addictive', 'hot'], price: 3.25}}, + {label: 'Soda', value: {ingredients: 'unknown', warnings: ['sweet', 'acidic'], price: 1.50}}, + {label: 'Red Wine', value: {ingredients: ['grapes', 'water', 'yeast', 'time'], warnings: ['alcoholic', 'staining'], needId: true, price: 6.75}} + ] + } + }), + example({ + name: 'Select (with many options) enableWindowed', + bind: 'bigValue', + selectProps: { + options: model.bigOptions, + enableWindowed: true, + placeholder: 'Select a number...' + } + }), + hbox( + label('number of options: '), + numberInput({bind: 'numOptions'}) + ) + ] + }) ) }); } diff --git a/client-app/src/admin/tests/Select/SelectTestPanel.scss b/client-app/src/admin/tests/Select/SelectTestPanel.scss index 44c0fba9c..8d3cfda32 100644 --- a/client-app/src/admin/tests/Select/SelectTestPanel.scss +++ b/client-app/src/admin/tests/Select/SelectTestPanel.scss @@ -1,10 +1,8 @@ -.select-test-panel { - .xh-vbox { - margin: var(--xh-pad-px); - padding: var(--xh-pad-px); - border: var(--xh-border-solid); - background: var(--xh-bg); - } +.select-category { + margin-right: var(--xh-pad-px); + padding: var(--xh-pad-px); + border: var(--xh-border-solid); + background: var(--xh-bg); p { font-size: var(--xh-font-size-large-px); diff --git a/client-app/src/admin/tests/fetch/FetchApiTestPanel.js b/client-app/src/admin/tests/fetch/FetchApiTestPanel.js index 97cc75e7b..3d162cf08 100644 --- a/client-app/src/admin/tests/fetch/FetchApiTestPanel.js +++ b/client-app/src/admin/tests/fetch/FetchApiTestPanel.js @@ -56,13 +56,10 @@ export const FetchApiTestPanel = hoistCmp({ panel({ title: 'Response', className: 'xh-border-left', - item: vframe({ - item: jsonInput({ - flex: 1, - width: '100%', - value: model.response - }), - padding: 10 + item: jsonInput({ + flex: 1, + width: '100%', + value: model.response }) }), mask({ @@ -76,7 +73,7 @@ export const FetchApiTestPanel = hoistCmp({ const individualBtns = hoistCmp.factory( ({model}) => vbox({ - style: {overflowY: 'scroll'}, + style: {overflowY: 'auto'}, items: model.codes.map(it => hframe({ className: 'http-status-code-frame', overflow: 'unset', @@ -99,7 +96,7 @@ const individualBtns = hoistCmp.factory( const codeGroupBtns = hoistCmp.factory( ({model}) => vframe({ - style: {overflowY: 'scroll'}, + style: {overflowY: 'auto'}, items: model.codes .filter(it => !(it.code % 100)) .map(it => button({ diff --git a/client-app/src/admin/tests/fetch/FetchApiTestStyles.scss b/client-app/src/admin/tests/fetch/FetchApiTestStyles.scss index 4b42b0192..7e210f019 100644 --- a/client-app/src/admin/tests/fetch/FetchApiTestStyles.scss +++ b/client-app/src/admin/tests/fetch/FetchApiTestStyles.scss @@ -11,7 +11,6 @@ } } -.http-status-code-group-button, .http-status-code-button { justify-content: left; margin-right: 1px; @@ -22,3 +21,7 @@ white-space: nowrap; } } + +.http-status-code-group-button { + justify-content: left; +} diff --git a/client-app/src/admin/tests/localDate/LocalDateTestPanel.js b/client-app/src/admin/tests/localDate/LocalDateTestPanel.js index 53709817f..9d183b9f9 100644 --- a/client-app/src/admin/tests/localDate/LocalDateTestPanel.js +++ b/client-app/src/admin/tests/localDate/LocalDateTestPanel.js @@ -20,6 +20,7 @@ export const LocalDateTestPanel = hoistCmp({ return panel({ className: 'local-date-test-panel xh-tiled-bg', + overflowY: 'auto', items }); } diff --git a/client-app/src/admin/tests/localDate/LocalDateTestPanel.scss b/client-app/src/admin/tests/localDate/LocalDateTestPanel.scss index 6583fdd1f..a9292538d 100644 --- a/client-app/src/admin/tests/localDate/LocalDateTestPanel.scss +++ b/client-app/src/admin/tests/localDate/LocalDateTestPanel.scss @@ -1,8 +1,4 @@ .local-date-test-panel { - & > .xh-vframe { - overflow-y: auto !important; - } - p { margin: var(--xh-pad-px); font-size: var(--xh-font-size-large-px); diff --git a/client-app/src/admin/tests/panels/PanelResizingTestPanel.js b/client-app/src/admin/tests/panels/PanelResizingTestPanel.js index 9a6a4d671..1ef338e0d 100644 --- a/client-app/src/admin/tests/panels/PanelResizingTestPanel.js +++ b/client-app/src/admin/tests/panels/PanelResizingTestPanel.js @@ -1,6 +1,6 @@ import {creates, hoistCmp, XH} from '@xh/hoist/core'; import {Icon} from '@xh/hoist/icon'; -import {box, filler, hbox} from '@xh/hoist/cmp/layout'; +import {filler, hbox} from '@xh/hoist/cmp/layout'; import {toolbar} from '@xh/hoist/desktop/cmp/toolbar'; import {button} from '@xh/hoist/desktop/cmp/button'; import {panel} from '@xh/hoist/desktop/cmp/panel'; @@ -30,10 +30,8 @@ export const PanelResizingTestPanel = hoistCmp({ model: model.topPanel1Model, key: model.topPanel1Model.xhId, compactHeader: true, - item: box({ - padding: 10, - item: `Collapsible Top (minSize: ${model.topPanel1Model.minSize}px)` - }), + padding: 10, + item: `Collapsible Top (minSize: ${model.topPanel1Model.minSize}px)`, headerItems: [ relativeTimestamp({ options: { prefix: 'Rendered' }, @@ -53,10 +51,8 @@ export const PanelResizingTestPanel = hoistCmp({ model: model.topPanel2Model, key: model.topPanel2Model.xhId, compactHeader: true, - item: box({ - padding: 10, - item: 'Collapsible Top' - }) + padding: 10, + item: 'Collapsible Top' }), hbox({ flex: 1, @@ -68,10 +64,8 @@ export const PanelResizingTestPanel = hoistCmp({ model: model.leftPanel1Model, key: model.leftPanel1Model.xhId, compactHeader: true, - item: box({ - className: 'xh-pad', - item: 'Collapsible Left' - }) + padding: 10, + item: 'Collapsible Left' }), panel({ title: 'Left Panel 2', @@ -79,18 +73,13 @@ export const PanelResizingTestPanel = hoistCmp({ model: model.leftPanel2Model, key: model.leftPanel2Model.xhId, compactHeader: true, - item: box({ - className: 'xh-pad', - item: `Collapsible Left (minSize: ${model.leftPanel2Model.minSize}px)` - }) + padding: 10, + item: `Collapsible Left (minSize: ${model.leftPanel2Model.minSize}px)` }), panel({ - item: box({ - items: model.explanation, - padding: '0 6 6 6', - display: 'block', - overflowY: 'auto' - }), + items: model.explanation, + padding: '0 10 10', + overflowY: 'auto', tbar: [ filler(), button({ @@ -111,10 +100,8 @@ export const PanelResizingTestPanel = hoistCmp({ model: model.rightPanel2Model, key: model.rightPanel2Model.xhId, compactHeader: true, - item: box({ - className: 'xh-pad', - item: 'Collapsible Right' - }) + padding: 10, + item: 'Collapsible Right' }), panel({ title: 'Right Panel 1', @@ -122,10 +109,8 @@ export const PanelResizingTestPanel = hoistCmp({ model: model.rightPanel1Model, key: model.rightPanel1Model.xhId, compactHeader: true, - item: box({ - className: 'xh-pad', - item: `Collapsible Right (minSize: ${model.rightPanel1Model.minSize}px)` - }) + padding: 10, + item: `Collapsible Right (minSize: ${model.rightPanel1Model.minSize}px)` }) ] }), @@ -135,10 +120,8 @@ export const PanelResizingTestPanel = hoistCmp({ model: model.bottomPanel2Model, key: model.bottomPanel2Model.xhId, compactHeader: true, - item: box({ - padding: 10, - item: `Collapsible Bottom (minSize: ${model.bottomPanel2Model.minSize}px)` - }) + padding: 10, + item: `Collapsible Bottom (minSize: ${model.bottomPanel2Model.minSize}px)` }), panel({ title: 'Bottom Panel 1', @@ -146,10 +129,8 @@ export const PanelResizingTestPanel = hoistCmp({ model: model.bottomPanel1Model, key: model.bottomPanel1Model.xhId, compactHeader: true, - item: box({ - padding: 10, - item: 'Collapsible Bottom' - }) + padding: 10, + item: 'Collapsible Bottom' }) ] }); diff --git a/client-app/src/admin/wip/WipTab.js b/client-app/src/admin/wip/WipTab.js index 2d77a0dc0..c8c431a0c 100644 --- a/client-app/src/admin/wip/WipTab.js +++ b/client-app/src/admin/wip/WipTab.js @@ -4,7 +4,6 @@ * * Copyright © 2020 Extremely Heavy Industries Inc. */ -import {box} from '@xh/hoist/cmp/layout'; import {panel} from '@xh/hoist/desktop/cmp/panel'; import {hoistCmp} from '@xh/hoist/core'; import {tabContainer} from '@xh/hoist/cmp/tab'; @@ -24,11 +23,9 @@ export const WipTab = hoistCmp({ }); } - return panel( - box({ - margin: 20, - item: 'No WIP examples at the moment...' - }) - ); + return panel({ + padding: 20, + item: 'No WIP examples at the moment...' + }); } }); diff --git a/client-app/src/desktop/tabs/charts/LineChartPanel.js b/client-app/src/desktop/tabs/charts/LineChartPanel.js index afe0616dc..63b1026f5 100644 --- a/client-app/src/desktop/tabs/charts/LineChartPanel.js +++ b/client-app/src/desktop/tabs/charts/LineChartPanel.js @@ -1,6 +1,6 @@ import {creates, hoistCmp} from '@xh/hoist/core'; import {Icon} from '@xh/hoist/icon'; -import {box, vframe} from '@xh/hoist/cmp/layout'; +import {box} from '@xh/hoist/cmp/layout'; import {panel} from '@xh/hoist/desktop/cmp/panel'; import {select} from '@xh/hoist/desktop/cmp/input'; import {chart} from '@xh/hoist/cmp/chart'; @@ -18,10 +18,7 @@ export const lineChartPanel = hoistCmp.factory({ icon: Icon.chartLine(), width: 800, height: 600, - item: vframe({ - className: 'toolbox-example-container', - item: chart() - }), + item: chart(), tbar: [ box('Symbol: '), select({ diff --git a/client-app/src/desktop/tabs/charts/OHLCChartPanel.js b/client-app/src/desktop/tabs/charts/OHLCChartPanel.js index f39994854..f570a12f4 100644 --- a/client-app/src/desktop/tabs/charts/OHLCChartPanel.js +++ b/client-app/src/desktop/tabs/charts/OHLCChartPanel.js @@ -1,6 +1,6 @@ import {creates, hoistCmp, XH} from '@xh/hoist/core'; import {Icon} from '@xh/hoist/icon'; -import {filler, span, vframe} from '@xh/hoist/cmp/layout'; +import {filler, span} from '@xh/hoist/cmp/layout'; import {panel} from '@xh/hoist/desktop/cmp/panel'; import {numberInput, select} from '@xh/hoist/desktop/cmp/input'; import {chart} from '@xh/hoist/cmp/chart'; @@ -29,11 +29,8 @@ export const ohlcChartPanel = hoistCmp.factory({ }); const example = hoistCmp.factory( - ({model}) => vframe({ - className: 'toolbox-example-container', - item: chart({ - aspectRatio: model.aspectRatio - }) + ({model}) => chart({ + aspectRatio: model.aspectRatio }) ); diff --git a/client-app/src/desktop/tabs/examples/ExamplesTab.js b/client-app/src/desktop/tabs/examples/ExamplesTab.js index 170632635..1d1e47f37 100644 --- a/client-app/src/desktop/tabs/examples/ExamplesTab.js +++ b/client-app/src/desktop/tabs/examples/ExamplesTab.js @@ -1,6 +1,6 @@ import React from 'react'; import {hoistCmp} from '@xh/hoist/core'; -import {a, code, hbox, p, vframe} from '@xh/hoist/cmp/layout'; +import {a, code, hbox, p} from '@xh/hoist/cmp/layout'; import {button} from '@xh/hoist/desktop/cmp/button'; import {Icon} from '@xh/hoist/icon'; import {panel} from '@xh/hoist/desktop/cmp/panel'; @@ -19,10 +19,9 @@ export const examplesTab = hoistCmp.factory( width: 300, height: 300, margin: 20, - item: vframe({ - className: 'example-tile-text', - items: e.text - }), + padding: 10, + overflowY: 'auto', + item: e.text, bbar: [ button({ text: 'Launch app', diff --git a/client-app/src/desktop/tabs/examples/ExamplesTab.scss b/client-app/src/desktop/tabs/examples/ExamplesTab.scss index 78bcc9317..bffe199be 100644 --- a/client-app/src/desktop/tabs/examples/ExamplesTab.scss +++ b/client-app/src/desktop/tabs/examples/ExamplesTab.scss @@ -1,9 +1,3 @@ -.example-tile-text { - flex: auto; - overflow-y: auto !important; - padding: var(--xh-pad-px); -} - .example-tile-container { justify-content: center; width: 800px; diff --git a/client-app/src/desktop/tabs/forms/FormPanel.js b/client-app/src/desktop/tabs/forms/FormPanel.js index a86ff697b..390e3243c 100644 --- a/client-app/src/desktop/tabs/forms/FormPanel.js +++ b/client-app/src/desktop/tabs/forms/FormPanel.js @@ -1,7 +1,7 @@ import React from 'react'; import {creates, hoistCmp} from '@xh/hoist/core'; import {Icon} from '@xh/hoist/icon'; -import {filler, hbox, hframe, vbox, vframe} from '@xh/hoist/cmp/layout'; +import {filler, hbox, hframe, vbox} from '@xh/hoist/cmp/layout'; import {panel} from '@xh/hoist/desktop/cmp/panel'; import {button} from '@xh/hoist/desktop/cmp/button'; import {form} from '@xh/hoist/cmp/form'; @@ -51,43 +51,41 @@ export const formPanel = hoistCmp.factory({ const formContent = hoistCmp.factory( ({model}) => panel({ flex: 1, + padding: 10, item: form({ fieldDefaults: { inline: model.inline, minimal: model.minimal, commitOnChange: model.commitOnChange }, - item: vframe({ - padding: 10, - items: [ - hbox({ - flex: 'none', - items: [ - vbox({ - flex: 1, - marginRight: 30, - items: [ - lastName(), - region(), - email(), - tags() - ] - }), - vbox({ - flex: 1, - items: [ - startAndEndDate(), - reasonForLeaving(), - managerAndYearsExperience(), - notes() - ] - }) - ] - }), - 'References', - references() - ] - }) + items: [ + hbox({ + flex: 'none', + items: [ + vbox({ + flex: 1, + marginRight: 30, + items: [ + lastName(), + region(), + email(), + tags() + ] + }), + vbox({ + flex: 1, + items: [ + startAndEndDate(), + reasonForLeaving(), + managerAndYearsExperience(), + notes() + ] + }) + ] + }), + 'References', + references() + ] }), bbar: bbar() }) diff --git a/client-app/src/desktop/tabs/forms/ToolbarFormPanel.js b/client-app/src/desktop/tabs/forms/ToolbarFormPanel.js index 2e1f2fd5d..f07e74cce 100644 --- a/client-app/src/desktop/tabs/forms/ToolbarFormPanel.js +++ b/client-app/src/desktop/tabs/forms/ToolbarFormPanel.js @@ -7,7 +7,7 @@ import React from 'react'; import {creates, hoistCmp} from '@xh/hoist/core'; import {Icon} from '@xh/hoist/icon'; -import {filler, frame} from '@xh/hoist/cmp/layout'; +import {filler} from '@xh/hoist/cmp/layout'; import {panel} from '@xh/hoist/desktop/cmp/panel'; import {button} from '@xh/hoist/desktop/cmp/button'; import {form} from '@xh/hoist/cmp/form'; @@ -53,6 +53,7 @@ export const toolbarFormPanel = hoistCmp.factory({ icon: Icon.edit(), width: '90%', height: 300, + padding: 10, tbar: form({ model: topFormModel, fieldDefaults: {minimal: true}, @@ -164,10 +165,7 @@ export const toolbarFormPanel = hoistCmp.factory({ }) ) }), - item: frame({ - padding: 10, - item: 'Help, I am surrounded by toolbars!' - }) + item: 'Help, I am surrounded by toolbars!' }) }); } diff --git a/client-app/src/desktop/tabs/other/IconsPanel.js b/client-app/src/desktop/tabs/other/IconsPanel.js index 362411d75..629920f5f 100644 --- a/client-app/src/desktop/tabs/other/IconsPanel.js +++ b/client-app/src/desktop/tabs/other/IconsPanel.js @@ -3,7 +3,7 @@ import {faIcons} from '@fortawesome/pro-regular-svg-icons'; import {hoistCmp} from '@xh/hoist/core'; import {panel} from '@xh/hoist/desktop/cmp/panel'; import {Icon} from '@xh/hoist/icon'; -import {div, table, tbody, td, th, tr} from '@xh/hoist/cmp/layout'; +import {table, tbody, td, th, tr} from '@xh/hoist/cmp/layout'; import {without} from 'lodash'; import React from 'react'; import {wrapper} from '../../common/Wrapper'; @@ -48,12 +48,10 @@ export const iconsPanel = hoistCmp.factory( icon: Icon.icon({iconName: 'icons'}), className: 'toolbox-icons-panel', width: 700, - item: div({ - className: 'toolbox-icons-table-scroller', - item: table( - tbody(getAllIcons().map(icon => row(icon))) - ) - }) + overflowY: 'auto', + item: table( + tbody(getAllIcons().map(icon => row(icon))) + ) }) }) ); diff --git a/client-app/src/desktop/tabs/other/IconsPanel.scss b/client-app/src/desktop/tabs/other/IconsPanel.scss index 3045fd146..38633b0b7 100644 --- a/client-app/src/desktop/tabs/other/IconsPanel.scss +++ b/client-app/src/desktop/tabs/other/IconsPanel.scss @@ -1,10 +1,5 @@ .toolbox-icons-panel { height: calc(100% - 200px); - overflow: auto; - - .toolbox-icons-table-scroller { - overflow-y: scroll; - } table { width: 100%; diff --git a/client-app/src/desktop/tabs/other/PinPadPanel.js b/client-app/src/desktop/tabs/other/PinPadPanel.js index 8fd7cb8fa..ffe899501 100644 --- a/client-app/src/desktop/tabs/other/PinPadPanel.js +++ b/client-app/src/desktop/tabs/other/PinPadPanel.js @@ -8,7 +8,6 @@ import {button} from '@xh/hoist/desktop/cmp/button'; import {Icon} from '@xh/hoist/icon'; import {wait} from '@xh/hoist/promise'; -import './PinPadPanel.scss'; import {wrapper} from '../../common/Wrapper'; export const pinPadPanel = hoistCmp.factory({ @@ -29,7 +28,6 @@ export const pinPadPanel = hoistCmp.factory({ icon: Icon.unlock(), width: 380, height: 500, - className: 'tb-pinpad-container', item: !model.loggedIn ? pinPad() : secretPlans(), bbar: [ button({ @@ -45,7 +43,8 @@ export const pinPadPanel = hoistCmp.factory({ const secretPlans = hoistCmp.factory( () => panel({ - className: 'tb-pinpad-container__secrets', + padding: 10, + overflowY: 'auto', items: [ h3('Secret plans'), p('Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam porta velit varius augue fermentum, vulputate tempus magna tempus.'), diff --git a/client-app/src/desktop/tabs/other/PinPadPanel.scss b/client-app/src/desktop/tabs/other/PinPadPanel.scss deleted file mode 100644 index bf4a3f86e..000000000 --- a/client-app/src/desktop/tabs/other/PinPadPanel.scss +++ /dev/null @@ -1,5 +0,0 @@ -.tb-pinpad-container { - &__secrets { - padding: var(--xh-pad-px); - } -} diff --git a/client-app/src/desktop/tabs/other/formats/DateFormatsPanel.js b/client-app/src/desktop/tabs/other/formats/DateFormatsPanel.js index 4b266b63e..193c5b6b4 100644 --- a/client-app/src/desktop/tabs/other/formats/DateFormatsPanel.js +++ b/client-app/src/desktop/tabs/other/formats/DateFormatsPanel.js @@ -37,6 +37,7 @@ export const dateFormatsPanel = hoistCmp.factory({ icon: Icon.print(), className: 'tbox-formats-tab', height: 300, + padding: 10, item: hframe( paramsPanel(), resultsPanel({ @@ -53,6 +54,7 @@ const paramsPanel = hoistCmp.factory( title: 'Function + Options', compactHeader: true, className: 'tbox-formats-tab__panel', + padding: 10, flex: 1, items: [ param({ diff --git a/client-app/src/desktop/tabs/other/formats/NumberFormatsPanel.js b/client-app/src/desktop/tabs/other/formats/NumberFormatsPanel.js index 46fc0ce19..09cd08252 100644 --- a/client-app/src/desktop/tabs/other/formats/NumberFormatsPanel.js +++ b/client-app/src/desktop/tabs/other/formats/NumberFormatsPanel.js @@ -38,6 +38,7 @@ export const numberFormatsPanel = hoistCmp.factory({ icon: Icon.print(), className: 'tbox-formats-tab', height: 550, + padding: 10, item: hframe( paramsPanel(), resultsPanel({ @@ -54,6 +55,7 @@ const paramsPanel = hoistCmp.factory( title: 'Function + Options', compactHeader: true, className: 'tbox-formats-tab__panel', + padding: 10, items: [ param({ bind: 'fnName', diff --git a/client-app/src/desktop/tabs/other/formats/Styles.scss b/client-app/src/desktop/tabs/other/formats/Styles.scss index c3032d20e..6a175aa47 100644 --- a/client-app/src/desktop/tabs/other/formats/Styles.scss +++ b/client-app/src/desktop/tabs/other/formats/Styles.scss @@ -1,12 +1,11 @@ .tbox-formats-tab { margin: 0 var(--xh-pad-double-px) var(--xh-pad-px) var(--xh-pad-double-px); - > .xh-vframe { - padding-left: var(--xh-pad-px); - } - &__panel { - margin: var(--xh-pad-px) var(--xh-pad-px) var(--xh-pad-px) 0; + &:first-child { + margin-right: var(--xh-pad-px); + } + border: var(--xh-border-solid); table { diff --git a/client-app/src/desktop/tabs/panels/BasicPanel.js b/client-app/src/desktop/tabs/panels/BasicPanel.js index a3e0ca108..290c12e80 100644 --- a/client-app/src/desktop/tabs/panels/BasicPanel.js +++ b/client-app/src/desktop/tabs/panels/BasicPanel.js @@ -1,6 +1,6 @@ import React from 'react'; import {creates, hoistCmp, XH} from '@xh/hoist/core'; -import {div, filler, p} from '@xh/hoist/cmp/layout'; +import {filler, p} from '@xh/hoist/cmp/layout'; import {menu, menuItem, popover} from '@xh/hoist/kit/blueprint'; import {wrapper} from '../../common/Wrapper'; import {panel} from '@xh/hoist/desktop/cmp/panel'; @@ -35,6 +35,8 @@ export const basicPanel = hoistCmp.factory({ title: 'Panels › Intro', height: 400, width: 700, + padding: 10, + overflowY: 'scroll', tbar: [ popover({ position: 'bottom-left', @@ -50,10 +52,7 @@ export const basicPanel = hoistCmp.factory({ ) }) ], - item: div({ - className: 'toolbox-panel-text-reader', - items: model.demoText.map(it => p(it)) - }), + items: model.demoText.map(it => p(it)), bbar: [ filler(), select({ diff --git a/client-app/src/desktop/tabs/panels/PanelSizingPanel.js b/client-app/src/desktop/tabs/panels/PanelSizingPanel.js index a8bb67ea9..ae1154657 100644 --- a/client-app/src/desktop/tabs/panels/PanelSizingPanel.js +++ b/client-app/src/desktop/tabs/panels/PanelSizingPanel.js @@ -2,7 +2,7 @@ import React from 'react'; import {creates, hoistCmp, HoistModel, managed, XH} from '@xh/hoist/core'; import {Icon} from '@xh/hoist/icon'; import {bindable, observable} from '@xh/hoist/mobx'; -import {box, filler, h3, hbox, p} from '@xh/hoist/cmp/layout'; +import {filler, h3, hbox, p} from '@xh/hoist/cmp/layout'; import {button} from '@xh/hoist/desktop/cmp/button'; import {toolbar} from '@xh/hoist/desktop/cmp/toolbar'; import {switchInput} from '@xh/hoist/desktop/cmp/input'; @@ -55,22 +55,17 @@ export const panelSizingPanel = hoistCmp.factory({ className: 'xh-border-top', items: [ panel({ + padding: 10, title: 'Left Panel', icon: Icon.arrowToLeft(), model: model.leftPanelModel, compactHeader: true, - item: box({ - className: 'xh-pad', - item: 'Collapsible Left' - }) + item: 'Collapsible Left' }), panel({ - item: box({ - items: loremIpsum, - padding: '0 6 6 6', - display: 'block', - overflowY: 'auto' - }), + padding: '0 10 10', + overflowY: 'auto', + items: loremIpsum, tbar: [ filler(), button({ @@ -90,10 +85,8 @@ export const panelSizingPanel = hoistCmp.factory({ icon: Icon.arrowToRight(), model: model.rightPanelModel, compactHeader: true, - item: box({ - className: 'xh-pad', - item: 'Collapsible Right with minSize and maxSize' - }) + padding: 10, + item: 'Collapsible Right with minSize and maxSize' }) ] }), @@ -102,10 +95,8 @@ export const panelSizingPanel = hoistCmp.factory({ icon: Icon.arrowToBottom(), model: model.bottomPanelModel, compactHeader: true, - item: box({ - padding: 10, - item: 'Collapsible Bottom with minSize and maxSize' - }), + padding: 10, + item: 'Collapsible Bottom with minSize and maxSize', headerItems: [ relativeTimestamp({ options: {prefix: 'Rendered'}, diff --git a/client-app/src/examples/portfolio/PortfolioPanel.js b/client-app/src/examples/portfolio/PortfolioPanel.js index 64c92277c..908586061 100644 --- a/client-app/src/examples/portfolio/PortfolioPanel.js +++ b/client-app/src/examples/portfolio/PortfolioPanel.js @@ -1,6 +1,6 @@ import {creates, hoistCmp} from '@xh/hoist/core'; import {panel} from '@xh/hoist/desktop/cmp/panel'; -import {hbox, vframe} from '@xh/hoist/cmp/layout'; +import {hbox} from '@xh/hoist/cmp/layout'; import {gridPanel} from './GridPanel'; import {detailPanel} from './detail/DetailPanel'; import {mapPanel} from './MapPanel'; @@ -13,7 +13,7 @@ export const portfolioPanel = hoistCmp.factory({ render() { return panel({ mask: 'onLoad', - item: vframe( + items: [ hbox({ flex: 1, items: [ @@ -22,7 +22,7 @@ export const portfolioPanel = hoistCmp.factory({ ] }), detailPanel() - ) + ] }); } }); diff --git a/client-app/src/examples/recalls/DetailsPanel.js b/client-app/src/examples/recalls/DetailsPanel.js deleted file mode 100644 index 69fb6aed5..000000000 --- a/client-app/src/examples/recalls/DetailsPanel.js +++ /dev/null @@ -1,27 +0,0 @@ -import {hoistCmp, uses} from '@xh/hoist/core'; -import {div, table, tbody, td, th, tr} from '@xh/hoist/cmp/layout'; -import {DetailsPanelModel} from './DetailsPanelModel'; - -export const detailsPanel = hoistCmp.factory({ - model: uses(DetailsPanelModel), - - render({model}) { - const {currentRecord} = model; - - if (!currentRecord) return null; - - return div({ - className: 'recalls-detail-wrapper', - item: table( - tbody( - tr(th('Brand Name'), td(`${currentRecord.data.brandName}`)), - tr(th('Generic Name'), td(`${currentRecord.data.genericName}`)), - tr(th('Classification'), td(`${model.classificationDetails}`)), - tr(th('Description'), td(`${currentRecord.data.description}`)), - tr(th('Recalling Firm'), td(`${currentRecord.data.recallingFirm}`)), - tr(th('Reason For Recall'), td(`${currentRecord.data.reason}`)) - ) - ) - }); - } -}); diff --git a/client-app/src/examples/recalls/DetailsTable.js b/client-app/src/examples/recalls/DetailsTable.js new file mode 100644 index 000000000..967e16af5 --- /dev/null +++ b/client-app/src/examples/recalls/DetailsTable.js @@ -0,0 +1,24 @@ +import {hoistCmp, uses} from '@xh/hoist/core'; +import {table, tbody, td, th, tr} from '@xh/hoist/cmp/layout'; +import {DetailsTableModel} from './DetailsTableModel'; + +export const detailsTable = hoistCmp.factory({ + model: uses(DetailsTableModel), + + render({model}) { + const {currentRecord} = model; + + if (!currentRecord) return null; + + return table( + tbody( + tr(th('Brand Name'), td(`${currentRecord.data.brandName}`)), + tr(th('Generic Name'), td(`${currentRecord.data.genericName}`)), + tr(th('Classification'), td(`${model.classificationDetails}`)), + tr(th('Description'), td(`${currentRecord.data.description}`)), + tr(th('Recalling Firm'), td(`${currentRecord.data.recallingFirm}`)), + tr(th('Reason For Recall'), td(`${currentRecord.data.reason}`)) + ) + ); + } +}); diff --git a/client-app/src/examples/recalls/DetailsPanelModel.js b/client-app/src/examples/recalls/DetailsTableModel.js similarity index 96% rename from client-app/src/examples/recalls/DetailsPanelModel.js rename to client-app/src/examples/recalls/DetailsTableModel.js index 8980072df..69b5f472f 100644 --- a/client-app/src/examples/recalls/DetailsPanelModel.js +++ b/client-app/src/examples/recalls/DetailsTableModel.js @@ -2,7 +2,7 @@ import {HoistModel} from '@xh/hoist/core'; import {bindable} from '@xh/hoist/mobx'; @HoistModel -export class DetailsPanelModel { +export class DetailsTableModel { @bindable.ref currentRecord = null; diff --git a/client-app/src/examples/recalls/RecallsPanel.js b/client-app/src/examples/recalls/RecallsPanel.js index 00e58f582..0dc8f65c3 100644 --- a/client-app/src/examples/recalls/RecallsPanel.js +++ b/client-app/src/examples/recalls/RecallsPanel.js @@ -6,7 +6,7 @@ import {buttonGroupInput, textInput} from '@xh/hoist/desktop/cmp/input'; import {panel} from '@xh/hoist/desktop/cmp/panel'; import {toolbarSep} from '@xh/hoist/desktop/cmp/toolbar'; import {Icon} from '@xh/hoist/icon'; -import {detailsPanel} from './DetailsPanel'; +import {detailsTable} from './DetailsTable'; import './RecallsPanel.scss'; import {RecallsPanelModel} from './RecallsPanelModel'; import {PERSIST_APP} from './AppModel'; @@ -15,8 +15,7 @@ export const recallsPanel = hoistCmp.factory({ model: creates(RecallsPanelModel), render({model}) { - const {detailsPanelModel} = model, - {currentRecord} = detailsPanelModel, + const {currentRecord} = model.detailsTableModel, fdaWebsite = 'https://open.fda.gov/apis/drug/enforcement/', aboutBlurb = 'This applet uses the openFDA drug enforcement reports API, ' + 'which provides information on drug recall events since 2004. ' + @@ -75,8 +74,9 @@ export const recallsPanel = hoistCmp.factory({ panel({ title: currentRecord ? currentRecord.data.brandName : 'Select a drug to see its details', icon: Icon.detail(), - item: detailsPanel(), + item: detailsTable(), className: 'toolbox-recalls-detail-panel', + overflow: 'auto', compactHeader: true, model: { side: 'bottom', diff --git a/client-app/src/examples/recalls/RecallsPanel.scss b/client-app/src/examples/recalls/RecallsPanel.scss index 7742c9c24..5a7d6e9ef 100644 --- a/client-app/src/examples/recalls/RecallsPanel.scss +++ b/client-app/src/examples/recalls/RecallsPanel.scss @@ -24,8 +24,4 @@ padding: var(--xh-pad-px); } } - - .recalls-detail-wrapper { - overflow-y: auto; - } } diff --git a/client-app/src/examples/recalls/RecallsPanelModel.js b/client-app/src/examples/recalls/RecallsPanelModel.js index d5a6bc149..b77a29630 100644 --- a/client-app/src/examples/recalls/RecallsPanelModel.js +++ b/client-app/src/examples/recalls/RecallsPanelModel.js @@ -10,7 +10,7 @@ import {GridModel, localDateCol} from '@xh/hoist/cmp/grid'; import {compactDateRenderer} from '@xh/hoist/format'; import {Icon} from '@xh/hoist/icon/Icon'; import {ONE_SECOND} from '@xh/hoist/utils/datetime'; -import {DetailsPanelModel} from './DetailsPanelModel'; +import {DetailsTableModel} from './DetailsTableModel'; import {PERSIST_APP} from './AppModel'; @HoistModel @@ -28,7 +28,7 @@ export class RecallsPanelModel { groupBy = null; @managed - detailsPanelModel = new DetailsPanelModel(); + detailsTableModel = new DetailsTableModel(); @managed gridModel = new GridModel({ @@ -99,7 +99,7 @@ export class RecallsPanelModel { this.addReaction({ track: () => gridModel.selectedRecord, - run: (rec) => this.detailsPanelModel.setCurrentRecord(rec) + run: (rec) => this.detailsTableModel.setCurrentRecord(rec) }); this.addReaction({ From 82f128ccf42de823b59703497afd05eb8b73d1e3 Mon Sep 17 00:00:00 2001 From: Colin Rudd Date: Wed, 24 Jun 2020 18:22:55 -0400 Subject: [PATCH 2/2] Helpfull comment to guide develops who are trying to view this app's content. --- grails-app/services/io/xh/toolbox/app/RecallsService.groovy | 1 + 1 file changed, 1 insertion(+) diff --git a/grails-app/services/io/xh/toolbox/app/RecallsService.groovy b/grails-app/services/io/xh/toolbox/app/RecallsService.groovy index 8753699f2..0878d5dce 100644 --- a/grails-app/services/io/xh/toolbox/app/RecallsService.groovy +++ b/grails-app/services/io/xh/toolbox/app/RecallsService.groovy @@ -20,6 +20,7 @@ class RecallsService extends BaseService { "https://$host/drug/enforcement.json?search=_exists_:openfda&sort=recall_initiation_date:desc&limit=99" : "https://$host/drug/enforcement.json?search=($searchQuery)+AND+_exists_:openfda&sort=recall_initiation_date:desc&limit=99" + // if running on localhost, you must have the host's root cert in your java truststore try { def response = client.executeAsMap(new HttpGet(uri)) lastResponseCode = SC_OK