fix: paper plane button UI

hackforplay · Nov 19, 2019 · 89a54f1 · 89a54f1
1 parent 70f9172
commit 89a54f1
Show file tree

Hide file tree

Showing 3 changed files with 73 additions and 2 deletions.
diff --git a/src/CodeView.tsx b/src/CodeView.tsx
@@ -79,6 +79,7 @@ export function CodeView({ code }: CodeViewProps) {
       <div className={classNames(style.header, flex.horizontal)}>
         <img src={fileInfo.iconUrl} alt="" className={style.icon} />
         <div className={style.name}>{fileInfo.name.ja}</div>
+        <PaperPlane />
       </div>
       {cellsRef.current.map(cell =>
         cell.type === 'code' ? (
@@ -106,3 +107,31 @@ export function CodeView({ code }: CodeViewProps) {
 function formatCodeCell(codeCell: ICodeCell) {
   codeCell.value = appendEmptyLine(codeCell.value);
 }
+
+function PaperPlane({}) {
+  const [sent, setSent] = React.useState(false);
+  const [edited, setEdited] = React.useState(true);
+
+  const onClick = React.useCallback(() => {
+    setSent(true);
+    setTimeout(() => {
+      setSent(false);
+    }, 2000);
+  }, []);
+
+  return (
+    <div
+      className={classNames(
+        style.plane,
+        sent && style.sent,
+        !edited && style.hidden
+      )}
+    >
+      <img
+        src={require('./resources/paperPlane.svg')}
+        alt="✈"
+        onClick={onClick}
+      />
+    </div>
+  );
+}
diff --git a/src/resources/paperPlane.svg b/src/resources/paperPlane.svg
diff --git a/src/styles/code-view.scss b/src/styles/code-view.scss
@@ -1,11 +1,13 @@
 @import 'color';
 @import 'shadow';
 
+$space: 8px;
+
 .header {
   position: sticky;
   position: -webkit-sticky;
   top: 0;
-  padding-top: 8px;
+  padding-top: 15px;
   background-color: $backgroundColor;
   z-index: 10;
   align-items: center;
@@ -14,12 +16,41 @@
 
   .icon {
     height: 100%;
-    margin-right: 8px;
+    margin-right: $space;
   }
 
   .name {
     font-size: 21px;
     font-weight: 600;
     color: $textColor;
+    margin-right: $space;
+  }
+}
+
+.plane {
+  flex: 1;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  &.sent {
+    animation: moveRight 250ms ease-in forwards;
+  }
+  &.hidden {
+    visibility: hidden;
+  }
+
+  & > img {
+    cursor: pointer;
+  }
+}
+
+@keyframes moveRight {
+  0% {
+    transform: translateX(0%);
+    opacity: 1;
+  }
+  100% {
+    transform: translateX(100%);
+    opacity: 0;
   }
 }