Adds options for bar workspace button shape (#582)

* Add option for default workspace indicator radius

Enabling this option allows for the changing of the workspaces indicator
shape into a cornered rectangular/square shape.

This radius value was previously hard-coded for a full round indicator
shape. This change exposes an option in the `settings-dialog` under
Configuration > Bar > Workspaces > Indicator Radius

default value: `1.9rem * 0.6`

{
  "theme.bar.buttons.workspaces.radius": "1.9rem * 0.6"
}

* Adds options for workspace indicator height, width, and active_width

This adds some additional options to allow for further customization to
the default workspace indicators.

Nests the radius from my previous commit into an indicator scoped option:

```ts
theme: {
  bar: {
    workspaces: {
      indicator: {
        radius: opt('1.9rem * 0.6'),
        height: opt('4em'),
        width: opt('4em'),
        active_width: opt('12em'),
      }
    }
  }
}
```

* Apply suggestions from code review

---------

Co-authored-by: Jas Singh <jaskiratpal.singh@outlook.com>
This commit is contained in:
Evan Fiddes
2024-12-21 16:42:03 -07:00
committed by GitHub
parent 3356abc776
commit 7111830e3c
3 changed files with 37 additions and 7 deletions

View File

@@ -1,9 +1,9 @@
.workspaces {
label {
font-size: 0.2em;
min-width: 4em;
min-height: 4em;
border-radius: 1.9rem * 0.6;
min-width: $bar-buttons-workspaces-pill-width;
min-height: $bar-buttons-workspaces-pill-height;
border-radius: $bar-buttons-workspaces-pill-radius;
transition: 300ms * 0.5;
background-color: $bar-buttons-workspaces-available;
color: $bar-buttons-workspaces-available;
@@ -11,15 +11,15 @@
&.occupied {
background-color: $bar-buttons-workspaces-occupied;
color: $bar-buttons-workspaces-occupied;
min-width: 4em;
min-height: 4em;
min-width: $bar-buttons-workspaces-pill-width;
min-height: $bar-buttons-workspaces-pill-height;
}
&.active {
background-color: $bar-buttons-workspaces-active;
color: $bar-buttons-workspaces-active;
min-width: 12em;
min-height: 4em;
min-width: $bar-buttons-workspaces-pill-active_width;
min-height: $bar-buttons-workspaces-pill-height;
}
&.workspace-icon {