mirror of https://github.com/apache/superset.git
style: make listviews overflow scroll; convert less to emotion (#10384)
This commit is contained in:
parent
485cd11ebb
commit
4cb44561d7
|
@ -31,7 +31,156 @@ import FilterControls from './Filters';
|
||||||
import { FetchDataConfig, Filters, SortColumn } from './types';
|
import { FetchDataConfig, Filters, SortColumn } from './types';
|
||||||
import { ListViewError, useListViewState } from './utils';
|
import { ListViewError, useListViewState } from './utils';
|
||||||
|
|
||||||
import './ListViewStyles.less';
|
const ListViewStyles = styled.div`
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
.superset-list-view {
|
||||||
|
text-align: left;
|
||||||
|
background-color: white;
|
||||||
|
border-radius: 4px 0;
|
||||||
|
margin: 0 16px;
|
||||||
|
padding-bottom: 48px;
|
||||||
|
|
||||||
|
.body {
|
||||||
|
overflow: scroll;
|
||||||
|
max-height: 64vh;
|
||||||
|
|
||||||
|
table {
|
||||||
|
border-collapse: separate;
|
||||||
|
|
||||||
|
th {
|
||||||
|
background: white;
|
||||||
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-dropdown {
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-column {
|
||||||
|
height: 30px;
|
||||||
|
padding: 5px;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-close {
|
||||||
|
height: 30px;
|
||||||
|
padding: 5px;
|
||||||
|
|
||||||
|
i {
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-cell-loader {
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.loading-bar {
|
||||||
|
background-color: ${({ theme }) => theme.colors.secondary.light4};
|
||||||
|
border-radius: 7px;
|
||||||
|
|
||||||
|
span {
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:after {
|
||||||
|
position: absolute;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
top: 50%;
|
||||||
|
left: 0;
|
||||||
|
content: '';
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
height: 48px;
|
||||||
|
background-image: linear-gradient(
|
||||||
|
100deg,
|
||||||
|
rgba(255, 255, 255, 0),
|
||||||
|
rgba(255, 255, 255, 0.5) 60%,
|
||||||
|
rgba(255, 255, 255, 0) 80%
|
||||||
|
);
|
||||||
|
background-size: 200px 48px;
|
||||||
|
background-position: -100px 0;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
animation: loading-shimmer 1s infinite;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.actions {
|
||||||
|
white-space: nowrap;
|
||||||
|
font-size: 24px;
|
||||||
|
min-width: 100px;
|
||||||
|
|
||||||
|
svg,
|
||||||
|
i {
|
||||||
|
margin-right: 8px;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
path {
|
||||||
|
fill: ${({ theme }) => theme.colors.primary.base};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-row {
|
||||||
|
.actions {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: ${({ theme }) => theme.colors.secondary.light5};
|
||||||
|
|
||||||
|
.actions {
|
||||||
|
opacity: 1;
|
||||||
|
transition: opacity ease-in ${({ theme }) => theme.transitionTiming}s;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-row-selected {
|
||||||
|
background-color: ${({ theme }) => theme.colors.secondary.light4};
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: ${({ theme }) => theme.colors.secondary.light4};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-cell {
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
max-width: 300px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sort-icon {
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-actions-container {
|
||||||
|
position: absolute;
|
||||||
|
left: 28px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.row-count-container {
|
||||||
|
float: right;
|
||||||
|
padding-right: 24px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes loading-shimmer {
|
||||||
|
40% {
|
||||||
|
background-position: 100% 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
background-position: 100% 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|
||||||
export interface ListViewProps {
|
export interface ListViewProps {
|
||||||
columns: any[];
|
columns: any[];
|
||||||
|
@ -165,7 +314,7 @@ const ListView: FunctionComponent<ListViewProps> = ({
|
||||||
return <Loading />;
|
return <Loading />;
|
||||||
}
|
}
|
||||||
return (
|
return (
|
||||||
<div className="superset-list-view-container">
|
<ListViewStyles>
|
||||||
<div className={`superset-list-view ${className}`}>
|
<div className={`superset-list-view ${className}`}>
|
||||||
<div className="header">
|
<div className="header">
|
||||||
{!isSIP34FilterUIEnabled && filterable && (
|
{!isSIP34FilterUIEnabled && filterable && (
|
||||||
|
@ -271,7 +420,7 @@ const ListView: FunctionComponent<ListViewProps> = ({
|
||||||
onChange={(p: number) => gotoPage(p - 1)}
|
onChange={(p: number) => gotoPage(p - 1)}
|
||||||
hideFirstAndLastPageLinks
|
hideFirstAndLastPageLinks
|
||||||
/>
|
/>
|
||||||
</div>
|
</ListViewStyles>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
@ -1,160 +0,0 @@
|
||||||
/**
|
|
||||||
* Licensed to the Apache Software Foundation (ASF) under one
|
|
||||||
* or more contributor license agreements. See the NOTICE file
|
|
||||||
* distributed with this work for additional information
|
|
||||||
* regarding copyright ownership. The ASF licenses this file
|
|
||||||
* to you under the Apache License, Version 2.0 (the
|
|
||||||
* "License"); you may not use this file except in compliance
|
|
||||||
* with the License. You may obtain a copy of the License at
|
|
||||||
*
|
|
||||||
* http://www.apache.org/licenses/LICENSE-2.0
|
|
||||||
*
|
|
||||||
* Unless required by applicable law or agreed to in writing,
|
|
||||||
* software distributed under the License is distributed on an
|
|
||||||
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
|
||||||
* KIND, either express or implied. See the License for the
|
|
||||||
* specific language governing permissions and limitations
|
|
||||||
* under the License.
|
|
||||||
*/
|
|
||||||
|
|
||||||
@import '~stylesheets/less/variables.less';
|
|
||||||
|
|
||||||
.superset-list-view-container {
|
|
||||||
text-align: center;
|
|
||||||
|
|
||||||
.superset-list-view {
|
|
||||||
text-align: left;
|
|
||||||
background-color: white;
|
|
||||||
border-radius: 4px 0;
|
|
||||||
margin: 0 16px;
|
|
||||||
padding-bottom: 48px;
|
|
||||||
|
|
||||||
.body {
|
|
||||||
overflow: scroll;
|
|
||||||
}
|
|
||||||
|
|
||||||
.filter-dropdown {
|
|
||||||
margin-top: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.filter-column {
|
|
||||||
height: 30px;
|
|
||||||
padding: 5px;
|
|
||||||
font-size: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.filter-close {
|
|
||||||
height: 30px;
|
|
||||||
padding: 5px;
|
|
||||||
|
|
||||||
i {
|
|
||||||
font-size: 20px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.table-cell-loader {
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
.loading-bar {
|
|
||||||
background-color: @brand-secondary-light4;
|
|
||||||
border-radius: 7px;
|
|
||||||
|
|
||||||
span {
|
|
||||||
visibility: hidden;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&:after {
|
|
||||||
position: absolute;
|
|
||||||
transform: translateY(-50%);
|
|
||||||
top: 50%;
|
|
||||||
left: 0;
|
|
||||||
content: '';
|
|
||||||
display: block;
|
|
||||||
width: 100%;
|
|
||||||
height: 48px;
|
|
||||||
background-image: linear-gradient(
|
|
||||||
100deg,
|
|
||||||
rgba(255, 255, 255, 0),
|
|
||||||
rgba(255, 255, 255, 0.5) 60%,
|
|
||||||
rgba(255, 255, 255, 0) 80%
|
|
||||||
);
|
|
||||||
background-size: 200px 48px;
|
|
||||||
background-position: -100px 0;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
animation: loading-shimmer 1s infinite;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.actions {
|
|
||||||
white-space: nowrap;
|
|
||||||
font-size: 24px;
|
|
||||||
min-width: 100px;
|
|
||||||
|
|
||||||
svg,
|
|
||||||
i {
|
|
||||||
margin-right: 8px;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
path {
|
|
||||||
fill: @primary-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.table-row {
|
|
||||||
.actions {
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background-color: @brand-secondary-light5;
|
|
||||||
|
|
||||||
.actions {
|
|
||||||
opacity: 1;
|
|
||||||
transition: opacity ease-in @timing-normal;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.table-row-selected {
|
|
||||||
background-color: @brand-secondary-light4;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background-color: @brand-secondary-light4;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.table-cell {
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
overflow: hidden;
|
|
||||||
white-space: nowrap;
|
|
||||||
max-width: 300px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sort-icon {
|
|
||||||
position: absolute;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-actions-container {
|
|
||||||
position: absolute;
|
|
||||||
left: 28px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.row-count-container {
|
|
||||||
float: right;
|
|
||||||
padding-right: 24px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes loading-shimmer {
|
|
||||||
40% {
|
|
||||||
background-position: 100% 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
100% {
|
|
||||||
background-position: 100% 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
Loading…
Reference in New Issue