From c731bb9ad087a83de491b5331239b111e94455ef Mon Sep 17 00:00:00 2001 From: Fedor Katurov Date: Sun, 29 Nov 2020 15:43:30 +0700 Subject: [PATCH] added promoted switch button --- .../editors/EditorImageUploadButton/index.tsx | 1 - .../editors/EditorPanel/styles.module.scss | 3 +- .../editors/EditorPublicSwitch/index.tsx | 49 +++++++++++++++ .../EditorPublicSwitch/styles.module.scss | 63 +++++++++++++++++++ .../editors/EditorUploadButton/index.tsx | 25 ++------ .../EditorUploadButton/styles.module.scss | 9 +-- src/redux/node/constants.ts | 15 ++++- src/redux/types.ts | 2 + src/sprites/Sprites.tsx | 10 +++ src/styles/variables.scss | 10 +++ 10 files changed, 153 insertions(+), 34 deletions(-) create mode 100644 src/components/editors/EditorPublicSwitch/index.tsx create mode 100644 src/components/editors/EditorPublicSwitch/styles.module.scss diff --git a/src/components/editors/EditorImageUploadButton/index.tsx b/src/components/editors/EditorImageUploadButton/index.tsx index 68504973..f333cf9d 100644 --- a/src/components/editors/EditorImageUploadButton/index.tsx +++ b/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'; diff --git a/src/components/editors/EditorPanel/styles.module.scss b/src/components/editors/EditorPanel/styles.module.scss index a58338b2..5bda9666 100644 --- a/src/components/editors/EditorPanel/styles.module.scss +++ b/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; } diff --git a/src/components/editors/EditorPublicSwitch/index.tsx b/src/components/editors/EditorPublicSwitch/index.tsx new file mode 100644 index 00000000..d8f9f889 --- /dev/null +++ b/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 = ({ data, setData }) => { + const tooltip = useRef(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 ( +
+
+ {data.is_promoted + ? 'Доступно всем на главной странице' + : 'Видно только сотрудникам в лаборатории'} +
+ +
+ {data.is_promoted ? : } +
+
+ ); +}; + +export { EditorPublicSwitch }; diff --git a/src/components/editors/EditorPublicSwitch/styles.module.scss b/src/components/editors/EditorPublicSwitch/styles.module.scss new file mode 100644 index 00000000..e41682c0 --- /dev/null +++ b/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; +} diff --git a/src/components/editors/EditorUploadButton/index.tsx b/src/components/editors/EditorUploadButton/index.tsx index 34e90a44..03fda22f 100644 --- a/src/components/editors/EditorUploadButton/index.tsx +++ b/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 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 = ({ [data, setData] ); - // const onDrop = useCallback( - // (event: React.DragEvent) => { - // 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); diff --git a/src/components/editors/EditorUploadButton/styles.module.scss b/src/components/editors/EditorUploadButton/styles.module.scss index 3ba89ad9..3347fd46 100644 --- a/src/components/editors/EditorUploadButton/styles.module.scss +++ b/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; diff --git a/src/redux/node/constants.ts b/src/redux/node/constants.ts index 9d3da6af..30df9a77 100644 --- a/src/redux/node/constants.ts +++ b/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[]> = { - [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, ], }; diff --git a/src/redux/types.ts b/src/redux/types.ts index dd5b95b4..b9beecaf 100644 --- a/src/redux/types.ts +++ b/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: { diff --git a/src/sprites/Sprites.tsx b/src/sprites/Sprites.tsx index d3c8a38e..be5368da 100644 --- a/src/sprites/Sprites.tsx +++ b/src/sprites/Sprites.tsx @@ -235,6 +235,16 @@ const Sprites: FC<{}> = () => ( + + + + + + + + + + diff --git a/src/styles/variables.scss b/src/styles/variables.scss index 8577202c..a518e5d4 100644 --- a/src/styles/variables.scss +++ b/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; +}