LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

Add release date field #5514

Closed
Ruk33 wants to merge 4 commits from 2328-allow-to-set-release-date into master
pull from: 2328-allow-to-set-release-date
merge into: LBRYCommunity:master
Conversation 14 Commits 4 Files changed 8 +70 -33
7 changed files with 70 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit 3a9ea5a52a - Show all commits

2
package.json
View file

@ -53,7 +53,7 @@
"electron-updater": "^4.2.4", "electron-updater": "^4.2.4",
"express": "^4.17.1", "express": "^4.17.1",
"if-env": "^1.0.4", "if-env": "^1.0.4",
"react-date-picker": "^8.0.7", "react-datetime-picker": "^3.1.0",
"remove-markdown": "^0.3.0", "remove-markdown": "^0.3.0",
"tempy": "^0.6.0", "tempy": "^0.6.0",
"videojs-logo": "^2.1.4" "videojs-logo": "^2.1.4"

10
ui/component/publishAdditionalOptions/view.jsx
View file

@ -4,6 +4,7 @@ import classnames from 'classnames';
import usePersistedState from 'effects/use-persisted-state'; import usePersistedState from 'effects/use-persisted-state';
import { FormField } from 'component/common/form'; import { FormField } from 'component/common/form';
import Button from 'component/button'; import Button from 'component/button';
import PublishReleaseDate from 'component/publishReleaseDate';
import LicenseType from './license-type'; import LicenseType from './license-type';
import Card from 'component/common/card'; import Card from 'component/common/card';
import SUPPORTED_LANGUAGES from 'constants/supported_languages'; import SUPPORTED_LANGUAGES from 'constants/supported_languages';
@ -111,6 +112,7 @@ function PublishAdditionalOptions(props: Props) {
return ( return (
<Card <Card
className="card--enable-overflow"
actions={ actions={
<React.Fragment> <React.Fragment>
{!hideSection && ( {!hideSection && (
@ -151,12 +153,14 @@ function PublishAdditionalOptions(props: Props) {
)} */} )} */}
{/* @endif */} {/* @endif */}
<div className="section"> <div className="section">
<PublishReleaseDate />
<FormField <FormField
label={__('Language')} label={__('Language')}
type="select" type="select"
name="content_language" name="content_language"
value={language} value={language}
onChange={event => updatePublishForm({ language: event.target.value })} onChange={(event) => updatePublishForm({ language: event.target.value })}
> >
{Object.entries(SUPPORTED_LANGUAGES).map(([langkey, langName]) => ( {Object.entries(SUPPORTED_LANGUAGES).map(([langkey, langName]) => (
// $FlowFixMe // $FlowFixMe
@ -176,12 +180,12 @@ function PublishAdditionalOptions(props: Props) {
licenseUrl: newLicenseUrl, licenseUrl: newLicenseUrl,
}) })
} }
handleLicenseDescriptionChange={event => handleLicenseDescriptionChange={(event) =>
updatePublishForm({ updatePublishForm({
otherLicenseDescription: event.target.value, otherLicenseDescription: event.target.value,
}) })
} }
handleLicenseUrlChange={event => updatePublishForm({ licenseUrl: event.target.value })} handleLicenseUrlChange={(event) => updatePublishForm({ licenseUrl: event.target.value })}
/> />
</div> </div>
</div> </div>

7
ui/component/publishForm/view.jsx
View file

@ -19,8 +19,6 @@ import PublishDescription from 'component/publishDescription';
import PublishPrice from 'component/publishPrice'; import PublishPrice from 'component/publishPrice';
import PublishFile from 'component/publishFile'; import PublishFile from 'component/publishFile';
import PublishBid from 'component/publishBid'; import PublishBid from 'component/publishBid';
import PublishReleaseDate from 'component/publishReleaseDate';
import PublishName from 'component/publishName';
import PublishAdditionalOptions from 'component/publishAdditionalOptions'; import PublishAdditionalOptions from 'component/publishAdditionalOptions';
import PublishFormErrors from 'component/publishFormErrors'; import PublishFormErrors from 'component/publishFormErrors';
import SelectThumbnail from 'component/selectThumbnail'; import SelectThumbnail from 'component/selectThumbnail';
@ -415,11 +413,6 @@ function PublishForm(props: Props) {
} }
/> />
{!publishing && (
<div className={classnames({ 'card--disabled': formDisabled })}>
<PublishReleaseDate />
</div>
)}
{!publishing && ( {!publishing && (
<div className={classnames({ 'card--disabled': formDisabled })}> <div className={classnames({ 'card--disabled': formDisabled })}>
{mode === PUBLISH_MODES.FILE && <PublishDescription disabled={formDisabled} />} {mode === PUBLISH_MODES.FILE && <PublishDescription disabled={formDisabled} />}

31
ui/component/publishReleaseDate/view.jsx
View file

@ -1,7 +1,6 @@
// @flow // @flow
import React, { useCallback } from 'react'; import React, { useCallback } from 'react';
import DatePicker from 'react-date-picker'; import DateTimePicker from 'react-datetime-picker';
import Card from 'component/common/card';
type Props = { type Props = {
releaseTime: ?number, releaseTime: ?number,
@ -21,22 +20,18 @@ const PublishReleaseDate = (props: Props) => {
}, []); }, []);
return ( return (
<Card <div className="form-field-date-picker">
className="card--enable-overflow" <label className="form-field-date-picker-label">Release date</label>
actions={ <DateTimePicker
<div> className="date-picker-input"
<label className="form-field-date-picker-label">Release date</label> calendarClassName="form-field-calendar"
<DatePicker onChange={onChange}
className="date-picker-input" value={dateOrToday(releaseTime)}
calendarClassName="form-field-date-picker" maxDate={maxDate}
onChange={onChange} format="y-MM-dd h:mm a"
value={dateOrToday(releaseTime)} disableClock
maxDate={maxDate} />
format="dd/MM/y" </div>
/>
</div>
}
/>
); );
}; };

2
ui/modal/modalPublishPreview/view.jsx
View file

@ -179,7 +179,7 @@ class ModalPublishPreview extends React.PureComponent<Props> {
{this.createRow(__('Deposit'), depositValue)} {this.createRow(__('Deposit'), depositValue)}
{this.createRow(__('Price'), priceValue)} {this.createRow(__('Price'), priceValue)}
{this.createRow(__('Language'), language)} {this.createRow(__('Language'), language)}
{this.createRow(__('Release Date'), moment(release_time).format('MMMM Do, YYYY'))} {this.createRow(__('Release Date'), moment(release_time).format('MMMM Do, YYYY - h:mm a'))}
{this.createRow(__('License'), licenseValue)} {this.createRow(__('License'), licenseValue)}
{this.createRow(__('Tags'), tagsValue)} {this.createRow(__('Tags'), tagsValue)}
</tbody> </tbody>

10
ui/scss/component/_form-field.scss
View file

@ -462,16 +462,22 @@ fieldset-section {
} }
.date-picker-input { .date-picker-input {
.react-date-picker__wrapper { font-weight: bold;
.react-datetime-picker__wrapper {
border: 0; border: 0;
} }
} }
.form-field-date-picker {
margin-bottom: var(--spacing-l);
}
neb-b commented 2021-02-24 19:06:19 +01:00 (Migrated from github.com)
Review
Copy link

Somewhere the icon color needs to be set. Right now it's always black, which is too dark when the dark theme is selected

Somewhere the icon color needs to be set. Right now it's always black, which is too dark when the dark theme is selected
Ruk33 commented 2021-02-24 20:24:53 +01:00 (Migrated from github.com)
Review
Copy link

Ah good catch, thanks @seanyesmunt will check it out.

Ah good catch, thanks @seanyesmunt will check it out.
Ruk33 commented 2021-02-24 20:38:54 +01:00 (Migrated from github.com)
Review
Copy link

How about something like this

image

And hover (my mouse is on X)

image

And dark

image

How about something like this ![image](https://user-images.githubusercontent.com/1719111/109055968-9c1de200-76be-11eb-8f54-a44424eb9d66.png) And hover (my mouse is on X) ![image](https://user-images.githubusercontent.com/1719111/109055997-a4761d00-76be-11eb-9506-4751605c38d5.png) And dark ![image](https://user-images.githubusercontent.com/1719111/109056106-c66f9f80-76be-11eb-95dc-7c34cfae5157.png)
neb-b commented 2021-02-25 20:47:37 +01:00 (Migrated from github.com)
Review
Copy link

The buttons should be white. Just like the text

The buttons should be white. Just like the text
Ruk33 commented 2021-03-01 18:30:20 +01:00 (Migrated from github.com)
Review
Copy link

Hello @seanyesmunt , sorry it took me this long, here are the changes:

Dark mode
image

Light mode
image

I'm not sure though if implementing it using

[theme='dark'] {
    ...
}

is correct or a pattern you guys use since I haven't seen it (only in dark.scss). Please let me know if I should change it. Thanks!

Hello @seanyesmunt , sorry it took me this long, here are the changes: Dark mode ![image](https://user-images.githubusercontent.com/1719111/109534782-77e54b00-7a9a-11eb-9883-9d6937f00183.png) Light mode ![image](https://user-images.githubusercontent.com/1719111/109534819-80d61c80-7a9a-11eb-822f-2326678a42c1.png) I'm not sure though if implementing it using ``` [theme='dark'] { ... } ``` is correct or a pattern you guys use since I haven't seen it (only in `dark.scss`). Please let me know if I should change it. Thanks!
.form-field-date-picker-label { .form-field-date-picker-label {
display: block; display: block;
} }
.form-field-date-picker { .form-field-calendar {
border-radius: var(--card-radius); border-radius: var(--card-radius);
border: 1px solid var(--color-border); border: 1px solid var(--color-border);
} }

41
yarn.lock
View file

@ -1956,7 +1956,7 @@
"@webassemblyjs/wast-parser" "1.8.5" "@webassemblyjs/wast-parser" "1.8.5"
"@xtuc/long" "4.2.2" "@xtuc/long" "4.2.2"
"@wojtekmaj/date-utils@^1.0.2", "@wojtekmaj/date-utils@^1.0.3": "@wojtekmaj/date-utils@^1.0.0", "@wojtekmaj/date-utils@^1.0.2", "@wojtekmaj/date-utils@^1.0.3":
version "1.0.3" version "1.0.3"
resolved "https://registry.yarnpkg.com/@wojtekmaj/date-utils/-/date-utils-1.0.3.tgz#2dcfd92881425c5923e429c2aec86fb3609032a1" resolved "https://registry.yarnpkg.com/@wojtekmaj/date-utils/-/date-utils-1.0.3.tgz#2dcfd92881425c5923e429c2aec86fb3609032a1"
integrity sha512-1VPkkTBk07gMR1fjpBtse4G+oJqpmE+0gUFB0dg3VIL7qJmUVaBoD/vlzMm/jNeOPfvlmerl1lpnsZyBUFIRuw== integrity sha512-1VPkkTBk07gMR1fjpBtse4G+oJqpmE+0gUFB0dg3VIL7qJmUVaBoD/vlzMm/jNeOPfvlmerl1lpnsZyBUFIRuw==
@ -9255,6 +9255,15 @@ react-calendar@^3.3.1:
merge-class-names "^1.1.1" merge-class-names "^1.1.1"
prop-types "^15.6.0" prop-types "^15.6.0"
react-clock@^3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/react-clock/-/react-clock-3.0.0.tgz#0d29f8e682ef516574061d1d24b1a286cb2da89b"
integrity sha512-D3K82D3YGcDtzxZCfiACLcDTL8cJXSgpdrzTY9ff3H5vflxlLzTSLF8apZRo6JZzOFrZQvw5mrS7TkQzj9nG0A==
dependencies:
"@wojtekmaj/date-utils" "^1.0.0"
merge-class-names "^1.1.1"
prop-types "^15.6.0"
react-compound-slider@^2.5.0: react-compound-slider@^2.5.0:
version "2.5.0" version "2.5.0"
resolved "https://registry.yarnpkg.com/react-compound-slider/-/react-compound-slider-2.5.0.tgz#99771a3397f4ab00aa2a37f8410da87e6ca2449b" resolved "https://registry.yarnpkg.com/react-compound-slider/-/react-compound-slider-2.5.0.tgz#99771a3397f4ab00aa2a37f8410da87e6ca2449b"
@ -9286,6 +9295,22 @@ react-date-picker@^8.0.7:
react-fit "^1.0.3" react-fit "^1.0.3"
update-input-width "^1.1.1" update-input-width "^1.1.1"
react-datetime-picker@^3.1.0:
version "3.1.0"
resolved "https://registry.yarnpkg.com/react-datetime-picker/-/react-datetime-picker-3.1.0.tgz#109cc062ff666948713f7b45833b323c73975619"
integrity sha512-osC97vzEEi3al9Bo+V+0+SCcDIhVVXTmSngeW4NL/yB9AsNf0ShF5tEmPKkGoSQBBW3GGthb4LOQzaOEzu+FXw==
dependencies:
"@wojtekmaj/date-utils" "^1.0.3"
get-user-locale "^1.2.0"
make-event-props "^1.1.0"
merge-class-names "^1.1.1"
prop-types "^15.6.0"
react-calendar "^3.3.1"
react-clock "^3.0.0"
react-date-picker "^8.0.7"
react-fit "^1.0.3"
react-time-picker "^4.1.0"
react-dom@^16.8.2: react-dom@^16.8.2:
version "16.13.0" version "16.13.0"
resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.13.0.tgz#cdde54b48eb9e8a0ca1b3dc9943d9bb409b81866" resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.13.0.tgz#cdde54b48eb9e8a0ca1b3dc9943d9bb409b81866"
@ -9413,6 +9438,20 @@ react-spring@^8.0.20, react-spring@^8.0.27:
"@babel/runtime" "^7.3.1" "@babel/runtime" "^7.3.1"
prop-types "^15.5.8" prop-types "^15.5.8"
react-time-picker@^4.1.0:
version "4.1.2"
resolved "https://registry.yarnpkg.com/react-time-picker/-/react-time-picker-4.1.2.tgz#7e977ba546a2313d622a536494cec6e4d727b57b"
integrity sha512-O2lSyv9j11YcpVuxQnJnqanaYiJ7yyCl7/p6jS6HHcR0i+plX95Ko105CKyJeAd40I6LxHqfweR+9DIL2AFmYg==
dependencies:
"@wojtekmaj/date-utils" "^1.0.0"
get-user-locale "^1.2.0"
make-event-props "^1.1.0"
merge-class-names "^1.1.1"
prop-types "^15.6.0"
react-clock "^3.0.0"
react-fit "^1.0.3"
update-input-width "^1.1.1"
react@^16.8.2: react@^16.8.2:
version "16.13.0" version "16.13.0"
resolved "https://registry.yarnpkg.com/react/-/react-16.13.0.tgz#d046eabcdf64e457bbeed1e792e235e1b9934cf7" resolved "https://registry.yarnpkg.com/react/-/react-16.13.0.tgz#d046eabcdf64e457bbeed1e792e235e1b9934cf7"