closes #5 labels on cards

src/renderer/components/Kanban/Card/Card.tsx

@@ -14,6 +14,7 @@ import { matchParent } from '../../../utils';
 import { useSelector } from 'react-redux';
 import { RootState } from '../../../reducers';
 import { check } from 'prettier';
+import { Label } from './CardLabel';
 
 /**
  * If you're using z-index, make sure the element has a defined position attribute or it won't work.
@@ -147,7 +148,22 @@ export const Card: FC<Props> = React.memo((props: Props) => {
         newContent += oldContent.slice(lastEnd);
         return newContent;
     }, [props.content, props.searchReg]);
-
+    const labels = props.labels ?? [
+        {
+            id: 'gid://gitlab/GroupLabel/24250023',
+            title: 'orga::default',
+            description: 'max 25m estimate',
+            color: '#dbbdcf',
+            textColor: '#333333',
+        },
+        {
+            id: 'gid://gitlab/GroupLabel/24248541',
+            title: 'unscoped label',
+            description: '',
+            color: '#8fbc8f',
+            textColor: '#FFFFFF',
+        },
+    ];
     return (
         <>
             <Draggable draggableId={_id} index={index}>
@@ -219,6 +235,11 @@ export const Card: FC<Props> = React.memo((props: Props) => {
                                             ref={markdownRef}
                                         />
                                         <Divider style={{ margin: '0 0 4px 0' }} />
+                                        {labels.map((eachLabel) => {
+                                            const { id: key } = eachLabel;
+                                            return <Label {...{ key }} {...eachLabel} />;
+                                        })}
+                                        <Divider style={{ margin: '4px 0' }} />
                                         <BadgeHolder>
                                             {props.sessionIds.length > 0 ? (
                                                 <PomodoroDot num={props.sessionIds.length} />

src/renderer/components/Kanban/Card/CardEditor.tsx

@@ -14,6 +14,7 @@ import formatMarkdown from './formatMarkdown';
 import { EditorContainer } from '../style/editorStyle';
 import { singleIssueQuery, testLocalCardId } from '../../../../main/io/persist';
 import { gql } from 'graphql-request';
+import { Label } from './CardLabel';
 const { TabPane } = Tabs;
 
 interface Props extends CardActionTypes {
@@ -150,6 +151,23 @@ const _CardInDetail: FC<Props> = React.memo((props: Props) => {
         }
     }, []);
 
+    const labels = props.card?.labels ?? [
+        {
+            id: 'gid://gitlab/GroupLabel/24250023',
+            title: 'orga::default',
+            description: 'max 25m estimate',
+            color: '#dbbdcf',
+            textColor: '#333333',
+        },
+        {
+            id: 'gid://gitlab/GroupLabel/24248541',
+            title: 'unscoped label',
+            description: '',
+            color: '#8fbc8f',
+            textColor: '#FFFFFF',
+        },
+    ];
+
     return (
         <Modal
             visible={visible}
@@ -198,6 +216,12 @@ const _CardInDetail: FC<Props> = React.memo((props: Props) => {
                             />
                         </TabPane>
                     </Tabs>
+                    <Row>
+                        {labels.map((eachLabel) => {
+                            const { id: key } = eachLabel;
+                            return <Label {...{ key }} {...eachLabel} />;
+                        })}
+                    </Row>
                     <Row>
                         <Col span={12}>
                             <Form.Item label="Estimated Time In Hour">

src/renderer/components/Kanban/Card/CardLabel.tsx

@@ -0,0 +1,64 @@
+import { ipcRenderer } from 'electron';
+import React, { FC } from 'react';
+import styled from 'styled-components';
+import { Label as LabelType } from '../type';
+
+/**
+ * If you're using z-index, make sure the element has a defined position attribute or it won't work.
+ * Wherever you use z-index in your css, define the position of that element. (Absolute, relative, inherit...)
+ * https://stackoverflow.com/a/23067835/8169341
+ */
+const CardLabel = styled.div.attrs((props: LabelType) => ({
+    backgroundColor: props.color || 'grey',
+    color: props.textColor || 'white',
+}))`
+    --label-inset-border: inset 0 0 0 2px ${(props) => props.backgroundColor};
+    background-color: ${(props) => props.backgroundColor};
+    color: ${(props) => props.color};
+    position: relative;
+    padding: 0.2rem;
+    display: inline-flex;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    vertical-align: top;
+    white-space: nowrap;
+    max-width: 100%;
+    border-radius: 0.8rem;
+    margin: 0.1rem;
+    font-size: 0.8rem;
+    box-shadow: var(--label-inset-border) !important;
+    .scoped-scope {
+        padding: 0 0.2rem;
+    }
+    .scoped-label {
+        background-color: #fff;
+        border-radius: 0 0.6rem 0.6rem 0;
+        padding: 0 0.2rem;
+        color: ${(props) => props.backgroundColor};
+    }
+`;
+
+interface CardLabelProps extends LabelType {
+    parentId?: string;
+}
+
+export const Label: FC<CardLabelProps> = React.memo((props: CardLabelProps) => {
+    const { id, title, description, color, textColor } = props;
+    let [labelScope, labelTitle, ...extraScope] = title.split('::');
+    if (extraScope.length) {
+        labelTitle = `${labelTitle}::${extraScope.join('::')}`;
+        labelScope = labelScope + '';
+        extraScope = [...extraScope];
+    }
+    return (
+        <CardLabel
+            {...{ id, color, textColor }}
+            onMouseUp={(e) => {
+                console.log(e.nativeEvent);
+            }}
+        >
+            <div className="scoped-scope">{labelScope}</div>
+            {!labelTitle ? null : <div className="scoped-label">{labelTitle}</div>}
+        </CardLabel>
+    );
+});