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

lower side for collections

parent 587d5009
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
frontend/src/metabase/components/CollectionLanding.jsx
+ 66
− 59
View file @ 0777ff8c
......@@ -168,69 +168,76 @@ class DefaultLanding extends React.Component {
)}
</PinDropTarget>
)}
{showCollectionList && (
<Box>
<Box mb={1}>
<h4>{t`Collections`}</h4>
</Box>
<CollectionList
collections={collections}
isRoot={collectionId === "root"}
/>
</Box>
)}
<Flex align="center" mb={2}>
{unpinned.length > 0 && (
<Box>
<h4>{t`Saved here`}</h4>
<Flex>
{showCollectionList && (
<Box w={1 / 3}>
<Box mb={1}>
<h4>{t`Collections`}</h4>
</Box>
<CollectionList
collections={collections}
isRoot={collectionId === "root"}
/>
</Box>
)}
</Flex>
{unpinned.length > 0 ? (
<PinDropTarget pinIndex={null} margin={8}>
<Box w={2 / 3}>
<Card
mb={selected.length > 0 ? 5 : 2}
style={{
position: "relative",
height: ROW_HEIGHT * unpinned.length,
}}
>
<VirtualizedList
items={unpinned}
rowHeight={ROW_HEIGHT}
renderItem={({ item, index }) => (
<ItemDragSource item={item} selection={selection}>
<NormalItem
key={`${item.type}:${item.id}`}
item={item}
collection={collection}
selection={selection}
onToggleSelected={onToggleSelected}
onMove={moveItems =>
this.setState({ moveItems })
}
/>
</ItemDragSource>
)}
/>
</Card>
</Box>
</PinDropTarget>
) : (
<PinDropTarget pinIndex={null} hideUntilDrag margin={10}>
{({ hovered }) => (
<div
className={cx(
"m2 flex layout-centered",
hovered ? "text-brand" : "text-grey-2",
<Box w={2 / 3} ml={2}>
<Flex align="center" mb={2}>
{unpinned.length > 0 && (
<Box>
<h4>{t`Dashboards questions and pulses`}</h4>
</Box>
)}
</Flex>
{unpinned.length > 0 ? (
<PinDropTarget pinIndex={null} margin={8}>
<Box>
<Card
mb={selected.length > 0 ? 5 : 2}
style={{
position: "relative",
height: ROW_HEIGHT * unpinned.length,
}}
>
<VirtualizedList
items={unpinned}
rowHeight={ROW_HEIGHT}
renderItem={({ item, index }) => (
<ItemDragSource
item={item}
selection={selection}
>
<NormalItem
key={`${item.type}:${item.id}`}
item={item}
collection={collection}
selection={selection}
onToggleSelected={onToggleSelected}
onMove={moveItems =>
this.setState({ moveItems })
}
/>
</ItemDragSource>
)}
/>
</Card>
</Box>
</PinDropTarget>
) : (
<PinDropTarget pinIndex={null} hideUntilDrag margin={10}>
{({ hovered }) => (
<div
className={cx(
"m2 flex layout-centered",
hovered ? "text-brand" : "text-grey-2",
)}
>
{t`Drag here to un-pin`}
</div>
)}
>
{t`Drag here to un-pin`}
</div>
</PinDropTarget>
)}
</PinDropTarget>
)}
</Box>
</Flex>
</Box>
)}
<BulkActionBar showing={selected.length > 0}>
......
frontend/src/metabase/components/CollectionList.jsx
+ 36
− 49
View file @ 0777ff8c
......@@ -20,14 +20,14 @@ const CollectionItem = ({ collection, color, iconName = "all" }) => (
hover={{ color: normal.blue }}
color={color || normal.grey2}
>
<Card p={1}>
<Box bg="#F4F6F8" p={1} mb={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>
</Box>
</Link>
);
......@@ -37,54 +37,41 @@ class CollectionList extends React.Component {
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 && (
<CollectionDropTarget
collection={{ id: currentUser.personal_collection_id }}
>
<CollectionItem
collection={{
name: t`My personal collection`,
id: currentUser.personal_collection_id,
}}
iconName="star"
/>
</CollectionDropTarget>
)}
{isRoot &&
currentUser.is_superuser && (
<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"
/>
)}
{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>
{collections
.filter(c => c.id !== currentUser.personal_collection_id)
.map(collection => (
<CollectionDropTarget collection={collection}>
<ItemDragSource item={collection}>
<CollectionItem collection={collection} />
</ItemDragSource>
</CollectionDropTarget>
))}
</Box>
);
}
......
frontend/src/metabase/nav/containers/Navbar.jsx
+ 1
− 1
View file @ 0777ff8c
......@@ -248,7 +248,7 @@ export default class Navbar extends Component {
</Link>
<Link to="collection/root" mx={1}>
<Box p={1} bg="#69ABE6" className="text-bold rounded">
Saved items
{t`Collections`}
</Box>
</Link>
<Tooltip tooltip={t`Reference`}>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment