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

mobile: updates onClick to onMouseUp and onTouchEnd

Browse Source
This commit is contained in:
@wwwjim 2020-08-26 21:27:50 -07:00
parent ab15d09572
commit 03bd8adda9
4 changed files with 13 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
components/core/ApplicationLayout.js
View File

@ -157,7 +157,11 @@ export default class ApplicationLayout extends React.Component {
allowedTypes={["sidebar"]}
/>
<div css={STYLES_SIDEBAR_HEADER}>
<div css={STYLES_BLOCK} onClick={this.props.onDismissSidebar}>
<div
css={STYLES_BLOCK}
onMouseUp={this.props.onDismissSidebar}
onTouchEnd={this.props.onDismissSidebar}
>
<SVG.Dismiss height="24px" />
</div>
</div>

9
components/core/ApplicationNavigation.js
View File

@ -151,7 +151,8 @@ const Item = (props) => {
>
<span
css={STYLES_EXPANDER}
onClick={props.onToggleShow ? props.onToggleShow : null}
onMouseUp={props.onToggleShow ? props.onToggleShow : null}
onTouchEnd={props.onToggleShow ? props.onToggleShow : null}
>
<span
css={STYLES_ICON_ELEMENT}
@ -169,7 +170,8 @@ const Item = (props) => {
</span>
<span
css={STYLES_ICON}
onClick={() => props.onNavigateTo({ id: props.id }, props.data)}
onMouseUp={() => props.onNavigateTo({ id: props.id }, props.data)}
onTouchEnd={() => props.onNavigateTo({ id: props.id }, props.data)}
>
<span
css={STYLES_ICON_ELEMENT}
@ -182,7 +184,8 @@ const Item = (props) => {
<span
css={STYLES_CHILDREN}
children={props.children}
onClick={() => props.onNavigateTo({ id: props.id }, props.data)}
onMouseUp={() => props.onNavigateTo({ id: props.id }, props.data)}
onTouchEnd={() => props.onNavigateTo({ id: props.id }, props.data)}
style={{
color: props.activeIds[props.id] ? Constants.system.brand : null,
}}

2
components/core/CircleButtonGray.js
View File

@ -19,7 +19,7 @@ const STYLES_BUTTON = css`
cursor: pointer;
user-select: none;
flex-shrink: 0;
box-shadow: 0 0 1px 4px rgba(0, 0, 0, 0.04);
box-shadow: 0 0 1px 4px rgba(0, 0, 0, 0.007);
:hover {
background-color: ${Constants.system.brand};

2
scenes/SceneSlate.js
View File

@ -10,7 +10,7 @@ import ScenePage from "~/components/core/ScenePage";
import ScenePageHeader from "~/components/core/ScenePageHeader";
import Slate, { generateLayout } from "~/components/core/Slate";
import SlateMediaObject from "~/components/core/SlateMediaObject";
import CircleButtonLight from "~/components/core/CircleButtonLight";
import CircleButtonGray from "~/components/core/CircleButtonGray";
const moveIndex = (set, fromIndex, toIndex) => {
const element = set[fromIndex];