Skip to content
Snippets Groups Projects
Unverified Commit 587d5009 authored by Kyle Doherty's avatar Kyle Doherty
Browse files

split, 1/3

parent 4bf57c91
Branches
Tags
No related merge requests found
Hide whitespace changes
Inline Side-by-side
frontend/src/metabase/components/BrowserCrumbs.jsx
+ 14
− 14
View file @ 587d5009
......@@ -6,27 +6,27 @@ import Subhead from "metabase/components/Subhead";
// TODO: merge with Breadcrumbs
const BrowseHeader = ({ children }) => (
<Box my={3}>
<Subhead>{children}</Subhead>
</Box>
);
const BrowseHeader = ({ children }) => <Subhead>{children}</Subhead>;
const BrowserCrumbs = ({ crumbs }) => (
<Flex align="center">
<Box>
{crumbs.filter(c => c).map((crumb, index, crumbs) => [
crumb.to ? (
<Link key={"title" + index} to={crumb.to}>
<BrowseHeader>{crumb.title}</BrowseHeader>
</Link>
<Flex align="center">
<Link key={"title" + index} to={crumb.to}>
{crumb.title}
</Link>
{index < crumbs.length - 1 ? (
<Icon key={"divider" + index} name="chevronright" mx={1} />
) : null}
</Flex>
) : (
<BrowseHeader>{crumb.title}</BrowseHeader>
<Box>
<BrowseHeader>{crumb.title}</BrowseHeader>
</Box>
),
index < crumbs.length - 1 ? (
<Icon key={"divider" + index} name="chevronright" mx={2} />
) : null,
])}
</Flex>
</Box>
);
export default BrowserCrumbs;
frontend/src/metabase/components/CollectionLanding.jsx
+ 5
− 80
View file @ 587d5009
......@@ -20,7 +20,6 @@ import Icon from "metabase/components/Icon";
import Link from "metabase/components/Link";
import CollectionEmptyState from "metabase/components/CollectionEmptyState";
import EntityMenu from "metabase/components/EntityMenu";
import Ellipsified from "metabase/components/Ellipsified";
import VirtualizedList from "metabase/components/VirtualizedList";
import BrowserCrumbs from "metabase/components/BrowserCrumbs";
......@@ -29,6 +28,8 @@ import { entityObjectLoader } from "metabase/entities/containers/EntityObjectLoa
import { ROOT_COLLECTION } from "metabase/entities/collections";
import CollectionList from "metabase/components/CollectionList";
// drag-and-drop components
import ItemDragSource from "metabase/containers/dnd/ItemDragSource";
import CollectionDropTarget from "metabase/containers/dnd/CollectionDropTarget";
......@@ -36,82 +37,6 @@ import PinPositionDropTarget from "metabase/containers/dnd/PinPositionDropTarget
import PinDropTarget from "metabase/containers/dnd/PinDropTarget";
import ItemsDragLayer from "metabase/containers/dnd/ItemsDragLayer";
const CollectionItem = ({ collection, color, iconName = "all" }) => (
<Link
to={`collection/${collection.id}`}
hover={{ color: normal.blue }}
color={color || normal.grey2}
>
<Card p={1}>
<Flex align="center" py={1} key={`collection-${collection.id}`}>
<Icon name={iconName} mx={1} color="#93B3C9" />
<h4>
<Ellipsified>{collection.name}</Ellipsified>
</h4>
</Flex>
</Card>
</Link>
);
@connect(({ currentUser }) => ({ currentUser }), null)
class CollectionList extends React.Component {
render() {
const { collections, currentUser, isRoot } = this.props;
return (
<Box mb={2}>
<Grid>
{isRoot && (
<GridItem w={1 / 4} className="relative">
<CollectionDropTarget
collection={{ id: currentUser.personal_collection_id }}
>
<CollectionItem
collection={{
name: t`My personal collection`,
id: currentUser.personal_collection_id,
}}
iconName="star"
/>
</CollectionDropTarget>
</GridItem>
)}
{isRoot &&
currentUser.is_superuser && (
<GridItem w={1 / 4}>
<CollectionItem
collection={{
name: t`Everyone else's personal collections`,
// Bit of a hack. The route /collection/users lists
// user collections but is not itself a colllection,
// but using the fake id users here works
id: "users",
}}
iconName="person"
/>
</GridItem>
)}
{collections
.filter(c => c.id !== currentUser.personal_collection_id)
.map(collection => (
<GridItem
w={1 / 4}
key={collection.id}
mb={1}
className="relative"
>
<CollectionDropTarget collection={collection}>
<ItemDragSource item={collection}>
<CollectionItem collection={collection} />
</ItemDragSource>
</CollectionDropTarget>
</GridItem>
))}
</Grid>
</Box>
);
}
}
const ROW_HEIGHT = 72;
import { entityListLoader } from "metabase/entities/containers/EntityListLoader";
......@@ -196,7 +121,7 @@ class DefaultLanding extends React.Component {
>
<Grid>
{pinned.map((item, index) => (
<GridItem w={1 / 3} className="relative">
<GridItem w={1 / 4} className="relative">
<ItemDragSource item={item}>
<PinnedItem
key={`${item.type}:${item.id}`}
......@@ -216,7 +141,7 @@ class DefaultLanding extends React.Component {
</GridItem>
))}
{pinned.length % 2 === 1 ? (
<GridItem w={1 / 3} className="relative">
<GridItem w={1 / 4} className="relative">
<PinPositionDropTarget
pinIndex={
pinned[pinned.length - 1].collection_position +
......@@ -489,7 +414,7 @@ class CollectionLanding extends React.Component {
return (
<Box mx={4}>
<Box>
<Flex align="center">
<Flex align="center" my={2}>
<BrowserCrumbs
crumbs={[
...ancestors.map(({ id, name }) => ({
......
frontend/src/metabase/components/CollectionList.jsx 0 → 100644
+ 93
− 0
View file @ 587d5009
import React from "react";
import { t } from "c-3po";
import { Box, Flex } from "grid-styled";
import { connect } from "react-redux";
import { normal } from "metabase/lib/colors";
import Card from "metabase/components/Card";
import Ellipsified from "metabase/components/Ellipsified";
import { Grid, GridItem } from "metabase/components/Grid";
import Icon from "metabase/components/Icon";
import Link from "metabase/components/Link";
import CollectionDropTarget from "metabase/containers/dnd/CollectionDropTarget";
import ItemDragSource from "metabase/containers/dnd/ItemDragSource";
const CollectionItem = ({ collection, color, iconName = "all" }) => (
<Link
to={`collection/${collection.id}`}
hover={{ color: normal.blue }}
color={color || normal.grey2}
>
<Card p={1}>
<Flex align="center" py={1} key={`collection-${collection.id}`}>
<Icon name={iconName} mx={1} color="#93B3C9" />
<h4>
<Ellipsified>{collection.name}</Ellipsified>
</h4>
</Flex>
</Card>
</Link>
);
@connect(({ currentUser }) => ({ currentUser }), null)
class CollectionList extends React.Component {
render() {
const { collections, currentUser, isRoot } = this.props;
return (
<Box mb={2}>
<Grid>
{isRoot && (
<GridItem w={1 / 4} className="relative">
<CollectionDropTarget
collection={{ id: currentUser.personal_collection_id }}
>
<CollectionItem
collection={{
name: t`My personal collection`,
id: currentUser.personal_collection_id,
}}
iconName="star"
/>
</CollectionDropTarget>
</GridItem>
)}
{isRoot &&
currentUser.is_superuser && (
<GridItem w={1 / 4}>
<CollectionItem
collection={{
name: t`Everyone else's personal collections`,
// Bit of a hack. The route /collection/users lists
// user collections but is not itself a colllection,
// but using the fake id users here works
id: "users",
}}
iconName="person"
/>
</GridItem>
)}
{collections
.filter(c => c.id !== currentUser.personal_collection_id)
.map(collection => (
<GridItem
w={1 / 4}
key={collection.id}
mb={1}
className="relative"
>
<CollectionDropTarget collection={collection}>
<ItemDragSource item={collection}>
<CollectionItem collection={collection} />
</ItemDragSource>
</CollectionDropTarget>
</GridItem>
))}
</Grid>
</Box>
);
}
}
export default CollectionList;
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment