Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Various library improvements #808

Merged
merged 6 commits into from
Aug 24, 2023
Merged

Various library improvements #808

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
6e45329
Disable dragging on all images in libraries
GarboMuffin Aug 24, 2023
f000776
Simplify sound library
GarboMuffin Aug 24, 2023
d804160
Add favorites to all libraries
GarboMuffin Aug 24, 2023
9571566
Change alt text to unfavorite when favorited
GarboMuffin Aug 24, 2023
93deb83
Fix favoriting some extension items
GarboMuffin Aug 24, 2023
a0ee7cf
Put the link to extensions.turbowarp.org before the list so that peop…
GarboMuffin Aug 24, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
35 changes: 35 additions & 0 deletions src/components/library-item/favorite-active.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
35 changes: 35 additions & 0 deletions src/components/library-item/favorite-inactive.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
21 changes: 17 additions & 4 deletions src/components/library-item/library-item.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -231,8 +231,21 @@
transform: translate(calc(-2 * $space), calc(2 * $space));
}

.incompatible-with-scratch {
padding: 0 1.25rem 1rem 1.25rem;
width: 100%;
text-align: left;
.favorite-container {
display: none;
background: none;
border: none;
padding: 0;
margin: 0;
position: absolute;
top: 0.5rem;
left: 0.5rem;
}
.favorite-icon {
width: 32px;
height: 32px;
}
.favorite-container.active,
.library-item:hover .favorite-container {
display: block;
}
55 changes: 52 additions & 3 deletions src/components/library-item/library-item.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import {FormattedMessage} from 'react-intl';
import {FormattedMessage, intlShape, defineMessages} from 'react-intl';
import PropTypes from 'prop-types';
import React from 'react';

Expand All @@ -9,10 +9,43 @@ import classNames from 'classnames';

import bluetoothIconURL from './bluetooth.svg';
import internetConnectionIconURL from './internet-connection.svg';
import favoriteInactiveIcon from './favorite-inactive.svg';
import favoriteActiveIcon from './favorite-active.svg';

const messages = defineMessages({
favorite: {
defaultMessage: 'Favorite',
description: 'Alt text of icon in costume, sound, and extension libraries to mark an item as favorite.',
id: 'tw.favorite'
},
unfavorite: {
defaultMessage: 'Unfavorite',
description: 'Alt text of icon in costume, sound, and extension libraries to unmark an item as favorite.',
id: 'tw.unfavorite'
}
});

/* eslint-disable react/prefer-stateless-function */
class LibraryItemComponent extends React.PureComponent {
render () {
const favoriteMessage = this.props.intl.formatMessage(
this.props.favorite ? messages.unfavorite : messages.favorite
);
const favorite = (
<button
className={classNames(styles.favoriteContainer, {[styles.active]: this.props.favorite})}
onClick={this.props.onFavorite}
>
<img
src={this.props.favorite ? favoriteActiveIcon : favoriteInactiveIcon}
className={styles.favoriteIcon}
draggable={false}
alt={favoriteMessage}
title={favoriteMessage}
/>
</button>
);

return this.props.featured ? (
<div
className={classNames(
Expand Down Expand Up @@ -42,6 +75,7 @@ class LibraryItemComponent extends React.PureComponent {
aspectRatio: this.props.iconAspectRatio ? this.props.iconAspectRatio.toString() : ''
}}
loading="lazy"
draggable={false}
src={this.props.iconURL}
/>
</div>
Expand All @@ -50,6 +84,7 @@ class LibraryItemComponent extends React.PureComponent {
<img
className={styles.libraryItemInsetImage}
src={this.props.insetIconURL}
draggable={false}
/>
</div>
) : null}
Expand Down Expand Up @@ -103,10 +138,16 @@ class LibraryItemComponent extends React.PureComponent {
className={styles.featuredExtensionMetadataDetail}
>
{this.props.bluetoothRequired ? (
<img src={bluetoothIconURL} />
<img
src={bluetoothIconURL}
draggable={false}
/>
) : null}
{this.props.internetConnectionRequired ? (
<img src={internetConnectionIconURL} />
<img
src={internetConnectionIconURL}
draggable={false}
/>
) : null}
</div>
</div>
Expand All @@ -132,6 +173,8 @@ class LibraryItemComponent extends React.PureComponent {
</div>
</div>
) : null}

{favorite}
</div>
) : (
<Box
Expand Down Expand Up @@ -160,6 +203,7 @@ class LibraryItemComponent extends React.PureComponent {
className={styles.libraryItemImage}
loading="lazy"
src={this.props.iconURL}
draggable={false}
/>
</Box>
</Box>
Expand All @@ -171,6 +215,8 @@ class LibraryItemComponent extends React.PureComponent {
onStop={this.props.onStop}
/>
) : null}

{favorite}
</Box>
);
}
Expand All @@ -179,6 +225,7 @@ class LibraryItemComponent extends React.PureComponent {


LibraryItemComponent.propTypes = {
intl: intlShape,
bluetoothRequired: PropTypes.bool,
collaborator: PropTypes.string,
description: PropTypes.oneOfType([
Expand All @@ -202,6 +249,8 @@ LibraryItemComponent.propTypes = {
PropTypes.string,
PropTypes.node
])),
favorite: PropTypes.bool,
onFavorite: PropTypes.func,
onBlur: PropTypes.func.isRequired,
onClick: PropTypes.func.isRequired,
onFocus: PropTypes.func.isRequired,
Expand Down
Loading
Loading