ilyakooo0/urbit
1
0
Fork 0
mirror of https://github.com/ilyakooo0/urbit.git synced 2024-11-11 16:09:31 +03:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #4310 from urbit/mp/landscape/typography-refresh-sprint

Browse Source 
landscape: typography refresh sprint QA
This commit is contained in:
matildepark 2021-01-19 19:11:59 -05:00 committed by GitHub
commit 4dd29ac140
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
16 changed files with 52 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
pkg/interface/src/views/apps/chat/components/chat-editor.js
View File

@ -193,6 +193,8 @@ export default class ChatEditor extends Component {
alignItems='center'
flexGrow='1'
height='100%'
paddingTop={MOBILE_BROWSER_REGEX.test(navigator.userAgent) ? '16px' : '0'}
paddingBottom={MOBILE_BROWSER_REGEX.test(navigator.userAgent) ? '16px' : '0'}
maxHeight='224px'
width='calc(100% - 88px)'
className={inCodeMode ? 'chat code' : 'chat'}

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

@ -102,7 +102,7 @@ export default function LaunchApp(props) {
icon="CreateGroup"
bg="green"
color="#fff"
text="Create a Group"
text="Create Group"
>
<NewGroup {...props} />
</ModalButton>

12
pkg/interface/src/views/apps/links/components/LinkItem.tsx
View File

@ -72,7 +72,7 @@ export const LinkItem = (props: LinkItemProps) => {
}
return (
<Box width="100%" {...rest}>
<Box
lineHeight="tall"
display='flex'
@ -116,9 +116,9 @@ export const LinkItem = (props: LinkItemProps) => {
</Anchor>
</Text>
</Box>
<Row minWidth='0' flexShrink={0} width="100%" justifyContent="space-between" py={3} bg="white">
<Author
showImage
contacts={contacts}
@ -136,9 +136,9 @@ export const LinkItem = (props: LinkItemProps) => {
</Box>
</Link>
</Box>
<Dropdown
width="200px"
dropWidth="200px"
alignX="right"
alignY="top"
options={
@ -156,7 +156,7 @@ export const LinkItem = (props: LinkItemProps) => {
>
<Icon ml="2" display="block" icon="Ellipsis" color="gray" />
</Dropdown>
</Row>
</Box>);
};

4
pkg/interface/src/views/apps/links/components/LinkSubmit.tsx
View File

@ -132,7 +132,6 @@ const LinkSubmit = (props: LinkSubmitProps) => {
position="absolute"
px={2}
pt={2}
fontSize={0}
style={{ pointerEvents: 'none' }}
>{canUpload
? <>
@ -180,7 +179,6 @@ const LinkSubmit = (props: LinkSubmitProps) => {
type="url"
pl={2}
width="100%"
fontSize={0}
py={2}
color="black"
backgroundColor="transparent"
@ -198,8 +196,8 @@ const LinkSubmit = (props: LinkSubmitProps) => {
pl={2}
backgroundColor="transparent"
width="100%"
fontSize={0}
color="black"
fontSize={1}
style={{
resize: 'none',
height: 40

8
pkg/interface/src/views/apps/profile/profile.tsx
View File

@ -33,7 +33,7 @@ const SidebarItem = ({ children, view, current }) => {
backgroundColor={selected ? "washedGray" : "white"}
>
<Icon mr={2} display="inline-block" icon={icon(view)} color='black' />
<Text color='black' fontSize={0}>
<Text color='black'>
{children}
</Text>
</Row>
@ -76,7 +76,7 @@ export default function ProfileScreen(props: any) {
height="100%"
width="100%"
display="grid"
gridTemplateColumns={["100%", "200px 1fr"]}
gridTemplateColumns={["100%", "250px 1fr"]}
gridTemplateRows={["48px 1fr", "1fr"]}
borderRadius={1}
bg="white"
@ -95,8 +95,8 @@ export default function ProfileScreen(props: any) {
bg={sigilColor}
borderRadius={8}
my={4}
height={128}
width={128}
height={160}
width={160}
display="flex"
justifyContent="center"
alignItems="center"

4
pkg/interface/src/views/apps/publish/components/NotePreview.tsx
View File

@ -61,9 +61,9 @@ export function NotePreview(props: NotePreviewProps) {
overflow='hidden'
p='2'
>
<WrappedBox mb={2}><Text bold fontSize='0'>{title}</Text></WrappedBox>
<WrappedBox mb={2}><Text bold>{title}</Text></WrappedBox>
<WrappedBox>
<Text fontSize='14px'>
<Text fontSize='14px' lineHeight='tall'>
<ReactMarkdown
unwrapDisallowed
allowedTypes={['text', 'root', 'break', 'paragraph', 'image']}

35
pkg/interface/src/views/apps/publish/components/Notebook.tsx
View File

@ -1,10 +1,9 @@
import React from "react";
import { Link, RouteComponentProps } from "react-router-dom";
import { RouteComponentProps } from "react-router-dom";
import { NotebookPosts } from "./NotebookPosts";
import { Box, Button, Text, Row, Col } from "@tlon/indigo-react";
import { Col } from "@tlon/indigo-react";
import GlobalApi from "~/logic/api/global";
import { Contacts, Rolodex, Groups, Associations, Graph, Association, Unreads } from "~/types";
import { useShowNickname } from "~/logic/lib/util";
interface NotebookProps {
api: GlobalApi;
@ -30,44 +29,14 @@ export function Notebook(props: NotebookProps & RouteComponentProps) {
association,
graph
} = props;
const { metadata } = association;
const group = groups[association?.['group-path']];
if (!group) {
return null; // Waiting on groups to populate
}
const relativePath = (p: string) => props.baseUrl + p;
const contact = notebookContacts?.[ship];
const isOwn = `~${window.ship}` === ship;
let isWriter = true;
if (group.tags?.publish?.[`writers-${book}`]) {
isWriter = isOwn || group.tags?.publish?.[`writers-${book}`]?.has(window.ship);
}
const showNickname = useShowNickname(contact);
return (
<Col gapY="4" pt={4} mx="auto" px={3} maxWidth="768px">
<Row justifyContent="space-between">
<Box>
<Text display='block'>{metadata?.title}</Text>
<Text color="lightGray">by </Text>
<Text fontFamily={showNickname ? 'sans' : 'mono'}>
{showNickname ? contact?.nickname : ship}
</Text>
</Box>
{isWriter && (
<Link to={relativePath('/new')}>
<Button primary style={{ cursor: 'pointer' }}>
New Post
</Button>
</Link>
)}
</Row>
<Box borderBottom="1" borderBottomColor="washedGray" />
<NotebookPosts
graph={graph}
host={ship}

3
pkg/interface/src/views/components/Author.tsx
View File

@ -52,13 +52,14 @@ export default function Author(props: AuthorProps) {
<Box
ml={showImage ? 2 : 0}
color="black"
fontSize='1'
lineHeight='tall'
fontFamily={showNickname ? "sans" : "mono"}
fontWeight={showNickname ? '500' : '400'}
>
{name}
</Box>
<Box ml={2} color={props.unread ? "blue" : "gray"}>
<Box fontSize='1' ml={2} color={props.unread ? "blue" : "gray"}>
{dateFmt}
</Box>
{props.children}

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

@ -62,7 +62,6 @@ const StatusBar = (props) => {
</StatusBarItem>
<StatusBarItem width={['32px', 'auto']} px={'2'} flexShrink='0' onClick={() => props.history.push('/~profile')}>
<Sigil ship={props.ship} size={16} color='black' classes='mix-blend-diff' icon />
<Text ml={2} display={["none", "inline"]} fontFamily="mono">{cite(props.ship)}</Text>
</StatusBarItem>
</Row>
</Box>

2
pkg/interface/src/views/components/leap/OmniboxInput.js
View File

@ -22,7 +22,7 @@ export class OmniboxInput extends Component {
border='1px solid transparent'
borderRadius='2'
maxWidth='calc(600px - 1.15rem)'
fontSize='0'
fontSize='1'
style={{ boxSizing: 'border-box' }}
placeholder='Search...'
onKeyDown={props.control}

2
pkg/interface/src/views/landscape/components/ChannelMenu.tsx
View File

@ -121,7 +121,7 @@ export function ChannelMenu(props: ChannelMenuProps) {
alignY="top"
dropWidth="250px"
>
<Icon display="block" icon="Menu" color="gray" />
<Icon display="block" icon="Menu" color="gray" pr='2' />
</Dropdown>
);
}

2
pkg/interface/src/views/landscape/components/GroupSwitcher.tsx
View File

@ -162,7 +162,7 @@ export function GroupSwitcher(props: {
>
<Row width='100%' minWidth='0' flexShrink={0}>
<Row justifyContent="space-between" mr={1} flexShrink={0} width='100%' minWidth='0'>
<Text lineHeight="1" fontSize='2' fontWeight="700" overflow='hidden' display='inline-block' flexShrink='1' style={{ textOverflow: 'ellipsis', whiteSpace: 'pre' }}>{title}</Text>
<Text lineHeight="1.1" fontSize='2' fontWeight="700" overflow='hidden' display='inline-block' flexShrink='1' style={{ textOverflow: 'ellipsis', whiteSpace: 'pre' }}>{title}</Text>
</Row>
</Row>
</Dropdown>

2
pkg/interface/src/views/landscape/components/PopoverRoutes.tsx
View File

@ -80,7 +80,7 @@ export function PopoverRoutes(
<Box
display="grid"
gridTemplateRows={["32px 1fr", "100%"]}
gridTemplateColumns={["100%", "150px 1fr"]}
gridTemplateColumns={["100%", "250px 1fr"]}
height="100%"
width="100%"
>

2
pkg/interface/src/views/landscape/components/Resource.tsx
View File

@ -52,6 +52,7 @@ export function Resource(props: ResourceProps) {
return (
<ResourceSkeleton
baseUrl={props.baseUrl}
groupTags={props.groups?.[selectedGroup]?.tags}
{...skelProps}
>
<ChannelSettings
@ -72,6 +73,7 @@ export function Resource(props: ResourceProps) {
notificationsGraphConfig={props.notificationsGraphConfig}
notificationsChatConfig={props.notificationsChatConfig}
baseUrl={props.baseUrl}
groupTags={props.groups?.[selectedGroup]?.tags}
{...skelProps}
atRoot
>

28
pkg/interface/src/views/landscape/components/ResourceSkeleton.tsx
View File

@ -16,7 +16,7 @@ import { ChannelMenu } from "./ChannelMenu";
import { NotificationGraphConfig } from "~/types";
const TruncatedBox = styled(Box)`
white-space: nowrap;
white-space: pre;
text-overflow: ellipsis;
overflow: hidden;
`;
@ -29,19 +29,33 @@ type ResourceSkeletonProps = {
children: ReactNode;
atRoot?: boolean;
title?: string;
groupTags?: any;
};
export function ResourceSkeleton(props: ResourceSkeletonProps) {
const { association, api, baseUrl, children, atRoot } = props;
const { association, api, baseUrl, children, atRoot, groupTags } = props;
const app = association?.metadata?.module || association["app-name"];
const appPath = association["app-path"];
const workspace =
baseUrl === "/~landscape/home" ? "/home" : association["group-path"];
const title = props.title || association?.metadata?.title;
const [, , ship, resource] = appPath.split("/");
const resourcePath = (p: string) => baseUrl + `/resource/${app}/ship/${ship}/${resource}` + p;
const isOwn = `~${window.ship}` === ship;
let isWriter = (app === 'publish') ? true : false;
if (groupTags?.publish?.[`writers-${resource}`]) {
isWriter = isOwn || groupTags?.publish?.[`writers-${resource}`]?.has(window.ship);
}
return (
<Col width="100%" height="100%" overflowY="hidden">
<Box
flexShrink="0"
height='48px'
py="2"
px="2"
display="flex"
@ -54,6 +68,7 @@ export function ResourceSkeleton(props: ResourceSkeletonProps) {
borderRight={1}
borderRightColor="gray"
pr={3}
fontSize='1'
mr={3}
my="1"
display={["block", "none"]}
@ -71,14 +86,14 @@ export function ResourceSkeleton(props: ResourceSkeletonProps) {
{atRoot && (
<>
<Box pr={1} mr={2}>
<Text display="inline-block" verticalAlign="middle">
<Text fontSize='2' fontWeight='700' display="inline-block" verticalAlign="middle" textOverflow="ellipsis" overflow="hidden" whiteSpace="pre">
{title}
</Text>
</Box>
<TruncatedBox
display={["none", "block"]}
maxWidth="60%"
verticalAlign="middle"
maxWidth='60%'
flexShrink={1}
title={association?.metadata?.description}
color="gray"
@ -93,6 +108,11 @@ export function ResourceSkeleton(props: ResourceSkeletonProps) {
</RichText>
</TruncatedBox>
<Box flexGrow={1} />
{isWriter && (
<Link to={resourcePath('/new')} style={{ flexShrink: '0' }}>
<Text bold pr='3' color='blue'>+ New Post</Text>
</Link>
)}
<ChannelMenu
graphNotificationConfig={props.notificationsGraphConfig}
chatNotificationConfig={props.notificationsChatConfig}

4
pkg/interface/src/views/landscape/components/Sidebar/SidebarListHeader.tsx
View File

@ -67,12 +67,12 @@ export function SidebarListHeader(props: {
<Icon icon="Plus" color="gray" pr='2'/>
</Link>
<Link to={`${props.baseUrl}/invites`}
style={{ display: (props.workspace?.type === 'home') ? 'inline-block' : 'none', verticalAlign: 'bottom' }}>
style={{ display: (props.workspace?.type === 'home') ? 'inline-block' : 'none'}}>
<Text
display='inline-block'
verticalAlign='middle'
py='1px'
px='3px'
mr='2'
backgroundColor='washedBlue'
color='blue'
borderRadius='1'>