Adds icons for claim-list alt control buttons & styles them

This commit is contained in:
Oleg Silkin 2019-12-03 22:40:30 -05:00 committed by Sean Yesmunt
parent dfe0a75209
commit b389a4e139
9 changed files with 46 additions and 6 deletions

View file

@ -322,4 +322,20 @@ export const icons = {
<path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z" />
</g>
),
[ICONS.NEW_CHANNEL]: buildIcon(
<g>
<path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />
<circle cx="8.5" cy="7" r="4" />
<line x1="20" y1="8" x2="20" y2="14" />
<line x1="23" y1="11" x2="17" y2="11" />
</g>
),
[ICONS.NEW_PUBLISH]: buildIcon(
<g>
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
<polyline points="14 2 14 8 20 8" />
<line x1="12" y1="18" x2="12" y2="12" />
<line x1="9" y1="15" x2="15" y2="15" />
</g>
),
};

View file

@ -75,7 +75,7 @@ function SideBar(props: Props) {
<Button
navigate={`/$/${PAGES.FOLLOWING}`}
label={__('Customize')}
icon={ICONS.EDIT}
icon={ICONS.CUSTOMIZE}
className="navigation-link"
activeClass="navigation-link--active"
/>

View file

@ -14,6 +14,7 @@ export const PUBLISH = 'UploadCloud';
export const REMOVE = 'X';
export const ADD = 'Plus';
export const EDIT = 'Edit';
export const CUSTOMIZE = 'Edit'; // Used as icon for 'Customize'
export const DELETE = 'Trash';
export const REPORT = 'Flag';
export const HELP = 'HelpCircle';
@ -78,3 +79,5 @@ export const EYE = 'Eye';
export const EYE_OFF = 'EyeOff';
export const SIGN_OUT = 'SignOut';
export const SIGN_IN = 'SignIn';
export const NEW_CHANNEL = 'UserPlus';
export const NEW_PUBLISH = 'FilePlus';

View file

@ -21,7 +21,7 @@ function ChannelCreatePage(props: Props) {
}
}
let history = useHistory();
const returnToChannelList = _ => history.push(`/$/${PAGES.CHANNELS}`);
const returnToChannelList = () => history.push(`/$/${PAGES.CHANNELS}`);
return (
<Page>
{balance === 0 && (

View file

@ -50,7 +50,7 @@ export default function ChannelsPage(props: Props) {
iconSize={20}
label={__('New Channel')}
button="link"
icon={ICONS.EDIT}
icon={ICONS.NEW_CHANNEL}
navigate={`/$/${PAGES.CHANNEL_CREATE}`}
/>
}
@ -69,7 +69,7 @@ export default function ChannelsPage(props: Props) {
iconSize={20}
label={__('New Channel')}
button="link"
icon={ICONS.EDIT}
icon={ICONS.NEW_CHANNEL}
navigate={`/$/${PAGES.CHANNEL_CREATE}`}
/>
</div>

View file

@ -5,6 +5,7 @@ import ClaimListDiscover from 'component/claimListDiscover';
import TagsSelect from 'component/tagsSelect';
import Page from 'component/page';
import Button from 'component/button';
import * as ICONS from 'constants/icons';
type Props = {
followedTags: Array<Tag>,
@ -21,7 +22,15 @@ function DiscoverPage(props: Props) {
hideCustomization={IS_WEB && !email}
personalView
tags={followedTags.map(tag => tag.name)}
meta={<Button button="link" label={__('Customize')} requiresAuth={IS_WEB} navigate={`/$/${PAGES.FOLLOWING}`} />}
meta={
<Button
button="link"
label={__('Customize')}
requiresAuth={IS_WEB}
navigate={`/$/${PAGES.FOLLOWING}`}
icon={ICONS.EDIT}
/>
}
/>
</Page>
);

View file

@ -7,6 +7,7 @@ import Paginate from 'component/common/paginate';
import { PAGE_SIZE } from 'constants/claim';
import WebUploadList from 'component/webUploadList';
import Spinner from 'component/spinner';
import * as ICONS from 'constants/icons';
type Props = {
checkPendingPublishes: () => void,
@ -35,7 +36,9 @@ function FileListPublished(props: Props) {
loading={fetching}
persistedStorageKey="claim-list-published"
uris={urls}
headerAltControls={<Button button="link" label={__('New Publish')} navigate="/$/publish" />}
headerAltControls={
<Button button="link" label={__('New Publish')} navigate="/$/publish" icon={ICONS.NEW_PUBLISH} />
}
/>
<Paginate totalPages={Math.ceil(Number(urlTotal) / Number(PAGE_SIZE))} loading={fetching} />
</div>

View file

@ -49,6 +49,11 @@
& > * {
margin-left: var(--spacing-small);
}
.button__content svg {
width: var(--claim-list-alt-control-icon-width);
height: var(--claim-list-alt-control-icon-height);
}
}
.claim-preview {

View file

@ -61,4 +61,8 @@ $large-breakpoint: 1921px;
--file-list-thumbnail-width: 10rem;
--tag-height: 1.5rem;
// SVG Icons
--claim-list-alt-control-icon-width: 20px;
--claim-list-alt-control-icon-height: 20px;
}