mirror of
https://github.com/filecoin-project/slate.git
synced 2024-09-19 18:28:03 +03:00
Merge pull request #612 from filecoin-project/@toastts/mac-icon-changes
os detection for search key modifier, cmd icon to information icon
This commit is contained in:
CAKE
GitHub
commit
08206d823d
@ -105,6 +105,14 @@ export const isMobileBrowser = (userAgent) => {
|
||||
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) => {
|
||||
let timeout;
|
||||
|
||||
|
||||
@ -660,6 +660,7 @@ export default class ApplicationPage extends React.Component {
|
||||
activeIds={current.activeIds}
|
||||
onAction={this._handleAction}
|
||||
mobile={this.state.mobile}
|
||||
mac={this.props.mac}
|
||||
/>
|
||||
);
|
||||
|
||||
@ -677,6 +678,7 @@ export default class ApplicationPage extends React.Component {
|
||||
onUpdateViewer: this._handleUpdateViewer,
|
||||
sceneId: current.target.id,
|
||||
mobile: this.state.mobile,
|
||||
mac: this.props.mac,
|
||||
resources: this.props.resources,
|
||||
activeUsers: this.state.activeUsers,
|
||||
});
|
||||
@ -733,6 +735,7 @@ export default class ApplicationPage extends React.Component {
|
||||
fileLoading={this.state.fileLoading}
|
||||
filecoin={current.target.filecoin}
|
||||
mobile={this.state.mobile}
|
||||
mac={this.props.mac}
|
||||
viewer={this.state.viewer}
|
||||
onUpdateViewer={this._handleUpdateViewer}
|
||||
>
|
||||
@ -742,7 +745,7 @@ export default class ApplicationPage extends React.Component {
|
||||
<SearchModal
|
||||
viewer={this.state.viewer}
|
||||
onAction={this._handleAction}
|
||||
mobile={this.props.mobile}
|
||||
mobile={this.state.mobile}
|
||||
resourceURI={this.props.resources.search}
|
||||
/>
|
||||
{!this.state.loaded ? (
|
||||
|
||||
@ -128,6 +128,11 @@ const STYLES_STATIC = css`
|
||||
|
||||
export default class ApplicationHeader extends React.Component {
|
||||
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 = {
|
||||
popup: null,
|
||||
@ -269,8 +274,8 @@ export default class ApplicationHeader extends React.Component {
|
||||
cursor: "pointer",
|
||||
}}
|
||||
>
|
||||
<div css={STYLES_SHORTCUTS}>
|
||||
<SVG.MacCommand height="12px" style={{ display: "block" }} />
|
||||
<div css={STYLES_SHORTCUTS} style={{ width: "auto" }}>
|
||||
{this.searchModKey}
|
||||
</div>
|
||||
<div css={STYLES_SHORTCUTS}>F</div>
|
||||
</div>
|
||||
|
||||
@ -553,10 +553,10 @@ export class SlateLayout extends React.Component {
|
||||
y: defaultLayout
|
||||
? 0
|
||||
: itemAbove
|
||||
? fileNames
|
||||
? itemAbove.y + itemAbove.h + MARGIN + TAG_HEIGHT
|
||||
: itemAbove.y + itemAbove.h + MARGIN
|
||||
: yMax,
|
||||
? fileNames
|
||||
? itemAbove.y + itemAbove.h + MARGIN + TAG_HEIGHT
|
||||
: itemAbove.y + itemAbove.h + MARGIN
|
||||
: yMax,
|
||||
h: height,
|
||||
w: SIZE,
|
||||
z: 0,
|
||||
@ -722,6 +722,7 @@ export class SlateLayout extends React.Component {
|
||||
) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
console.log(this.props.isMac);
|
||||
this._handleUndo();
|
||||
} else if (
|
||||
(this.keysPressed["Control"] || this.keysPressed["Meta"]) &&
|
||||
@ -745,14 +746,6 @@ export class SlateLayout extends React.Component {
|
||||
this.keysPressed = {};
|
||||
};
|
||||
|
||||
_handleHelpKeybind = () => {
|
||||
if (!this.state.keyboardTooltip) {
|
||||
this.setState({ keyboardTooltip: true });
|
||||
} else {
|
||||
this.setState({ keyboardTooltip: false });
|
||||
}
|
||||
};
|
||||
|
||||
_handleUndo = () => {
|
||||
if (this.state.prevLayouts.length) {
|
||||
let prevLayouts = this.state.prevLayouts;
|
||||
@ -971,7 +964,7 @@ export class SlateLayout extends React.Component {
|
||||
//NOTE(martina): collapses the z-indexes back down to 0 through n-1 (so they don't continuously get higher)
|
||||
let zIndexes = this.state.layout.map((pos) => pos.z);
|
||||
zIndexes = [...new Set(zIndexes)];
|
||||
zIndexes.sort(function (a, b) {
|
||||
zIndexes.sort(function(a, b) {
|
||||
return a - b;
|
||||
});
|
||||
let layout = this.cloneLayout(this.state.layout);
|
||||
@ -1218,9 +1211,9 @@ export class SlateLayout extends React.Component {
|
||||
)}
|
||||
{!this.state.keyboardTooltip ? (
|
||||
<div onMouseEnter={() => this.setState({ keyboardTooltip: true })}>
|
||||
<SVG.MacCommand
|
||||
height="15px"
|
||||
style={{ marginLeft: "14px", color: Constants.system.darkGray }}
|
||||
<SVG.Information
|
||||
height="18px"
|
||||
style={{ marginLeft: "14px", color: Constants.system.black }}
|
||||
onMouseEnter={() => this.setState({ keyboardTooltip: true })}
|
||||
/>
|
||||
</div>
|
||||
@ -1230,13 +1223,10 @@ export class SlateLayout extends React.Component {
|
||||
style={{ marginRight: "14px" }}
|
||||
onMouseLeave={() => this.setState({ keyboardTooltip: false })}
|
||||
>
|
||||
<SVG.MacCommand
|
||||
height="15px"
|
||||
style={{
|
||||
marginLeft: "14px",
|
||||
marginRight: "7px",
|
||||
color: Constants.system.darkGray,
|
||||
}}
|
||||
<SVG.Information
|
||||
height="18px"
|
||||
style={{ marginLeft: "14px", color: Constants.system.darkGray }}
|
||||
onMouseEnter={() => this.setState({ keyboardTooltip: true })}
|
||||
/>
|
||||
</span>
|
||||
<div css={STYLES_TOOLTIP_ANCHOR}>
|
||||
@ -1245,8 +1235,9 @@ export class SlateLayout extends React.Component {
|
||||
css={STYLES_TOOLTIP_TEXT}
|
||||
style={{
|
||||
fontFamily: Constants.font.semiBold,
|
||||
fontSize: "14px",
|
||||
paddingTop: "12px",
|
||||
fontSize: 14,
|
||||
paddingTop: 12,
|
||||
paddingBottom: 4,
|
||||
}}
|
||||
>
|
||||
Keyboard shortcuts
|
||||
@ -1322,12 +1313,10 @@ export class SlateLayout extends React.Component {
|
||||
height: this.state.editing
|
||||
? `calc(100vh + ${this.state.containerHeight}px)`
|
||||
: `calc(96px + ${this.state.containerHeight}px)`,
|
||||
backgroundSize: `${(CONTAINER_SIZE / 108) * this.state.unit}px ${
|
||||
10 * this.state.unit
|
||||
}px`,
|
||||
backgroundPosition: `-${(CONTAINER_SIZE / 220) * this.state.unit}px -${
|
||||
(CONTAINER_SIZE / 220) * this.state.unit
|
||||
}px`,
|
||||
backgroundSize: `${(CONTAINER_SIZE / 108) * this.state.unit}px ${10 * this.state.unit
|
||||
}px`,
|
||||
backgroundPosition: `-${(CONTAINER_SIZE / 220) * this.state.unit}px -${(CONTAINER_SIZE / 220) * this.state.unit
|
||||
}px`,
|
||||
}}
|
||||
ref={(c) => {
|
||||
this._ref = c;
|
||||
@ -1348,8 +1337,8 @@ export class SlateLayout extends React.Component {
|
||||
selectableKey={i}
|
||||
onMouseEnter={() => this.setState({ hover: i })}
|
||||
onMouseLeave={() => this.setState({ hover: null })}
|
||||
onMouseDown={this.state.editing ? (e) => this._handleMouseDown(e, i) : () => {}}
|
||||
onClick={this.state.editing ? () => {} : () => this.props.onSelect(i)}
|
||||
onMouseDown={this.state.editing ? (e) => this._handleMouseDown(e, i) : () => { }}
|
||||
onClick={this.state.editing ? () => { } : () => this.props.onSelect(i)}
|
||||
style={{
|
||||
top: pos.y * unit,
|
||||
left: pos.x * unit,
|
||||
@ -1430,37 +1419,37 @@ export class SlateLayout extends React.Component {
|
||||
style={
|
||||
this.state.tooltip === `${i}-remove`
|
||||
? {
|
||||
position: "absolute",
|
||||
top: 36,
|
||||
right: 8,
|
||||
}
|
||||
position: "absolute",
|
||||
top: 36,
|
||||
right: 8,
|
||||
}
|
||||
: this.state.tooltip === `${i}-view`
|
||||
? {
|
||||
? {
|
||||
position: "absolute",
|
||||
bottom: this.state.fileNames ? 52 + TAG_HEIGHT : 52,
|
||||
right: "calc(50% + 28px)",
|
||||
}
|
||||
: this.state.tooltip === `${i}-download`
|
||||
? {
|
||||
position: "absolute",
|
||||
bottom: this.state.fileNames ? 52 + TAG_HEIGHT : 52,
|
||||
right: "calc(50% - 12px)",
|
||||
}
|
||||
: {
|
||||
position: "absolute",
|
||||
bottom: this.state.fileNames ? 52 + TAG_HEIGHT : 52,
|
||||
right: "calc(50% - 52px)",
|
||||
color: Constants.system.red,
|
||||
}
|
||||
: this.state.tooltip === `${i}-download`
|
||||
? {
|
||||
position: "absolute",
|
||||
bottom: this.state.fileNames ? 52 + TAG_HEIGHT : 52,
|
||||
right: "calc(50% - 12px)",
|
||||
}
|
||||
: {
|
||||
position: "absolute",
|
||||
bottom: this.state.fileNames ? 52 + TAG_HEIGHT : 52,
|
||||
right: "calc(50% - 52px)",
|
||||
color: Constants.system.red,
|
||||
}
|
||||
}
|
||||
>
|
||||
{this.state.tooltip === `${i}-remove`
|
||||
? "Remove from slate"
|
||||
: this.state.tooltip === `${i}-view`
|
||||
? "View file"
|
||||
: this.state.tooltip === `${i}-download`
|
||||
? "Download"
|
||||
: "Delete file"}
|
||||
? "View file"
|
||||
: this.state.tooltip === `${i}-download`
|
||||
? "Download"
|
||||
: "Delete file"}
|
||||
</Tooltip>
|
||||
) : null}
|
||||
<div
|
||||
@ -1524,9 +1513,9 @@ export class SlateLayout extends React.Component {
|
||||
onClick={
|
||||
this.state.items[i].ownerId === this.props.viewer.id
|
||||
? (e) => {
|
||||
this._handleDeleteFiles(e, i);
|
||||
}
|
||||
: () => {}
|
||||
this._handleDeleteFiles(e, i);
|
||||
}
|
||||
: () => { }
|
||||
}
|
||||
style={{
|
||||
cursor:
|
||||
@ -1555,38 +1544,38 @@ export class SlateLayout extends React.Component {
|
||||
style={
|
||||
this.state.tooltip === `${i}-add`
|
||||
? {
|
||||
position: "absolute",
|
||||
top: 36,
|
||||
right: 8,
|
||||
}
|
||||
position: "absolute",
|
||||
top: 36,
|
||||
right: 8,
|
||||
}
|
||||
: this.state.tooltip === `${i}-copy`
|
||||
? {
|
||||
? {
|
||||
position: "absolute",
|
||||
bottom: this.state.fileNames ? 52 + TAG_HEIGHT : 52,
|
||||
right: "calc(50% + 28px)",
|
||||
}
|
||||
: this.state.tooltip === `${i}-download`
|
||||
? {
|
||||
position: "absolute",
|
||||
bottom: this.state.fileNames ? 52 + TAG_HEIGHT : 52,
|
||||
right: "calc(50% - 12px)",
|
||||
}
|
||||
: {
|
||||
position: "absolute",
|
||||
bottom: this.state.fileNames ? 52 + TAG_HEIGHT : 52,
|
||||
right: "calc(50% - 52px)",
|
||||
}
|
||||
: this.state.tooltip === `${i}-download`
|
||||
? {
|
||||
position: "absolute",
|
||||
bottom: this.state.fileNames ? 52 + TAG_HEIGHT : 52,
|
||||
right: "calc(50% - 12px)",
|
||||
}
|
||||
: {
|
||||
position: "absolute",
|
||||
bottom: this.state.fileNames ? 52 + TAG_HEIGHT : 52,
|
||||
right: "calc(50% - 52px)",
|
||||
}
|
||||
}
|
||||
>
|
||||
{this.state.tooltip === `${i}-add`
|
||||
? "Add to slate"
|
||||
: this.state.tooltip === `${i}-copy`
|
||||
? "Copy link"
|
||||
: this.state.tooltip === `${i}-download`
|
||||
? "Download"
|
||||
: this.state.tooltip === `${i}-preview`
|
||||
? "Make preview image"
|
||||
: "Save copy"}
|
||||
? "Copy link"
|
||||
: this.state.tooltip === `${i}-download`
|
||||
? "Download"
|
||||
: this.state.tooltip === `${i}-preview`
|
||||
? "Make preview image"
|
||||
: "Save copy"}
|
||||
</Tooltip>
|
||||
) : null}
|
||||
<div
|
||||
@ -1598,8 +1587,8 @@ export class SlateLayout extends React.Component {
|
||||
this.props.external
|
||||
? this._handleLoginModal
|
||||
: (e) => {
|
||||
this._handleAddToSlate(e, i);
|
||||
}
|
||||
this._handleAddToSlate(e, i);
|
||||
}
|
||||
}
|
||||
style={{
|
||||
position: "absolute",
|
||||
@ -1658,8 +1647,8 @@ export class SlateLayout extends React.Component {
|
||||
this.props.external
|
||||
? this._handleLoginModal
|
||||
: (e) => {
|
||||
this._handleDownload(e, i);
|
||||
}
|
||||
this._handleDownload(e, i);
|
||||
}
|
||||
}
|
||||
>
|
||||
<SVG.Download height="16px" />
|
||||
@ -1678,30 +1667,30 @@ export class SlateLayout extends React.Component {
|
||||
Validations.isPreviewableImage(this.state.items[i].type) &&
|
||||
this.state.items[i].size &&
|
||||
this.state.items[i].size < SIZE_LIMIT
|
||||
? (e) => this._handleSetPreview(e, i)
|
||||
: () => {}
|
||||
? (e) => this._handleSetPreview(e, i)
|
||||
: () => { }
|
||||
}
|
||||
style={
|
||||
this.props.preview === this.state.items[i].url
|
||||
? {
|
||||
backgroundColor: "rgba(0, 97, 187, 0.75)",
|
||||
}
|
||||
backgroundColor: "rgba(0, 97, 187, 0.75)",
|
||||
}
|
||||
: this.state.items[i].type &&
|
||||
Validations.isPreviewableImage(this.state.items[i].type) &&
|
||||
this.state.items[i].size &&
|
||||
this.state.items[i].size < SIZE_LIMIT
|
||||
? {}
|
||||
: {
|
||||
? {}
|
||||
: {
|
||||
color: "#999999",
|
||||
cursor: "not-allowed",
|
||||
}
|
||||
}
|
||||
>
|
||||
{this.props.preview ===
|
||||
this.state.items[i].url.replace(
|
||||
"https://undefined",
|
||||
"https://"
|
||||
) ? (
|
||||
this.state.items[i].url.replace(
|
||||
"https://undefined",
|
||||
"https://"
|
||||
) ? (
|
||||
<SVG.DesktopEye
|
||||
height="16px"
|
||||
style={{
|
||||
|
||||
@ -8,6 +8,7 @@ export const getServerSideProps = async ({ query }) => {
|
||||
viewer: query.viewer,
|
||||
analytics: query.analytics,
|
||||
mobile: query.mobile,
|
||||
mac: query.mac,
|
||||
resources: query.resources,
|
||||
},
|
||||
};
|
||||
@ -20,6 +21,7 @@ export default class ApplicationPage extends React.Component {
|
||||
viewer={this.props.viewer}
|
||||
analytics={this.props.analytics}
|
||||
mobile={this.props.mobile}
|
||||
mac={this.props.mac}
|
||||
resources={this.props.resources}
|
||||
/>
|
||||
);
|
||||
|
||||
@ -318,9 +318,9 @@ export default class SceneFilesFolder extends React.Component {
|
||||
style={{ position: "relative" }}
|
||||
css={STYLES_COMMAND_WRAPPER}
|
||||
>
|
||||
<SVG.MacCommand
|
||||
<SVG.Information
|
||||
height="18px"
|
||||
style={{ marginRight: "18px", color: Constants.system.darkGray }}
|
||||
style={{ marginRight: "18px", color: Constants.system.black }}
|
||||
onMouseEnter={() => this.setState({ keyboardTooltip: true })}
|
||||
/>
|
||||
</div>
|
||||
@ -330,7 +330,7 @@ export default class SceneFilesFolder extends React.Component {
|
||||
css={STYLES_COMMAND_WRAPPER}
|
||||
onMouseLeave={() => this.setState({ keyboardTooltip: false })}
|
||||
>
|
||||
<SVG.MacCommand
|
||||
<SVG.Information
|
||||
height="18px"
|
||||
style={{
|
||||
marginRight: "18px",
|
||||
@ -344,8 +344,9 @@ export default class SceneFilesFolder extends React.Component {
|
||||
css={STYLES_TOOLTIP_TEXT}
|
||||
style={{
|
||||
fontFamily: Constants.font.semiBold,
|
||||
fontSize: "14px",
|
||||
paddingTop: "12px",
|
||||
fontSize: 14,
|
||||
paddingTop: 12,
|
||||
paddingBottom: 4,
|
||||
}}
|
||||
>
|
||||
Keyboard shortcuts
|
||||
@ -364,7 +365,7 @@ export default class SceneFilesFolder extends React.Component {
|
||||
</p>
|
||||
</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 }}>
|
||||
deselect items by draging over them
|
||||
</p>
|
||||
|
||||
@ -218,7 +218,7 @@ class SlatePage extends React.Component {
|
||||
page: { cid },
|
||||
} = this.props;
|
||||
|
||||
/* NOTE(daniel): If user was redirected to this page, the cid of the slate object will exist in the page props.
|
||||
/* NOTE(daniel): If user was redirected to this page, the cid of the slate object will exist in the page props.
|
||||
We'll use the cid to open the global carousel */
|
||||
if (Strings.isEmpty(cid)) {
|
||||
return;
|
||||
|
||||
12
server.js
12
server.js
@ -153,6 +153,7 @@ app.prepare().then(async () => {
|
||||
|
||||
server.get("/_", async (req, res) => {
|
||||
let mobile = Window.isMobileBrowser(req.headers["user-agent"]);
|
||||
let mac = Window.isMac(req.headers["user-agent"]);
|
||||
|
||||
const isBucketsAvailable = await Utilities.checkTextile();
|
||||
|
||||
@ -174,6 +175,7 @@ app.prepare().then(async () => {
|
||||
viewer,
|
||||
analytics,
|
||||
mobile,
|
||||
mac,
|
||||
resources: EXTERNAL_RESOURCES,
|
||||
});
|
||||
});
|
||||
@ -242,6 +244,7 @@ app.prepare().then(async () => {
|
||||
|
||||
server.get("/[$]/:id", async (req, res) => {
|
||||
let mobile = Window.isMobileBrowser(req.headers["user-agent"]);
|
||||
let mac = Window.isMac(req.headers["user-agent"]);
|
||||
|
||||
const slate = await Data.getSlateById({
|
||||
id: req.params.id,
|
||||
@ -283,12 +286,14 @@ app.prepare().then(async () => {
|
||||
creator: Serializers.user(creator),
|
||||
slate,
|
||||
mobile,
|
||||
mac,
|
||||
resources: EXTERNAL_RESOURCES,
|
||||
});
|
||||
});
|
||||
|
||||
server.get("/:username", async (req, res) => {
|
||||
let mobile = Window.isMobileBrowser(req.headers["user-agent"]);
|
||||
let mac = Window.isMac(req.headers["user-agent"]);
|
||||
|
||||
// TODO(jim): Temporary workaround
|
||||
if (!Validations.userRoute(req.params.username)) {
|
||||
@ -356,6 +361,7 @@ app.prepare().then(async () => {
|
||||
viewer,
|
||||
creator,
|
||||
mobile,
|
||||
mac,
|
||||
resources: EXTERNAL_RESOURCES,
|
||||
exploreSlates,
|
||||
});
|
||||
@ -363,6 +369,7 @@ app.prepare().then(async () => {
|
||||
|
||||
server.get("/:username/cid::cid", async (req, res) => {
|
||||
let mobile = Window.isMobileBrowser(req.headers["user-agent"]);
|
||||
let mac = Window.isMac(req.headers["user-agent"]);
|
||||
|
||||
// TODO(jim): Temporary workaround
|
||||
if (!Validations.userRoute(req.params.username)) {
|
||||
@ -428,6 +435,7 @@ app.prepare().then(async () => {
|
||||
viewer,
|
||||
creator: Serializers.user(creator),
|
||||
mobile,
|
||||
mac,
|
||||
resources: EXTERNAL_RESOURCES,
|
||||
cid: req.params.cid,
|
||||
});
|
||||
@ -435,6 +443,7 @@ app.prepare().then(async () => {
|
||||
|
||||
server.get("/:username/:slatename", async (req, res) => {
|
||||
let mobile = Window.isMobileBrowser(req.headers["user-agent"]);
|
||||
let mac = Window.isMac(req.headers["user-agent"]);
|
||||
|
||||
// TODO(jim): Temporary workaround
|
||||
if (!Validations.userRoute(req.params.username)) {
|
||||
@ -499,12 +508,14 @@ app.prepare().then(async () => {
|
||||
creator: Serializers.user(creator),
|
||||
slate,
|
||||
mobile,
|
||||
mac,
|
||||
resources: EXTERNAL_RESOURCES,
|
||||
});
|
||||
});
|
||||
|
||||
server.get("/:username/:slatename/cid::cid", async (req, res) => {
|
||||
let mobile = Window.isMobileBrowser(req.headers["user-agent"]);
|
||||
let mac = Window.isMac(req.headers["user-agent"]);
|
||||
|
||||
// TODO(jim): Temporary workaround
|
||||
if (!Validations.userRoute(req.params.username)) {
|
||||
@ -568,6 +579,7 @@ app.prepare().then(async () => {
|
||||
creator: Serializers.user(creator),
|
||||
slate,
|
||||
mobile,
|
||||
mac,
|
||||
resources: EXTERNAL_RESOURCES,
|
||||
cid: req.params.cid,
|
||||
});
|
||||
|
||||
Loading…
Reference in New Issue
Block a user