feat(ux/#2496): Configurable mode indicator #3391
Conversation
andr3h3nriqu3s11
commented
Apr 9, 2021
andr3h3nriqu3s11
commented
There was a problem hiding this comment.
This is awesome @andr3h3nriqu3s11 ! Works great:
Thank you for adding the documentation for it, too 👍
|
Thank you @andr3h3nriqu3s11 for implementing this 🙇🏻♂️ Since I mentioned that already in #2496 today, is feasible to make this a bit more generic? as a user, I tell Oni where to put the status bar items. I personally don't like the positioning of a few items currently in Oni and it makes it hard to switch back and forth between VS Code. On the top of my head, I imagine something like: {
"workbench.statusBar.items": {
"start": ["item1", "item2", "..."],
"center": ["item3"],
"end": ["...", "item4"]
}
}
The WDYT? Thanks again for taking care of this, I really miss this feature. |
| </View>; | ||
| }; | ||
| }; | ||
|
|
||
| module Configuration = { | ||
| open Config.Schema; | ||
| let visible = setting("workbench.statusBar.visible", bool, ~default=true); | ||
| let modeIndicator = | ||
| setting("workbench.statusBar.modeIndicator", string, ~default="rigth"); |
There was a problem hiding this comment.
| setting("workbench.statusBar.modeIndicator", string, ~default="rigth"); | |
| setting("workbench.statusBar.modeIndicator", string, ~default="right"); |
|
That's a great idea @z0al, and I am already working on it. Although I found some problems:
"workbench.statusBar.items.start": ["notificationCount"],
"workbench.statusBar.items.notification.start": ["notificationPopups", "macro", "leftGeneratedItems", "diagnosticCount", "scmItems"],
"workbench.statusBar.items.notification.center": [],
"workbench.statusBar.items.notification.end": ["rightGeneratedItems", "lineEndings", "indentation", "fileType", "position" ],
"workbench.statusBar.items.end": ["modeIndicator"], |
You're a lifesaver 🎉 . Happy to help with whatever I can.
I figured it wouldn't be that simple but I don't quite understand what kind of items are "supposed to be hidden by the notification popup." Would you be so kind to elaborate?
By these automatically generated items do you by extensions or some other source? In any case, that's what I had in mind when it comes to the // Having "..." means place any items that I didn't mention in its position. Could be used for "leftGeneratedItems"?
"workbench.statusBar.items.start": ["modeIndiactor", "git", "..."]
// This means the notification count will always be at the very right, anything else, including "rightGeneratedItems" will be at the place of "..."
"workbench.statusBar.items.end": ["...", "notificationCount"]
I don't know, I guess people more familiar with the code would help here, but I don't mind the shape of the config itself as long as it does the job :) Again, happy to jump in and help with whatever I can. It will be my first time coding in Reason/OCaml but I guess it shouldn't be super hard. Also maybe this PR isn't the right place to discuss. Don't mind switching to the Discord server or in the referenced issue. |
|
Thanks @andr3h3nriqu3s11 and @z0al for all the thinking around here. Sorry for the slow reply; Friday/weekend ended up being busier than I expected - I'll take a more in-depth look on Monday. I like the idea of having a holistic solution that covers both the mode indicator and the general status bar configuration, very cool.
Good question - I was curious here too. Once the notification is showing, we only show a small subset of the status bar - really just the notification count and mode, at the moment:
Basically - we have a couple of status bar UI elements that are hardcoded to show with the notification. The positioning, in general, would be the same between the 'non-notification' display and notification display. So I wonder if we could streamline the syntax too: The EDIT: I just saw the discussion in #2496 - the (I like the idea of using One open question I need to look into is if there is a good way to specify where extension-provided status bar items should live. I believe that we actually get the extension id when a status bar item is created, so that could mean we could do something like this: to override the positioning of the status bar items. I'll take a look at this a bit more Monday and see if it's doable, that would be a neat addition. But even without that, the
Right, it's a little confusing! We have an (We'd probably use |
Yep, 💯 agree. And I think we are all convinced that the whitelisting approach ( However, we still need another configure to decide the behavior of the notification. I see three cases:
For that, I was thinking of having something like: "workbench.statusBar.notification.mode": "full|stretch|compact"I think that should be more than enough to handle all kinds of customizations.
Are you referring to I copied code from @andr3h3nriqu3s11's branch and tried to implement the above points on this branch. Obviously, didn't do much since I was literally Googling every line hahah. I'm surprised it compiles. But here is the summary of the changes: let (itemsStart, itemsEnd) =
getVisibleStatusBarItemIds(
statusBar.items,
startItemsConfig,
endItemsConfig,
);
let itemsStart =
itemsStart |> List.map(idToStatusBarElement) |> React.listToElement;
let itemsEnd =
itemsEnd |> List.map(idToStatusBarElement) |> React.listToElement;
<View ?key style={Styles.view(background, yOffset)}>
<section align=`FlexStart> itemsStart </section>
<section align=`Center />
<section align=`FlexEnd> itemsEnd </section>
</View>;
P.S. Sorry about the mess. When I suggested we continue the discussion on the referenced issue I thought this PR is going to be merged very soon and didn't think @andr3h3nriqu3s11 would work on the suggestions right away :D |
Thank you, @bryphe I was able to do it! 😁
That would be awesome, right now I did that filtering based on the Features_StatusBar.Item.t.id(this is probably wrong, I haven't really tested it...) |
I don't think this is necessary because you can control that by just putting the items you want on showOnNotification... let (itemsStart, itemsEnd) =
getVisibleStatusBarItemIds(
statusBar.items,
startItemsConfig,
endItemsConfig,
);
let itemsStart =
itemsStart |> List.map(idToStatusBarElement) |> React.listToElement;
let itemsEnd =
itemsEnd |> List.map(idToStatusBarElement) |> React.listToElement;
<View ?key style={Styles.view(background, yOffset)}>
<section align=`FlexStart> itemsStart </section>
<section align=`Center />
<section align=`FlexEnd> itemsEnd </section>
</View>;
I think this is not really a good idea because it could break how the people o created extensions, put their items on the bar... Well I did some work based on your ideas... And it was not easy as looping one more time to add the notifications because the notification popup would look weird, also it was not simple as looping one more time because you have to that would leave the notification popup message weirdly where it could not display the message because the View that the message is in does not expand for the message to appear(this could lead to some weird situations), but I was able to do it... Here is a demo, and it also shows kinda everything including that weird not expanding thing. |
I will reply later after work on why I think |
Alright, below is how I see the abstract problem & the solution. I will leave what needs to be done code-wise for the experts (You both & other folks more familiar with the code). Thank you for taking the time to work on this btw. TL;DR
The core problemAs an Oni user, I want to be able to adjust how the editor status bar looks. In particular, I want to have the possibility to do the following:
The proposed solutionExpose new status bar configurations:
{
"workbench.statusBar.items": {
// List of item ids to display on the left side
"left": [],
// List of item ids to display on the right side
"right": [],
// List of item ids to hide always
"hidden": []
}
}What is an item?
Syntax notes:
Usage ExamplesThese examples focus on 1. Static items{
"workbench.statusBar.items": {
// Show only mode indicator on the left side. No matter what.
"left": ["modeIndicator"],
// Show only the position on the left side. No matter what.
"right": ["position"]
}
}2. Static items to the left and everything else goes to the right{
"workbench.statusBar.items": {
// Show only mode indicator on the left side. No matter what.
"left": ["modeIndicator"],
// Everything else goes to the right but keep the notification count the last item.
// The "..." here refers to: left & right aligned items by default (Including built-in items).
"right": ["...", "notificationCount"]
}
}3. Show everything but rearranged{
"workbench.statusBar.items": {
// Show mode indicator, notification then everything that's left aligned by default (Including built-in items).
"left": ["modeIndicator", "notification", "..."],
// The "..." here refers to: right aligned items by default (including built-in items).
"right": ["...", "notificationCount"]
}
}The Challenge(s)The Notification PopupOne thing that Oni does differently from other editors like VS Code is that it shows Notification Popus as a banner in the status bar itself. When shown, it hides all items except few specific ones. I discussed the solution above assuming the Notification will be shown just like any other status bar item, literally. Its position can be determined by using the item {
"workbench.statusBar.items": {
"left": ["modeIndicator", "notification"],
"right": ["...", "notificationCount"]
}
}Should produce something like (notice that the notification ( Why I think this is better than the full-blown popup?
But, I understand that such behavior may not be favorable by all users. There must be a reason the current behavior is the way it's, right?. So, to continue supportting that we need to have two more configurations. {
"workbench.statusBar.items": {
// List of item Ids to be shown when a notification message is visible.
// ONLY relevant when the mode is set to "default", and has no effect in "compact".
"showInNotification": [],
// Either "default" or "compact".
"notificationMode": "default"
}
}
How it works?
To achieve the current behavior of Oni, the default configurations can look something like this: {
"workbench.statusBar.items": {
"left": ["notificationCount", "diagnosticCount", "scm", "notification", "..."],
"right": [
"...",
"indentation",
"language",
"position",
"modeIndicator"
],
"showInNotification": [
"notificaitonCount",
"diagnosticCount",
"modeIndicator"
],
"notificationMode": "default",
"hidden": []
}
}I hope I made what I want clear enough now. Looking forward to hearing what you think @bryphe and @andr3h3nriqu3s11 Edit: fixed some typos and JSON code |
|
Love All the ideas from there I will start working on them 👍 And I finally understood what you meant by if there is no Also, the And I think that a possible improvement on your proposal is instead of having a separated item for the |
|
Thanks for the great summary / write-up @z0al and thank you @andr3h3nriqu3s11 for diving in and implementing it in #3402 - it looks like #3402 gets us really close. |
|
This pull request no longer make sense because of #3402, so I am going to close it. |
