fix: add style for link popup

tinacms · Sep 25, 2019 · 9feefd3 · 9feefd3
1 parent 0fb162f
commit 9feefd3
Show file tree

Hide file tree

Showing 3 changed files with 164 additions and 65 deletions.
diff --git a/packages/tinacms/fields/src/Wysiwyg/state/plugins/links/LinkForm.tsx b/packages/tinacms/fields/src/Wysiwyg/state/plugins/links/LinkForm.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react'
+import styled, { keyframes } from 'styled-components'
 
 type E = React.ChangeEvent<HTMLInputElement>
 
@@ -55,51 +56,135 @@ export class LinkForm extends React.Component<Props, State> {
     const { removeLink, style = {} } = this.props
     const { href, title } = this.state
     return (
-      <div
+      <LinkPopup
         style={{
-          backgroundColor: 'white',
-          position: 'relative',
-          height: 'max-content',
           ...style,
         }}
-        // className={c('link-form')}
       >
-        <label>Title</label>
-        <input
+        <LinkLabel>Title</LinkLabel>
+        <LinkInput
           placeholder="Enter Title"
           autoFocus
           type={'text'}
           value={title}
           onChange={this.setTitle}
           onKeyPress={this.onEnterSave as any}
         />
-        <label>URL</label>
-        <input
+        <LinkLabel>URL</LinkLabel>
+        <LinkInput
           placeholder="Enter URL"
           autoFocus
           type={'text'}
           value={href}
           onChange={this.setHref}
           onKeyPress={this.onEnterSave as any}
         />
-        <div
-        // className={c('button-group')}
-        >
-          <button
-            onClick={this.save}
-            // className={c('link-form--save')}
-          >
-            Save
-          </button>
-          <button
-            onClick={removeLink}
-            // className={c('link-form--delete')}
-          >
-            {/* <Icon name="GarbageCan" width={14} height={14} /> */}
-            Del
-          </button>
-        </div>
-      </div>
+        <LinkActions>
+          <DeleteLink onClick={removeLink}>Delete</DeleteLink>
+          <SaveLink onClick={this.save}>Save</SaveLink>
+        </LinkActions>
+      </LinkPopup>
     )
   }
 }
+
+const LinkPopupKeyframes = keyframes`
+  0% {
+    transform: scale3d(0.5,0.5,1)
+  }
+  100% {
+    transform: scale3d(1, 1, 1);
+  }
+`
+
+const LinkPopup = styled.div`
+  background-color: white;
+  position: relative;
+  height: max-content;
+  border-radius: 0.5rem;
+  box-shadow: inset 0 0 1px 1px rgba(0, 0, 0, 0.075);
+  filter: drop-shadow(0px 4px 8px rgba(48, 48, 48, 0.1))
+    drop-shadow(0px 2px 3px rgba(48, 48, 48, 0.15));
+  box-shadow: inset 0 0 1px 1px rgba(0, 0, 0, 0.075);
+  transform-origin: 50% 0;
+  animation: ${LinkPopupKeyframes} 85ms ease-out both 1;
+  overflow: visible;
+  padding: 0.75rem;
+  z-index: 10;
+`
+
+const LinkLabel = styled.label`
+  display: block;
+  font-size: 0.8rem;
+  font-weight: 600;
+  letter-spacing: 0.01em;
+  color: #333;
+  margin-bottom: 0.2rem;
+`
+
+const LinkInput = styled.input`
+  background-color: #f2f2f2;
+  border-color: #f2f2f2;
+  border-radius: 0.25rem;
+  font-size: 0.8rem;
+  line-height: 1.35;
+  padding: 0.5rem 0.75rem;
+  border-width: 1px;
+  border-style: solid;
+  width: 100%;
+  margin: 0 0 0.5rem 0;
+  outline: none;
+
+  &:hover {
+    background-color: #f0f0f0;
+  }
+
+  &:focus {
+    border-color: #0084ff;
+    box-shadow: 0 0 2px #0084ff;
+    background-color: #f8f8f8;
+  }
+
+  &::placeholder {
+    font-size: 0.9rem;
+    color: #cfd3d7;
+  }
+`
+
+const LinkActions = styled.div`
+  display: flex;
+  justify-content: flex-end;
+  padding-top: 0.25rem;
+`
+
+const LinkButton = styled.button`
+  text-align: center;
+  border: 0;
+  border-radius: 0.5rem;
+  box-shadow: 0px 2px 3px rgba(48, 48, 48, 0.15);
+  background-color: #0084ff;
+  color: white;
+  font-weight: 500;
+  cursor: pointer;
+  font-size: 0.75rem;
+  padding: 0.5rem 1.25rem;
+  transition: opacity 86ms ease-out;
+  margin-left: 0.5rem;
+  flex: 0 1 auto;
+  &:hover {
+    opacity: 0.6;
+  }
+`
+
+const SaveLink = styled(LinkButton)``
+
+const DeleteLink = styled(LinkButton)`
+  background-color: transparent;
+  box-shadow: none;
+  border: none;
+  color: #0084ff;
+  &:hover {
+    background-color: #f7f7f7;
+    opacity: 1;
+  }
+`
diff --git a/packages/tinacms/fields/src/Wysiwyg/state/plugins/links/LinkFormController.tsx b/packages/tinacms/fields/src/Wysiwyg/state/plugins/links/LinkFormController.tsx
@@ -8,11 +8,17 @@ import {
   stopEditingLink,
   updateLinkBeingEdited,
 } from '../../../commands'
