From 8c2bf132178cb84f1a74d1d7bc6affed8ef0c5e8 Mon Sep 17 00:00:00 2001 From: Sean Yesmunt Date: Wed, 20 Feb 2019 00:20:29 -0500 Subject: [PATCH] fix: ui cleanup --- package.json | 2 +- src/renderer/component/channelTile/view.jsx | 3 +- .../common/form-components/form-field.jsx | 17 +- src/renderer/component/fileActions/view.jsx | 6 +- src/renderer/component/fileList/view.jsx | 3 +- src/renderer/component/inviteNew/view.jsx | 1 - .../publishForm/internal/license-type.jsx | 1 + .../publishForm/internal/name-help-text.jsx | 3 +- src/renderer/component/publishForm/view.jsx | 86 ++++----- src/renderer/component/searchOptions/view.jsx | 3 + src/renderer/component/selectChannel/view.jsx | 8 +- .../component/transactionList/view.jsx | 4 +- src/renderer/component/userHistory/view.jsx | 12 +- .../component/userHistoryItem/view.jsx | 2 +- src/renderer/component/walletSendTip/view.jsx | 4 +- src/renderer/modal/modalRemoveFile/view.jsx | 2 + src/renderer/modal/modalRewardCode/view.jsx | 1 + src/renderer/page/channel/view.jsx | 57 +++--- src/renderer/page/help/view.jsx | 2 - src/renderer/page/settings/view.jsx | 89 ++++----- src/renderer/scss/component/_button.scss | 31 ++- src/renderer/scss/component/_channel.scss | 1 + src/renderer/scss/component/_form-field.scss | 181 ++++++++++++++---- src/renderer/scss/component/_header.scss | 3 +- src/renderer/scss/component/_media.scss | 4 + src/renderer/scss/init/_gui.scss | 6 +- yarn.lock | 12 +- 27 files changed, 339 insertions(+), 205 deletions(-) diff --git a/package.json b/package.json index 0a67781fb..51d9688b0 100644 --- a/package.json +++ b/package.json @@ -34,7 +34,7 @@ "postinstall": "electron-builder install-app-deps && node build/downloadDaemon.js" }, "dependencies": { - "@lbry/components": "^2.2.0", + "@lbry/components": "^2.2.1", "@types/three": "^0.93.1", "bluebird": "^3.5.1", "breakdance": "^3.0.1", diff --git a/src/renderer/component/channelTile/view.jsx b/src/renderer/component/channelTile/view.jsx index 3e9da8f5e..8de51a7b2 100644 --- a/src/renderer/component/channelTile/view.jsx +++ b/src/renderer/component/channelTile/view.jsx @@ -45,8 +45,7 @@ class ChannelTile extends React.PureComponent { subscriptionUri = `lbry://${claim.permanent_url}`; } - const onClick = () => - channelName ? navigate('/show', { uri, page: 1 }) : navigate('/show', { uri }); + const onClick = () => navigate('/show', { uri }); return (
{ blockWrap: true, }; + input: { current: React.ElementRef }; + constructor(props: Props) { super(props); this.input = React.createRef(); @@ -92,6 +94,7 @@ export class FormField extends React.PureComponent { } else if (type === 'checkbox') { // web components treat props weird // we need to fully remove it for proper component:attribute css styling + // $FlowFixMe const elementProps = inputProps.disabled ? { disabled: true } : {}; input = ( @@ -165,10 +168,18 @@ export class FormField extends React.PureComponent { input = ( - + {(label || errorMessage) && ( + + )} + {prefix && ( + + )} {inner} - {errorMessage &&
{errorMessage}
} ); } diff --git a/src/renderer/component/fileActions/view.jsx b/src/renderer/component/fileActions/view.jsx index 703b3c79f..88d556502 100644 --- a/src/renderer/component/fileActions/view.jsx +++ b/src/renderer/component/fileActions/view.jsx @@ -36,11 +36,7 @@ class FileActions extends React.PureComponent { )} {!claimIsMine && ( -
{ {claimIsMine && ( { { return (
-

+

{name} {fetching && }

@@ -108,31 +108,36 @@ class ChannelPage extends React.PureComponent { {(!fetching || (claimsInChannel && claimsInChannel.length)) && totalPages > 1 && ( - - this.changePage(e.selected + 1)} - forcePage={currentPage} - initialPage={currentPage} - containerClassName="pagination" - /> + + + + this.changePage(e.selected + 1)} + forcePage={currentPage} + initialPage={currentPage} + containerClassName="pagination" + /> + - this.paginate(e, totalPages)} - prefix={__('Go to page:')} - type="text" - /> - + this.paginate(e, totalPages)} + label={__('Go to page:')} + type="text" + name="paginate-file" + /> + + )} {!channelIsMine && } diff --git a/src/renderer/page/help/view.jsx b/src/renderer/page/help/view.jsx index 8b18116d0..3276c6ee9 100644 --- a/src/renderer/page/help/view.jsx +++ b/src/renderer/page/help/view.jsx @@ -173,13 +173,11 @@ class HelpPage extends React.PureComponent {
- - { - this.onKeyFeeDisableChange(true); - }} - /> - - - { - this.onKeyFeeDisableChange(false); - this.onKeyFeeChange(defaultMaxKeyFee); - }} - label={__('Choose limit')} - /> - + { + this.onKeyFeeDisableChange(true); + }} + /> + { + this.onKeyFeeDisableChange(false); + this.onKeyFeeChange(defaultMaxKeyFee); + }} + label={__('Choose limit')} + /> {!disableMaxKeyFee && ( { - - { - this.onInstantPurchaseEnabledChange(false); - }} - /> - - - { - this.onInstantPurchaseEnabledChange(true); - }} - /> - + { + this.onInstantPurchaseEnabledChange(false); + }} + /> + { + this.onInstantPurchaseEnabledChange(true); + }} + /> + {instantPurchaseEnabled && ( { button="primary" label={this.state.clearingCache ? __('Clearing') : __('Clear Cache')} icon={ICONS.ALERT} - // onClick={this.clearCache} + onClick={this.clearCache} disabled={this.state.clearingCache} /> diff --git a/src/renderer/scss/component/_button.scss b/src/renderer/scss/component/_button.scss index 24b9d49b5..1bb2bb3a1 100644 --- a/src/renderer/scss/component/_button.scss +++ b/src/renderer/scss/component/_button.scss @@ -8,11 +8,12 @@ width: 1.2rem; height: 1.2rem; position: relative; - top: 2px; - stroke-opacity: 0.7; + top: 1px; + color: $lbry-gray-5; // Buttons that don't have a label &:only-child { + color: inherit; stroke-opacity: 1; width: 1.4rem; height: 1.4rem; @@ -38,6 +39,19 @@ } } +.button--primary { + height: var(--spacing-l); + + svg { + color: white; + } + + svg + .button__label { + position: relative; + top: -0.05em; + } +} + .button--inverse { font-size: 1rem; transition: background-color 0.2s; @@ -67,9 +81,15 @@ } } } -.button--link:not(:hover):not(:disabled) { +.button--link:not(:disabled) { html[data-mode='dark'] & { - color: $lbry-teal-4; + &:not(:hover) { + color: $lbry-teal-4; + } + + &:hover { + color: $lbry-teal-3; + } } } @@ -97,11 +117,10 @@ } .button--uri-indicator { - width: 100%; + max-width: 100%; overflow: hidden; text-align: left; text-overflow: ellipsis; - white-space: nowrap; transition: color 0.2s; &:hover { diff --git a/src/renderer/scss/component/_channel.scss b/src/renderer/scss/component/_channel.scss index a8dd141fe..829bc1ace 100644 --- a/src/renderer/scss/component/_channel.scss +++ b/src/renderer/scss/component/_channel.scss @@ -1,5 +1,6 @@ .channel-info { .media__title { + display: block; user-select: text; margin-bottom: var(--spacing-vertical-medium); } diff --git a/src/renderer/scss/component/_form-field.scss b/src/renderer/scss/component/_form-field.scss index 002c9f974..a297c93d1 100644 --- a/src/renderer/scss/component/_form-field.scss +++ b/src/renderer/scss/component/_form-field.scss @@ -3,10 +3,35 @@ // lbry/components overrides and minor styles input[type='number'] { - padding: var(--spacing-s); width: 8em; } +input[type='text'], +input[type='number'], +select { + padding-bottom: 0.2em; + + [data-mode='dark'] & { + &::placeholder { + opacity: 0.4; + } + } +} + +fieldset-section { + label { + width: auto; + text-transform: none; + } + + checkbox-element, + radio-element { + label { + font-size: medium; + } + } +} + checkbox-element { &[disabled='true'] { opacity: 0.3; @@ -33,48 +58,126 @@ radio-element { } } } + + label { + margin-bottom: 0; + } } -fieldset-group.fieldset-group--smushed { - justify-content: flex-start; +fieldset-group { + &.fieldset-group--smushed { + justify-content: flex-start; - fieldset-section { - width: auto; - margin-bottom: 0; + fieldset-section { + width: auto; + margin-bottom: 0; - &:first-of-type { - input { - border-right: none; + &:first-of-type { + input { + border-right: none; + } + } + } + + &.fieldgroup--paginate { + margin-top: var(--spacing-vertical-medium); + align-items: center; + justify-content: center; + + .pagination { + margin-bottom: -1em; } } } - &.fieldgroup--paginate { - margin-top: var(--spacing-vertical-medium); - align-items: center; - justify-content: center; + // This is a special case where the prefix appears "inside" the input + // It would be way simpler to just use position: absolute and give it a width + // but the width can change when we use it for the name prefix + // lbry:// {input}, lbry://@short {input}, @lbry://longername {input} + // The spacing/alignment isn't very robust and will probably need to be changed + // if we use this in more places + &.fieldset-group--disabled-prefix { + align-items: flex-end; - .pagination { - margin-bottom: -1em; + fieldset-section:first-child .form-field__prefix, + fieldset-section:last-child input { + border-color: $lbry-black; + + [data-mode='dark'] { + border-color: $lbry-gray-4; + } + } + + fieldset-section:first-child { + .form-field__prefix { + padding: 0.15em var(--spacing-s); + padding-right: 0; + border: 1px solid; + border-right: 0; + color: $lbry-gray-4; + } + } + + fieldset-section:last-child { + width: 100%; + + input { + border-left: 0; + padding-left: var(--spacing-xs); + + &:focus { + border-image-slice: 1; + border-image-source: linear-gradient(to right, $lbry-black, $lbry-teal-5 5%); + } + + [data-mode='dark'] & { + &:focus { + border-image-source: linear-gradient(to right, $lbry-gray-4, $lbry-teal-5 5%); + } + } + } } } } // form buttons are black by default form { - [data-mode='dark'] & { - .button--primary:not(:hover) { - background-color: $lbry-teal-5; - border-color: $lbry-teal-5; - } + // [data-mode='dark'] & { + .button--primary:not(:hover) { + background-color: $lbry-teal-5; + border-color: $lbry-teal-5; - legend { - background-color: $lbry-cyan-5; + &:hover { + background-color: $lbry-teal-3; + border-color: $lbry-teal-3; } } } fieldset-section { + input-submit { + input, + select { + &:first-child:not(:focus) { + border-right-color: transparent; + } + } + + .button__content { + position: relative; + top: -0.1em; + } + } + + select { + max-width: 12em; + background-color: $lbry-white; + + [data-mode='dark'] & { + background-color: transparent; + } + } + [data-mode='dark'] & { input, textarea, @@ -85,25 +188,7 @@ fieldset-section { input:not(:focus):not(.form-field--copyable), textarea:not(:focus), select:not(:focus) { - border-color: $lbry-white; - } - - input-submit { - input, - select { - &:first-child:not(:focus) { - border-right-color: transparent; - } - } - } - } - - select { - max-width: 12em; - background-color: $lbry-white; - - [data-mode='dark'] & { - background-color: transparent; + border-color: $lbry-gray-4; } } } @@ -116,6 +201,7 @@ fieldset-section { padding: 0.2rem 0.75rem; text-overflow: ellipsis; user-select: text; + cursor: default; html[data-mode='dark'] & { background-color: rgba($lbry-white, 0.3); @@ -129,9 +215,20 @@ label + .react-toggle, margin-left: var(--spacing-vertical-small); } +.form-field--inline-prefix { + position: absolute; + top: 9.5em; + left: 2.75em; + width: auto; + + & + input { + padding-left: 4em; + } +} + .form-field__help { @extend .help; - margin-top: var(--spacing-vertical-small); + margin-top: var(--spacing-vertical-medium); } .form-field--price-amount { diff --git a/src/renderer/scss/component/_header.scss b/src/renderer/scss/component/_header.scss index 361906ed9..d2d89cee8 100644 --- a/src/renderer/scss/component/_header.scss +++ b/src/renderer/scss/component/_header.scss @@ -111,6 +111,7 @@ // } // } +// Publish button .header__navigation-item--right-action { display: flex; justify-content: center; @@ -127,7 +128,7 @@ } svg { - top: 0; + top: 0.1em; } &:not(:last-child) { diff --git a/src/renderer/scss/component/_media.scss b/src/renderer/scss/component/_media.scss index 74e90998d..90756e244 100644 --- a/src/renderer/scss/component/_media.scss +++ b/src/renderer/scss/component/_media.scss @@ -6,6 +6,10 @@ .media__title { margin-bottom: var(--spacing-vertical-small); } + + .media__properties { + height: 1em; + } } // M E D I A diff --git a/src/renderer/scss/init/_gui.scss b/src/renderer/scss/init/_gui.scss index f3de30d6b..a5950560d 100644 --- a/src/renderer/scss/init/_gui.scss +++ b/src/renderer/scss/init/_gui.scss @@ -143,7 +143,7 @@ code { background-color: $lbry-yellow-3; color: $lbry-black; - .button--link { + .button--link:not(:disabled) { // The normal colors we use for .button--link are too light for the warning background // This just darkens them a bit and adds an border-bottom so they are easier to see. $altered-color: mix($lbry-teal-5, $lbry-black, 80%); @@ -204,6 +204,10 @@ code { .error-text { color: $lbry-red-5; + + [data-mode='dark'] & { + color: $lbry-red-3; + } } .thumbnail-preview { diff --git a/yarn.lock b/yarn.lock index 4fd479e9e..019494106 100644 --- a/yarn.lock +++ b/yarn.lock @@ -111,10 +111,10 @@ version "0.7.1" resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.1.tgz#e93c13942592cf5ef01aa8297444dc192beee52f" -"@lbry/components@^2.2.0": - version "2.2.0" - resolved "https://registry.yarnpkg.com/@lbry/components/-/components-2.2.0.tgz#ce9e7667f28be832014d8f29d12796ce514ce039" - integrity sha512-AHzc3OZw6gtKESXm0IrGNMFLoJI2JJVDokRzoyHPOdYgLqqADqekC44u8dytGdPHixBo1kZKaoS2FTTXyZpqpw== +"@lbry/components@^2.2.1": + version "2.2.1" + resolved "https://registry.yarnpkg.com/@lbry/components/-/components-2.2.1.tgz#3fc67e807796e9dc8cd1d5cd86a719849c4710d5" + integrity sha512-k8bdSjr0Hq3+ZlvAKRuPea4LTEvXx4zF7+IOb1RmFWfMIk8jBNZi02LmvLoj4VuCa3mKoVfECeaYyXg6vwmY3w== "@mapbox/hast-util-table-cell-style@^0.1.3": version "0.1.3" @@ -5660,9 +5660,9 @@ lazy-val@^1.0.3: tar-stream "^1.6.2" zstd-codec "^0.1.1" -lbry-redux@lbryio/lbry-redux#2b725cb31729234ba73117e2a74688b8bba26e7c: +lbry-redux@lbryio/lbry-redux#3ab065b11a52d3e2e6a50a25459f9ff0aac03b13: version "0.0.1" - resolved "https://codeload.github.com/lbryio/lbry-redux/tar.gz/2b725cb31729234ba73117e2a74688b8bba26e7c" + resolved "https://codeload.github.com/lbryio/lbry-redux/tar.gz/3ab065b11a52d3e2e6a50a25459f9ff0aac03b13" dependencies: proxy-polyfill "0.1.6" reselect "^3.0.0"