Merge pull request #808 from TurboWarp/more-extension-library

Various library improvements
TurboWarp · Aug 24, 2023 · 83442ac · 83442ac
2 parents f0ad75d + a0ee7cf
commit 83442ac
Show file tree

Hide file tree

Showing 9 changed files with 283 additions and 62 deletions.
diff --git a/src/components/library-item/favorite-active.svg b/src/components/library-item/favorite-active.svg
diff --git a/src/components/library-item/favorite-inactive.svg b/src/components/library-item/favorite-inactive.svg
diff --git a/src/components/library-item/library-item.css b/src/components/library-item/library-item.css
@@ -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;
 }
diff --git a/src/components/library-item/library-item.jsx b/src/components/library-item/library-item.jsx
@@ -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';
 
@@ -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(
@@ -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>
@@ -50,6 +84,7 @@ class LibraryItemComponent extends React.PureComponent {
                         <img
                             className={styles.libraryItemInsetImage}
                             src={this.props.insetIconURL}
+                            draggable={false}
                         />
                     </div>
                 ) : null}
@@ -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>
@@ -132,6 +173,8 @@ class LibraryItemComponent extends React.PureComponent {
                         </div>
                     </div>
                 ) : null}
+
+                {favorite}
             </div>
         ) : (
             <Box
@@ -160,6 +203,7 @@ class LibraryItemComponent extends React.PureComponent {
                             className={styles.libraryItemImage}
                             loading="lazy"
                             src={this.props.iconURL}
+                            draggable={false}
                         />
                     </Box>
                 </Box>
@@ -171,6 +215,8 @@ class LibraryItemComponent extends React.PureComponent {
                         onStop={this.props.onStop}
                     />
                 ) : null}
+
+                {favorite}
             </Box>
         );
     }
@@ -179,6 +225,7 @@ class LibraryItemComponent extends React.PureComponent {
 
 
 LibraryItemComponent.propTypes = {
+    intl: intlShape,
     bluetoothRequired: PropTypes.bool,
     collaborator: PropTypes.string,
     description: PropTypes.oneOfType([
@@ -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,