diff --git a/src/ui/component/common/credit-amount.jsx b/src/ui/component/common/credit-amount.jsx index 24b85595dfd..ca8837a6879 100644 --- a/src/ui/component/common/credit-amount.jsx +++ b/src/ui/component/common/credit-amount.jsx @@ -10,7 +10,6 @@ type Props = { showFullPrice: boolean, showPlus: boolean, isEstimate?: boolean, - large?: boolean, showLBC?: boolean, fee?: boolean, badge?: boolean, @@ -69,7 +68,6 @@ class CreditAmount extends React.PureComponent { badge, 'badge--cost': badge && amount > 0, 'badge--free': badge && isFree, - 'badge--large': large, })} > {amountText} diff --git a/src/ui/component/fileList/view.jsx b/src/ui/component/fileList/view.jsx index 4a69c12bc10..6f0b5f64e50 100644 --- a/src/ui/component/fileList/view.jsx +++ b/src/ui/component/fileList/view.jsx @@ -50,7 +50,7 @@ export default function FileList(props: Props) { {sortedUris.map((uri, index) => ( - {index === 4 && injectedItem &&
{injectedItem}
} + {index === 4 && injectedItem &&
  • {injectedItem}
    • }     ))} diff --git a/src/ui/component/fileListItem/view.jsx b/src/ui/component/fileListItem/view.jsx index 3bbd1670d67..67c78f324c3 100644 --- a/src/ui/component/fileListItem/view.jsx +++ b/src/ui/component/fileListItem/view.jsx @@ -10,6 +10,7 @@ import UriIndicator from 'component/uriIndicator'; import TruncatedText from 'component/common/truncated-text'; import DateTime from 'component/dateTime'; import FileProperties from 'component/fileProperties'; +import FileTags from 'component/fileTags'; type Props = { uri: string, @@ -84,19 +85,22 @@ function FileListItem(props: Props) { })} > - -
    -
    - -
    -
    - {pending ?
    Pending...
    : } -
    {isChannel ? `${claimsInChannel} ${__('publishes')}` : }
    +
    +
    +
    + +
    +
    -
    -
    - +
    +
    + {pending ?
    Pending...
    : } +
    {isChannel ? `${claimsInChannel} ${__('publishes')}` : }
    +
    + + +
    ); diff --git a/src/ui/component/fileProperties/index.js b/src/ui/component/fileProperties/index.js index d5d7a026175..1d6180a04bf 100644 --- a/src/ui/component/fileProperties/index.js +++ b/src/ui/component/fileProperties/index.js @@ -1,5 +1,5 @@ import { connect } from 'react-redux'; -import { makeSelectFileInfoForUri, makeSelectClaimIsMine, makeSelectTagsForUri } from 'lbry-redux'; +import { makeSelectFileInfoForUri, makeSelectClaimIsMine } from 'lbry-redux'; import { selectRewardContentClaimIds } from 'lbryinc'; import { makeSelectIsSubscribed, makeSelectIsNew } from 'redux/selectors/subscriptions'; import FileProperties from './view'; @@ -10,7 +10,6 @@ const select = (state, props) => ({ isSubscribed: makeSelectIsSubscribed(props.uri)(state), isNew: makeSelectIsNew(props.uri)(state), claimIsMine: makeSelectClaimIsMine(props.uri)(state), - tags: makeSelectTagsForUri(props.uri)(state), }); export default connect( diff --git a/src/ui/component/fileProperties/view.jsx b/src/ui/component/fileProperties/view.jsx index 8d984d9c3ac..bf8c1a4007b 100644 --- a/src/ui/component/fileProperties/view.jsx +++ b/src/ui/component/fileProperties/view.jsx @@ -12,32 +12,20 @@ type Props = { isSubscribed: boolean, isNew: boolean, rewardedContentClaimIds: Array, - tags: Array, }; -function FileProperties(props: Props) { - const { uri, downloaded, claimIsMine, rewardedContentClaimIds, isSubscribed, isNew, tags } = props; +export default function FileProperties(props: Props) { + const { uri, downloaded, claimIsMine, rewardedContentClaimIds, isSubscribed, isNew } = props; const { claimId } = parseURI(uri); const isRewardContent = rewardedContentClaimIds.includes(claimId); return ( - -
    - {isSubscribed && } - {!claimIsMine && downloaded && } - {isRewardContent && } - {isNew && {__('NEW')}} - -
    -
    - {tags.slice(0, 3).map(tag => ( - - {tag} - - ))} -
    -     +
    + {isSubscribed && } + {!claimIsMine && downloaded && } + {isRewardContent && } + {isNew && {__('NEW')}} + +
    ); } - -export default FileProperties; diff --git a/src/ui/component/fileTags/index.js b/src/ui/component/fileTags/index.js new file mode 100644 index 00000000000..bc63f15d7b7 --- /dev/null +++ b/src/ui/component/fileTags/index.js @@ -0,0 +1,13 @@ +import { connect } from 'react-redux'; +import { makeSelectTagsForUri, selectFollowedTags } from 'lbry-redux'; +import FileTags from './view'; + +const select = (state, props) => ({ + tags: makeSelectTagsForUri(props.uri)(state), + followedTags: selectFollowedTags(state), +}); + +export default connect( + select, + null +)(FileTags); diff --git a/src/ui/component/fileTags/view.jsx b/src/ui/component/fileTags/view.jsx new file mode 100644 index 00000000000..82e7345602a --- /dev/null +++ b/src/ui/component/fileTags/view.jsx @@ -0,0 +1,34 @@ +// @flow +import * as icons from 'constants/icons'; +import * as React from 'react'; +import { parseURI } from 'lbry-redux'; +import Icon from 'component/common/icon'; +import FilePrice from 'component/filePrice'; + +type Props = { + tags: Array, + followedTags: Array, +}; + +export default function FileTags(props: Props) { + const { tags, followedTags } = props; + let tagsToDisplay = []; + followedTags.forEach(({ name }) => { + if (tags.includes(name)) { + tagsToDisplay.push(name); + } + }); + + let sortedTags = tags.sort((a, b) => (a > b ? 1 : -1)); + tagsToDisplay = tagsToDisplay.concat(sortedTags.slice(0, 3 - tagsToDisplay.length)); + + return ( +
    + {tagsToDisplay.map(tag => ( + + {tag} + + ))} +
    + ); +} diff --git a/src/ui/component/tags/view.jsx b/src/ui/component/tags/view.jsx index 3a3cb4aa40e..124dea6dd79 100644 --- a/src/ui/component/tags/view.jsx +++ b/src/ui/component/tags/view.jsx @@ -9,11 +9,12 @@ const TAG_HEIGHT = 20; type Props = { tags: Array, + followedTags: Array, className?: string, }; export default function Tags(props: Props) { - const { tags, className } = props; + const { tags, followedTags, className } = props; let listHeight = 0; function getYValues(data) { @@ -41,7 +42,7 @@ export default function Tags(props: Props) { {transitions.map(({ item: tag, props: { y, ...rest }, key }) => ( `translate3d(0,${y / 2}px,0)`), ...rest }} > {tag.name} diff --git a/src/ui/component/tagsDragAndDrop/view.jsx b/src/ui/component/tagsDragAndDrop/view.jsx index dd29508dfcf..9f4eaf3c07f 100644 --- a/src/ui/component/tagsDragAndDrop/view.jsx +++ b/src/ui/component/tagsDragAndDrop/view.jsx @@ -1,23 +1,21 @@ -import React from 'react'; +// @flow +import React, { Fragment } from 'react'; import classnames from 'classnames'; import { animated, useTransition } from 'react-spring'; import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd'; import reorderArray from 'util/reorder-array'; -export default function TagsDragAndDrop(props) { - const { tags, onDragEnd, onDelete } = props; +type Props = {}; + +export default function TagsDragAndDrop(props: Props) { + const { tags, onDragEnd, onDelete, subtitle } = props; const transitions = useTransition(tags, item => item.name, { from: { opacity: 0 }, enter: { opacity: 1 }, }); function handleDragEnd(result) { - // dropped outside the list - if (!result.destination) { - return; - } - - if (result.source.droppableId === 'delete') { + if (result.destination.droppableId === 'delete') { onDelete(result.source.index); } else { let newTags = reorderArray(tags, result.source.index, result.destination.index); @@ -31,36 +29,46 @@ export default function TagsDragAndDrop(props) { {(provided, snapshot) => ( -
    - {transitions.map(({ item, props, key }, index) => ( - - - {(provided, snapshot) => ( - - {item.name} - - )} - - - ))} - {provided.placeholder} -
    + + + {(providedx, snapshotx) => + console.log('x', snapshotx) || ( +
    + {snapshotx.isDraggingOver ? __('Drop to remove') : subtitle} + {providedx.placeholder} +
    + ) + } +     +
    + {transitions.map(({ item, props, key }, index) => ( + + + {(providedy, snapshot) => ( +
    + {item.name} +
    + )} +     +     + ))} +
    +     )}     - {/* - {(provided, snapshot) => ( -
    - Delete Me - {provided.placeholder} -
    - )} -     */}     ); } diff --git a/src/ui/component/tagsSearch/view.jsx b/src/ui/component/tagsSearch/view.jsx index 7c4329add82..8da3517f3a8 100644 --- a/src/ui/component/tagsSearch/view.jsx +++ b/src/ui/component/tagsSearch/view.jsx @@ -14,6 +14,8 @@ const unfollowedTagsAnimation = { leave: { opacity: 0, maxWidth: 0 }, }; +type Props = {}; + export default function TagSelect(props: Props) { const { unfollowedTags, followedTags, doToggleTagFollow, doAddTag } = props; const [newTag, setNewTag] = useState(''); @@ -51,12 +53,15 @@ export default function TagSelect(props: Props) {
    {suggestedTransitions.map(({ item, key, props }) => ( - - - + doToggleTagFollow(item.name)} + style={props} + key={key} + className="tag--inactive" + > + {item.name} + + ))} {!suggestedTransitions.length &&

    No suggested tags

    }
    diff --git a/src/ui/component/tagsSelect/view.jsx b/src/ui/component/tagsSelect/view.jsx index 41f4a8711e9..2a362c80dff 100644 --- a/src/ui/component/tagsSelect/view.jsx +++ b/src/ui/component/tagsSelect/view.jsx @@ -27,10 +27,10 @@ export default function TagSelect(props: Props) { {__('Make This Your Own')} {showClose && !hasClosed &&