fix(ui): improve the creating cards input modal

This commit improves the look, feel and functionality of the custom
modal that creates new cards on the board.

Changes:

- (BREAKING) The 'c' key is now used to create new cards.
- An extra field is added for adding the card's description.
- Improvements made to the styling of the modal.
- The fields are reset when the user finishes with the form.

README.asciidoc

@@ -77,8 +77,8 @@ and initialises the database with an empty project.
 |CTRL + q
 |Quit the application
 
-|a
-|Add card
+|c
+|Create a new card
 
 |CTRL + d
 |Delete card

internal/ui/modal_input.go

@@ -1,86 +0,0 @@
-package ui
-
-import (
-	"github.com/gdamore/tcell/v2"
-	"github.com/rivo/tview"
-)
-
-type modalInput struct {
-	*tview.Form
-	frame *tview.Frame
-	text  string
-	done  func(string, bool)
-}
-
-func NewModalInput() *modalInput {
-	form := tview.NewForm()
-	m := modalInput{
-		Form:  form,
-		frame: tview.NewFrame(form),
-		text:  "",
-		done:  nil,
-	}
-
-	m.SetButtonsAlign(tview.AlignCenter).
-		SetButtonBackgroundColor(tview.Styles.PrimitiveBackgroundColor).
-		SetButtonTextColor(tview.Styles.PrimaryTextColor).
-		SetBackgroundColor(tview.Styles.ContrastBackgroundColor).
-		SetBorderPadding(0, 0, 0, 0)
-
-	m.AddInputField("", "", 50, nil, func(text string) {
-		m.text = text
-	})
-
-	m.AddButton("OK", func() {
-		if m.done != nil {
-			m.done(m.text, true)
-		}
-	})
-
-	m.AddButton("Cancel", func() {
-		if m.done != nil {
-			m.done(m.text, false)
-		}
-	})
-
-	m.frame.SetBorders(0, 0, 1, 0, 0, 0).
-		SetBorder(true).
-		SetBackgroundColor(tview.Styles.ContrastBackgroundColor).
-		SetBorderPadding(1, 1, 1, 1)
-
-	return &m
-}
-
-func (m *modalInput) SetValue(text string) {
-	m.Clear(false)
-	m.AddInputField("", text, 50, nil, func(text string) {
-		m.text = text
-	})
-}
-
-func (m *modalInput) SetDoneFunc(handler func(string, bool)) *modalInput {
-	m.done = handler
-	return m
-}
-
-func (m *modalInput) Draw(screen tcell.Screen) {
-	buttonsWidth := 50
-	screenWidth, screenHeight := screen.Size()
-	width := screenWidth / 3
-
-	if width < buttonsWidth {
-		width = buttonsWidth
-	}
-
-	height := 7
-	width += 4
-
-	// Set the modal's position and size.
-	x := (screenWidth - width) / 2
-	y := (screenHeight - height) / 2
-	m.SetRect(x, y, width, height)
-
-	// Draw the frame.
-	m.frame.SetRect(x, y, width, height)
-	m.frame.Draw(screen)
-}

internal/ui/modalinput.go

@@ -0,0 +1,116 @@
+package ui
+
+import (
+	"github.com/gdamore/tcell/v2"
+	"github.com/rivo/tview"
+)
+
+type modalInput struct {
+	*tview.Form
+	frame       *tview.Frame
+	title       string
+	description string
+	done        func(string, string, bool)
+}
+
+func newModalInput() *modalInput {
+	var (
+		background       = tcell.ColorBlack.TrueColor()
+		buttonBackground = tcell.ColorBlueViolet.TrueColor()
+		textColour       = tcell.ColorWhite.TrueColor()
+		fieldBackground  = tcell.ColorGrey.TrueColor()
+		labelColour      = tcell.ColorGreen.TrueColor()
+
+		form = tview.NewForm()
+	)
+
+	modal := modalInput{
+		Form:        form,
+		frame:       tview.NewFrame(form),
+		title:       "",
+		description: "",
+		done:        nil,
+	}
+
+	// Stylise the buttons
+	modal.SetButtonsAlign(tview.AlignCenter).
+		SetButtonBackgroundColor(buttonBackground).
+		SetButtonTextColor(textColour).
+		SetBorderPadding(0, 0, 0, 0)
+
+	// Stylise the form
+	modal.SetLabelColor(labelColour).
+		SetFieldBackgroundColor(fieldBackground).
+		SetFieldTextColor(textColour).
+		SetBackgroundColor(background)
+
+	// Stylise the frame around the form
+	modal.frame.SetBorders(0, 0, 1, 0, 0, 0).
+		SetBorder(true).
+		SetBorderColor(tcell.ColorOrangeRed.TrueColor()).
+		SetBackgroundColor(background).
+		SetBorderPadding(1, 1, 1, 1)
+
+	modal.AddButton("Create card", func() {
+		if modal.done != nil {
+			modal.done(modal.title, modal.description, true)
+		}
+		modal.reset()
+	})
+
+	modal.AddButton("Cancel", func() {
+		if modal.done != nil {
+			modal.done(modal.title, modal.description, false)
+		}
+		modal.reset()
+	})
+
+	modal.addInputFields()
+
+	modal.frame.SetTitle(" New Card ")
+
+	return &modal
+}
+
+func (m *modalInput) reset() {
+	m.Clear(false)
+	m.addInputFields()
+}
+
+func (m *modalInput) addInputFields() {
+	m.AddInputField("Title", "", 60, nil, func(text string) {
+		m.title = text
+	})
+
+	m.AddTextArea("Description", "", 60, 10, 0, func(text string) {
+		m.description = text
+	})
+}
+
+func (m *modalInput) SetDoneFunc(handler func(string, string, bool)) *modalInput {
+	m.done = handler
+
+	return m
+}
+
+func (m *modalInput) Draw(screen tcell.Screen) {
+	buttonsWidth := 20
+	screenWidth, screenHeight := screen.Size()
+	width := screenWidth / 3
+
+	if width < buttonsWidth {
+		width = buttonsWidth
+	}
+
+	height := 20
+	width += 4
+
+	// Set the modal's position and size.
+	x := (screenWidth - width) / 2
+	y := (screenHeight - height) / 2
+	m.SetRect(x, y, width, height)
+
+	// Draw the frame.
+	m.frame.SetRect(x, y, width, height)
+	m.frame.Draw(screen)
+}

internal/ui/ui.go

@@ -57,7 +57,7 @@ func NewUI(path string) (UI, error) {
 		pages:           tview.NewPages(),
 		flex:            tview.NewFlex(),
 		quitModal:       tview.NewModal(),
-		addModal:        NewModalInput(),
+		addModal:        newModalInput(),
 		focusedColumn:   0,
 		columns:         nil,
 		board:           kanban,
@@ -93,7 +93,7 @@ func (u *UI) init() error {
 			u.shiftColumnFocus(previous)
 		case letter == 'l' || key == tcell.KeyRight:
 			u.shiftColumnFocus(next)
-		case letter == 'a':
+		case letter == 'c':
 			if u.mode == normal {
 				u.pages.ShowPage(addPage)
 				u.SetFocus(u.addModal)
@@ -156,9 +156,9 @@ func (u *UI) init() error {
 
 // initAddInputModal initialises the add input modal.
 func (u *UI) initAddInputModal() {
-	doneFunc := func(text string, success bool) {
+	doneFunc := func(text, description string, success bool) {
 		if success {
-			_ = u.newCard(text, "")
+			_ = u.newCard(text, description)
 		}
 
 		u.pages.HidePage(addPage)