added promoted switch button

src/components/editors/EditorImageUploadButton/index.tsx

@@ -1,6 +1,5 @@
 import React, { FC } from 'react';
 import { EditorUploadButton } from '~/components/editors/EditorUploadButton';
-import { INode } from '~/redux/types';
 import { UPLOAD_TYPES } from '~/redux/uploads/constants';
 import { IEditorComponentProps } from '~/redux/node/types';
 

src/components/editors/EditorPanel/styles.module.scss

@@ -13,11 +13,12 @@
   flex-direction: row;
 
   & > * {
-    margin: 0 $gap;
+    margin: 0 $gap / 2;
 
     &:first-child {
       margin-left: 0;
     }
+
     &:last-child {
       margin-right: 0;
     }

src/components/editors/EditorPublicSwitch/index.tsx

@@ -0,0 +1,49 @@
+import React, { FC, useCallback, useEffect, useRef } from 'react';
+import styles from './styles.module.scss';
+import { Icon } from '~/components/input/Icon';
+import { IEditorComponentProps } from '~/redux/node/types';
+import classNames from 'classnames';
+import { usePopper } from 'react-popper';
+
+interface IProps extends IEditorComponentProps {}
+
+const EditorPublicSwitch: FC<IProps> = ({ data, setData }) => {
+  const tooltip = useRef<HTMLDivElement>(null);
+  const onChange = useCallback(() => setData({ ...data, is_promoted: !data.is_promoted }), [
+    data,
+    setData,
+  ]);
+
+  const pop = usePopper(tooltip?.current?.parentElement, tooltip.current, {
+    placement: 'bottom',
+    modifiers: [
+      {
+        name: 'offset',
+        options: {
+          offset: [0, 4],
+        },
+      },
+    ],
+  });
+
+  useEffect(() => console.log(pop), [pop]);
+
+  return (
+    <div
+      className={classNames(styles.wrap, { [styles.promoted]: data.is_promoted })}
+      onClick={onChange}
+    >
+      <div className={styles.tooltip} ref={tooltip}>
+        {data.is_promoted
+          ? 'Доступно всем на главной странице'
+          : 'Видно только сотрудникам в лаборатории'}
+      </div>
+
+      <div className={styles.icon}>
+        {data.is_promoted ? <Icon size={24} icon="waves" /> : <Icon size={24} icon="lab" />}
+      </div>
+    </div>
+  );
+};
+
+export { EditorPublicSwitch };

src/components/editors/EditorPublicSwitch/styles.module.scss

@@ -0,0 +1,63 @@
+@import "src/styles/variables";
+
+.wrap {
+  @include outer_shadow();
+  @include editor_round_button();
+
+  transition: all 0.5s;
+  fill: $content_bg;
+  background-color: $olive;
+
+  &.promoted {
+    background-color: lighten($content_bg, 4%);
+    fill: $red;
+  }
+
+  &:hover {
+    opacity: 1;
+
+    .tooltip {
+      opacity: 1;
+    }
+  }
+
+  input {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    opacity: 0;
+    z-index: 1;
+    cursor: pointer;
+  }
+}
+
+.icon {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.tooltip {
+  border-radius: 2px;
+  background: darken($content_bg, 6%);
+  padding: $gap;
+  position: absolute;
+  font: $font_12_semibold;
+  bottom: 100%;
+  right: 0;
+  transform: translate(0, -$gap);
+  text-align: center;
+  touch-action: none;
+  pointer-events: none;
+  opacity: 0;
+  width: 100px;
+  user-select: none;
+  transition: all 0.1s;
+}

src/components/editors/EditorUploadButton/index.tsx

@@ -1,15 +1,15 @@
 import React, { FC, useCallback, useEffect } from 'react';
 import styles from './styles.module.scss';
 import { Icon } from '~/components/input/Icon';
-import { IFileWithUUID, INode, IFile } from '~/redux/types';
+import { IFile, IFileWithUUID } from '~/redux/types';
 import uuid from 'uuid4';
 import { UPLOAD_SUBJECTS, UPLOAD_TARGETS, UPLOAD_TYPES } from '~/redux/uploads/constants';
 import * as UPLOAD_ACTIONS from '~/redux/uploads/actions';
-import { assocPath } from 'ramda';
-import { append } from 'ramda';
+import { append, assocPath } from 'ramda';
 import { selectUploads } from '~/redux/uploads/selectors';
 import { connect } from 'react-redux';
 import { NODE_SETTINGS } from '~/redux/node/constants';
+import { IEditorComponentProps } from '~/redux/node/types';
 
 const mapStateToProps = state => {
   const { statuses, files } = selectUploads(state);
@@ -22,12 +22,7 @@ const mapDispatchToProps = {
 };
 
 type IProps = ReturnType<typeof mapStateToProps> &
-  typeof mapDispatchToProps & {
-    data: INode;
-    setData: (val: INode) => void;
-    temp: string[];
-    setTemp: (val: string[]) => void;
-
+  typeof mapDispatchToProps & IEditorComponentProps & {
     accept?: string;
     icon?: string;
     type?: typeof UPLOAD_TYPES[keyof typeof UPLOAD_TYPES];
@@ -79,18 +74,6 @@ const EditorUploadButtonUnconnected: FC<IProps> = ({
     [data, setData]
   );
 
-  // const onDrop = useCallback(
-  //   (event: React.DragEvent<HTMLDivElement>) => {
-  //     event.preventDefault();
-
-  //     if (!event.dataTransfer || !event.dataTransfer.files || !event.dataTransfer.files.length)
-  //       return;
-
-  //     onUpload(Array.from(event.dataTransfer.files));
-  //   },
-  //   [onUpload]
-  // );
-
   useEffect(() => {
     window.addEventListener('dragover', eventPreventer, false);
     window.addEventListener('drop', eventPreventer, false);

src/components/editors/EditorUploadButton/styles.module.scss

@@ -2,17 +2,10 @@
 
 .wrap {
   @include outer_shadow();
+  @include editor_round_button();
 
-  width: $upload_button_height;
-  height: $upload_button_height;
-  border-radius: ($upload_button_height / 2) !important;
-  position: relative;
-  border-radius: $radius;
-  cursor: pointer;
-  // opacity: 0.7;
   transition: opacity 0.5s;
   background: $red_gradient;
-  // box-shadow: $content_bg 0 0 5px 10px;
 
   &:hover {
     opacity: 1;

src/redux/node/constants.ts

@@ -15,6 +15,7 @@ import { EditorUploadCoverButton } from '~/components/editors/EditorUploadCoverB
 import { modalShowPhotoswipe } from '../modal/actions';
 import { IEditorComponentProps } from '~/redux/node/types';
 import { EditorFiller } from '~/components/editors/EditorFiller';
+import { EditorPublicSwitch } from '~/components/editors/EditorPublicSwitch';
 
 const prefix = 'NODE.';
 export const NODE_ACTIONS = {
@@ -63,6 +64,8 @@ export const EMPTY_NODE: INode = {
 
   blocks: [],
   tags: [],
+  is_public: true,
+  is_promoted: true,
 
   flow: {
     display: 'single',
@@ -120,14 +123,20 @@ export const NODE_EDITORS = {
 };
 
 export const NODE_PANEL_COMPONENTS: Record<string, FC<IEditorComponentProps>[]> = {
-  [NODE_TYPES.TEXT]: [EditorFiller, EditorUploadCoverButton],
-  [NODE_TYPES.VIDEO]: [EditorFiller, EditorUploadCoverButton],
-  [NODE_TYPES.IMAGE]: [EditorImageUploadButton, EditorFiller, EditorUploadCoverButton],
+  [NODE_TYPES.TEXT]: [EditorFiller, EditorUploadCoverButton, EditorPublicSwitch],
+  [NODE_TYPES.VIDEO]: [EditorFiller, EditorUploadCoverButton, EditorPublicSwitch],
+  [NODE_TYPES.IMAGE]: [
+    EditorImageUploadButton,
+    EditorFiller,
+    EditorUploadCoverButton,
+    EditorPublicSwitch,
+  ],
   [NODE_TYPES.AUDIO]: [
     EditorAudioUploadButton,
     EditorImageUploadButton,
     EditorFiller,
     EditorUploadCoverButton,
+    EditorPublicSwitch,
   ],
 };
 

src/redux/types.ts

@@ -124,6 +124,8 @@ export interface INode {
   description?: string;
   is_liked?: boolean;
   is_heroic?: boolean;
+  is_promoted?: boolean;
+  is_public?: boolean;
   like_count?: number;
 
   flow: {

src/sprites/Sprites.tsx

@@ -235,6 +235,16 @@ const Sprites: FC<{}> = () => (
       <path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z" />
     </g>
 
+    <g id="waves" stroke="none">
+      <path fill="none" d="M0 0h24v24H0V0z" />
+      <path d="M17 16.99c-1.35 0-2.2.42-2.95.8-.65.33-1.18.6-2.05.6-.9 0-1.4-.25-2.05-.6-.75-.38-1.57-.8-2.95-.8s-2.2.42-2.95.8c-.65.33-1.17.6-2.05.6v1.95c1.35 0 2.2-.42 2.95-.8.65-.33 1.17-.6 2.05-.6s1.4.25 2.05.6c.75.38 1.57.8 2.95.8s2.2-.42 2.95-.8c.65-.33 1.18-.6 2.05-.6.9 0 1.4.25 2.05.6.75.38 1.58.8 2.95.8v-1.95c-.9 0-1.4-.25-2.05-.6-.75-.38-1.6-.8-2.95-.8zm0-4.45c-1.35 0-2.2.43-2.95.8-.65.32-1.18.6-2.05.6-.9 0-1.4-.25-2.05-.6-.75-.38-1.57-.8-2.95-.8s-2.2.43-2.95.8c-.65.32-1.17.6-2.05.6v1.95c1.35 0 2.2-.43 2.95-.8.65-.35 1.15-.6 2.05-.6s1.4.25 2.05.6c.75.38 1.57.8 2.95.8s2.2-.43 2.95-.8c.65-.35 1.15-.6 2.05-.6s1.4.25 2.05.6c.75.38 1.58.8 2.95.8v-1.95c-.9 0-1.4-.25-2.05-.6-.75-.38-1.6-.8-2.95-.8zm2.95-8.08c-.75-.38-1.58-.8-2.95-.8s-2.2.42-2.95.8c-.65.32-1.18.6-2.05.6-.9 0-1.4-.25-2.05-.6-.75-.37-1.57-.8-2.95-.8s-2.2.42-2.95.8c-.65.33-1.17.6-2.05.6v1.93c1.35 0 2.2-.43 2.95-.8.65-.33 1.17-.6 2.05-.6s1.4.25 2.05.6c.75.38 1.57.8 2.95.8s2.2-.43 2.95-.8c.65-.32 1.18-.6 2.05-.6.9 0 1.4.25 2.05.6.75.38 1.58.8 2.95.8V5.04c-.9 0-1.4-.25-2.05-.58zM17 8.09c-1.35 0-2.2.43-2.95.8-.65.35-1.15.6-2.05.6s-1.4-.25-2.05-.6c-.75-.38-1.57-.8-2.95-.8s-2.2.43-2.95.8c-.65.35-1.15.6-2.05.6v1.95c1.35 0 2.2-.43 2.95-.8.65-.32 1.18-.6 2.05-.6s1.4.25 2.05.6c.75.38 1.57.8 2.95.8s2.2-.43 2.95-.8c.65-.32 1.18-.6 2.05-.6.9 0 1.4.25 2.05.6.75.38 1.58.8 2.95.8V9.49c-.9 0-1.4-.25-2.05-.6-.75-.38-1.6-.8-2.95-.8z"/>
+    </g>
+
+    <g id="lab" stroke="none">
+      <path fill="none" d="M0 0h24v24H0V0z" />
+      <path d="M13,11.33L18,18H6l5-6.67V6h2 M15.96,4H8.04C7.62,4,7.39,4.48,7.65,4.81L9,6.5v4.17L3.2,18.4C2.71,19.06,3.18,20,4,20h16 c0.82,0,1.29-0.94,0.8-1.6L15,10.67V6.5l1.35-1.69C16.61,4.48,16.38,4,15.96,4L15.96,4z"/>
+    </g>
+
     <g id="search">
       <path fill="none" d="M0 0h24v24H0V0z" stroke="none" />
       <path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" />

src/styles/variables.scss

@@ -209,3 +209,13 @@ $sidebar_border: transparentize(white, 0.95);
   background: transparentize($content_bg, 0.4);
   box-shadow: transparentize(white, 0.95) -1px 0;
 }
+
+@mixin editor_round_button {
+  width: $upload_button_height;
+  height: $upload_button_height;
+  border-radius: ($upload_button_height / 2) !important;
+  flex: 0 0 $upload_button_height;
+  position: relative;
+  border-radius: $radius;
+  cursor: pointer;
+}