michael-s-molina commented on a change in pull request #15399:
URL: https://github.com/apache/superset/pull/15399#discussion_r659761882
##########
File path:
superset-frontend/src/explore/components/controls/VizTypeControl/index.tsx
##########
@@ -146,86 +146,98 @@ const UnpaddedModal = styled(Modal)`
const VizPickerLayout = styled.div`
display: grid;
- grid-template-rows: auto 1fr 30%;
+ grid-template-rows: 1fr 35%;
+ grid-template-columns: 1fr 5fr;
+ grid-template-areas:
+ 'sidebar main'
+ 'details details';
height: 70vh;
`;
const SectionTitle = styled.h3`
margin-top: 0;
+ margin-bottom: ${({ theme }) => theme.gridUnit * 2}px;
font-size: ${({ theme }) => theme.gridUnit * 4}px;
- font-weight: 500;
+ font-weight: 600;
line-height: ${({ theme }) => theme.gridUnit * 6}px;
`;
-const IconPane = styled(Row)`
- overflow: auto;
- padding: ${({ theme }) => theme.gridUnit * 4}px;
+const LeftPane = styled.div`
+ grid-area: sidebar;
+ display: flex;
+ flex-direction: column;
+ border-right: 1px solid ${({ theme }) => theme.colors.grayscale.light2};
+ padding: ${({ theme }) => theme.gridUnit * 2}px;
Review comment:
```suggestion
padding: ${({ theme }) => theme.gridUnit * 3}px;
```
##########
File path:
superset-frontend/src/explore/components/controls/VizTypeControl/index.tsx
##########
@@ -146,86 +146,98 @@ const UnpaddedModal = styled(Modal)`
const VizPickerLayout = styled.div`
display: grid;
- grid-template-rows: auto 1fr 30%;
+ grid-template-rows: 1fr 35%;
+ grid-template-columns: 1fr 5fr;
+ grid-template-areas:
+ 'sidebar main'
+ 'details details';
height: 70vh;
`;
const SectionTitle = styled.h3`
margin-top: 0;
+ margin-bottom: ${({ theme }) => theme.gridUnit * 2}px;
font-size: ${({ theme }) => theme.gridUnit * 4}px;
- font-weight: 500;
+ font-weight: 600;
line-height: ${({ theme }) => theme.gridUnit * 6}px;
`;
-const IconPane = styled(Row)`
- overflow: auto;
- padding: ${({ theme }) => theme.gridUnit * 4}px;
+const LeftPane = styled.div`
+ grid-area: sidebar;
+ display: flex;
+ flex-direction: column;
+ border-right: 1px solid ${({ theme }) => theme.colors.grayscale.light2};
+ padding: ${({ theme }) => theme.gridUnit * 2}px;
`;
-const CategoriesTabs = styled(Tabs)`
- overflow: auto;
-
- .ant-tabs-nav {
- width: 20%;
- }
-
- .ant-tabs-content-holder {
- overflow: auto;
- }
-
- & > .ant-tabs-nav .ant-tabs-ink-bar {
- visibility: hidden;
- }
+const SearchWrapper = styled.div`
+ ${({ theme }) => `
+ margin-bottom: ${theme.gridUnit * 2}px;
+ input {
+ font-size: ${theme.typography.sizes.s};
+ }
+ .ant-input-affix-wrapper {
+ padding-left: ${theme.gridUnit * 2}px;
+ }
+ `}
+`;
- .ant-tabs-tab-btn {
- text-transform: capitalize;
- }
+/** Styles to line up prefix/suffix icons in the search input */
+const InputIconAlignment = styled.div`
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ color: ${({ theme }) => theme.colors.grayscale.base};
+`;
+const CategoryLabel = styled.button`
${({ theme }) => `
- &.ant-tabs-left > .ant-tabs-nav .ant-tabs-tab {
- margin: ${theme.gridUnit * 2}px;
- margin-bottom: 0;
- padding: ${theme.gridUnit}px ${theme.gridUnit * 2}px;
-
- .ant-tabs-tab-btn {
- display: block;
- text-align: left;
- }
-
- &:hover,
- &-active {
- color: ${theme.colors.grayscale.dark1};
- border-radius: ${theme.borderRadius}px;
- background-color: ${theme.colors.secondary.light4};
+ all: unset; // remove default button styles
+ cursor: pointer;
+ padding: ${theme.gridUnit}px;
+ border-radius: ${theme.borderRadius}px;
+ line-height: 2em;
+ font-size: ${theme.typography.sizes.s};
+
+ &:focus {
+ outline: initial;
+ }
- .ant-tabs-tab-remove > svg {
- color: ${theme.colors.grayscale.base};
- transition: all 0.3s;
- }
- }
+ &.selected {
+ background-color: ${theme.colors.secondary.light4};
}
`}
`;
+const IconsPane = styled.div`
+ grid-area: main;
+ overflow: auto;
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ padding: ${({ theme }) => theme.gridUnit * 2}px;
+`;
+
const DetailsPane = styled.div`
+ grid-area: details;
border-top: 1px solid ${({ theme }) => theme.colors.grayscale.light2};
padding: ${({ theme }) => theme.gridUnit * 4}px;
display: grid;
grid-template-rows: auto 1fr;
overflow: hidden;
`;
+// overflow hidden on the details pane and overflow auto on the description
+// (plus grid layout) enables the description to scroll while the header stays
in place.
+
const Description = styled.p`
overflow: auto;
`;
-const SearchPane = styled.div`
- border-bottom: 1px solid ${({ theme }) => theme.colors.grayscale.light2};
- padding: ${({ theme }) => theme.gridUnit * 4}px;
-`;
-
const thumbnailContainerCss = (theme: SupersetTheme) => css`
cursor: pointer;
+ width: ${theme.gridUnit * 24}px;
Review comment:
```suggestion
width: ${theme.gridUnit * 30}px;
```
##########
File path:
superset-frontend/src/explore/components/controls/VizTypeControl/index.tsx
##########
@@ -146,86 +146,98 @@ const UnpaddedModal = styled(Modal)`
const VizPickerLayout = styled.div`
display: grid;
- grid-template-rows: auto 1fr 30%;
+ grid-template-rows: 1fr 35%;
+ grid-template-columns: 1fr 5fr;
Review comment:
```suggestion
grid-template-rows: 1fr 25%;
grid-template-columns: 1.5fr 5fr;
```
##########
File path:
superset-frontend/src/explore/components/controls/VizTypeControl/index.tsx
##########
@@ -146,86 +146,98 @@ const UnpaddedModal = styled(Modal)`
const VizPickerLayout = styled.div`
display: grid;
- grid-template-rows: auto 1fr 30%;
+ grid-template-rows: 1fr 35%;
+ grid-template-columns: 1fr 5fr;
+ grid-template-areas:
+ 'sidebar main'
+ 'details details';
height: 70vh;
`;
const SectionTitle = styled.h3`
margin-top: 0;
+ margin-bottom: ${({ theme }) => theme.gridUnit * 2}px;
font-size: ${({ theme }) => theme.gridUnit * 4}px;
Review comment:
Cannot be bigger than the modal header.
```suggestion
font-size: ${({ theme }) => theme.typography.sizes.m}px;
```
##########
File path:
superset-frontend/src/explore/components/controls/VizTypeControl/index.tsx
##########
@@ -365,41 +461,56 @@ const VizTypeControl = (props: VizTypeControlProps) => {
<VizSupportValidation vizType={initialValue} />
</>
</Tooltip>
+
<UnpaddedModal
show={showModal}
onHide={toggleModal}
title={t('Select a visualization type')}
primaryButtonName={t('Select')}
onHandledPrimaryAction={onSubmit}
+ maxWidth="1090px"
responsive
>
<VizPickerLayout>
- <SearchPane>
- <Input
- ref={searchRef}
- type="text"
- value={filter}
- placeholder={t('Search')}
- onChange={changeSearch}
- data-test={`${VIZ_TYPE_CONTROL_TEST_ID}__search-input`}
- />
- </SearchPane>
- <CategoriesTabs tabPosition="left">
- {Object.entries(categories).map(([category, vizTypes]) => (
- <Tabs.TabPane tab={category} key={category}>
- <IconPane
- data-test={`${VIZ_TYPE_CONTROL_TEST_ID}__viz-row`}
- gutter={16}
- >
- {vizTypes.map(entry => (
- <Col xs={12} sm={8} md={6} lg={4} key={entry.key}>
- {renderItem(entry)}
- </Col>
- ))}
- </IconPane>
- </Tabs.TabPane>
+ <LeftPane>
+ <SearchWrapper>
+ <Input
+ type="text"
+ value={searchInputValue}
+ placeholder={t('Search')}
+ onChange={changeSearch}
+ onFocus={startSearching}
Review comment:
I think we should display all values when no category is selected or no
filter is applied, independently of the search input focus.
Examples:
- User clicks on search input. Show all values.
- User types empty. Show all values.
- User types valid text. Show filtered values.
- User focuses out of input without selecting a category or entering a text.
Show all values.
- User focuses out of input without selecting a category but entering a
text. Show filtered values.
##########
File path:
superset-frontend/src/explore/components/controls/VizTypeControl/index.tsx
##########
@@ -146,86 +146,98 @@ const UnpaddedModal = styled(Modal)`
const VizPickerLayout = styled.div`
display: grid;
- grid-template-rows: auto 1fr 30%;
+ grid-template-rows: 1fr 35%;
+ grid-template-columns: 1fr 5fr;
+ grid-template-areas:
+ 'sidebar main'
+ 'details details';
height: 70vh;
`;
const SectionTitle = styled.h3`
margin-top: 0;
+ margin-bottom: ${({ theme }) => theme.gridUnit * 2}px;
font-size: ${({ theme }) => theme.gridUnit * 4}px;
- font-weight: 500;
+ font-weight: 600;
Review comment:
```suggestion
font-weight: ${({ theme }) => theme.typography.weights.bold};
```
##########
File path:
superset-frontend/src/explore/components/controls/VizTypeControl/index.tsx
##########
@@ -365,41 +461,56 @@ const VizTypeControl = (props: VizTypeControlProps) => {
<VizSupportValidation vizType={initialValue} />
</>
</Tooltip>
+
<UnpaddedModal
show={showModal}
onHide={toggleModal}
title={t('Select a visualization type')}
primaryButtonName={t('Select')}
onHandledPrimaryAction={onSubmit}
+ maxWidth="1090px"
Review comment:
```suggestion
maxWidth="950px"
```
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
