pt
/
superset
mirror of https://github.com/apache/superset.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

style: make listviews overflow scroll; convert less to emotion (#10384)

This commit is contained in:
ʈᵃᵢ 2020-07-21 21:41:09 -07:00 committed by GitHub
parent 485cd11ebb
commit 4cb44561d7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 152 additions and 163 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

155
superset-frontend/src/components/ListView/ListView.tsx
View File

@ -31,7 +31,156 @@ import FilterControls from './Filters';
import { FetchDataConfig, Filters, SortColumn } from './types';
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 {
columns: any[];
@ -165,7 +314,7 @@ const ListView: FunctionComponent<ListViewProps> = ({
return <Loading />;
}
return (
<div className="superset-list-view-container">
<ListViewStyles>
<div className={`superset-list-view ${className}`}>
<div className="header">
{!isSIP34FilterUIEnabled && filterable && (
@ -271,7 +420,7 @@ const ListView: FunctionComponent<ListViewProps> = ({
onChange={(p: number) => gotoPage(p - 1)}
hideFirstAndLastPageLinks
/>
</div>
</ListViewStyles>
);
};

160
superset-frontend/src/components/ListView/ListViewStyles.less
View File

@ -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;
}
}
}