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

os detection for search key modifier, cmd icon to information icon
2024-11-26 04:19:49 +03:00 · 2021-03-07 20:59:30 -08:00 · 2021-03-07 20:59:30 -08:00 · 08206d823d
commit 08206d823d
parent 7682266781 9284ea4330
8 changed files with 123 additions and 103 deletions
--- a/common/window.js
+++ b/common/window.js
@ -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;

--- a/components/core/Application.js
+++ b/components/core/Application.js
@ -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 ? (
--- a/components/core/ApplicationHeader.js
+++ b/components/core/ApplicationHeader.js
@ -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>
--- a/components/core/SlateLayout.js
+++ b/components/core/SlateLayout.js
@ -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;
@ -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,11 +1313,9 @@ 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
+                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
+                backgroundPosition: `-${(CONTAINER_SIZE / 220) * this.state.unit}px -${(CONTAINER_SIZE / 220) * this.state.unit
                  }px`,
              }}
              ref={(c) => {
--- a/pages/_/index.js
+++ b/pages/_/index.js
@ -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}
      />
    );
--- a/scenes/SceneFilesFolder.js
+++ b/scenes/SceneFilesFolder.js
@ -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>
--- a/server.js
+++ b/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,
    });