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

mess with button styles

Browse source
This commit is contained in:
Sean Yesmunt 2020-04-01 14:02:23 -04:00
parent 7c8aa23142
commit 5402ed22ea
20 changed files with 140 additions and 52 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
package.json
View file

@ -68,7 +68,7 @@
"@babel/register": "^7.0.0",
"@exponent/electron-cookies": "^2.0.0",
"@hot-loader/react-dom": "^16.8",
"@lbry/components": "^3.0.12",
"@lbry/components": "^4.0.1",
"@reach/menu-button": "0.7.4",
"@reach/rect": "^0.2.1",
"@reach/tabs": "^0.1.5",

BIN
static/font/v1/700.woff
View file

Binary file not shown.

BIN
static/font/v1/700i.woff
View file

Binary file not shown.

5
ui/component/button/view.jsx
View file

@ -86,13 +86,14 @@ const Button = forwardRef<any, {}>((props: Props, ref: any) => {
const innerRef = useRef(null);
const combinedRef = useCombinedRefs(ref, innerRef, myref);
const size = iconSize || (!label && !children) ? 18 : undefined; // Fall back to default
const content = (
<span className="button__content">
{icon && <Icon icon={icon} iconColor={iconColor} size={iconSize} />}
{icon && <Icon icon={icon} iconColor={iconColor} size={size} />}
{label && <span className="button__label">{label}</span>}
{children && children}
{iconRight && <Icon icon={iconRight} iconColor={iconColor} size={iconSize} />}
{iconRight && <Icon icon={iconRight} iconColor={iconColor} size={size} />}
</span>
);

2
ui/component/claimUri/view.jsx
View file

@ -17,8 +17,8 @@ function ClaimUri(props: Props) {
return (
<Button
button="link"
className={classnames('media__uri', { 'media__uri--inline': inline })}
button="alt"
label={noShortUrl ? uri : shortUrl || uri}
onClick={() => {
clipboard.writeText(shortUrl || uri);

2
ui/component/common/icon.jsx
View file

@ -63,7 +63,7 @@ class IconComponent extends React.PureComponent<Props> {
color = this.getIconColor(iconColor);
}
const iconSize = size || 14;
const iconSize = size || 16;
let tooltipText;
if (tooltip) {

34
ui/component/fileActions/view.jsx
View file

@ -1,13 +1,13 @@
// @flow
import type { Node } from 'react';
import * as MODALS from 'constants/modal_types';
import * as ICONS from 'constants/icons';
import React, { Fragment } from 'react';
import React from 'react';
import Button from 'component/button';
import FileDownloadLink from 'component/fileDownloadLink';
import { buildURI } from 'lbry-redux';
import * as PAGES from '../../constants/pages';
import * as CS from '../../constants/claim_search';
import * as RENDER_MODES from 'constants/file_render_modes';
import useIsMobile from 'effects/use-is-mobile';
type Props = {
uri: string,
@ -23,6 +23,7 @@ type Props = {
function FileActions(props: Props) {
const { fileInfo, uri, openModal, claimIsMine, claim, costInfo, renderMode, supportOption, prepareEdit } = props;
const isMobile = useIsMobile();
const webShareable = costInfo && costInfo.cost === 0 && RENDER_MODES.WEB_SHAREABLE_MODES.includes(renderMode);
const showDelete = claimIsMine || (fileInfo && (fileInfo.written_bytes > 0 || fileInfo.blobs_completed > 0));
const claimId = claim && claim.claim_id;
@ -44,23 +45,16 @@ function FileActions(props: Props) {
editUri = buildURI(uriObject);
}
let repostLabel = <span>{__('Repost')}</span>;
if (claim.meta.reposted > 0) {
repostLabel = (
<Fragment>
{repostLabel}
<Button
button="alt"
label={__('(%count%)', { count: claim.meta.reposted })}
navigate={`/$/${PAGES.DISCOVER}?${CS.REPOSTED_URI_KEY}=${encodeURIComponent(uri)}`}
/>
</Fragment>
const ActionWrapper = (props: { children: Node }) =>
isMobile ? (
<React.Fragment>{props.children}</React.Fragment>
) : (
<div className="section__actions section__actions--no-margin">{props.children}</div>
);
}
return (
<div className="media__actions">
<div className="section__actions section__actions--no-margin">
<ActionWrapper>
<Button
button="alt"
icon={ICONS.SHARE}
@ -70,7 +64,7 @@ function FileActions(props: Props) {
<Button
button="alt"
icon={ICONS.REPOST}
label={repostLabel}
label={__('Repost %count%', { count: claim.meta.reposted > 0 ? `(${claim.meta.reposted})` : '' })}
requiresAuth={IS_WEB}
onClick={() => openModal(MODALS.REPOST, { uri })}
/>
@ -95,9 +89,9 @@ function FileActions(props: Props) {
onClick={() => openModal(MODALS.SEND_TIP, { uri, claimIsMine, isSupport: true })}
/>
)}
</div>
</ActionWrapper>
<div className="section__actions section__actions--no-margin">
<ActionWrapper>
<FileDownloadLink uri={uri} />
{claimIsMine && (
@ -129,7 +123,7 @@ function FileActions(props: Props) {
href={`https://lbry.com/dmca/${claimId}`}
/>
)}
</div>
</ActionWrapper>
</div>
);
}

9
ui/component/fileRenderHeader/index.js Normal file
View file

@ -0,0 +1,9 @@
import { connect } from 'react-redux';
import { makeSelectClaimForUri } from 'lbry-redux';
import ClaimUri from './view';
const select = (state, props) => ({
claim: makeSelectClaimForUri(props.uri)(state),
});
export default connect(select)(ClaimUri);

32
ui/component/fileRenderHeader/view.jsx Normal file
View file

@ -0,0 +1,32 @@
// @flow
import * as PAGES from 'constants/pages';
import * as CS from 'constants/claim_search';
import React from 'react';
import ClaimUri from 'component/claimUri';
import Button from 'component/button';
type Props = {
uri: string,
claim: ?Claim,
};
function FileRenderHeader(props: Props) {
const { uri, claim } = props;
return (
<div>
<ClaimUri uri={uri} />
{claim.meta.reposted > 0 && (
<Button
button="link"
className="media__uri--right"
label={__('View %count% reposts', { count: claim.meta.reposted })}
navigate={`/$/${PAGES.DISCOVER}?${CS.REPOSTED_URI_KEY}=${encodeURIComponent(uri)}`}
/>
)}
</div>
);
}
export default FileRenderHeader;

24
ui/page/file/view.jsx
View file

@ -1,8 +1,9 @@
// @flow
import * as React from 'react';
import classnames from 'classnames';
import Page from 'component/page';
import * as RENDER_MODES from 'constants/file_render_modes';
import ClaimUri from 'component/claimUri';
import FileRenderHeader from 'component/fileRenderHeader';
import FileTitle from 'component/fileTitle';
import FileRenderInitiator from 'component/fileRenderInitiator';
import FileRenderInline from 'component/fileRenderInline';
@ -77,7 +78,7 @@ class FilePage extends React.Component<Props> {
if (RENDER_MODES.FLOATING_MODES.includes(mode)) {
return (
<React.Fragment>
<ClaimUri uri={uri} />
<FileRenderHeader uri={uri} />
<div className={FILE_WRAPPER_CLASS}>
<FileRenderInitiator uri={uri} />
</div>
@ -90,7 +91,7 @@ class FilePage extends React.Component<Props> {
if (RENDER_MODES.UNRENDERABLE_MODES.includes(mode)) {
return (
<React.Fragment>
<ClaimUri uri={uri} />
<FileRenderHeader uri={uri} />
<FileTitle uri={uri} />
<FileRenderDownload uri={uri} isFree={cost === 0} />
</React.Fragment>
@ -100,7 +101,7 @@ class FilePage extends React.Component<Props> {
if (RENDER_MODES.TEXT_MODES.includes(mode)) {
return (
<React.Fragment>
<ClaimUri uri={uri} />
<FileRenderHeader uri={uri} />
<FileTitle uri={uri} />
<FileRenderInitiator uri={uri} />
<FileRenderInline uri={uri} />
@ -110,7 +111,7 @@ class FilePage extends React.Component<Props> {
return (
<React.Fragment>
<ClaimUri uri={uri} />
<FileRenderHeader uri={uri} />
<FileRenderInitiator uri={uri} />
<FileRenderInline uri={uri} />
<FileTitle uri={uri} />
@ -123,14 +124,21 @@ class FilePage extends React.Component<Props> {
return (
<Page className="file-page">
<div className="section card-stack">
<div className={classnames('section card-stack', `file-page__${renderMode}`)}>
{this.renderFilePageLayout(uri, renderMode, costInfo ? costInfo.cost : null)}
</div>
<div className="section columns">
<div className="card-stack">
<FileDetails uri={uri} />
<Card title={__('Leave a Comment')} actions={<CommentCreate uri={uri} />} />
<Card title={__('Comments')} body={<CommentsList uri={uri} />} />
<Card
title={__('Leave a Comment')}
actions={
<div>
<CommentCreate uri={uri} />
<CommentsList uri={uri} />
</div>
}
/>
</div>
<RecommendedContent uri={uri} />
</div>

2
ui/page/search/view.jsx
View file

@ -79,8 +79,8 @@ export default function SearchPage(props: Props) {
<div className="claim-preview__actions--header">
<ClaimUri uri={uriFromQuery} noShortUrl />
<Button
button="link"
className="media__uri--right"
button="alt"
label={__('View top claims for %normalized_uri%', {
normalized_uri: uriFromQuery,
})}

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

@ -1,8 +1,3 @@
.button {
display: inline-block;
font-weight: var(--font-weight-base);
}
.button--uri-indicator {
@extend .button--link;
color: var(--color-text-subtitle);

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

@ -149,10 +149,6 @@
display: flex;
align-items: flex-start;
> * {
flex-grow: 1;
}
.icon__wrapper {
margin-right: var(--spacing-large);
}
@ -186,6 +182,10 @@
padding: 0;
border-top: 1px solid var(--color-border);
}
@media (max-width: $breakpoint-small) {
padding: var(--spacing-large);
}
}
.card__main-actions {
@ -208,3 +208,14 @@
margin-left: var(--spacing-small);
}
}
.card__header,
.card__body,
.card__main-actions {
@media (max-width: $breakpoint-small) {
padding: var(--spacing-small);
padding-bottom: 0;
margin: 0;
margin-bottom: var(--spacing-small);
}
}

4
ui/scss/component/_channel.scss
View file

@ -9,8 +9,8 @@ $metadata-z-index: 1;
box-sizing: content-box;
color: #fff;
.button {
color: #fff;
.button--alt {
padding: 0 var(--spacing-small);
}
}

8
ui/scss/component/_claim-list.scss
View file

@ -67,10 +67,6 @@
list-style: none;
}
.claim-preview__wrapper--channel {
background-color: var(--color-card-background-highlighted);
}
.claim-preview__wrapper--notice {
background-color: var(--color-notice);
}
@ -208,6 +204,10 @@
display: flex;
flex-direction: column;
flex: 1;
@media (max-width: $breakpoint-small) {
margin-bottom: var(--spacing-small);
}
}
.claim-preview-info {

4
ui/scss/component/_comments.scss
View file

@ -1,3 +1,7 @@
.comments {
padding-top: var(--spacing-large);
}
.comment {
display: flex;
flex-direction: row;

19
ui/scss/component/_file-render.scss
View file

@ -11,6 +11,25 @@
.card + .file-render {
margin-top: var(--spacing-large);
}
.file-page__md {
.card {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.card + .file-render {
margin-top: 0;
.card {
border-top-left-radius: 0;
border-top-right-radius: 0;
border-bottom-left-radius: var(--border-radius);
border-bottom-right-radius: var(--border-radius);
border-top: none;
}
}
}
}
.file-render {

11
ui/scss/component/_media.scss
View file

@ -63,6 +63,7 @@
@extend .media__subtitle;
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: var(--spacing-small);
}
@ -83,4 +84,14 @@
flex-wrap: wrap;
justify-content: space-between;
margin-top: 0;
@media (max-width: $breakpoint-small) {
justify-content: flex-start;
padding-top: var(--spacing-small);
> * {
margin-right: var(--spacing-small);
margin-bottom: var(--spacing-small);
}
}
}

3
ui/scss/themes/dark.scss
View file

@ -21,6 +21,9 @@
--color-button-secondary-bg: #395877;
--color-button-secondary-bg-hover: #4b6d8f;
--color-button-secondary-text: #a3c1e0;
--color-button-alt-bg: #4d5660;
--color-button-alt-bg-hover: #3e464d;
--color-button-alt-text: #e2e9f0;
--color-header-button: var(--color-link-icon);
// Color

7
yarn.lock
View file

@ -819,9 +819,10 @@
prop-types "^15.6.2"
scheduler "^0.18.0"
"@lbry/components@^3.0.12":
version "3.0.12"
resolved "https://registry.yarnpkg.com/@lbry/components/-/components-3.0.12.tgz#9ba4598edf26496060a97023ca0132d39c388c3b"
"@lbry/components@^4.0.1":
version "4.0.1"
resolved "https://registry.yarnpkg.com/@lbry/components/-/components-4.0.1.tgz#8dcf7348920383d854c0db640faaf1ac5a72f7ef"
integrity sha512-vY84ziZ9EaXoezDBK2VsajvXcSPXDV0fr1VWn2w0iHkGa756RWvNySpnqaKMZH+myK12mvNNc/NkGIW5oO7+5w==
"@mapbox/hast-util-table-cell-style@^0.1.3":
version "0.1.3"