From a0d0da3a4262498a92a6c8b3efa3a101b9eb5327 Mon Sep 17 00:00:00 2001 From: Maksym Bykovskyy Date: Wed, 26 Feb 2020 17:50:59 +0000 Subject: [PATCH] Ui changes feedback changes --- .../client/src/components/editable-title.tsx | 61 +++--- .../packages/client/src/components/editor.tsx | 41 ++--- .../client/src/components/examples.tsx | 2 +- .../packages/client/src/components/inputs.tsx | 1 + .../packages/client/src/components/share.tsx | 174 +++++++++--------- tools/webide/packages/client/src/index.css | 2 +- .../server/test/schemas/share-latest.spec.ts | 4 +- 7 files changed, 131 insertions(+), 154 deletions(-) diff --git a/tools/webide/packages/client/src/components/editable-title.tsx b/tools/webide/packages/client/src/components/editable-title.tsx index 3f9472032..4f18b44ab 100644 --- a/tools/webide/packages/client/src/components/editable-title.tsx +++ b/tools/webide/packages/client/src/components/editable-title.tsx @@ -1,10 +1,6 @@ -import { faPencilAlt } from '@fortawesome/free-solid-svg-icons'; -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import React, { useEffect, useRef, useState } from 'react'; import styled, { css } from 'styled-components'; -import { Tooltip } from './tooltip'; - const Container = styled.div` display: flex; align-items: center; @@ -32,34 +28,27 @@ const Input = styled.input<{ visible?: boolean }>` `; const Label = styled.div<{ visible?: boolean }>` + display: flex; + align-items: center; color: var(--blue); opacity: 0; - - ${props => - props.visible && - css` - opacity: 1; - `} -`; - -const PencilIcon = ({ ...props }) => ( - -); - -const Pencil = styled(PencilIcon)<{ visible: boolean }>` - margin-left: 10px; - cursor: pointer; - color: var(--label_foreground); - opacity: 0; + padding-left: 0.5em; :hover { - opacity: 1; + position: absolute; + background-color: white; + border-radius: var(--border_radius); + height: 2em; + + border: none; + outline: none; + width: 15em; } ${props => props.visible && css` - opacity: 0.5; + opacity: 1; `} `; @@ -102,20 +91,18 @@ export const EditableTitleComponent = (props: { } }} > - -
- { - if (inputEl.current) { - inputEl.current.select(); - inputEl.current.setSelectionRange(0, 99999); - setShowInput(true); - } - }} - > - Rename -
+ ); }; diff --git a/tools/webide/packages/client/src/components/editor.tsx b/tools/webide/packages/client/src/components/editor.tsx index 3d2843126..d3d28b99a 100644 --- a/tools/webide/packages/client/src/components/editor.tsx +++ b/tools/webide/packages/client/src/components/editor.tsx @@ -14,16 +14,6 @@ const Container = styled.div` `; const Header = styled.div` - flex: 1; - display: flex; - justify-content: flex-start; - align-items: center; - - min-height: 2.5em; - border-bottom: 5px solid var(--blue_trans1); -`; - -const Subheader = styled.div` flex: 1; display: flex; justify-content: space-between; @@ -31,10 +21,17 @@ const Subheader = styled.div` background: var(--blue_trans1); border: 5px solid rgba(0, 0, 0, 0); - border-top: none; padding: 0 10px; `; +const LeftActions = styled.div` + display: flex; +`; + +const StyledEditableTitleComponent = styled(EditableTitleComponent)` + margin-left: 20px; +`; + export const EditorComponent = () => { const dispatch = useDispatch(); const title = useSelector(state => state.editor.title); @@ -42,18 +39,18 @@ export const EditorComponent = () => { return (
- -
- - { - dispatch({ ...new ChangeTitleAction(value) }); - }} - > + + + { + dispatch({ ...new ChangeTitleAction(value) }); + }} + > + - + ); diff --git a/tools/webide/packages/client/src/components/examples.tsx b/tools/webide/packages/client/src/components/examples.tsx index fec8c13c6..cecd2a4ee 100644 --- a/tools/webide/packages/client/src/components/examples.tsx +++ b/tools/webide/packages/client/src/components/examples.tsx @@ -19,7 +19,7 @@ const Container = styled.div` const MenuItem = styled.div<{ selected?: boolean }>` padding: ${verticalPadding} 0 ${verticalPadding} 1em; - height: 1.5em; + height: 1em; display: flex; align-items: center; cursor: pointer; diff --git a/tools/webide/packages/client/src/components/inputs.tsx b/tools/webide/packages/client/src/components/inputs.tsx index 22eabca0a..aa9ffa039 100644 --- a/tools/webide/packages/client/src/components/inputs.tsx +++ b/tools/webide/packages/client/src/components/inputs.tsx @@ -13,6 +13,7 @@ export const HGroup = styled.div` export const Label = styled.label` font-size: 1em; color: var(--label_foreground); + user-select: none; `; export const Input = styled.input` diff --git a/tools/webide/packages/client/src/components/share.tsx b/tools/webide/packages/client/src/components/share.tsx index 06974784c..0df1795aa 100644 --- a/tools/webide/packages/client/src/components/share.tsx +++ b/tools/webide/packages/client/src/components/share.tsx @@ -1,6 +1,7 @@ -import { faCopy } from '@fortawesome/free-solid-svg-icons'; +import { faCopy, faLink } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import React, { useEffect, useRef, useState } from 'react'; +import OutsideClickHandler from 'react-outside-click-handler'; import { useDispatch, useSelector } from 'react-redux'; import { Dispatch } from 'redux'; import styled, { css } from 'styled-components'; @@ -16,84 +17,66 @@ const Container = styled.div` align-items: center; `; +const Icon = styled(FontAwesomeIcon)` + pointer-events: none; +`; + const Button = styled.div<{ clicked?: boolean }>` cursor: pointer; user-select: none; + z-index: 3; - z-index: 1; display: flex; justify-content: center; align-items: center; - height: 2em; - width: 6em; - color: var(--blue); - background-color: white; - border-radius: 1em; - transition: width 0.3s ease-in; + width: 1.5em; + height: 1.5em; + border-radius: 50%; + + background-color: #aaa; + color: var(--blue_opaque1); + + &:hover { + background-color: white; + color: var(--blue); + opacity: 1; + } ${props => props.clicked && css` - width: 2em; background-color: white; - `} - - &:hover { - background-color: var(--blue_opaque1); - } -`; - -const Label = styled.span<{ visible?: boolean }>` - pointer-events: none; - opacity: 1; - transition: opacity 0.3s ease-in; - - ${props => - !props.visible && - css` - opacity: 0; - `} -`; - -const CopyIcon = ({ visible, ...props }: { visible: boolean }) => ( - -); - -const Copy = styled(CopyIcon)` - position: absolute; - pointer-events: none; - opacity: 1; - transition: opacity 0.3s ease-in; - - ${props => - !props.visible && - css` - opacity: 0; + color: var(--blue); + opacity: 1; `} `; const Input = styled.input<{ visible?: boolean }>` position: absolute; - background-color: var(--blue); - border-radius: 1em; - - opacity: 0; - height: 2em; - width: 2em; - transform: translateX(0.3em); border: none; - padding-left: 2em; + outline: none; + border-radius: 1em; + z-index: 2; + + padding-left: 1.5em; + transform: translateX(0.3em); + font-size: 1em; color: white; + background-color: var(--blue); + + width: 2em; + height: 1.5em; + opacity: 0; + transition: width 0.1s ease-in-out, opacity 0s 0.1s; - transition: width 0.3s ease-in; - outline: none; ${props => props.visible && css` - opacity: 1; width: 25em; + opacity: 1; + transition: width 0.3s ease-in-out; `} `; @@ -118,59 +101,68 @@ export const ShareComponent = () => { const shareLink = useSelector( state => state.share.link ); - const [clicked, setClicked] = useState(false); const SHARE_TOOLTIP = 'Share code'; const COPY_TOOLTIP = 'Copy link'; const COPIED_TOOLTIP = 'Copied!'; const [tooltipMessage, setTooltipMessage] = useState(SHARE_TOOLTIP); + const [clicked, setClicked] = useState(false); + const [icon, setIcon] = useState(faLink); + + const setInitialState = () => { + setClicked(false); + setIcon(faLink); + setTooltipMessage(SHARE_TOOLTIP); + }; + + const setClickedState = () => { + setClicked(true); + setIcon(faCopy); + setTooltipMessage(COPY_TOOLTIP); + }; useEffect(() => { if (shareLink) { if (inputEl.current && copy(inputEl.current)) { setTooltipMessage(COPIED_TOOLTIP); - } else { - setClicked(true); - setTooltipMessage(COPY_TOOLTIP); } } else { - setClicked(false); - setTooltipMessage(SHARE_TOOLTIP); + setInitialState(); } }, [shareLink]); return ( - - - - + setInitialState()}> + + + + + ); }; diff --git a/tools/webide/packages/client/src/index.css b/tools/webide/packages/client/src/index.css index 6f15a1d73..1f3296c3f 100644 --- a/tools/webide/packages/client/src/index.css +++ b/tools/webide/packages/client/src/index.css @@ -48,7 +48,7 @@ --font_ghost_weight: 700; --font_ghost_color: rgba(153, 153, 153, 0.5); /* or #CFCFCF */ - --content_height: 80vh; + --content_height: 85vh; --tooltip_foreground: white; --tooltip_background: rgba(0, 0, 0, 0.75) /*#404040*/; diff --git a/tools/webide/packages/server/test/schemas/share-latest.spec.ts b/tools/webide/packages/server/test/schemas/share-latest.spec.ts index 537a86c40..79fa25699 100644 --- a/tools/webide/packages/server/test/schemas/share-latest.spec.ts +++ b/tools/webide/packages/server/test/schemas/share-latest.spec.ts @@ -1,7 +1,7 @@ import latestSchema from '../../src/schemas/share-latest'; describe('Latest Share Schema Migration', () => { - it('should be v1', () => { - expect(latestSchema.VERSION).toEqual('v1'); + it('should be v2', () => { + expect(latestSchema.VERSION).toEqual('v2'); }); });