+import styled, { StyleSheetManager } from 'styled-components'
+import { FC } from 'react'
 
 export class LinkFormController {
   clickTarget: HTMLElement | null = null
 
-  constructor(protected renderTarget: HTMLElement, protected view: EditorView) {
+  constructor(
+    protected renderTarget: HTMLElement,
+    protected view: EditorView,
+    protected frame?: { document: Document }
+  ) {
     //
   }
 
@@ -24,47 +30,33 @@ export class LinkFormController {
   unmount = () => unmountComponentAtNode(this.renderTarget)
 
   component(): any {
-    const minWidth = 200
-    const arrowSize = 14
+    const minWidth = 240
     const left = calcLeftOffset(this.clickTarget!, this.renderTarget, minWidth)
     const top = `calc(2rem + ${this.clickTarget!.offsetTop -
       this.renderTarget.offsetTop}px)`
+    const arrowOffset = calcArrowLeftOffset(
+      this.clickTarget!,
+      this.renderTarget,
+      minWidth
+    )
     return (
-      <div
-      // className={c('link-form--container')}
-      >
-        <div
-          // className={c('link-form--arrow-container')}
-          style={{
-            left: calcArrowLeftOffset(
-              this.clickTarget!,
-              this.renderTarget,
-              minWidth
-            ),
-            top,
-          }}
-        >
-          <div
-            // className={c('link-form--arrow')}
+      <ViewContainer frame={this.frame}>
+        <>
+          <LinkArrow offset={arrowOffset} top={top}></LinkArrow>
+          <LinkForm
             style={{
-              width: `${arrowSize}px`,
-              height: `${arrowSize}px`,
+              left,
+              top,
+              minWidth: `${minWidth}px`,
             }}
+            removeLink={this.removeLink}
+            onChange={this.onChange}
+            href={this.href}
+            title={this.title}
+            cancel={this.cancel}
           />
-        </div>
-        <LinkForm
-          style={{
-            left,
-            top,
-            minWidth: `${minWidth}px`,
-          }}
-          removeLink={this.removeLink}
-          onChange={this.onChange}
-          href={this.href}
-          title={this.title}
-          cancel={this.cancel}
-        />
-      </div>
+        </>
+      </ViewContainer>
     )
   }
 
@@ -89,6 +81,28 @@ export class LinkFormController {
   }
 }
 
+const ViewContainer: FC<{ frame: any }> = ({ frame, children }) => {
+  if (!frame) return <>{children}</>
+  return (
+    <StyleSheetManager target={frame.document.head}>
+      {children}
+    </StyleSheetManager>
+  )
+}
+
+const LinkArrow = styled.div<{ offset: string; top: string }>`
+  position: absolute;
+  top: ${p => p.top};
+  left: ${p => p.offset};
+  margin-top: 3px;
+  transform: translate3d(-50%, -100%, 0);
+  width: 1rem;
+  height: 0.8rem;
+  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
+  background-color: white;
+  z-index: 100;
+`
+
 /**
  * Calculates the leftOffset of the form.
  *
@@ -114,12 +128,12 @@ function calcLeftOffset(
 
   let leftEdgeOutsideView = ol < -ol_rt
   if (leftEdgeOutsideView) {
-    return `-1rem`
+    return `-0.5rem`
   }
 
   const rightEdgeOutsideView = ol + minWidth > ow_rt
   if (rightEdgeOutsideView) {
-    return `calc(${ol - (ol + minWidth - ow_rt)}px + 1rem)`
+    return `calc(${ol - (ol + minWidth - ow_rt)}px + 0.5rem)`
   }
 
   return `${ol}px`

diff --git a/packages/tinacms/fields/src/Wysiwyg/state/plugins/links/index.tsx b/packages/tinacms/fields/src/Wysiwyg/state/plugins/links/index.tsx
@@ -24,7 +24,7 @@ export function links(schema: Schema, frame?: { document: Document }): Plugin {
     },
     view(editorView: any) {
       insertElBefore(renderTarget, editorView.dom)
-      linkForm = new LinkFormController(renderTarget, editorView as any)
+      linkForm = new LinkFormController(renderTarget, editorView as any, frame)
       let doc
       if (frame) {
         doc = frame.document