ilyakooo0/urbit
1
0
Fork 0
mirror of https://github.com/ilyakooo0/urbit.git synced 2024-12-15 01:52:42 +03:00
Code Issues Packages Projects Releases Wiki Activity

interface: design nits

Browse Source
This commit is contained in:
Matilde Park 2020-10-02 14:02:33 -04:00
parent bddd1557b8
commit 2237117f5c
6 changed files with 24 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
pkg/interface/src/views/apps/groups/components/GroupSwitcher.tsx
View File

@ -156,8 +156,8 @@ export function GroupSwitcher(props: {
} }
> >
<Box p={2} alignItems="center" display="flex"> <Box p={2} alignItems="center" display="flex">
<Box mr={1}> <Box mr={1} flex='1'>
<Text>{title}</Text> <Text overflow='hidden' display='inline-block' maxWidth='144px' style={{ textOverflow: 'ellipsis', whiteSpace: 'pre'}}>{title}</Text>
</Box> </Box>
<Icon mt="2px" display="block" icon="ChevronSouth" /> <Icon mt="2px" display="block" icon="ChevronSouth" />
</Box> </Box>

13
pkg/interface/src/views/apps/launch/app.js
View File

@ -13,8 +13,11 @@ import Welcome from './components/welcome';
import Groups from './components/Groups'; import Groups from './components/Groups';
const Tile = ({ children, bg, to, ...rest }) => ( const Tile = ({ children, bg, to, ...rest }) => (
<Box <Box
m={2} mt='0'
ml='2'
mr='2'
mb={3}
bg="white" bg="white"
width="126px" width="126px"
height="126px" height="126px"
@ -54,7 +57,7 @@ export default class LaunchApp extends React.Component {
</Helmet> </Helmet>
<div className="h-100 flex flex-column h-100"> <div className="h-100 flex flex-column h-100">
<Welcome firstTime={props.launch.firstTime} api={props.api} /> <Welcome firstTime={props.launch.firstTime} api={props.api} />
<Row flexWrap="wrap" mb={4} pitch={4}> <Row ml='2' flexWrap="wrap" mb={4} pitch={4}>
<Tile <Tile
border={1} border={1}
bg="washedGreen" bg="washedGreen"
@ -65,7 +68,7 @@ export default class LaunchApp extends React.Component {
<Icon <Icon
stroke="green" stroke="green"
fill="rgba(0,0,0,0)" fill="rgba(0,0,0,0)"
icon="Circle" icon="Circle"
/> />
<Text ml="1" color="green">Home</Text> <Text ml="1" color="green">Home</Text>
</Row> </Row>
@ -88,7 +91,7 @@ export default class LaunchApp extends React.Component {
/> />
</Row> </Row>
<Groups associations={props.associations} /> <Groups associations={props.associations} />
<Box <Box
position="absolute" position="absolute"
fontFamily="mono" fontFamily="mono"
left="0" left="0"

3
pkg/interface/src/views/apps/launch/components/Groups.tsx
View File

@ -31,7 +31,7 @@ const sortGroupsRecent = (recent: string[]) => (
return Math.max(0,bRecency) - Math.max(0, aRecency); return Math.max(0,bRecency) - Math.max(0, aRecency);
}; };
const sortGroupsAlph = (a: Association, b: Association) => const sortGroupsAlph = (a: Association, b: Association) =>
alphabeticalOrder(a.metadata.title, b.metadata.title); alphabeticalOrder(a.metadata.title, b.metadata.title);
export default function Groups(props: GroupsProps & Parameters<typeof Box>[0]) { export default function Groups(props: GroupsProps & Parameters<typeof Box>[0]) {
@ -48,6 +48,7 @@ export default function Groups(props: GroupsProps & Parameters<typeof Box>[0]) {
return ( return (
<Box <Box
{...boxProps} {...boxProps}
ml='2'
display="grid" display="grid"
gridAutoRows="124px" gridAutoRows="124px"
gridTemplateColumns="repeat(auto-fit, 124px)" gridTemplateColumns="repeat(auto-fit, 124px)"

8
pkg/interface/src/views/apps/launch/components/tiles/tile.js
View File

@ -4,11 +4,11 @@ import React from 'react';
export default class Tile extends React.Component { export default class Tile extends React.Component {
render() { render() {
const { transparent } = this.props; const { transparent } = this.props;
const bgClasses = transparent ? ' ' : ' bg-white bg-gray0-d '; const bgClasses = transparent ? ' ' : ' bg-transparent ';
return ( return (
<div className={"fl ma2 overflow-hidden" + bgClasses} <div className={"fl mr2 ml2 mb3 mt0 overflow-hidden" + bgClasses}
style={{ height: '126px', width: '126px' }}> style={{ height: '126px', width: '126px' }}>
{this.props.children} {this.props.children}
</div> </div>
); );
} }

9
pkg/interface/src/views/components/Sidebar/SidebarItem.tsx
View File

@ -97,18 +97,23 @@ export function SidebarItem(props: {
pr={2} pr={2}
selected={selected} selected={selected}
> >
<Row alignItems="center"> <Row width='100%' alignItems="center" flex='1 auto' minWidth='0'>
<Icon <Icon
display="block" display="block"
color="transparent" color="transparent"
stroke={color} stroke={color}
icon={getAppIcon(appName, module) as any} icon={getAppIcon(appName, module) as any}
/> />
<Box flexShrink={2} ml={2}> <Box width='100%' flexShrink={2} ml={2} display='flex' overflow='hidden'>
<Text <Text
lineHeight="short" lineHeight="short"
display='inline-block'
flex='1'
overflow='hidden'
width='100%'
fontWeight={hasUnread ? "bold" : "regular"} fontWeight={hasUnread ? "bold" : "regular"}
color={selected || isSynced ? "black" : "lightGray"} color={selected || isSynced ? "black" : "lightGray"}
style={{ textOverflow: 'ellipsis', whiteSpace: 'pre'}}
> >
{title} {title}
</Text> </Text>

2
pkg/interface/src/views/components/StatusBar.js
View File

@ -28,7 +28,7 @@ const StatusBar = (props) => {
width="100%" width="100%"
gridTemplateRows="30px" gridTemplateRows="30px"
gridTemplateColumns="3fr 1fr" gridTemplateColumns="3fr 1fr"
py={2} py={3}
px={3} px={3}
> >
<Row collapse> <Row collapse>