misc style improvements

2024-12-23 17:12:53 +03:00 · 2020-12-17 18:59:41 -08:00 · 2020-12-17 18:59:41 -08:00 · 1d23410c9c
commit 1d23410c9c
parent 52506432b3
12 changed files with 184 additions and 109 deletions
--- a/common/navigation-data.js
+++ b/common/navigation-data.js
@ -75,6 +75,14 @@ export const generate = ({ library = [], slates = [] }) => [
    children: null,
    ignore: true,
  },
+  {
+    id: "V1_NAVIGATION_SLATES_FOLLOWING",
+    decorator: "SLATES_FOLLOWING",
+    name: "Slates",
+    pageTitle: "Slates",
+    children: null,
+    ignore: true,
+  },
  {
    id: "V1_NAVIGATION_DIRECTORY",
    decorator: "DIRECTORY",
@ -82,6 +90,14 @@ export const generate = ({ library = [], slates = [] }) => [
    pageTitle: "Your directory",
    children: null,
  },
+  {
+    id: "V1_NAVIGATION_DIRECTORY_FOLLOWERS",
+    decorator: "DIRECTORY_FOLLOWERS",
+    name: "Directory",
+    pageTitle: "Your directory",
+    children: null,
+    ignore: true,
+  },
  {
    id: "V1_NAVIGATION_SLATE",
    decorator: "PUBLIC_SLATE",
--- a/common/svg.js
+++ b/common/svg.js
@ -1637,7 +1637,7 @@ export const Filter = (props) => (
  </svg>
 );

-export const Menu = (props) => (
+export const MenuAlt = (props) => (
  <svg
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 24 24"
@ -1659,6 +1659,20 @@ export const Menu = (props) => (
  </svg>
 );

+export const Menu = (props) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    {...props}
+  >
+    <path d="M4 8H8V4H4V8ZM10 20H14V16H10V20ZM4 20H8V16H4V20ZM4 14H8V10H4V14ZM10 14H14V10H10V14ZM16 4V8H20V4H16ZM10 8H14V4H10V8ZM16 14H20V10H16V14ZM16 20H20V16H16V20Z" />
+  </svg>
+);
+
 export const Globe = (props) => (
  <svg
    xmlns="http://www.w3.org/2000/svg"
--- a/components/core/Application.js
+++ b/components/core/Application.js
@ -85,9 +85,11 @@ const SCENES = {
  SLATE: <SceneSlate />,
  SETTINGS_DEVELOPER: <SceneSettingsDeveloper />,
  EDIT_ACCOUNT: <SceneEditAccount />,
-  SLATES: <SceneSlates />,
+  SLATES: <SceneSlates tab={0} />,
+  SLATES_FOLLOWING: <SceneSlates tab={1} />,
  LOCAL_DATA: <SceneLocalData />,
-  DIRECTORY: <SceneDirectory />,
+  DIRECTORY: <SceneDirectory tab={0} />,
+  DIRECTORY_FOLLOWERS: <SceneDirectory tab={1} />,
  FILECOIN: <SceneArchive />,
  MAKE_DEAL: <SceneMakeFilecoinDeal />,
 };
--- a/components/core/ApplicationHeader.js
+++ b/components/core/ApplicationHeader.js
@ -232,7 +232,7 @@ export default class ApplicationHeader extends React.Component {
              </Boundary>
            ) : null}
          </span>
-          <span css={STYLES_MOBILE_HIDDEN} style={{ marginLeft: 60 }}>
+          <span css={STYLES_MOBILE_HIDDEN} style={{ marginLeft: 32 }}>
            <span
              css={STYLES_ICON_ELEMENT}
              style={
--- a/components/core/CircleButtonGray.js
+++ b/components/core/CircleButtonGray.js
@ -7,8 +7,8 @@ const STYLES_BUTTON = css`
  background-color: ${Constants.system.white};
  color: ${Constants.system.pitchBlack};
  display: inline-flex;
-  width: 36px;
-  height: 36px;
+  width: 40px;
+  height: 40px;
  border-radius: 4px;
  background-size: cover;
  background-position: 50% 50%;
@ -18,7 +18,7 @@ const STYLES_BUTTON = css`
  cursor: pointer;
  user-select: none;
  flex-shrink: 0;
-  box-shadow: 0 0 0 1px ${Constants.system.bgGray} inset;
+  ${"" /* box-shadow: 0 0 0 1px ${Constants.system.bgGray} inset; */}

  :hover {
    background-color: rgb(253, 253, 253);
--- a/components/core/SlatePicker.js
+++ b/components/core/SlatePicker.js
@ -10,14 +10,13 @@ import { LoaderSpinner } from "~/components/system/components/Loaders";
 const STYLES_SLATE_NAME = css`
  overflow: hidden;
  text-overflow: ellipsis;
+  white-space: nowrap;
  font-family: ${Constants.font.medium};
  color: ${Constants.system.black};
 `;

 const STYLES_SLATE_NAME_DARK = css`
-  overflow: hidden;
-  text-overflow: ellipsis;
-  font-family: ${Constants.font.medium};
+  ${STYLES_SLATE_NAME}
  color: ${Constants.system.white};
 `;

@ -50,6 +49,7 @@ const STYLES_SLATE_LIST = css`
 const STYLES_SLATE_LINE = css`
  display: flex;
  align-items: center;
+  justify-content: space-between;
  width: 100%;
  padding: 12px 16px;
  background-color: ${Constants.system.white};
@ -139,34 +139,49 @@ export class SlatePicker extends React.Component {
                  css={this.props.dark ? STYLES_SLATE_LINE_DARK : STYLES_SLATE_LINE}
                  onClick={() => this.props.onAdd(slate)}
                >
-                  <div css={STYLES_ICON_BOX}>
-                    {selected[slate.id] ? (
-                      <SVG.Slate
-                        height="24px"
-                        style={{
-                          marginRight: 8,
-                          pointerEvents: "none",
-                          color: this.props.dark ? Constants.system.white : Constants.system.black,
-                        }}
-                      />
-                    ) : (
-                      <SVG.PlusCircle
-                        height="24px"
-                        style={{
-                          marginRight: 8,
-                          pointerEvents: "none",
-                        }}
-                      />
-                    )}
-                  </div>
                  <div
-                    css={this.props.dark ? STYLES_SLATE_NAME_DARK : STYLES_SLATE_NAME}
-                    style={{
-                      color: selected[slate.id] ? this.props.selectedColor : "inherit",
-                    }}
+                    style={{ minWidth: "10%", width: "100%", display: "flex", flexWrap: "nowrap" }}
                  >
-                    {Strings.getPresentationSlateName(slate)}
+                    <div css={STYLES_ICON_BOX}>
+                      {selected[slate.id] ? (
+                        <SVG.Slate
+                          height="24px"
+                          style={{
+                            marginRight: 8,
+                            pointerEvents: "none",
+                            color: this.props.dark
+                              ? Constants.system.white
+                              : Constants.system.black,
+                          }}
+                        />
+                      ) : (
+                        <SVG.PlusCircle
+                          height="24px"
+                          style={{
+                            marginRight: 8,
+                            pointerEvents: "none",
+                          }}
+                        />
+                      )}
+                    </div>
+                    <div
+                      css={this.props.dark ? STYLES_SLATE_NAME_DARK : STYLES_SLATE_NAME}
+                      style={{
+                        color: selected[slate.id] ? this.props.selectedColor : "inherit",
+                      }}
+                    >
+                      {Strings.getPresentationSlateName(slate)}
+                    </div>
                  </div>
+                  {slate.data.public ? (
+                    <div style={{ flexShrink: 0, marginLeft: 16 }}>
+                      <SVG.Globe height="24px" />
+                    </div>
+                  ) : (
+                    <div style={{ flexShrink: 0, marginLeft: 16 }}>
+                      <SVG.SecurityLock height="24px" />
+                    </div>
+                  )}
                </div>
              ))}
            </div>
--- a/components/core/SlatePreviewBlock.js
+++ b/components/core/SlatePreviewBlock.js
@ -429,31 +429,14 @@ export class SlatePreviewBlock extends React.Component {
          <React.Fragment>
            <div css={STYLES_TITLE_LINE}>
              <div css={STYLES_TITLE}>{this.props.slate.data.name}</div>
-              {this.props.isOwner ? (
-                this.props.slate.data.public ? (
-                  <div
-                    css={STYLES_TAG}
-                    style={{
-                      borderColor: Constants.system.brand,
-                      color: Constants.system.brand,
-                    }}
-                  >
-                    Public
-                  </div>
-                ) : (
-                  <div
-                    css={STYLES_TAG}
-                    style={{
-                      color: Constants.system.darkGray,
-                      borderColor: Constants.system.darkGray,
-                    }}
-                  >
-                    Private
-                  </div>
-                )
-              ) : (
-                <div style={{ height: 32 }} />
-              )}
+              <div style={{ height: "18px" }}>
+                {this.props.isOwner && !this.props.slate.data.public ? (
+                  <SVG.SecurityLock
+                    height="18px"
+                    style={{ color: Constants.system.grayBlack, marginRight: 24 }}
+                  />
+                ) : null}
+              </div>
              {this.props.username ? (
                <div
                  style={{ marginLeft: "auto" }}
@ -471,13 +454,15 @@ export class SlatePreviewBlock extends React.Component {
              ) : null}
            </div>
            <span css={STYLES_MOBILE_HIDDEN}>
-              {this.props.slate.data.body ? (
-                <div css={STYLES_BODY}>{this.props.slate.data.body}</div>
-              ) : this.props.isOwner ? (
-                <div style={{ height: "44px" }} />
-              ) : (
-                <div style={{ height: "40px" }} />
-              )}
+              <div style={{ height: "44px" }}>
+                {this.props.slate.data.body ? (
+                  <div css={STYLES_BODY}>{this.props.slate.data.body}</div>
+                ) : this.props.isOwner ? (
+                  <div style={{ height: "44px" }} />
+                ) : (
+                  <div style={{ height: "40px" }} />
+                )}
+              </div>
              <div
                style={{
                  width: "100%",
@ -624,3 +609,25 @@ export default class SlatePreviewBlocks extends React.Component {
    );
  }
 }
+
+// this.props.slate.data.public ? (
+//                   <div
+//                     css={STYLES_TAG}
+//                     style={{
+//                       borderColor: Constants.system.brand,
+//                       color: Constants.system.brand,
+//                     }}
+//                   >
+//                     Public
+//                   </div>
+//                 ) : (
+//                   <div
+//                     css={STYLES_TAG}
+//                     style={{
+//                       color: Constants.system.darkGray,
+//                       borderColor: Constants.system.darkGray,
+//                     }}
+//                   >
+//                     Private
+//                   </div>
+//                 )
--- a/components/sidebars/SidebarSingleSlateSettings.js
+++ b/components/sidebars/SidebarSingleSlateSettings.js
@ -91,27 +91,31 @@ export default class SidebarSingleSlateSettings extends React.Component {
  };

  _handleDelete = async (e) => {
-    this.setState({ loading: true });
+    // this.setState({ loading: true });

    if (
      !window.confirm("Are you sure you want to delete this Slate? This action is irreversible.")
    ) {
-      return this.setState({ loading: false });
+      return;
+      // return this.setState({ loading: false });
    }

+    let slates = this.props.viewer.slates.filter((slate) => slate.id !== this.props.current.id);
+    this.props.onUpdateViewer({ slates });
+
+    this.props.onAction({
+      type: "NAVIGATE",
+      value: "V1_NAVIGATION_SLATES",
+    });
+
    const response = await Actions.deleteSlate({
      id: this.props.current.id,
    });

    if (Events.hasError(response)) {
-      this.setState({ loading: false });
+      // this.setState({ loading: false });
      return;
    }
-
-    await this.props.onAction({
-      type: "NAVIGATE",
-      value: "V1_NAVIGATION_SLATES",
-    });
  };

  render() {
--- a/components/system/components/GlobalCarousel.js
+++ b/components/system/components/GlobalCarousel.js
@ -79,7 +79,7 @@ const STYLES_EXPANDER = css`
  position: absolute;
  padding: 4px;
  top: 16px;
-  right: 16px;
+  left: 16px;
  cursor: pointer;

  :hover {
@ -95,12 +95,12 @@ const STYLES_DISMISS_BOX = css`
  cursor: pointer;

  :hover {
-    color: ${Constants.system.black};
+    color: ${Constants.system.white};
  }

-  @media (min-width: ${Constants.sizes.mobile}px) {
+  ${"" /* @media (min-width: ${Constants.sizes.mobile}px) {
    display: none;
-  }
+  } */}
 `;

 const STYLES_MOBILE_HIDDEN = css`
@ -366,20 +366,27 @@ export class GlobalCarousel extends React.Component {
          </span>
          {slide}
          <span css={STYLES_MOBILE_HIDDEN}>
-            <div
-              css={STYLES_EXPANDER}
-              onClick={() => this.setState({ showSidebar: !this.state.showSidebar })}
-            >
-              {this.state.showSidebar ? (
+            {this.state.showSidebar ? (
+              <div
+                css={STYLES_EXPANDER}
+                onClick={() => this.setState({ showSidebar: !this.state.showSidebar })}
+              >
                <SVG.Maximize height="24px" />
-              ) : (
-                <SVG.Minimize height="24px" />
-              )}
-            </div>
+              </div>
+            ) : (
+              <div style={{ display: "flex", flexDirection: "row" }}>
+                <div
+                  css={STYLES_EXPANDER}
+                  onClick={() => this.setState({ showSidebar: !this.state.showSidebar })}
+                >
+                  <SVG.Minimize height="24px" />
+                </div>
+                <div css={STYLES_DISMISS_BOX} onClick={this._handleClose}>
+                  <SVG.Dismiss height="24px" />
+                </div>
+              </div>
+            )}
          </span>
-          <div css={STYLES_DISMISS_BOX} onClick={this._handleClose}>
-            <SVG.Dismiss height="24px" />
-          </div>
        </div>
        <span css={STYLES_MOBILE_HIDDEN}>
          {this.state.carouselType === "data" ? (
--- a/scenes/SceneDirectory.js
+++ b/scenes/SceneDirectory.js
@ -138,7 +138,6 @@ export default class SceneDirectory extends React.Component {

  state = {
    copyValue: "",
-    tab: 0,
    contextMenu: null,
  };

@ -476,10 +475,16 @@ export default class SceneDirectory extends React.Component {
        <ScenePageHeader title="Directory" />
        <SecondaryTabGroup
          tabs={["Following", "Followers"]}
-          value={this.state.tab}
-          onChange={(value) => this.setState({ tab: value })}
+          value={this.props.tab}
+          onChange={(value) => {
+            if (value === 0) {
+              this.props.onAction({ type: "NAVIGATE", value: "V1_NAVIGATION_DIRECTORY" });
+            } else {
+              this.props.onAction({ type: "NAVIGATE", value: "V1_NAVIGATION_DIRECTORY_FOLLOWERS" });
+            }
+          }}
        />
-        {/* {this.state.tab === 0 ? (
+        {/* {this.props.tab === 0 ? (
          requests && requests.length ? (
            requests
          ) : (
@ -489,7 +494,7 @@ export default class SceneDirectory extends React.Component {
            </EmptyState>
          )
        ) : null}
-        {this.state.tab === 1 ? (
+        {this.props.tab === 1 ? (
          trusted && trusted.length ? (
            trusted
          ) : (
@ -499,7 +504,7 @@ export default class SceneDirectory extends React.Component {
            </EmptyState>
          )
        ) : null} */}
-        {this.state.tab === 0 ? (
+        {this.props.tab === 0 ? (
          following && following.length ? (
            following
          ) : (
@ -509,7 +514,7 @@ export default class SceneDirectory extends React.Component {
            </EmptyState>
          )
        ) : null}
-        {this.state.tab === 1 ? (
+        {this.props.tab === 1 ? (
          followers && followers.length ? (
            followers
          ) : (
--- a/scenes/SceneSlate.js
+++ b/scenes/SceneSlate.js
@ -240,9 +240,9 @@ export default class SceneSlate extends React.Component {
      <div style={{ display: `flex` }}>
        <div onClick={this._handleFollow}>
          {this.state.isFollowing ? (
-            <ButtonSecondary style={{ minHeight: 36 }}>Unfollow</ButtonSecondary>
+            <ButtonSecondary>Unfollow</ButtonSecondary>
          ) : (
-            <ButtonPrimary style={{ minHeight: 36 }}>Follow</ButtonPrimary>
+            <ButtonPrimary>Follow</ButtonPrimary>
          )}
        </div>
        <CircleButtonGray
--- a/scenes/SceneSlates.js
+++ b/scenes/SceneSlates.js
@ -15,10 +15,6 @@ import EmptyState from "~/components/core/EmptyState";

 // TODO(jim): Slates design.
 export default class SceneSlates extends React.Component {
-  state = {
-    tab: 0,
-  };
-
  _handleAdd = () => {
    this.props.onAction({
      name: "Create slate",
@ -60,8 +56,17 @@ export default class SceneSlates extends React.Component {
          actions={
            <SecondaryTabGroup
              tabs={["My Slates", "Following"]}
-              value={this.state.tab}
-              onChange={(value) => this.setState({ tab: value })}
+              value={this.props.tab}
+              onChange={(value) => {
+                if (value === 0) {
+                  this.props.onAction({ type: "NAVIGATE", value: "V1_NAVIGATION_SLATES" });
+                } else {
+                  this.props.onAction({
+                    type: "NAVIGATE",
+                    value: "V1_NAVIGATION_SLATES_FOLLOWING",
+                  });
+                }
+              }}
              style={{ margin: "0 0 24px 0" }}
            />
          }
@ -69,7 +74,7 @@ export default class SceneSlates extends React.Component {
        {/* <ScenePageHeader
          title="Slates"
          actions={
-            this.state.tab === 0 ? (
+            this.props.tab === 0 ? (
              <CircleButtonGray onClick={this._handleAdd} style={{ marginLeft: 12 }}>
                <SVG.Plus height="16px" />
              </CircleButtonGray>
@ -77,7 +82,7 @@ export default class SceneSlates extends React.Component {
          }
        /> */}

-        {this.state.tab === 0 ? (
+        {this.props.tab === 0 ? (
          this.props.viewer.slates && this.props.viewer.slates.length ? (
            <SlatePreviewBlocks
              isOwner
@ -98,7 +103,7 @@ export default class SceneSlates extends React.Component {
          )
        ) : null}

-        {this.state.tab === 1 ? (
+        {this.props.tab === 1 ? (
          subscriptions && subscriptions.length ? (
            <SlatePreviewBlocks
              slates={subscriptions}