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

Merge pull request #2370 from lbryio/css-fixes

Browse source 
Minor ux fixes
This commit is contained in:
Sean Yesmunt 2019-03-21 14:01:00 -04:00 committed by GitHub
commit faf5e21e0c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 50 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
package.json
View file

@ -58,7 +58,7 @@
"@babel/register": "^7.0.0", "@babel/register": "^7.0.0",
"@hot-loader/react-dom": "16.8", "@hot-loader/react-dom": "16.8",
"@lbry/color": "^1.0.2", "@lbry/color": "^1.0.2",
"@lbry/components": "^2.2.4", "@lbry/components": "^2.3.3",
"@types/three": "^0.93.1", "@types/three": "^0.93.1",
"async-exit-hook": "^2.0.1", "async-exit-hook": "^2.0.1",
"babel-eslint": "^10.0.1", "babel-eslint": "^10.0.1",
@ -107,7 +107,7 @@
"json-loader": "^0.5.4", "json-loader": "^0.5.4",
"lbry-format": "https://github.com/lbryio/lbry-format.git", "lbry-format": "https://github.com/lbryio/lbry-format.git",
"lbry-redux": "lbryio/lbry-redux#2a7e05940f892f104428eeb37bd1f178da811a09", "lbry-redux": "lbryio/lbry-redux#2a7e05940f892f104428eeb37bd1f178da811a09",
"lbryinc": "lbryio/lbryinc#351d0a08806b0f770b50066b61a806171f6424d4", "lbryinc": "lbryio/lbryinc#437260f3dad2321e892388b68749ee6af01aff2b",
"lint-staged": "^7.0.2", "lint-staged": "^7.0.2",
"localforage": "^1.7.1", "localforage": "^1.7.1",
"make-runnable": "^1.3.6", "make-runnable": "^1.3.6",

14
src/ui/component/common/form-components/form-field.jsx
View file

