Skip to content

button states conflate pressed with has-focus #7

@ToddG

Description

@ToddG

PREFACE
This is a cool library!!! However, I think it could be better. I have some issues that I'd like to raise:

WHAT
This code conflates the concepts of focus and button press:

Image

The button code only allows 2 states, pressed: Bool. It should be an enum with 3 states, shown below.

type Btn {
  Btn(
    width: Int,
    height: Int,
    text: String,
    pressed: Bool,
    align: style.Align,
    fg: Option(style.Color),
    bg: Option(style.Color),
    focus_fg: Option(style.Color),
    focus_bg: Option(style.Color),
  )
}

In this code, the button color should be based on one of 3 states:

fn draw_btn(btn: Btn) -> Element {
  let button = {
    "  " <> btn.text <> "  "
  }
  let width = string.length(button)
  let button = button |> calc_align(btn.align, btn.width)
  let bg = case btn.pressed {
    False -> btn.bg
    True -> btn.focus_bg
  }
  let fg = case btn.pressed {
    False -> btn.fg
    True -> btn.focus_fg
  }
  button
  |> style_text(fg, bg)
  |> Element(width:, height: 1)
}

I suggest that these are the valid button states:

pub type Button{
    Button                             // Button does not have focus, nor is it pressed
    ButtonHasFocus            // Button has focus (e.g. has been tabbed to) but has not been pressed
    ButtonPressed               // Button has been pressed
}

WHY

  • An unfocused button should have STYLE_1
  • A focused button should have STYLE_2
  • A pressed button should have STYLE_3

Where STYLE_X could be a color and/or text etc.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions