[[PR Description]]
Thanks @maxdeviant for all the help with this one 🫂
- Adds the `theme_importer` crate
- Adds the ability to import themes in VSCode Format.
- Adds the `assets/themes/src` folder with source files for imported
themes
- Adds an initial set of themes: `andromeda`, `ayu`, `dracula`,
`gruvbox`, `night-owl`, `noctis`, `palenight`, `rose-pine`, `solarized`,
`synthwave-84`.
From the README:
## Usage
- `cargo run -p theme_importer` - Import the context of
`assets/themes/src`
---
## Troubleshooting
As the importer generates rust files, you may need to manually do some
cleanup in `registry.rs` and `themes/mod.rs` if you remove themes or
delete the `themes` folder in the theme crate.
---
## Required Structure
To import a theme or series of themes 3 things are required:
- `family.json`: A JSON file containing the theme family metadata and
list of theme variants
- `{theme_name}.json`: One theme json for each theme variant
- `LICENSE`: A license file for the theme family
### `family.json`
#### `name`
The name of the theme family. Avoid special characters.
This will be used for the theme family directory name (lowercased) and
the theme family name in the Zed UI.
Good:
- `Rose Pine`
- `Synthwave 84`
- `Monokai Solarized`
Bad:
- `Rosé Pine`
- `Synthwave '84`
- `Monokai (Solarized)`
#### `author`
The author of the theme family. This can be a name or a username.
This will be used for the theme family author in the Zed UI.
#### `themes`
A list of theme variants.
`appearance` can be either `light` or `dark`. This will impact which
default fallback colors are used, and where the theme shows up in the
Zed UI.
### `{theme_name}.json`
Each theme added to the family must have a corresponding JSON file. This
JSON file can be obtained from the VSCode extensions folder (once you
have installed it.) This is usually located at `~/.vscode/extensions`
(on macOS).
You can use `open ~/.vscode/extensions` to open the folder in Finder
directly.
Copy that json file into the theme family directory and tidy up the
filenames as needed.
### `LICENSE`
A LICENSE file is required to import a theme family. Failing to provide
a complete text license will cause it to be skipped when the import is
run.
If the theme only provices a license code (e.g. MIT, Apache 2.0, etc.)
then put that code into the LICENSE file.
If no license is provided, either contact the theme creator or don't add
the theme.
---
### Complete Example:
An example family with multiple variants:
```json
{
"name": "Ayu",
// When both name and username are available
// prefer the `username (name)` format
"author": "dempfi (Ike Ku)",
"themes": [
{
"name": "Ayu Light",
"file_name": "ayu-light.json",
"appearance": "light"
},
{
"name": "Ayu Mirage",
"file_name": "ayu-mirage.json",
"appearance": "dark"
},
{
"name": "Ayu Dark",
"file_name": "ayu-dark.json",
"appearance": "dark"
}
]
}
```
An example single variant family:
```json
{
"name": "Andromeda",
"author": "Eliver Lara (EliverLara)",
"themes": [
{
"name": "Andromeda",
"file_name": "andromeda.json",
"appearance": "dark"
},
{
"name": "Andromeda Bordered",
"file_name": "andromeda-bordered.json",
"appearance": "dark"
}
]
}
```
Release Notes:
- N/A
- Make tab bar visible
- Fix tab text colors
- Ensure panes cover the available space
- Make the close button close
- Fix bug when unsubscribe called after remove
- WIP: start on editor element
- Add hover behaviour to tabs
- Add PointingHand on tabs
- gpui2: Add on_hover events
- Tooltip on tabs
- MOAR TOOLTIPS
- Use an `IconButton` for the tab close button
- Remove unneeded type qualification
- Tooltips in mouse event handler & fix executor timer
- Move more tooltip logic into gpui2 & fix tooltip moving on paint
- Update tooltip code a bit
- Allow multiple subscriptions from one entity handle
Release Notes:
- N/A
This PR applies a number of field renames in the `ThemeColors` struct
from the `import-theme` branch.
This will help prevent this branch from diverging too far from `main`.
Release Notes:
- N/A
---------
Co-authored-by: Nate Butler <iamnbutler@gmail.com>
Co-authored-by: Marshall Bowers <1486634+maxdeviant@users.noreply.github.com>
Language adapters 2.0 will systematically fix this kind of issue and
cause world peace but until we do that let's be less broken
Release Notes:
- Fixed being unable to find already downloaded Elixir-LS binary on the
file system.
Vue.js defined a bunch of symbols in it's scanner that collided with
those defined in HTML Tree-sitter grammar. I simply removed them as they
were meant for consumption by the external parties interested in HTML
parser with Vue support - since we handle that ourselves this is not
really necessary to preserve anymore. cc was firing up a bunch of
warnings about unused symbols when I've marked those functions as
`static`, so yeah.
Release Notes:
- Fixed HTML highlighting breaking in presence of <!-- --> comments
(fixeszed-industries/community#2166).
Vue.js defined a bunch of symbols in it's scanner that collided with those defined in HTML Tree-sitter grammar. I simply removed them as they were meant for consumption by the external parties interested in HTML parser with Vue support - since we handle that ourselves this is not really necessary to preserve anymore. cc was firing up a bunch of warnings about unused symbols, so yeah.
Follow-up of https://github.com/zed-industries/zed/pull/3225
That PR enabled every `project::Event::DiskBasedDiagnosticsFinished` to
update the diagnostics, which turned out to be bad, Zed does query for
more diagnostics after every excerpt update, and that seems to be due to
`Event::Edited` emitted by the multibuffers created in the diagnostics
panel.
* now, instead of eagerly updating the diagnostics every time, only do
that if the panel has 0 or 1 caret placed and no changes were made in
the panel yet.
Otherwise, use previous approach and register the updated paths to defer
their update later.
* on every `update_excerpts` in the diagnostics panel, query the entire
diagnostics summary (and store it for the future comparisons), compare
old and new summaries and re-query diagnostics for every path that's not
in both summaries.
Also, query every path that was registered during the
`DiskBasedDiagnosticsFinished` updates that were not eagerly updated
before.
This way we're supposed to get all new diagnostics (for new paths added)
and re-check all old paths that might have stale diagnostics now.
* do diagnostics rechecks concurrently for every path now, speeding the
overall process
Release Notes:
- Fixed diagnostics triggering too eagerly during multicaret edits and
certain stale diagnostics not being removed in time
[[PR Description]]
Adds checkboxes and their stories.
A checkbox can be created simply by passing an id:
~~~rust
#[derive(Component)]
pub struct Checkbox {
id: SharedString,
checked: Selected,
disabled: bool,
}
impl Checkbox {
pub fn new(id: impl Into<SharedString>) -> Self {
Self {
id: id.into(),
checked: Selected::Unselected,
disabled: false,
}
}
//...
}
~~~
I've documented this component rather thoroughly as an example of how
we've been thinking about building out UI elements:
~~~rs
pub fn render<V: 'static>(self, _view: &mut V, cx: &mut ViewContext<V>)
-> impl Component<V> {
let group_id = format!("checkbox_group_{}", self.id);
// The icon is different depending on the state of the checkbox.
//
// We need the match to return all the same type,
// so we wrap the eatch result in a div.
//
// We are still exploring the best way to handle this.
let icon = match self.checked {
// When selected, we show a checkmark.
Selected::Selected => {
div().child(
IconElement::new(Icon::Check)
.size(crate::IconSize::Small)
.color(
// If the checkbox is disabled we change the color of the icon.
if self.disabled {
IconColor::Disabled
} else {
IconColor::Selected
},
),
)
}
// In an indeterminate state, we show a dash.
Selected::Indeterminate => {
div().child(
IconElement::new(Icon::Dash)
.size(crate::IconSize::Small)
.color(
// If the checkbox is disabled we change the color of the icon.
if self.disabled {
IconColor::Disabled
} else {
IconColor::Selected
},
),
)
}
// When unselected, we show nothing.
Selected::Unselected => div(),
};
// A checkbox could be in an indeterminate state,
// for example the indeterminate state could represent:
// - a group of options of which only some are selected
// - an enabled option that is no longer available
// - a previously agreed to license that has been updated
//
// For the sake of styles we treat the indeterminate state as selected,
// but it's icon will be different.
let selected =
self.checked == Selected::Selected || self.checked ==
Selected::Indeterminate;
// We could use something like this to make the checkbox background when
selected:
//
// ~~~rust
// ...
// .when(selected, |this| {
// this.bg(cx.theme().colors().element_selected)
// })
// ~~~
//
// But we use a match instead here because the checkbox might be
disabled,
// and it could be disabled _while_ it is selected, as well as while it
is not selected.
let (bg_color, border_color) = match (self.disabled, selected) {
(true, _) => (
cx.theme().colors().ghost_element_disabled,
cx.theme().colors().border_disabled,
),
(false, true) => (
cx.theme().colors().element_selected,
cx.theme().colors().border,
),
(false, false) => (cx.theme().colors().element,
cx.theme().colors().border),
};
div()
// Rather than adding `px_1()` to add some space around the checkbox,
// we use a larger parent element to create a slightly larger
// click area for the checkbox.
.size_5()
// Because we've enlarged the click area, we need to create a
// `group` to pass down interaction events to the checkbox.
.group(group_id.clone())
.child(
div()
.flex()
// This prevent the flex element from growing
// or shrinking in response to any size changes
.flex_none()
// The combo of `justify_center()` and `items_center()`
// is used frequently to center elements in a flex container.
//
// We use this to center the icon in the checkbox.
.justify_center()
.items_center()
.m_1()
.size_4()
.rounded_sm()
.bg(bg_color)
.border()
.border_color(border_color)
// We only want the interaction states to fire when we
// are in a checkbox that isn't disabled.
.when(!self.disabled, |this| {
// Here instead of `hover()` we use `group_hover()`
// to pass it the group id.
this.group_hover(group_id.clone(), |el| {
el.bg(cx.theme().colors().element_hover)
})
})
.child(icon),
)
}
~~~
Release Notes:
- N/A
[[PR Description]]
A few mix organizational things in UI, as well as some toggle changes.
Simplify toggle:
```rust
/// Whether the entry is toggleable, and if so, whether it is currently toggled.
///
/// To make an element toggleable, simply add a `Toggle::Toggled(_)` and handle it's cases.
///
/// You can check if an element is toggleable with `.is_toggleable()`
///
/// Possible values:
/// - `Toggle::NotToggleable` - The entry is not toggleable
/// - `Toggle::Toggled(true)` - The entry is toggleable and toggled
/// - `Toggle::Toggled(false)` - The entry is toggleable and not toggled
#[derive(Debug, Copy, Clone, PartialEq, Eq)]
pub enum Toggle {
NotToggleable,
Toggled(bool),
}
```
Adds helper functions to easily get the toggle and toggleable states:
```rust
impl Toggle {
/// Returns true if the entry is toggled (or is not toggleable.)
///
/// As element that isn't toggleable is always "expanded" or "enabled"
/// returning true in that case makes sense.
pub fn is_toggled(&self) -> bool {
match self {
Self::Toggled(false) => false,
_ => true,
}
}
pub fn is_toggleable(&self) -> bool {
match self {
Self::Toggled(_) => true,
_ => false,
}
}
}
```
Pulls `disclosure_control` out of components and creates a common def:
```rust
pub fn disclosure_control<V: 'static>(toggle: Toggle) -> impl Component<V> {
match (toggle.is_toggleable(), toggle.is_toggled()) {
(false, _) => div(),
(_, true) => div().child(
IconElement::new(Icon::ChevronDown)
.color(IconColor::Muted)
.size(IconSize::Small),
),
(_, false) => div().child(
IconElement::new(Icon::ChevronRight)
.color(IconColor::Muted)
.size(IconSize::Small),
),
}
}
```
disclosure_control will likely get pulled into it's own component in the
future instead of being in toggle.
Release Notes:
- N/A
