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 +181 -1
8 changed files with 181 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit 97a9666df1 - Show all commits

1
package.json
View file

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

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

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

13
ui/component/publishReleaseDate/index.js Normal file
View file

@ -0,0 +1,13 @@
import { connect } from 'react-redux';
import { doUpdatePublishForm, makeSelectPublishFormValue } from 'lbry-redux';
import PublishReleaseDate from './view';
const select = (state) => ({
releaseTime: makeSelectPublishFormValue('release_time')(state),
});
const perform = (dispatch) => ({
updatePublishForm: (value) => dispatch(doUpdatePublishForm(value)),
});
export default connect(select, perform)(PublishReleaseDate);

43
ui/component/publishReleaseDate/view.jsx Normal file
View file

@ -0,0 +1,43 @@
// @flow
import React, { useCallback } from 'react';
import DatePicker from 'react-date-picker';
import Card from 'component/common/card';
type Props = {
releaseTime: ?number,
updatePublishForm: ({}) => void,
};
const PublishReleaseDate = (props: Props) => {
const { releaseTime, updatePublishForm } = props;
const maxDate = new Date();
const dateOrToday = useCallback((value) => {
return value ? new Date(value) : new Date();
}, []);
const onChange = useCallback((value) => {
updatePublishForm({ release_time: dateOrToday(value) });
}, []);
return (
<Card
className="card--enable-overflow"
actions={
<div>
<label className="form-field-date-picker-label">Release date</label>
<DatePicker
className="date-picker-input"
calendarClassName="form-field-date-picker"
onChange={onChange}
value={dateOrToday(releaseTime)}
maxDate={maxDate}
format="dd/MM/y"
/>
</div>
}
/>
);
};
export default PublishReleaseDate;

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

