#58 add column headers to custom card config editor

Zuehlke · Feb 28, 2023 · f0e6a33 · f0e6a33
1 parent 62f2af4
commit f0e6a33
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 3 deletions.
diff --git a/client/app/assets/i18n/de.json b/client/app/assets/i18n/de.json
@@ -98,5 +98,9 @@
   "issueTrackingUrlExample": "https://my.jira.com/browse/{ISSUE}",
   "matrix": "Schätz-Matrix",
   "noStoriesForMatrix": "Es gibt noch keine geschätzten Stories in deinem Raum...",
-  "matrixIncludeTrashed": "Inklusive gelöschte Stories"
+  "matrixIncludeTrashed": "Inklusive gelöschte Stories",
+  "addCard": "Karte hinzufügen",
+  "value": "Wert",
+  "label": "Name",
+  "color": "Farbe"
 }
diff --git a/client/app/assets/i18n/en.json b/client/app/assets/i18n/en.json
@@ -98,5 +98,9 @@
   "issueTrackingUrlExample": "https://my.jira.com/browse/{ISSUE}",
   "matrix": "Estimation Matrix",
   "noStoriesForMatrix": "There are no estimated stories in your room, yet...",
-  "matrixIncludeTrashed": "Include trashed stories"
+  "matrixIncludeTrashed": "Include trashed stories",
+  "addCard": "Add Card",
+  "value": "Value",
+  "label": "Label",
+  "color": "Color"
 }
diff --git a/client/app/components/Settings/CardConfigEditor.js b/client/app/components/Settings/CardConfigEditor.js
@@ -8,6 +8,8 @@ import {
   AddItemButton,
   ErrorMsg,
   StyledCadConfigEditor,
+  StyledCCTableCell,
+  StyledCCTableHeader,
   StyledItems,
   StyledTextarea
 } from './_styled';
@@ -53,6 +55,15 @@ export const CardConfigEditor = ({cardConfig, onSave, t}) => {
 
       {!showTextEditor && (
         <StyledItems>
+          <StyledCCTableHeader>
+            <StyledCCTableCell>{t('label')}</StyledCCTableCell>
+            <StyledCCTableCell>{t('value')}</StyledCCTableCell>
+            <StyledCCTableCell style={{width: 'auto', minWidth: '160px', flexGrow: 1}}>
+              {t('color')}
+            </StyledCCTableCell>
+            <StyledCCTableCell style={{width: '25%'}}></StyledCCTableCell>
+          </StyledCCTableHeader>
+
           {internalCC.map((ccItem, index) => (
             <CardConfigEditorItem
               key={ccItem.id}
@@ -66,7 +77,7 @@ export const CardConfigEditor = ({cardConfig, onSave, t}) => {
             />
           ))}
           <AddItemButton className="pure-button" type="button" onClick={onAdd}>
-            <i className="icon-plus"></i> Add Card
+            <i className="icon-plus"></i> {t('addCard')}
           </AddItemButton>
         </StyledItems>
       )}

diff --git a/client/app/components/Settings/_styled.js b/client/app/components/Settings/_styled.js
@@ -125,6 +125,17 @@ export const StyledCCTableCell = styled.div`
   }
 `;
 
+export const StyledCCTableHeader = styled.div`
+  width: 100%;
+  display: flex;
+  border-bottom: 1px solid #ccc;
+
+  ${StyledCCTableCell} {
+    background: #e6e6e6;
+    color: rgba(0, 0, 0, 0.8);
+  }
+`;
+
 export const StyledColorBadge = styled.span`
   display: inline-block;
   width: 12px;