From 9faca8da2bbeb10e4ad9a117c6e0e4e82e3a850a Mon Sep 17 00:00:00 2001 From: jessop Date: Tue, 24 Mar 2020 23:15:05 -0400 Subject: [PATCH] adds tip unlock modal to file page i18n messages, handle error case max copy copy update @lbry/components and tweak range styles sigfigs error catching and cleanup apply review changes style table and unlock button handle tip errors separate fileDescription from fileDetails make expandable cards ui tweaks tweak copy, style, behavior remove unused strings forgot an important line --- package.json | 2 +- static/app-strings.json | 39 +++- ui/component/channelForm/view.jsx | 1 - ui/component/common/card.jsx | 68 ++++--- .../common/form-components/form-field.jsx | 10 ++ ui/component/common/icon-custom.jsx | 7 +- ui/component/fileDescription/index.js | 13 ++ ui/component/fileDescription/view.jsx | 47 +++++ ui/component/fileDetails/view.jsx | 116 +++++------- ui/component/fileSubtitle/index.js | 3 +- ui/component/fileSubtitle/view.jsx | 5 +- ui/component/fileValues/index.js | 29 +++ ui/component/fileValues/view.jsx | 115 ++++++++++++ ui/component/publishFile/view.jsx | 1 - ui/component/supportsLiquidate/index.js | 33 ++++ ui/component/supportsLiquidate/view.jsx | 167 ++++++++++++++++++ ui/component/tagsSelect/view.jsx | 1 - ui/constants/icons.js | 1 + ui/constants/modal_types.js | 1 + ui/modal/modalRepost/view.jsx | 1 - ui/modal/modalRouter/view.jsx | 3 + ui/modal/modalSupportsLiquidate/index.js | 15 ++ ui/modal/modalSupportsLiquidate/view.jsx | 19 ++ ui/page/file/view.jsx | 8 + ui/scss/all.scss | 1 + ui/scss/component/_card.scss | 16 +- ui/scss/component/_table.scss | 19 +- ui/scss/component/expanding-details.scss | 15 ++ yarn.lock | 4 +- 29 files changed, 645 insertions(+), 115 deletions(-) create mode 100644 ui/component/fileDescription/index.js create mode 100644 ui/component/fileDescription/view.jsx create mode 100644 ui/component/fileValues/index.js create mode 100644 ui/component/fileValues/view.jsx create mode 100644 ui/component/supportsLiquidate/index.js create mode 100644 ui/component/supportsLiquidate/view.jsx create mode 100644 ui/modal/modalSupportsLiquidate/index.js create mode 100644 ui/modal/modalSupportsLiquidate/view.jsx create mode 100644 ui/scss/component/expanding-details.scss diff --git a/package.json b/package.json index 68c1dfd14..5ff5a8b91 100644 --- a/package.json +++ b/package.json @@ -130,7 +130,7 @@ "imagesloaded": "^4.1.4", "json-loader": "^0.5.4", "lbry-format": "https://github.com/lbryio/lbry-format.git", - "lbry-redux": "lbryio/lbry-redux#90ba18d0602956016ded63e816734713cfd2023a", + "lbry-redux": "lbryio/lbry-redux#1097a63d44a20b87e443fbaa48f95fe3ea5e3f70", "lbryinc": "lbryio/lbryinc#19260fac560daaa4be2d4af372f28109ea96ebf9", "lint-staged": "^7.0.2", "localforage": "^1.7.1", diff --git a/static/app-strings.json b/static/app-strings.json index c5718f953..7e160d014 100644 --- a/static/app-strings.json +++ b/static/app-strings.json @@ -335,6 +335,7 @@ "credits": "credits", "No channel name after @.": "No channel name after @.", "View channel": "View channel", + "Add to your library": "Add to your library", "Web link": "Web link", "Facebook": "Facebook", "Twitter": "Twitter", @@ -841,6 +842,7 @@ "Any amount will give you the highest bid, but larger amounts help your content be trusted and discovered.": "Any amount will give you the highest bid, but larger amounts help your content be trusted and discovered.", "Loading 3D model.": "Loading 3D model.", "Click here": "Click here", + "PDF opened externally. %click_here% to open it again.": "PDF opened externally. %click_here% to open it again.", "Wallet Server": "Wallet Server", "lbry.tv wallet servers": "lbry.tv wallet servers", "Custom wallet servers": "Custom wallet servers", @@ -997,7 +999,7 @@ "Short": "Short", "How Fresh": "How Fresh", "This Default": "This Default", - "Sorry, your request timed out. Modify your options or %again%": "Sorry, your request timed out. Modify your options or %again%", + "Sorry, your request returned no results or timed out. Modify your options or %again%": "Sorry, your request returned no results or timed out. Modify your options or %again%", "Image": "Image", "Model": "Model", "Binary": "Binary", @@ -1008,7 +1010,6 @@ "Only apply a few tags that are relevant to your content, and use the Mature tag as appropriate. Tag abuse will not be tolerated.": "Only apply a few tags that are relevant to your content, and use the Mature tag as appropriate. Tag abuse will not be tolerated.", "Add relevant tags...": "Add relevant tags...", "Enter up to five (5) tags that are relevant to your content, and use the Mature tag as appropriate. Tag abuse will not be tolerated.": "Enter up to five (5) tags that are relevant to your content, and use the Mature tag as appropriate. Tag abuse will not be tolerated.", - "Sorry, your request timed out. Modify your options or %again%": "Sorry, your request timed out. Modify your options or %again%", "gaming, crypto": "gaming, crypto", "Autocomplete": "Autocomplete", "Followed Tags": "Followed Tags", @@ -1084,5 +1085,37 @@ "Kannada": "Kannada", "Transcoding this %size%MB file should take under %processTime% %units%.": "Transcoding this %size%MB file should take under %processTime% %units%.", "FFmpeg not configured. More in %settings_link%.": "FFmpeg not configured. More in %settings_link%.", - "smallresult": "smallresult" + "File Details": "File Details", + "LBC Details": "LBC Details", + "Publish Amount": "Publish Amount", + "Supports and Tips": "Supports and Tips", + "Top for name": "Top for name", + "%name%": "%name%", + "Amount must be a number": "Amount must be a number", + "Amount cannot be blank": "Amount cannot be blank", + "Amount cannot be more than available": "Amount cannot be more than available", + "Amount to unlock": "Amount to unlock", + "Unlock Tips": "Unlock Tips", + "available to unlock.": "available to unlock.", + "%message%": "%message%", + "Support This Claim": "Support This Claim", + "view other claims at lbry://%name%": "view other claims at lbry://%name%", + "Not top for name": "Not top for name", + "loading": "loading", + "Original Publish Amount": "Original Publish Amount", + "Total Staked Amount": "Total Staked Amount", + "Set Inviter": "Set Inviter", + "Sign In to lbry.tv to Earn Rewards From Inviting Your Friends": "Sign In to lbry.tv to Earn Rewards From Inviting Your Friends", + "You haven't published anything with this channel yet!": "You haven't published anything with this channel yet!", + "Publish Something": "Publish Something", + "Amount cannot be zero": "Amount cannot be zero", + "Your content will do better with more staked on it": "Your content will do better with more staked on it", + "She's about to close up the library!": "She's about to close up the library!", + "Community Choice?": "Community Choice?", + "Download to your Library": "Download to your Library", + "Leave a Comment": "Leave a Comment", + "Repost %count%": "Repost %count%", + "File Description": "File Description", + "View %count% reposts": "View %count% reposts", + "Preparing your content": "Preparing your content" } diff --git a/ui/component/channelForm/view.jsx b/ui/component/channelForm/view.jsx index 332da097a..b8d569906 100644 --- a/ui/component/channelForm/view.jsx +++ b/ui/component/channelForm/view.jsx @@ -47,7 +47,6 @@ function ChannelForm(props: Props) { return ( {(title || subtitle) && ( -
- {icon && } -
- {isPageTitle &&

{title}

} - {!isPageTitle &&

{title}

} - {subtitle &&
{subtitle}
} +
+
+ {icon && } +
+ {isPageTitle &&

{title}

} + {!isPageTitle &&

{title}

} + {subtitle &&
{subtitle}
} +
+ {expandable && ( +
+
+ )}
)} - - {body && ( -
- {body} -
- )} - {actions && ( -
- {actions} -
+ {(!expandable || (expandable && expanded)) && ( + <> + {body && ( +
+ {body} +
+ )} + {actions &&
{actions}
} + )} ); diff --git a/ui/component/common/form-components/form-field.jsx b/ui/component/common/form-components/form-field.jsx index 88f2b4622..29165ba44 100644 --- a/ui/component/common/form-components/form-field.jsx +++ b/ui/component/common/form-components/form-field.jsx @@ -32,6 +32,9 @@ type Props = { blockWrap: boolean, charCount?: number, textAreaMaxLength?: number, + range?: number, + min?: number, + max?: number, }; export class FormField extends React.PureComponent { @@ -98,6 +101,13 @@ export class FormField extends React.PureComponent {
); + } else if (type === 'range') { + input = ( +
+ + +
+ ); } else if (type === 'select') { input = ( diff --git a/ui/component/common/icon-custom.jsx b/ui/component/common/icon-custom.jsx index 16d1b826d..82fe8f7ae 100644 --- a/ui/component/common/icon-custom.jsx +++ b/ui/component/common/icon-custom.jsx @@ -209,6 +209,11 @@ export const icons = { ), + [ICONS.SUBTRACT]: buildIcon( + + + + ), [ICONS.CHAT]: buildIcon( ), @@ -218,7 +223,7 @@ export const icons = { [ICONS.NO]: buildIcon( ), - [ICONS.UP]: buildIcon(), + [ICONS.UP]: buildIcon(), [ICONS.DOWN]: buildIcon(), [ICONS.FULLSCREEN]: buildIcon( diff --git a/ui/component/fileDescription/index.js b/ui/component/fileDescription/index.js new file mode 100644 index 000000000..7bef43371 --- /dev/null +++ b/ui/component/fileDescription/index.js @@ -0,0 +1,13 @@ +import { connect } from 'react-redux'; +import { makeSelectClaimForUri, makeSelectMetadataForUri, makeSelectTagsForUri } from 'lbry-redux'; +import { selectUser } from 'lbryinc'; +import FileDescription from './view'; + +const select = (state, props) => ({ + claim: makeSelectClaimForUri(props.uri)(state), + metadata: makeSelectMetadataForUri(props.uri)(state), + user: selectUser(state), + tags: makeSelectTagsForUri(props.uri)(state), +}); + +export default connect(select, null)(FileDescription); diff --git a/ui/component/fileDescription/view.jsx b/ui/component/fileDescription/view.jsx new file mode 100644 index 000000000..118713ac9 --- /dev/null +++ b/ui/component/fileDescription/view.jsx @@ -0,0 +1,47 @@ +// @flow +import React, { Fragment, PureComponent } from 'react'; +import MarkdownPreview from 'component/common/markdown-preview'; +import ClaimTags from 'component/claimTags'; +import Card from 'component/common/card'; + +type Props = { + uri: string, + claim: StreamClaim, + metadata: StreamMetadata, + user: ?any, + tags: any, +}; + +class FileDescription extends PureComponent { + render() { + const { uri, claim, metadata, tags } = this.props; + + if (!claim || !metadata) { + return {__('Empty claim or metadata info.')}; + } + + const { description } = metadata; + + if (!description && !(tags && tags.length)) return null; + return ( + + + {description && ( +
+ +
+ )} + + + } + /> + + ); + } +} + +export default FileDescription; diff --git a/ui/component/fileDetails/view.jsx b/ui/component/fileDetails/view.jsx index ede8f47be..28d380e8c 100644 --- a/ui/component/fileDetails/view.jsx +++ b/ui/component/fileDetails/view.jsx @@ -1,10 +1,7 @@ // @flow import React, { Fragment, PureComponent } from 'react'; -import MarkdownPreview from 'component/common/markdown-preview'; import Button from 'component/button'; -import Expandable from 'component/expandable'; import path from 'path'; -import ClaimTags from 'component/claimTags'; import Card from 'component/common/card'; type Props = { @@ -19,13 +16,13 @@ type Props = { class FileDetails extends PureComponent { render() { - const { uri, claim, contentType, fileInfo, metadata, openFolder } = this.props; + const { claim, contentType, fileInfo, metadata, openFolder } = this.props; if (!claim || !metadata) { return {__('Empty claim or metadata info.')}; } - const { description, languages, license } = metadata; + const { languages, license } = metadata; const mediaType = contentType || 'unknown'; const fileSize = @@ -44,75 +41,56 @@ class FileDetails extends PureComponent { return ( - {description && ( -
- -
- )} - - - + title={__('File Details')} + defaultExpand={false} + actions={ +
+ + + + + + {fileSize && ( - - - - {fileSize && ( - - - - - )} - - - - - - - - - - - - - - - + + + )} + + + + - {languages && ( - - - - - )} + {languages && ( - - + + - {downloadPath && ( - - - - - )} - -
{__('Content Type')}{mediaType}
{__('Content Type')}{mediaType}
{__('File Size')}{fileSize}
{__('Bid Amount')}{claim.amount} LBC
{__('Effective Amount')}{claim.meta.effective_amount} LBC
{__('Is Controlling')}{claim.meta.is_controlling ? __('Yes') : __('No')}
{__('Claim ID')}{claim.claim_id} {__('File Size')}{fileSize}
{__('Claim ID')}{claim.claim_id}
{__('Languages')}{languages.join(' ')}
{__('License')}{license}{__('Languages')}{languages.join(' ')}
{__('Downloaded to')} - {/* {downloadPath.replace(/(.{10})/g, '$1\u200b')} */} -
- + )} + + {__('License')} + {license} + + {downloadPath && ( + + {__('Downloaded to')} + + {/* {downloadPath.replace(/(.{10})/g, '$1\u200b')} */} +
+ + + + + *:not(:last-child) { + margin-right: 0; + } } .card__media--nsfw { @@ -145,7 +154,7 @@ } .card__header { - margin: var(--spacing-medium) var(--spacing-large); + position: relative; display: flex; align-items: flex-start; @@ -154,6 +163,11 @@ } } +.card__header--between { + @extend .card__header; + justify-content: space-between; +} + .card__title { font-size: var(--font-title); font-weight: var(--font-weight-light); diff --git a/ui/scss/component/_table.scss b/ui/scss/component/_table.scss index f0444f944..7bd2ef04d 100644 --- a/ui/scss/component/_table.scss +++ b/ui/scss/component/_table.scss @@ -75,16 +75,27 @@ } } -.table--file-details { - margin-top: var(--spacing-large); +.table--details { font-size: var(--font-small); +} +.table--file-details { + @extend .table--details; td:nth-of-type(1) { - width: 30%; + width: 25%; } td:nth-of-type(2) { - width: 70%; + width: 75%; + text-align: right; + } +} + +.table--lbc-details { + @extend .table--details; + + td:nth-of-type(2) { + text-align: right; } } diff --git a/ui/scss/component/expanding-details.scss b/ui/scss/component/expanding-details.scss new file mode 100644 index 000000000..2a6fde2de --- /dev/null +++ b/ui/scss/component/expanding-details.scss @@ -0,0 +1,15 @@ +.expanding-details__header { + background-color: var(--color-card-background); + position: relative; + overflow: hidden; + padding-left: var(--spacing-small); +} + +.expanding-details { + border: 1px solid var(--color-border); +} + +.expanding-details__body { + border-radius: var(--card-radius); + padding: 0 var(--spacing-small); +} diff --git a/yarn.lock b/yarn.lock index a49d7bae7..0dfd37ef5 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6139,9 +6139,9 @@ lazy-val@^1.0.4: yargs "^13.2.2" zstd-codec "^0.1.1" -lbry-redux@lbryio/lbry-redux#90ba18d0602956016ded63e816734713cfd2023a: +lbry-redux@lbryio/lbry-redux#1097a63d44a20b87e443fbaa48f95fe3ea5e3f70: version "0.0.1" - resolved "https://codeload.github.com/lbryio/lbry-redux/tar.gz/90ba18d0602956016ded63e816734713cfd2023a" + resolved "https://codeload.github.com/lbryio/lbry-redux/tar.gz/1097a63d44a20b87e443fbaa48f95fe3ea5e3f70" dependencies: proxy-polyfill "0.1.6" reselect "^3.0.0"