@ -1,5 +1,6 @@
// @flow
import React from 'react';
import moment from 'moment';
import Button from 'component/button';
import { Form, FormField } from 'component/common/form';
import { Modal } from 'modal/modal';
@ -27,6 +28,7 @@ type Props = {
currency: string,
},
language: string,
release_time: ?string,
licenseType: string,
otherLicenseDescription: ?string,
licenseUrl: ?string,
@ -89,6 +91,7 @@ class ModalPublishPreview extends React.PureComponent<Props> {
contentIsFree,
fee,
language,
release_time,
licenseType,
otherLicenseDescription,
licenseUrl,
@ -176,6 +179,7 @@ class ModalPublishPreview extends React.PureComponent<Props> {
{this.createRow(__('Deposit'), depositValue)}
{this.createRow(__('Price'), priceValue)}
{this.createRow(__('Language'), language)}
{this.createRow(__('Release Date'), moment(release_time).format('MMMM Do, YYYY'))}
{this.createRow(__('License'), licenseValue)}
{this.createRow(__('Tags'), tagsValue)}
</tbody>

5
ui/scss/component/_card.scss
View file

@ -10,6 +10,11 @@
}
}
.card--enable-overflow {
overflow: visible;
margin-bottom: var(--spacing-m);
}
.card--disabled {
opacity: 0.3;
pointer-events: none;

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

@ -2,7 +2,8 @@
input,
textarea,
select {
select,
.date-picker-input {
height: var(--height-input);
border-radius: var(--border-radius);
border: 1px solid;
@ -459,3 +460,34 @@ fieldset-section {
}
}
}
.date-picker-input {
.react-date-picker__wrapper {
border: 0;
}
}
.form-field-date-picker-label {
display: block;
}
.form-field-date-picker {
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!
border-radius: var(--card-radius);
border: 1px solid var(--color-border);
}
.react-date-picker__calendar {
z-index: 1000;
}
.react-calendar__tile--now,
.react-calendar__tile--now:enabled:hover,
.react-calendar__tile--now:enabled:focus {
background: var(--color-primary-alt);
}
.react-calendar__tile--active,
.react-calendar__tile--active:enabled:hover,
.react-calendar__tile--active:enabled:focus {
background: var(--color-primary);
}

75
yarn.lock
View file

@ -1708,6 +1708,11 @@
version "1.5.2"
resolved "https://registry.yarnpkg.com/@types/q/-/q-1.5.2.tgz#690a1475b84f2a884fd07cd797c00f5f31356ea8"
"@types/react-calendar@^3.0.0":
version "3.1.3"
resolved "https://registry.yarnpkg.com/@types/react-calendar/-/react-calendar-3.1.3.tgz#bd0947c28738f6419649be22d80624b05fde2fb9"
integrity sha512-4kvDfKta9bNnuRieuGYPxdDlh3UqRUKE8+fMbmZGk0Z/MdUGHupxXwPCWLbVH7FZU48o4bhT+XX8rfZrexdnAw==
"@types/semver@^7.1.0":
version "7.1.0"
resolved "https://registry.yarnpkg.com/@types/semver/-/semver-7.1.0.tgz#c8c630d4c18cd326beff77404887596f96408408"
@ -1951,6 +1956,11 @@
"@webassemblyjs/wast-parser" "1.8.5"
"@xtuc/long" "4.2.2"
"@wojtekmaj/date-utils@^1.0.2", "@wojtekmaj/date-utils@^1.0.3":
version "1.0.3"
resolved "https://registry.yarnpkg.com/@wojtekmaj/date-utils/-/date-utils-1.0.3.tgz#2dcfd92881425c5923e429c2aec86fb3609032a1"
integrity sha512-1VPkkTBk07gMR1fjpBtse4G+oJqpmE+0gUFB0dg3VIL7qJmUVaBoD/vlzMm/jNeOPfvlmerl1lpnsZyBUFIRuw==
"@xtuc/ieee754@^1.2.0":
version "1.2.0"
resolved "https://registry.yarnpkg.com/@xtuc/ieee754/-/ieee754-1.2.0.tgz#eef014a3145ae477a1cbc00cd1e552336dceb790"
@ -3972,6 +3982,11 @@ destroy@~1.0.4:
version "1.0.4"
resolved "https://registry.yarnpkg.com/destroy/-/destroy-1.0.4.tgz#978857442c44749e4206613e37946205826abd80"
detect-element-overflow@^1.2.0:
version "1.2.0"
resolved "https://registry.yarnpkg.com/detect-element-overflow/-/detect-element-overflow-1.2.0.tgz#86e504292ffedc3aef813395fbdf0261aaf6afa9"
integrity sha512-Jtr9ivYPhpd9OJux+hjL0QjUKiS1Ghgy8tvIufUjFslQgIWvgGr4mn57H190APbKkiOmXnmtMI6ytaKzMusecg==
detect-file@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/detect-file/-/detect-file-1.0.0.tgz#f0d66d03672a825cb1b73bdb3fe62310c8e552b7"
@ -5478,6 +5493,13 @@ get-stream@^5.1.0:
dependencies:
pump "^3.0.0"
get-user-locale@^1.2.0:
version "1.4.0"
resolved "https://registry.yarnpkg.com/get-user-locale/-/get-user-locale-1.4.0.tgz#a2c4b5da46feec9f03c9b07d197b1620490a5370"
integrity sha512-gQo03lP1OArHLKlnoglqrGGl7b04u2EP9Xutmp72cMdtrrSD7ZgIsCsUKZynYWLDkVJW33Cj3pliP7uP0UonHQ==
dependencies:
lodash.once "^4.1.1"
get-value@^2.0.3, get-value@^2.0.6:
version "2.0.6"
resolved "https://registry.yarnpkg.com/get-value/-/get-value-2.0.6.tgz#dc15ca1c672387ca76bd37ac0a395ba2042a2c28"
@ -7178,6 +7200,11 @@ lodash.memoize@^4.1.2:
version "4.1.2"
resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe"
lodash.once@^4.1.1:
version "4.1.1"
resolved "https://registry.yarnpkg.com/lodash.once/-/lodash.once-4.1.1.tgz#0dd3971213c7c56df880977d504c88fb471a97ac"
integrity sha1-DdOXEhPHxW34gJd9UEyI+0cal6w=
lodash.pickby@^4.6.0:
version "4.6.0"
resolved "https://registry.yarnpkg.com/lodash.pickby/-/lodash.pickby-4.6.0.tgz#7dea21d8c18d7703a27c704c15d3b84a67e33aff"
@ -7342,6 +7369,11 @@ make-dir@^3.0.2:
dependencies:
semver "^6.0.0"
make-event-props@^1.1.0:
version "1.2.0"
resolved "https://registry.yarnpkg.com/make-event-props/-/make-event-props-1.2.0.tgz#96b87d88919533b8f8934b58b4c3d5679459a0cf"
integrity sha512-BmWFkm/jZzVH9A0tEBdkjAARUz/eha+5IRyfOndeSMKRadkgR5DawoBHoRwLxkYmjJOI5bHkXKpaZocxj+dKgg==
mamacro@^0.0.3:
version "0.0.3"
resolved "https://registry.yarnpkg.com/mamacro/-/mamacro-0.0.3.tgz#ad2c9576197c9f1abf308d0787865bd975a3f3e4"
@ -7498,6 +7530,11 @@ memory-fs@^0.5.0:
errno "^0.1.3"
readable-stream "^2.0.1"
merge-class-names@^1.1.1:
version "1.4.0"
resolved "https://registry.yarnpkg.com/merge-class-names/-/merge-class-names-1.4.0.tgz#02edcdd5ff677fbb03b47ecd4586df89d697b81b"
integrity sha512-xNdBM7s+6uD+vNZJEymqrFbMBCDGzoA8clZTcj2F1XIy1QQKF+wjFVv7iDZFfdCBnViTdt54A4Ye2lmBsXrBjQ==
merge-descriptors@1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/merge-descriptors/-/merge-descriptors-1.0.1.tgz#b00aaa556dd8b44568150ec9d1b953f3f90cbb61"
@ -9208,6 +9245,16 @@ react-awesome-lightbox@^1.7.3:
resolved "https://registry.yarnpkg.com/react-awesome-lightbox/-/react-awesome-lightbox-1.7.3.tgz#ee1c00fd4197e0e65bf996aa219eac4d8b6db5a0"
integrity sha512-mSxdL3KGzuh2eR8I00nv9njiolmMoXITuCvfd71DBXK13JW3e+Z/sCMENS9+dngBJU8/m7dR1Ix0W6afS5cFsA==
react-calendar@^3.3.1:
version "3.3.1"
resolved "https://registry.yarnpkg.com/react-calendar/-/react-calendar-3.3.1.tgz#da691a5d59c88f178695fd8b33909a71d698021f"
integrity sha512-iDIrhE0ABz3mChAIvA+5d2UtQGEb5oaUpLiEbrRdWHBYb45MhsbO59pG9HIy2uTdHkBF/nvzRV2JBmMfdg/0Qg==
dependencies:
"@wojtekmaj/date-utils" "^1.0.2"
get-user-locale "^1.2.0"
merge-class-names "^1.1.1"
prop-types "^15.6.0"
react-compound-slider@^2.5.0:
version "2.5.0"
resolved "https://registry.yarnpkg.com/react-compound-slider/-/react-compound-slider-2.5.0.tgz#99771a3397f4ab00aa2a37f8410da87e6ca2449b"
@ -9224,6 +9271,21 @@ react-confetti@^4.0.1:
dependencies:
tween-functions "^1.2.0"
react-date-picker@^8.0.7:
version "8.0.7"
resolved "https://registry.yarnpkg.com/react-date-picker/-/react-date-picker-8.0.7.tgz#43585751feeaf2b790eea8c343c3fcb35ad95ede"
integrity sha512-ZuS9NPHUUz0zeeXlYOfq58cteHLRC94NO76ti28aN/Ybi9nugG2SfR46i/5xTL5094rRPiXJveGA1P1cJqQMsg==
dependencies:
"@types/react-calendar" "^3.0.0"
"@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-fit "^1.0.3"
update-input-width "^1.1.1"
react-dom@^16.8.2:
version "16.13.0"
resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.13.0.tgz#cdde54b48eb9e8a0ca1b3dc9943d9bb409b81866"
@ -9240,6 +9302,14 @@ react-draggable@^3.3.0:
classnames "^2.2.5"
prop-types "^15.6.0"
react-fit@^1.0.3:
version "1.3.1"
resolved "https://registry.yarnpkg.com/react-fit/-/react-fit-1.3.1.tgz#850cb5d554fdfa4b27891f62a9d290d3e7eda57b"
integrity sha512-MmVk/SXyVbxiz9peAeD7fWxFdGLoy/sCxte01M3w74regPIVkLqc2yT0wUAGRd1MNP1fQ40MqYKNBLpbK/aI1w==
dependencies:
detect-element-overflow "^1.2.0"
prop-types "^15.6.0"
react-google-recaptcha@^2.0.1:
version "2.0.1"
resolved "https://registry.yarnpkg.com/react-google-recaptcha/-/react-google-recaptcha-2.0.1.tgz#3276b29659493f7ca2a5b7739f6c239293cdf1d8"
@ -11329,6 +11399,11 @@ upath@^1.1.1:
version "1.2.0"
resolved "https://registry.yarnpkg.com/upath/-/upath-1.2.0.tgz#8f66dbcd55a883acdae4408af8b035a5044c1894"
update-input-width@^1.1.1:
version "1.2.1"
resolved "https://registry.yarnpkg.com/update-input-width/-/update-input-width-1.2.1.tgz#769d6182413590c3b50b52ffa9c65d79e2c17f95"
integrity sha512-zygDshqDb2C2/kgfoD423n5htv/3OBF7aTaz2u2zZy998EJki8njOHOeZjKEd8XSYeDziIX1JXfMsKaIRJeJ/Q==
update-notifier@^2.5.0:
version "2.5.0"
resolved "https://registry.yarnpkg.com/update-notifier/-/update-notifier-2.5.0.tgz#d0744593e13f161e406acb1d9408b72cad08aff6"