mirror of
https://github.com/filecoin-project/slate.git
synced 2024-09-19 10:17:57 +03:00
removed collection level tags
This commit is contained in:
parent
70b95110e7
commit
9110cdc313
@ -15,7 +15,6 @@ const EXAMPLE_CODE_JS = (key, slateId) => {
|
|||||||
name: "My Dog Fido",
|
name: "My Dog Fido",
|
||||||
isPublic: true,
|
isPublic: true,
|
||||||
body: "This is an album of my dog, Fido, a golden retriever",
|
body: "This is an album of my dog, Fido, a golden retriever",
|
||||||
tags: ["dogs", "retrievers", "golden retriever"]
|
|
||||||
},
|
},
|
||||||
}),
|
}),
|
||||||
});`;
|
});`;
|
||||||
@ -34,7 +33,6 @@ postJson = {
|
|||||||
name: "My Dog Fido",
|
name: "My Dog Fido",
|
||||||
isPublic: true,
|
isPublic: true,
|
||||||
body: "This is an album of my dog, Fido, a golden retriever",
|
body: "This is an album of my dog, Fido, a golden retriever",
|
||||||
tags: ["dogs", "retrievers", "golden retriever"]
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -47,18 +47,6 @@ const STYLES_HEADER = css`
|
|||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const STYLES_ACCESS = css`
|
|
||||||
box-sizing: border-box;
|
|
||||||
font-family: ${Constants.font.text};
|
|
||||||
font-size: ${Constants.typescale.lvl1};
|
|
||||||
color: ${Constants.system.black};
|
|
||||||
margin: 12px 0;
|
|
||||||
line-height: 1.5;
|
|
||||||
display: block;
|
|
||||||
width: 100%;
|
|
||||||
max-width: 800px;
|
|
||||||
`;
|
|
||||||
|
|
||||||
const STYLES_DESCRIPTION = css`
|
const STYLES_DESCRIPTION = css`
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
font-family: ${Constants.font.text};
|
font-family: ${Constants.font.text};
|
||||||
@ -77,40 +65,6 @@ const STYLES_DESCRIPTION = css`
|
|||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const STYLES_TAGS_WRAPPER = css`
|
|
||||||
box-sizing: border-box;
|
|
||||||
display: block;
|
|
||||||
width: 100%;
|
|
||||||
max-width: 800px;
|
|
||||||
`;
|
|
||||||
|
|
||||||
const STYLES_LIST = css`
|
|
||||||
display: inline-flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
width: 100%;
|
|
||||||
`;
|
|
||||||
|
|
||||||
const STYLES_TAG = css`
|
|
||||||
list-style-type: none;
|
|
||||||
border-radius: 4px;
|
|
||||||
background: ${Constants.semantic.bgLight};
|
|
||||||
color: ${Constants.system.black};
|
|
||||||
font-family: ${Constants.font.text};
|
|
||||||
padding: 2px 8px;
|
|
||||||
margin: 8px 8px 0 0;
|
|
||||||
|
|
||||||
span {
|
|
||||||
line-height: 1.5;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background: ${Constants.system.grayLight4};
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
export const ScenePageHeader = (props) => {
|
export const ScenePageHeader = (props) => {
|
||||||
return (
|
return (
|
||||||
<header css={STYLES_ROOT} style={props.style}>
|
<header css={STYLES_ROOT} style={props.style}>
|
||||||
@ -119,17 +73,6 @@ export const ScenePageHeader = (props) => {
|
|||||||
<div css={STYLES_DESCRIPTION}>
|
<div css={STYLES_DESCRIPTION}>
|
||||||
<ProcessedText text={props.children} />
|
<ProcessedText text={props.children} />
|
||||||
</div>
|
</div>
|
||||||
{props.tags && (
|
|
||||||
<div css={STYLES_TAGS_WRAPPER}>
|
|
||||||
<ul css={STYLES_LIST}>
|
|
||||||
{props.tags.map((tag, i) => (
|
|
||||||
<li key={tag} css={STYLES_TAG}>
|
|
||||||
<span>{tag}</span>
|
|
||||||
</li>
|
|
||||||
))}
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
{props.actions ? <div css={STYLES_RIGHT}>{props.actions}</div> : null}
|
{props.actions ? <div css={STYLES_RIGHT}>{props.actions}</div> : null}
|
||||||
</header>
|
</header>
|
||||||
|
@ -157,16 +157,6 @@ const STYLES_COPY_INPUT = css`
|
|||||||
opacity: 0;
|
opacity: 0;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const STYLES_TAG = css`
|
|
||||||
margin-right: 16px;
|
|
||||||
padding: 4px 8px;
|
|
||||||
border-radius: 2px;
|
|
||||||
border: 1px solid ${Constants.system.black};
|
|
||||||
color: ${Constants.system.black};
|
|
||||||
font-family: ${Constants.font.semiBold};
|
|
||||||
font-size: 0.9rem;
|
|
||||||
`;
|
|
||||||
|
|
||||||
const STYLES_BODY = css`
|
const STYLES_BODY = css`
|
||||||
font-family: ${Constants.font.text};
|
font-family: ${Constants.font.text};
|
||||||
font-size: ${Constants.typescale.lvl0};
|
font-size: ${Constants.typescale.lvl0};
|
||||||
|
@ -35,20 +35,9 @@ export default class SidebarCreateSlate extends React.Component {
|
|||||||
name: "",
|
name: "",
|
||||||
isPublic: true,
|
isPublic: true,
|
||||||
body: "",
|
body: "",
|
||||||
tags: [],
|
|
||||||
suggestions: this.props.viewer?.tags || [],
|
|
||||||
loading: false,
|
loading: false,
|
||||||
};
|
};
|
||||||
|
|
||||||
componentDidMount = () => {
|
|
||||||
this.updateSuggestions();
|
|
||||||
};
|
|
||||||
|
|
||||||
updateSuggestions = () => {
|
|
||||||
let newSuggestions = new Set([...this.state.suggestions, ...this.state.tags]);
|
|
||||||
this.setState({ suggestions: Array.from(newSuggestions) });
|
|
||||||
};
|
|
||||||
|
|
||||||
_handleSubmit = async () => {
|
_handleSubmit = async () => {
|
||||||
this.setState({ loading: true });
|
this.setState({ loading: true });
|
||||||
|
|
||||||
@ -62,7 +51,6 @@ export default class SidebarCreateSlate extends React.Component {
|
|||||||
name: this.state.name,
|
name: this.state.name,
|
||||||
isPublic: this.state.isPublic,
|
isPublic: this.state.isPublic,
|
||||||
body: this.state.body,
|
body: this.state.body,
|
||||||
tags: this.state.tags,
|
|
||||||
});
|
});
|
||||||
console.log(response);
|
console.log(response);
|
||||||
|
|
||||||
@ -105,11 +93,7 @@ export default class SidebarCreateSlate extends React.Component {
|
|||||||
};
|
};
|
||||||
|
|
||||||
_handleChange = (e) => {
|
_handleChange = (e) => {
|
||||||
this.setState({ [e.target.name]: e.target.value }, () => {
|
this.setState({ [e.target.name]: e.target.value });
|
||||||
if (e.target.name === "tags") {
|
|
||||||
this.updateSuggestions();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
};
|
};
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
@ -129,14 +113,14 @@ export default class SidebarCreateSlate extends React.Component {
|
|||||||
|
|
||||||
<div css={STYLES_GROUPING}>
|
<div css={STYLES_GROUPING}>
|
||||||
<System.P1 css={STYLES_HEADER}>Name</System.P1>
|
<System.P1 css={STYLES_HEADER}>Name</System.P1>
|
||||||
<System.P1
|
{/* <System.P1
|
||||||
css={STYLES_TEXT}
|
css={STYLES_TEXT}
|
||||||
style={{
|
style={{
|
||||||
marginTop: 12,
|
marginTop: 12,
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
Give your collection a name so you and others can find it on Slate and on the web.
|
Give your collection a name so you and others can find it on Slate and on the web.
|
||||||
</System.P1>
|
</System.P1> */}
|
||||||
|
|
||||||
<System.Input
|
<System.Input
|
||||||
autoFocus
|
autoFocus
|
||||||
@ -162,14 +146,14 @@ export default class SidebarCreateSlate extends React.Component {
|
|||||||
|
|
||||||
<div css={STYLES_GROUPING}>
|
<div css={STYLES_GROUPING}>
|
||||||
<System.P1 css={STYLES_HEADER}>Description</System.P1>
|
<System.P1 css={STYLES_HEADER}>Description</System.P1>
|
||||||
<System.P1
|
{/* <System.P1
|
||||||
css={STYLES_TEXT}
|
css={STYLES_TEXT}
|
||||||
style={{
|
style={{
|
||||||
marginTop: 12,
|
marginTop: 12,
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
Give your collection a description, add links, and connect it to other collections.
|
Give your collection a description, add links, and connect it to other collections.
|
||||||
</System.P1>
|
</System.P1> */}
|
||||||
|
|
||||||
<System.Textarea
|
<System.Textarea
|
||||||
style={{ marginTop: 12 }}
|
style={{ marginTop: 12 }}
|
||||||
@ -181,26 +165,6 @@ export default class SidebarCreateSlate extends React.Component {
|
|||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div css={STYLES_GROUPING}>
|
|
||||||
<System.P1 css={STYLES_HEADER}>Tags</System.P1>
|
|
||||||
<System.P1
|
|
||||||
css={STYLES_TEXT}
|
|
||||||
style={{
|
|
||||||
marginTop: 12,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Add tags to a collection to categorize it.
|
|
||||||
</System.P1>
|
|
||||||
<System.Tag
|
|
||||||
name="tags"
|
|
||||||
placeholder={`Edit tags for ${this.state.name ? this.state.name : "this collection"}`}
|
|
||||||
tags={this.state.tags}
|
|
||||||
suggestions={this.state.suggestions}
|
|
||||||
style={{ marginTop: 12 }}
|
|
||||||
onChange={this._handleChange}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div css={STYLES_GROUPING}>
|
<div css={STYLES_GROUPING}>
|
||||||
<System.P1 css={STYLES_HEADER} style={{ marginBottom: 12 }}>
|
<System.P1 css={STYLES_HEADER} style={{ marginBottom: 12 }}>
|
||||||
Privacy
|
Privacy
|
||||||
|
@ -51,20 +51,9 @@ export default class SidebarSingleSlateSettings extends React.Component {
|
|||||||
isPublic: this.props.data.isPublic,
|
isPublic: this.props.data.isPublic,
|
||||||
body: this.props.data.data.body,
|
body: this.props.data.data.body,
|
||||||
name: this.props.data.data.name,
|
name: this.props.data.data.name,
|
||||||
tags: this.props.data.data?.tags || [],
|
|
||||||
suggestions: this.props.viewer?.tags || [],
|
|
||||||
modalShow: false,
|
modalShow: false,
|
||||||
};
|
};
|
||||||
|
|
||||||
componentDidMount = () => {
|
|
||||||
this.updateSuggestions();
|
|
||||||
};
|
|
||||||
|
|
||||||
updateSuggestions = () => {
|
|
||||||
let newSuggestions = new Set([...this.state.suggestions, ...this.state.tags]);
|
|
||||||
this.setState({ suggestions: Array.from(newSuggestions) });
|
|
||||||
};
|
|
||||||
|
|
||||||
_handleSubmit = async () => {
|
_handleSubmit = async () => {
|
||||||
let slates = this.props.viewer.slates;
|
let slates = this.props.viewer.slates;
|
||||||
for (let slate of slates) {
|
for (let slate of slates) {
|
||||||
@ -72,12 +61,10 @@ export default class SidebarSingleSlateSettings extends React.Component {
|
|||||||
slate.data.name = this.state.name;
|
slate.data.name = this.state.name;
|
||||||
slate.isPublic = this.state.isPublic;
|
slate.isPublic = this.state.isPublic;
|
||||||
slate.data.body = this.state.body;
|
slate.data.body = this.state.body;
|
||||||
slate.data.tags = this.state.tags;
|
|
||||||
|
|
||||||
let newSuggestions = new Set([...this.state.suggestions, ...this.state.tags]);
|
|
||||||
this.props.onAction({
|
this.props.onAction({
|
||||||
type: "UPDATE_VIEWER",
|
type: "UPDATE_VIEWER",
|
||||||
viewer: { slates, tags: Array.from(newSuggestions) },
|
viewer: { slates },
|
||||||
});
|
});
|
||||||
|
|
||||||
break;
|
break;
|
||||||
@ -91,7 +78,6 @@ export default class SidebarSingleSlateSettings extends React.Component {
|
|||||||
data: {
|
data: {
|
||||||
name: this.state.name,
|
name: this.state.name,
|
||||||
body: this.state.body,
|
body: this.state.body,
|
||||||
tags: this.state.tags,
|
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
@ -105,11 +91,7 @@ export default class SidebarSingleSlateSettings extends React.Component {
|
|||||||
};
|
};
|
||||||
|
|
||||||
_handleChange = (e) => {
|
_handleChange = (e) => {
|
||||||
this.setState({ [e.target.name]: e.target.value }, () => {
|
this.setState({ [e.target.name]: e.target.value });
|
||||||
if (e.target.name === "tags") {
|
|
||||||
this.updateSuggestions();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
};
|
};
|
||||||
|
|
||||||
_handleDelete = async (res) => {
|
_handleDelete = async (res) => {
|
||||||
@ -172,14 +154,14 @@ export default class SidebarSingleSlateSettings extends React.Component {
|
|||||||
|
|
||||||
<div css={STYLES_GROUPING}>
|
<div css={STYLES_GROUPING}>
|
||||||
<System.P1 css={STYLES_HEADER}>Name</System.P1>
|
<System.P1 css={STYLES_HEADER}>Name</System.P1>
|
||||||
<System.P1
|
{/* <System.P1
|
||||||
css={STYLES_TEXT}
|
css={STYLES_TEXT}
|
||||||
style={{
|
style={{
|
||||||
marginTop: 12,
|
marginTop: 12,
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
Give your collection a name so you and others can find it on Slate and on the web.
|
Give your collection a name so you and others can find it on Slate and on the web.
|
||||||
</System.P1>
|
</System.P1> */}
|
||||||
|
|
||||||
<System.Input
|
<System.Input
|
||||||
placeholder="Collection name..."
|
placeholder="Collection name..."
|
||||||
@ -204,14 +186,14 @@ export default class SidebarSingleSlateSettings extends React.Component {
|
|||||||
|
|
||||||
<div css={STYLES_GROUPING}>
|
<div css={STYLES_GROUPING}>
|
||||||
<System.P1 css={STYLES_HEADER}>Description</System.P1>
|
<System.P1 css={STYLES_HEADER}>Description</System.P1>
|
||||||
<System.P1
|
{/* <System.P1
|
||||||
css={STYLES_TEXT}
|
css={STYLES_TEXT}
|
||||||
style={{
|
style={{
|
||||||
marginTop: 12,
|
marginTop: 12,
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
Give your collection a description, add links, and connect it to other collections.
|
Give your collection a description, add links, and connect it to other collections.
|
||||||
</System.P1>
|
</System.P1> */}
|
||||||
|
|
||||||
<System.Textarea
|
<System.Textarea
|
||||||
style={{ marginTop: 12 }}
|
style={{ marginTop: 12 }}
|
||||||
@ -223,26 +205,7 @@ export default class SidebarSingleSlateSettings extends React.Component {
|
|||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div css={STYLES_GROUPING}>
|
{/* <div css={STYLES_GROUPING}>
|
||||||
<System.P1 css={STYLES_HEADER}>Tags</System.P1>
|
|
||||||
<System.P1
|
|
||||||
css={STYLES_TEXT}
|
|
||||||
style={{
|
|
||||||
marginTop: 12,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Add tags to a collection to categorize it.
|
|
||||||
</System.P1>
|
|
||||||
<System.Tag
|
|
||||||
name="tags"
|
|
||||||
tags={this.state.tags}
|
|
||||||
suggestions={this.state.suggestions}
|
|
||||||
style={{ marginTop: 12 }}
|
|
||||||
onChange={this._handleChange}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div css={STYLES_GROUPING}>
|
|
||||||
<System.P1 css={STYLES_HEADER}>Cover image</System.P1>
|
<System.P1 css={STYLES_HEADER}>Cover image</System.P1>
|
||||||
|
|
||||||
<System.P1
|
<System.P1
|
||||||
@ -256,9 +219,9 @@ export default class SidebarSingleSlateSettings extends React.Component {
|
|||||||
</System.P1>
|
</System.P1>
|
||||||
|
|
||||||
<div css={STYLES_IMAGE_BOX} style={{ marginTop: 24 }}>
|
<div css={STYLES_IMAGE_BOX} style={{ marginTop: 24 }}>
|
||||||
<img src={preview} alt="" style={{ maxWidth: "368px", maxHeight: "368px" }} />
|
<img src={preview} alt="" style={{ maxWidth: "240px", maxHeight: "240px" }} />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div> */}
|
||||||
|
|
||||||
<div css={STYLES_GROUPING}>
|
<div css={STYLES_GROUPING}>
|
||||||
<System.P1 css={STYLES_HEADER} style={{ marginBottom: 12 }}>
|
<System.P1 css={STYLES_HEADER} style={{ marginBottom: 12 }}>
|
||||||
|
@ -201,7 +201,7 @@ export const getById = async ({ id }) => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const tags = Utilities.getUserTags({ library: user.library, slates });
|
const tags = Utilities.getUserTags({ library: user.library });
|
||||||
|
|
||||||
let viewer = {
|
let viewer = {
|
||||||
id: user.id,
|
id: user.id,
|
||||||
|
@ -34,7 +34,6 @@ export const sanitizeSlate = (entity) => {
|
|||||||
name: entity.data?.name,
|
name: entity.data?.name,
|
||||||
body: entity.data?.body,
|
body: entity.data?.body,
|
||||||
preview: entity.data?.preview,
|
preview: entity.data?.preview,
|
||||||
tags: entity.data?.tags,
|
|
||||||
},
|
},
|
||||||
fileCount: entity.fileCount,
|
fileCount: entity.fileCount,
|
||||||
subscriberCount: entity.subscriberCount,
|
subscriberCount: entity.subscriberCount,
|
||||||
@ -109,7 +108,6 @@ export const cleanSlate = (entity) => {
|
|||||||
// name: entity.data?.name,
|
// name: entity.data?.name,
|
||||||
// body: entity.data?.body,
|
// body: entity.data?.body,
|
||||||
// preview: entity.data?.preview,
|
// preview: entity.data?.preview,
|
||||||
// tags: entity.data?.tags,
|
|
||||||
// },
|
// },
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
@ -233,7 +233,7 @@ export const generateRandomNumberInRange = (min, max) =>
|
|||||||
Math.floor(Math.random() * (max - min)) + min;
|
Math.floor(Math.random() * (max - min)) + min;
|
||||||
|
|
||||||
// NOTE(daniel): get all tags on slates and files
|
// NOTE(daniel): get all tags on slates and files
|
||||||
export const getUserTags = ({ library, slates }) => {
|
export const getUserTags = ({ library }) => {
|
||||||
let tags = new Set();
|
let tags = new Set();
|
||||||
|
|
||||||
const isNotEmptyArray = (arr) => Array.isArray(arr) && arr?.length > 0;
|
const isNotEmptyArray = (arr) => Array.isArray(arr) && arr?.length > 0;
|
||||||
@ -246,14 +246,6 @@ export const getUserTags = ({ library, slates }) => {
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
slates.forEach((slate) => {
|
|
||||||
if (isNotEmptyArray(slate.data.tags)) {
|
|
||||||
for (let tag of slate.data.tags) {
|
|
||||||
tags.add(tag);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
return Array.from(tags);
|
return Array.from(tags);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -31,7 +31,6 @@ export default async (req, res) => {
|
|||||||
data: {
|
data: {
|
||||||
name: req.body.data.name,
|
name: req.body.data.name,
|
||||||
body: req.body.data.body,
|
body: req.body.data.body,
|
||||||
tags: req.body.data.tags,
|
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -36,7 +36,6 @@ export default async (req, res) => {
|
|||||||
data: {
|
data: {
|
||||||
name: req.body.data.name,
|
name: req.body.data.name,
|
||||||
body: req.body.data.body,
|
body: req.body.data.body,
|
||||||
tags: req.body.data.tags,
|
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -407,7 +407,6 @@ class SlatePage extends React.Component {
|
|||||||
let objects = this.props.data.objects;
|
let objects = this.props.data.objects;
|
||||||
const isPublic = this.props.data.isPublic;
|
const isPublic = this.props.data.isPublic;
|
||||||
const isOwner = this.props.viewer ? this.props.data.ownerId === this.props.viewer.id : false;
|
const isOwner = this.props.viewer ? this.props.data.ownerId === this.props.viewer.id : false;
|
||||||
const tags = data.tags;
|
|
||||||
|
|
||||||
let actions = isOwner ? (
|
let actions = isOwner ? (
|
||||||
<span>
|
<span>
|
||||||
@ -471,7 +470,6 @@ class SlatePage extends React.Component {
|
|||||||
)
|
)
|
||||||
}
|
}
|
||||||
actions={<span css={STYLES_MOBILE_HIDDEN}>{actions}</span>}
|
actions={<span css={STYLES_MOBILE_HIDDEN}>{actions}</span>}
|
||||||
tags={tags}
|
|
||||||
>
|
>
|
||||||
{body}
|
{body}
|
||||||
</ScenePageHeader>
|
</ScenePageHeader>
|
||||||
|
Loading…
Reference in New Issue
Block a user