feat(Tag): tag component, category/keyword options

qri-io · Jan 27, 2020 · d61efab · d61efab
1 parent bda3d5c
commit d61efab
Show file tree

Hide file tree

Showing 3 changed files with 88 additions and 16 deletions.
diff --git a/app/components/item/Tag.tsx b/app/components/item/Tag.tsx
@@ -0,0 +1,18 @@
+import React from 'react'
+import classNames from 'classnames'
+
+interface TagProps {
+  type: 'category' | 'keyword'
+  tag: string
+}
+
+const Tag: React.FunctionComponent<TagProps> = (props) => {
+  const { type = 'category', tag } = props
+  return (
+    <div className={classNames('tag', { 'category': type === 'category' })}>
+      {tag}
+    </div>
+  )
+}
+
+export default Tag
diff --git a/app/scss/0.4.0/item.scss b/app/scss/0.4.0/item.scss
@@ -77,4 +77,56 @@
       }
     }
   }
+}
+
+.tag {
+  font-size: 14px;
+  color: #AFD148;
+  padding: 3px 5px;
+  letter-spacing: .5px;
+
+  &.category {
+    color: #F8AB31;
+    background: #F2F2F2;
+    border-radius: 2px; 
+  }
+}
+
+
+.dataset-item {
+  padding: 20px;
+  background: white;
+  border-radius: 5px;
+  border: 1px solid #E8EDF2;
+  max-width: 600px;
+
+  .header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    a {
+      font-family: $font-family-sans-serif;
+      text-overflow: ellipsis;
+      font-size: 24px;
+      font-weight: 500;
+      flex: 1 1 auto;
+      overflow: hidden;
+      white-space: nowrap;
+    }
+    div {
+      flex: 0 0 auto;
+    }
+  }
+
+  .title {
+    color: #595959;
+    margin: 10px 0px;
+    font-size: 19px;
+    text-overflow: ellipsis;
+  }
+
+  .detail {
+    margin-right: 10px;
+    width: 100%;
+  }
 }
diff --git a/app/scss/_forms.scss b/app/scss/_forms.scss
@@ -526,28 +526,30 @@ input#path, input#bodyPath {
 }
 
 // MultiTextInput (tags UI)
-.tag {
-  background: #e4e4e4;
-  border-radius: 4px;
-  padding: 4px 8px;
-  margin: 5px;
-  display: inline-block;
+.multi-text-input {
+  .tag {
+    background: #e4e4e4;
+    border-radius: 4px;
+    padding: 4px 8px;
+    margin: 5px;
+    display: inline-block;
+
+    .tag-text {
+      flex: 1;
+    }
 
-  .tag-text {
-    flex: 1;
+    .tag-remove {
+      flex: 0;
+      padding-left: 7px;
+    }
   }
 
-  .tag-remove {
-    flex: 0;
-    padding-left: 7px;
+  .tag-input {
+    max-width: 180px;
+    display: inline-block;
   }
 }
 
-.tag-input {
-  max-width: 180px;
-  display: inline-block;
-}
-
 // MultiStructuredInput
 
 .subform-container {