filecoin-project/slate
1
1
Fork 0
mirror of https://github.com/filecoin-project/slate.git synced 2024-11-23 14:07:20 +03:00
Code Issues Packages Projects Releases Wiki Activity

fix(GlobalCarousel/Jumpers/EditChannels): truncate long tags and add overflow when user has too many tags

Browse Source
This commit is contained in:
Aminejv 2021-11-01 08:50:13 +01:00
parent 112184fb3b
commit 172e674961
2 changed files with 20 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/core/Jumper/index.js
View File

@ -47,7 +47,7 @@ function Root({ children, onClose, ...props }) {
initial={{ y: 10, opacity: 0 }} initial={{ y: 10, opacity: 0 }}
animate={{ y: 0, opacity: 1 }} animate={{ y: 0, opacity: 1 }}
exit={{ y: 10, opacity: 0 }} exit={{ y: 10, opacity: 0 }}
transition={{ duration: 0.4, ease: "easeInOut" }} transition={{ duration: 0.25, ease: "easeInOut" }}
css={STYLES_JUMPER_ROOT} css={STYLES_JUMPER_ROOT}
{...props} {...props}
> >

25
components/system/components/GlobalCarousel/jumpers/EditChannels.js
View File

@ -8,6 +8,7 @@ import * as UserBehaviors from "~/common/user-behaviors";
import * as Constants from "~/common/constants"; import * as Constants from "~/common/constants";
import * as MobileJumper from "~/components/system/components/GlobalCarousel/jumpers/MobileLayout"; import * as MobileJumper from "~/components/system/components/GlobalCarousel/jumpers/MobileLayout";
import * as Strings from "~/common/strings"; import * as Strings from "~/common/strings";
import * as Validations from "~/common/validations";
import { Show } from "~/components/utility/Show"; import { Show } from "~/components/utility/Show";
import { css } from "@emotion/react"; import { css } from "@emotion/react";
@ -33,10 +34,12 @@ const STYLES_CHANNEL_BUTTON_SELECTED = (theme) => css`
function ChannelButton({ children, isSelected, css, ...props }) { function ChannelButton({ children, isSelected, css, ...props }) {
return ( return (
<button <button
css={[STYLES_CHANNEL_BUTTON, isSelected && STYLES_CHANNEL_BUTTON_SELECTED, css]}
{...props} {...props}
css={[STYLES_CHANNEL_BUTTON, isSelected && STYLES_CHANNEL_BUTTON_SELECTED, css]}
> >
{children} <System.P2 nbrOflines={1} as="span">
{children}
</System.P2>
</button> </button>
); );
} }
@ -74,8 +77,12 @@ function ChannelKeyboardShortcut({ searchResults, searchQuery, onAddFileToChanne
return ( return (
<div css={Styles.HORIZONTAL_CONTAINER_CENTERED}> <div css={Styles.HORIZONTAL_CONTAINER_CENTERED}>
<System.P3 color="textGray"> <System.P3 color="textGray" style={{ display: "inline-flex" }}>
Select {selectedChannel.isPublic ? "public" : "private"} tag "{selectedChannel.slatename}" Select {selectedChannel.isPublic ? "public" : "private"} tag "
<System.P3 nbrOflines={1} as="span" style={{ maxWidth: 100 }}>
{selectedChannel.slatename}
</System.P3>
"
</System.P3> </System.P3>
<System.P3 css={STYLES_RETURN_KEY} style={{ marginLeft: 4 }}> <System.P3 css={STYLES_RETURN_KEY} style={{ marginLeft: 4 }}>
⏎ ⏎
@ -190,6 +197,8 @@ function Channels({
<ChannelButton <ChannelButton
isSelected={channel.doesContainFile} isSelected={channel.doesContainFile}
onClick={() => onAddFileToChannel(channel, channel.doesContainFile)} onClick={() => onAddFileToChannel(channel, channel.doesContainFile)}
title={channel.slatename}
style={{ maxWidth: "48ch" }}
> >
{channel.slatename} {channel.slatename}
</ChannelButton> </ChannelButton>
@ -201,6 +210,7 @@ function Channels({
<ChannelButton <ChannelButton
css={Styles.HORIZONTAL_CONTAINER_CENTERED} css={Styles.HORIZONTAL_CONTAINER_CENTERED}
onClick={() => onCreateChannel(searchQuery)} onClick={() => onCreateChannel(searchQuery)}
title={searchQuery}
> >
<SVG.Plus width={16} height={16} style={{ pointerEvents: "none" }} /> <SVG.Plus width={16} height={16} style={{ pointerEvents: "none" }} />
<span style={{ marginLeft: 4 }}>{searchQuery}</span> <span style={{ marginLeft: 4 }}>{searchQuery}</span>
@ -312,7 +322,10 @@ const useChannelsSearch = ({ privateChannels, publicChannels }) => {
const handleQueryChange = (e) => { const handleQueryChange = (e) => {
const nextValue = e.target.value; const nextValue = e.target.value;
setQuery(Strings.createSlug(nextValue, "")); //NOTE(amine): allow input's value to be empty but keep other validations
if (Strings.isEmpty(nextValue) || Validations.slatename(nextValue)) {
setQuery(Strings.createSlug(nextValue, ""));
}
}; };
const clearQuery = () => setQuery(""); const clearQuery = () => setQuery("");
@ -376,7 +389,7 @@ export function EditChannels({ file, viewer, isOpen, onClose, onAction }) {
<ChannelsEmpty /> <ChannelsEmpty />
</Jumper.Item> </Jumper.Item>
) : ( ) : (
<Jumper.Item> <Jumper.Item style={{ overflowY: "auto", flex: "1 0 0" }}>
<Channels <Channels
header="Private" header="Private"
isSearching={isSearching} isSearching={isSearching}