filecoin-project/slate
1
1
Fork 0
mirror of https://github.com/filecoin-project/slate.git synced 2024-12-24 01:23:08 +03:00
Code Issues Packages Projects Releases Wiki Activity

mobile tabs improvement

Browse Source
This commit is contained in:
Martina 2021-01-20 23:02:35 -08:00
parent 7c56f03f4e
commit ad74b12e9a
7 changed files with 101 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
components/core/CircleButtonGray.js
View File

@ -23,6 +23,11 @@ const STYLES_BUTTON = css`
:hover {
background-color: rgb(253, 253, 253);
}
@media (max-width: ${Constants.sizes.mobile}px) {
width: 32px;
height: 32px;
}
`;
export const CircleButtonGray = (props) => {

25
components/core/Profile.js
View File

@ -518,20 +518,23 @@ export default class Profile extends React.Component {
value={this.state.tab}
onChange={(value) => this.setState({ tab: value })}
style={{ marginTop: 0, marginBottom: 32 }}
itemStyle={{ margin: "0px 16px" }}
/>
{this.state.tab === 0 ? (
<div>
<div style={{ display: `flex` }}>
<SecondaryTabGroup
tabs={[
<SVG.GridView height="24px" style={{ display: "block" }} />,
<SVG.TableView height="24px" style={{ display: "block" }} />,
]}
value={this.state.view}
onChange={(value) => this.setState({ view: value })}
style={{ margin: "0 0 24px 0", justifyContent: "flex-end" }}
/>
</div>
{this.props.mobile ? null : (
<div style={{ display: `flex` }}>
<SecondaryTabGroup
tabs={[
<SVG.GridView height="24px" style={{ display: "block" }} />,
<SVG.TableView height="24px" style={{ display: "block" }} />,
]}
value={this.state.view}
onChange={(value) => this.setState({ view: value })}
style={{ margin: "0 0 24px 0", justifyContent: "flex-end" }}
/>
</div>
)}
{this.state.publicFiles.length ? (
<DataView
onAction={this.props.onAction}

5
components/core/ScenePageHeader.js
View File

@ -16,7 +16,10 @@ const STYLES_ROOT = css`
const STYLES_LEFT = css`
min-width: 10%;
width: 100%;
padding-right: 24px;
@media (min-width: ${Constants.sizes.mobile}px) {
padding-right: 24px;
}
`;
const STYLES_RIGHT = css`

4
components/core/TabGroup.js
View File

@ -61,7 +61,9 @@ const STYLES_TAB = css`
@media (max-width: ${Constants.sizes.mobile}px) {
margin-right: 12px;
font-size: ${Constants.typescale.lvl1};
font-size: ${Constants.typescale.lvl0};
height: 32px;
padding: 0px 8px;
}
:last-child {

35
scenes/SceneActivity.js
View File

@ -8,7 +8,7 @@ import * as Events from "~/common/custom-events";
import { GlobalCarousel } from "~/components/system/components/GlobalCarousel";
import { css } from "@emotion/react";
import { PrimaryTabGroup, SecondaryTabGroup } from "~/components/core/TabGroup";
import { TabGroup, PrimaryTabGroup, SecondaryTabGroup } from "~/components/core/TabGroup";
import { LoaderSpinner } from "~/components/system/components/Loaders";
import EmptyState from "~/components/core/EmptyState";
@ -389,15 +389,30 @@ export default class SceneActivity extends React.Component {
<ScenePage>
<ScenePageHeader
title={
<PrimaryTabGroup
tabs={[
{ title: "Files", value: "NAV_DATA" },
{ title: "Slates", value: "NAV_SLATES" },
{ title: "Activity", value: "NAV_ACTIVITY" },
]}
value={2}
onAction={this.props.onAction}
/>
this.props.mobile ? (
<TabGroup
tabs={[
{ title: "Files", value: "NAV_DATA" },
{ title: "Slates", value: "NAV_SLATES" },
{ title: "Activity", value: "NAV_ACTIVITY" },
]}
value={2}
onAction={this.props.onAction}
onChange={(value) => this.setState({ tab: value })}
style={{ marginTop: 0, marginBottom: 32 }}
itemStyle={{ margin: "0px 12px" }}
/>
) : (
<PrimaryTabGroup
tabs={[
{ title: "Files", value: "NAV_DATA" },
{ title: "Slates", value: "NAV_SLATES" },
{ title: "Activity", value: "NAV_ACTIVITY" },
]}
value={2}
onAction={this.props.onAction}
/>
)
}
actions={
<SecondaryTabGroup

35
scenes/SceneFilesFolder.js
View File

@ -3,7 +3,7 @@ import * as SVG from "~/common/svg";
import { ButtonPrimary } from "~/components/system/components/Buttons";
import { FileTypeGroup } from "~/components/core/FileTypeIcon";
import { PrimaryTabGroup, SecondaryTabGroup } from "~/components/core/TabGroup";
import { TabGroup, PrimaryTabGroup, SecondaryTabGroup } from "~/components/core/TabGroup";
import { GlobalCarousel } from "~/components/system/components/GlobalCarousel";
import ScenePage from "~/components/core/ScenePage";
@ -24,15 +24,30 @@ export default class SceneFilesFolder extends React.Component {
<ScenePage>
<ScenePageHeader
title={
<PrimaryTabGroup
tabs={[
{ title: "Files", value: "NAV_DATA" },
{ title: "Slates", value: "NAV_SLATES" },
{ title: "Activity", value: "NAV_ACTIVITY" },
]}
value={0}
onAction={this.props.onAction}
/>
this.props.mobile ? (
<TabGroup
tabs={[
{ title: "Files", value: "NAV_DATA" },
{ title: "Slates", value: "NAV_SLATES" },
{ title: "Activity", value: "NAV_ACTIVITY" },
]}
value={0}
onAction={this.props.onAction}
onChange={(value) => this.setState({ tab: value })}
style={{ marginTop: 0, marginBottom: 32 }}
itemStyle={{ margin: "0px 12px" }}
/>
) : (
<PrimaryTabGroup
tabs={[
{ title: "Files", value: "NAV_DATA" },
{ title: "Slates", value: "NAV_SLATES" },
{ title: "Activity", value: "NAV_ACTIVITY" },
]}
value={0}
onAction={this.props.onAction}
/>
)
}
actions={
this.props.mobile ? null : (

35
scenes/SceneSlates.js
View File

@ -3,7 +3,7 @@ import * as SVG from "~/common/svg";
import * as Events from "~/common/custom-events";
import { css } from "@emotion/react";
import { PrimaryTabGroup, SecondaryTabGroup } from "~/components/core/TabGroup";
import { TabGroup, PrimaryTabGroup, SecondaryTabGroup } from "~/components/core/TabGroup";
import { ButtonSecondary } from "~/components/system/components/Buttons";
import { FileTypeGroup } from "~/components/core/FileTypeIcon";
@ -41,15 +41,30 @@ export default class SceneSlates extends React.Component {
<ScenePage>
<ScenePageHeader
title={
<PrimaryTabGroup
tabs={[
{ title: "Files", value: "NAV_DATA" },
{ title: "Slates", value: "NAV_SLATES" },
{ title: "Activity", value: "NAV_ACTIVITY" },
]}
value={1}
onAction={this.props.onAction}
/>
this.props.mobile ? (
<TabGroup
tabs={[
{ title: "Files", value: "NAV_DATA" },
{ title: "Slates", value: "NAV_SLATES" },
{ title: "Activity", value: "NAV_ACTIVITY" },
]}
value={1}
onAction={this.props.onAction}
onChange={(value) => this.setState({ tab: value })}
style={{ marginTop: 0, marginBottom: 32 }}
itemStyle={{ margin: "0px 12px" }}
/>
) : (
<PrimaryTabGroup
tabs={[
{ title: "Files", value: "NAV_DATA" },
{ title: "Slates", value: "NAV_SLATES" },
{ title: "Activity", value: "NAV_ACTIVITY" },
]}
value={1}
onAction={this.props.onAction}
/>
)
}
actions={
<div style={{ display: "flex", alignItems: "center", marginBottom: 24 }}>