Adds icons for claim-list alt control buttons & styles them
This commit is contained in:
parent
dfe0a75209
commit
b389a4e139
9 changed files with 46 additions and 6 deletions
|
@ -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>
|
||||
),
|
||||
};
|
||||
|
|
|
@ -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"
|
||||
/>
|
||||
|
|
|
@ -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';
|
||||
|
|
|
@ -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 && (
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue