filecoin-project/slate
1
1
Fork 0
mirror of https://github.com/filecoin-project/slate.git synced 2024-11-26 13:45:30 +03:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #612 from filecoin-project/@toastts/mac-icon-changes

Browse Source 
os detection for search key modifier, cmd icon to information icon
This commit is contained in:
CAKE 2021-03-07 20:59:30 -08:00 committed by GitHub
commit 08206d823d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 123 additions and 103 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
common/window.js
View File

@ -105,6 +105,14 @@ export const isMobileBrowser = (userAgent) => {
return !!mobile; return !!mobile;
}; };
//NOTE(toast): this can be switched to regex pattern matching if
//we decide finding specific operating systems is important
export const isMac = (userAgent) => {
const navigatorAgent = getNavigatorAgent(userAgent);
let usingMac = navigatorAgent.indexOf("Mac") !== -1;
return usingMac;
};
export const debounce = (func, wait) => { export const debounce = (func, wait) => {
let timeout; let timeout;

5
components/core/Application.js
View File

@ -660,6 +660,7 @@ export default class ApplicationPage extends React.Component {
activeIds={current.activeIds} activeIds={current.activeIds}
onAction={this._handleAction} onAction={this._handleAction}
mobile={this.state.mobile} mobile={this.state.mobile}
mac={this.props.mac}
/> />
); );
@ -677,6 +678,7 @@ export default class ApplicationPage extends React.Component {
onUpdateViewer: this._handleUpdateViewer, onUpdateViewer: this._handleUpdateViewer,
sceneId: current.target.id, sceneId: current.target.id,
mobile: this.state.mobile, mobile: this.state.mobile,
mac: this.props.mac,
resources: this.props.resources, resources: this.props.resources,
activeUsers: this.state.activeUsers, activeUsers: this.state.activeUsers,
}); });
@ -733,6 +735,7 @@ export default class ApplicationPage extends React.Component {
fileLoading={this.state.fileLoading} fileLoading={this.state.fileLoading}
filecoin={current.target.filecoin} filecoin={current.target.filecoin}
mobile={this.state.mobile} mobile={this.state.mobile}
mac={this.props.mac}
viewer={this.state.viewer} viewer={this.state.viewer}
onUpdateViewer={this._handleUpdateViewer} onUpdateViewer={this._handleUpdateViewer}
> >
@ -742,7 +745,7 @@ export default class ApplicationPage extends React.Component {
<SearchModal <SearchModal
viewer={this.state.viewer} viewer={this.state.viewer}
onAction={this._handleAction} onAction={this._handleAction}
mobile={this.props.mobile} mobile={this.state.mobile}
resourceURI={this.props.resources.search} resourceURI={this.props.resources.search}
/> />
{!this.state.loaded ? ( {!this.state.loaded ? (

9
components/core/ApplicationHeader.js
View File

@ -128,6 +128,11 @@ const STYLES_STATIC = css`
export default class ApplicationHeader extends React.Component { export default class ApplicationHeader extends React.Component {
keysPressed = {}; keysPressed = {};
searchModKey = this.props.mac ? (
<SVG.MacCommand height="12px" style={{ display: "block", paddingLeft: 8, paddingRight: 8 }} />
) : (
<span style={{ display: "block", paddingLeft: 8, paddingRight: 8 }}>Ctrl</span>
);
state = { state = {
popup: null, popup: null,
@ -269,8 +274,8 @@ export default class ApplicationHeader extends React.Component {
cursor: "pointer", cursor: "pointer",
}} }}
> >
<div css={STYLES_SHORTCUTS}> <div css={STYLES_SHORTCUTS} style={{ width: "auto" }}>
<SVG.MacCommand height="12px" style={{ display: "block" }} /> {this.searchModKey}
</div> </div>
<div css={STYLES_SHORTCUTS}>F</div> <div css={STYLES_SHORTCUTS}>F</div>
</div> </div>

37
components/core/SlateLayout.js
View File

@ -722,6 +722,7 @@ export class SlateLayout extends React.Component {
) { ) {
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
console.log(this.props.isMac);
this._handleUndo(); this._handleUndo();
} else if ( } else if (
(this.keysPressed["Control"] || this.keysPressed["Meta"]) && (this.keysPressed["Control"] || this.keysPressed["Meta"]) &&
@ -745,14 +746,6 @@ export class SlateLayout extends React.Component {
this.keysPressed = {}; this.keysPressed = {};
}; };
_handleHelpKeybind = () => {
if (!this.state.keyboardTooltip) {
this.setState({ keyboardTooltip: true });
} else {
this.setState({ keyboardTooltip: false });
}
};
_handleUndo = () => { _handleUndo = () => {
if (this.state.prevLayouts.length) { if (this.state.prevLayouts.length) {
let prevLayouts = this.state.prevLayouts; let prevLayouts = this.state.prevLayouts;
@ -1218,9 +1211,9 @@ export class SlateLayout extends React.Component {
)} )}
{!this.state.keyboardTooltip ? ( {!this.state.keyboardTooltip ? (
<div onMouseEnter={() => this.setState({ keyboardTooltip: true })}> <div onMouseEnter={() => this.setState({ keyboardTooltip: true })}>
<SVG.MacCommand <SVG.Information
height="15px" height="18px"
style={{ marginLeft: "14px", color: Constants.system.darkGray }} style={{ marginLeft: "14px", color: Constants.system.black }}
onMouseEnter={() => this.setState({ keyboardTooltip: true })} onMouseEnter={() => this.setState({ keyboardTooltip: true })}
/> />
</div> </div>
@ -1230,13 +1223,10 @@ export class SlateLayout extends React.Component {
style={{ marginRight: "14px" }} style={{ marginRight: "14px" }}
onMouseLeave={() => this.setState({ keyboardTooltip: false })} onMouseLeave={() => this.setState({ keyboardTooltip: false })}
> >
<SVG.MacCommand <SVG.Information
height="15px" height="18px"
style={{ style={{ marginLeft: "14px", color: Constants.system.darkGray }}
marginLeft: "14px", onMouseEnter={() => this.setState({ keyboardTooltip: true })}
marginRight: "7px",
color: Constants.system.darkGray,
}}
/> />
</span> </span>
<div css={STYLES_TOOLTIP_ANCHOR}> <div css={STYLES_TOOLTIP_ANCHOR}>
@ -1245,8 +1235,9 @@ export class SlateLayout extends React.Component {
css={STYLES_TOOLTIP_TEXT} css={STYLES_TOOLTIP_TEXT}
style={{ style={{
fontFamily: Constants.font.semiBold, fontFamily: Constants.font.semiBold,
fontSize: "14px", fontSize: 14,
paddingTop: "12px", paddingTop: 12,
paddingBottom: 4,
}} }}
> >
Keyboard shortcuts Keyboard shortcuts
@ -1322,11 +1313,9 @@ export class SlateLayout extends React.Component {
height: this.state.editing height: this.state.editing
? `calc(100vh + ${this.state.containerHeight}px)` ? `calc(100vh + ${this.state.containerHeight}px)`
: `calc(96px + ${this.state.containerHeight}px)`, : `calc(96px + ${this.state.containerHeight}px)`,
backgroundSize: `${(CONTAINER_SIZE / 108) * this.state.unit}px ${ backgroundSize: `${(CONTAINER_SIZE / 108) * this.state.unit}px ${10 * this.state.unit
10 * this.state.unit
}px`, }px`,
backgroundPosition: `-${(CONTAINER_SIZE / 220) * this.state.unit}px -${ backgroundPosition: `-${(CONTAINER_SIZE / 220) * this.state.unit}px -${(CONTAINER_SIZE / 220) * this.state.unit
(CONTAINER_SIZE / 220) * this.state.unit
}px`, }px`,
}} }}
ref={(c) => { ref={(c) => {

2
pages/_/index.js
View File

@ -8,6 +8,7 @@ export const getServerSideProps = async ({ query }) => {
viewer: query.viewer, viewer: query.viewer,
analytics: query.analytics, analytics: query.analytics,
mobile: query.mobile, mobile: query.mobile,
mac: query.mac,
resources: query.resources, resources: query.resources,
}, },
}; };
@ -20,6 +21,7 @@ export default class ApplicationPage extends React.Component {
viewer={this.props.viewer} viewer={this.props.viewer}
analytics={this.props.analytics} analytics={this.props.analytics}
mobile={this.props.mobile} mobile={this.props.mobile}
mac={this.props.mac}
resources={this.props.resources} resources={this.props.resources}
/> />
); );

13
scenes/SceneFilesFolder.js
View File

@ -318,9 +318,9 @@ export default class SceneFilesFolder extends React.Component {
style={{ position: "relative" }} style={{ position: "relative" }}
css={STYLES_COMMAND_WRAPPER} css={STYLES_COMMAND_WRAPPER}
> >
<SVG.MacCommand <SVG.Information
height="18px" height="18px"
style={{ marginRight: "18px", color: Constants.system.darkGray }} style={{ marginRight: "18px", color: Constants.system.black }}
onMouseEnter={() => this.setState({ keyboardTooltip: true })} onMouseEnter={() => this.setState({ keyboardTooltip: true })}
/> />
</div> </div>
@ -330,7 +330,7 @@ export default class SceneFilesFolder extends React.Component {
css={STYLES_COMMAND_WRAPPER} css={STYLES_COMMAND_WRAPPER}
onMouseLeave={() => this.setState({ keyboardTooltip: false })} onMouseLeave={() => this.setState({ keyboardTooltip: false })}
> >
<SVG.MacCommand <SVG.Information
height="18px" height="18px"
style={{ style={{
marginRight: "18px", marginRight: "18px",
@ -344,8 +344,9 @@ export default class SceneFilesFolder extends React.Component {
css={STYLES_TOOLTIP_TEXT} css={STYLES_TOOLTIP_TEXT}
style={{ style={{
fontFamily: Constants.font.semiBold, fontFamily: Constants.font.semiBold,
fontSize: "14px", fontSize: 14,
paddingTop: "12px", paddingTop: 12,
paddingBottom: 4,
}} }}
> >
Keyboard shortcuts Keyboard shortcuts
@ -364,7 +365,7 @@ export default class SceneFilesFolder extends React.Component {
</p> </p>
</div> </div>
<div> <div>
<p css={STYLES_TOOLTIP_TEXT}>Alt + drag</p> <p css={STYLES_TOOLTIP_TEXT}>alt + drag</p>
<p css={STYLES_TOOLTIP_TEXT} style={{ color: Constants.system.darkGray }}> <p css={STYLES_TOOLTIP_TEXT} style={{ color: Constants.system.darkGray }}>
deselect items by draging over them deselect items by draging over them
</p> </p>

12
server.js
View File

@ -153,6 +153,7 @@ app.prepare().then(async () => {
server.get("/_", async (req, res) => { server.get("/_", async (req, res) => {
let mobile = Window.isMobileBrowser(req.headers["user-agent"]); let mobile = Window.isMobileBrowser(req.headers["user-agent"]);
let mac = Window.isMac(req.headers["user-agent"]);
const isBucketsAvailable = await Utilities.checkTextile(); const isBucketsAvailable = await Utilities.checkTextile();
@ -174,6 +175,7 @@ app.prepare().then(async () => {
viewer, viewer,
analytics, analytics,
mobile, mobile,
mac,
resources: EXTERNAL_RESOURCES, resources: EXTERNAL_RESOURCES,
}); });
}); });
@ -242,6 +244,7 @@ app.prepare().then(async () => {
server.get("/[$]/:id", async (req, res) => { server.get("/[$]/:id", async (req, res) => {
let mobile = Window.isMobileBrowser(req.headers["user-agent"]); let mobile = Window.isMobileBrowser(req.headers["user-agent"]);
let mac = Window.isMac(req.headers["user-agent"]);
const slate = await Data.getSlateById({ const slate = await Data.getSlateById({
id: req.params.id, id: req.params.id,
@ -283,12 +286,14 @@ app.prepare().then(async () => {
creator: Serializers.user(creator), creator: Serializers.user(creator),
slate, slate,
mobile, mobile,
mac,
resources: EXTERNAL_RESOURCES, resources: EXTERNAL_RESOURCES,
}); });
}); });
server.get("/:username", async (req, res) => { server.get("/:username", async (req, res) => {
let mobile = Window.isMobileBrowser(req.headers["user-agent"]); let mobile = Window.isMobileBrowser(req.headers["user-agent"]);
let mac = Window.isMac(req.headers["user-agent"]);
// TODO(jim): Temporary workaround // TODO(jim): Temporary workaround
if (!Validations.userRoute(req.params.username)) { if (!Validations.userRoute(req.params.username)) {
@ -356,6 +361,7 @@ app.prepare().then(async () => {
viewer, viewer,
creator, creator,
mobile, mobile,
mac,
resources: EXTERNAL_RESOURCES, resources: EXTERNAL_RESOURCES,
exploreSlates, exploreSlates,
}); });
@ -363,6 +369,7 @@ app.prepare().then(async () => {
server.get("/:username/cid::cid", async (req, res) => { server.get("/:username/cid::cid", async (req, res) => {
let mobile = Window.isMobileBrowser(req.headers["user-agent"]); let mobile = Window.isMobileBrowser(req.headers["user-agent"]);
let mac = Window.isMac(req.headers["user-agent"]);
// TODO(jim): Temporary workaround // TODO(jim): Temporary workaround
if (!Validations.userRoute(req.params.username)) { if (!Validations.userRoute(req.params.username)) {
@ -428,6 +435,7 @@ app.prepare().then(async () => {
viewer, viewer,
creator: Serializers.user(creator), creator: Serializers.user(creator),
mobile, mobile,
mac,
resources: EXTERNAL_RESOURCES, resources: EXTERNAL_RESOURCES,
cid: req.params.cid, cid: req.params.cid,
}); });
@ -435,6 +443,7 @@ app.prepare().then(async () => {
server.get("/:username/:slatename", async (req, res) => { server.get("/:username/:slatename", async (req, res) => {
let mobile = Window.isMobileBrowser(req.headers["user-agent"]); let mobile = Window.isMobileBrowser(req.headers["user-agent"]);
let mac = Window.isMac(req.headers["user-agent"]);
// TODO(jim): Temporary workaround // TODO(jim): Temporary workaround
if (!Validations.userRoute(req.params.username)) { if (!Validations.userRoute(req.params.username)) {
@ -499,12 +508,14 @@ app.prepare().then(async () => {
creator: Serializers.user(creator), creator: Serializers.user(creator),
slate, slate,
mobile, mobile,
mac,
resources: EXTERNAL_RESOURCES, resources: EXTERNAL_RESOURCES,
}); });
}); });
server.get("/:username/:slatename/cid::cid", async (req, res) => { server.get("/:username/:slatename/cid::cid", async (req, res) => {
let mobile = Window.isMobileBrowser(req.headers["user-agent"]); let mobile = Window.isMobileBrowser(req.headers["user-agent"]);
let mac = Window.isMac(req.headers["user-agent"]);
// TODO(jim): Temporary workaround // TODO(jim): Temporary workaround
if (!Validations.userRoute(req.params.username)) { if (!Validations.userRoute(req.params.username)) {
@ -568,6 +579,7 @@ app.prepare().then(async () => {
creator: Serializers.user(creator), creator: Serializers.user(creator),
slate, slate,
mobile, mobile,
mac,
resources: EXTERNAL_RESOURCES, resources: EXTERNAL_RESOURCES,
cid: req.params.cid, cid: req.params.cid,
}); });