@ -85,7 +85,7 @@ export class FormField extends React.PureComponent<Props> {
input = ( input = (
<Wrapper> <Wrapper>
<radio-element> <radio-element>
<input id={name} type='radio' {...inputProps} /> <input id={name} type="radio" {...inputProps} />
<label htmlFor={name}>{label}</label> <label htmlFor={name}>{label}</label>
<radio-toggle onClick={inputProps.onChange} /> <radio-toggle onClick={inputProps.onChange} />
</radio-element> </radio-element>
@ -99,7 +99,7 @@ export class FormField extends React.PureComponent<Props> {
input = ( input = (
<Wrapper> <Wrapper>
<checkbox-element {...elementProps}> <checkbox-element {...elementProps}>
<input id={name} type='checkbox' {...inputProps} /> <input id={name} type="checkbox" {...inputProps} />
<label htmlFor={name}>{label}</label> <label htmlFor={name}>{label}</label>
<checkbox-toggle onClick={inputProps.onChange} /> <checkbox-toggle onClick={inputProps.onChange} />
</checkbox-element> </checkbox-element>
@ -129,13 +129,13 @@ export class FormField extends React.PureComponent<Props> {
}; };
input = ( input = (
<div className='form-field--SimpleMDE' onContextMenu={stopContextMenu}> <div className="form-field--SimpleMDE" onContextMenu={stopContextMenu}>
<fieldset-section> <fieldset-section>
<label htmlFor={name}>{label}</label> <label htmlFor={name}>{label}</label>
<SimpleMDE <SimpleMDE
{...inputProps} {...inputProps}
id={name} id={name}
type='textarea' type="textarea"
events={handleEvents} events={handleEvents}
options={{ options={{
hideIcons: ['heading', 'image', 'fullscreen', 'side-by-side'], hideIcons: ['heading', 'image', 'fullscreen', 'side-by-side'],
@ -169,10 +169,10 @@ export class FormField extends React.PureComponent<Props> {
<React.Fragment> <React.Fragment>
<fieldset-section> <fieldset-section>
<label htmlFor={name}> <label htmlFor={name}>
{errorMessage ? <span className='error-text'>{errorMessage}</span> : label} {errorMessage ? <span className="error-text">{errorMessage}</span> : label}
</label> </label>
{prefix && ( {prefix && (
<label className='form-field--inline-prefix' htmlFor={name}> <label className="form-field--inline-prefix" htmlFor={name}>
{prefix} {prefix}
</label> </label>
)} )}
@ -187,7 +187,7 @@ export class FormField extends React.PureComponent<Props> {
<React.Fragment> <React.Fragment>
{input} {input}
{helper && <div className='form-field__help'>{helper}</div>} {helper && <div className="form-field__help">{helper}</div>}
</React.Fragment> </React.Fragment>
); );
} }

20
src/ui/component/socialShare/view.jsx
View file

@ -40,19 +40,27 @@ class SocialShare extends React.PureComponent<Props> {
let lbryURL; let lbryURL;
if (isChannel) { if (isChannel) {
// For channel claims, the channel name (@something) is in `claim.name` // For channel claims, the channel name (@something) is in `claim.name`
speechURL = `${speechPrefix}${claimName}:${claimId}`; speechURL = `${claimName}:${claimId}`;
lbryURL = `${lbryPrefix}${claimName}#${claimId}`; lbryURL = `${claimName}#${claimId}`;
} else { } else {
// If it's for a regular claim, check if it has an associated channel // If it's for a regular claim, check if it has an associated channel
speechURL = speechURL =
channelName && channelClaimId channelName && channelClaimId
? `${speechPrefix}${channelName}:${channelClaimId}/${claimName}` ? `${channelName}:${channelClaimId}/${claimName}`
: `${speechPrefix}${claimId}/${claimName}`; : `${claimId}/${claimName}`;
lbryURL = lbryURL =
channelName && channelClaimId channelName && channelClaimId
? `${lbryPrefix}${channelName}#${channelClaimId}/${claimName}` ? `${channelName}#${channelClaimId}/${claimName}`
: `${lbryPrefix}${claimName}#${claimId}`; : `${claimName}#${claimId}`;
}
if (lbryURL) {
lbryURL = `${lbryPrefix}${encodeURIComponent(lbryURL)}`;
}
if (speechURL) {
speechURL = `${speechPrefix}${encodeURIComponent(speechURL)}`;
} }
return ( return (

2
src/ui/scss/component/_form-field.scss
View file

@ -115,7 +115,7 @@ fieldset-group {
fieldset-section:first-child { fieldset-section:first-child {
.form-field__prefix { .form-field__prefix {
white-space: nowrap; white-space: nowrap;
padding: 0.15em var(--spacing-s); padding: 0.2rem var(--spacing-s);
padding-right: 0; padding-right: 0;
border: 1px solid; border: 1px solid;
border-right: 0; border-right: 0;

24
src/ui/scss/component/_markdown-editor.scss
View file

@ -71,8 +71,9 @@
} }
} }
a { button {
color: $lbry-black; color: $lbry-black;
border-color: transparent;
transition: opacity 0.3s ease; transition: opacity 0.3s ease;
&:not(.active), &:not(.active),
@ -82,7 +83,6 @@
&.active, &.active,
&:hover { &:hover {
border-color: transparent;
opacity: 1; opacity: 1;
} }
} }
@ -94,7 +94,7 @@
html[data-mode='dark'] & { html[data-mode='dark'] & {
background-color: rgba($lbry-white, 0.2); background-color: rgba($lbry-white, 0.2);
a { button {
color: $lbry-white !important; // We need to use !important to override the CodeMirror styles color: $lbry-white !important; // We need to use !important to override the CodeMirror styles
&.active { &.active {
@ -107,12 +107,12 @@
} }
&.disabled-for-preview { &.disabled-for-preview {
a:not(.no-disable) { button:not(.no-disable) {
background-color: transparent; background-color: transparent;
} }
// The markdown preview button is highlighted during preview when the other buttons are disabled // The markdown preview button is highlighted during preview when the other buttons are disabled
a.no-disable { button.no-disable {
background-color: rgba($lbry-white, 0.3); background-color: rgba($lbry-white, 0.3);
} }
} }
@ -131,4 +131,18 @@
.form-field--SimpleMDE { .form-field--SimpleMDE {
margin-top: var(--spacing-vertical-large); margin-top: var(--spacing-vertical-large);
// Overriding the lbry/components form styling
.editor-toolbar {
button:not(.button) {
padding-right: 0;
padding-left: 0;
background-color: transparent !important;
border: transparent;
&:hover {
background-color: $lbry-white !important;
}
}
}
} }

1
src/ui/scss/component/_markdown-preview.scss
View file

@ -37,7 +37,6 @@
table { table {
margin-bottom: 1.2rem; margin-bottom: 1.2rem;
padding: var(--spacing-vertical-medium); padding: var(--spacing-vertical-medium);
background-color: $lbry-white;
tr { tr {
td, td,

1
src/ui/scss/component/_table.scss
View file

@ -1,5 +1,6 @@
@import '~@lbry/components/sass/table/_index.scss'; @import '~@lbry/components/sass/table/_index.scss';
table,
.table { .table {
[data-mode='dark'] & { [data-mode='dark'] & {
background-color: transparent; background-color: transparent;

12
yarn.lock
View file

@ -803,10 +803,10 @@
resolved "https://registry.yarnpkg.com/@lbry/color/-/color-1.1.0.tgz#00d9474de64bafa507d07f137dbe5754ee65c4e6" resolved "https://registry.yarnpkg.com/@lbry/color/-/color-1.1.0.tgz#00d9474de64bafa507d07f137dbe5754ee65c4e6"
integrity sha512-wtFrKk3wWLcqbbjVMU87yEXsiRkUWHNzsZPspFI0dNX5uzprES1L3ONLwBwtrIkEYDHtszs8+eFDQZdJC6whfw== integrity sha512-wtFrKk3wWLcqbbjVMU87yEXsiRkUWHNzsZPspFI0dNX5uzprES1L3ONLwBwtrIkEYDHtszs8+eFDQZdJC6whfw==
"@lbry/components@^2.2.4": "@lbry/components@^2.3.3":
version "2.2.5" version "2.3.3"
resolved "https://registry.yarnpkg.com/@lbry/components/-/components-2.2.5.tgz#61d27e99fef18cd494a2daafb7d522880e02cf60" resolved "https://registry.yarnpkg.com/@lbry/components/-/components-2.3.3.tgz#c9804703a5db9a23b5185cbc9849a287cb47bea6"
integrity sha512-RPGJvY9HuaK0YtIBompHr67RquCXwqi1QKt1gqSqUGnv+vaMS2S0Vj5Jw4Tf9U2cLEfYt9j9GGiRpBXWEsYjIw== integrity sha512-AaR0lYxNG/UlWr6UMl5bylwoGNaqV/NhzomVBtuDmQH3tJ9WbUNrDHFC86F5N/ZyejnhdA+aGyb4KyLmwrzkBg==
"@mapbox/hast-util-table-cell-style@^0.1.3": "@mapbox/hast-util-table-cell-style@^0.1.3":
version "0.1.3" version "0.1.3"
@ -6074,9 +6074,9 @@ lbry-redux@lbryio/lbry-redux#2a7e05940f892f104428eeb37bd1f178da811a09:
reselect "^3.0.0" reselect "^3.0.0"
uuid "^3.3.2" uuid "^3.3.2"
lbryinc@lbryio/lbryinc#351d0a08806b0f770b50066b61a806171f6424d4: lbryinc@lbryio/lbryinc#437260f3dad2321e892388b68749ee6af01aff2b:
version "0.0.1" version "0.0.1"
resolved "https://codeload.github.com/lbryio/lbryinc/tar.gz/351d0a08806b0f770b50066b61a806171f6424d4" resolved "https://codeload.github.com/lbryio/lbryinc/tar.gz/437260f3dad2321e892388b68749ee6af01aff2b"
dependencies: dependencies:
bluebird "^3.5.1" bluebird "^3.5.1"
reselect "^3.0.0" reselect "^3.0.0"