yuuza/outline
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: Extra spacing below inputs

Browse Source 
fix: UX fixes in share popover with custom links
This commit is contained in:
Tom Moor
2022-12-31 09:34:08 -05:00
parent 16958560e6
commit e70f1ed84c
3 changed files with 21 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
app/components/Input.tsx
View File

@@ -200,11 +200,13 @@ class Input extends React.Component<Props> {
)} )}
</Outline> </Outline>
</label> </label>
<TextWrapper> {error && (
<StyledText type="danger" size="xsmall"> <TextWrapper>
{error} <StyledText type="danger" size="xsmall">
</StyledText> {error}
</TextWrapper> </StyledText>
</TextWrapper>
)}
</Wrapper> </Wrapper>
); );
} }

33
app/scenes/Document/components/SharePopover.tsx
View File

@@ -5,7 +5,6 @@ import { observer } from "mobx-react";
import { ExpandedIcon, GlobeIcon, PadlockIcon } from "outline-icons"; import { ExpandedIcon, GlobeIcon, PadlockIcon } from "outline-icons";
import * as React from "react"; import * as React from "react";
import { useTranslation, Trans } from "react-i18next"; import { useTranslation, Trans } from "react-i18next";
import slugify from "slugify";
import styled from "styled-components"; import styled from "styled-components";
import { SHARE_URL_SLUG_REGEX } from "@shared/utils/urlHelpers"; import { SHARE_URL_SLUG_REGEX } from "@shared/utils/urlHelpers";
import Document from "~/models/Document"; import Document from "~/models/Document";
@@ -13,10 +12,7 @@ import Share from "~/models/Share";
import Button from "~/components/Button"; import Button from "~/components/Button";
import CopyToClipboard from "~/components/CopyToClipboard"; import CopyToClipboard from "~/components/CopyToClipboard";
import Flex from "~/components/Flex"; import Flex from "~/components/Flex";
import Input, { import Input, { StyledText } from "~/components/Input";
TextWrapper,
StyledText as DocumentLinkPreview,
} from "~/components/Input";
import Notice from "~/components/Notice"; import Notice from "~/components/Notice";
import Switch from "~/components/Switch"; import Switch from "~/components/Switch";
import Text from "~/components/Text"; import Text from "~/components/Text";
@@ -172,6 +168,8 @@ function SharePopover({
shareUrl += "?edit=true"; shareUrl += "?edit=true";
} }
const url = shareUrl.replace(/https?:\/\//, "");
return ( return (
<> <>
<Heading> <Heading>
@@ -283,25 +281,20 @@ function SharePopover({
<Input <Input
type="text" type="text"
label={t("Custom link")} label={t("Custom link")}
placeholder={slugify(document.titleWithDefault.toLowerCase())} placeholder="a-unique-link"
onChange={handleUrlSlugChange} onChange={handleUrlSlugChange}
error={slugValidationError} error={slugValidationError}
defaultValue={urlSlug} defaultValue={urlSlug}
/> />
{!slugValidationError && ( {!slugValidationError && urlSlug && (
<DocumentLinkPreviewWrapper> <DocumentLinkPreview type="secondary">
<DocumentLinkPreview type="secondary"> <Trans>
<Trans>The document will be available at</Trans> The document will be accessible at{" "}
<br /> <a href={shareUrl} target="_blank" rel="noopener noreferrer">
<a {{ url }}
href={`${team.url}/s/${urlSlug || share?.id}`}
target="_blank"
rel="noopener noreferrer"
>
{`${team.url}/s/${urlSlug || share?.id}`}
</a> </a>
</DocumentLinkPreview> </Trans>
</DocumentLinkPreviewWrapper> </DocumentLinkPreview>
)} )}
</SwitchWrapper> </SwitchWrapper>
</> </>
@@ -372,7 +365,7 @@ const SwitchText = styled(Text)`
font-size: 15px; font-size: 15px;
`; `;
const DocumentLinkPreviewWrapper = styled(TextWrapper)` const DocumentLinkPreview = styled(StyledText)`
margin-top: -12px; margin-top: -12px;
`; `;

2
shared/i18n/locales/en_US/translation.json
View File

@@ -490,7 +490,7 @@
"Users with edit permission will be redirected to the main app": "Users with edit permission will be redirected to the main app", "Users with edit permission will be redirected to the main app": "Users with edit permission will be redirected to the main app",
"All users see the same publicly shared view": "All users see the same publicly shared view", "All users see the same publicly shared view": "All users see the same publicly shared view",
"Custom link": "Custom link", "Custom link": "Custom link",
"The document will be available at": "The document will be available at", "The document will be accessible at <2>{{url}}</2>": "The document will be accessible at <2>{{url}}</2>",
"More options": "More options", "More options": "More options",
"Close": "Close", "Close": "Close",
"{{ teamName }} is using Outline to share documents, please login to continue.": "{{ teamName }} is using Outline to share documents, please login to continue.", "{{ teamName }} is using Outline to share documents, please login to continue.": "{{ teamName }} is using Outline to share documents, please login to continue.",