feat/services-items-design (#122)

* feat(service): variables * feat(service): colors * feat(service): colors
RomainDreidemy · Sep 14, 2023 · 02cca49 · 02cca49
1 parent 9d3007c
commit 02cca49
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 32 deletions.
diff --git a/front/src/services/board/drawer/factories/Service.factory.ts b/front/src/services/board/drawer/factories/Service.factory.ts
@@ -7,7 +7,7 @@ import { type IServicePortVariable } from '../../../../interfaces/ServiceVariabl
 
 const OFFSET_SECTION_Y: number = 15
 const OFFSET_ITEMS_Y: number = 5
-const OFFSET_ITEM_Y: number = 20
+const OFFSET_ITEM_Y: number = 25
 
 const ServiceFactory = (): TServiceFactory => {
   return {
@@ -29,15 +29,15 @@ const ServiceFactory = (): TServiceFactory => {
 
       const ports: IServicePortVariable[] = entity.ports ?? []
       if (ports.length > 0) {
-        height += OFFSET_ITEMS_Y + OFFSET_ITEM_Y * (ports.length)
+        height += OFFSET_ITEMS_Y + OFFSET_ITEM_Y * ports.length
       }
 
       this.height = height
     },
 
     afterDraw (): void {
       const entity: IService = this.drawer!.entity! as IService
-      let positionY: number = this.positionY + this.topMarginText + OFFSET_SECTION_Y * 3
+      let positionY: number = this.positionY + this.topMarginText + OFFSET_SECTION_Y * 4
 
       const volumes: IServiceVolume[] = entity.volumes ?? []
       if (volumes.length > 0) {
@@ -53,54 +53,49 @@ const ServiceFactory = (): TServiceFactory => {
     },
 
     drawPorts (variables: IServicePortVariable[], positionY: number): void {
-      const valueDecorator = (variable: IServicePortVariable): string => {
-        return `${variable.public}:${variable.private}`
-      }
-
       const name: IVariableName<IServicePortVariable> = {
-        sectionName: 'Ports:',
-        variableName: 'Port →',
-        valueDecorator
+        outsideName: (variable) => variable.public,
+        insideName: (variable) => variable.private,
+        color: '#705e9f'
       }
 
       this.drawSection<IServicePortVariable>(name, variables, positionY)
     },
 
     drawVolumes (variables: IServiceVolume[], positionY: number): void {
-      const valueDecorator = (variable: IServiceVolume): string => {
-        return `${variable.localPath}:${variable.containerPath}`
-      }
-
       const name: IVariableName<IServiceVolume> = {
-        sectionName: 'Volumes:',
-        variableName: 'Volume →',
-        valueDecorator
+        outsideName: (variable) => variable.localPath,
+        insideName: (variable) => variable.containerPath,
+        color: '#5e7a9f'
       }
 
       this.drawSection<IServiceVolume>(name, variables, positionY)
     },
 
-    drawSection<IVariable>({ sectionName, variableName, valueDecorator }: IVariableName<IVariable>, variables: IVariable[], positionY: number): void {
+    drawSection<IVariable>({ outsideName, insideName, color }: IVariableName<IVariable>, variables: IVariable[], positionY: number): void {
       const context: CanvasRenderingContext2D = this.drawer!.context!
-      const marginX: number = this.positionX + this.marginText
-
-      context.fillStyle = this.titleColor
-      context.font = 'bold 15px Arial'
+      const marginX: number = this.positionX
 
       variables.forEach((variable: IVariable, index: number) => {
-        const value: string = valueDecorator(variable)
         const newPositionY: number = positionY + OFFSET_ITEMS_Y + OFFSET_ITEM_Y * index
-        context.textAlign = 'left'
-
         context.fillStyle = this.textColor
 
-        context.font = 'bold 13px Arial'
-        context.fillText(variableName, marginX, newPositionY)
         context.textAlign = 'right'
+        context.font = 'bold 14px Arial'
+        context.fillText(outsideName(variable), marginX - 30, newPositionY)
+        context.textAlign = 'left'
+
+        context.beginPath()
+        context.roundRect(marginX - 20, newPositionY - 12, 40, 15, [5])
+        context.fillStyle = color
+        context.fill()
+        context.closePath()
+
+        context.fillStyle = this.textColor
 
-        const positionRightX: number = this.width - this.marginText + this.positionX
+        const positionRightX: number = marginX + this.marginText + 15
         context.font = '13px Arial'
-        context.fillText(value, positionRightX, newPositionY)
+        context.fillText(insideName(variable), positionRightX, newPositionY)
         context.textAlign = 'left'
       })
     }

diff --git a/front/src/types/board/drawer/factories/Service.factory.ts b/front/src/types/board/drawer/factories/Service.factory.ts
@@ -1,11 +1,12 @@
 import { type TBaseFactory } from './Base.factory'
 import { type IServicePortVariable } from '../../../../interfaces/ServiceVariable/Port.interface'
 import { type IServiceVolume } from '../../../../interfaces/ServiceVariable/Volume.interface'
+import { type CanvasColor } from '../../../../enums/CanvasColor'
 
 export interface IVariableName<IVariable> {
-  sectionName: string
-  variableName: string
-  valueDecorator: (variable: IVariable) => string
+  outsideName: (variable: IVariable) => string
+  insideName: (variable: IVariable) => string
+  color: CanvasColor | string
 }
 
 export type TServiceFactory =